/* LIVEN · V10 Lab · generated by tools/lab/build.mjs (lab-130). Do not edit: change tools/lab/css/*.css */

/* ===== _base.css ===== */
/* =====================================================================
   LIVEN · V10 Lab · base design system "Quiet Intelligence" (ESTRATEGIA §11)
   Source: tools/lab/css/_base.css → concatenated first into site-lab/css/lab.css.
   Page teams: never edit this file. Scope your CSS under body.p-<id> in tools/lab/css/<id>.css.
   ===================================================================== */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: 'Newsreader'; font-style: italic; font-weight: 300 400; font-display: swap;
  src: url(/fonts/newsreader-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap;
  src: url(/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* lab-07v (client): Marcellus, only for the Liven Philosophy line (regular only; the italic stays Newsreader's) */
@font-face {
  font-family: 'Marcellus'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/fonts/marcellus-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk'; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url(/fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- tokens (§11.1: values from site/css/styles.css, renamed by material) ---------- */
:root {
  --linen: #F5F2EC;          /* base background */
  --chukum: #E8E1D5;         /* alternate bands, typographic cards */
  --sand: #C9B99E;           /* warm surfaces, background grid */
  --stone: #7E817A;          /* annotation lines on photos (never small text on linen) */
  --ink: #22221F;            /* text, dark bands */
  --ink-soft: #4A4944;       /* paragraphs */
  --ink-2: #5E615B;          /* secondary text (AA on linen and chukum) */
  --olive: #3E4B3E;          /* filled buttons, links */
  --olive-deep: #2F3A30;
  --soft-gold: #B6A27A;      /* lines, marks and the × only (not AA as text) */
  --bronze: #6B5C3B;         /* small accent text */
  --clay: #8A4A36;           /* form errors only (AA on linen) */
  --hairline: rgba(34, 34, 31, .14);
  --hairline-strong: rgba(34, 34, 31, .32);
  --on-dark: rgba(245, 242, 236, .74); /* secondary text on --ink (AA) */
  --hairline-dark: rgba(245, 242, 236, .18);

  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;

  --gutter: clamp(16px, 5vw, 80px);
  --max: 1280px;
  --space: clamp(88px, 12vw, 168px);
  --space-s: clamp(48px, 7vw, 96px);
  --slow: cubic-bezier(.16, 1, .3, 1);
  --hdr-h: 64px;
  --sticky-h: 56px;
  --grid-gap: clamp(16px, 2vw, 24px);
  color-scheme: light;
}
@media (min-width: 1024px) { :root { --hdr-h: 76px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
html:has(body.sticky-on) { scroll-padding-bottom: calc(var(--sticky-h) + 16px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; min-height: 100vh; background: var(--linen); color: var(--ink);
  font: 400 17px/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.is-locked { overflow: hidden; }
img, svg, video, picture { display: block; max-width: 100%; }
img, video { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: var(--cursor-link, pointer); }
:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 2px; }
/* dark bands: olive would be 1.7:1 on ink, linen is 14:1 */
.ftr :focus-visible, .section--ink :focus-visible, .on-dark :focus-visible { outline-color: var(--linen); }
main:focus { outline: none; }
[hidden] { display: none !important; }
::selection { background: rgba(182, 162, 122, .35); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.section { padding-block: var(--space); }
.section--s { padding-block: var(--space-s); }
.section--chukum { background: var(--chukum); }
.section--ink { background: var(--ink); color: var(--linen); }
.section--ink .lead, .section--ink p, .section--ink .eyebrow, .section--ink .label, .section--ink .small { color: var(--on-dark); }
.stack { display: grid; gap: var(--stack, 24px); align-content: start; }
.stack--s { --stack: 12px; } .stack--l { --stack: clamp(32px, 4vw, 48px); }
.hr { height: 1px; border: 0; background: var(--hairline); margin: 0; }

/* 12 / 8 / 4 column grid (§11.2). Children span the full row unless told otherwise.
   Mobile (<768): .m-1…4 · tablet (768–1023): .t-1…8 · desktop (≥1024): .d-1…12, .ds-1…12 = start column.
   Spans are written as "auto / span N" (the span lives in grid-column-END) so a .ds-N start combines with a .d-N span
   ("span N" alone would put the span in grid-column-start, and .ds-N would reset it to one column). */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--grid-gap); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
.grid > .m-1 { grid-column: auto / span 1; } .grid > .m-2 { grid-column: auto / span 2; } .grid > .m-3 { grid-column: auto / span 3; } .grid > .m-4 { grid-column: auto / span 4; }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .grid > .t-1 { grid-column: auto / span 1; } .grid > .t-2 { grid-column: auto / span 2; } .grid > .t-3 { grid-column: auto / span 3; } .grid > .t-4 { grid-column: auto / span 4; }
  .grid > .t-5 { grid-column: auto / span 5; } .grid > .t-6 { grid-column: auto / span 6; } .grid > .t-7 { grid-column: auto / span 7; } .grid > .t-8 { grid-column: auto / span 8; }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .grid > .d-1 { grid-column: auto / span 1; } .grid > .d-2 { grid-column: auto / span 2; } .grid > .d-3 { grid-column: auto / span 3; } .grid > .d-4 { grid-column: auto / span 4; }
  .grid > .d-5 { grid-column: auto / span 5; } .grid > .d-6 { grid-column: auto / span 6; } .grid > .d-7 { grid-column: auto / span 7; } .grid > .d-8 { grid-column: auto / span 8; }
  .grid > .d-9 { grid-column: auto / span 9; } .grid > .d-10 { grid-column: auto / span 10; } .grid > .d-11 { grid-column: auto / span 11; } .grid > .d-12 { grid-column: auto / span 12; }
  .grid > .ds-2 { grid-column-start: 2; } .grid > .ds-3 { grid-column-start: 3; } .grid > .ds-4 { grid-column-start: 4; } .grid > .ds-5 { grid-column-start: 5; }
  .grid > .ds-6 { grid-column-start: 6; } .grid > .ds-7 { grid-column-start: 7; } .grid > .ds-8 { grid-column-start: 8; } .grid > .ds-9 { grid-column-start: 9; }
  .grid > .ds-1 { grid-column-start: 1; } .grid > .ds-10 { grid-column-start: 10; } .grid > .ds-11 { grid-column-start: 11; }
}
.grid--center { align-items: center; }
.grid--end { align-items: end; }

/* ---------- type (§11.1) ---------- */
.display { font: 300 clamp(2.6rem, 7.2vw, 6.6rem)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.h2 { font: 300 clamp(2rem, 4.4vw, 3.9rem)/1.06 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.h3 { font: 400 clamp(1.35rem, 2vw, 1.8rem)/1.22 var(--serif); text-wrap: balance; }
.big { font: 300 clamp(1.5rem, 2.9vw, 2.55rem)/1.28 var(--serif); letter-spacing: -.005em; max-width: 30ch; text-wrap: pretty; }
.lead { font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--ink-soft); max-width: 52ch; text-wrap: pretty; }
.display em, .h2 em, .h3 em, .big em { font-style: italic; }
/* annotation interface: sans 13px, uppercase, tracked, tabular numbers */
.eyebrow, .label {
  font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.label { font-weight: 400; }
.small { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.prose { max-width: 64ch; color: var(--ink-soft); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font: 400 clamp(1.35rem, 2vw, 1.7rem)/1.25 var(--serif); color: var(--ink); margin-top: 2em; }
.prose h3 { font: 500 1.05rem/1.4 var(--sans); color: var(--ink); margin-top: 1.6em; }
.prose ul { list-style: none; padding: 0; }
.prose ul li { position: relative; padding-left: 1.2em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: 6px; height: 1px; background: var(--ink-2); }
.prose a { color: var(--olive); text-underline-offset: 4px; text-decoration-color: rgba(62, 75, 62, .7); } /* 3:1 on linen: the underline is the cue inside running text (WCAG 1.4.1) */
.prose a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* ---------- buttons & links (§11.7) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px; border: 1px solid var(--olive); border-radius: 100px;
  background: var(--olive); color: var(--linen); font: 500 15px/1.2 var(--sans); letter-spacing: .01em;
  text-decoration: none; text-align: center; white-space: nowrap;
  transition: background .3s, color .3s, border-color .3s, opacity .3s;
}
.btn:hover { background: var(--olive-deep); border-color: var(--olive-deep); }
.btn--fill { /* the one primary action of a screen */ }
.btn--line { background: transparent; color: var(--olive); }
.btn--line:hover { background: var(--olive); color: var(--linen); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn--quiet:hover { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.btn--light { background: var(--linen); border-color: var(--linen); color: var(--ink); }
.btn--light:hover { background: var(--chukum); border-color: var(--chukum); }
.btn--line-light { background: transparent; border-color: rgba(245, 242, 236, .5); color: var(--linen); }
.btn--line-light:hover { border-color: var(--linen); background: rgba(245, 242, 236, .08); }
.btn--block { display: flex; width: 100%; white-space: normal; }
.btn[disabled] { opacity: .6; cursor: progress; }
.arrow {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px;
  color: var(--olive); font: 500 15px/1.3 var(--sans); text-decoration: none;
}
.arrow > span:not(.arrow__glyph) { text-decoration: underline; text-decoration-color: rgba(62, 75, 62, .3); text-underline-offset: 5px; transition: text-decoration-color .3s; }
.arrow:hover > span:not(.arrow__glyph) { text-decoration-color: currentColor; }
.arrow__glyph { transition: transform .3s var(--slow); }
.arrow:hover .arrow__glyph { transform: translateX(3px); }
.arrow--back:hover .arrow__glyph { transform: translateX(-3px); }
.section--ink .arrow, .on-dark .arrow { color: var(--linen); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
@media (max-width: 767px) { .actions--stack { flex-direction: column; align-items: stretch; } .actions--stack .btn { width: 100%; } }

/* preview BUILD content that must disappear if that build is promoted to liveninteriors.com (Work while locked) */
html:not(.preview-host) .preview-only { display: none; }

/* ---------- preview notice (preview builds; shown only on non-production hosts: html.preview-host from boot.js) ---------- */
.preview-note { display: none; }
html.preview-host .preview-note {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 32px; padding: 6px var(--gutter);
  background: var(--chukum); color: var(--ink-2); font: 500 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: center;
  border-bottom: 1px solid var(--hairline);
}
.preview-note__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--soft-gold); flex: none; }

/* ---------- skip link ---------- */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--linen); text-decoration: none; }
.skip:focus { left: 8px; }

/* ---------- header (§7.1): always visible, linen 92 %, 1px line ---------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245, 242, 236, .97); /* no backdrop blur: it recomputed every frame over the WebGL breeze */
  border-bottom: 1px solid var(--hairline);
}
.hdr__in {
  display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); /* lab-02: six items (Contact) in both languages */
  max-width: var(--max); margin-inline: auto; min-height: var(--hdr-h); padding: 0 var(--gutter);
}
.hdr__logo { display: flex; align-items: center; min-height: 44px; flex: none; margin-right: auto; }
/* lockup: LIVEN wordmark + live "Spatial Wellbeing Lab" (legible text, not a 3 px line inside an image) */
.lockup { gap: 12px; text-decoration: none; color: var(--ink-2); }
.lockup img { width: auto; height: 17px; flex: none; }
.lockup__lab { display: none; }
@media (min-width: 768px) {
  .lockup img { height: 18px; }
  .lockup__lab {
    display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
    font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  }
  .lockup__lab::before { content: ""; width: 1px; height: 16px; background: var(--hairline-strong); }
}
/* footer: "LIVEN · Spatial Wellbeing Lab" at every width (§29); the header keeps the wordmark alone on phones */
.ftr__logo.lockup .lockup__lab {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font: 500 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
}
.ftr__logo.lockup .lockup__lab::before { content: ""; width: 1px; height: 16px; background: var(--hairline-dark); }
.ftr__logo.lockup { gap: 12px; flex-wrap: wrap; }
.ftr__logo.lockup img { height: 20px; }
.hdr__nav ul { display: flex; gap: clamp(18px, 1.9vw, 26px); }
.hdr__nav a {
  display: inline-flex; align-items: center; min-height: 44px; text-decoration: none;
  font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  box-shadow: inset 0 -1px 0 transparent; transition: color .25s, box-shadow .25s;
}
.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -10px 0 -9px var(--bronze); } /* bronze 5.8:1: a visible non-colour cue */
.hdr__tools { display: flex; align-items: center; gap: 12px; }
.hdr__lang, .sheet__lang, .ftr__lang {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 10px;
  font: 500 13px/1 var(--sans); letter-spacing: .06em; color: var(--ink-2); text-decoration: none; border-radius: 100px;
  transition: color .25s, background .25s;
}
.hdr__lang:hover { color: var(--ink); background: rgba(34, 34, 31, .06); }
.hdr__lang { letter-spacing: .1em; } /* lab-04: the code ("ES" / "EN") at every width, as in Liven Asesorías */
.hdr__cta, .hdr__compact { min-height: 44px; padding: 0 20px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; } /* §7.1 BOOK A CHECK-UP */
@media (min-width: 1024px) and (max-width: 1199px) { .hdr__in { gap: 16px; } .hdr__nav ul { gap: 18px; } .hdr__cta { padding: 0 16px; } }
/* with the nav visible, the "Spatial Wellbeing Lab" text needs ≥1360 px (ES labels + Work + Contact); below that the
   wordmark stands alone */
@media (min-width: 1024px) and (max-width: 1359px) { .hdr__logo .lockup__lab { display: none; } }
.hdr__cta.is-quiet, .hdr__compact.is-quiet { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.hdr__cta.is-quiet:hover, .hdr__compact.is-quiet:hover { background: var(--ink); color: var(--linen); border-color: var(--ink); }
.hdr__compact { display: none; padding: 0 16px; }
.hdr__menu {
  display: none; align-items: center; gap: 10px; min-height: 48px; min-width: 48px; padding: 0 4px 0 8px;
  background: none; border: 0; font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.hdr__menu-icon { position: relative; width: 22px; height: 9px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; }
@media (max-width: 1023px) {
  .hdr__nav { display: none; }
  .hdr__menu { display: inline-flex; }
}
@media (max-width: 767px) {
  .hdr__in { gap: 8px; }
  .hdr__cta { display: none; }
  .hdr__compact { display: inline-flex; }
  body.sticky-on .hdr__compact { visibility: hidden; } /* the sticky bar carries the CTA */
  .hdr__menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .hdr__menu { padding: 0; justify-content: center; }
}

/* ---------- header over the hero photograph (lab-03, the home: body[data-hdr-over]) ----------
   As in Liven Asesorías: on the photograph there is no bar, only the lockup, the links, the language and the menu in
   linen; the bar (linen, 1px line) and the Check-up button appear as soon as the page scrolls (lab.js .is-solid).
   The first block is pulled up under the header. Without JS: the plain bar and nothing pulled up. */
.lockup { position: relative; }
.lockup__light { position: absolute; left: 0; top: 50%; transform: translateY(-50%); opacity: 0; pointer-events: none; }
html.js body[data-hdr-over] main > [data-hero]:first-child { margin-top: calc(-1 * var(--hdr-h) - 1px); }
html.js body[data-hdr-over] .hdr { transition: background-color .4s ease, border-color .4s ease; }
html.js body[data-hdr-over] .hdr:not(.is-solid) { background: transparent; border-bottom-color: transparent; }
html.js body[data-hdr-over] .lockup__dark, html.js body[data-hdr-over] .lockup__light { transition: opacity .4s ease; }
html.js body[data-hdr-over] .hdr:not(.is-solid) .lockup__dark { opacity: 0; }
html.js body[data-hdr-over] .hdr:not(.is-solid) .lockup__light { opacity: 1; }
html.js body[data-hdr-over] .hdr:not(.is-solid) .lockup,
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__nav a,
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__lang,
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__menu { color: var(--linen); }
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__nav a:hover { color: #fff; }
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__lang:hover { background: rgba(245, 242, 236, .14); }
html.js body[data-hdr-over] .hdr:not(.is-solid) .lockup__lab::before { background: rgba(245, 242, 236, .55); }
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__nav a[aria-current] { box-shadow: inset 0 -10px 0 -9px var(--linen); }
/* the Check-up button waits for the bar: the hero has its own */
html.js body[data-hdr-over] .hdr__cta, html.js body[data-hdr-over] .hdr__compact { transition: opacity .3s ease, visibility 0s, background .3s, color .3s, border-color .3s; }
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__cta,
html.js body[data-hdr-over] .hdr:not(.is-solid) .hdr__compact { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s; }

/* menu sheet (mobile + tablet) */
.sheet {
  position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column;
  padding: 0 var(--gutter) calc(24px + env(safe-area-inset-bottom, 0px)); background: var(--linen);
  overflow-y: auto; opacity: 0; transition: opacity .2s ease;
}
.sheet.is-open { opacity: 1; }
.sheet__top { display: flex; align-items: center; min-height: var(--hdr-h); border-bottom: 1px solid var(--hairline); }
.sheet__close {
  display: inline-flex; align-items: center; gap: 12px; min-height: 48px; min-width: 48px; margin-left: auto;
  background: none; border: 0; font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.sheet__x { position: relative; width: 18px; height: 18px; }
.sheet__x::before, .sheet__x::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transform: rotate(45deg); }
.sheet__x::after { transform: rotate(-45deg); }
.sheet__nav { padding-block: clamp(24px, 6vh, 56px); }
.sheet__nav li + li { border-top: 1px solid var(--hairline); }
.sheet__nav a { display: flex; align-items: center; min-height: 64px; font: 300 clamp(1.9rem, 7vw, 2.6rem)/1.1 var(--serif); text-decoration: none; }
.sheet__nav a[aria-current] { font-style: italic; } /* lab-05t (client): italic + gold dot, as before */
.sheet__nav a[aria-current]::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--soft-gold); margin-left: 14px; }
.sheet__foot { margin-top: auto; display: grid; gap: 16px; justify-items: start; }
.sheet__foot .btn { width: 100%; }

/* ---------- mobile sticky bar (§7.1): 56px + safe area ---------- */
.sticky { display: none; }
@media (max-width: 767px) {
  .sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: 4px var(--gutter) calc(4px + env(safe-area-inset-bottom, 0px));
    min-height: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
    background: rgba(245, 242, 236, .96); border-top: 1px solid var(--hairline);
    transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s;
  }
  .sticky.is-shown { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; }
  .sticky .btn { min-height: 48px; font-size: 15px; padding-inline: 16px; }
  body.sticky-on { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px)); }
}
/* 360 px: "Agendar un Check-up · desde $250 USD" must stay on one line */
@media (max-width: 389px) { .sticky .btn { font-size: 14px; letter-spacing: 0; padding-inline: 12px; } }

/* ---------- footer (§7.2): the dark band ---------- */
.ftr { background: var(--ink); color: var(--linen); padding: clamp(64px, 8vw, 112px) 0 32px; font-size: 15px; }
.ftr a { text-decoration: none; }
.ftr a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 242, 236, .4); }
.ftr a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--soft-gold); } /* active page: a line, not a colour */
.ftr__top { padding-bottom: clamp(40px, 5vw, 64px); }
.ftr__logo { display: inline-flex; min-height: 44px; align-items: center; }
.ftr__logo { color: var(--on-dark); }
.ftr__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--grid-gap); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hairline-dark); }
@media (min-width: 1024px) { .ftr__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ftr__h { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark); margin-bottom: 14px; }
/* ES-4: "Contacto" is the link to /es/contacto/, so it looks like one (linen, underline, arrow); 44 px target, same row height */
.ftr__h--link a {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; margin-block: -13px; color: var(--linen);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 242, 236, .4);
}
.ftr__col li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--linen); }
.ftr__col .arrow { color: var(--linen); min-height: 44px; font-size: 15px; }
.ftr__mail { overflow-wrap: anywhere; }
.ftr__langrow { display: flex; }
.ftr__lang {
  padding: 0; justify-content: flex-start; color: var(--linen); font-size: 15px; letter-spacing: 0;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(245, 242, 236, .3);
}
/* a channel shown but not active yet (WhatsApp until SOCIAL.whatsapp is set): text, not a link */
.ftr__off { display: inline-flex; align-items: center; min-height: 44px; color: var(--linen); opacity: .45; cursor: default; }
.ftr__notes { display: grid; gap: 10px; max-width: 72ch; padding-top: 32px; font-size: 13.5px; line-height: 1.6; color: var(--on-dark); }

