/* ==========================================================================
   Mobile Wellness Pod — Freq of Nurture
   ---------------------------------------------------------------------------
   Direction: a luxury retreat brand crossed with a precision instrument.
   Hushed, warm, exact. Her palette and typefaces, executed the way Aman or
   Six Senses would execute them.

   Design thesis: the same line draws the mountains and the nervous system.
   The Pod's wrap is layered ridgelines; the wave divider carries that line
   into the proof section, where the NeuralChek app's own state images (the
   ANS oval, the brain map) show the shift from red to blue. One shape
   language, used sparingly.

   Rules this file holds itself to:
     - Gold is the connective tissue: hairlines, labels, marks. Never grey.
     - Imagery gets a 6px radius and a soft warm shadow so it sits into the
       page rather than being cut out of it (client direction).
     - Emotional beats are full-bleed cinematic panels with copy laid over
       them; only specs, pricing and FAQ are plain typographic sections.
     - Extreme scale contrast: 11px tracked caps against 112px Cormorant.
     - Dark bands punctuate; they are candlelit, not flat black.
   ========================================================================== */

/* ---------- Fonts (self-hosted; no third-party connection) ---------- */
@font-face{font-family:Cormorant;src:url(../fonts/cormorant-garamond-300-lat.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap;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:Cormorant;src:url(../fonts/cormorant-garamond-300-latext.woff2)format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cormorant;src:url(../fonts/cormorant-garamond-400-lat.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;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:Cormorant;src:url(../fonts/cormorant-garamond-400-latext.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Cormorant;src:url(../fonts/cormorant-garamond-500-lat.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap;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:Cormorant;src:url(../fonts/cormorant-garamond-300-italic-lat.woff2)format("woff2");font-weight:300;font-style:italic;font-display:swap;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:Cormorant;src:url(../fonts/cormorant-garamond-400-italic-lat.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap;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:Nunito;src:url(../fonts/nunito-sans-400-lat.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;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:Nunito;src:url(../fonts/nunito-sans-400-latext.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Nunito;src:url(../fonts/nunito-sans-500-lat.woff2)format("woff2");font-weight:500;font-style:normal;font-display:swap;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:Nunito;src:url(../fonts/nunito-sans-600-lat.woff2)format("woff2");font-weight:600;font-style:normal;font-display:swap;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:Nunito;src:url(../fonts/nunito-sans-700-lat.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap;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 ---------- */
:root{
  /* Surfaces — warmer and deeper than before, so the page has tone rather
     than one flat cream with sage stripes cut into it. */
  --cream:#FAF7F1;
  --cream-2:#F4EEE3;
  --sage-band:#E7EDE4;
  --sage-pale:#C5CFC0;
  --sage-light:#A5BD9D;
  --sage:#8B9D83;
  --sage-deep:#55654F;
  --espresso:#17120F;
  --espresso-2:#221B17;
  --forest:#1F3A2C;

  /* Ink */
  --ink:#302A26;
  --ink-soft:#645649;
  --ink-mute:#71634F;
  --on-dark:#F6F1E8;
  --on-dark-soft:#C6BBAB;
  --on-dark-mute:#B0A493;

  /* Gold is the accent, and it is used everywhere grey used to be. */
  --gold:#C09A55;
  --gold-light:#E0C489;
  --gold-deep:#856529;
  --rose:#AE7070;

  /* Hairlines replace shadows entirely. */
  --hair:rgba(48,42,38,.14);
  --hair-strong:rgba(48,42,38,.26);
  --hair-gold:rgba(192,154,85,.46);
  --hair-dark:rgba(246,241,232,.15);
  --hair-gold-dark:rgba(224,196,137,.34);

  --font-display:Cormorant,"Cormorant Garamond",Georgia,serif;
  --font-body:Nunito,"Nunito Sans",system-ui,-apple-system,sans-serif;

  /* Type: 10x range between the smallest label and the largest display. */
  --fs-micro:.625rem;
  --fs-eyebrow:.6875rem;
  --fs-sm:.8125rem;
  --fs-base:1.0625rem;
  --fs-lead:clamp(1.125rem,1.02rem + .62vw,1.4375rem);
  --fs-h4:clamp(1.1875rem,1.08rem + .5vw,1.5rem);
  --fs-h3:clamp(1.625rem,1.28rem + 1.55vw,2.625rem);
  --fs-h2:clamp(2.375rem,1.62rem + 3.7vw,4.5rem);
  --fs-h1:clamp(2.875rem,1.85rem + 5.1vw,6.5rem);

  --tr-micro:.26em;
  --tr-eyebrow:.22em;

  /* Rhythm */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4rem; --s7:6rem; --s8:9rem;
  --section-y:clamp(4.5rem,2rem + 9vw,11rem);
  --gutter:clamp(1.375rem,.5rem + 3.4vw,4rem);

  --nav-h:82px;
  --maxw:1320px; --maxw-mid:1040px; --maxw-narrow:720px;
  --measure:33rem; --measure-head:44rem; --measure-lead:36rem;

  --radius:6px; --pill:999px;
  /* Just enough lift to seat imagery on the page; warm, never neutral grey. */
  --shadow-img:0 1px 2px rgba(48,42,38,.06),0 14px 34px -14px rgba(48,42,38,.22);
  --shadow-img-dark:0 1px 2px rgba(0,0,0,.30),0 18px 44px -16px rgba(0,0,0,.55);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --dur:420ms;
  --dur-slow:900ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--font-body);font-size:var(--fs-base);line-height:1.78;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-feature-settings:"kern" 1,"liga" 1;
}

/* Paper tooth. Fixed so it never scrolls with content, multiplied at very low
   opacity so cream reads as stock rather than as a flat fill. */
body::after{
  content:"";position:fixed;inset:0;z-index:400;pointer-events:none;
  opacity:.038;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,picture,video{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,blockquote,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
:target{scroll-margin-top:7rem}
::selection{background:var(--gold-light);color:var(--ink)}

:focus-visible{outline:2px solid var(--gold-deep);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible{outline-color:var(--gold-light)}
/* Dark-image surfaces need the light ring too. */
.hero :focus-visible,.panel :focus-visible{outline-color:var(--gold-light)}

.skip{
  position:absolute;left:var(--gutter);top:-100%;z-index:600;
  background:var(--espresso);color:var(--on-dark);padding:.8rem 1.3rem;
  font-size:var(--fs-sm);font-weight:600;text-decoration:none;
  letter-spacing:.04em;
}
.skip:focus{top:.8rem}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Typography
   ========================================================================== */
.display{
  font-family:var(--font-display);font-weight:300;
  line-height:.98;letter-spacing:-.018em;
  text-wrap:balance;color:var(--ink);
}
.h1{font-size:var(--fs-h1)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3);line-height:1.08}
.h4{
  font-family:var(--font-display);font-weight:500;font-size:var(--fs-h4);
  line-height:1.2;letter-spacing:-.004em;text-wrap:balance;color:var(--ink);
}
.display em,.h3 em,.h2 em{font-style:italic;font-weight:300}

/* Eyebrow: gold, tracked wide, optionally preceded by a short gold rule. */
.eyebrow{
  display:flex;align-items:center;gap:.85em;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:var(--tr-eyebrow);text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow--mark::before{
  content:"";width:clamp(20px,3vw,38px);height:1px;
  background:var(--gold);flex:0 0 auto;
}
.eyebrow--center{justify-content:center}
.micro{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--ink-mute);
}

.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--ink-soft);text-wrap:pretty}
.body{color:var(--ink-soft);text-wrap:pretty}
.body + .body{margin-top:var(--s2)}
[class*="stack-"] > .body + .body{margin-top:0}
.measure{max-width:var(--measure)}
.plain{color:var(--ink);font-weight:600}
.tiny{font-size:.8125rem;line-height:1.66;color:var(--ink-mute)}

/* Pull quote with a hanging gold quote mark. */
.quote{
  position:relative;
  font-family:var(--font-display);font-style:italic;font-weight:300;
  font-size:var(--fs-h3);line-height:1.22;letter-spacing:-.008em;
  color:var(--ink);text-wrap:balance;
}
.quote--hang{padding-left:1.1em}
.quote--hang::before{
  content:"\201C";position:absolute;left:-.06em;top:-.06em;
  font-size:2.1em;line-height:1;color:var(--gold);opacity:.55;
}

/* Numerals: Cormorant defaults to oldstyle, which reads as a typo in data. */
.num{font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"onum" 0,"tnum" 1}

/* On dark */
.on-dark{color:var(--on-dark)}
.on-dark .display,.on-dark .h4,.on-dark .quote,.on-dark .plain{color:var(--on-dark)}
.on-dark .eyebrow{color:var(--gold-light)}
.on-dark .eyebrow--mark::before{background:var(--gold-light)}
.on-dark .lead,.on-dark .body{color:var(--on-dark-soft)}
.on-dark .tiny,.on-dark .micro{color:var(--on-dark-mute)}

/* ==========================================================================
   Layout
   ========================================================================== */
.section{padding-block:var(--section-y);position:relative}
.wrap{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  --wrap-edge:calc((100vw - min(100vw,var(--maxw))) / 2 + var(--gutter));
}
.wrap--mid{max-width:var(--maxw-mid);--wrap-edge:calc((100vw - min(100vw,var(--maxw-mid))) / 2 + var(--gutter))}

.band-cream2{background:var(--cream-2)}
.band-sage{background:var(--sage-band)}

/* Dark bands are forest green — brand colour, kept deep so the cream copy and
   gold hairlines pop — with a warm off-centre candle glow, never flat. */
.band-dark{
  background:
    radial-gradient(120% 90% at 72% 8%,rgba(192,154,85,.13) 0%,transparent 55%),
    radial-gradient(90% 70% at 12% 92%,rgba(139,157,131,.10) 0%,transparent 60%),
    var(--forest);
  position:relative;isolation:isolate;
}
.band-dark--soft{
  background:
    radial-gradient(110% 80% at 78% 10%,rgba(192,154,85,.11) 0%,transparent 58%),
    var(--forest);
}

.stack-1{display:flex;flex-direction:column;gap:var(--s1)}
.stack-2{display:flex;flex-direction:column;gap:var(--s2)}
.stack-3{display:flex;flex-direction:column;gap:var(--s3)}
.stack-4{display:flex;flex-direction:column;gap:var(--s4)}
.stack-5{display:flex;flex-direction:column;gap:var(--s5)}
.center{text-align:center;margin-inline:auto}
.center .measure,.center .lead{margin-inline:auto}
/* The two blessed vertical gaps between a section header and its body. */
.mt-lg{margin-top:clamp(2.5rem,5vw,4rem)}
.mt-xl{margin-top:clamp(3rem,6vw,5.5rem)}

/* Section headers */
.shead{display:flex;flex-direction:column;gap:var(--s3);max-width:var(--measure-head)}
.shead--center{margin-inline:auto;text-align:center;align-items:center}
.shead--center .eyebrow{justify-content:center}
.shead .lead,.shead .quote{max-width:var(--measure-lead)}

/* Grids */
.grid{display:grid;gap:clamp(2rem,4.5vw,4.5rem)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.grid--wide-left{grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);align-items:center}
.grid--wide-right{grid-template-columns:minmax(0,1fr) minmax(0,1.28fr);align-items:center}

/* ==========================================================================
   Rules & marks
   ========================================================================== */
.rule{height:1px;background:var(--hair);border:0;margin:0}
.rule-gold{height:1px;background:var(--hair-gold);border:0;margin:0}
.rule-short{width:clamp(30px,4vw,52px);height:1px;background:var(--gold);border:0;margin:0}
.on-dark .rule{background:var(--hair-dark)}
.on-dark .rule-gold{background:var(--hair-gold-dark)}
.ridge{width:clamp(160px,22vw,280px);height:auto;opacity:.9;display:block}

/* ==========================================================================
   Buttons — one system. Pills kept (they are hers); everything else refined.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:.9rem 1.9rem;border:1px solid transparent;
  border-radius:var(--pill);
  font-family:var(--font-body);font-size:.875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:background-color var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--espresso);color:var(--on-dark)}
.btn--primary:hover{background:var(--sage-deep)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--hair-strong)}
.btn--outline:hover{border-color:var(--espresso);background:rgba(48,42,38,.04)}
.btn--light{background:var(--on-dark);color:var(--espresso)}
.btn--light:hover{background:#fff}
.btn--sm{min-height:44px;padding:.6rem 1.25rem;font-size:.75rem;letter-spacing:.09em}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.arrow{transition:transform var(--dur) var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* Text link with a gold rule that wipes in from the left. */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:.5em;
  min-height:32px;
  font-size:.8125rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;
}
.tlink::before,.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;
}
.tlink::before{background:var(--hair-strong)}
.tlink::after{
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.tlink:hover::after{transform:scaleX(1)}
.tlink:hover .arrow{transform:translateX(4px)}
.on-dark .tlink{color:var(--on-dark)}
.on-dark .tlink::before{background:var(--hair-dark)}
.on-dark .tlink::after{background:var(--gold-light)}

/* Inline link inside body copy */
.ilink{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-gold);transition:border-color var(--dur) var(--ease);padding-block:.35em;margin-block:-.35em}
.ilink:hover{border-color:var(--gold)}
.on-dark .ilink{color:var(--on-dark);border-bottom-color:var(--hair-gold-dark)}
.on-dark .ilink:hover{border-color:var(--gold-light)}

/* ==========================================================================
   Media — near-sharp, no shadows, optional mask reveal
   ========================================================================== */
.media{
  position:relative;overflow:hidden;border-radius:var(--radius);
  background:var(--cream-2);box-shadow:var(--shadow-img);
}
.media img{width:100%;height:100%;object-fit:cover}
.media--tall{aspect-ratio:4/5}
.media--wide{aspect-ratio:3/2}
.media--cine{aspect-ratio:16/9}
.media--square{aspect-ratio:1/1}
.media__cap{
  display:flex;gap:.7em;align-items:baseline;
  margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--hair);
  font-size:.8125rem;line-height:1.55;color:var(--ink-mute);
}
.media__cap b{
  flex:0 0 auto;font-family:var(--font-body);font-size:var(--fs-micro);
  font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;
  color:var(--gold-deep);
}
.on-dark .media{box-shadow:var(--shadow-img-dark)}
.on-dark .media__cap{border-top-color:var(--hair-dark);color:var(--on-dark-mute)}
.on-dark .media__cap b{color:var(--gold-light)}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:300;
  background:rgba(250,247,241,.82);backdrop-filter:blur(16px) saturate(1.3);
  transition:background-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.nav::after{
  content:"";position:absolute;inset-inline:0;bottom:0;height:1px;
  background:var(--hair);transform:scaleX(0);transform-origin:center;
  transition:transform var(--dur) var(--ease);
}
.nav.is-stuck{background:rgba(250,247,241,.95)}
.nav.is-stuck::after{transform:scaleX(1)}
.nav__in{display:flex;align-items:center;gap:var(--s3);min-height:var(--nav-h)}
.nav__logo{margin-right:auto;display:block;flex:0 0 auto}
.nav__logo img{width:clamp(148px,16vw,196px)}
.nav__links{display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem)}
.nav__links a:not(.btn){
  position:relative;white-space:nowrap;padding:.55rem 0;
  font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.nav__links a:not(.btn)::after{
  content:"";position:absolute;left:0;right:0;bottom:.15rem;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur) var(--ease-out);
}
.nav__links a:not(.btn):hover{color:var(--ink)}
.nav__links a:not(.btn):hover::after{transform:scaleX(1)}
.nav__toggle{display:none}

/* ==========================================================================
   Hero — one full-viewport image with the copy over it. The conventional shape
   for a reason: it reads instantly. Earlier attempts split the masthead from the
   photograph, which left a clipped sliver of trailer at the fold and looked
   broken. The photograph's canvas was extended so the left side carries real
   negative space for type; the Pod itself is untouched and sits right of centre.
   ========================================================================== */
.hero{
  position:relative;min-height:min(calc(100svh - var(--nav-h)),52rem);
  display:grid;grid-template-rows:1fr auto;
  isolation:isolate;background:var(--espresso);
}
.hero__bg{overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg picture{display:block;width:100%;height:100%}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:76% 50%}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(20,15,12,.50) 0%,rgba(20,15,12,.46) 46%,
                          rgba(20,15,12,.32) 56%,rgba(20,15,12,.08) 68%,
                          rgba(20,15,12,0) 80%),
    linear-gradient(to top,rgba(20,15,12,.56) 0%,rgba(20,15,12,.24) 36%,transparent 62%);
}
.hero__inner{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(.7rem,1.15vh,1.1rem);
  justify-content:flex-end;
  padding-top:clamp(1.25rem,3.5vh,2.5rem);
  padding-bottom:clamp(3rem,7vh,5rem);
}
/* Held inside the left half: past ~55% the Pod's pale wrap takes over and no
   amount of veil keeps white type legible there without ruining the picture. */
.hero__inner > *{max-width:min(34rem,100%)}
.hero__title{
  color:#fff;max-width:min(40rem,100%);
  font-size:clamp(2.375rem,1.25rem + 3.5vw,4.5rem);
  text-wrap:nowrap;
}
.hero__lead{
  font-size:var(--fs-lead);line-height:1.55;color:rgba(255,255,255,.92);
  max-width:33rem;text-wrap:pretty;
}
.hero .eyebrow{color:#fff}
.hero .eyebrow--mark::before{background:var(--gold-light)}
.hero__trust{
  padding-block:clamp(.6rem,1.1vh,.9rem);max-width:34rem;
  border-top:1px solid rgba(224,196,137,.42);border-bottom:1px solid rgba(224,196,137,.42);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:#fff;line-height:1.8;
}
.hero .tlink{color:#fff}
.hero .tlink::before{background:rgba(255,255,255,.4)}
.hero .tlink::after{background:var(--gold-light)}

/* Colophon pinned to the base of the frame, like a caption under a plate. */
.hero__foot{
  position:relative;z-index:2;
  border-top:1px solid rgba(255,255,255,.18);
  background:linear-gradient(to top,rgba(20,15,12,.62),rgba(20,15,12,.24));
  backdrop-filter:blur(2px);
}
.hero__colophon{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  padding-block:clamp(.85rem,1.7vh,1.35rem);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:rgba(255,255,255,.82);
}
.hero__colophon li{display:flex;align-items:center;gap:1.4rem}
.hero__colophon li:not(:last-child)::after{
  content:"";width:3px;height:3px;border-radius:50%;background:var(--gold-light);
}

/* Honeypot — off-canvas rather than display:none, which some bots skip. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Form status line. Empty until something is worth saying, so it takes no
   vertical space and never leaves a gap under the button. */
.form__status{margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-soft)}
.form__status:empty{display:none}
.form__status[data-state="ok"]{color:var(--sage-deep);font-weight:600}
.form__status[data-state="error"]{color:var(--rose)}
.form__status .ilink{color:inherit;text-decoration:underline;text-underline-offset:3px}
.form.is-sending{opacity:.6;pointer-events:none}

/* ==========================================================================
   Cinematic panel — a full-width photograph with the copy laid over it.
   This is the shape the emotional beats use, so imagery leads and the page
   stops alternating between unrelated image/text arrangements. It also removes
   the balance problem of a short photo beside a tall column of copy.
   ========================================================================== */
.panel{
  position:relative;display:grid;align-items:end;
  min-height:min(82vh,780px);
  overflow:hidden;isolation:isolate;background:var(--espresso);
}
.panel__bg{position:absolute;inset:0;z-index:0}
.panel__bg picture{display:block;width:100%;height:100%}
.panel__bg img{width:100%;height:100%;object-fit:cover}
.panel__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,13,11,.80) 0%,rgba(18,13,11,.70) 34%,
                          rgba(18,13,11,.40) 54%,rgba(18,13,11,.10) 74%,
                          rgba(18,13,11,0) 90%),
    linear-gradient(to top,rgba(18,13,11,.72) 0%,rgba(18,13,11,.30) 34%,transparent 66%);
}
.panel__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(1rem,1.7vw,1.6rem);
  padding-block:clamp(3rem,7vw,5.5rem);
}
.panel__body > *{max-width:min(34rem,100%)}
.panel__title{color:#fff;max-width:min(32rem,100%)}
.panel__lead{
  font-size:var(--fs-lead);line-height:1.6;color:rgba(255,255,255,.93);
  max-width:29rem;text-wrap:pretty;
}
.panel .eyebrow{color:#fff}
.panel .eyebrow--mark::before{background:var(--gold-light)}
.panel .quote{color:#fff}
.panel .quote--hang::before{color:var(--gold-light);opacity:.75}

/* ==========================================================================
   The signature: the ridgeline wave into the proof section
   ========================================================================== */
.wave{width:100%;height:clamp(58px,7vw,96px);overflow:hidden;opacity:.5}
.wave img{width:100%;height:100%}

/* ==========================================================================
   Reading panels — an instrument, framed in gold hairlines
   ========================================================================== */
.readings{display:flex;flex-direction:column;gap:var(--s4)}
.reading{
  display:grid;gap:var(--s3);padding:clamp(1.3rem,2.4vw,2rem);
  border:1px solid var(--hair);border-top:2px solid var(--rose);
  background:rgba(255,255,255,.5);
}
.reading--settled{border-top-color:var(--sage-deep)}
.reading__top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.reading__label{display:flex;flex-direction:column;gap:.5rem}
.reading__state{
  font-family:var(--font-display);font-size:var(--fs-h4);font-weight:500;
  line-height:1;color:var(--ink);
}
.reading__note{font-size:.8125rem;line-height:1.6;color:var(--ink-mute)}
/* Two reference states straight from the NeuralChek app, captioned with the
   app's own labels. Figures bottom-align so the captions sit on one line. */
.reading__viz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:end}
.viz{display:flex;flex-direction:column;gap:.75rem;margin:0}
.viz__img{display:block;height:auto;max-width:100%;border:1px solid var(--hair);background:#FEFAED}
.viz__cap{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;line-height:1.5;color:var(--ink-mute)}
.viz__cap b{display:block;margin-bottom:.2rem;font-family:var(--font-display);font-size:1.0625rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
.reading--stressed .viz__cap b{color:var(--rose)}
.reading--settled .viz__cap b{color:var(--sage-deep)}


/* Facts: hanging gold numerals over hairlines */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,3vw,3rem)}
.facts--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fact{display:flex;flex-direction:column;gap:.7rem;padding-top:var(--s3);border-top:1px solid var(--hair-gold)}
.fact__n{
  font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.5rem,5vw,4rem);line-height:.9;letter-spacing:-.02em;
  color:var(--ink);
}
.fact__n small{font-family:var(--font-body);font-size:.22em;font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--gold-deep);margin-left:.45em;vertical-align:.62em}
.fact__t{font-size:.9375rem;line-height:1.6;color:var(--ink-soft)}

