/* ============================================================
   SÉRA HOME — PRESENCE V2.1 (isolated preview)
   Supersedes the RECOGNISABLY YOU. hero. Downstream story preserved.
   obsidian #0A0B0D · coal #101114 · porcelain #E9ECEE · ivory-white #F5F3EF
   glacial ramp #157F82/#2BC5C4/#8FF4EF — liquid & light ONLY
   Type lock: Cormorant Garamond 500 (+italic) · Manrope UI
============================================================ */
:root{
  --obsidian:#0A0B0D; --coal:#101114; --porcelain:#E9ECEE; --steel:#5E6E7A;
  --ivory:#F2EFE8; --word:#F5F3EF;
  --teal-deep:#157F82; --teal:#2BC5C4; --teal-ice:#8FF4EF;
  --hairline:rgba(233,236,238,.14);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Manrope",Arial,sans-serif;
  --gutter:clamp(20px,4.5vw,76px);
}
*{margin:0;padding:0;box-sizing:border-box}
/* §2.1 — the nav is fixed, so every anchor arrival has to clear it. One rule on
   the scrolling element covers `href="#id"`, back/forward, a pasted deep link
   and scrollIntoView() alike; per-section scroll-margin would have to be
   remembered for every new section, and would not have been. The extra 18px is
   air, not a fudge: landing a heading hard against the nav's edge reads as a
   collision even when it technically clears. */
:root{--navH:76px}
html{scroll-padding-top:calc(var(--navH) + 18px)}
@media (max-width:767px){:root{--navH:64px}}
/* -webkit-font-smoothing is deliberately ABSENT. It was `antialiased`, which
   forces grayscale AA and strips visual weight from light text on dark grounds
   — the whole site. The effect is invisible at phone pixel density, which is
   exactly why the type read fine on mobile and faded on desktop. Do not
   reintroduce it, here or scoped to any element. */
/* overflow-x:hidden is deliberately ABSENT from body. It was here, and it was a
   lid on the problem rather than the fix: it hides real overflow, and on iOS an
   overflow declaration on the body is exactly the kind of thing that makes
   position:sticky behave differently from every other browser — which is what
   the hero, the Measure, the Menu and Voices are all built on. Every element
   that used to need it is contained at source now (the ghostwords are hidden
   below 900px, the Measure caption wraps). Verified per element, not by
   document scrollWidth: seven section wrappers carry overflow:hidden, so the
   document-level number can never see the defect. */
