/* ===========================================================
   Ondera — shared stylesheet
   Two-color brand: navy on ivory. Restraint is the luxury.
   =========================================================== */

:root{
  /* palette (from brand logo) */
  --ivory:#F3EFE6;
  --offwhite:#FBF9F4;
  --stone:#D9D2C5;
  --sand:#E9E0D0;
  --navy:#1E2F52;
  --ink:#151F38;
  --silk:#8095B7;          /* soft silk highlight, used sparingly */

  /* type */
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;

  /* rhythm */
  --pad:clamp(24px,5vw,72px);
  --maxw:1240px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* anchor targets clear the fixed nav instead of hiding behind it */
[id]{scroll-margin-top:92px}
body{
  background:var(--ivory);
  color:var(--navy);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:var(--navy);color:var(--ivory)}
img{max-width:100%;display:block}
a{color:inherit}

/* faint fabric grain over everything for a tactile, non-digital feel */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- small-caps editorial label ---------- */
.label{
  font-size:11px;letter-spacing:3.4px;text-transform:uppercase;opacity:.72;
  display:inline-flex;align-items:center;gap:14px;font-weight:400;
}
.label::before{content:'';width:34px;height:1px;background:currentColor;opacity:.5}
.label.plain::before{display:none}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px var(--pad);
  transition:padding .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);
}
.nav.scrolled{
  padding:14px var(--pad);
  background:rgba(243,239,230,.82);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(30,47,82,.08);
}
.nav .brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav .brand img{height:26px;width:auto;transition:height .5s var(--ease)}
.nav.scrolled .brand img{height:22px}
/* fallback wordmark if logo image is absent */
.brand .wordmark{font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:.4px;color:var(--navy)}

.nav-links{display:flex;gap:36px;align-items:center}
.nav-links a{
  text-decoration:none;font-size:11.5px;letter-spacing:1.8px;text-transform:uppercase;
  opacity:.68;position:relative;transition:opacity .35s var(--ease);font-weight:400;padding:4px 0;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--navy);
  transition:width .5s var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.nav-links a[aria-current="page"]{opacity:1}
.nav-links a.join{
  border:1px solid rgba(30,47,82,.35);border-radius:999px;padding:9px 20px;opacity:.9;
}
.nav-links a.join::after{display:none}
.nav-links a.join:hover{background:var(--navy);color:var(--ivory);border-color:var(--navy)}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;color:var(--navy);
  font-size:11px;letter-spacing:1.8px;text-transform:uppercase}

/* language toggle */
.lang-toggle{background:none;border:1px solid rgba(30,47,82,.28);border-radius:999px;
  cursor:pointer;color:var(--navy);font-family:var(--sans);font-size:10.5px;letter-spacing:1.5px;
  padding:7px 13px;display:inline-flex;gap:4px;align-items:center;transition:border-color .3s var(--ease)}
.lang-toggle:hover{border-color:var(--navy)}
.lang-toggle span{opacity:.4;transition:opacity .3s var(--ease)}
.lang-toggle .lang-sep{opacity:.3}
.lang-toggle[data-active="en"] .lang-en,
.lang-toggle[data-active="ca"] .lang-ca{opacity:1}
/* micro tagline under the bar — the nomenclature signal */
.nav-tagline{position:absolute;left:var(--pad);bottom:-16px;font-size:9.5px;letter-spacing:2.2px;
  text-transform:uppercase;opacity:.4;pointer-events:none;transition:opacity .5s var(--ease)}
