/* ==========================================================================
   LUSH ∞ LACED — site.css
   Palette fixed by the brand system and verified against the production app
   bundle: Connection Teal #00979A · Midnight Ink #15151F · Shared Gold #D1AA2A
   ========================================================================== */
:root{
  --teal:#00979A; --teal-soft:#4DD7D9; --teal-deep:#006265;
  --ink:#15151F; --obsidian:#0B0B0D; --obsidian-2:#08080A;
  --gold:#D1AA2A; --gold-soft:#F5BA42;
  --cream:#F5F2EB; --text:#F5F2EB;
  --text-mid:rgba(245,242,235,.70); --text-dim:rgba(245,242,235,.52);
  --hair:rgba(245,242,235,.12); --hair-soft:rgba(245,242,235,.07);
  --glass:rgba(12,26,30,.62); --glass-brd:rgba(0,151,154,.26);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --nav-h:64px; --gut:22px; --maxw:1180px;
  --e-out:cubic-bezier(.16,1,.3,1);
}
@media (min-width:768px){ :root{ --gut:36px; --nav-h:76px; } }
@media (min-width:1280px){ :root{ --gut:48px; } }

@property --lx{ syntax:"<number>"; inherits:true; initial-value:.5; }
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--obsidian); -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--obsidian); color:var(--text);
  font-family:var(--sans); font-size:16px; line-height:1.5; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
main{ position:relative; overflow-x:clip; }   /* clip, not hidden: sticky sections keep working */

.sr-only{ position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; }
.skip{ position:fixed;top:-100px;left:12px;z-index:200;background:var(--gold);color:#0B0B0D;
  font-weight:600;font-size:14px;padding:12px 18px;border-radius:999px;text-decoration:none;
  transition:top .18s var(--e-out); }
.skip:focus{ top:calc(env(safe-area-inset-top,0px) + 12px); }
:where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--teal-soft); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--tight{ max-width:780px; }
.wrap--wide{ max-width:1400px; }
/* centred editorial column: headline wide, body narrow, everything on one axis */
.wrap--c{ display:grid; justify-items:center; text-align:center; }
.wrap--c > *{ min-width:0; max-width:100%; }
.wrap--c .display{ max-width:14em; }
.wrap--c .lede{ margin-inline:auto; }
.wrap--c .lede + .lede{ margin-top:18px; }
.ctas{ display:flex; flex-wrap:wrap; gap:12px 14px; justify-content:center;
  margin:clamp(34px,5vh,52px) 0 0; }

.eyebrow{ margin:0 0 18px; font-size:9.5px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color:var(--teal-soft); }
.eyebrow--gold{ color:var(--gold-soft); }
.display{ font-family:var(--serif); font-weight:300; font-size:clamp(32px,6.4vw,64px);
  line-height:1.08; letter-spacing:.005em; margin:0 0 22px; text-wrap:balance; }
.muted{ color:var(--text-dim); }
.lede{ font-size:clamp(15px,1.6vw,18px); line-height:1.62; color:var(--text-mid); margin:0; max-width:34em; text-wrap:pretty; }
.lede--wide{ max-width:38em; }