/* ---------- closing band (home · Contact, lib/html.mjs closingBand): the photo full bleed, the line on its quiet side ---------- */
.closing { position: relative; display: grid; overflow: hidden; background: var(--ink); color: var(--linen); }
.closing__media, .closing__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.closing__img { object-fit: cover; object-position: var(--closing-x, 30%) var(--closing-y, 50%); }
.closing::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.closing__in { position: relative; z-index: 1; display: grid; gap: 32px; align-content: center; }
.closing__eyebrow { color: var(--on-dark); margin-bottom: -16px; }
.closing__h { font: 300 clamp(1.9rem, 2.7vw, 2.75rem)/1.14 var(--serif); letter-spacing: -.01em; color: var(--linen); text-wrap: balance; }
.closing__actions { gap: 12px 16px; }
.closing__sub { margin-top: -12px; font: 300 clamp(1.15rem, 1.5vw, 1.4rem)/1.4 var(--serif); color: var(--linen); max-width: 30ch; text-wrap: pretty; } /* lab-05 */
.closing__note { margin-top: -16px; font-size: 13.5px; letter-spacing: .04em; color: var(--on-dark); }
@media (min-width: 1024px) {
  .closing { aspect-ratio: var(--closing-ratio, 1672 / 941); max-height: 100svh; min-height: 560px; }
  .closing::after { background: linear-gradient(90deg, rgba(34, 30, 24, .62), rgba(34, 30, 24, .18) 48%, transparent 62%); }
  /* the text never crosses the quiet third of the photo */
  .closing__in { padding: 64px 0 64px var(--gutter); width: max(300px, calc(31vw - var(--gutter) * .25)); max-width: 34rem; }
}
@media (max-width: 1023px) {
  .closing { min-height: max(560px, 88svh); align-items: end; }
  .closing__img { object-position: var(--closing-x-m, 66%) 50%; }
  .closing::after { background: linear-gradient(0deg, rgba(34, 30, 24, .88), rgba(34, 30, 24, .8) 45%, rgba(34, 30, 24, .45) 68%, rgba(34, 30, 24, 0) 88%); }
  .closing__in { padding: 48px var(--gutter) 56px; max-width: 40rem; }
}
.ftr__base { display: grid; gap: 20px; padding-top: 28px; font-size: 13px; letter-spacing: .04em; color: var(--on-dark); }

/* ---------- forms (§15) ---------- */
.form { display: grid; gap: 22px; max-width: 640px; }
.field { display: grid; gap: 6px; min-width: 0; border: 0; padding: 0; margin: 0; }
.field__label { font: 500 15px/1.4 var(--sans); color: var(--ink); padding: 0; } /* reading text, not annotation (no versales) */
.field__help { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: -2px; }
.field__input {
  width: 100%; min-height: 48px; padding: 11px 14px; background: rgba(255, 255, 255, .55);
  border: 1px solid var(--stone); border-radius: 2px; font-size: 16px; line-height: 1.4; color: var(--ink); /* 3.5:1 field edge (WCAG 1.4.11) */
  transition: border-color .2s, background .2s;
}
.field__input:hover { border-color: var(--ink-2); }
.field__input:focus { outline: 2px solid transparent; outline-offset: 0; border-color: var(--olive); background: #fff; box-shadow: 0 0 0 1px var(--olive); } /* transparent outline: visible in forced colours */
.field__textarea { min-height: 128px; resize: vertical; }
.field__select {
  appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: var(--cursor-link, pointer);
  background: rgba(255, 255, 255, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2322221F' stroke-width='1'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.field__input[aria-invalid="true"] { border-color: var(--clay); box-shadow: 0 0 0 1px var(--clay); }
.field__err { font-size: 14px; line-height: 1.45; color: var(--clay); display: flex; gap: 8px; align-items: baseline; }
.field__err::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--clay); transform: translateY(-2px); }
/* segmented radio */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg__opt { position: relative; display: inline-flex; }
.seg__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: var(--cursor-link, pointer); }
.seg__opt span {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border: 1px solid rgba(34, 34, 31, .5); border-radius: 100px;
  font-size: 15px; color: var(--ink-soft); transition: background .2s, color .2s, border-color .2s;
}
.seg__opt input:hover + span { border-color: var(--ink); color: var(--ink); }
.seg__opt input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.seg__opt input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 3px; }
.field--seg[aria-invalid] .seg__opt span, .field--seg.is-invalid .seg__opt span { border-color: var(--clay); }
.form__note { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); padding-left: 14px; border-left: 1px solid var(--soft-gold); }
.form__note a { color: var(--olive); text-underline-offset: 3px; text-decoration-color: rgba(62, 75, 62, .7); }
.form__foot { display: grid; gap: 14px; justify-items: start; padding-top: 6px; }
.form__consent { font-size: 13.5px; color: var(--ink-2); }
.form__consent a { color: var(--olive); text-underline-offset: 3px; }
.form__status { font-size: 15px; min-height: 1.5em; }
.form__status.is-error { color: var(--clay); }
.form__status.is-ok { color: var(--olive); }
.form__preview { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 767px) { .form__foot .btn { width: 100%; } }

/* ---------- tabs (fade hook: .is-active) ---------- */
.tabs__list { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--hairline); }
.tabs__tab {
  position: relative; min-height: 48px; padding: 0 2px; background: none; border: 0;
  font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: color .25s;
}
.tabs__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: transparent; transition: background .25s; }
.tabs__tab:hover { color: var(--ink); }
.tabs__tab[aria-selected="true"] { color: var(--ink); }
.tabs__tab[aria-selected="true"]::after { background: var(--ink); }
.tabs__panels { padding-top: 28px; }
.js .tabs__panel:not(.is-active) { display: none; }
.tabs__panel.is-active { animation: lab-fade .5s ease both; }
/* chips variant (M2 conditions, filters) */
.tabs--chips .tabs__list { border: 0; gap: 8px; }
.tabs--chips .tabs__tab {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(34, 34, 31, .5); border-radius: 100px;
  font: 400 15px/1 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-soft);
}
.tabs--chips .tabs__tab::after { display: none; }
.tabs--chips .tabs__tab:hover { border-color: var(--ink); color: var(--ink); }
.tabs--chips .tabs__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.tab-media { position: relative; overflow: hidden; background: var(--chukum); }
.tab-media > [data-tab-media] { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.tab-media > [data-tab-media].is-active { opacity: 1; }
.tab-media img { width: 100%; height: 100%; object-fit: cover; }
@keyframes lab-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- accordion + disclosure (+/−) ---------- */
.acc__item { border-top: 1px solid var(--hairline); }
.acc__item:last-child { border-bottom: 1px solid var(--hairline); }
.acc__btn, .disc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 56px;
  padding: 12px 0; background: none; border: 0; text-align: left; color: var(--ink);
}
.acc__title { font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.3 var(--serif); }
.disc__btn { width: auto; min-height: 44px; font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.acc__icon { position: relative; flex: none; width: 14px; height: 14px; }
.acc__icon::before, .acc__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .3s ease; }
.acc__icon::after { transform: rotate(90deg); }
[aria-expanded="true"] > .acc__icon::after { transform: rotate(0deg); }
.acc__panel { display: grid; grid-template-rows: 1fr; }
/* 6 px of air each side so a 3 px focus ring on a full-width control is not clipped by the height animation */
.acc__inner { overflow: hidden; min-height: 0; padding-inline: 6px; margin-inline: -6px; }
.js .acc__panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease-out, visibility 0s linear .3s; }
.js .acc__panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease-out, visibility 0s; }
.acc__panel.is-open > .acc__inner { padding-bottom: 24px; }
.disc .acc__panel.is-open > .acc__inner { padding: 8px 6px 12px; }

/* ---------- annotation language (§11.3) ---------- */
/* callout: 5px soft-gold dot + 1px leader + uppercase label */
.callout { display: inline-flex; align-items: center; gap: 0; font: 500 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; color: var(--ink); }
.callout__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--soft-gold); flex: none; box-shadow: 0 0 0 3px rgba(182, 162, 122, .18); }
.callout__line { width: var(--leader, 40px); height: 1px; background: var(--hairline-strong); flex: none; }
.callout__label { padding-left: 10px; }
.callout--left { flex-direction: row-reverse; }
.callout--left .callout__label { padding: 0 10px 0 0; }
.callout--photo .callout__line { background: rgba(245, 242, 236, .7); }
.callout--photo .callout__label { padding: 7px 12px; margin-left: 8px; background: rgba(245, 242, 236, .92); color: var(--ink); border-radius: 100px; }
.callout--photo.callout--left .callout__label { margin: 0 8px 0 0; }
/* measurement rule: 1px ticks every 8px, a long one every 40px (decorative, never numbers) */
.rule {
  height: 10px; width: 100%;
  background:
    linear-gradient(to right, var(--hairline-strong) 1px, transparent 1px) 0 100% / 40px 10px repeat-x,
    linear-gradient(to right, var(--hairline-strong) 1px, transparent 1px) 0 100% / 8px 5px repeat-x,
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) 0 100% / 100% 1px no-repeat;
}
.rule--v {
  width: 10px; height: 100%; min-height: 80px;
  background:
    linear-gradient(to bottom, var(--hairline-strong) 1px, transparent 1px) 0 0 / 10px 40px repeat-y,
    linear-gradient(to bottom, var(--hairline-strong) 1px, transparent 1px) 0 0 / 5px 8px repeat-y,
    linear-gradient(var(--hairline-strong), var(--hairline-strong)) 0 0 / 1px 100% no-repeat;
}
.rule--light { --hairline-strong: rgba(245, 242, 236, .28); }
/* hairline grid background (desktop only; M3 and Approach) */
/* Drawn on a pseudo-element inset like .wrap's content box (a % in background-position is an alignment, not an offset,
   so the old background drifted ~70 px off the columns at 1440). 8 columns, first and last line included. */
@media (min-width: 1024px) {
  .gridlines { position: relative; isolation: isolate; }
  .gridlines::before {
    content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; pointer-events: none;
    left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
    background: linear-gradient(to right, var(--hairline) 1px, transparent 1px) 0 0 / calc(100% / 8) 100% repeat-x;
    border-right: 1px solid var(--hairline);
  }
}
/* site grid for the Snapshot sample only */
.sitegrid { background-image: linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(to right, var(--hairline) 1px, transparent 1px); background-size: 24px 24px; }
/* "Visualization" label on AI images near real project names (§11.5) */
.viz-label {
  position: absolute; left: 12px; bottom: 12px; z-index: 1; padding: 6px 10px; border-radius: 100px;
  background: rgba(245, 242, 236, .92); color: var(--ink); font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.figure { position: relative; }
.figure figcaption, .caption { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }

/* ---------- Person × Space mark (§11.4) ---------- */
.pxs { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); line-height: 1; }
.pxs__svg { overflow: visible; flex: none; }
.pxs__lens { fill: var(--soft-gold); fill-opacity: .35; }
.pxs__label { font: 500 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
/* the 96×48 viewBox leaves 26 units of air right of the square: pull the label back so the lockup reads as one */
.pxs--lockup .pxs__label { margin-left: calc(var(--pxs-h, 48px) * -.5); }
.pxs__x { color: var(--soft-gold); }
.pxs--dark { color: var(--linen); }
.pxs--dark .pxs__lens { fill-opacity: .25; }

/* ---------- typographic case card (SHA / Paradisus: name, place, category; no grid, no marks) ---------- */
.case-card { display: grid; align-content: space-between; gap: 40px; min-height: 280px; padding: clamp(24px, 3vw, 36px); background: var(--chukum); }
.case-card__cat { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.case-card__name { font: 300 clamp(1.7rem, 2.8vw, 2.4rem)/1.08 var(--serif); letter-spacing: -.01em; }
.case-card__place { font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.case-card__media { display: none; } /* image slot with credit line: enabled only with photos delivered with permission */
.case-card.has-media .case-card__media { display: block; }

/* lab-06f: the dollar reference next to a price in pesos */
.price-ref { display: inline-block; margin-left: .5em; font: 400 14px/1.3 var(--sans); letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; }

/* ---------- case gallery (lab-05m, lib/html.mjs gallery + lab.js [data-gallery]): photos in one frame, crossfade ---------- */
.case-gallery { margin: 0; }
.case-gallery__stage { display: grid; touch-action: pan-y; }
.case-gallery__slide { grid-area: 1 / 1; position: relative; }
.case-gallery__slide img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--linen); }
/* lab-05w: two vertical images side by side in one 3:2 slide (SHA's FF&E and art) */
.case-gallery__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; aspect-ratio: 3 / 2; }
.case-gallery__pair picture { display: block; min-height: 0; }
.case-gallery__slide .case-gallery__pair img { height: 100%; aspect-ratio: auto; object-fit: cover; }
.case-gallery:not(.is-ready) .case-gallery__slide:not(.is-current) { display: none; }
.case-gallery.is-ready .case-gallery__slide { opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s linear .7s; }
.case-gallery.is-ready .case-gallery__slide.is-current { opacity: 1; visibility: visible; transition: opacity .7s ease, visibility 0s; }
/* lab-05u/05v (client): her legend on a design proposal, small, bottom right; no box (lab-05v): white text on a very
   soft fade of the photo's lower edge */
.case-proposal {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 40px 12px 9px; pointer-events: none;
  background: linear-gradient(to top, rgba(20, 20, 18, .34), rgba(20, 20, 18, 0));
  color: rgba(255, 255, 255, .92); font: italic 400 12px/1.3 var(--serif); letter-spacing: .01em; text-align: right; /* lab-05w: italic, smaller */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.case-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.case-gallery__cap { margin-right: auto; }
.case-gallery__nav { display: none; align-items: center; gap: 2px; margin-left: auto; }
.case-gallery.is-ready .case-gallery__nav { display: inline-flex; }
.case-gallery__count { min-width: 5.5ch; text-align: center; font: 500 12px/1 var(--sans); letter-spacing: .08em; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.case-gallery__btn {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink); cursor: var(--cursor-link, pointer); transition: background-color .2s ease;
}
@media (hover: hover) { .case-gallery__btn:hover { background: rgba(34, 34, 31, .06); } }
.case-gallery__btn:focus-visible { outline: 2px solid var(--olive); outline-offset: -2px; }
.case-gallery__btn svg { width: 22px; height: 11px; }

/* ---------- legal layout with "On this page" ---------- */
.legal { display: grid; gap: 40px; padding-block: var(--space-s) var(--space); }
@media (min-width: 1024px) { .legal { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); gap: var(--grid-gap) clamp(48px, 6vw, 96px); } }
.legal__toc { align-self: start; }
@media (min-width: 1024px) { .legal__toc { position: sticky; top: calc(var(--hdr-h) + 32px); } }
.legal__toc ol { display: grid; gap: 2px; margin-top: 12px; }
.legal__toc a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.legal__toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
/* html already has scroll-padding-top (header + 16px); scroll-margin adds to it */
.legal__body h2 { scroll-margin-top: 8px; }
.legal__review { display: none; }
html.preview-host .legal__review { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--chukum); font: 500 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.pending { display: inline-block; padding: 4px 10px; border: 1px dashed var(--hairline-strong); font: 500 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- motion, reduced motion, Save-Data ---------- */
/* moving between pages (lab-02): a short crossfade where the browser supports it; the header stays put.
   Progressive: other browsers navigate as before. Off with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .hdr { view-transition-name: lab-hdr; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .32s; animation-timing-function: ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}
/* bilingual 404: EN block by default, ES block when boot.js sees /es/ (html.lang-es); lab.js then keeps only one */
[data-lang-block] { display: contents; }
[data-lang-block="es"], html.lang-es [data-lang-block="en"] { display: none; }
html.lang-es [data-lang-block="es"] { display: contents; }
/* heavy media (video, WebGL) opt out with Save-Data or a 2g connection: mark them [data-heavy] */
.save-data [data-heavy] { display: none !important; }

/* ---------- print ---------- */
@media print {
  .hdr, .sheet, .sticky, .preview-note, .ftr__grid { display: none !important; }
  body { background: #fff; }
}

/* ---------- Windows High Contrast / forced colours: selected states keep a visible difference ---------- */
@media (forced-colors: active) {
  .seg__opt input:checked + span,
  .tabs--chips .tabs__tab[aria-selected="true"],
  .journal-filter[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .tabs__tab[aria-selected="true"]::after { forced-color-adjust: none; background: Highlight; }
  .hdr__nav a[aria-current] { text-decoration: underline; }
}
/* lab-07f (client): the Vesica Piscis mark of the lockup (inline SVG, follows the lockup's colour) */
.lockup__word { position: relative; display: inline-flex; align-items: center; }
.lockup__mark { width: 30px; height: 30px; flex: none; margin-right: -4px; overflow: visible; }
.lockup__mark circle { fill: none; stroke: currentColor; stroke-width: 1.4; }
.lockup__lens { fill: var(--soft-gold); fill-opacity: .35; stroke: none; }
.hdr .lockup__mark { color: var(--ink); }
html.js body[data-hdr-over] .hdr:not(.is-solid) .lockup__mark { color: var(--linen); }
.ftr .lockup__mark { color: var(--linen); width: 34px; height: 34px; }

/* lab-09m (client, 2026-10-27): "el cursor que sea el logo de Liven": the Vesica as the pointer on mouse devices; links and
   buttons show it with the lens filled; text fields keep the text cursor */
@media (hover: hover) and (pointer: fine) {
  :root { --cursor-link: url(/brand/cursor-vesica-link.svg) 16 16, url(/brand/cursor-vesica-link.png) 16 16, pointer; }
  html, body { cursor: url(/brand/cursor-vesica.svg) 16 16, url(/brand/cursor-vesica.png) 16 16, auto; }
  a, button, summary, label, select, [role="button"], [role="tab"], input[type="radio"], input[type="checkbox"], input[type="submit"] { cursor: var(--cursor-link); }
  input[type="text"], input[type="email"], input[type="tel"], input:not([type]), textarea { cursor: text; }
}

/* ===== about.css ===== */
/* LIVEN · V10 Lab · ABOUT (/about/, /es/nosotros/). Scoped under body.p-about.
   Editorial, not a CV: statements in Newsreader 300, reading text in Hanken Grotesk.
   lab-03 (client): only the philosophy and Aime's bio; the photograph of the woman in the chair, "What shapes Liven",
   the Biohausen line and the closing links are gone. */

/* desktop placements (explicit start / span: base .ds-* resets the span, see SHARED CHANGE REQUESTS) */
@media (min-width: 1024px) {
  .p-about .grid > .about-philo__col { grid-column: 3 / span 8; }
  .p-about .grid > .about-founder__text { grid-column: 7 / span 6; }
}

/* ---------- opening: what Liven is and where (lab-05s: the metaphor stays in the home) ---------- */
.p-about .about-philo { padding-block: clamp(56px, 8vw, 128px); }
.p-about .about-philo__line { max-width: 24ch; text-wrap: balance; }

/* ---------- Aime Nava ---------- */
.p-about .about-founder .grid { row-gap: 32px; }
.p-about .about-founder__fig { background: var(--chukum); }
.p-about .about-founder__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.p-about .about-founder__role { color: var(--bronze); }
.p-about .about-founder__quote { padding-top: 20px; border-top: 1px solid var(--hairline); }
@media (max-width: 767px) { .p-about .about-founder__fig { max-width: 420px; } }

/* lab-07o (client): what inspires Liven */
.p-about .about-inspires { padding-block: clamp(56px, 8vw, 112px); border-bottom: 1px solid var(--hairline); }
.about-inspires__h { margin-bottom: clamp(24px, 3vw, 40px); }
.about-inspires__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline-strong); }
.about-inspire { display: grid; gap: 8px; padding: 24px 0 26px; border-bottom: 1px solid var(--hairline); }
@media (min-width: 900px) { .about-inspire { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 var(--grid-gap); align-items: baseline; } }
.about-inspire__name { font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.2 var(--serif); }
.about-inspire__text { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.about-inspire__more { white-space: nowrap; color: var(--ink); text-underline-offset: 4px; }

/* ===== checkup.css ===== */
/* LIVEN · V10 Lab · /check-up/ (ESTRATEGIA §10.4). Every selector is scoped: .p-checkup or .checkup-*.
   Two equal modality "cards" drawn as one hairline plan with two rooms; rows align across both on ≥1024 px (subgrid).
   Mobile: H1 + one line, then Remote with its button above the fold at 390 × 844.
   lab-03: the forms take the V-final enquiry look (.enq), Snapshot and Scope are gone ("Who Liven is for": home, lab-04). */

/* ---------- CHK-1 · opening ---------- */
.checkup-open { padding-block: clamp(20px, 4vw, 56px) clamp(20px, 3vw, 40px); }
.checkup-open__h1 {
  font: 300 clamp(1.85rem, 4.8vw, 4rem)/1.04 var(--serif); letter-spacing: -.02em;
  max-width: 17ch; text-wrap: balance;
}
/* desktop: the line sits beside the H1, so both cards and the Remote button share the first screen (1440 × 900) */
@media (min-width: 1024px) {
  .checkup-open .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--grid-gap); align-items: end; }
  .checkup-open__intro { margin: 0 0 .5em; }
  .checkup-notice { grid-column: 1 / -1; }
}
.checkup-nowrap { white-space: nowrap; }
.checkup-tm { position: relative; top: -.95em; margin-left: .04em; font-size: .36em; letter-spacing: 0; }
.checkup-open__intro { margin-top: clamp(10px, 1.6vw, 20px); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-soft); }
/* lab-06aj: the problem (sans, the question in ink) and the answer (serif, on a hairline) */
.checkup-open__problem { max-width: 40ch; text-wrap: pretty; }
.checkup-open__q { color: var(--ink); }
.checkup-open__answer {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline-strong); max-width: 30ch;
  font: 400 clamp(1.2rem, 1.7vw, 1.45rem)/1.3 var(--serif); color: var(--ink); text-wrap: balance;
}
@media (max-width: 767px) {
  .checkup-open__intro { font-size: 1rem; }
  .checkup-open__answer { margin-top: 10px; padding-top: 10px; font-size: 1.15rem; }
}
.checkup-notice {
  margin-top: 18px; max-width: 60ch; padding: 10px 0 10px 14px; border-left: 1px solid var(--soft-gold);
  font-size: 15.5px; line-height: 1.5; color: var(--ink);
}