.nav.scrolled .nav-tagline{opacity:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;display:grid;
  grid-template-columns:1.02fr .98fr;align-items:center;
  padding:0 var(--pad);overflow:hidden;
  background:radial-gradient(130% 100% at 82% 42%, #EEE6D6 0%, var(--ivory) 58%);
}
.hero-copy{position:relative;z-index:3;max-width:640px;padding:120px 0 90px}
.hero-copy .label{margin-bottom:30px}
.hero h1{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(44px,6.6vw,104px);line-height:1.0;letter-spacing:-2px;
  max-width:13ch;
}
.hero h1 em{font-style:italic;font-weight:300}
.hero .sub{
  margin-top:34px;max-width:42ch;font-size:clamp(15px,1.3vw,18px);opacity:.72;
}
.hero .cta-row{margin-top:44px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-size:12px;letter-spacing:1.6px;text-transform:uppercase;font-weight:400;
  padding:15px 30px;border-radius:999px;transition:all .4s var(--ease);
}
.btn-solid{background:var(--navy);color:var(--ivory)}
.btn-solid:hover{background:var(--ink);transform:translateY(-2px)}
.btn-ghost{color:var(--navy);opacity:.75}
.btn-ghost:hover{opacity:1;gap:18px}

/* the silk "O" centerpiece (from the logo) */
.hero-silk{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center}
.silk-o{position:relative;width:min(72%,440px);aspect-ratio:441/428;
  transform-origin:center;transform-style:preserve-3d;perspective:1400px;
  animation:oBreath 11s ease-in-out infinite;
  filter:drop-shadow(0 42px 80px rgba(21,31,56,.24))}
.silk-o-img,.silk-o-sheen{position:absolute;inset:0;width:100%;height:100%}
.silk-o-img{object-fit:contain}
/* a soft light sweeping across the satin, clipped to the O shape */
.silk-o-sheen{
  background:linear-gradient(115deg,
    transparent 34%,
    rgba(190,205,235,.00) 42%,
    rgba(198,212,240,.55) 50%,
    rgba(190,205,235,.00) 58%,
    transparent 66%);
  background-size:280% 280%;
  -webkit-mask:url(img/silk-o.png) center/contain no-repeat;
          mask:url(img/silk-o.png) center/contain no-repeat;
  mix-blend-mode:screen;opacity:.9;
  animation:oSheen 7.5s ease-in-out infinite}
.silk-o-defs{position:absolute;width:0;height:0;pointer-events:none}
/* breathing float + a slow 3D sway so the silk seems to catch the light */
@keyframes oBreath{
  0%   {transform:translateY(0)     scale(1)     rotateY(-4deg) rotateX(1deg)  rotate(.4deg)}
  50%  {transform:translateY(-11px) scale(1.02)  rotateY(4deg)  rotateX(-1deg) rotate(-.5deg)}
  100% {transform:translateY(0)     scale(1)     rotateY(-4deg) rotateX(1deg)  rotate(.4deg)}}
@keyframes oSheen{
  0%{background-position:120% 0%}
  45%,100%{background-position:-40% 100%}}

.scrollcue{
  position:absolute;bottom:30px;left:var(--pad);z-index:3;
  font-size:10.5px;letter-spacing:2px;text-transform:uppercase;opacity:.45;
  display:flex;align-items:center;gap:12px;
}
.scrollcue .l{width:44px;height:1px;background:var(--navy);opacity:.5;transform-origin:left;
  animation:pull 2.8s ease-in-out infinite}
@keyframes pull{0%,100%{transform:scaleX(.35)}50%{transform:scaleX(1)}}

/* ============================================================
   THROUGH-LINE (deep navy silk moment)
   ============================================================ */
.throughline{
  position:relative;min-height:80vh;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;padding:120px var(--pad);gap:6px;
  background:linear-gradient(158deg,var(--ink) 0%,var(--navy) 58%,#26406b 100%);
  color:var(--ivory);overflow:hidden;
}
.throughline .sheen{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background:
    radial-gradient(75% 55% at 28% 18%, rgba(128,149,183,.32),transparent 60%),
    radial-gradient(70% 60% at 82% 92%, rgba(128,149,183,.18),transparent 60%);}
.throughline p{
  position:relative;font-family:var(--serif);font-weight:300;
  font-size:clamp(28px,4.8vw,64px);line-height:1.14;letter-spacing:-.6px;
}
.throughline p.two{font-style:italic;color:#DCE3F0}

/* ============================================================
   SECTIONS / GENERIC
   ============================================================ */
.section{padding:clamp(90px,12vw,170px) var(--pad)}
.wrap{max-width:var(--maxw);margin:0 auto}
.section-head{max-width:var(--maxw);margin:0 auto clamp(50px,7vw,90px)}
.section-head .label{margin-bottom:26px}
.section-head h2{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,4.4vw,60px);line-height:1.06;letter-spacing:-1px;max-width:16ch;
}
.lead{font-size:clamp(17px,1.5vw,21px);opacity:.75;max-width:52ch;margin-top:8px}

/* pillars / promises — editorial rows, never icon cards */
.rows{max-width:var(--maxw);margin:0 auto}
.row{
  display:grid;grid-template-columns:64px .5fr 1fr;gap:clamp(20px,4vw,48px);align-items:start;
  padding:clamp(38px,5vw,60px) 0;border-top:1px solid rgba(30,47,82,.16);
}
.rows .row:last-child{border-bottom:1px solid rgba(30,47,82,.16)}
.row .n{font-family:var(--serif);font-style:italic;font-size:22px;opacity:.4}
.row h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px,3.1vw,42px);
  line-height:1.06;letter-spacing:-.6px}