.btn{ --bg:transparent; --fg:var(--cream); --brd:var(--hair);
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 26px; gap:10px; border-radius:999px;
  border:1px solid var(--brd); background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; cursor:pointer;
  transition:transform .18s var(--e-out), box-shadow .22s var(--e-out), background-color .22s, border-color .22s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.btn--sm{ min-height:40px; padding:0 18px; font-size:12.5px; }
.btn--lg{ min-height:56px; padding:0 34px; font-size:15px; }
.btn--gold{ --bg:var(--gold); --fg:#0B0B0D; --brd:transparent; box-shadow:0 6px 20px rgba(209,170,42,.20); }
.btn--gold:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(209,170,42,.30); }
.btn--gold:active{ transform:translateY(0) scale(.985); }
.btn--ghost:hover{ border-color:var(--glass-brd); background:rgba(0,151,154,.08); }
@media (prefers-reduced-motion:reduce){ .btn:hover,.btn:active{ transform:none; } }

/* ---------- navigation -------------------------------------------------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:60; padding-top:env(safe-area-inset-top,0px);
  background:linear-gradient(to bottom,rgba(8,8,10,.82),rgba(8,8,10,0));
  transition:background-color .3s, backdrop-filter .3s, border-color .3s;
  border-bottom:1px solid transparent; }
.nav[data-solid="true"]{ background:rgba(9,10,12,.72);
  -webkit-backdrop-filter:saturate(150%) blur(18px); backdrop-filter:saturate(150%) blur(18px);
  border-bottom-color:var(--hair-soft); }
.nav__in{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  height:var(--nav-h); display:flex; align-items:center; gap:20px; }
.nav__brand{ display:inline-flex; align-items:center; gap:10px; color:var(--cream);
  text-decoration:none; margin-right:auto; }
.nav__mark img{ width:26px; height:26px; opacity:.95; }
.nav__word{ font-size:12px; font-weight:600; letter-spacing:.20em; white-space:nowrap; }
.nav__word i{ font-style:normal; color:var(--gold); margin-inline:2px; }
.nav__links{ display:none; gap:26px; }
.nav__links a{ color:var(--text-mid); text-decoration:none; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; padding:8px 0; transition:color .2s; }
.nav__links a:hover,.nav__links a[aria-current="true"]{ color:var(--cream); }
@media (max-width:430px){
  .nav__word{ letter-spacing:.12em; }
  .nav__brand{ gap:8px; }
}
@media (min-width:1000px){ .nav__links{ display:flex; } }
.nav__end{ display:flex; align-items:center; gap:12px; }
.nav__end .btn--gold{ display:none; }
@media (min-width:1000px){ .nav__end .btn--gold{ display:inline-flex; } }
.nav__toggle{ width:46px; height:46px; display:grid; place-items:center; background:transparent;
  border:1px solid var(--hair); border-radius:999px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
@media (min-width:1000px){ .nav__toggle{ display:none; } }
.nav__toggle-box{ display:block; width:18px; }
.nav__toggle-box i{ display:block; height:1.5px; background:var(--cream); border-radius:2px;
  transition:transform .25s var(--e-out), opacity .2s; }
.nav__toggle-box i:first-child{ margin-bottom:5px; }
.nav__toggle[aria-expanded="true"] i:first-child{ transform:translateY(3.25px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:last-child{ transform:translateY(-3.25px) rotate(-45deg); }

.sheet{ position:fixed; inset:0; z-index:55; background:rgba(6,7,9,.94);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 24px) var(--gut)
          calc(env(safe-area-inset-bottom,0px) + 32px);
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sheet[hidden]{ display:none; }
.sheet__in{ display:flex; flex-direction:column; gap:2px; }
.sheet__in a:not(.btn){ font-family:var(--serif); font-size:28px; font-weight:300; color:var(--cream);
  text-decoration:none; padding:14px 0; border-bottom:1px solid var(--hair-soft); }
.sheet__in .btn{ margin-top:26px; align-self:flex-start; }

/* ==========================================================================
   CINEMATIC EMBLEM
   ========================================================================== */
.cine{ position:relative; height:700vh; background:var(--obsidian); }
.cine__sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;
  display:grid; place-items:center; }
.cine__stage{ position:absolute; inset:0; }
.cine__canvas{ width:100%; height:100%; display:block; transition:opacity 0s; }
/* the DOM traveller has taken over the medallion; the render steps aside
   only after the traveller has fully faded in, so there is never a dip */
.cine.is-handoff .cine__canvas{ opacity:0; transition:opacity .2s .36s; }
.cine__static{ position:absolute; top:50%; left:50%; width:min(84vw,62vh); height:auto;
  transform:translate(-50%,-50%); display:none; }
.cine__grade{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 50%,transparent 45%,rgba(6,6,8,.55) 100%); }
.cine.is-static .cine__canvas, .no-js .cine__canvas{ display:none; }
.cine.is-static .cine__static, .no-js .cine__static{ display:block; }
.cine.is-static, .no-js .cine{ height:auto; }
.cine.is-static .cine__sticky, .no-js .cine__sticky{ position:relative; height:auto; padding:calc(var(--nav-h) + 60px) 0 90px; }
.cine.is-static .cine__stage, .no-js .cine__stage{ position:relative; height:min(70vh,540px); }

.cine__copy{ position:absolute; inset:0; pointer-events:none;
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 12px) var(--gut)
          calc(env(safe-area-inset-bottom,0px) + 24px); }
.cap{ position:absolute; opacity:0; transition:opacity .5s var(--e-out), transform .6s var(--e-out);
  transform:translateY(14px); will-change:opacity,transform; }
.cap.is-on{ opacity:1; transform:none; }
.cap a{ pointer-events:auto; }
.cap--hero{ left:0; right:0; bottom:clamp(28px,7vh,72px); padding-inline:var(--gut);
  text-align:center; display:grid; justify-items:center; }
.cap--hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,8vw,68px);
  line-height:1.06; letter-spacing:.004em; margin:0 0 18px; max-width:12em; }
