/* ==========================================================================
   LUSH ∞ LACED — sections.css
   Everything downstream of the locked emblem/medallion system, composed on
   a single centred axis: a wide headline, a narrow measure of body copy,
   room to breathe, then the product. Environments evolve section to
   section: near-black → teal depth → glass → editorial → gold → near-black.
   ========================================================================== */

/* ---------- shared editorial primitives --------------------------------- */
.sec{ position:relative; overflow:hidden; }
.sec__rule{ width:1px; height:clamp(48px,7vh,88px); margin:0 auto;
  background:linear-gradient(180deg,var(--gold),transparent); }

/* pull quote: a single line allowed to carry a whole idea */
.pull{
  margin:clamp(38px,6vh,68px) auto 0; max-width:22em; text-align:center;
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(23px,3.4vw,38px); line-height:1.24; color:var(--cream);
  text-wrap:balance;
}
.pull--sm{ font-size:clamp(20px,2.6vw,30px); max-width:24em; }
.pull--tight{ margin-top:clamp(24px,4vh,40px); }

/* litany: a vertical list of short lines, read like a poem */
.litany{ list-style:none; margin:clamp(26px,4vh,40px) auto 0; padding:0; text-align:center; }
.litany li{ font-family:var(--serif); font-weight:300; font-size:clamp(20px,2.6vw,30px);
  line-height:1.45; color:var(--cream); }
.litany--dim li{ color:var(--text-mid); }
.litany--sm li{ font-size:clamp(18px,2.2vw,25px); }
.litany li em{ font-style:normal; color:var(--teal-soft); }

/* ==========================================================================
   03 — PRODUCT STORY (sticky statements)
   ========================================================================== */
.story{
  position:relative;
  background:linear-gradient(180deg,#050507 0%,var(--obsidian) 9%,#080D0F 40%,#0A1315 72%,var(--obsidian) 100%);
}
.story__runway{ height:400vh; }
.story__sticky{
  position:sticky; top:0; height:100vh; height:100svh;
  display:grid; place-items:center; overflow:hidden;
  padding:calc(var(--nav-h) + 20px) var(--gut) 40px;
}
.story__halo{
  position:absolute; width:min(150vw,1000px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,151,154,.16),transparent 68%);
  filter:blur(30px); pointer-events:none;
  transition:transform 1.1s var(--e-out), opacity 1.1s var(--e-out);
}
.story__line{
  position:absolute; text-align:center; max-width:16em;
  opacity:0; transform:translateY(24px) scale(.985);
  transition:opacity .62s var(--e-out), transform .8s var(--e-out);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(30px,6.6vw,68px); line-height:1.1; color:var(--cream);
}
.story__line.is-on{ opacity:1; transform:none; }
.story__line em{ font-style:normal; color:var(--teal-soft); }
.story__line b{ font-weight:300; color:var(--gold-soft); }
.story__count{
  position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 22px); left:50%;
  transform:translateX(-50%); display:flex; gap:8px; list-style:none; margin:0; padding:0;
}
.story__count li{ width:22px; height:1px; background:rgba(245,242,235,.18); transition:background-color .4s; }
.story__count li.is-on{ background:var(--teal-soft); }

/* ==========================================================================
   04 — ONE MOMENT, TWO EXPERIENCES  ·  INTENTION ≠ INTERPRETATION
   ========================================================================== */