.row .txt{font-size:clamp(16px,1.3vw,18px);opacity:.74;max-width:48ch;align-self:center}

/* asymmetric image + text plate */
.plate{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  max-width:var(--maxw);margin:0 auto;
}
.plate.flip{direction:rtl}
.plate.flip>*{direction:ltr}
.plate .fig{position:relative;overflow:hidden;border-radius:2px;aspect-ratio:3/4;background:var(--sand)}
.plate .fig img{width:100%;height:100%;object-fit:cover}
.plate.wide .fig{aspect-ratio:16/10}
.plate .fig .wipe{position:absolute;inset:0;background:var(--ivory);transform-origin:right;
  transition:transform 1.2s var(--ease)}
.plate .fig.in .wipe{transform:scaleX(0)}
.plate .body h3{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,46px);
  line-height:1.08;letter-spacing:-.7px;margin-bottom:22px}
.plate .body p{font-size:clamp(16px,1.3vw,18px);opacity:.75;max-width:46ch}
.plate .body p+p{margin-top:16px}

/* quote band */
.band{background:linear-gradient(180deg,var(--sand),var(--stone));
  padding:clamp(90px,11vw,140px) var(--pad);text-align:center}
.band p{font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(22px,2.9vw,40px);line-height:1.32;max-width:26ch;margin:0 auto;letter-spacing:-.4px}
.band-sig{display:block;margin-top:34px;font-size:11px;letter-spacing:2.4px;text-transform:uppercase;opacity:.5}

/* ============================================================
   HERO multi-line H1 (new copy: three declarative lines)
   ============================================================ */
.hero h1 span{display:block}
.hero h1{max-width:15ch}

/* ============================================================
   THE HOOK  (extends .throughline)
   ============================================================ */
.throughline{min-height:auto;padding:clamp(100px,13vw,160px) var(--pad)}
.hook-body{position:relative;max-width:58ch;margin:44px auto 0;text-align:center}
.hook-body p{font-size:clamp(15px,1.3vw,17.5px);line-height:1.75;color:#DCE3F0;opacity:.82}
.hook-body p+p{margin-top:18px}
.hook-body .emph{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);
  line-height:1.3;opacity:1;color:var(--ivory);margin:24px auto}

/* ============================================================
   TECHNOLOGY — Italy · China axis + feature rows
   ============================================================ */
.tech .section-head h2 em{font-style:italic}
.axis{max-width:var(--maxw);margin:clamp(30px,5vw,60px) auto 0;
  display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(24px,5vw,64px);align-items:center}