.cap--hero .lede{ max-width:26em; margin-inline:auto; }
.cap__k{ margin:0 0 10px; font-size:10px; font-weight:700; letter-spacing:.34em;
  text-transform:uppercase; color:var(--teal-soft); }
.cap__t{ margin:0; font-size:clamp(14px,1.5vw,16.5px); line-height:1.55; color:var(--text-mid); max-width:22em; }
.cap__t--lg{ font-family:var(--serif); font-weight:300; font-size:clamp(23px,4.2vw,38px);
  line-height:1.2; color:var(--cream); max-width:18em; }
.cap--l{ left:var(--gut); top:calc(var(--nav-h) + 12vh); max-width:min(260px,21vw); }
.cap--r{ right:var(--gut); top:calc(var(--nav-h) + 12vh); max-width:min(260px,21vw); text-align:right; }
.cap--r .cap__t{ margin-left:auto; }
.cap--c{ left:0; right:0; bottom:0; padding:64px var(--gut) clamp(30px,7vh,74px); text-align:center;
  background:linear-gradient(to top,rgba(7,7,9,.86) 12%,rgba(7,7,9,.55) 52%,transparent 100%); }
.cap--c .cap__t{ margin-inline:auto; }
@media (max-width:719px){
  .cap--l,.cap--r{ left:var(--gut); right:var(--gut); max-width:none; text-align:left; }
  .cap--l{ top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 10px); }
  .cap--r{ top:auto; bottom:calc(env(safe-area-inset-bottom,0px) + 26px); text-align:left; }
  .cap--r .cap__t{ margin-left:0; }
  .cap--hero{ bottom:clamp(18px,4.2vh,42px); }
  .cap--hero h1{ font-size:clamp(30px,12vw,56px); line-height:1.02; margin-bottom:12px; }
  .cap--hero .lede{ max-width:18em; font-size:14px; }
  .cap__t{ max-width:26em; }
}
@media (max-height:760px) and (min-width:720px){
  .cap--l,.cap--r{ top:calc(var(--nav-h) + 16px); }
  .cap--hero .lede{ display:none; }
}
.scrollcue{ margin:30px 0 0; display:flex; align-items:center; gap:12px; font-size:9.5px;
  letter-spacing:.3em; text-transform:uppercase; color:var(--text-dim); justify-content:center; }
.scrollcue::after{ content:""; width:52px; height:1px;
  background:linear-gradient(90deg,var(--teal-soft),transparent); animation:cue 2.4s var(--e-out) infinite; }
@keyframes cue{ 0%,100%{opacity:.25;transform:scaleX(.4);transform-origin:left} 50%{opacity:1;transform:scaleX(1)} }
.cine__progress{ position:absolute; left:var(--gut); right:var(--gut);
  bottom:calc(env(safe-area-inset-bottom,0px) + 12px); height:1px; background:var(--hair-soft);
  margin:0; overflow:hidden; }
.cine__progress i{ display:block; height:100%; width:100%;
  background:linear-gradient(90deg,var(--teal),var(--gold)); transform:scaleX(0); transform-origin:left; }
.cine.is-static .cine__copy, .no-js .cine__copy{ position:static; padding:clamp(40px,7vh,72px) var(--gut) 0; pointer-events:auto; }
.cine.is-static .cap, .no-js .cap{ position:static; opacity:1; transform:none; text-align:center;
  margin:0 auto clamp(30px,5vh,52px); max-width:var(--maxw); width:100%; background:none; padding:0; }
.cine.is-static .cap--r .cap__t, .no-js .cap--r .cap__t{ margin-inline:auto; }
.cine.is-static .cap--l .cap__t, .no-js .cap--l .cap__t{ margin-inline:auto; }
.cine.is-static .cap--hero, .no-js .cap--hero{ justify-items:center; }
.cine.is-static .cap--c .cap__t, .no-js .cap--c .cap__t{ margin-inline:auto; }
.cine.is-static .scrollcue, .cine.is-static .cine__progress, .cine.is-static .cine__grade,
.no-js .scrollcue, .no-js .cine__progress, .no-js .cine__grade{ display:none; }

/* ---------- no JavaScript: the whole story reads top to bottom ----------- */
.no-js [data-r]{ opacity:1; transform:none; transition:none; }
.no-js .nav__toggle{ display:none; }
.no-js .story__runway{ height:auto; }
.no-js .story__sticky{ position:static; height:auto; display:grid; gap:18px; place-items:center;
  padding:clamp(80px,12vh,140px) var(--gut); }