body{background:var(--obsidian);color:var(--porcelain);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.65}
img{display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--teal);color:var(--obsidian)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:600;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);height:76px;color:var(--porcelain);transition:color .4s}
.nav::before{content:"";position:absolute;inset:0 0 auto 0;height:110px;background:linear-gradient(180deg,rgba(10,11,13,.82),rgba(10,11,13,0));opacity:0;transition:opacity .5s;pointer-events:none;z-index:-1}
.nav.is-solid::before{opacity:1}
.nav--invert{color:#101114}
.nav--invert::before{background:linear-gradient(180deg,rgba(242,239,232,.92),rgba(242,239,232,0))}
.nav__logo{font-family:var(--serif);font-weight:500;font-size:21px;letter-spacing:.4em;text-indent:.4em}
.nav__links{display:flex;gap:34px;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;font-weight:400}
.nav__links a{position:relative;padding:4px 0;opacity:.85}
.nav__links a:hover{opacity:1}
.nav__tag{font-size:9px;font-weight:400;letter-spacing:.24em;color:rgba(233,236,238,.55);text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 26px;border-radius:100px;font-family:var(--sans);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:400;border:1px solid rgba(233,236,238,.28);transition:border-color .4s,color .4s,background .4s,transform .4s}
.btn:hover{border-color:rgba(143,244,239,.6);transform:translateY(-1px)}
.btn--solid{background:var(--porcelain);color:var(--obsidian);border-color:transparent}
.nav--invert .btn{border-color:rgba(16,17,20,.35)}
@media (max-width:900px){.nav__links{display:none}}

/* ---------- the mobile menu ----------
   Everything here is inert above 900px: the toggle and the overlay are
   display:none, so desktop cannot be affected by any of it. */
.nav__toggle{display:none}
.nav__menu{display:none}
@media (max-width:900px){
  .nav__toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;
    width:44px;height:44px;margin-right:-11px;padding:0;background:none;border:0;color:inherit;cursor:pointer}
  .nav__toggleBar{display:block;width:22px;height:1px;background:currentColor;
    transition:transform .45s cubic-bezier(.2,.6,.2,1),opacity .3s}
  .nav.is-open .nav__toggleBar:first-child{transform:translateY(3.5px) rotate(45deg)}
  .nav.is-open .nav__toggleBar:last-child{transform:translateY(-3.5px) rotate(-45deg)}

  .nav__menu{display:flex;position:fixed;inset:0;z-index:-1;flex-direction:column;
    justify-content:center;gap:clamp(28px,6vh,54px);
    padding:calc(64px + clamp(28px,6vh,54px)) var(--gutter) clamp(34px,6vh,56px);
    background:var(--obsidian);opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .55s cubic-bezier(.2,.6,.2,1),visibility .55s}
  .nav.is-open .nav__menu{opacity:1;visibility:visible;pointer-events:auto}
  .nav__menuInner{display:flex;flex-direction:column;gap:clamp(4px,1.4vh,12px)}
  /* the destinations, in the display face — a chapter opening, not a list */
  .nav__menu a{font-family:var(--serif);font-weight:500;font-size:clamp(29px,8.4vw,42px);
    line-height:1.24;letter-spacing:-.01em;text-transform:uppercase;color:var(--porcelain);
    padding:7px 0;min-height:44px;display:flex;align-items:center}
  .nav__menu a[aria-current="page"]{color:var(--ivory)}
  .nav__menu a[aria-current="page"]::before{content:"";width:26px;height:1px;margin-right:14px;
    background:currentColor;opacity:.6;flex:none}
  /* `.nav__menu a.nav__menuCta`, not `.nav__menuCta`. The destinations rule
     above is (0,1,1) and a lone class is (0,1,0), so the bare selector loses
     every property to it — the pill inherited 42px Playfair caps and porcelain
     ink on its own ivory ground, which is a pill-shaped blank. Same trap as
     .eyebrow--light. Match the specificity and let source order decide. */
  .nav__menu a.nav__menuCta{align-self:flex-start;display:inline-flex;width:auto;
    font-family:var(--sans);font-weight:500;font-size:10.5px;line-height:1;
    letter-spacing:.24em;text-transform:uppercase;color:var(--obsidian);
    padding:15px 26px;min-height:44px}
  .nav__menu a.nav__menuCta[aria-current]{display:none}

  /* while the overlay is up the bar sits on the house ground whatever page is
     behind it, and its own pill would be a second identical CTA */
  .nav.is-open{color:var(--porcelain)}
  .nav.is-open::before{opacity:0}
  .nav.is-open #navCta{opacity:0;pointer-events:none}
  /* ...and its buttons come with it. `.nav--invert .btn` is (0,2,0) and beats
     `.btn--solid` at (0,1,0), so opening the menu over an ivory chapter drew a
     dark hairline around the ivory pill — the invert rule still applying to a
     bar that is no longer inverted. Sixth instance of the same pattern, found
     by the sweep. */
  .nav.is-open .btn{border-color:rgba(233,236,238,.28)}
  .nav.is-open .btn--solid{border-color:transparent}
  /* THE LOCK NO LONGER MOVES THE PAGE. `position:fixed` on the body collapsed
     window.scrollY to 0 for as long as the overlay was open — measured — which
     drives every pinned ScrollTrigger on home back to progress 0 and then has
     to put 12,000px of scroll back on close. That restore is the only thing in
     the menu that can fail, and when it does the page is left pinned at the
     wrong progress with the overlay still up: frozen, and only a reload clears
     it. Nothing is displaced now, so there is nothing to restore. */
  html.nav-locked,html.nav-locked body{overflow:hidden;overscroll-behavior:none}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .nav__menu,.nav__toggleBar{transition:none}
}
/* the wordmark is a link, so it has to look like one — hover and the cursor pill */
.nav__logo{transition:opacity .4s}
.nav__logo:hover{opacity:.72}
/* THE CONSULTATION is the fifth destination and the primary call to action at
   once: one element, both jobs. Emphasis is a quiet fill inside the palette,
   set in both polarities so it survives the invert over an ivory chapter. */