.axis-col .axis-city{display:block;font-size:11px;letter-spacing:2.6px;text-transform:uppercase;
  opacity:.7;margin-bottom:16px}
.axis-col p{font-size:clamp(15px,1.3vw,17px);opacity:.78;max-width:34ch}
.axis-mid{align-self:stretch;display:flex;justify-content:center}
.axis-thread{width:1px;background:linear-gradient(180deg,transparent,rgba(30,47,82,.5),transparent);
  display:block;min-height:100%}
.axis-result{text-align:center;max-width:var(--maxw);margin:clamp(34px,5vw,54px) auto 0;
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.4vw,30px);letter-spacing:-.4px}

.tech-rows{margin-top:clamp(40px,6vw,80px)}
.tech-rows .row{grid-template-columns:56px .5fr 1fr}
.tech-rows .row .n{font-family:var(--serif);font-style:normal;font-size:26px;opacity:.5;color:var(--silk)}
.tech-more{max-width:var(--maxw);margin:36px auto 0}

/* the clean-scent claim — its own quiet moment */
.scent{padding:clamp(80px,10vw,130px) var(--pad);text-align:center;
  background:radial-gradient(120% 100% at 50% 0%, #EEE6D6 0%, var(--ivory) 60%)}
.scent-inner{max-width:24ch;margin:0 auto}
.scent-mark{display:block;font-size:30px;color:var(--silk);opacity:.8;margin-bottom:22px}
.scent h2{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4vw,52px);
  line-height:1.1;letter-spacing:-.8px}
.scent p{margin:26px auto 0;max-width:40ch;font-size:clamp(15px,1.3vw,17px);opacity:.75}

/* ============================================================
   CONTROL & IDENTITY (uses .plate) — list + emphasis
   ============================================================ */
.plate .body .label{margin-bottom:22px}
.control-list{list-style:none;margin:24px 0 8px;padding:0}
.control-list li{position:relative;padding-left:26px;font-size:clamp(15px,1.25vw,17px);
  opacity:.8;margin:12px 0;max-width:44ch}
.control-list li::before{content:'';position:absolute;left:0;top:.62em;width:12px;height:1px;background:var(--navy);opacity:.5}
.plate .body .emph{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.1vw,26px);
  line-height:1.32;opacity:1;margin-top:26px;max-width:24ch}

/* ============================================================
   ÉDITIONS — grid
   ============================================================ */
.edition-grid{max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.edition-fig{aspect-ratio:3/4;overflow:hidden;background:var(--sand);border-radius:2px;margin-bottom:26px}
.edition-fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.edition:hover .edition-fig img{transform:scale(1.04)}
.edition-tag{font-size:10.5px;letter-spacing:2.2px;text-transform:uppercase;opacity:.62}
.edition h3{font-family:var(--serif);font-weight:300;font-size:clamp(22px,1.9vw,28px);
  line-height:1.1;letter-spacing:-.5px;margin:12px 0 12px}
.edition p{font-size:15px;opacity:.76;max-width:36ch}
.edition .edition-items{font-family:var(--serif);font-style:italic;opacity:.62;font-size:14.5px;margin:16px 0 18px}

/* hero product spacing */
.product .plate .body .label{display:block;margin:16px 0 20px}

/* ============================================================
   RESERVE — thank-you popup
   ============================================================ */
.thanks{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(21,31,56,.55);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .4s var(--ease)}
.thanks[hidden]{display:none}          /* hidden attr must actually hide it */
.thanks:not(.show){pointer-events:none} /* never intercept clicks unless shown */
.thanks.show{opacity:1;pointer-events:auto}
.thanks-card{position:relative;max-width:440px;width:100%;text-align:center;
  background:var(--offwhite);color:var(--navy);border-radius:4px;padding:clamp(40px,6vw,60px) clamp(28px,5vw,52px);
  box-shadow:0 40px 100px rgba(21,31,56,.4);
  transform:translateY(16px) scale(.97);transition:transform .5s var(--ease)}
.thanks.show .thanks-card{transform:none}
.thanks-mark{display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:0 auto 24px;border-radius:999px;
  border:1px solid rgba(30,47,82,.3)}
.thanks-mark::after{content:'';width:16px;height:9px;margin-top:-4px;
  border-left:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);
  transform:rotate(-45deg)}