.gapsec{ position:relative; overflow:hidden; padding:clamp(96px,15vh,190px) 0;
  background:
    radial-gradient(64% 42% at 14% 8%,rgba(0,151,154,.15),transparent 64%),
    radial-gradient(58% 40% at 88% 88%,rgba(209,170,42,.10),transparent 66%),
    linear-gradient(180deg,var(--obsidian),#090F11 50%,var(--obsidian)); }

/* the ≠ is the axis: one person reads toward it, the other reads away */
.gaps{ list-style:none; margin:clamp(46px,7vh,84px) auto 0; padding:0; width:100%; max-width:980px;
  border-top:1px solid var(--hair-soft); }
.gaps li{ display:grid; grid-template-columns:1fr; gap:12px; text-align:center;
  padding:clamp(24px,3.4vh,34px) 0; border-bottom:1px solid var(--hair-soft); }
.gaps__k{ display:block; margin:0 0 7px; font-size:9.5px; font-weight:700;
  letter-spacing:.28em; text-transform:uppercase; }
.gaps__a .gaps__k{ color:var(--teal-soft); }
.gaps__b .gaps__k{ color:var(--gold-soft); }
.gaps__a,.gaps__b{ margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(19px,2.3vw,27px); line-height:1.26; color:var(--cream); text-wrap:balance; }
.gaps__b{ color:var(--text-mid); }
.gaps__x{ font-family:var(--serif); font-size:22px; color:rgba(245,242,235,.30); line-height:1; }
@media (min-width:760px){
  .gaps li{ grid-template-columns:1fr 48px 1fr; gap:clamp(18px,3vw,40px); align-items:center; text-align:left; }
  .gaps__a{ text-align:right; }
  .gaps__x{ text-align:center; }
}

.statement{ position:relative; overflow:hidden; text-align:center; padding:clamp(96px,16vh,200px) 0;
  background:
    radial-gradient(60% 40% at 50% 50%,rgba(209,170,42,.09),transparent 68%),
    linear-gradient(180deg,var(--obsidian),#0B0C0F 50%,var(--obsidian)); }
.statement__h{ margin:0 auto; font-family:var(--serif); font-weight:300;
  font-size:clamp(34px,7.6vw,84px); line-height:1.04; letter-spacing:-.005em; }
.statement__h i{ font-style:normal; color:var(--gold); margin-inline:.12em; }
.statement .lede{ margin-top:clamp(22px,3.4vh,34px); }

/* ==========================================================================
   05 — A RELATIONSHIP OPERATING SYSTEM
   ========================================================================== */
.ossec{ position:relative; overflow:hidden; padding:clamp(96px,15vh,190px) 0;
  background:
    radial-gradient(70% 44% at 50% 0%,rgba(0,151,154,.12),transparent 64%),
    linear-gradient(180deg,var(--obsidian),#0A1214 52%,var(--obsidian)); }
.osdef{ display:grid; gap:clamp(28px,5vw,64px); grid-template-columns:1fr; width:100%;
  max-width:900px; margin:clamp(56px,9vh,104px) auto 0; text-align:center; }
@media (min-width:760px){
  .osdef{ grid-template-columns:1fr 1fr; align-items:start; }
  .osdef__is{ text-align:right; padding-right:clamp(20px,4vw,52px); border-right:1px solid var(--hair-soft); }
  .osdef__not{ text-align:left; padding-left:clamp(20px,4vw,52px); }
}
.osdef__h{ margin:0 0 18px; font-size:9.5px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; }
.osdef__not .osdef__h{ color:var(--text-dim); }
.osdef__is .osdef__h{ color:var(--teal-soft); }
.osdef ul{ list-style:none; margin:0; padding:0; }
.osdef__not li{ padding:8px 0; font-size:15px; color:var(--text-dim);
  text-decoration:line-through; text-decoration-color:rgba(245,242,235,.24); }
.osdef__is li{ padding:7px 0; font-family:var(--serif); font-weight:300;
  font-size:clamp(20px,2.3vw,26px); line-height:1.2; color:var(--cream); }

/* ==========================================================================
   07 — TRANSLATION CHAIN: the architecture underneath the product
   ========================================================================== */
.chainsec{ position:relative; overflow:hidden; padding:clamp(92px,14vh,180px) 0;
  background:linear-gradient(180deg,var(--obsidian),#0A1416 46%,#080F11 100%); }
.chain{ list-style:none; margin:clamp(52px,8vh,92px) auto 0; padding:0; width:100%;
  display:grid; gap:0; position:relative; max-width:560px; }
.chain li{ position:relative; text-align:center; padding:clamp(16px,2.4vh,24px) 0 clamp(16px,2.4vh,24px); }
/* the spine */
.chain::before{ content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  transform:translateX(-50%); background:linear-gradient(180deg,transparent,rgba(0,151,154,.42) 8%,
  rgba(0,151,154,.42) 82%,rgba(209,170,42,.5) 96%,transparent); }
.chain__t{ position:relative; display:inline-block; padding:0 14px; background:#0A1416;
  font-size:10px; font-weight:700; letter-spacing:.30em; text-transform:uppercase; color:var(--teal-soft); }
.chain li:last-child .chain__t{ color:var(--gold-soft); }
.chain__t::before{ content:""; display:block; width:9px; height:9px; margin:0 auto 10px; border-radius:50%;
  background:var(--teal); box-shadow:0 0 0 4px rgba(0,151,154,.14); }
.chain li:last-child .chain__t::before{ background:var(--gold); box-shadow:0 0 0 4px rgba(209,170,42,.16); }
.chain__d{ position:relative; margin:8px auto 0; max-width:20em; padding:0 12px; background:#0A1416;
  font-family:var(--serif); font-weight:300; font-size:clamp(19px,2.3vw,25px); line-height:1.28; color:var(--cream); }
/* wide: one horizontal rail, read left to right */
@media (min-width:1100px){
  .chain{ max-width:none; grid-template-columns:repeat(7,1fr); gap:0 6px; align-items:start; }
  .chain::before{ left:7%; right:7%; top:4px; bottom:auto; height:1px; width:auto; transform:none;
    background:linear-gradient(90deg,transparent,rgba(0,151,154,.42) 6%,rgba(0,151,154,.42) 84%,rgba(209,170,42,.5) 96%,transparent); }
  .chain li{ padding:0 4px; }
  .chain li::after{ content:"→"; position:absolute; right:-9px; top:-4px; font-size:13px; color:rgba(245,242,235,.30); }
  .chain li:last-child::after{ display:none; }
  .chain__t{ background:none; padding:0; }
  .chain__t::before{ margin-bottom:16px; }
  .chain__d{ background:none; padding:0; font-size:16.5px; line-height:1.4; max-width:15em; margin-top:10px; }
}

/* ==========================================================================
   08 / 11 — LUSH & LACED
   ========================================================================== */
.engine{ position:relative; padding:clamp(96px,15vh,190px) 0; overflow:hidden; }
.engine--lush{
  background:
    radial-gradient(78% 48% at 50% 0%,rgba(0,151,154,.24),transparent 62%),
    radial-gradient(58% 38% at 88% 86%,rgba(199,195,232,.10),transparent 66%),
    linear-gradient(180deg,var(--obsidian),#07191B 44%,#091416 100%);
}
.engine--laced{
  background:
    radial-gradient(66% 44% at 50% 4%,rgba(209,170,42,.17),transparent 62%),
    linear-gradient(180deg,#091416,#100E0A 46%,var(--obsidian) 100%);
}
/* LUSH breathes; LACED keeps time */
.engine--lush::before{
  content:""; position:absolute; inset:-22% -12%; pointer-events:none; z-index:0;
  background:radial-gradient(closest-side,rgba(0,151,154,.17),transparent 70%);
  animation:drift 23s ease-in-out infinite alternate;
}
@keyframes drift{ from{transform:translate3d(-6%,-3%,0) scale(1)} to{transform:translate3d(7%,5%,0) scale(1.16)} }
.engine--laced::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.55;
  background-image:linear-gradient(90deg,rgba(209,170,42,.10) 1px,transparent 1px);
  background-size:clamp(46px,7vw,92px) 100%;
  -webkit-mask-image:radial-gradient(74% 62% at 50% 42%,#000,transparent 78%);
  mask-image:radial-gradient(74% 62% at 50% 42%,#000,transparent 78%);
}
@media (prefers-reduced-motion:reduce){ .engine--lush::before{ animation:none; } }
.engine > .wrap{ position:relative; z-index:1; }

.engine__k{ margin:0 0 12px; font-size:10px; font-weight:700; letter-spacing:.34em; text-transform:uppercase; }
.engine--lush .engine__k{ color:var(--teal-soft); }
.engine--laced .engine__k{ color:var(--gold-soft); }
.engine__h{ margin:0 0 6px; font-family:var(--serif); font-weight:300;
  font-size:clamp(56px,13vw,132px); line-height:.92; letter-spacing:-.012em; }
.engine__sub{ margin:0 0 26px; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(20px,3vw,32px); color:var(--text-dim); }
.engine__d{ max-width:34em; color:var(--text-mid); font-size:clamp(15px,1.6vw,17px);
  line-height:1.72; margin:0 auto; text-wrap:pretty; }
.engine__d + .engine__d{ margin-top:16px; }

/* ==========================================================================
   09 — SENSORY SHIELD  ·  10 — DO NOT PERCEIVE ME / NEED SPACE
   ========================================================================== */
.shieldsec{ position:relative; overflow:hidden; padding:clamp(92px,14vh,180px) 0;
  background:linear-gradient(180deg,#091416,#050608 50%,#07090B 100%); }
.shieldsec .ps::before{ background:radial-gradient(closest-side,rgba(77,215,217,.10),transparent 70%); }

.twinsec{ position:relative; overflow:hidden; padding:clamp(88px,13vh,170px) 0;
  background:linear-gradient(180deg,#07090B,#0A0D10 50%,#091416 100%); }
.twin{ display:grid; gap:16px; grid-template-columns:1fr; width:100%; max-width:980px; margin:0 auto; }
@media (min-width:820px){ .twin{ grid-template-columns:1fr 1fr; gap:clamp(16px,2.4vw,28px); } }
.twin__card{ position:relative; padding:clamp(30px,4vw,48px) clamp(24px,3.4vw,44px); text-align:center;
  border-radius:24px; border:1px solid var(--hair-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012)); }
.twin__card::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:rgba(255,255,255,.12); }
.twin__k{ margin:0 0 14px; font-size:9.5px; font-weight:700; letter-spacing:.30em; text-transform:uppercase; color:var(--teal-soft); }
.twin__card--gold .twin__k{ color:var(--gold-soft); }
.twin__h{ margin:0 auto 16px; max-width:12em; font-family:var(--serif); font-weight:300;
  font-size:clamp(25px,2.8vw,34px); line-height:1.14; text-wrap:balance; }
.twin__d{ margin:0 auto; max-width:30em; font-size:14.5px; line-height:1.66; color:var(--text-mid); }
.twin__q{ margin:22px auto 0; max-width:22em; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(19px,2.1vw,24px); line-height:1.34; color:var(--cream); }
.twin__q span{ display:block; }
.twin__q-dim{ font-size:.8em; color:var(--text-dim); padding:.15em 0; }
.twin__n{ margin:18px 0 0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); }

/* ==========================================================================
   12 — CONVERGENCE
   ========================================================================== */
.converge{
  position:relative; text-align:center; overflow:hidden;
  padding:clamp(100px,17vh,210px) 0;
  background:
    radial-gradient(60% 40% at 50% 50%,rgba(0,151,154,.14),transparent 68%),
    radial-gradient(60% 40% at 50% 50%,rgba(209,170,42,.10),transparent 62%),
    linear-gradient(180deg,var(--obsidian),#0A0F11 46%,var(--obsidian));
}
.converge__pair{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:clamp(10px,3vw,40px); max-width:900px; margin:clamp(30px,5vh,48px) auto 0;
}
.converge__w{ font-family:var(--serif); font-weight:300; line-height:1;
  font-size:clamp(30px,8vw,86px); }
.converge__w--l{ color:var(--teal-soft); text-align:right;
  transform:translateX(-14px); opacity:0;
  transition:transform 1.15s var(--e-out), opacity .9s var(--e-out); }
.converge__w--r{ color:var(--gold-soft); text-align:left;
  transform:translateX(14px); opacity:0;
  transition:transform 1.15s var(--e-out), opacity .9s var(--e-out); }
.converge.is-in .converge__w--l,
.converge.is-in .converge__w--r{ transform:none; opacity:1; }
.converge__roles{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(10px,3vw,40px);
  max-width:900px; margin:14px auto 0; font-size:10px; font-weight:700; letter-spacing:.30em;
  text-transform:uppercase; color:var(--text-dim); }
.converge__roles span:first-child{ text-align:right; } .converge__roles span:last-child{ text-align:left; }
.converge__roles span:nth-child(2){ visibility:hidden; width:clamp(64px,9vw,104px); }
.converge__d{ margin:clamp(30px,5vh,52px) auto 0; max-width:30em; color:var(--text-mid);
  font-size:clamp(14.5px,1.5vw,16.5px); line-height:1.72; }
.converge__d + .converge__d{ margin-top:16px; }
.converge__inf{ margin:clamp(22px,3.6vh,40px) auto 0; font-family:var(--serif);
  font-size:clamp(34px,6vw,60px); color:var(--gold); line-height:1; opacity:.9; }

/* ==========================================================================
   13 — CALIBRATION
   ========================================================================== */
.calsec{ position:relative; overflow:hidden; padding:clamp(92px,14vh,180px) 0;
  background:
    radial-gradient(66% 42% at 50% 100%,rgba(209,170,42,.08),transparent 66%),
    linear-gradient(180deg,var(--obsidian),#0A1416 50%,#0B0F12 100%); }
.facets{ list-style:none; margin:clamp(30px,5vh,48px) auto 0; padding:0; max-width:40em;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; }
.facets li{ font-size:13px; letter-spacing:.04em; color:var(--text-mid); padding:8px 16px;
  border:1px solid var(--hair-soft); border-radius:999px; background:rgba(255,255,255,.025); }

/* ==========================================================================
   14 — NEURO-INCLUSIVE
   ========================================================================== */
.neuro{ position:relative; overflow:hidden; padding:clamp(96px,15vh,190px) 0;
  background:
    radial-gradient(70% 44% at 50% 4%,rgba(199,195,232,.09),transparent 64%),
    linear-gradient(180deg,#0B0F12,#0B1114 52%,var(--obsidian)); }
.diffs{ list-style:none; margin:clamp(44px,7vh,80px) auto 0; padding:0; width:100%; max-width:980px;
  border-top:1px solid var(--hair-soft); }
.diffs li{
  display:grid; grid-template-columns:1fr; gap:8px; text-align:center;
  padding:clamp(22px,3.2vh,32px) 0; border-bottom:1px solid var(--hair-soft);
}
@media (min-width:760px){
  .diffs li{ grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:baseline; text-align:left; }
  .diffs__t{ text-align:right; }
}
.diffs__t{ font-family:var(--serif); font-weight:300; font-size:clamp(23px,3vw,32px);
  line-height:1.15; color:var(--cream); margin:0; text-wrap:balance; }
.diffs__d{ margin:0; color:var(--text-mid); font-size:14.5px; line-height:1.68; max-width:30em; }
@media (max-width:759px){ .diffs__d{ margin-inline:auto; } }
.neuro__close{ margin:clamp(46px,7vh,80px) auto 0; max-width:30em; text-align:center;
  font-family:var(--serif); font-weight:300; font-size:clamp(22px,3.2vw,34px);
  line-height:1.32; color:var(--cream); text-wrap:balance; }
.neuro__close + .neuro__close{ margin-top:clamp(18px,3vh,28px); }

/* ==========================================================================
   15 — THE DIFFERENCE  ·  16 — WHO IT IS FOR
   ========================================================================== */
.versus{ list-style:none; margin:clamp(44px,7vh,78px) auto 0; padding:0; width:100%; max-width:980px; display:grid; gap:0; }
.versus li{ display:grid; grid-template-columns:1fr; gap:8px; text-align:center;
  padding:clamp(20px,3vh,30px) 0; border-bottom:1px solid var(--hair-soft); }
.versus li:first-child{ border-top:1px solid var(--hair-soft); }
@media (min-width:820px){
  .versus li{ grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,64px); align-items:baseline; text-align:left; }
  .versus__a{ text-align:right; }
}
.versus__a{ margin:0; font-size:15px; line-height:1.6; color:var(--text-dim); }
.versus__b{ margin:0; font-family:var(--serif); font-weight:300;
  font-size:clamp(20px,2.5vw,29px); line-height:1.26; color:var(--cream); text-wrap:balance; }

.forsec{ position:relative; overflow:hidden; padding:clamp(92px,14vh,180px) 0;
  background:linear-gradient(180deg,#080F11,#0B0B0D 55%,var(--obsidian)); }
.forlist{ list-style:none; margin:clamp(44px,7vh,78px) auto 0; padding:0; width:100%; max-width:900px;
  display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:700px){ .forlist{ grid-template-columns:1fr 1fr; gap:16px; } }
.forlist li{ padding:26px 26px; border-radius:18px; border:1px solid var(--hair-soft); text-align:center;
  background:linear-gradient(180deg,rgba(255,255,255,.032),rgba(255,255,255,.010));
  font-size:15px; line-height:1.62; color:var(--text-mid); position:relative; display:grid; place-content:center; }
.forlist li::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:rgba(255,255,255,.11); }
.forlist q{ quotes:"\201C" "\201D"; font-family:var(--serif); font-style:italic;
  font-size:clamp(19px,2.2vw,24px); color:var(--cream); line-height:1.3; display:block; text-wrap:balance; }
.forsec .beat{ margin-top:clamp(64px,10vh,120px); }

/* ==========================================================================
   18 — FINAL
   ========================================================================== */
.final{ position:relative; overflow:hidden; text-align:center;
  padding:clamp(100px,17vh,210px) 0 clamp(96px,15vh,180px);
  background:
    radial-gradient(66% 44% at 50% 44%,rgba(209,170,42,.11),transparent 66%),
    radial-gradient(78% 54% at 50% 100%,rgba(0,151,154,.11),transparent 70%),
    var(--obsidian); }
.final__word{ margin:0 0 16px; font-size:11.5px; font-weight:600; letter-spacing:.34em; color:var(--text-mid); }
.final__word i{ font-style:normal; color:var(--gold); }
.final__h{ font-family:var(--serif); font-weight:300; font-size:clamp(30px,6.4vw,58px);
  line-height:1.12; margin:0 0 22px; text-wrap:balance; }
.final .lede{ margin:0 auto 38px; max-width:24em; text-align:center; }
.final__cta{ margin:0 0 22px; }
.final__note{ margin:0; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); }
.final__note--gap{ margin-bottom:38px; }

.foot{ border-top:1px solid var(--hair-soft); background:var(--obsidian-2); }
.foot__in{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; text-align:center;
  padding-block:26px calc(26px + env(safe-area-inset-bottom,0px)); font-size:12px; color:var(--text-dim); }
.foot__in p{ margin:0; }
.foot a{ color:var(--text-mid); text-decoration:none; }
.foot a:hover{ color:var(--cream); }