/* ==========================================================================
   Editorial sequence (The Experience) — numbers earn their place: this is a
   real chronological sequence, arrival through session.
   ========================================================================== */
.seq{display:flex;flex-direction:column;gap:clamp(4rem,8vw,8rem)}
.step{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,5rem);align-items:center}
.step__body{display:flex;flex-direction:column;gap:var(--s3)}
.step__n{
  display:flex;align-items:baseline;gap:.7em;
  font-family:var(--font-display);font-weight:300;font-size:clamp(2.5rem,4.4vw,3.75rem);
  line-height:.9;letter-spacing:-.02em;color:var(--gold);
}
.step__n span{
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--ink-mute);
}
/* The figure is first in the markup, so pushing it to order:1 is what actually
   flips it to the right on alternating steps. */
.step:nth-child(even) .step__art{order:1}

/* ==========================================================================
   Spec list (Inside the Pod) — a spec sheet, not a list of grey rows
   ========================================================================== */
.spec-list{display:flex;flex-direction:column}
.spec-row{
  display:grid;grid-template-columns:2.4rem minmax(0,1fr);
  gap:0 var(--s3);padding-block:clamp(1.15rem,2.1vw,1.6rem);
  border-top:1px solid var(--hair-dark);
}
.spec-row:first-child{border-top:0;padding-top:0}
.spec-row__i{
  font-family:var(--font-body);font-size:var(--fs-micro);font-weight:600;
  letter-spacing:.14em;color:var(--gold-light);padding-top:.55em;
}
.spec-row__h{display:flex;align-items:baseline;gap:.75rem;flex-wrap:wrap;margin-bottom:.45rem}
.spec-row__tag{
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--gold-light);
}
.spec-row p{font-size:.9375rem;line-height:1.68;color:var(--on-dark-soft);text-wrap:pretty}