.thanks-card h3{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.6vw,38px);
  line-height:1.1;letter-spacing:-.6px;margin-bottom:16px}
.thanks-card p{font-size:15px;opacity:.72;max-width:34ch;margin:0 auto 30px}
.thanks-close{background:var(--navy);color:var(--ivory);border:none;cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  padding:13px 30px;border-radius:999px;transition:background .3s var(--ease)}
.thanks-close:hover{background:var(--ink)}

/* closing alt CTA */
.close-alt{margin-top:30px}
.close-alt a{color:var(--ivory);opacity:.7;text-decoration:none;font-size:12px;letter-spacing:1.4px;
  text-transform:uppercase;transition:opacity .3s var(--ease)}
.close-alt a:hover{opacity:1}

/* signed founder note */
.note{max-width:640px;margin:0 auto;text-align:center}
.note p{font-family:var(--serif);font-style:italic;font-size:clamp(19px,2.2vw,26px);
  line-height:1.45;opacity:.85}
.note .sig{margin-top:26px;font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.55}

/* ============================================================
   WAITLIST
   ============================================================ */
.waitlist{position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(150deg,var(--navy),var(--ink));color:var(--ivory);
  padding:clamp(110px,14vw,180px) var(--pad)}
.waitlist .sheen{position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:radial-gradient(60% 50% at 72% 12%, rgba(128,149,183,.34),transparent 60%)}
.waitlist .inner{position:relative;max-width:620px;margin:0 auto}
.waitlist .label{color:var(--ivory);opacity:.6;margin-bottom:26px}
.waitlist h2{font-family:var(--serif);font-weight:300;
  font-size:clamp(30px,4.6vw,60px);line-height:1.1;letter-spacing:-.8px;margin-bottom:20px}
.waitlist .sub{opacity:.72;max-width:40ch;margin:0 auto 44px;font-size:16px}
.form{display:flex;max-width:440px;margin:0 auto;gap:0;
  border-bottom:1px solid rgba(243,239,230,.4);transition:opacity .5s var(--ease)}
.form input{flex:1;background:transparent;border:none;outline:none;color:var(--ivory);
  font-family:var(--sans);font-size:16px;font-weight:300;padding:14px 4px}
.form input::placeholder{color:rgba(243,239,230,.5)}
.form button{background:transparent;border:none;color:var(--ivory);cursor:pointer;
  font-family:var(--sans);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  padding:0 10px;opacity:.85;transition:opacity .3s var(--ease)}