/* ---------- CHK-2 · the two modes ---------- */
.checkup-modes-sec { padding-bottom: var(--space-s); }
.checkup-modes { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--hairline-strong); }
.checkup-card {
  display: grid; align-content: start; row-gap: 20px; min-width: 0;
  padding: clamp(20px, 2.8vw, 36px) clamp(18px, 3.2vw, 44px) clamp(8px, 1.6vw, 20px);
  scroll-margin-top: calc(var(--hdr-h) + 12px);
}
.checkup-card + .checkup-card { border-top: 1px solid var(--hairline-strong); }
/* lab-03: side by side from 1024 px (was 768): a half card on a tablet is too narrow for the V-final form's rows */
@media (min-width: 1024px) {
  .checkup-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkup-card + .checkup-card { border-top: 0; border-left: 1px solid var(--hairline-strong); }
  @supports (grid-template-rows: subgrid) {
    .checkup-modes { grid-template-rows: repeat(4, auto); }
    .checkup-card { grid-row: span 4; grid-template-rows: subgrid; }
  }
}
.checkup-card__head { display: grid; gap: 10px; align-content: start; }
.checkup-card__title { font: 300 clamp(1.9rem, 3.2vw, 2.7rem)/1.05 var(--serif); letter-spacing: -.01em; }
.checkup-card__scope { font-size: clamp(1rem, 1.25vw, 1.12rem); line-height: 1.5; color: var(--ink-soft); max-width: 48ch; }

/* price line (§11.7): duration in annotation type, price in serif, hairline above */
.checkup-card__meta { display: grid; gap: 8px; align-content: start; padding-top: 16px; border-top: 1px solid var(--hairline-strong); }
.checkup-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 4px; font-variant-numeric: tabular-nums; }
.checkup-price__dur { font: 500 15px/1.4 var(--sans); color: var(--ink-2); }
.checkup-price__sep { font: 500 15px/1.4 var(--sans); color: var(--ink-2); white-space: pre; }
.checkup-price__from { font-size: 15px; color: var(--ink-2); white-space: pre; }
.checkup-price__amt { font: 300 clamp(1.5rem, 2.2vw, 1.9rem)/1.1 var(--serif); color: var(--ink); white-space: nowrap; }
.checkup-card__travel { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

.checkup-card__list li {
  position: relative; padding: 9px 0 9px 18px; border-bottom: 1px solid var(--hairline);
  font-size: 15.5px; line-height: 1.45; color: var(--ink-soft);
}
.checkup-card__list li:first-child { padding-top: 0; }
.checkup-card__list li:first-child::before { top: .72em; }
.checkup-card__list li::before { content: ""; position: absolute; left: 0; top: calc(9px + .72em); width: 8px; height: 1px; background: var(--ink-2); }
.checkup-card__observe { font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; }

.checkup-card__rest { display: grid; align-content: start; row-gap: 14px; min-width: 0; }
.checkup-card__act { display: grid; gap: 10px; }
.checkup-card__btn { max-width: 420px; }
.checkup-card__note { font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.checkup-card__policy { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.checkup-card__policy a { color: var(--olive); text-underline-offset: 3px; text-decoration-color: rgba(62, 75, 62, .7); }
.checkup-card__policy a:hover { text-decoration-color: currentColor; }
/* 44 px target on touch without changing the line */
@media (pointer: coarse) {
  .checkup-card__policy a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}

/* CHK-3 · How it works +: a route of nouns (dots on one hairline), no numbers */
.p-checkup .checkup-steps { border-bottom: 1px solid var(--hairline); }
.p-checkup .checkup-steps .disc__btn { width: 100%; justify-content: space-between; }
.checkup-steps__list { position: relative; display: grid; gap: 2px; padding: 4px 0 4px 20px; }
.checkup-steps__list::before { content: ""; position: absolute; left: 2px; top: 16px; bottom: 16px; width: 1px; background: var(--hairline-strong); }
.checkup-steps__list li { position: relative; padding: 5px 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.checkup-steps__list li::before {
  content: ""; position: absolute; left: -20px; top: calc(5px + .7em - 2.5px); width: 5px; height: 5px; border-radius: 50%;
  background: var(--linen); border: 1px solid var(--ink-2); box-sizing: border-box;
}
.checkup-steps__list li:last-child::before { background: var(--soft-gold); border-color: var(--soft-gold); }
.checkup-steps__note { margin-top: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }

/* fallback / On-site forms revealed inside the card (base .acc__panel: 300 ms height, instant with reduced motion) */
.p-checkup .checkup-panel > .acc__inner { padding-bottom: 0; }
.checkup-panel__in { display: grid; gap: 10px; padding: 22px 0 clamp(16px, 2.4vw, 28px); margin-top: 6px; border-top: 1px solid var(--hairline-strong); }
.checkup-panel__title { font: 400 clamp(1.3rem, 1.9vw, 1.6rem)/1.25 var(--serif); }
.checkup-panel__title:focus { outline: none; }
.checkup-panel__lead { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; margin-bottom: 8px; }
.checkup-panel__preview { margin-bottom: 4px; }
.checkup-form { gap: 20px; }
.checkup-form .seg__opt span { white-space: normal; }

/* lab-03 · the V-final enquiry form ("Request an assessment", site/css/styles.css .modal .field / .seg / .row):
   quiet 14 px labels, paper fields with a soft edge and 4 px corners, chips for what to improve, one full-width button.
   Two fields per row once the form itself is wide enough (container query: the card is half the page from 768 px). */
.p-checkup .checkup-panel__in { container-type: inline-size; }
.p-checkup .enq { gap: 18px; max-width: none; }
.p-checkup .enq__row { display: grid; gap: 18px; min-width: 0; }
@container (min-width: 460px) { .p-checkup .enq__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.p-checkup .enq__row > .field:only-child { grid-column: 1 / -1; } /* WhatsApp (optional) sits alone in its row */
.p-checkup .enq .field { gap: 6px; }
.p-checkup .enq .field__label { font: 400 14px/1.4 var(--sans); color: var(--ink-soft); }
.p-checkup .enq .field__input {
  min-height: 46px; padding: 11px 12px; background-color: #FBFAF7;
  border: 1px solid rgba(34, 34, 31, .24); border-radius: 4px; /* 3:1 against the linen field (WCAG 1.4.11) */
}
.p-checkup .enq .field__input:hover { border-color: var(--ink-2); }
.p-checkup .enq .field__input:focus { background-color: #fff; }
.p-checkup .enq .field__select { padding-right: 40px; background-position: right 14px center; }
.p-checkup .enq .field__textarea { min-height: 96px; }
.p-checkup .enq__improve .field__label { font-size: 14px; color: var(--ink-2); margin-bottom: 4px; }
.p-checkup .enq .seg { gap: 6px; }
.p-checkup .enq .seg__opt span { min-height: 40px; padding: 0 14px; font-size: 14px; border-color: rgba(34, 34, 31, .24); color: var(--ink-soft); }
.p-checkup .enq .seg__opt input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--linen); }
.p-checkup .enq .form__foot { justify-items: stretch; gap: 12px; padding-top: 4px; }
.p-checkup .enq .form__foot .btn { width: 100%; min-height: 52px; }
.p-checkup .enq .form__consent { font-size: 13px; }

.checkup-health {
  display: flex; align-items: baseline; gap: 12px; margin-top: clamp(20px, 2.6vw, 32px);
  font-size: 15px; line-height: 1.5; color: var(--ink-2);
}
.checkup-health::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--soft-gold); transform: translateY(-2px); }

/* the mobile sticky bar steps aside while an open form is on screen (checkup-flow.js) */
@media (max-width: 767px) {
  .p-checkup .sticky.checkup-hold { transform: translateY(100%); visibility: hidden; transition: transform .2s ease, visibility 0s linear .2s; }
}

/* ---------- mobile: effortless (Remote button above the fold at 390 × 844) ---------- */
@media (max-width: 767px) {
  .checkup-card { row-gap: 16px; }
  .checkup-card__head { gap: 6px; }
  .checkup-card__list li { padding-block: 7px; font-size: 15px; }
  .checkup-card__list li::before { top: calc(7px + .72em); }
  .checkup-card__btn { max-width: none; }
  /* 2 taps from the Instagram bio: the action sits right under the price (390 × 664 in-app viewport included).
     The "what's included" list / On-site line move below the form; focusable items keep their DOM order
     (How it works + → button → Terms → form), only the non-interactive list is moved. */
  .checkup-card__rest { display: contents; }
  .checkup-card__rest > * { order: 1; }
  .checkup-card__list, .checkup-card__observe { order: 2; }
}
/* once its form is open, the opener steps back: the form's own "Send request" is the one filled button */
.p-checkup .checkup-card__btn[aria-expanded="true"] { background: transparent; color: var(--ink); border-color: var(--stone); }

/* lab-05k (client): "What you receive", the same five deliverables as the home */
.p-checkup .checkup-receive { padding-block: var(--space-s) var(--space); border-top: 1px solid var(--hairline); }
.checkup-receive__h { font: 300 clamp(1.8rem, 3.4vw, 2.8rem)/1.08 var(--serif); letter-spacing: -.01em; margin-bottom: clamp(28px, 4vw, 48px); }
.checkup-receive__list { display: grid; gap: 28px var(--grid-gap); }
.checkup-receive__list > li { display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--hairline-strong); }
.checkup-receive__n { font: 500 12px/1 var(--sans); letter-spacing: .08em; color: var(--bronze); }
.checkup-receive__name { font: 400 clamp(1.2rem, 1.5vw, 1.4rem)/1.25 var(--serif); color: var(--ink); text-wrap: balance; }
.checkup-receive__line { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 32ch; }
@media (min-width: 768px) { .checkup-receive__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .checkup-receive__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* lab-06au: four deliverables */

/* lab-08o (client): how it works, her three images */
/* lab-127 (client): "Cómo funciona" without photographs: three points on a line, one line of text at a time */
.checkup-howsec { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px); }
.checkup-how { margin-top: 28px; max-width: 760px; }
.checkup-how__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.checkup-how__list::before, .checkup-how__list::after { content: ""; position: absolute; top: 9px; left: calc(100% / 6); height: 1px; }
.checkup-how__list::before { right: calc(100% / 6); background: var(--hairline-strong); }
.checkup-how__list::after { width: calc((100% / 3) * var(--p)); background: var(--soft-gold); transition: width .9s var(--slow); }
.checkup-how__btn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0 4px 8px; border: 0; background: none; color: var(--ink-2); font: inherit; text-align: center; cursor: var(--cursor-link, pointer); }
.checkup-how__dot { position: relative; z-index: 1; width: 19px; height: 19px; border-radius: 50%; background: var(--linen); box-shadow: inset 0 0 0 1px var(--hairline-strong); transition: box-shadow .4s ease, background .4s ease; }
.checkup-how__btn[aria-pressed="true"] .checkup-how__dot { background: var(--soft-gold); box-shadow: 0 0 0 5px rgba(182, 162, 122, .22); }
.checkup-how__n { margin-top: 6px; font-size: 12.5px; letter-spacing: .08em; }
.checkup-how__name { font: 400 clamp(1rem, 1.7vw, 1.3rem)/1.25 var(--serif); color: var(--ink-2); transition: color .3s ease; }
.checkup-how__btn[aria-pressed="true"] .checkup-how__name { color: var(--ink); }
.checkup-how__btn:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; border-radius: 8px; }
.checkup-how__panel { margin-top: clamp(20px, 3vw, 32px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--hairline); }
.checkup-how__item { display: flex; align-items: center; gap: clamp(16px, 3vw, 28px); }
.checkup-how__item + .checkup-how__item { margin-top: 16px; }
.checkup-how__svg { flex: none; width: clamp(64px, 9vw, 88px); height: auto; fill: none; stroke: var(--ink-2); stroke-width: 1.2; stroke-linecap: round; }
.checkup-how__svg .is-soft { stroke: var(--hairline-strong); }
.checkup-how__svg .is-gold { stroke: var(--soft-gold); stroke-width: 1.6; }
.checkup-how__line { margin: 0; font: 400 clamp(1.15rem, 2vw, 1.5rem)/1.4 var(--serif); color: var(--ink); }
html.js .checkup-how__item:not(.is-on) { display: none; }
html.js .checkup-how__item + .checkup-how__item { margin-top: 0; }
html.js .checkup-how__nojs { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .checkup-how__item.is-on .checkup-how__svg * { stroke-dasharray: 1.01 0; animation: checkup-how-draw 1.1s var(--slow) both; }
  html.js .checkup-how__item.is-on .checkup-how__svg *:nth-child(2) { animation-delay: .15s; }
  html.js .checkup-how__item.is-on .checkup-how__svg *:nth-child(3) { animation-delay: .3s; }
  html.js .checkup-how__item.is-on .checkup-how__svg *:nth-child(4) { animation-delay: .45s; }
  html.js .checkup-how__item.is-on .checkup-how__line { animation: checkup-how-in .6s var(--slow) both; }
}
@keyframes checkup-how-draw { from { stroke-dasharray: 0 1.01; } to { stroke-dasharray: 1.01 0; } }
@keyframes checkup-how-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .checkup-how__list::after { transition: none; } }
/* lab-08w (client): "según ubicación" beside the on-site price; the project credit in small print */
.checkup-price__note { font-size: .85rem; color: var(--ink-soft); }
.checkup-credit { margin: 14px 0 0; font-size: .78rem; line-height: 1.5; color: var(--ink-soft); }

/* ===== home.css ===== */
/* LIVEN · V10 Lab · HOME · lab-05 (the client's architecture proposal). Every selector is scoped: .p-home or .home-*.
   Breakpoints: mobile <768 · tablet 768–1023 · desktop ≥1024. Check ~800 px too (the client's window). */

/* shared small label (versales) */
.home-label { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.home-cite {
  font: 500 14px/1.4 var(--sans); color: var(--olive); white-space: nowrap;
  text-underline-offset: 4px; text-decoration-color: rgba(62, 75, 62, .7);
}
.home-cite:hover { text-decoration-color: currentColor; }

/* barely perceptible scroll reveal (CSS only, where the browser supports view timelines) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .p-home .section .h2, .p-home .home-respond, .p-home .big {
      animation: home-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes home-rise { from { opacity: .2; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   1 · hero: the still photograph of lab-02; two lines that trade places slowly (js/home-words.js)
   ===================================================================== */
.p-home .home-cover {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: min(100svh, 1000px); color: var(--linen); background: var(--ink);
}
html:not(.js) .p-home .home-cover { min-height: min(calc(100svh - var(--hdr-h)), 1000px); }
.home-cover__img, .home-cover__photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-cover__photo { object-fit: cover; object-position: 62% 50%; animation: home-settle 2.8s var(--slow) both; }
@keyframes home-settle { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.home-cover__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(34, 34, 31, .5) 0%, rgba(34, 34, 31, 0) 20%, rgba(34, 34, 31, 0) 38%, rgba(34, 34, 31, .66) 100%); }
.home-cover__text { position: relative; width: 100%; max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) clamp(48px, 8vh, 96px); }
.home-cover__title { display: grid; font: 300 clamp(2.3rem, 5vw, 4.6rem)/1.06 var(--serif); letter-spacing: -.018em; max-width: 17ch; }
.home-cover__line { grid-area: 1 / 1; align-self: end; text-wrap: balance; opacity: 0; filter: blur(4px); transition: opacity 1.8s var(--slow), filter 1.8s var(--slow); }
.home-cover__line.is-on { opacity: 1; filter: none; }
html:not(.js) .home-cover__line:first-child { opacity: 1; filter: none; }
.home-cover__actions { gap: 16px 28px; margin-top: clamp(28px, 4vh, 40px); }
.home-cover__link {
  color: var(--linen); font: 500 15px/1.2 var(--sans); text-decoration: underline;
  text-decoration-color: rgba(245, 242, 236, .5); text-underline-offset: 5px; transition: text-decoration-color .3s;
}
.home-cover__link:hover { text-decoration-color: currentColor; }
.home-cover__remote { margin-top: 18px; font: 500 12px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(245, 242, 236, .8); }
@media (max-width: 600px) { .home-cover__photo { object-position: 58% 50%; } }
html.preview-host body[data-target="preview"] .home-cover { min-height: min(calc(100svh - 32px), 1000px); }

/* =====================================================================
   2 · philosophy: contemplative, words only, a lot of air
   ===================================================================== */