.atmos{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(1.5rem,3vw,2.5rem);
  border:1px solid var(--hair-gold-dark);
  background:rgba(246,241,232,.035);
}
.atmos__flag{
  align-self:flex-start;padding:.35rem .8rem;
  border:1px solid var(--hair-gold-dark);
  font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);
  text-transform:uppercase;color:var(--gold-light);
}

/* ==========================================================================
   Benefits — hairline columns with hanging markers. No cards.
   ========================================================================== */
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem)}
.col{display:flex;flex-direction:column;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--hair-strong)}
.col__k{display:flex;align-items:baseline;gap:.7rem}
.col__i{font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;color:var(--gold-deep)}
.blist{display:flex;flex-direction:column;gap:.85rem}
.blist li{
  position:relative;padding-left:1.35rem;
  font-size:.9375rem;line-height:1.62;color:var(--ink-soft);
}
.blist li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:8px;height:1px;background:var(--gold);
}

/* ==========================================================================
   Standards — a maker's credo
   ========================================================================== */
.credo{display:flex;flex-direction:column;align-items:center;gap:clamp(1.75rem,3.2vw,2.75rem);text-align:center}
.specs2{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2rem,4vw,4rem);width:100%;max-width:820px;text-align:left;
}
.spec2{display:flex;flex-direction:column;gap:.6rem;padding-top:var(--s3);border-top:1px solid var(--hair-gold)}
.spec2__k{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--gold-deep)}
.spec2__v{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:500;color:var(--ink)}
.spec2 p{font-size:.9375rem;line-height:1.66;color:var(--ink-soft)}