.form button:hover{opacity:1}
.form button:disabled{opacity:.4;cursor:default}
.form-msg{margin-top:26px;min-height:1.4em;font-family:var(--serif);font-style:italic;font-size:20px;
  opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.form-msg.show{opacity:1;transform:none}
.form-msg.error{font-style:normal;font-family:var(--sans);font-size:14px;opacity:.85;color:#F0D9D2}
.form.hide{opacity:0;pointer-events:none;height:0;overflow:hidden;margin:0;border:none}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{padding:clamp(48px,6vw,72px) var(--pad);background:var(--ivory);
  display:flex;justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  border-top:1px solid rgba(30,47,82,.1)}
.footer .brand img{height:22px}
.footer .brand .wordmark{font-size:20px}
.footer .fnav{display:flex;gap:24px;flex-wrap:wrap}
.footer .fnav a{text-decoration:none;font-size:11px;letter-spacing:1.6px;text-transform:uppercase;
  opacity:.6;transition:opacity .3s var(--ease)}
.footer .fnav a:hover{opacity:1}
.footer .fnote{font-size:11.5px;opacity:.5;letter-spacing:.4px;flex-basis:100%;text-align:center;margin-top:6px}

/* ============================================================
   SCROLL REVEALS
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-silk{order:-1;height:auto;padding-top:110px}
  .silk-o{width:min(52%,300px)}
  .hero-copy{padding:36px 0 80px}
  .plate,.plate.flip{grid-template-columns:1fr;direction:ltr;gap:28px}
  .plate .fig{aspect-ratio:16/11;max-height:60vh}
  .axis{grid-template-columns:1fr;gap:28px}
  .axis-mid{display:none}
  .axis-col{padding:24px 0;border-top:1px solid rgba(30,47,82,.16)}
  .edition-grid{grid-template-columns:1fr;gap:52px}
  .edition-fig{aspect-ratio:16/11;max-height:56vh}
  .nav-tagline{display:none}
  /* Technology rows: stack heading over text (was 3 skinny columns → overlap) */
  .tech-rows .row{grid-template-columns:1fr;gap:14px}
}
@media(max-width:640px){
  .nav-links{display:none}
  .nav-links.open{display:flex;position:absolute;top:100%;right:var(--pad);left:var(--pad);
    flex-direction:column;gap:20px;padding:26px;background:var(--offwhite);
    border-radius:6px;box-shadow:0 20px 50px rgba(30,47,82,.14)}
  .nav-toggle{display:block}
  .row{grid-template-columns:1fr;gap:12px}
  .row .n{display:none}
}

/* ------------------------------------------------------------
   Mobile tap targets: comfortable finger-sized hit areas.
   Padding only, so nothing moves visually; the text stays put
   and the touchable box grows around it.
   ------------------------------------------------------------ */
@media(hover:none),(max-width:900px){
  .nav-toggle{padding:14px 12px;margin:-14px -12px}
  .footer .fnav a{padding:11px 0;display:inline-block}
  .inv-mail{padding:9px 0;display:inline-block}
  .lang-btn{min-height:34px}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .scrollcue .l{animation:none}
  .plate .fig .wipe{transition:none;transform:scaleX(0)}
  .silk-o,.silk-o-sheen{animation:none !important;transform:none !important}
}

/* ============================================================
   V2 — 2026 REVAMP
   New positioning: belief and ambition, not mechanism.
   Adds: 3-language toggle, triad rhythm, investors block,
   stacked join form, Simplified Chinese typography.
   ============================================================ */

/* ---------- 3-language toggle (EN / CA / 中文) ---------- */
.lang-toggle{display:inline-flex;align-items:center;gap:0;padding:0;overflow:hidden;
  background:none;border:1px solid rgba(30,47,82,.28);border-radius:999px}
.lang-btn{background:none;border:none;cursor:pointer;color:var(--navy);
  font-family:var(--sans);font-size:10.5px;letter-spacing:1.4px;line-height:1;
  padding:8px 11px;opacity:.42;transition:opacity .3s var(--ease),background .3s var(--ease)}
.lang-btn:hover{opacity:.8}
.lang-btn.on{opacity:1;background:rgba(30,47,82,.09)}
.lang-btn[data-lang="zh"]{font-family:'Noto Sans SC',var(--sans);letter-spacing:.5px}

/* ---------- 2 · a different starting point (in the navy band) ---------- */
.throughline .label.plain{display:inline-block;margin-bottom:34px;color:var(--ivory);opacity:.6}

/* ---------- 3 · what comes next ---------- */
.triad{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,56px);
  padding:clamp(26px,3.5vw,44px) 0;
  border-top:1px solid rgba(30,47,82,.14);border-bottom:1px solid rgba(30,47,82,.14)}
.triad-item{font-family:var(--serif);font-weight:300;color:var(--navy);
  font-size:clamp(21px,2.5vw,33px);line-height:1.22;letter-spacing:-.4px}