.home-philo__grid { row-gap: 28px; }
.home-philo__text { display: grid; gap: 24px; align-content: end; min-width: 0; }
.home-h1 { font: 300 clamp(2.5rem, 4.5vw, 4.7rem)/1.02 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.home-h1 em { font-style: italic; }
.home-philo__clarifier { max-width: 44ch; font: 400 clamp(1.05rem, 1.3vw, 1.2rem)/1.6 var(--sans); color: var(--ink-soft); text-wrap: pretty; }
.home-philo__lab { max-width: 44ch; padding-left: 16px; border-left: 1px solid var(--soft-gold); font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
/* lab-06ar (client): "Liven Philosophy" eyebrow over a longer heading; the closing line in serif italic */
.home-philo__head { display: grid; gap: 18px; align-content: start; }
.home-philo__h { font-size: clamp(2.2rem, 3.8vw, 3.9rem); line-height: 1.06; }
.home-philo__lab { font: italic 400 clamp(1.1rem, 1.4vw, 1.3rem)/1.45 var(--serif); color: var(--ink); }
@media (min-width: 1024px) { .p-home .grid > .home-philo__text { grid-column: 8 / span 5; } }
.home-respond {
  display: grid; justify-items: center; gap: .1em; margin: clamp(96px, 14vw, 200px) auto 0; text-align: center;
  font: 300 clamp(1.7rem, 3.4vw, 3rem)/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink);
}
.home-respond span:last-child { font-style: italic; }

/* =====================================================================
   3 · what Liven reads: two scenes. The photograph beside its words from 768 px (never full width: the client
   reads at ~800 px), stacked on a phone.
   ===================================================================== */
.p-home .home-reads { border-top: 1px solid var(--hairline); }
.home-reads__head { display: grid; gap: 20px; max-width: 60rem; margin-bottom: clamp(48px, 6vw, 88px); }
.home-reads__head .h2 { max-width: 18ch; }
.home-scene { display: grid; gap: 28px; align-items: center; }
.home-scene + .home-scene { margin-top: clamp(72px, 9vw, 136px); }
.home-scene__side { display: grid; gap: 18px; align-content: center; min-width: 0; }
.home-scene__h { max-width: 22ch; }
.home-scene__hint { color: var(--ink-soft); max-width: 40ch; }
@media (min-width: 768px) {
  .home-scene { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 88px); }
  .home-scene--night { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .home-scene--night > figure { order: 2; }
}

/* the room by the sea */
.home-read { margin: 0; }
.home-read__stage { position: relative; aspect-ratio: 1 / 1; max-width: 640px; background: var(--ink); }
.home-read__stage picture, .home-read__img, .home-read__still, .home-read__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-read__still, .home-read__video { opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.home-read__still.is-on, .home-read__video.is-on { opacity: 1; }
.home-read__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 12px; font-size: 13.5px; color: var(--ink-2); }

/* the points (lab-05i, client): the V-final pills (site/css/styles.css .reading__marks), not rectangles: a linen oval with
   the measuring point in olive and a soft gold halo; olive when open or hovered; the note is a linen card below it */
.home-marks { position: absolute; inset: 0; z-index: 2; }
.home-mark { position: absolute; left: var(--x); top: var(--y); width: 0; animation: home-mark-in .9s var(--slow) both; } /* zero-width anchor at the point */
.home-mark:nth-child(2) { animation-delay: .15s; } .home-mark:nth-child(3) { animation-delay: .3s; } .home-mark:nth-child(4) { animation-delay: .45s; }
.home-mark:nth-child(5) { animation-delay: .6s; } .home-mark:nth-child(6) { animation-delay: .75s; } .home-mark:nth-child(7) { animation-delay: .9s; }
@keyframes home-mark-in { from { opacity: 0; } to { opacity: 1; } }
.home-mark.is-open { z-index: 5; } /* its note above the other points */
.home-mark__btn {
  position: relative; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font: 400 13px/1 var(--sans); color: var(--ink); cursor: var(--cursor-link, pointer); font-variant-numeric: tabular-nums;
  padding: 8px 12px 8px 22px; margin: -15px 0 0 -7px; border: 0; border-radius: 100px;
  background: rgba(245, 242, 236, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .3s, color .3s;
}
.home-mark__btn::after { content: ""; position: absolute; inset: -10px -4px; } /* 44 px touch target around a small pill */
.home-mark__dot {
  position: absolute; left: 7px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--olive); box-shadow: 0 0 0 4px rgba(182, 162, 122, .45); animation: home-probe 3.2s ease-out 3;
}
.home-mark:nth-child(2) .home-mark__dot { animation-delay: .8s; } .home-mark:nth-child(3) .home-mark__dot { animation-delay: 1.6s; }
.home-mark:nth-child(4) .home-mark__dot { animation-delay: 2.4s; }
@keyframes home-probe { 0% { box-shadow: 0 0 0 0 rgba(182, 162, 122, .7); } 70%, 100% { box-shadow: 0 0 0 9px rgba(182, 162, 122, 0); } }
.home-mark__name { color: var(--ink-2); transition: color .3s; }
.home-mark__btn:hover, .home-mark.is-open .home-mark__btn { background: var(--olive); color: var(--linen); }
.home-mark__btn:hover .home-mark__name, .home-mark.is-open .home-mark__name { color: rgba(245, 242, 236, .7); }
.home-mark.is-open .home-mark__dot { background: var(--linen); }
.home-mark.is-left .home-mark__btn { padding: 8px 22px 8px 12px; margin: -15px 0 0; transform: translateX(calc(-100% + 7px)); }
.home-mark.is-left .home-mark__dot { left: auto; right: 7px; }
.home-mark__note {
  position: absolute; top: 16px; left: -7px; z-index: 3; width: min(280px, 70vw); padding: 16px 18px;
  background: var(--linen); color: var(--ink-soft); font-size: 14px; line-height: 1.5; border-radius: 4px;
  box-shadow: 0 18px 40px -18px rgba(34, 30, 24, .45); animation: home-pop .4s var(--slow) both;
}
@keyframes home-pop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.home-mark.is-left .home-mark__note { left: auto; right: -7px; }
.home-mark.is-low .home-mark__note { top: auto; bottom: 22px; }
/* desktop: the pill carries the value, the note only the line (as in the V-final) */
.home-mark__note-name, .home-mark__note-value { display: none; }
/* tablet and phone: the pill carries the name; the value opens with the note */
@media (max-width: 1023px) {
  .home-mark__value { display: none; }
  .home-mark__note-value { display: block; margin-bottom: 4px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
}
@media (max-width: 767px) {
  .home-mark__btn { font-size: 11.5px; padding: 6px 10px 6px 20px; margin-top: -12px; }
  .home-mark.is-left .home-mark__btn { padding: 6px 20px 6px 10px; margin-top: -12px; }
  .home-mark__note { width: min(240px, 66vw); padding: 14px 16px; }
  .home-mark.is-low .home-mark__note { bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) { .home-mark, .home-mark__dot, .home-mark__note { animation: none; } }

/* the hours */
.home-hours { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 8px; max-width: 440px; }
.home-hours::before { content: ""; position: absolute; left: 10%; right: 10%; top: 21px; height: 1px; background: var(--hairline-strong); }
.home-hour { position: relative; display: grid; justify-items: center; gap: 8px; min-height: 56px; padding: 14px 0 6px; border: 0; background: none; color: var(--ink-2); font: 500 13px/1 var(--sans); font-variant-numeric: tabular-nums; cursor: var(--cursor-link, pointer); }
.home-hour i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--ink-2); background: var(--linen); transition: background .3s, border-color .3s, transform .3s var(--slow); }
.home-hour.is-past i { background: var(--sand); border-color: var(--sand); }
.home-hour[aria-checked="true"] { color: var(--ink); }
.home-hour[aria-checked="true"] i { background: var(--ink); border-color: var(--ink); transform: scale(1.25); }
.home-hour:hover { color: var(--ink); }
.home-tip { max-width: 44ch; padding-left: 14px; border-left: 1px solid var(--soft-gold); font-size: 15px; line-height: 1.6; color: var(--ink-soft); min-height: 4.8em; }

/* the bedroom at 3 a.m. */
.home-night { margin: 0; }
.home-night__stage { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ink); --fx: 50%; --fy: 50%; }
.home-night__stage picture, .home-night__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-night__veil {
  position: absolute; inset: 0; background: rgba(10, 10, 9, .66); opacity: 0; transition: opacity .9s ease; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0, transparent 6%, #000 20%);
  mask-image: radial-gradient(circle at var(--fx) var(--fy), transparent 0, transparent 6%, #000 20%);
}
.home-night__stage.is-focus .home-night__veil { opacity: 1; }
.home-lights { position: absolute; inset: 0; }
.home-light { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transition: opacity .9s ease; }
.js .home-light { opacity: 0; }
.js .home-light.is-on { opacity: 1; }
.home-light::before { content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--linen); box-shadow: 0 0 10px 3px rgba(245, 242, 236, .55); }
.home-light__btn {
  position: absolute; left: 0; top: 0; transform: translate(-50%, calc(-100% - 12px)); display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(245, 242, 236, .7); background: rgba(34, 34, 31, .45);
  color: var(--linen); font: 500 11px/1 var(--sans); letter-spacing: .04em; cursor: var(--cursor-link, pointer); transition: background .3s, color .3s;
}
.home-light[data-light="phone"] .home-light__btn { transform: translate(10%, 14px); }
.home-light[data-light="door"] .home-light__btn { transform: translate(calc(-100% - 12px), -50%); }
.home-light.is-focus .home-light__btn, .home-light__btn:hover { background: var(--linen); color: var(--ink); }
.home-night__eyebrow { color: var(--bronze); }
.home-night__list { display: grid; border-top: 1px solid var(--hairline); }
.home-night__list > li { border-bottom: 1px solid var(--hairline); transition: opacity .6s ease; }
.js .home-night__list > li:not(.is-on) { opacity: .45; }
.home-night__item {
  display: flex; align-items: baseline; gap: 14px; width: 100%; min-height: 44px; padding: 10px 0 2px; border: 0; background: none;
  color: var(--ink); font: 400 clamp(1.1rem, 1.5vw, 1.3rem)/1.3 var(--serif); text-align: left; cursor: var(--cursor-link, pointer);
}
.home-night__n { font: 500 12px/1 var(--sans); color: var(--ink-2); letter-spacing: .06em; }
.home-night__item:hover .home-night__name, .home-night__item[aria-pressed="true"] .home-night__name { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.home-night__item[aria-pressed="true"] .home-night__name { font-style: italic; }
.home-night__note { padding: 0 0 12px 30px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 767px) {
  .home-light__btn { width: 28px; height: 28px; font-size: 10px; }
}

/* the question at the end of the scenes */
.home-ask { display: grid; justify-items: start; gap: 24px; margin-top: clamp(72px, 9vw, 136px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hairline); }
@media (max-width: 767px) { .home-ask .btn { width: 100%; } }

/* =====================================================================
   5 · the Check-Up · 6 what you receive
   ===================================================================== */
.home-checkup__grid { row-gap: 56px; align-items: start; }
.home-checkup__main { display: grid; gap: 22px; align-content: start; }
.home-checkup__main .h2 { max-width: 15ch; }
.home-tm { font-size: .8em; vertical-align: super; line-height: 0; margin-left: 1px; }
.home-checkup__main .home-label { margin-top: 12px; }
.home-observe { display: flex; flex-wrap: wrap; align-items: baseline; font: 300 clamp(1.2rem, 1.7vw, 1.5rem)/1.45 var(--serif); color: var(--ink); max-width: 36rem; }
.home-observe li:not(:last-child)::after { content: "·" / ""; padding: 0 .45em; color: var(--ink-2); }
/* lab-06a (client): each word shows its photograph (js/home-observe.js); the chosen one in italic with the gold line */
.home-observe__btn {
  padding: 2px 0; border: 0; background: none; font: inherit; color: var(--ink-soft); cursor: var(--cursor-link, pointer);
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 6px;
  transition: color .25s, text-decoration-color .25s;
}
.home-observe__btn:hover { color: var(--ink); }
.home-observe__btn[aria-pressed="true"] { font-style: italic; color: var(--ink); text-decoration-color: var(--soft-gold); }
.home-observe__btn:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; border-radius: 2px; }
.home-observe__media { position: relative; display: grid; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--linen); }
/* lab-06b (client style): the open FAQ question in italic */
.home-faq .acc__item.is-open .acc__title { font-style: italic; }
.home-observe__img { grid-area: 1 / 1; opacity: 0; transition: opacity .6s ease; }
.home-observe__img.is-active { opacity: 1; z-index: 1; }
.home-observe__img.is-held { opacity: 1; }
.home-observe__img picture, .home-observe__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-observe__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; padding: 6px 10px; border-radius: 100px;
  background: rgba(245, 242, 236, .92); color: var(--ink); font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 767px) { .home-observe__media { aspect-ratio: 4 / 3; } }