/* ==========================================================================
   Pricing — a refined comparison, hairlines not boxes
   ========================================================================== */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--hair-strong)}
.tier{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,2.2vw,2rem);
  border-left:1px solid var(--hair);position:relative;
}
.tier:first-child{border-left:0}
.tier--feature{background:rgba(192,154,85,.055)}
.tier--feature::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--gold);
}
.tier__flag{
  position:absolute;top:-1px;left:clamp(1.25rem,2.2vw,2rem);
  transform:translateY(-50%);padding:.3rem .7rem;background:var(--gold);
  color:var(--espresso);font-size:var(--fs-micro);font-weight:700;
  letter-spacing:var(--tr-micro);text-transform:uppercase;white-space:nowrap;
}
.tier__meta{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--gold-deep)}
.tier__name{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:400;line-height:1.06;letter-spacing:-.012em;color:var(--ink)}
.tier__blurb{font-size:.9375rem;line-height:1.6;color:var(--ink-soft);min-height:3.2em}
.tier__price{
  display:flex;flex-direction:column;gap:.5rem;
  padding-top:var(--s3);border-top:1px solid var(--hair);
}
.tier__price b{
  font-family:var(--font-display);font-weight:300;font-size:clamp(2.75rem,5vw,3.75rem);
  line-height:.9;letter-spacing:-.028em;color:var(--ink);
}
.tier__price span{font-size:var(--fs-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute);line-height:1.6}
.tier__list{display:flex;flex-direction:column;gap:.7rem;margin-top:auto;padding-top:var(--s2)}
.tier__list li{position:relative;padding-left:1.35rem;font-size:.9375rem;line-height:1.55;color:var(--ink-soft)}
.tier__list li::before{content:"";position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--gold)}
.tier .btn{margin-top:var(--s3)}

.assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.75rem,3.4vw,3.5rem)}
.assure__i{display:flex;flex-direction:column;gap:.6rem;padding-top:var(--s3);border-top:1px solid var(--hair-gold)}
.assure__k{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--gold-deep)}
.assure__i p{font-size:.9375rem;line-height:1.62;color:var(--ink-soft)}

/* ==========================================================================
   Business segments
   ========================================================================== */
.segs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,4rem)}
.seg{display:flex;flex-direction:column;gap:.7rem;padding-top:var(--s3);border-top:1px solid var(--hair-gold-dark)}
.seg__k{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:500;color:var(--on-dark)}
.seg p{font-size:.9375rem;line-height:1.68;color:var(--on-dark-soft)}

/* ==========================================================================
   FAQ — native details, hairlines, gold indicator
   ========================================================================== */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--hair-strong)}
.qa{border-bottom:1px solid var(--hair)}
.qa summary{
  display:flex;align-items:center;gap:var(--s3);cursor:pointer;list-style:none;
  padding-block:clamp(1.15rem,2.1vw,1.6rem);
  font-family:var(--font-display);font-size:clamp(1.125rem,1.05rem + .5vw,1.4375rem);
  font-weight:500;line-height:1.26;color:var(--ink);
  transition:color var(--dur) var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--gold-deep)}