#navCta{background:rgba(233,236,238,.07);border-color:rgba(233,236,238,.42)}
.nav--invert #navCta{background:rgba(16,17,20,.05);border-color:rgba(16,17,20,.42)}
/* A 5–7% fill is a tint, not an object, so page copy passes visibly THROUGH the
   pill rather than behind it — "a BEGIN WITH A CONSULTATION button floating on
   top of the nav bar", and the founder's "behind the consultation pill". It is
   every page, not just /house: measured peak overlap 100% on /consultation,
   80% /path, 69% /disciplines, 61% /house, 37% home, with the copy underneath
   reading at 1.15–3.4:1 straight through the label.
   Opaque only ONCE THE SCRIM IS UP. At the very top of a page there is nothing
   behind the nav to read through, and a solid lozenge over the hero portrait
   would be a change to an approved frame; from 80px down there always is. Same
   two palette values the nav already uses — no new colour. */
.nav.is-solid #navCta{background:var(--obsidian)}
.nav.is-solid.nav--invert #navCta{background:var(--ivory)}
/* orientation — a hairline under the page you are on, and full weight */
.nav__links a[aria-current="page"]{opacity:1;font-weight:500}
/* THE HAIRLINE BELONGS TO EVERY ITEM NOW, drawn on the one you are on and on
   the one you are pointing at. It exists on all of them at scaleX(0), so the
   geometry is identical whether it is showing or not — the rule is absolutely
   positioned inside the link's own padding box, so there was never layout to
   shift, and now there is nothing to reserve either.

   It WIPES FROM THE LEFT rather than fading: `transform-origin:0 50%` with the
   site's own easing curve. Keyboard focus is given the same treatment as
   hover, not a different one — :focus-visible so it appears for the keyboard
   and not on a mouse click. */
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .58s cubic-bezier(.19,.74,.22,1)}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1)}
/* HOVER ADDS, IT NEVER REPLACES — the current page keeps its hairline the whole
   time. `transition:none` as well as `scaleX(1)`, because aria-current is set
   at runtime by the nav partial: with the transition left on, the underline
   would wipe itself in on every page load, which is an entrance nobody asked
   for. Hovering the current item therefore changes nothing, which is correct. */
.nav__links a[aria-current="page"]::after{transform:scaleX(1);transition:none}
#navCta[aria-current="page"]{background:rgba(233,236,238,.14);border-color:rgba(233,236,238,.66)}
.nav--invert #navCta[aria-current="page"]{background:rgba(16,17,20,.09);border-color:rgba(16,17,20,.66)}

/* Labels: 11px / 500 / .24em. They were 10px / 400 / .46em — 4.6px of tracking,
   nearly half an em, which destroys word-shape and reads as haze rather than as
   a word. Colour comes off --steel too: that blue-grey sits too close to
   obsidian to hold at label size. */
.eyebrow{display:inline-block;align-self:flex-start;position:relative;padding-bottom:10px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,236,238,.55);font-weight:500}
.eyebrow::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--teal-deep),var(--teal),var(--teal-ice),var(--teal),var(--teal-deep),transparent);box-shadow:0 0 7px rgba(43,197,196,.32),0 0 15px rgba(43,197,196,.1)}
.chip{position:absolute;z-index:40;top:88px;left:14px;font-size:10px;font-weight:400;letter-spacing:.3em;color:var(--porcelain);background:rgba(16,17,20,.78);border:1px solid rgba(233,236,238,.22);padding:8px 14px;border-radius:999px;font-family:var(--sans)}

/* ---------- curtain intro (pre-hero reveal) ---------- */
.curtain{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--obsidian);will-change:transform,opacity;animation:curtainFailsafe 0s linear 8s forwards}
@keyframes curtainFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.curtain__inner{display:flex;flex-direction:column;align-items:center;transform:translateY(-1.5vh)}
.curtain__word{font-family:var(--serif);font-weight:500;font-size:clamp(28px,6vw,72px);line-height:1;letter-spacing:.24em;text-indent:.24em;color:var(--porcelain);opacity:0}
.curtain__line{margin-top:clamp(20px,3.2vh,34px);width:min(240px,44vw);height:2px;border-radius:2px;transform:scaleX(0);opacity:0;background:linear-gradient(90deg,transparent,var(--teal-deep),var(--teal),var(--teal-ice),var(--teal),var(--teal-deep),transparent);box-shadow:0 0 18px rgba(43,197,196,.55),0 0 44px rgba(43,197,196,.22)}