.next-body{max-width:56ch;margin:clamp(38px,5vw,58px) auto 0;text-align:center;
  font-size:clamp(16px,1.4vw,19px);line-height:1.7;opacity:.8}
.status-line{max-width:56ch;margin:26px auto 0;text-align:center;
  font-family:var(--serif);font-style:italic;font-size:clamp(16px,1.5vw,20px);
  color:var(--navy);opacity:.6}

/* ---------- 4 · the opportunity ahead (in the sand band) ---------- */
.band .label.plain{display:inline-block;margin-bottom:30px;opacity:.55}
.band .band-lead{font-family:var(--sans);font-style:normal;font-weight:300;
  font-size:clamp(16px,1.5vw,19px);line-height:1.7;letter-spacing:0;
  max-width:58ch;margin:0 auto 36px;opacity:.78}

/* ---------- 5 · join form (name / e-mail / country) ---------- */
.form.form-stack{display:flex;flex-direction:column;gap:0;max-width:420px;border-bottom:none}
.form.form-stack input{width:100%;flex:none;padding:15px 2px;
  border-bottom:1px solid rgba(243,239,230,.32);transition:border-color .3s var(--ease)}
.form.form-stack input:focus{border-bottom-color:rgba(243,239,230,.8)}
.form.form-stack button{align-self:center;margin-top:32px;padding:15px 34px;
  background:var(--ivory);color:var(--navy);border-radius:999px;opacity:1;
  font-size:12px;letter-spacing:1.6px;transition:background .3s var(--ease),transform .3s var(--ease)}
.form.form-stack button:hover{background:#fff;transform:translateY(-2px)}
.form.form-stack button:disabled{opacity:.45;transform:none}

/* ---------- 6 · investors and strategic partners ---------- */
.investors{background:var(--offwhite);text-align:center}
.investors-inner{max-width:660px;margin:0 auto}
.investors .label{margin-bottom:28px}
.investors h2{font-family:var(--serif);font-weight:300;color:var(--navy);
  font-size:clamp(26px,3.4vw,44px);line-height:1.12;letter-spacing:-.8px;margin-bottom:24px}
.investors p{font-size:clamp(15px,1.35vw,17.5px);line-height:1.7;opacity:.78;
  max-width:52ch;margin:0 auto 36px}
.investors .inv-note{font-size:11.5px;letter-spacing:2.2px;text-transform:uppercase;
  opacity:.48;margin:26px auto 0}
.inv-contacts{display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(26px,5vw,64px);margin-top:40px;padding-top:32px;
  border-top:1px solid rgba(30,47,82,.14)}
.inv-person{display:flex;flex-direction:column;gap:7px}
.inv-name{font-family:var(--serif);font-size:19px;color:var(--navy)}
.inv-mail{font-size:13px;letter-spacing:.3px;color:var(--navy);opacity:.6;
  text-decoration:none;border-bottom:1px solid rgba(30,47,82,.25);
  padding-bottom:2px;transition:opacity .3s var(--ease)}
.inv-mail:hover{opacity:1}

/* ---------- Simplified Chinese typography ---------- */
html[lang="zh"]{
  --serif:'Noto Serif SC','Songti SC','STSong',serif;
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
}
html[lang="zh"] h1,html[lang="zh"] h2,html[lang="zh"] h3,
html[lang="zh"] .triad-item,html[lang="zh"] .band p{letter-spacing:0}
html[lang="zh"] .hero h1{line-height:1.3}
html[lang="zh"] .throughline p{line-height:1.4}
html[lang="zh"] .label{letter-spacing:1.6px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .triad{grid-template-columns:1fr;gap:18px;text-align:center}
  .inv-contacts{gap:26px}
}

/* ============================================================
   IRIDESCENT LIGHT FIELDS
   Abstract "material and light" built from layered gradients
   rather than photographs: exact brand colours, no file weight,
   crisp at any size. Same technique already used for the hero
   background, the silk sheens and the grain overlay.

   .lightfield            base component
   .lightfield.dark       variant for the navy sections
   .field-band            the wide full-bleed band
   .field-bg              absolute background layer
   ============================================================ */
.lightfield{position:relative;overflow:hidden;isolation:isolate;background:var(--offwhite)}

/* the opal itself: soft colour blooms + an oil-slick sweep, heavily blurred */
.lightfield::before{
  content:'';position:absolute;inset:-25%;
  background:
    radial-gradient(38% 52% at 20% 42%, rgba(127,212,208,.60), transparent 63%),
    radial-gradient(36% 48% at 43% 66%, rgba(185,167,224,.55), transparent 63%),
    radial-gradient(40% 52% at 68% 36%, rgba(233,169,192,.50), transparent 63%),
    radial-gradient(34% 46% at 87% 62%, rgba(232,196,138,.46), transparent 63%),
    conic-gradient(from 205deg at 58% 46%,
      rgba(127,212,208,.30), rgba(185,167,224,.26), rgba(233,169,192,.24),
      rgba(232,196,138,.26), rgba(128,149,183,.24), rgba(127,212,208,.30)),
    radial-gradient(62% 72% at 50% 50%, rgba(128,149,183,.26), transparent 72%);
  filter:blur(42px) saturate(118%);
  animation:fieldDrift 26s ease-in-out infinite;
}
/* a slow sheen sweeping across, echoing the silk O */
.lightfield::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(112deg,
    transparent 32%, rgba(255,255,255,.00) 42%,
    rgba(255,255,255,.42) 50%, rgba(255,255,255,.00) 58%, transparent 68%);
  background-size:260% 260%;
  mix-blend-mode:soft-light;
  animation:fieldSheen 14s ease-in-out infinite;
}
@keyframes fieldDrift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-3%,2%,0) scale(1.06)}
}
@keyframes fieldSheen{
  0%      {background-position:120% 0%}
  55%,100%{background-position:-40% 100%}
}