.home-checkup__offer { display: grid; gap: 20px; align-content: start; }
.home-modes { border-top: 1px solid var(--hairline-strong); }
.home-mode { display: grid; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--hairline-strong); }
.home-mode__name { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.home-mode__price { margin: 0; font: 300 clamp(1.6rem, 2.4vw, 2.1rem)/1.15 var(--serif); color: var(--ink); }
.home-mode__meta { margin: 0; font-size: 15px; color: var(--ink-soft); }
.home-checkup__offer .actions { margin-top: 8px; }
@media (min-width: 1024px) {
  /* lab-06a: text 5 · photograph 3 · offer 4 */
  .p-home .grid > .home-checkup__main { grid-column: 1 / span 5; }
  .p-home .grid > .home-observe__media { grid-column: 6 / span 3; }
  .p-home .grid > .home-checkup__offer { grid-column: 9 / span 4; padding-top: 8px; }
}
@media (min-width: 768px) and (max-width: 1023px) { .p-home .home-checkup__grid { align-items: start; } }
@media (max-width: 767px) { .home-checkup__offer .btn { width: 100%; } }

/* what you receive continues the Check-Up band: one offer, one block */
.p-home .home-checkup { padding-bottom: var(--space-s); }
.p-home .home-receive { padding-top: 0; }
.home-receive > .wrap { padding-top: var(--space-s); background: linear-gradient(var(--hairline-strong), var(--hairline-strong)) no-repeat var(--gutter) 0 / calc(100% - 2 * var(--gutter)) 1px; }
.home-receive .h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.home-deliver { display: grid; gap: 32px var(--grid-gap); counter-reset: none; }
.home-deliver__item { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--hairline-strong); }
.home-deliver__n { font: 500 12px/1 var(--sans); letter-spacing: .08em; color: var(--bronze); }
.home-deliver__name { font: 400 clamp(1.25rem, 1.6vw, 1.45rem)/1.25 var(--serif); color: var(--ink); text-wrap: balance; }
.home-receive__when { margin-top: clamp(32px, 4vw, 48px); padding-left: 14px; border-left: 1px solid var(--soft-gold); font-size: 15px; color: var(--ink-soft); }
@media (min-width: 768px) { .home-deliver { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .home-deliver { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* lab-06au: four deliverables */

/* =====================================================================
   7 · approach: four steps, the line under each; a rule grows on hover
   ===================================================================== */
.p-home .home-approach { border-top: 1px solid var(--hairline); }
.home-approach__h span { display: block; }
.home-approach__h span + span { font-style: italic; }
.home-steps { display: grid; gap: 36px var(--grid-gap); margin-top: clamp(48px, 6vw, 88px); }
.home-step { position: relative; display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 1px solid var(--hairline-strong); }
.home-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 1px; background: var(--ink); transition: width .8s var(--slow); }
.home-step:hover::before { width: 100%; }
.home-step__n { font: 300 clamp(2.4rem, 3.6vw, 3.4rem)/1 var(--serif); color: var(--ink-2); transition: color .5s; }
.home-step:hover .home-step__n { color: var(--ink); }
.home-step__name { font: 500 14px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.home-step__line { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 30ch; }
@media (min-width: 768px) { .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* lab-06ap (client): five stages with an English name and a longer text: one row per stage on every width
   (number · name · text from 1024 px) */
.home-approach__eyebrow { margin-bottom: 18px; }
.home-steps { grid-template-columns: none !important; gap: 0; }
.home-step { padding-block: 26px 30px; }
.home-step:last-child { border-bottom: 1px solid var(--hairline-strong); }
.home-step__head { display: grid; gap: 6px; }
.home-step__sub { font: italic 400 1.05rem/1.35 var(--serif); color: var(--ink-2); }
.home-step__line { max-width: 62ch; }
/* lab-06au (client): a short line per stage; her full text opens on a tap */
.home-step__body { display: grid; gap: 10px; align-content: start; }
.home-step__short { font: 400 clamp(1.1rem, 1.4vw, 1.3rem)/1.4 var(--serif); color: var(--ink); max-width: 46ch; }
.home-step__more summary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: var(--cursor-link, pointer); list-style: none;
  font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.home-step__more summary::-webkit-details-marker { display: none; }
.home-step__more summary::after { content: "+"; font: 300 18px/1 var(--sans); transition: transform .3s; }
.home-step__more[open] summary::after { transform: rotate(45deg); }
.home-step__more summary:hover { color: var(--ink); }
.home-step__more[open] .home-step__line { animation: lab-fade .4s ease both; }
/* lab-06ax (client): the method explained with a Vitruvian figure (js/home-method.js) */
.home-vitru { display: grid; gap: 36px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 1024px) {
  .home-vitru { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 0 clamp(40px, 5vw, 88px); align-items: start; }
  .home-vitru__fig { position: sticky; top: calc(var(--hdr-h) + 24px); }
}
.home-vitru__fig { margin: 0; display: grid; gap: 14px; }
.home-vitru__stage { position: relative; width: 100%; max-width: 560px; margin-inline: auto; aspect-ratio: 606 / 660; }
/* lab-06ay: ChatGPT's ink drawing under the SVG: at (170, 210) of the 1594-unit box, 1254 units wide; multiply melts its
   off-white into the page */
.home-vitru__art { position: absolute; inset: 0; transition: opacity .6s ease, filter .6s ease; } /* lab-06az: Leonardo's sheet, as is */
.home-vitru__art picture, .home-vitru__img { display: block; width: 100%; height: 100%; }
.home-vitru__svg { position: absolute; inset: 0; }
.home-vitru.is-ready:is([data-stage="2"], [data-stage="3"]) .home-vitru__art { opacity: .55; }
.home-vitru.is-ready[data-stage="5"] .home-vitru__art { opacity: .8; }
.home-vitru__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.home-vitru__svg :is(circle, rect, path) { fill: none; vector-effect: non-scaling-stroke; transition: stroke .5s ease, opacity .5s ease, stroke-dashoffset 1.2s var(--slow); }
.home-vitru__svg text { paint-order: stroke; stroke: rgba(240, 226, 198, .92); stroke-width: 4px; stroke-linejoin: round; font: 600 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-2); transition: opacity .5s ease, fill .5s ease; }
.v-square rect, .v-circle circle { stroke: var(--ink); stroke-width: 1; opacity: .55; }
.v-review circle { stroke: var(--soft-gold); stroke-width: 1; stroke-dasharray: 1.2 1.6; opacity: .9; }
.v-fig path, .v-fig circle { stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.v-fig--b path { opacity: .28; }
.v-fig .v-navel { fill: var(--ink); stroke: none; }
.v-env__pt circle { fill: var(--linen); stroke: var(--ink-2); stroke-width: 1; }
.v-env__pt .v-rank { font: 600 20px/1 var(--sans); fill: var(--bronze); letter-spacing: 0; }
.v-person { fill: var(--bronze) !important; }
/* with JS: one stage at a time */
.home-vitru.is-ready :is(.v-review, .v-env, .v-rank) { opacity: 0; }
.home-vitru.is-ready :is(.v-square rect, .v-circle circle) { opacity: 0; } /* lab-06az: Leonardo draws them; ours only light up */
.home-vitru.is-ready .v-square text, .home-vitru.is-ready .v-circle text { opacity: .4; }
.home-vitru.is-ready[data-stage="1"] .v-fig--a :is(path, circle) { stroke: var(--bronze); stroke-width: 2; }
.home-vitru.is-ready[data-stage="2"] .v-square rect { opacity: 1; stroke: var(--bronze); }
.home-vitru.is-ready[data-stage="2"] .v-square text { opacity: 1; fill: var(--bronze); }
.home-vitru.is-ready:is([data-stage="2"], [data-stage="3"], [data-stage="5"]) .v-env { opacity: 1; }
.home-vitru.is-ready[data-stage="3"] .v-env__pt:not(.is-ranked) { opacity: .3; }
.home-vitru.is-ready[data-stage="3"] .v-env__pt.is-ranked circle { fill: var(--soft-gold); stroke: var(--bronze); }
.home-vitru.is-ready[data-stage="3"] .v-rank { opacity: 1; }
.home-vitru.is-ready[data-stage="3"] .v-square rect { opacity: .6; }
.home-vitru.is-ready[data-stage="4"] .v-circle circle { opacity: 1; stroke: var(--bronze); stroke-width: 1.6; animation: home-vdraw 1.4s var(--slow) both; }
.home-vitru.is-ready[data-stage="4"] .v-circle text { opacity: 1; fill: var(--bronze); }
.home-vitru.is-ready[data-stage="4"] .v-fig--b path { opacity: 1; stroke: var(--bronze); }
.home-vitru.is-ready[data-stage="4"] .v-fig--a path { opacity: .55; }
.home-vitru.is-ready[data-stage="5"] :is(.v-square rect, .v-circle circle) { opacity: .8; }
.home-vitru.is-ready[data-stage="5"] .v-review { opacity: 1; }
.home-vitru.is-ready[data-stage="5"] .v-review text { fill: var(--bronze); }
@keyframes home-vdraw { from { stroke-dasharray: 100 100; stroke-dashoffset: 100; } to { stroke-dasharray: 100 100; stroke-dashoffset: 0; } }
/* Cuerpo · Mente · Sentidos: oval markers on the figure */
.home-vitru__spot {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1;
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px 0 9px; border: 1px solid var(--hairline-strong); border-radius: 100px;
  background: rgba(245, 242, 236, .92); color: var(--ink); font: 400 13.5px/1 var(--sans); cursor: var(--cursor-link, pointer); white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s;
}
.home-vitru__spot span { width: 7px; height: 7px; border-radius: 50%; background: var(--soft-gold); }

.home-vitru__spot:hover { border-color: var(--ink); }
.home-vitru__spot[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.home-vitru__cap { min-height: 3.2em; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.home-vitru__cap strong { font: 400 1.15rem/1 var(--serif); color: var(--ink); }
.home-vitru.is-ready .home-vitru__dim:not(.is-shown) { display: none; }
.home-vitru:not(.is-ready) .home-vitru__dim { display: block; margin-bottom: 6px; }
.home-vitru:not(.is-ready) .home-vitru__dim[data-dim-cap="prompt"] { display: none; }
.home-vitru__dim[data-dim-cap="prompt"] { font-style: italic; color: var(--ink-2); }
.home-vitru__chips { display: none; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.home-vitru.is-ready .home-vitru__chips { display: flex; }
.home-vitru__chip {
  min-height: 44px; padding: 0 16px; border: 1px solid rgba(34, 34, 31, .5); border-radius: 100px; background: none; cursor: var(--cursor-link, pointer);
  font: 400 15px/1 var(--sans); color: var(--ink-soft); transition: background .25s, color .25s, border-color .25s;
}
.home-vitru__chip .num { font-size: 12px; letter-spacing: .06em; color: inherit; opacity: .7; margin-right: 2px; }
.home-vitru__chip:hover { border-color: var(--ink); color: var(--ink); }
.home-vitru__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.home-vitru.is-ready .home-step:not(.is-current) { display: none; }
.home-vitru.is-ready .home-step.is-current { border-bottom: 1px solid var(--hairline-strong); animation: lab-fade .45s ease both; }
.home-vitru .home-steps { margin-top: 0; }
/* under 1024 px the stage chips go above the figure, so a tap shows its change on the drawing */
@media (max-width: 1023px) {
  .home-vitru { display: flex; flex-direction: column; gap: 24px; }
  .home-vitru__side { display: contents; }
  .home-vitru__chips { order: -1; margin-bottom: 0; }
}
@media (min-width: 1024px) { .home-vitru .home-step { grid-template-columns: 5rem minmax(0, 1fr); } .home-vitru .home-step__body { grid-column: 2; } }
@media (max-width: 767px) { .home-vitru__spot { font-size: 12.5px; min-height: 28px; padding: 0 10px 0 8px; } .home-vitru__chip { padding: 0 13px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .home-vitru__svg :is(circle, rect, path, text) { transition: none; } .home-vitru.is-ready[data-stage="4"] .v-circle circle { animation: none; } }
/* lab-06aq (client): the three dimensions above the stages; each stage tagged Check-Up / later service / optional */
.home-dims { display: grid; gap: 18px; margin-top: clamp(40px, 5vw, 64px); }
.home-dims__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.home-dim { display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; background: var(--chukum); }
.home-dim__name { font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.2 var(--serif); }
.home-dim__text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.home-dim__sub { margin-top: -4px; font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); } /* lab-06as */
/* lab-06as (client): the three pillars under the philosophy text */
.home-pillars { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.home-pillars li { display: inline-flex; align-items: baseline; gap: 8px; font: 400 clamp(1.15rem, 1.5vw, 1.35rem)/1.2 var(--serif); color: var(--ink); }
.home-pillars__n { font: 500 11.5px/1 var(--sans); letter-spacing: .08em; color: var(--bronze); }
.home-dims__note { max-width: 70ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
@media (min-width: 768px) { .home-dims__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-step__tag {
  justify-self: start; margin-top: 4px; padding: 5px 10px; border-radius: 100px; background: var(--ink); color: var(--linen);
  font: 500 11.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.home-step--after .home-step__tag { background: none; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
@media (min-width: 1024px) {
  .home-step { grid-template-columns: 7rem minmax(0, 4fr) minmax(0, 7fr); gap: 0 var(--grid-gap); align-items: start; }
  .home-step__n { font-size: clamp(2.2rem, 3vw, 2.8rem); }
  .home-step__line { font-size: 16px; padding-top: 2px; }
}

/* =====================================================================
   8 · solutions: three groups (the V-final applications layout)
   ===================================================================== */
.p-home .home-sol { border-top: 1px solid var(--hairline); }
.home-sol__head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.home-sol__head .h2 { max-width: 20ch; }
.home-sol__head .tabs__list { margin-top: 10px; }
.home-sol__stage { display: grid; gap: 28px; }
.home-sol__media { aspect-ratio: 4 / 3; }
.home-sol__media picture { display: block; width: 100%; height: 100%; }
.home-sol__media [data-tab-media="home"] img { object-position: 50% 48%; } /* lab-06ag: vertical source, keep the woman and the window */
.home-sol__media [data-tab-media="hospitality"] img { object-position: 40% 50%; } /* lab-07x: the two women at the desk */
.home-sol__media [data-tab-media="clinics"] img { object-position: 40% 50%; } /* as in the V-final */
.home-sol__detail.tabs__panels { padding-top: 0; }
.home-sol__detail .tabs__panel { display: grid; gap: 14px; align-content: end; }
.home-sol__who { color: var(--ink-soft); max-width: 42ch; text-wrap: pretty; }
.home-sol__detail .home-label { margin-top: 10px; }
.home-sol__list { border-top: 1px solid var(--hairline); }
.home-sol__list li { padding: 9px 0; border-bottom: 1px solid var(--hairline); font: 400 clamp(1.05rem, 1.3vw, 1.2rem)/1.35 var(--serif); color: var(--ink); }
.home-sol__talk { justify-self: start; margin-top: 8px; font: 500 15px/1.3 var(--sans); color: var(--olive); text-underline-offset: 5px; text-decoration-color: rgba(62, 75, 62, .5); }
.home-sol__talk:hover { text-decoration-color: currentColor; }
@media (min-width: 768px) {
  .home-sol__stage { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 96px); align-items: end; }
  .home-sol__media { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  .home-sol__stage { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
  .home-sol__media { aspect-ratio: 5 / 4; }
}
@media (max-width: 767px) { .home-sol .tabs--chips .tabs__tab { padding: 0 16px; } }

/* Liven Interiors designs · Biohausen builds (lab-05e, the lab-02 block of /solutions/): two practices, one project */
.home-build { margin-top: clamp(72px, 9vw, 136px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--hairline); }
.home-build__head { row-gap: 20px; margin-bottom: clamp(32px, 4vw, 56px); }
.home-build__h span { display: block; }
.home-build__h span + span { padding-left: 1em; color: var(--ink-soft); }
.home-build__line { max-width: 44ch; }
@media (min-width: 1024px) { .p-home .grid > .home-build__line { grid-column: 9 / span 4; } }
.home-build__pair { display: grid; border: 1px solid var(--hairline-strong); }
.home-build__side { display: grid; gap: 14px; align-content: start; padding: clamp(22px, 3vw, 40px); }
.home-build__name { color: var(--ink); }
.home-build__items { font: 300 clamp(1.2rem, 1.7vw, 1.5rem)/1.45 var(--serif); color: var(--ink); max-width: 30ch; }
.home-build__items span { white-space: nowrap; }
.home-build__items span:not(:last-child)::after { content: "\00a0\00b7"; color: var(--ink-2); }
.home-build__join { position: relative; height: 1px; margin-inline: clamp(22px, 3vw, 40px); background: var(--soft-gold); }
@media (min-width: 768px) {
  .home-build__pair { grid-template-columns: minmax(0, 1fr) clamp(48px, 7vw, 96px) minmax(0, 1fr); align-items: center; }
  .home-build__join { margin-inline: 0; }
}

/* =====================================================================
   9 · Liven Work: one row per project, the image and its context, alternating
   ===================================================================== */
.p-home .home-work { border-top: 1px solid var(--hairline); }
.home-work__head { display: grid; gap: 18px; margin-bottom: clamp(48px, 6vw, 88px); }
.home-work__head .lead { max-width: 46ch; }
.home-case { display: grid; gap: 22px; align-items: center; }
.home-case + .home-case { margin-top: clamp(56px, 8vw, 120px); }
.home-case__media { position: relative; margin: 0; }
.home-case__media img { width: 100%; height: auto; }
.home-case__media .viz-label { margin-top: 10px; }
.home-case__tag { position: absolute; top: 12px; z-index: 1; padding: 5px 9px; background: rgba(34, 34, 31, .6); color: var(--linen); font: 500 11.5px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.home-case__tag--before { left: 12px; }
.home-case__tag--after { right: 12px; }

/* CREATA before ↔ visualization (lab-05c): the /work/ comparator, drag or arrow keys (js/home-reads.js) */
.home-compare__stage {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--chukum);
  cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
.home-compare__layer { position: absolute; inset: 0; }
.home-compare__layer picture, .home-compare .home-compare__layer img { width: 100%; height: 100%; }
.home-compare .home-compare__layer img { object-fit: cover; -webkit-user-drag: none; }
.home-compare__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.home-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 2; border-left: 1px solid rgba(245, 242, 236, .92); pointer-events: none; }
.home-compare__knob {
  position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(245, 242, 236, .92); color: var(--ink); border: 1px solid var(--hairline-strong);
}
.home-compare__range {
  position: absolute; z-index: 3; left: -22px; top: 50%; width: calc(100% + 44px); height: 44px; margin: -22px 0 0;
  opacity: 0; cursor: ew-resize; background: transparent; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.home-compare__range::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.home-compare__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; border: 0; }
.home-compare__range::-moz-range-thumb { width: 44px; height: 44px; border: 0; background: transparent; }
.home-compare__range::-moz-range-track { height: 44px; background: transparent; }
.home-compare__range:focus-visible ~ .home-compare__handle .home-compare__knob { outline: 2px solid var(--linen); outline-offset: 2px; border: 2px solid var(--ink); }
.home-compare:not(.is-ready) .home-compare__range, .home-compare:not(.is-ready) .home-compare__hint { display: none; }
.home-compare__hint { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.home-case__text { display: grid; gap: 14px; align-content: center; justify-items: start; }
/* lab-05m: the SHA gallery keeps the "Photograph" pill on each photo; its bar sits under the frame */
.home-case__media.case-gallery .viz-label { margin-top: 0; }
.home-case__more { font: 500 15px/1.3 var(--sans); color: var(--olive); text-underline-offset: 5px; text-decoration-color: rgba(62, 75, 62, .5); }
.home-case__more:hover { text-decoration-color: currentColor; }
@media (min-width: 768px) {
  .home-case { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(28px, 5vw, 88px); }
  .home-case.is-flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .home-case.is-flip > .home-case__media { order: 2; }
}

/* =====================================================================
   10 · about
   ===================================================================== */
.home-about__grid { row-gap: 48px; align-items: start; }
.home-about__intro { max-width: 20ch; }
@media (min-width: 1024px) { .p-home .grid > .home-founder { grid-column: 7 / span 6; } }
.home-founder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; grid-template-areas: "img head" "img body"; gap: 16px clamp(20px, 3vw, 40px); align-items: start; } /* lab-05s: the link right under the role */
.home-founder__img { grid-area: img; margin: 0; }
.home-founder__img img { width: 100%; height: auto; }
.home-founder__head { grid-area: head; display: grid; gap: 8px; }
.home-founder__role { font: 500 13px/1.45 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.home-founder__body { grid-area: body; display: grid; gap: 16px; justify-items: start; }
@media (max-width: 767px) {
  .home-founder { grid-template-columns: 40% minmax(0, 1fr); grid-template-areas: "img head" "body body"; align-items: end; }
}

/* =====================================================================
   11 · FAQ
   ===================================================================== */
.home-faq__grid { row-gap: 32px; align-items: start; }
.home-faq__grid .h2 { max-width: 12ch; }
@media (min-width: 1024px) { .p-home .grid > .home-faq__list { grid-column: 6 / span 7; } }
.home-faq__list .acc__inner p { color: var(--ink-soft); max-width: 58ch; line-height: 1.6; }
.home-faq__list .acc__inner p + p { margin-top: .7em; }

/* =====================================================================
   12 · closing band: closing.jpg (1400 × 933) framed to keep a little of the olive tree (client, lab-05).
   Desktop: the whole photograph, anchored at the top (the branches), the line on the sunlit wall.
   Below 1024 px the photograph sits above the words instead of under them, so she and the tree both stay in view.
   ===================================================================== */
.p-home .home-close { --closing-ratio: 1400 / 933; --closing-x: 50%; --closing-y: 0%; }
/* full width always: the base aspect-ratio + max-height would narrow the band on wide, short windows */
@media (min-width: 1024px) { .p-home .home-close { aspect-ratio: auto; width: 100%; height: min(100svh, 66.6vw); } }
@media (max-width: 1023px) {
  .p-home .home-close { display: block; min-height: 0; }
  .p-home .home-close::after { content: none; }
  .p-home .home-close .closing__media { position: relative; display: block; aspect-ratio: 3 / 2; }
  .p-home .home-close .closing__img { object-position: 50% 0%; }
  .p-home .home-close .closing__in { padding: 40px var(--gutter) 56px; }
}
@media (max-width: 767px) {
  /* 1:1 keeps both: the olive leaves at the top left and her, reading (the photo's 12–78 %) */
  .p-home .home-close .closing__media { aspect-ratio: 1 / 1; }
  .p-home .home-close .closing__img { object-position: 35% 0%; }
}

/* =====================================================================
   13 · Journal
   ===================================================================== */
.home-journal__grid { row-gap: 32px; align-items: start; }
.home-journal__head { display: grid; gap: 16px; justify-items: start; }
/* lab-06b: the cover of the essay under the pointer (js/home-observe.js; stacking from .home-observe__img) */
.home-journal__media { position: relative; display: grid; width: 100%; margin: 12px 0 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--linen); }
.home-essay.is-shown .home-essay__title { font-style: italic; }
@media (min-width: 1024px) { .p-home .grid > .home-essays { grid-column: 6 / span 7; } }
.home-essays { border-top: 1px solid var(--hairline-strong); }
.home-essay {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 6px; padding: 20px 0;
  border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none;
}
.home-essay__cat { grid-column: 1; font: 500 12px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.home-essay__title { grid-column: 1; font: 300 clamp(1.35rem, 2vw, 1.8rem)/1.25 var(--serif); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1px; transition: text-decoration-color .3s; }
.home-essay:hover .home-essay__title { text-decoration-color: currentColor; }
.home-essay__glyph { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--olive); transition: transform .3s var(--slow); }
.home-essay:hover .home-essay__glyph { transform: translateX(3px); }
/* lab-06b: touch has no hover: no big cover; each row shows its own cover instead (after the row rules, so it wins) */
.home-essay__thumb { display: none; }
@media (hover: none) {
  .p-home .home-journal__media { display: none; }
  .home-essay { grid-template-columns: 84px minmax(0, 1fr) auto; }
  .home-essay__thumb { display: block; grid-column: 1; grid-row: 1 / span 2; width: 84px; aspect-ratio: 1; overflow: hidden; align-self: center; background: var(--linen); }
  .home-essay__thumb picture, .home-essay__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .home-essay__cat, .home-essay__title { grid-column: 2; }
  .home-essay__glyph { grid-column: 3; }
  .home-essay.is-shown .home-essay__title { font-style: normal; }
}

/* =====================================================================
   14 · contact
   ===================================================================== */
.p-home .home-contact { border-top: 1px solid var(--hairline); }
.home-contact__grid { row-gap: 48px; align-items: start; }
.home-contact__head { display: grid; gap: 20px; align-content: start; }
.home-contact__head .lead { max-width: 36ch; }
@media (min-width: 1024px) { .p-home .grid > .home-contact__body { grid-column: 7 / span 6; } }
.home-channels { margin-top: 12px; border-top: 1px solid var(--hairline); }
.home-channels li { border-bottom: 1px solid var(--hairline); }
.home-channels a { display: grid; gap: 2px; padding: 12px 0; min-height: 44px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.home-channels a:hover > span:last-child { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 8b · hosts: Airbnb and vacation rentals (lab-06an, client 2026-10-23; js/home-hosts.js) ---------- */
.home-hosts__grid { align-items: center; row-gap: clamp(36px, 5vw, 56px); }
.home-hosts__text { display: grid; gap: 18px; align-content: start; }
.home-hosts__h { max-width: 16ch; }
.home-hosts__points { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 4px 0 8px; padding: 0; list-style: none; }
.home-hosts__points li { position: relative; padding-left: 16px; font: italic 400 1.08rem/1.4 var(--serif); color: var(--ink); }
.home-hosts__points li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--soft-gold); }
.home-hosts__fig { margin: 0; display: grid; gap: 14px; }
.home-hosts__rooms { display: none; flex-wrap: wrap; gap: 8px; }
.home-hosts__chip {
  min-height: 44px; padding: 0 18px; border: 1px solid rgba(34, 34, 31, .5); border-radius: 100px; background: none;
  font: 400 15px/1 var(--sans); color: var(--ink-soft); cursor: var(--cursor-link, pointer); transition: background .25s, color .25s, border-color .25s;
}
.home-hosts__chip:hover { border-color: var(--ink); color: var(--ink); }
.home-hosts__chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.home-hosts__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--linen); }
.home-hosts__layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
.home-hosts__layer.is-active { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
.home-hosts__layer picture, .home-hosts__layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-hosts__legend { transition: opacity .4s ease; }
.home-hosts__fig[data-side="before"] .home-hosts__legend { opacity: 0; }
.home-hosts__bar { display: none; align-items: center; gap: 12px 24px; flex-wrap: wrap; }
.home-hosts__view { display: inline-flex; flex: none; padding: 3px; border: 1px solid var(--hairline-strong); border-radius: 100px; }
.home-hosts__side {
  min-height: 40px; padding: 0 18px; border: 0; border-radius: 100px; background: none; cursor: var(--cursor-link, pointer);
  font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); transition: background .25s, color .25s;
}
.home-hosts__side:hover { color: var(--ink); }
.home-hosts__side[aria-pressed="true"] { background: var(--ink); color: var(--linen); }
.home-hosts__change { flex: 1 1 260px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.home-hosts__change span:not(.is-active) { display: none; }
.home-hosts__place { font: 500 12.5px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.home-hosts.is-ready .home-hosts__rooms { display: flex; }
.home-hosts.is-ready .home-hosts__bar { display: flex; }
@media (max-width: 767px) { .home-hosts__chip { padding: 0 14px; font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .home-hosts__layer, .home-hosts__legend { transition: none; } }

/* ---------- 7b · lab-07b (client): ChatGPT's quote band and the three services ---------- */
.home-band { padding-block: clamp(64px, 9vw, 120px); text-align: center; }
.home-band__line { margin: 0 auto; max-width: 34ch; font: 300 clamp(1.7rem, 3.4vw, 3rem)/1.2 var(--serif); letter-spacing: -.01em; color: var(--linen) !important; text-wrap: balance; }
.home-services__head { row-gap: 18px; align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.home-services__h span { display: block; }
.home-services__h span + span { font-style: italic; }
.home-services__list { display: grid; gap: 0 var(--grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .home-services__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.home-service { display: grid; gap: 10px; align-content: start; padding: 26px 0 32px; border-top: 1px solid var(--hairline-strong); }
.home-service__n { font: 300 clamp(2rem, 3vw, 2.6rem)/1 var(--serif); color: var(--ink-2); }
.home-service__stage { font: 500 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
.home-service__name { font: 400 clamp(1.35rem, 2vw, 1.7rem)/1.2 var(--serif); }
.home-service__text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 36ch; }
.home-service__more { justify-self: start; margin-top: 6px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline-strong); padding-bottom: 2px; font-size: 15px; }
.home-service__more:hover { border-color: var(--ink); }

/* ---------- 1 · lab-07d (client): the three hero slides of ChatGPT's version ---------- */
.home-cover__slides { position: absolute; inset: 0; }
.home-cover__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.8s var(--slow); }
.home-cover__slide.is-on { opacity: 1; }
html:not(.js) .home-cover__slide:first-child { opacity: 1; }
.home-cover__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.home-cover__slide.is-playing .home-cover__video { opacity: 1; }
.home-cover__slide[data-slide="2"] .home-cover__photo { object-position: 58% 50%; } /* lab-07i: the living room is third */
/* the living room is light: a deeper fade under the words */
.home-cover__shade { background: linear-gradient(180deg, rgba(34, 34, 31, .45) 0%, rgba(34, 34, 31, 0) 22%, rgba(34, 34, 31, 0) 34%, rgba(34, 34, 31, .72) 100%), linear-gradient(90deg, rgba(34, 34, 31, .38) 0%, rgba(34, 34, 31, 0) 60%); }
.home-cover__dots { display: flex; gap: 6px; margin-top: 22px; }
.home-cover__dot { min-width: 44px; min-height: 36px; padding: 0 6px; border: 0; border-top: 1px solid rgba(245, 242, 236, .4); background: none; color: rgba(245, 242, 236, .7); font: 500 12px/1 var(--sans); letter-spacing: .1em; text-align: left; cursor: var(--cursor-link, pointer); transition: color .3s, border-color .3s; }
.home-cover__dot[aria-pressed="true"] { color: var(--linen); border-top-color: var(--linen); }
.home-cover__dot:hover { color: var(--linen); }
@media (prefers-reduced-motion: reduce) { .home-cover__slide, .home-cover__video { transition: none; } }

/* lab-07e (client): the bright bedroom, a checklist */
.home-scene--bright .home-night__img { filter: none; }
.home-night__note { margin-top: 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.home-scene--bright .home-night__n { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--hairline-strong); border-radius: 50%; font-size: 11px; transition: background .25s, color .25s; }
.home-scene--bright .home-night__item[aria-pressed="true"] .home-night__n { background: var(--ink); color: var(--linen); border-color: var(--ink); }
.js .home-scene--bright .home-night__list > li { opacity: 1; } /* lab-07e: a checklist, nothing dimmed */
/* lab-07h (client): the pastel coast, a barely perceptible camera drift while it is on (ChatGPT's slide); never with reduced motion */
.home-cover__slide[data-slide="1"] .home-cover__photo { object-position: 30% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .home-cover__slide[data-slide="1"].is-on { animation: home-drift 14s ease-out both; }
  .home-cover__slide[data-slide="2"].is-on { animation: home-push 14s ease-out both; } /* lab-07j: the living room, a slow push in */
}
@keyframes home-drift { from { transform: scale(1.1) translate(2%, 1%); } to { transform: scale(1.0) translate(0, 0); } }
@keyframes home-push { from { transform: scale(1.0) translateX(0); } to { transform: scale(1.08) translateX(-1.5%); } }

/* lab-07j (client): the home photographs settle once when they come into view (js/home-motion.js adds the classes) */
.home-settle { overflow: hidden; }
.home-settle img { transform: scale(1.07); transition: transform 2.4s var(--slow); }
.home-settle.is-in img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .home-settle img { transform: none; transition: none; } }

/* ---------- 1 · lab-07k (client): three words per slide instead of a sentence ---------- */
.home-cover__title--words { font: 300 clamp(2.6rem, 6.2vw, 5.6rem)/.98 var(--serif); letter-spacing: -.02em; max-width: none; margin: 0; }
.home-cover__title--words .home-cover__line { display: grid; filter: none; }
.home-cover__word { display: block; opacity: 0; transform: translateY(.35em); transition: opacity 1.1s var(--slow), transform 1.4s var(--slow); }
.home-cover__word:nth-child(2) { padding-left: .9em; }
.home-cover__word:nth-child(3) { padding-left: 1.8em; }
.home-cover__line.is-on .home-cover__word { opacity: 1; transform: none; transition-delay: calc(.25s + var(--i) * .38s); }
html:not(.js) .home-cover__line:first-child .home-cover__word { opacity: 1; transform: none; }
@media (max-width: 600px) { .home-cover__word:nth-child(2) { padding-left: .6em; } .home-cover__word:nth-child(3) { padding-left: 1.2em; } }
@media (prefers-reduced-motion: reduce) { .home-cover__word { transition: none; transform: none; } }

/* lab-07m (client): living motion over the stills: sea, curtain, olive trees, birds (only ≥ 768 px, motion allowed) */
.home-cover__slides { overflow: hidden; }
.home-cover__fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: none; }
/* lab-123 (client, "no noto movimiento en el agua"): on every width, motion allowed */
@media (prefers-reduced-motion: no-preference) {
  html.js .home-cover__fx { display: block; }
  .home-cover__slide[data-slide="1"] .home-cover__photo, .home-cover__slide[data-slide="2"] .home-cover__photo { object-position: 50% 50%; }
}
/* lab-07n (client): one word per image, larger */
.home-cover__title--words { font-size: clamp(3.2rem, 8.5vw, 7.6rem); line-height: .95; }

/* ---------- lab-07r (client): the bedroom by day and by night ---------- */
.home-scene--daynight .home-night__stage { aspect-ratio: 1643 / 957; background: var(--chukum); }
.home-night__dark { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.home-night__stage.is-night .home-night__dark { opacity: 1; }
.home-scene--daynight .home-night__veil { background: rgba(8, 10, 18, .5); }
.home-scene--daynight .home-light[data-light="led"] .home-light__btn,
.home-scene--daynight .home-light[data-light="phone"] .home-light__btn { transform: translate(calc(-100% - 12px), -50%); }
.home-scene--daynight .home-light[data-light="door"] .home-light__btn { transform: translate(14px, -50%); }
.home-scene--daynight .home-light[data-light="router"] .home-light__btn { transform: translate(-30%, calc(-100% - 12px)); }
.home-scene--daynight .home-light.is-focus::before { animation: home-glow 1.6s ease-in-out infinite; }
@keyframes home-glow { 0%, 100% { box-shadow: 0 0 10px 3px rgba(245, 242, 236, .55); } 50% { box-shadow: 0 0 22px 9px rgba(245, 242, 236, .8); } }
.home-night__switch { display: inline-flex; margin-bottom: 12px; padding: 3px; border: 1px solid var(--hairline-strong); border-radius: 100px; }
.home-night__mode { min-height: 38px; padding: 0 18px; border: 0; border-radius: 100px; background: none; cursor: var(--cursor-link, pointer); font: 500 13px/1 var(--sans); color: var(--ink-2); transition: background .3s, color .3s; }
.home-night__mode[aria-pressed="true"] { background: var(--ink); color: var(--linen); }
.js .home-scene--daynight .home-night__list > li { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .home-night__dark { transition: none; } .home-scene--daynight .home-light.is-focus::before { animation: none; } }

/* lab-07s (client): photographs open from an arch into a soft rectangle as they rise (js/home-motion.js sets --shape) */
.home-shape {
  --shape: 1; overflow: hidden; isolation: isolate;
  border-top-left-radius: calc(50% * (1 - var(--shape)) + 18px * var(--shape)) calc(34% * (1 - var(--shape)) + 18px * var(--shape));
  border-top-right-radius: calc(50% * (1 - var(--shape)) + 18px * var(--shape)) calc(34% * (1 - var(--shape)) + 18px * var(--shape));
  border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}
/* lab-07r: on a phone the bedroom stays in view (sticky) while the list scrolls under it, so each tap shows its light */
@media (max-width: 767px) {
  .home-scene--daynight .home-night { position: sticky; top: calc(var(--hdr-h) + 6px); z-index: 2; padding-bottom: 10px; background: var(--linen); }
}

/* ---------- lab-07u (client): the bedroom as a full-width banner, like her hotel-room reference ---------- */
.home-scene--night.home-room { display: block; }
.home-room__banner { width: 100vw; margin: 0 calc(50% - 50vw); }
.home-room .home-night__stage { aspect-ratio: 1643 / 957; max-height: none; border-radius: 0 !important; }
.home-room__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 24, 22, .28), rgba(24, 24, 22, .42)); transition: opacity 1.2s ease; pointer-events: none; }
.home-room__title { position: absolute; inset: 0; display: grid; place-content: center; gap: 18px; padding: 0 var(--gutter); text-align: center; color: var(--linen); transition: opacity 1s ease; pointer-events: none; }
.home-room__eyebrow { font: 500 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.home-room__h { margin: 0 auto; max-width: 22ch; font: 300 clamp(1.7rem, 4.2vw, 3.8rem)/1.1 var(--sans); letter-spacing: .02em; text-transform: uppercase; text-wrap: balance; }
.home-night__stage.is-night .home-room__title, .home-night__stage.is-night .home-room__shade { opacity: 0; }
.home-room__switch { position: absolute; left: 50%; bottom: clamp(14px, 3vw, 28px); transform: translateX(-50%); margin: 0; z-index: 3; border-color: rgba(245, 242, 236, .6); background: rgba(24, 24, 22, .25); backdrop-filter: blur(4px); }
.home-room__switch .home-night__mode { color: rgba(245, 242, 236, .85); }
.home-room__switch .home-night__mode[aria-pressed="true"] { background: var(--linen); color: var(--ink); }
.home-room__body { padding-top: clamp(28px, 4vw, 48px); }
.home-room__lead { margin: 0 auto clamp(20px, 3vw, 32px); max-width: 52ch; text-align: center; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; color: var(--ink-soft); }
@media (min-width: 1024px) {
  .home-room__list { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--grid-gap); }
  .home-room__list > li { border-bottom: 0; }
  .home-room__list .home-night__note { padding-left: 0; }
}
.home-room__tip { margin-top: 20px; }
@media (max-width: 767px) {
  .home-room__h { font-size: clamp(1.25rem, 6vw, 1.7rem); }
  .home-room__eyebrow { font-size: 10.5px; }
  .home-scene--daynight.home-room .home-night { padding-bottom: 0; }
}
@media (max-width: 767px) { /* lab-07u: on a phone the title sits higher, clear of the switch */
  .home-room__title { padding-bottom: 52px; gap: 8px; }
  .home-room__h { font-size: clamp(1.05rem, 5vw, 1.45rem); }
  .home-room__switch .home-night__mode { min-height: 32px; padding: 0 14px; font-size: 12px; }
}

/* lab-07v (client): Liven Philosophy in Marcellus, "tú y tu espacio" in Newsreader italic, more air */
.home-philo__h--marcellus { font-family: 'Marcellus', var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.2vw, 3.9rem); line-height: 1.12; letter-spacing: -.005em; }
.home-philo__h--marcellus em { font-family: var(--serif); font-style: italic; font-weight: 300; letter-spacing: -.01em; }
.home-philo__text { gap: 18px; }
.p-home .home-philo { padding-block: clamp(110px, 15vw, 210px) clamp(96px, 13vw, 180px); }
.home-pillars { margin-top: 14px; }

/* lab-07z (client): the gong bath, framed on the gong and the practitioner when the photo is cropped */
.home-sol__img[src*="sol-retreat-gong"] { object-position: 85% 50%; }

/* ---------- lab-08g (client): the Journal series, one drawn tile per theme (night blue, a band of light, white lines) ---------- */
.home-series__grid { row-gap: 28px; align-items: start; }
.home-series { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline-strong); }
.home-series__item { display: grid; grid-template-columns: auto 2.6em 1fr; column-gap: clamp(14px, 2vw, 24px); row-gap: 6px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--hairline); color: var(--ink); text-decoration: none; }
.home-glyph { grid-row: span 2; position: relative; display: block; width: clamp(84px, 10.5vw, 132px); aspect-ratio: 1; overflow: hidden; border-radius: 14px; isolation: isolate;
  background: radial-gradient(circle at 30% 22%, rgba(130, 160, 210, .3), transparent 62%), linear-gradient(155deg, #26446f 0%, #172f55 52%, #0e1d3a 100%); }
.home-glyph__light { position: absolute; top: -20%; bottom: -20%; left: 18%; width: 22%; transform: skewX(-8deg); filter: blur(7px); mix-blend-mode: screen; opacity: .5; pointer-events: none; transition: opacity .6s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
  background: linear-gradient(90deg, rgba(255, 60, 50, 0), rgba(255, 90, 60, .55) 18%, rgba(255, 190, 70, .6) 36%, rgba(240, 240, 110, .5) 50%, rgba(90, 210, 140, .45) 64%, rgba(70, 160, 255, .45) 80%, rgba(150, 100, 255, 0)); }
.home-glyph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-glyph svg :is(circle, path) { fill: none; stroke: rgba(245, 242, 236, .92); stroke-width: 1.1; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.home-glyph svg .is-grid { stroke: rgba(245, 242, 236, .28); }
.home-glyph svg .is-dot { fill: rgba(245, 242, 236, .95); stroke: none; }
.home-glyph svg .is-lens { fill: rgba(232, 196, 120, .38); stroke: none; }
.home-glyph svg .is-r1 { stroke: rgba(245, 242, 236, .72); } .home-glyph svg .is-r2 { stroke: rgba(245, 242, 236, .52); }
.home-glyph svg .is-r3 { stroke: rgba(245, 242, 236, .34); } .home-glyph svg .is-r4 { stroke: rgba(245, 242, 236, .2); }
.home-series__item:hover .home-glyph__light, .home-series__item:focus-visible .home-glyph__light { opacity: .8; transform: translateX(110%) skewX(-8deg); }
.home-series__n { padding-top: .1em; font: 400 .95rem/1.5 var(--serif); color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; }
.home-series__title { grid-column: 3; font: 400 clamp(1.08rem, 1.5vw, 1.3rem)/1.3 var(--serif); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em; transition: text-decoration-color .3s; }
.home-series__topic { grid-column: 3; font-size: .95rem; line-height: 1.55; color: var(--ink-soft); max-width: 60ch; }
.home-series__item .home-series__n { grid-column: 2; grid-row: 1 / span 2; }
.home-series__item:hover .home-series__title, .home-series__item:focus-visible .home-series__title { text-decoration-color: currentColor; }
.home-unfold .home-glyph svg :is(circle, path):not(.is-dot):not(.is-lens) { stroke-dasharray: 0 1.01; }
.home-unfold .home-glyph svg :is(.is-dot, .is-lens) { opacity: 0; }
.home-unfold li.is-in .home-glyph svg :is(circle, path):not(.is-dot):not(.is-lens) { animation: home-glyph-draw 1.6s cubic-bezier(.4, 0, .2, 1) .15s forwards; }
.home-unfold li.is-in .home-glyph svg :is(.is-dot, .is-lens) { animation: home-glyph-fade .9s ease 1.3s forwards; }
@keyframes home-glyph-draw { from { stroke-dasharray: 0 1.01; } to { stroke-dasharray: 1.01 0; } }
@keyframes home-glyph-fade { to { opacity: 1; } }
@media (max-width: 599px) {
  .home-series__item { grid-template-columns: auto 1fr; }
  .home-series__item .home-series__n { display: none; }
  .home-series__title, .home-series__topic { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .home-glyph__light { transition: none; } }

/* lab-08l (client): bedroom banner, two short lines and one sentence under them */
.home-room__line { display: block; }
.home-room__sub { max-width: 46ch; margin: 0 auto; font: 400 clamp(.92rem, 1.25vw, 1.1rem)/1.5 var(--sans); color: rgba(245, 242, 236, .92); text-wrap: balance; }
@media (max-width: 767px) { .home-room__sub { font-size: .8rem; max-width: 34ch; } .home-room__title { gap: 10px; } }
/* lab-08l: on a phone the sentence goes under the photo (the banner is too short for it); one copy shows at a time */
.home-room__sub--below { display: none; }
@media (max-width: 767px) { .home-room__title .home-room__sub { display: none; } .home-room__sub--below { display: block; margin: 0 auto 20px; color: var(--ink-soft); text-align: center; font-size: .95rem; } }

/* ---------- lab-08n (client): the hour names its factor; the value of the Check-up ---------- */
.home-tip__factor { font-weight: 600; color: var(--ink); }
.home-mark.is-cue .home-mark__dot { box-shadow: 0 0 0 5px rgba(245, 242, 236, .45); animation: home-cue 1.6s ease-in-out 2; }
@keyframes home-cue { 50% { box-shadow: 0 0 0 10px rgba(245, 242, 236, .15); } }
.p-home .home-value { padding-top: 0; }
.home-value__banner { position: relative; width: 100vw; margin: 0 calc(50% - 50vw); aspect-ratio: 16 / 7; overflow: hidden; }
.home-value__banner picture, .home-value__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.home-value__h { max-width: 24ch; }
.home-value__body { padding-top: clamp(32px, 5vw, 64px); display: grid; gap: clamp(28px, 4vw, 48px); justify-items: center; text-align: center; }
.home-value__text { max-width: 58ch; margin: 0; }
.home-value__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); width: 100%; max-width: 920px; text-align: left; }
.home-value__list { margin: 12px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--hairline-strong); }
.home-value__list li { padding: 12px 0; border-bottom: 1px solid var(--hairline); font: 400 clamp(1.02rem, 1.4vw, 1.18rem)/1.35 var(--serif); }
.home-value__list .num { display: inline-block; min-width: 2.2em; font-size: .85rem; color: var(--ink-soft); }
.home-value__actions { justify-content: center; }
@media (max-width: 767px) {
  .home-value__banner { aspect-ratio: 1 / 1; }
  .home-value__h { font-size: clamp(1.15rem, 5.4vw, 1.5rem); }
  .home-value__cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .home-mark.is-cue .home-mark__dot { animation: none; } }

/* ---------- lab-08o (client): the Check-up CTA card; the contact form on About ---------- */
.home-cta__card { display: grid; gap: 18px; justify-items: start; padding: clamp(28px, 4.5vw, 56px); border-radius: 18px; background: var(--chukum); }
.home-cta__h { margin: 0; font: 300 clamp(1.9rem, 3.6vw, 3rem)/1.12 var(--serif); letter-spacing: -.01em; }
.home-cta__h span { display: block; }
.home-cta__text { margin: 0; max-width: 58ch; color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; }
.home-cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.home-cta__modes { font-size: .9rem; color: var(--ink-soft); }
.about-contact { border-top: 1px solid var(--hairline); }
@media (min-width: 1024px) { .about-contact .grid > .home-contact__body { grid-column: 7 / span 6; } }

/* ---------- lab-08q (client): section 01 on her living room; the hour tints the photograph ---------- */
.home-read--living .home-read__stage { aspect-ratio: 4 / 3; max-width: 720px; }
.home-read__tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: transparent; transition: background-color 1.2s ease; }
.home-read--living .home-read__img { transition: filter 1.2s ease; }
.home-read--living[data-time="morning"] .home-read__tint { background: rgba(214, 226, 240, .22); }
.home-read--living[data-time="noon"] .home-read__img { filter: brightness(1.04) saturate(1.04); }
.home-read--living[data-time="dusk"] .home-read__tint { background: rgba(255, 196, 140, .38); }
.home-read--living[data-time="evening"] .home-read__tint { background: rgba(190, 120, 70, .5); }
.home-read--living[data-time="evening"] .home-read__img { filter: brightness(.82); }
.home-read--living[data-time="night"] .home-read__tint { background: rgba(40, 52, 92, .62); }
.home-read--living[data-time="night"] .home-read__img { filter: brightness(.6) saturate(.8); }
@media (prefers-reduced-motion: reduce) { .home-read__tint, .home-read--living .home-read__img { transition: none; } }

/* ---------- lab-08r (client): Liven Interiors designs · Biohausen builds, a quiet strip under the CTA ---------- */
.p-home .home-duo { padding-block: clamp(28px, 4vw, 48px); }
.home-duo__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: clamp(16px, 4vw, 56px); padding: clamp(20px, 3vw, 28px) 0; border-block: 1px solid var(--hairline); }
.home-duo__side { display: grid; gap: 8px; justify-items: start; }
.home-duo__side:last-child { justify-items: end; text-align: right; }
.home-duo__logo { display: inline-flex; align-items: center; gap: 2px; height: 26px; opacity: .85; }
.home-duo__logo img { height: 100%; width: auto; }
.home-duo__logo--liven img { height: 16px; }
.home-duo__vesica { width: 26px; height: 26px; overflow: visible; color: var(--ink); }
.home-duo__vesica circle { fill: none; stroke: currentColor; stroke-width: 1.4; }
.home-duo__vesica path { fill: var(--soft-gold); fill-opacity: .35; }
.home-duo__role { margin: 4px 0 0; font: 400 1.02rem/1.3 var(--serif); font-style: italic; color: var(--ink); }
.home-duo__items { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; }
.home-duo__join { align-self: center; width: clamp(32px, 6vw, 72px); height: 1px; background: var(--soft-gold); }
.home-duo__line { margin: 14px auto 0; max-width: 60ch; text-align: center; font-size: .85rem; color: var(--ink-soft); }
@media (max-width: 599px) {
  .home-duo__pair { grid-template-columns: 1fr; }
  .home-duo__side:last-child { justify-items: start; text-align: left; }
  .home-duo__join { display: none; }
  .home-duo__line { text-align: left; }
}
.p-home .home-cta { padding-bottom: clamp(20px, 3vw, 36px); } /* lab-08r: the strip follows close */

/* lab-08s (client): the real night photograph (curtains drawn, door closed, lamp on) at 20:00 and 22:00 */
.home-read__night { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; pointer-events: none; }
.home-read__night picture, .home-read__night img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-read--living[data-time="evening"] .home-read__night { opacity: 1; }
.home-read--living[data-time="night"] .home-read__night { opacity: 1; }
.home-read--living[data-time="evening"] .home-read__tint { background: rgba(255, 214, 170, .12); }
.home-read--living[data-time="night"] .home-read__tint { background: rgba(30, 36, 60, .28); }
.home-read--living[data-time="evening"] .home-read__night img, .home-read--living[data-time="night"] .home-read__night img { filter: none; }
@media (prefers-reduced-motion: reduce) { .home-read__night { transition: none; } }

/* ---------- lab-08t (client): the process in three images inside the method; the one-minute preview ---------- */
/* lab-08x (client): the process, compact and interactive: three steps and one photograph */
.home-proc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 860px; margin: clamp(32px, 5vw, 56px) 0 0; }
.home-proc__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline); }
.home-proc__btn { position: relative; display: grid; grid-template-columns: 2.4em 1fr; column-gap: 10px; width: 100%; padding: 16px 0 16px 14px; border: 0; border-top: 1px solid var(--hairline); background: none; text-align: left; color: var(--ink-soft); cursor: var(--cursor-link, pointer); transition: color .3s; }
.home-proc__btn::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: var(--bronze); transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
.home-proc__btn[aria-pressed="true"] { color: var(--ink); }
.home-proc__btn[aria-pressed="true"]::before { transform: scaleY(1); }
.home-proc__n { font-size: .85rem; padding-top: .2em; }
.home-proc__name { font: 400 clamp(1.08rem, 1.5vw, 1.3rem)/1.3 var(--serif); }
.home-proc__line { grid-column: 2; max-height: 0; overflow: hidden; opacity: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; transition: max-height .45s ease, opacity .35s ease, margin .35s ease; }
.home-proc__btn[aria-pressed="true"] .home-proc__line { max-height: 4.5em; opacity: 1; margin-top: 4px; }
.home-proc__btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.home-proc__media { position: relative; aspect-ratio: 454 / 518; border-radius: 16px; overflow: hidden; background: var(--chukum); }
.home-proc__img { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.home-proc__img.is-on { opacity: 1; }
.home-proc__img picture, .home-proc__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .home-proc { grid-template-columns: 1fr; } .home-proc__media { order: -1; max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { .home-proc__img, .home-proc__line, .home-proc__btn::before { transition: none; } }
.home-pv { background: var(--chukum); }
.home-pv__grid { row-gap: 32px; align-items: start; }
.home-pv__head { display: grid; gap: 14px; align-content: start; }
.home-pv__radar { width: 100%; max-width: 340px; margin-top: 8px; overflow: visible; }
.home-pv__ring { fill: none; stroke: var(--hairline-strong); stroke-width: 1; }
.home-pv__axis { stroke: var(--hairline); stroke-width: 1; }
.home-pv__radar text { font: 500 11px/1 var(--sans); fill: var(--ink-soft); }
.home-pv__shape { fill: rgba(182, 162, 122, .28); stroke: var(--bronze); stroke-width: 1.5; stroke-linejoin: round; opacity: 0; transition: opacity .4s ease, points .4s ease; }
.home-pv__radar.is-on .home-pv__shape { opacity: 1; }
.home-pv__set { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.home-pv__legend { margin-bottom: 12px; font: 400 clamp(1.05rem, 1.5vw, 1.25rem)/1.3 var(--serif); }
.home-pv__spaces { display: flex; flex-wrap: wrap; gap: 8px; }
.home-pv__chip input, .home-pv__dot input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.home-pv__chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--hairline-strong); border-radius: 100px; font-size: .92rem; cursor: var(--cursor-link, pointer); transition: background .2s, color .2s; }
.home-pv__chip input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.home-pv__chip input:focus-visible + span, .home-pv__dot input:focus-visible + span { outline: 2px solid var(--bronze); outline-offset: 2px; }
.home-pv__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 20px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.home-pv__q { margin: 0; line-height: 1.45; }
.home-pv__name { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.home-pv__scale { display: flex; gap: 6px; }
.home-pv__dot span { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--hairline-strong); border-radius: 50%; font-size: .85rem; cursor: var(--cursor-link, pointer); transition: background .2s, color .2s; }
.home-pv__dot input:checked + span { background: var(--ink); border-color: var(--ink); color: var(--linen); }
.home-pv__ends { display: flex; justify-content: space-between; margin: 6px 0 0; font-size: .78rem; color: var(--ink-soft); }
.home-pv__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.home-pv__progress { font-size: .88rem; color: var(--ink-soft); }
.home-pv__form:not(.is-ready) .home-pv__go .btn { opacity: .55; }
.home-pv__private { margin-top: 12px; color: var(--ink-soft); }
@media (max-width: 599px) { .home-pv__row { grid-template-columns: 1fr; } .home-pv__dot span { width: 40px; height: 40px; } }

/* lab-08v (client): "redondea las esquinas de esa imagen": the photo layers are rounded; the marks and their notes are not clipped */
.home-read--living .home-read__stage { border-radius: 18px; }
.home-read--living .home-read__stage > picture, .home-read--living .home-read__night, .home-read--living .home-read__tint { border-radius: 18px; overflow: hidden; }
.home-read--living .home-read__stage > picture img, .home-read--living .home-read__night img { border-radius: 18px; }

/* lab-08y (client): Mejoramos, before and after of the bedroom */
.home-proc__cmp-layer { position: absolute; inset: 0; }
.home-proc__cmp-layer picture, .home-proc__cmp-layer img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home-proc__cmp-after { clip-path: inset(0 0 0 var(--pos)); }
.home-proc__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--linen); box-shadow: 0 0 0 1px rgba(34, 34, 31, .15); pointer-events: none; }
.home-proc__handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--linen); box-shadow: 0 1px 6px rgba(34, 34, 31, .25); }
.home-proc__tag { position: absolute; top: 10px; left: 10px; padding: 4px 9px; border-radius: 100px; background: rgba(34, 34, 31, .55); color: var(--linen); font: 500 11px/1.2 var(--sans); letter-spacing: .04em; pointer-events: none; }
.home-proc__tag--after { left: auto; right: 10px; }
.home-proc__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.home-proc__range:focus-visible ~ .home-proc__handle::after, .home-proc__cmp:focus-within .home-proc__handle::after { outline: 2px solid var(--bronze); outline-offset: 2px; }
.home-proc__img:not(.is-on) .home-proc__range { pointer-events: none; }

/* lab-09a (client): the photographs of the process inside their stages of the method */
.home-step__media { position: relative; width: min(100%, 260px); aspect-ratio: 454 / 518; margin-top: 18px; border-radius: 16px; overflow: hidden; background: var(--chukum); }
.home-step__media > picture, .home-step__media > picture img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- lab-09d (client): what you receive, interactive ---------- */
.home-dv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 240px); gap: clamp(20px, 4vw, 56px); align-items: center; max-width: 860px; margin-top: clamp(20px, 3vw, 32px); }
.home-dv__list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hairline); }
.home-dv__btn { position: relative; display: grid; grid-template-columns: 2.4em 1fr; column-gap: 10px; width: 100%; padding: 16px 0 16px 14px; border: 0; border-top: 1px solid var(--hairline); background: none; text-align: left; color: var(--ink-soft); cursor: var(--cursor-link, pointer); transition: color .3s; }
.home-dv__btn::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 2px; background: var(--bronze); transform: scaleY(0); transform-origin: top; transition: transform .45s ease; }
.home-dv__btn[aria-pressed="true"] { color: var(--ink); }
.home-dv__btn[aria-pressed="true"]::before { transform: scaleY(1); }
.home-dv__n { font-size: .85rem; padding-top: .2em; }
.home-dv__name { font: 400 clamp(1.08rem, 1.5vw, 1.3rem)/1.3 var(--serif); }
.home-dv__line { grid-column: 2; max-height: 0; overflow: hidden; opacity: 0; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); transition: max-height .45s ease, opacity .35s ease, margin .35s ease; }
.home-dv__btn[aria-pressed="true"] .home-dv__line { max-height: 9em; opacity: 1; margin-top: 4px; }
.home-dv__btn:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }
.home-dv__art { position: relative; aspect-ratio: 1; border-radius: 18px; background: var(--chukum); }
.home-dv__svg { position: absolute; inset: 12%; width: 76%; height: 76%; opacity: 0; transition: opacity .4s ease; }
.home-dv__svg.is-on { opacity: 1; }
.home-dv__svg :is(path, circle) { fill: none; stroke: var(--ink); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1.01 0; }
.home-dv__svg .is-soft { stroke: rgba(34, 34, 31, .3); }
.home-dv__svg .is-gold { stroke: var(--bronze); stroke-width: 1.8; }
.home-dv__svg.is-on :is(path, circle) { animation: home-dv-draw 1.2s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes home-dv-draw { from { stroke-dasharray: 0 1.01; } to { stroke-dasharray: 1.01 0; } }
.home-dv__note { margin: 18px 0 0; max-width: 70ch; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 767px) { .home-dv { grid-template-columns: 1fr; } .home-dv__art { order: -1; max-width: 200px; } }
@media (prefers-reduced-motion: reduce) { .home-dv__svg.is-on :is(path, circle) { animation: none; } .home-dv__line, .home-dv__btn::before, .home-dv__svg { transition: none; } }

/* ===== journal.css ===== */
/* LIVEN · V10 Lab · Liven Journal: index + essays (owner: Journal team). Scope: .p-journal / .journal-*.
   Editorial, quiet: serif 300 titles, one reading column, hairlines between essays. Nothing moves (§13):
   filters show/hide instantly; hover only changes underline and tone. */

/* =============================================================== desktop columns
   Workaround: in _base.css `.d-M` (grid-column: span M → end:auto) + `.ds-N` (grid-column-start:N) spans ONE track.
   Explicit start/span here (higher specificity) until the base rule is fixed (shared change request). */
@media (min-width: 1024px) {
  .p-journal .grid > .journal-head__lead { grid-column: 9 / span 4; }
  .p-journal .grid > .journal-sub__col { grid-column: 7 / span 6; }
  .p-journal .grid > .journal-essay__intro,
  .p-journal .grid > .journal-next__link,
  .p-journal .grid > .journal-next__back { grid-column: 3 / span 8; }
  .p-journal .grid > .journal-essay__fig { grid-column: 2 / span 10; }
  .p-journal .grid > .journal-essay__body,
  .p-journal .grid > .journal-refs,
  .p-journal .grid > .journal-cta-col { grid-column: 3 / span 7; }
}

/* =============================================================== index · head */
.journal-head { padding-block: clamp(40px, 7vw, 112px) clamp(28px, 4vw, 48px); }
/* same scale as the base .display (the largest statement on the site), not above it */
.journal-head__title { font: 300 clamp(2.6rem, 7.2vw, 6.6rem)/.96 var(--serif); letter-spacing: -.02em; }
.journal-head__lead { padding-bottom: .35em; }
.journal-head__rule { margin-top: clamp(28px, 4vw, 48px); }

/* =============================================================== index · filters (aria-pressed; JS only) */
.journal-filters { display: none; }
html.js .journal-filters { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 4px 6px; }
.journal-filter {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; flex: none;
  background: transparent; border: 1px solid rgba(34, 34, 31, .5); border-radius: 100px;
  font: 400 15px/1 var(--sans); color: var(--ink-soft); white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s;
}
.journal-filter:hover { border-color: var(--ink); color: var(--ink); }
.journal-filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--linen); }
/* mobile: one row that scrolls sideways inside the viewport (the page itself never scrolls horizontally) */
@media (max-width: 767px) {
  html.js .journal-filters {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .journal-filters::-webkit-scrollbar { display: none; }
}

/* =============================================================== index · essay list */
.journal-index { padding-bottom: var(--space-s); }
.journal-list { margin-top: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--hairline); }
.journal-item { position: relative; display: grid; gap: 18px; padding-block: clamp(28px, 4vw, 48px); border-top: 1px solid var(--hairline); }
.journal-item__media { background: var(--chukum); overflow: hidden; }
.journal-item__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .3s ease; }
.journal-item__cat { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.journal-item__title { margin-top: 12px; font: 300 clamp(1.75rem, 3vw, 2.7rem)/1.08 var(--serif); letter-spacing: -.012em; text-wrap: balance; }
.journal-item__link { color: var(--ink); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-color .3s; }
/* the title link covers the whole row (one tab stop, image included) */
.journal-item__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.journal-item:hover .journal-item__link { text-decoration-color: var(--hairline-strong); }
.journal-item:hover .journal-item__media img { opacity: .9; }
.journal-item__link:focus-visible { outline: none; }
.journal-item:has(.journal-item__link:focus-visible) { outline: 2px solid var(--olive); outline-offset: 4px; }
.journal-item__lead { margin-top: 14px; max-width: 52ch; color: var(--ink-soft); text-wrap: pretty; }
.journal-item__by { margin-top: 18px; font-size: 14.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (min-width: 768px) {
  .journal-item { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--grid-gap); align-items: center; }
  .journal-item__media { grid-column: 1 / span 3; }
  .journal-item__text { grid-column: 4 / -1; }
}
@media (min-width: 1024px) {
  .journal-item { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .journal-item__media { grid-column: 1 / span 5; }
  .journal-item__text { grid-column: 7 / span 6; }
}

/* =============================================================== index · subscription (§9: line button) */
.journal-sub__h { align-self: start; }
.journal-sub__form .field__input { background: rgba(255, 255, 255, .6); }
.journal-sub__form.is-sent .field, .journal-sub__form.is-sent .form__note { opacity: .55; }
@media (min-width: 1024px) { .journal-sub__h { font-size: clamp(2rem, 3.4vw, 3rem); } }

/* =============================================================== essay · head */
.journal-essay__head { padding-block: clamp(36px, 6vw, 96px) clamp(28px, 4vw, 52px); }
.journal-essay__intro { display: grid; gap: 18px; justify-items: start; }
.journal-essay__cat {
  display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px -4px;
  font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--bronze);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: text-decoration-color .3s;
}
.journal-essay__cat:hover { text-decoration-color: currentColor; }
.journal-essay__title { font: 300 clamp(2.3rem, 5.6vw, 4.9rem)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.journal-essay__dek { max-width: 46ch; font: 300 clamp(1.2rem, 1.9vw, 1.55rem)/1.45 var(--serif); color: var(--ink-soft); text-wrap: pretty; }
.journal-essay__by {
  display: flex; align-items: center; gap: 12px; margin-top: 4px;
  font-size: 14.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.journal-essay__by::before { content: ""; width: 32px; height: 1px; background: var(--soft-gold); flex: none; }

/* =============================================================== essay · figure + reading column */
.journal-essay__fig { background: var(--chukum); }
.journal-essay__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.journal-essay__body { padding-top: clamp(40px, 6vw, 80px); max-width: 64ch; color: var(--ink-soft); font-size: 18px; line-height: 1.72; }
.journal-essay__body > p + p { margin-top: 1.15em; }
.journal-essay__body > p:first-child::first-line { color: var(--ink); }
@media (max-width: 767px) { .journal-essay__body { font-size: 17px; line-height: 1.68; } }
.journal-cite { font-size: .84em; color: var(--ink-2); }
.journal-cite a { color: var(--olive); text-decoration: underline; text-decoration-color: rgba(62, 75, 62, .7); text-underline-offset: 3px; }
.journal-cite a:hover { text-decoration-color: currentColor; }
.journal-note {
  margin-top: 2em; padding-left: 16px; border-left: 1px solid var(--soft-gold);
  font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
}

/* =============================================================== essay · sources (numbered, citations land here) */
.journal-refs { margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1px solid var(--hairline); }
.journal-refs__h { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.journal-refs__list { margin-top: 18px; }
.journal-refs__list li {
  display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 0 8px; padding-block: 12px;
  font-size: 14.5px; line-height: 1.55; color: var(--ink-2); transition: background-color .4s ease;
}
.journal-refs__list li + li { border-top: 1px solid var(--hairline); }
.journal-refs__list li:target { background-color: rgba(182, 162, 122, .16); }
.journal-refs__n { font: 500 13px/1.9 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-2); padding-left: 4px; }
.journal-refs__list a { color: var(--olive); overflow-wrap: anywhere; text-underline-offset: 3px; text-decoration-color: rgba(62, 75, 62, .7); }
.journal-refs__list a:hover { text-decoration-color: currentColor; }

/* =============================================================== essay · topical CTA (a quiet link, §9) */
.journal-cta { display: grid; gap: 6px; justify-items: start; margin-top: clamp(40px, 5vw, 64px); padding: 4px 0 2px 16px; border-left: 1px solid var(--soft-gold); }
.journal-cta__q { font: 400 clamp(1.3rem, 2vw, 1.65rem)/1.3 var(--serif); color: var(--ink); }

/* =============================================================== essay · next essay + back */
.journal-next { margin-top: var(--space-s); padding-block: clamp(32px, 4vw, 56px) var(--space-s); border-top: 1px solid var(--hairline); }
.journal-next__link { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr); gap: 20px; align-items: center; text-decoration: none; color: var(--ink); }
.journal-next__media { display: block; background: var(--chukum); }
.journal-next__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: opacity .3s ease; }
.journal-next__text { display: grid; gap: 8px; }
.journal-next__label { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--olive); }
.journal-next__title {
  font: 300 clamp(1.45rem, 2.8vw, 2.4rem)/1.12 var(--serif); letter-spacing: -.01em; text-wrap: balance;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: .18em; transition: text-decoration-color .3s;
}
.journal-next__cat { font-size: 14.5px; color: var(--ink-2); }
.journal-next__link:hover .journal-next__title { text-decoration-color: var(--hairline-strong); }
.journal-next__link:hover .journal-next__media img { opacity: .9; }
.journal-next__back { margin-top: clamp(24px, 3vw, 36px); }
@media (min-width: 768px) { .journal-next__link { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; } }