.qa__sign{margin-left:auto;flex:0 0 auto;position:relative;width:16px;height:16px;transition:transform var(--dur) var(--ease)}
.qa__sign::before,.qa__sign::after{content:"";position:absolute;inset:0;margin:auto;background:var(--gold)}
.qa__sign::before{width:16px;height:1px}
.qa__sign::after{width:1px;height:16px;transition:transform var(--dur) var(--ease)}
.qa[open] .qa__sign{transform:rotate(90deg)}
.qa[open] .qa__sign::after{transform:scaleY(0)}
.qa__a{padding-bottom:clamp(1.15rem,2.1vw,1.6rem);max-width:60rem}
.qa__a p{color:var(--ink-soft);font-size:.9375rem;line-height:1.72}
.qa__a p + p{margin-top:var(--s2)}

/* Founders' full bios: one FAQ-style row under the grid, opening to two columns. */
.bios{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--hair-strong)}
.bios__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,4.5vw,4.5rem);padding-block:var(--s2) clamp(1.5rem,3vw,2.5rem)}
.bio{display:flex;flex-direction:column;gap:var(--s2)}
.bio p{color:var(--ink-soft);font-size:.9375rem;line-height:1.72}
.bio__creds{display:grid;gap:.45rem .75rem;margin-top:var(--s1);padding-top:var(--s2);border-top:1px solid var(--hair)}
.bio__creds li{font-size:.875rem;line-height:1.55;color:var(--ink-soft);padding-left:1.1em;text-indent:-1.1em}
.bio__creds li::before{content:"·";color:var(--gold);margin-right:.55em}