/* dark variant — sits over navy, adds iridescence without washing it out */
.lightfield.dark{background:transparent}
.lightfield.dark::before{
  filter:blur(56px) saturate(140%);
  mix-blend-mode:screen;   /* let the aqua/rose/gold read as colour, not haze */
  opacity:.5;
}
.lightfield.dark::after{mix-blend-mode:overlay;opacity:.5}

/* the wide full-bleed band in "what comes next" */
.field-band{
  height:clamp(200px,26vw,340px);
  margin:clamp(52px,7vw,88px) calc(var(--pad) * -1) 0;
  /* fade the ivory page back in at both edges so it never looks pasted on */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}

/* real silk photograph inside the band; the light field beneath keeps
   its edges alive and the ivory backdrop of the photo blends into the page */
.field-band{height:clamp(180px,22vw,320px)}
.field-photo{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;object-position:center;
  mix-blend-mode:multiply;   /* drops the photo's ivory ground into the page ivory */
  filter:saturate(108%) url(#silkflow);
  transform-origin:55% 50%;
  animation:silkBreathe 22s ease-in-out infinite;
  will-change:transform;
}
.silk-flow-defs{position:absolute;width:0;height:0;overflow:hidden}
/* a very slow drift and swell, like fabric settling in still air */
@keyframes silkBreathe{
  0%,100%{transform:scale(1.04) translate3d(0,0,0)}
  50%    {transform:scale(1.09) translate3d(-1.5%,1%,0)}
}
@media(prefers-reduced-motion:reduce){
  .field-photo{animation:none;filter:saturate(108%)}
}

/* absolute background layer for the navy sections */
.field-bg{position:absolute;inset:0;pointer-events:none;z-index:0}
.throughline .inner,.throughline p,.throughline .label,.throughline .hook-body,
.waitlist .inner{position:relative;z-index:1}

@media(prefers-reduced-motion:reduce){
  .lightfield::before,.lightfield::after{animation:none}
}