/* lab-07c: subheadings and the "From Liven" note in the essays from ChatGPT's version */
.journal-essay__sub { margin-top: 1.8em; font: 400 clamp(1.3rem, 2vw, 1.6rem)/1.25 var(--serif); color: var(--ink); }
.journal-essay__liven { margin-top: 2em; padding: 22px 24px; background: var(--chukum); border-left: 2px solid var(--soft-gold); font: italic 400 1.12rem/1.5 var(--serif); color: var(--ink); }
.journal-essay__liven-label { display: block; margin-bottom: 8px; font: 500 12px/1 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--bronze); }

/* lab-09k (client): "redondea las esquinas de las imágenes del Journal", as in the rest of the site */
.journal-item__media, .journal-essay__fig { border-radius: 18px; overflow: hidden; } /* without JS or with reduced motion; .home-shape (scroll) takes over otherwise */
.journal-item__media img, .journal-essay__fig img { border-radius: 0; }
.journal-next__media, .journal-next__media img { border-radius: 12px; overflow: hidden; }
.journal-item__media.home-shape, .journal-essay__fig.home-shape {
  border-top-left-radius: calc(50% * (1 - var(--shape)) + 18px * var(--shape)) calc(34% * (1 - var(--shape)) + 18px * var(--shape));
  border-top-right-radius: calc(50% * (1 - var(--shape)) + 18px * var(--shape)) calc(34% * (1 - var(--shape)) + 18px * var(--shape));
  border-bottom-left-radius: 18px; border-bottom-right-radius: 18px;
}