/* ==========================================================================
   Contact form
   ========================================================================== */
.form{display:flex;flex-direction:column;gap:var(--s3)}
.field{display:flex;flex-direction:column;gap:.55rem}
.field label{font-size:var(--fs-micro);font-weight:600;letter-spacing:var(--tr-micro);text-transform:uppercase;color:var(--ink-mute)}
.field input,.field textarea{
  width:100%;padding:.9rem 0;font-size:1rem;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--hair-strong);
  border-radius:0;transition:border-color var(--dur) var(--ease);
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);opacity:.7}
.field input:hover,.field textarea:hover{border-bottom-color:var(--ink-mute)}
.field input:focus-visible,.field textarea:focus-visible{outline:none;border-bottom-color:var(--gold)}
.field textarea{resize:vertical;min-height:120px}
.socials{display:flex;gap:var(--s3);flex-wrap:wrap}
.form__note{padding:1rem 1.25rem;border:1px solid var(--hair-gold);background:rgba(192,154,85,.07);font-size:.9375rem;line-height:1.6;color:var(--ink-soft)}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot{padding-block:var(--s7) var(--s4)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2.5rem,5vw,5rem);align-items:start}
.foot__nav{display:flex;flex-wrap:wrap;gap:.1rem 2rem}
.foot__nav a{
  display:inline-flex;align-items:center;min-height:40px;
  font-size:.75rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--on-dark-soft);text-decoration:none;
  transition:color var(--dur) var(--ease);
}
.foot__nav a:hover{color:var(--gold-light)}
.foot__legal{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--hair-dark)}
.foot__legal p{font-size:.75rem;line-height:1.72;color:var(--on-dark-mute);max-width:88ch}
.foot__base{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);justify-content:space-between;align-items:center;margin-top:var(--s4)}
.foot__base p{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-mute)}
.foot__base a{display:inline-flex;align-items:center;min-height:24px;color:var(--on-dark-soft);text-decoration:none;border-bottom:1px solid var(--hair-gold-dark);transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.foot__base a:hover{color:var(--gold-light);border-color:var(--gold-light)}

/* ==========================================================================
   Unpublished-page preview bar
   ========================================================================== */
.preview-bar{background:var(--espresso);color:var(--on-dark)}
.preview-bar__in{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;justify-content:space-between;padding-block:.85rem}
.preview-bar p{font-size:.8125rem;line-height:1.6;max-width:78ch;color:var(--on-dark-soft)}
.preview-bar strong{color:var(--gold-light)}

/* Terms (full-day page) */
.terms{display:flex;flex-direction:column;border-top:1px solid var(--hair-strong)}
.term{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:var(--s2) var(--s5);padding-block:clamp(1.3rem,2.4vw,1.9rem);border-bottom:1px solid var(--hair)}
.term__k{font-family:var(--font-display);font-size:var(--fs-h4);font-weight:500;line-height:1.2;color:var(--ink)}
.term p{font-size:.9375rem;line-height:1.72;color:var(--ink-soft);max-width:var(--measure)}

/* ==========================================================================
   Motion — slow, cinematic, and entirely optional
   ========================================================================== */
/* The scroll-reveal system is gone. It hid content three separate times — once
   the whole page, once every photograph, once 25 copy blocks — and each failure
   also stopped Chrome fetching images inside the hidden subtree. A fade-in was
   never worth that risk, so nothing on this page has its visibility controlled
   by script. The HRV trace draw that used to live here went with the traces;
   the NeuralChek images that replaced them are plain, static photographs. */

/* The photograph settles back to scale as its block rises — a camera coming to
   rest. No clip-path: it is the effect that hid every image, and cropping
   imagery to reveal it is not worth the fragility. */
/* Deliberately nothing here animates imagery. Photographs render immediately,
   unconditionally, in every environment. A reveal effect is not worth a page
   that can show no pictures at all. */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .nav__links{gap:1.1rem}
}