.no-js .story__line{ position:static; opacity:1; transform:none; }
.no-js .story__count, .no-js .story__halo{ display:none; }
.no-js .show__runway{ height:auto; }
.no-js .show__sticky{ position:static; height:auto; padding-bottom:clamp(60px,9vh,110px); }
.no-js .show__text{ min-height:0; }
.no-js .show__item{ position:static; opacity:1; transform:none; pointer-events:auto;
  padding:22px 0; border-bottom:1px solid var(--hair-soft); }
.no-js .show__stage, .no-js .show__dots{ display:none; }
.no-js .converge__w--l, .no-js .converge__w--r{ opacity:1; transform:none; }


/* chips are shared by both engine sections (styled in sections.css) */
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:clamp(30px,5vh,48px) auto 0; padding:0; max-width:46em; }
.chips li{ padding:9px 16px; border-radius:999px; font-size:12.5px; font-weight:500;
  border:1px solid var(--hair-soft); background:rgba(255,255,255,.03); color:var(--text-mid); }
.engine--lush .chips li{ border-color:rgba(0,151,154,.26); }
.engine--laced .chips li{ border-color:rgba(209,170,42,.22); }

/* scroll reveals */
[data-r]{ opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--e-out), transform .7s var(--e-out); }
[data-r].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  [data-r]{ opacity:1!important; transform:none!important; transition:none!important; }
  .cap{ opacity:1!important; transform:none!important; transition:none!important; }
  .scrollcue::after{ animation:none; }
}

/* ==========================================================================
   OBJECT CONTINUITY — one medallion travels the whole page
   The .anchor elements are invisible docking points in the flow; a single
   fixed .traveler element flies between them as you scroll, so the symbol
   is literally the same object from the emblem seal to the final CTA.
   ========================================================================== */
.anchor{ display:block; pointer-events:none; }
.anchor--seal{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:1px; height:1px;                    /* sized by JS to match the canvas */
}
.anchor--story{ position:absolute; left:50%; transform:translateX(-50%);
  top:clamp(90px,16vh,170px); width:clamp(44px,5.6vw,64px); aspect-ratio:1; }
.anchor--show{ position:relative; width:clamp(40px,5vw,50px); aspect-ratio:1; z-index:3; }
.anchor--engine{ width:clamp(38px,4.4vw,50px); aspect-ratio:1; margin:0 auto 20px; }
.anchor--reunion{ width:clamp(64px,9vw,104px); aspect-ratio:1; }
.anchor--final{ width:min(280px,52vw); aspect-ratio:1; margin:0 auto clamp(26px,4vh,42px); }

.traveler{
  position:fixed; left:0; top:0; z-index:45;
  pointer-events:none; opacity:0;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  transition:opacity .35s var(--e-out);
}
.traveler.is-on{ opacity:1; }
.traveler img{ width:100%; height:100%; display:block; }

/* No traveler (reduced motion, no WebGL): each dock shows the symbol itself. */
.no-travel .anchor:not(.anchor--seal){
  background:url("../brand/symbol.webp") center/contain no-repeat;
}
.no-travel .traveler{ display:none; }

/* ---------- floating section navigation -------------------------------- */
.section-nav{ position:fixed; right:max(16px,env(safe-area-inset-right,0px));
  bottom:max(16px,env(safe-area-inset-bottom,0px)); z-index:70; display:flex; gap:8px;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s var(--e-out),transform .25s var(--e-out); }
.section-nav.is-visible{ opacity:1; transform:none; pointer-events:auto; }
.section-nav__button{ display:inline-flex; align-items:center; gap:8px; min-height:42px;
  padding:0 14px; border:1px solid var(--hair); border-radius:999px; background:rgba(9,10,12,.82);
  color:var(--cream); font:600 11px var(--sans); letter-spacing:.08em; text-transform:uppercase;
  cursor:pointer; box-shadow:0 8px 24px rgba(0,0,0,.22); -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px); transition:background-color .2s,border-color .2s,transform .2s; }
.section-nav__button:hover{ background:rgba(0,151,154,.18); border-color:var(--glass-brd); transform:translateY(-2px); }
.section-nav__button:active{ transform:translateY(0) scale(.98); }
.section-nav__button[hidden]{ display:none; }
.section-nav__icon{ width:8px; height:8px; border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); }
.section-nav__icon--up{ transform:rotate(225deg) translateY(-1px); }
@media (max-width:480px){
  .section-nav{ right:max(12px,env(safe-area-inset-right,0px)); bottom:max(12px,env(safe-area-inset-bottom,0px)); gap:6px; }
  .section-nav__button{ min-height:40px; padding:0 12px; font-size:10px; letter-spacing:.06em; }
}
@media (prefers-reduced-motion:reduce){
  .section-nav{ transition:none; }
  .section-nav__button{ transition:none; }
}