/* ===== legal.css ===== */
/* LIVEN · V10 Lab · /privacy/ · /terms/ (ESTRATEGIA §10.8, §16). Every selector is scoped: .p-legal or .legal-*.
   Base layout = _base.css .legal (index 3 cols + text 8 cols on desktop). Here: back link, heading, the foldable index,
   the section being read, pending markers and the flagged verbatim text. */

.legal-page { padding-top: clamp(16px, 3vw, 40px); }
.legal-back { margin-bottom: clamp(12px, 2vw, 24px); }
.legal-head { display: grid; gap: 14px; justify-items: start; padding-bottom: clamp(8px, 2vw, 16px); border-bottom: 1px solid var(--hairline); }
.legal-h1 { font: 300 clamp(2.2rem, 5vw, 4.2rem)/1.04 var(--serif); letter-spacing: -.02em; }
/* "Under legal review" banner: preview hosts only (ESTRATEGIA §10.8) */
.p-legal .legal-review { display: none; }
html.preview-host .p-legal .legal-review { display: inline-flex; }
.p-legal .legal { padding-top: clamp(24px, 4vw, 56px); }

/* ---------- "On this page": <details>, folded on mobile by legal-toc.js, always open on desktop ---------- */
.legal-toc__details { border-bottom: 1px solid var(--hairline); }
.legal-toc__sum {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px;
  list-style: none; cursor: var(--cursor-link, pointer); color: var(--ink);
}
.legal-toc__sum::-webkit-details-marker { display: none; }
.legal-toc__sum::marker { content: ""; }
.legal-toc__details[open] > .legal-toc__sum .legal-toc__icon::after { transform: rotate(0deg); }
.p-legal .legal-toc__list { margin-top: 0; padding-bottom: 12px; }
.p-legal .legal-toc__list a { position: relative; padding-left: 16px; }
.p-legal .legal-toc__list a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: var(--hairline-strong);
  transition: width .3s var(--slow), background .3s;
}
.p-legal .legal-toc__list a[aria-current="location"] { color: var(--ink); }
.p-legal .legal-toc__list a[aria-current="location"]::before { width: 12px; background: var(--soft-gold); }
@media (min-width: 1024px) {
  .legal-toc__details { border-bottom: 0; }
  .legal-toc__sum { min-height: 0; cursor: default; pointer-events: none; }
  .legal-toc__icon { display: none; }
  .p-legal .legal-toc__list { margin-top: 12px; max-height: calc(100vh - var(--hdr-h) - 120px); overflow-y: auto; }
}

/* ---------- text ---------- */
.p-legal .legal-body > .legal-sec:first-child > h2 { margin-top: 0; }
/* html already has scroll-padding-top (header + 16px); base .legal__body h2 adds a scroll-margin on top of it, which
   left a deep link (#cancellation) a whole header too low. One small margin is enough here. */
.p-legal .legal-sec > h2 { scroll-margin-top: 8px; }
.legal-sec > * + * { margin-top: 1em; }
.legal-sec + .legal-sec { margin-top: 0; }
.legal-sec--pending > h2 { color: var(--ink-2); }
.legal-pending { margin-top: .6em; }
/* the public 15-day sentence (brief §11, COPY SOL-2) quoted above its pending conditions */
.legal-quote { padding-left: 14px; border-left: 1px solid var(--soft-gold); color: var(--ink); }

/* verbatim current text that must change with legal review */
.legal-flag { padding: 12px 0 12px 14px; border-left: 1px dashed var(--hairline-strong); }
.legal-flag > * + * { margin-top: .8em; }
.legal-flag--item { padding-block: 4px; margin-left: 0; }
.p-legal .prose ul li.legal-flag--item { padding-left: 1.2em; border-left: 0; }
.legal-flag__tag { margin-left: 4px; vertical-align: 1px; }
.legal-flag__foot .legal-flag__tag { margin-left: 0; }

/* lab-05g: "Last updated" under the title (the Terms promise it) */
.legal-updated { font-size: 14px; color: var(--ink-2); }