/* ============ CHAPTER 1 — PRESENCE hero ============ */
#heroWrap{height:440vh;position:relative}  /* 440vh: heroWarp gives the 90-frame fall ~125vh of scroll (~13 wheel notches) */
#heroWrap.flat{height:auto}
.hero{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--obsidian)}
#heroWrap.flat .hero{position:relative}
.hero__underlay{position:absolute;inset:0;z-index:1}
/* <picture> is display:inline by default, so an img inside it asking for
   height:100% has no definite height to resolve against. Make the wrapper a
   block that fills, so the portrait source cannot depend on a quirk. */
.hero__underlay picture{display:block;width:100%;height:100%}
.hero__underlay img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 50%;will-change:transform}
.hero__shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:
  linear-gradient(180deg,rgba(10,11,13,.5) 0%,rgba(10,11,13,0) 22%,rgba(10,11,13,0) 55%,rgba(10,11,13,.55) 100%)}
.hero__veil{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.hero__syr{position:absolute;z-index:3;left:0;top:0;width:0;height:0;will-change:transform}
.hero__syr img{position:absolute;max-width:none}
.hero__syr .s-tilt{opacity:0}
.hero__word{position:absolute;z-index:4;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hero__seq{position:absolute;inset:0;z-index:5;width:100%;height:100%;background:#000;opacity:0;pointer-events:none}  /* prerendered release sequence, scroll-scrubbed to canvas */
.hero__word text{font-family:var(--serif);font-weight:500;letter-spacing:-.012em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero__meta{position:absolute;z-index:5;left:var(--gutter);bottom:4vh;display:flex;flex-direction:column;gap:18px}
.hero__meta .eyebrow{color:rgba(233,236,238,.62)}
.hero__cap{position:absolute;z-index:6;left:var(--gutter);top:16vh;opacity:0}
.hero__cap .k{font-size:9.5px;font-weight:400;letter-spacing:.4em;text-transform:uppercase;color:rgba(233,236,238,.55);margin-bottom:12px}
.hero__cap .t{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,46px);letter-spacing:.04em;color:var(--porcelain)}
.hero__bead{position:absolute;z-index:7;width:34px;height:34px;opacity:0;will-change:transform}
.hero__bead img{width:100%;height:100%}

/* ============ CHAPTER 2 — THE MEASURE (5 beats) ============ */
#measureWrap{height:660vh;position:relative;background:transparent;margin-top:-120vh;z-index:12}  /* own stacking context — the cut always paints OVER the hero's black. 660vh: extra pin length so the glow + wave films read slow */
#measureWrap.flat{height:auto;background:none;margin-top:0}
.measure{position:sticky;top:0;height:100svh;overflow:hidden;background:transparent}
#measureWrap.flat .measure{position:relative}
.m-beat{position:absolute;inset:0;opacity:0;will-change:transform,opacity}
/* <picture> is inline by default and gives the img no height to resolve — same fix as the hero underlay */
.m-beat picture{display:block;width:100%;height:100%}
.m-beat img,.m-beat video{width:100%;height:100%;object-fit:cover}
.m-beat--closed img,.m-beat--open img,.m-beat--closed video{object-position:center 22%}
.measure__veil{position:absolute;left:0;bottom:0;width:60%;height:34%;z-index:8;pointer-events:none;background:radial-gradient(120% 150% at 0% 100%,rgba(0,0,0,.55),rgba(0,0,0,0) 70%)}
/* The block is absolutely positioned and every caption inside it is absolutely
   positioned too, so shrink-to-fit sizes it from the ONE in-flow child — the
   9.5px label. The box comes out 104px wide while the longest caption renders
   325px, which is where "221px of overflow" comes from. Nothing is visibly cut
   at 360 or 390 (325 + a 20px gutter still clears the frame), but the caption
   carries white-space:nowrap, so the moment the frame is narrower than the
   sentence it would be. Give the block a real width instead of a coincidental
   one. */
.measure__cap{position:absolute;z-index:9;left:var(--gutter);bottom:8vh;width:min(560px,calc(100% - var(--gutter) * 2))}
.measure__cap .k{font-size:9.5px;font-weight:400;letter-spacing:.4em;text-transform:uppercase;color:rgba(233,236,238,.55);font-family:var(--sans);margin-bottom:12px}
.measure__cap .line{position:relative;height:clamp(34px,3.4vw,52px)}
.measure__cap .line span{position:absolute;left:0;bottom:0;font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,46px);letter-spacing:.04em;white-space:nowrap;color:var(--porcelain);opacity:0}
.measure-strip{background:#000;padding:26px var(--gutter) 60px}
.measure-strip .k{font-size:9.5px;font-weight:400;letter-spacing:.36em;text-transform:uppercase;color:rgba(233,236,238,.55);margin-bottom:16px}
.measure-strip .row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.measure-strip figure img{width:100%;height:auto}
.measure-strip figcaption{font-size:8.5px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:rgba(233,236,238,.55);margin-top:8px}
@media (max-width:767px){.measure-strip .row{grid-template-columns:repeat(3,1fr)}}

/* ============ CHAPTER 3 — THE MENU ============ */
#menuWrap{height:250vh;position:relative}
#menuWrap.flat{height:auto}
.menu{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ivory);color:#101114}
#menuWrap.flat .menu{position:relative;height:auto;min-height:100svh;padding-bottom:70px}
.menu__head{position:absolute;top:11vh;left:var(--gutter);right:var(--gutter);z-index:6;display:flex;justify-content:space-between;align-items:flex-end}
#menuWrap.flat .menu__head{position:static;padding:110px var(--gutter) 0;margin-bottom:44px}
.menu__title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.1vw,62px);line-height:.96;letter-spacing:-.01em;text-transform:uppercase}
.menu__title em{font-style:italic}
.menu__head .eyebrow{color:rgba(16,17,20,.62)}
.menu__head .eyebrow::after{background:linear-gradient(90deg,transparent,rgba(16,17,20,.45),transparent);box-shadow:none}
.menu__stage{position:absolute;left:0;right:0;top:56%;transform:translateY(-40%);height:min(56vh,540px);z-index:4}
#menuWrap.flat .menu__stage{position:relative;top:auto;transform:none;margin:0 auto;height:auto;display:flex;justify-content:center;gap:2.4vw;padding:0 var(--gutter)}
@media (max-width:767px){#menuWrap.flat .menu__stage{flex-wrap:wrap;overflow:visible;gap:18px;justify-content:center}}
.card{position:absolute;left:0;top:0;width:clamp(200px,19vw,300px);will-change:transform;background:#fff;box-shadow:0 30px 70px -30px rgba(16,17,20,.35)}
/* no !important. It was here to beat the old fan engine's inline transforms;
   the showcase clears its own inline styles in stat(), so nothing to beat —
   and an !important on transform is precisely what silently disabled the
   module at mobile widths for a fortnight. */
#menuWrap.flat .card{position:relative;left:auto;transform:none}
.card__img{aspect-ratio:4/5;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
.card__body{padding:18px 18px 20px;background:#fff}
.card__name{font-family:var(--serif);font-weight:500;font-size:clamp(19px,1.5vw,24px);line-height:1.05;letter-spacing:.01em}
.card__line{margin-top:7px;font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:rgba(16,17,20,.55)}
.card__cta{display:inline-block;margin-top:13px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:#101114;border-bottom:1px solid rgba(16,17,20,.35);padding-bottom:4px}
.card__cta:hover{border-color:#101114}
/* The mobile menu layout used to live HERE as well as in chapters.css, and the
   two fought: chapters.css won position and display (source order) while this
   block won transform (!important), so the showcase was allowed to own the
   layout and forbidden from moving anything. One owner now — the mobile rail
   sits beside the showcase it stands in for, in chapters.css. */

/* ============ CHAPTER 4 — THE STANDARD ============
   Ivory ground, obsidian type — a deliberate colour-law update, not a one-off.
   Two columns: the display sentence carries the header job on the left, the
   three commitments read as a ruled list on the right. Rules use the DARK
   hairline; the light one is invisible on ivory. */
.standard{position:relative;overflow:hidden;background:var(--ivory);color:var(--obsidian);padding:clamp(110px,15vw,190px) var(--gutter)}
/* the watermark sits in the empty lower-left the two-column layout leaves, so
   the section fills its own frame instead of trailing off. Same treatment as
   the House one; the list's hairlines above it do the ruling. */
.standard .ghostword{left:-2%;bottom:-7%;font-size:clamp(120px,17vw,300px)}
.standard__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(38px,6vw,110px);align-items:start}
.standard__lede{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.9vw,54px);line-height:1.12;letter-spacing:-.005em;color:var(--obsidian)}
.standard__lede em{font-family:var(--corm);font-style:italic;font-weight:500}
.standard__list{list-style:none}
.standard__list li{display:grid;grid-template-columns:44px 1fr;gap:20px;padding:26px 0;border-bottom:1px solid var(--hairline-dark)}
.standard__list li:first-child{border-top:1px solid var(--hairline-dark)}
.standard__num{font-family:var(--bodoni);font-style:italic;font-weight:400;font-optical-sizing:auto;font-size:17px;color:rgba(16,17,20,.38);padding-top:2px}
.standard__body h3{font-family:var(--serif);font-weight:500;font-size:clamp(17px,1.6vw,21px);letter-spacing:.005em;color:var(--obsidian)}
.standard__body p{margin-top:9px;font-size:13.5px;font-weight:400;line-height:1.7;color:rgba(16,17,20,.72)}
@media (max-width:900px){.standard__grid{grid-template-columns:1fr;gap:clamp(30px,5vw,48px)}}

/* ============ CHAPTER 5 — THE MEETING ============ */
.meeting{background:var(--coal);display:grid;grid-template-columns:44% 56%;min-height:92svh}
.meeting__copy{display:flex;flex-direction:column;justify-content:center;padding:clamp(80px,10vw,140px) clamp(28px,4vw,64px) clamp(80px,10vw,140px) var(--gutter)}
.meeting__title{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,54px);line-height:1.04;letter-spacing:.02em;text-transform:uppercase;margin-top:26px}
.meeting__sub{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(19px,1.7vw,27px);color:rgba(233,236,238,.78);margin-top:18px;letter-spacing:.03em}
.meeting__cta{margin-top:38px}
.meeting__media{position:relative;overflow:hidden}
.meeting__media img{width:100%;height:100%;object-fit:cover;object-position:center 30%;will-change:transform}
@media (max-width:767px){.meeting{grid-template-columns:1fr}.meeting__media{order:-1;height:52svh}}

/* ============ FINALE ============ */
.finale{background:var(--obsidian);text-align:center;padding:clamp(120px,17vw,220px) var(--gutter) 0}
.finale__title{font-family:var(--serif);font-weight:500;font-size:clamp(44px,8.4vw,140px);line-height:.9;letter-spacing:-.01em;text-transform:uppercase}
.finale__title em{font-style:italic}
.finale__cta{margin-top:clamp(36px,5vw,60px)}
.footer{margin-top:clamp(90px,12vw,150px);border-top:1px solid var(--hairline);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:28px var(--gutter);font-size:9.5px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;color:rgba(233,236,238,.55)}

/* ---------- proof sheets ---------- */
.proofStage{position:relative;height:100svh;overflow:hidden;background:var(--obsidian)}
.sheet{background:var(--obsidian);min-height:100svh;padding:90px var(--gutter) 70px}
.sheet h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,40px);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.sheet .sub{font-size:10px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:rgba(233,236,238,.55);margin-bottom:38px}
.sheet .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sheet figure{position:relative}
.sheet figure img{width:100%;height:auto}
.sheet figcaption{margin-top:10px;font-family:var(--serif);font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:rgba(233,236,238,.85)}
.sheet .t{font-family:var(--sans);font-size:9px;font-weight:400;letter-spacing:.2em;color:rgba(233,236,238,.55);text-transform:uppercase;margin-top:4px}
@media (max-width:900px){.sheet .grid{grid-template-columns:repeat(2,1fr)}}

@media (max-width:767px){
  .nav{height:64px;padding:0 18px}
  .nav__tag{display:none}
  .btn{padding:10px 16px;font-size:9px;font-weight:400;letter-spacing:.18em}
  .chip{top:72px}
  .hero__meta .eyebrow{font-size:8.5px;font-weight:400;letter-spacing:.3em}
  /* mobile underlay recomposition handled in JS (heroMeasure) */
  /* a sentence that refuses to wrap is a sentence waiting to be cut off. It
     does not wrap at 360 or 390 — it fits — but it must be allowed to below
     that, and the line box has to reserve the second line's room. */
  .measure__cap .line{height:clamp(58px,15vw,76px)}
  .measure__cap .line span{white-space:normal;line-height:1.14}
}
@media (prefers-reduced-motion:reduce){
  #heroWrap,#measureWrap,#menuWrap{height:auto}
  #measureWrap{margin-top:0}
  .hero,.measure,.menu{position:relative}
}