@media (max-width:960px){
  .nav__links{
    position:fixed;inset:82px 0 auto;flex-direction:column;align-items:stretch;gap:0;
    padding:var(--s2) var(--gutter) var(--s5);
    background:var(--cream);border-bottom:1px solid var(--hair);
    transform:translateY(-10px);opacity:0;pointer-events:none;
    transition:opacity 260ms var(--ease),transform 260ms var(--ease);
  }
  .nav__links[data-open="true"]{transform:none;opacity:1;pointer-events:auto}
  .nav__links a:not(.btn){padding:1.05rem 0;border-bottom:1px solid var(--hair);font-size:.8125rem}
  .nav__links a:not(.btn)::after{display:none}
  .nav__links .btn{margin-top:var(--s3);width:100%}
  .nav__toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;background:transparent;border:1px solid var(--hair-strong);
    border-radius:var(--pill);cursor:pointer;flex:0 0 auto;
  }
  .nav__toggle span{position:relative;width:17px;height:1px;background:var(--ink);display:block}
  .nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:17px;height:1px;background:var(--ink);transition:transform 260ms var(--ease)}
  .nav__toggle span::before{top:-5px}
  .nav__toggle span::after{top:5px}
  .nav__toggle[aria-expanded="true"] span{background:transparent}
  .nav__toggle[aria-expanded="true"] span::before{transform:translateY(5px) rotate(45deg)}
  .nav__toggle[aria-expanded="true"] span::after{transform:translateY(-5px) rotate(-45deg)}

  .cols,.facts,.segs,.assure,.specs2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiers{grid-template-columns:minmax(0,1fr);border-top:0}
  .tier{border-left:0;border-top:1px solid var(--hair-strong)}
  .tier--feature::before{display:none}
  .tier__flag{position:static;transform:none;align-self:flex-start}
  .foot__top{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:820px){
  .panel{min-height:min(78vh,680px)}
  .panel__veil{background:linear-gradient(to top,rgba(18,13,11,.88) 0%,rgba(18,13,11,.66) 42%,rgba(18,13,11,.22) 70%,transparent 100%)}
  /* Phones and small tablets: the photograph stands alone, full width, and the
     copy follows it on the forest band — no veil, no type over the picture.
     The portrait crop is served here; its height is capped so a tablet never
     gets a screen-tall photo before the headline. */
  .hero{display:block;min-height:0;background:var(--forest)}
  .hero__bg{position:static}
  .hero__bg img{height:auto;max-height:min(72svh,640px);object-position:58% 50%}
  .hero__veil{display:none}
  .hero__inner{justify-content:flex-start;padding-top:clamp(2rem,7vw,3rem);padding-bottom:clamp(2.25rem,7vw,3rem)}
  .hero__foot{background:rgba(20,15,12,.16);backdrop-filter:none}
  .grid--split,.grid--wide-left,.grid--wide-right,.step,.term,.bios__grid{grid-template-columns:minmax(0,1fr)}
  .flip,.step:nth-child(even) .step__art{order:0}
  .term{gap:.6rem}
}

@media (max-height:660px){
  .hero{min-height:0}
  .hero__title{font-size:clamp(1.875rem,1rem + 2.6vw,2.75rem)}
  .hero__inner{padding-block:clamp(1.25rem,3vh,2rem) clamp(3.5rem,7vh,4.5rem)}
}

@media (max-width:820px){
  .hero__title{text-wrap:balance;max-width:100%}
}

@media (max-width:600px){
  .cols,.facts,.segs,.assure,.specs2,.grid--2,.grid--3{grid-template-columns:minmax(0,1fr)}
  .reading__top{align-items:flex-start}
  .spec-row{grid-template-columns:minmax(0,1fr)}
  .spec-row__i{padding-top:0;margin-bottom:.3rem}
}

@media print{
  .nav,.wave,.skip,.preview-bar{display:none}
  body::after{display:none}
  body{background:#fff;color:#000}
  .band-dark,.band-dark--soft,.foot{background:#fff!important;color:#000!important}
}