/* ===== notfound.css ===== */
/* LIVEN · V10 Lab · 404 (bilingual /404.html). Every selector is scoped: .notfound-*.
   Text first; on ≥768 px a dashed plan of a room that is not there sits beside it. Nothing moves. */

.notfound-sec { display: grid; align-items: center; min-height: calc(100svh - var(--hdr-h) - 120px); padding-block: clamp(32px, 8vw, 128px); }
.notfound-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 768px) { .notfound-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.notfound-text { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.notfound-h1 { font: 300 clamp(2.3rem, 6vw, 5.2rem)/1.02 var(--serif); letter-spacing: -.02em; max-width: 14ch; text-wrap: balance; }
.notfound-line { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink-soft); }
.notfound-actions { padding-top: 10px; }

.notfound-plan { display: none; color: var(--hairline-strong); }
@media (min-width: 768px) { .notfound-plan { display: block; } }
.notfound-plan__svg { width: 100%; max-width: 420px; height: auto; margin-inline: auto; }
.notfound-plan__door { color: var(--stone); }
.notfound-plan__dim { color: var(--soft-gold); }
.notfound-plan__dot { fill: var(--soft-gold); }

/* ===== profile.css ===== */
/* LIVEN · V10 Lab · free space preview (/your-space/ · /es/tu-espacio/), lab-06ai. Scoped to .p-profile. */

/* ---------- hero ---------- */
.p-profile .profile-hero { padding-top: calc(var(--hdr-h) + var(--space-s)); padding-bottom: var(--space-s); }
.p-profile .profile-hero .wrap { display: grid; gap: 24px; justify-items: start; }
.p-profile .profile-hero__h1 { max-width: 14ch; }
.p-profile .profile-hero .lead { max-width: 46ch; }

/* ---------- the tool ---------- */
.p-profile .profile-tool .grid { row-gap: 40px; align-items: start; }
.p-profile .profile-tool__form { display: grid; gap: 32px; }
.p-profile .profile-form { display: grid; gap: 36px; }
.p-profile .profile-space, .p-profile .profile-ratings { border: 0; margin: 0; padding: 0; min-width: 0; }
.p-profile .profile-legend { padding: 0; margin-bottom: 14px; font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.3 var(--serif); color: var(--ink); }
.p-profile .profile-ratings > .small { margin: -6px 0 6px; }

.p-profile .profile-space__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.p-profile .profile-chip { position: relative; display: inline-flex; }
.p-profile .profile-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: var(--cursor-link, pointer); }
.p-profile .profile-chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  font: 400 15px/1.2 var(--sans); color: var(--ink); border: 1px solid var(--stone); border-radius: 100px;
  transition: background .25s, color .25s, border-color .25s;
}
.p-profile .profile-chip:hover span { border-color: var(--ink); }
.p-profile .profile-chip input:checked + span { background: var(--olive); border-color: var(--olive); color: var(--linen); }
.p-profile .profile-chip input:focus-visible + span { outline: 2px solid var(--olive); outline-offset: 3px; }

.p-profile .profile-row { display: grid; gap: 6px; padding-block: 20px; border-top: 1px solid var(--hairline); }
.p-profile .profile-row__label { font-size: 16px; line-height: 1.45; color: var(--ink-soft); }
.p-profile .profile-row__name { display: block; font: 400 1.25rem/1.3 var(--serif); color: var(--ink); margin-bottom: 2px; }
.p-profile .profile-row__help { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.p-profile .profile-row__ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); }

.p-profile .profile-range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 4px 0 0; background: none; cursor: var(--cursor-link, pointer); --fill: 50%; }
.p-profile .profile-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--olive) var(--fill), var(--hairline-strong) var(--fill)); }
.p-profile .profile-range::-moz-range-track { height: 3px; border-radius: 3px; background: var(--hairline-strong); }
.p-profile .profile-range::-moz-range-progress { height: 3px; border-radius: 3px; background: var(--olive); }
.p-profile .profile-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9.5px; border-radius: 50%; background: var(--linen); border: 1.5px solid var(--olive); }
.p-profile .profile-range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--linen); border: 1.5px solid var(--olive); }
.p-profile .profile-range:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }

.p-profile .profile-form__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.p-profile .profile-radar { margin: 0; width: 100%; max-width: 440px; justify-self: center; }
.p-profile .profile-radar svg { display: block; width: 100%; height: auto; overflow: visible; }
.p-profile .profile-radar__grid { fill: none; stroke: var(--hairline); }
.p-profile .profile-radar__axis { stroke: var(--hairline); }
.p-profile .profile-radar__shape { fill: rgba(62, 75, 62, .14); stroke: var(--olive); stroke-width: 1.5; stroke-linejoin: round; transition: all .45s var(--slow); }
.p-profile .profile-radar__dot { fill: var(--olive); transition: all .45s var(--slow); }
.p-profile .profile-radar__dot.is-low { fill: var(--soft-gold); r: 6.5; }
.p-profile .profile-radar text { font: 13px var(--sans); fill: var(--ink-2); }
.p-profile .profile-radar text.is-low { fill: var(--ink); font-weight: 500; }
/* phones and tablets: the radar shows inside the preview (the tool one would sit below the button, out of sight) */
.p-profile .profile-radar--tool { display: none; }
.p-profile .profile-radar--result { justify-self: start; max-width: 380px; }
@media (min-width: 1024px) {
  .p-profile .profile-radar--tool { display: block; position: sticky; top: calc(var(--hdr-h) + 32px); }
  .p-profile .profile-radar--result { display: none; }
}

/* ---------- the preview ---------- */
.p-profile .profile-result .grid { row-gap: 40px; align-items: start; }
.p-profile .profile-result__main { display: grid; gap: 22px; align-content: start; }
.p-profile .profile-result__h { outline: none; max-width: 20ch; }
.p-profile .profile-try { display: grid; gap: 8px; padding: 20px 0 0; border-top: 1px solid var(--soft-gold); max-width: 52ch; }
.p-profile .profile-try p:last-child { font: 400 1.15rem/1.5 var(--serif); color: var(--ink); }
.p-profile .profile-result__side { display: grid; gap: 16px; align-content: start; }
.p-profile .profile-blind { margin: 0; padding: 0; list-style: none; display: grid; }
.p-profile .profile-blind li { padding: 14px 0 14px 22px; border-top: 1px solid var(--hairline); color: var(--ink-soft); position: relative; }
.p-profile .profile-blind li::before { content: ""; position: absolute; left: 2px; top: 23px; width: 8px; height: 1px; background: var(--soft-gold); }
.p-profile .profile-result .actions { margin-top: 12px; }

/* ---------- the offer ---------- */
.p-profile .profile-offer .grid { row-gap: 48px; align-items: start; }
.p-profile .profile-offer__main { display: grid; gap: 22px; align-content: start; }
.p-profile .profile-offer__main .h2 { max-width: 16ch; }
.p-profile .profile-card { display: grid; gap: 16px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--hairline-dark); }
.p-profile .profile-card__name { font: 500 13px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark); }
.p-profile .profile-card__price { font: 300 clamp(2.4rem, 4.6vw, 3.6rem)/1 var(--serif); color: var(--linen); letter-spacing: -.01em; }
.p-profile .profile-card__regular { display: block; margin-top: 10px; font: 400 15px/1.3 var(--sans); color: var(--on-dark); letter-spacing: 0; }
.p-profile .profile-card__launch { font-size: 15px; color: var(--linen); }
.p-profile .profile-card__list { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; }
.p-profile .profile-card__list li { padding: 11px 0; border-top: 1px solid var(--hairline-dark); color: var(--on-dark); font-size: 15.5px; }
.p-profile .profile-offer .small a { color: var(--linen); text-underline-offset: 4px; }
.p-profile .profile-card__wa { margin-top: 4px; }
.p-profile .profile-card__health { padding-top: 14px; border-top: 1px solid var(--hairline-dark); }

/* ---------- Aime ---------- */
.p-profile .profile-aime__in { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px 40px; align-items: center; }
.p-profile .profile-aime__fig { margin: 0; }
.p-profile .profile-aime__fig img { display: block; width: 100%; height: auto; }
.p-profile .profile-aime__txt { display: grid; gap: 18px; justify-items: start; }
@media (min-width: 768px) { .p-profile .profile-aime__in { grid-template-columns: 160px minmax(0, 1fr); } }

/* ---------- FAQ and closing ---------- */
.p-profile .profile-faq .h2 { margin-bottom: 28px; }
.p-profile .profile-faq .acc__inner p + p { margin-top: 10px; }
.p-profile .profile-closing .wrap { display: grid; gap: 32px; justify-items: start; }
.p-profile .profile-closing__h { max-width: 18ch; }

/* lab-06ai: regular price for everyone, launch price only with a campaign link (one block visible at a time) */
.p-profile .profile-card__offer { display: grid; gap: 16px; }
.p-profile .profile-card__offer[hidden], .p-profile .profile-book[hidden] { display: none; }
.p-profile .profile-card__ref { display: inline-block; margin-left: .4em; font: 400 15px/1.3 var(--sans); color: var(--on-dark); letter-spacing: 0; vertical-align: middle; }

/* lab-06al: "Get your preview by email" inside the preview */
.p-profile .profile-mail { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--hairline); max-width: 52ch; }
.p-profile .profile-mail .small { margin-bottom: 6px; }
.p-profile .profile-mail__form { gap: 16px; }

/* ===== thanks.css ===== */
/* LIVEN · V10 Lab · /thanks/ (ESTRATEGIA §10.8). Every selector is scoped: .thanks-*.
   One quiet screen: a measurement rule, the confirmation, one next step, the way back. Nothing moves. */

.thanks-sec { display: grid; align-items: center; min-height: calc(100svh - var(--hdr-h) - 120px); padding-block: clamp(32px, 8vw, 128px); }
.thanks-wrap { display: grid; gap: clamp(28px, 4vw, 48px); max-width: calc(880px + 2 * var(--gutter)); }
.thanks-rule { max-width: 240px; }
.thanks-body { display: grid; gap: clamp(14px, 1.8vw, 22px); }
.thanks-h1 { font: 300 clamp(2.2rem, 5.6vw, 4.8rem)/1.04 var(--serif); letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.thanks-lead { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.55; color: var(--ink-soft); max-width: 44ch; text-wrap: pretty; }
.thanks-lead:empty { display: none; }
.thanks-action { padding-top: 4px; }
.thanks-note { max-width: 52ch; padding: 10px 0 10px 14px; border-left: 1px solid var(--soft-gold); font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.thanks-back { padding-top: 20px; border-top: 1px solid var(--hairline); }
@media (max-width: 767px) { .thanks-action .btn { width: 100%; } }
.thanks-nowrap { white-space: nowrap; }

/* ===== work.css ===== */
/* LIVEN · V10 Lab · WORK (/work/, /es/proyectos/). Scoped under body.p-work.
   Cards carry no grid or marks (§11.3: never next to third-party names); since lab-02 each carries its photograph.
   The only fine line is the comparator handle, which is the information itself. */

/* ---------- opening ---------- */
.p-work .work-hero { padding-block: var(--space-s) clamp(32px, 4vw, 56px); }
.p-work .work-hero__note { color: var(--ink-soft); }
/* desktop placements (explicit start / span: base .ds-* resets the span, see SHARED CHANGE REQUESTS) */
@media (min-width: 1024px) {
  .p-work .grid > .work-hero__note { grid-column: 9 / span 4; }
  .p-work .grid > .work-retail__qa { grid-column: 8 / span 5; }
  .p-work .grid > .work-end__actions { grid-column: 9 / span 4; justify-content: flex-end; }
}
.p-work .work-hero__rule { margin-top: clamp(32px, 4vw, 56px); }
/* case index: jump links (annotation style, 44 px targets) */
.p-work .work-index ul { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 12px; }
.p-work .work-index a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none;
  font: 500 13px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  transition: color .25s;
}
.p-work .work-index a::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--soft-gold); }
.p-work .work-index a:hover { color: var(--ink); }
@media (max-width: 767px) {
  .p-work .work-index ul { flex-direction: column; gap: 0; }
  .p-work .work-index li + li { border-top: 1px solid var(--hairline); }
  .p-work .work-index a { width: 100%; min-height: 48px; }
}

/* ---------- founder experience: typographic cards ---------- */
.p-work .work-exp { padding-top: clamp(24px, 3vw, 40px); }
.p-work .work-card { min-height: clamp(260px, 27vw, 380px); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.p-work .work-card .case-card__name { font-weight: 300; }
.p-work .work-credit { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); } /* "Photograph": a real photo, not a visualization */
/* lab-02: the card photograph (studio-previo), 3:2 on the chukum card, between the category and the name */
.p-work .work-card.has-media { gap: 24px; align-content: start; }
.p-work .work-card__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--linen); }

/* internal review note: preview builds only; never on the production host even if a preview build is promoted */
.p-work .work-qa {
  padding: 10px 14px; border: 1px dashed var(--hairline-strong);
  font: 400 13.5px/1.5 var(--sans); color: var(--ink-2); max-width: 60ch;
}
.p-work .work-qa__label { display: block; margin-bottom: 4px; font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze); }
html:not(.preview-host) .p-work .work-qa { display: none; }

/* ---------- CREATA Living ---------- */
.p-work .work-retail { margin-top: var(--space-s); padding-top: var(--space-s); border-top: 1px solid var(--hairline); scroll-margin-top: calc(var(--hdr-h) + 8px); }
.p-work .work-retail__head { row-gap: 20px; }

/* quiet strip of the 5 real product photos (lab-03: the lab-01 strip again, the accessories the client chose): one row
   on desktop, a swipe row below 1024 px (the next photo peeks) */
.p-work .work-strip { margin-top: clamp(28px, 4vw, 48px); }
.p-work .work-strip__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); }
.p-work .work-strip__img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--chukum); }
@media (max-width: 1023px) {
  .p-work .work-strip {
    margin-inline: calc(-1 * var(--gutter)); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .p-work .work-strip::-webkit-scrollbar { display: none; }
  .p-work .work-strip__list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 38vw; width: max-content; padding-inline: var(--gutter); }
  .p-work .work-strip__item { scroll-snap-align: start; }
}
@media (max-width: 767px) { .p-work .work-strip__list { grid-auto-columns: 74vw; gap: 12px; } }
/* "Photographs" (the client's own real photos): same type as the Visualization label, set as a caption line */
.p-work .work-strip__cap { margin-top: 12px; }
.p-work .work-strip__cap .work-photos { position: static; display: inline-block; padding: 0; background: none; color: var(--ink-2); }
.p-work .work-strip:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }

/* unbranded placeholders (WORK.brandNames false): three typographic cards in one row */
@media (min-width: 1024px) { .p-work .work-cards--3 .work-card { min-height: clamp(200px, 20vw, 300px); } }

/* ---------- before ↔ visualization comparator (preview only) ---------- */
.p-work .work-compare { display: grid; gap: 20px; margin-top: clamp(56px, 8vw, 112px); }
@media (min-width: 1024px) {
  .p-work .work-compare { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; }
}
.p-work .work-compare__stage {
  position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--chukum); /* lab-05q: the home pair, 4:3 */
  cursor: ew-resize; user-select: none; -webkit-user-select: none; touch-action: pan-y;
}
@media (max-width: 767px) { .p-work .work-compare__stage { margin-inline: calc(-1 * var(--gutter)); } }
.p-work .work-compare__layer { position: absolute; inset: 0; }
.p-work .work-compare__layer picture, .p-work .work-compare__layer img { width: 100%; height: 100%; }
.p-work .work-compare__layer img { object-fit: cover; -webkit-user-drag: none; }
.p-work .work-compare__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
/* fixed labels (§4 #8): Before on the left, Visualization on the right, always visible */
.p-work .work-compare__tag {
  position: absolute; top: 12px; z-index: 1; padding: 6px 10px; border-radius: 100px; pointer-events: none;
  background: rgba(245, 242, 236, .92); color: var(--ink); font: 500 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.p-work .work-compare__tag--before { left: 12px; }
.p-work .work-compare__tag--after { right: 12px; }
/* the handle: one linen hairline and a 44 px knob */
.p-work .work-compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos, 50%); z-index: 2; border-left: 1px solid rgba(245, 242, 236, .92); pointer-events: none; }
.p-work .work-compare__knob {
  position: absolute; top: 50%; left: 0; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(245, 242, 236, .92); color: var(--ink); border: 1px solid var(--hairline-strong);
}
/* native range = a 44 px band through the knob, 22 px wider on each side so the thumb centre spans the full photo */
.p-work .work-compare__range {
  position: absolute; z-index: 3; left: -22px; top: 50%; width: calc(100% + 44px); height: 44px; margin: -22px 0 0;
  opacity: 0; cursor: ew-resize; background: transparent; -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.p-work .work-compare__range::-webkit-slider-runnable-track { height: 44px; background: transparent; }
.p-work .work-compare__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; border: 0; }
.p-work .work-compare__range::-moz-range-thumb { width: 44px; height: 44px; border: 0; background: transparent; }
.p-work .work-compare__range::-moz-range-track { height: 44px; background: transparent; }
.p-work .work-compare__range:focus-visible ~ .work-compare__handle .work-compare__knob { outline: 2px solid var(--linen); outline-offset: 2px; border: 2px solid var(--ink); }
/* without JS the range cannot move the mask: show the fixed half/half state only */
.p-work .work-compare:not(.is-ready) .work-compare__range,
.p-work .work-compare:not(.is-ready) .work-compare__hint { display: none; }
.p-work .work-compare__caption { display: grid; gap: 12px; align-content: end; }
.p-work .work-compare__legend { font-size: 15px; line-height: 1.55; color: var(--ink-soft); padding-left: 14px; border-left: 1px solid var(--soft-gold); max-width: 44ch; }

/* ---------- close ---------- */
.p-work .work-end { border-top: 1px solid var(--hairline); }
.p-work .work-end__actions { justify-content: flex-start; }
@media (max-width: 767px) { .p-work .work-end__actions .btn { width: 100%; } .p-work .work-end__q { margin-bottom: 8px; } }

/* lab-05: the context of each case (the client's text), in place of the internal review notes */
.work-context { display: grid; gap: 18px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.work-context__row { display: grid; gap: 6px; } /* lab-05m: challenge · intervention · result */
.work-context__label { font: 500 13px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.work-context dd { margin: 0; color: var(--ink-soft); line-height: 1.6; max-width: 48ch; }

/* lab-05v (client): challenge · intervention · result as tabs, one paragraph at a time. The selected tab is marked
   as the menu is (italic + gold dot); all panels share one cell, so switching never moves the page. */
.p-work .tabs--story { padding-top: 16px; border-top: 1px solid var(--hairline); }
.p-work .tabs--story .tabs__list { border: 0; gap: 4px 22px; }
.p-work .tabs--story .tabs__tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0;
  font: 300 clamp(1.05rem, 1.35vw, 1.2rem)/1.2 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.p-work .tabs--story .tabs__tab::after { display: none; }
.p-work .tabs--story .tabs__tab::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: transparent; transition: background .25s; }
.p-work .tabs--story .tabs__tab[aria-selected="true"] { font-style: italic; color: var(--ink); }
.p-work .tabs--story .tabs__tab[aria-selected="true"]::before { background: var(--soft-gold); }
.p-work .tabs--story .tabs__panels { display: grid; padding-top: 12px; }
.p-work .tabs--story .tabs__panel { grid-area: 1 / 1; }
.p-work .tabs--story .tabs__panel[hidden], .js .p-work .tabs--story .tabs__panel:not(.is-active) { display: block; visibility: hidden; }
.p-work .work-story__text { color: var(--ink-soft); line-height: 1.65; max-width: 48ch; }

/* lab-05p (client): a case's closing line (CREATA) */
.work-line { font: 300 clamp(1.25rem, 1.9vw, 1.6rem)/1.3 var(--serif); color: var(--ink); max-width: 30ch; text-wrap: balance; }

/* lab-08p (client): projects from her CV and the collaborations */
.work-more__h { margin: clamp(56px, 8vw, 112px) 0 clamp(20px, 3vw, 32px); }
.work-collab { margin-top: clamp(56px, 8vw, 112px); }
.work-collab__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; list-style: none; }
.work-collab__item figure { margin: 0; }
.work-collab__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 14px; }
.work-collab__item figcaption { margin-top: 10px; display: grid; gap: 2px; }
.work-collab__name { font: 400 1.05rem/1.3 var(--serif); }
.work-collab__place { font-size: .88rem; color: var(--ink-soft); }
.work-collab__note { margin-top: 14px; }
@media (max-width: 1023px) { .work-collab__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .work-collab__grid { grid-template-columns: 1fr; } }
.work-card > figure.case-card__media { position: relative; margin: 0; } /* lab-08p: a single image keeps its label on it */
.work-collab__media { position: relative; }