/* ============================================================
   LegiCycle — editorial. cinematic. quiet luxury.
   ============================================================ */
:root{
  --navy:#0B1B33;
  --navy-deep:#06112A;
  --ink:#0A0F1A;
  --gold:#B8982A;
  --gold-soft:#C9AA3F;
  --cream:#FAF8F3;
  --paper:#F4EFE6;
  --rule:rgba(11,27,51,.16);
  --serif:"Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --hair:"Cormorant Garamond", "Instrument Serif", Georgia, serif;
  --display:"Cabinet Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body:"Satoshi", "Helvetica Neue", system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
::selection{background:var(--gold);color:var(--cream)}

/* ============================================================
   SCROLL PROGRESS BAR — gold hairline tracking page scroll
   ============================================================ */
.scrollbar{
  position:fixed;left:0;top:0;
  width:100%;height:2px;
  z-index:60;
  pointer-events:none;
  background:transparent;
}
.scrollbar__fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, rgba(184,152,42,.4) 0%, var(--gold-soft) 50%, rgba(242,210,124,.95) 100%);
  box-shadow:0 0 14px rgba(201,170,63,.55);
  transform-origin:left center;
  will-change:width;
}

/* ============================================================
   NAV — minimal
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;
  mix-blend-mode:normal;
  transition:background .4s ease, backdrop-filter .4s ease, border-color .4s ease, color .4s ease;
  border-bottom:1px solid transparent;
}
/* default (light theme over light sections) */
.nav.is-scrolled.is-light{
  background:rgba(250,248,243,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--rule);
}
.nav.is-scrolled.is-dark{
  background:rgba(6,17,42,.55);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.nav__brand{display:flex;align-items:center;gap:12px;color:var(--cream)}
.nav.is-light .nav__brand{color:var(--ink)}
.nav__mark{
  width:30px;height:30px;
  filter:brightness(0) invert(1);
  transform-origin:50% 50%;
  will-change:transform;
  transition:filter .4s ease;
}
.nav.is-light .nav__mark{filter:none}
.nav__word{
  font-family:var(--serif);
  font-size:22px;letter-spacing:.01em;
}
.nav__actions{
  display:flex; align-items:center; gap:10px;
}
.nav__login{
  font-family:var(--body);font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream);
  padding:10px 14px;
  border-radius:999px;
  transition:color .25s ease, opacity .25s ease;
  opacity:.85;
}
.nav__login:hover{ opacity:1; }
.nav.is-light .nav__login{ color:var(--ink); }
.nav__cta{
  font-family:var(--body);font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--cream);
  padding:10px 18px;border:1px solid rgba(250,248,243,.55);
  border-radius:999px;
  transition:all .3s ease;
}
.nav.is-light .nav__cta{color:var(--ink);border-color:rgba(11,27,51,.6)}
.nav.is-dark .nav__cta:hover{background:var(--cream);color:var(--navy)}
.nav.is-light .nav__cta:hover{background:var(--ink);color:var(--cream)}

/* ============================================================
   HERO — cinematic golden hour, FULLSCREEN, screen-wide editorial type
   ============================================================ */
.hero{
  position:relative;
  height:100vh;height:100svh;height:100dvh;
  min-height:100vh;
  width:100%;
  overflow:hidden;
  background:#06102a;
}
.hero__media{position:absolute;inset:0;z-index:0}
.engine__credit{
  position:absolute;right:18px;bottom:14px;z-index:5;
  margin:0;font-family:var(--body,'Satoshi',sans-serif);
  font-size:11px;letter-spacing:.04em;color:rgba(250,248,243,.55);
}
.engine__credit a{color:rgba(250,248,243,.85);text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:2px}
.engine__credit a:hover{color:#E8C260}
.hero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:50% 55%;
  transform:none;
  animation:none;
  will-change:auto;
  filter:saturate(1.1) contrast(1.04);
}
@keyframes kenburns{
  0%  {transform:scale(1.02) translate(0,0)}
  100%{transform:scale(1.12) translate(-1%, -1.5%)}
}
/* Warm glow around the sun, reinforces the 'behind the title' feeling */
.hero__sunglow{ display:none }
.hero__sunglow--off{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(38vw 24vw at 50% 56%, rgba(255,214,140,.38) 0%, rgba(255,190,96,.12) 35%, rgba(0,0,0,0) 70%),
    radial-gradient(14vw 9vw at 50% 56%, rgba(255,240,200,.55) 0%, rgba(255,210,130,.0) 70%);
  mix-blend-mode:screen;
}
.hero__veil{
  position:absolute;inset:0;
  background:
    /* a touch of top shadow for nav legibility */
    linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,.0) 18%, rgba(0,0,0,.0) 55%, rgba(6,17,42,.45) 80%, rgba(6,17,42,.92) 100%),
    /* corner vignette for focus */
    radial-gradient(90% 70% at 50% 55%, rgba(0,0,0,0) 45%, rgba(0,0,0,.35) 100%);
}
.hero__inner{
  position:relative;z-index:2;
  height:100%;width:100%;
  max-width:min(1560px, 96vw);
  margin:0 auto;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:18vh 3vw 0;
  text-align:left;
  align-items:stretch;
}
@media(max-width:760px){.hero__inner{padding:14vh 5vw 0;align-items:center;text-align:center}}
.hero__eyebrow[hidden],.hero__sub[hidden]{display:none !important}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--body);
  font-size:clamp(11px,.92vw,14px);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(250,248,243,.8);
  margin:0 0 1.4em;
  padding:.55em 1em;
  border:1px solid rgba(250,248,243,.22);
  border-radius:999px;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  background:rgba(11,17,30,.18);
}
.hero__eyebrow-mark{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold-soft);
  box-shadow:0 0 12px rgba(242,210,124,.85);
}
.hero__sub{
  margin:.9em 0 0;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,1.5vw,26px);
  color:rgba(250,248,243,.86);
  letter-spacing:-.005em;
  text-shadow:0 4px 24px rgba(0,0,0,.5);
}
.hero__title{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  color:var(--cream);
  /* larger — fills the top band but still fits on one line */
  font-size:clamp(54px, 9vw, 168px);
  line-height:1.02;
  letter-spacing:-.028em;
  text-shadow:0 8px 60px rgba(0,0,0,.55);
  width:100%;
  text-align:left;
}
.hero__line{display:block;padding:.06em 0;white-space:nowrap}
.hero__line--top{text-align:left}
@media(max-width:760px){
  .hero__title{text-align:center;font-size:clamp(36px,7.6vw,64px)}
  .hero__line{white-space:normal;text-align:center}
}
.hero__line > span{display:inline-block;will-change:transform;padding:0 .02em}
/* Gold italic 'Policy,' — luminous logo-gold engineered to read bright
   on top of the sunburst. Same family as the editorial gold rules,
   pushed brighter at the top to punch through the sun. */
.hero__line--em{display:inline-block;will-change:transform;position:relative;isolation:isolate}
.hero__line--em em{
  font-style:italic;
  color:#FFE066;
  background:linear-gradient(180deg,
    #FFFBE6 0%,
    #FFE066 28%,
    #F4C82A 60%,
    #D89F1B 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:
    drop-shadow(0 0 22px rgba(255,210,80,.55))
    drop-shadow(0 0 8px rgba(255,225,120,.7))
    drop-shadow(0 1px 0 rgba(34,16,2,.55))
    drop-shadow(0 3px 6px rgba(34,16,2,.45));
  padding:0 .06em .14em;
  display:inline-block;
  position:relative;
  z-index:2;
  transform: translateZ(0) scale(1.06);
  transform-origin: 50% 60%;
}
/* Soft warm bloom directly behind 'Policy,' — darkens the sunburst locally
   so the gold reads luminous, not washed out */
.hero__line--em::before{ display:none }

/* ============================================================
   CEO LETTER — editorial column
   ============================================================ */
.letter{
  position:relative;
  background:var(--cream);
  padding:22vh 0 14vh;
  overflow:hidden;
}
.letter__bg{
  position:absolute;inset:0;opacity:.07;
  pointer-events:none;
}
.letter__bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) contrast(1.05)}
.letter__inner{
  position:relative;
  max-width:780px;margin:0 auto;padding:0 28px;
}
.letter__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(44px,6.2vw,92px);
  line-height:.98;letter-spacing:-.022em;
  margin:0 0 .45em;color:var(--navy);
  position:relative;
  display:inline-block;
}
.letter__title-underline{
  display:block;
  width:100%;height:8px;
  margin-top:.18em;
  overflow:visible;
}
.letter__title-underline path{
  stroke:var(--gold);
  stroke-width:2;
  fill:none;
  stroke-linecap:round;
  stroke-dasharray:var(--ulLen, 600);
  stroke-dashoffset:var(--ulLen, 600);
}
.letter__pull{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(28px,3.6vw,52px);
  line-height:1.1;
  color:var(--gold);
  margin:0 0 1.4em;
  padding-left:1em;
  border-left:2px solid var(--gold);
  letter-spacing:-.005em;
}
.letter__lead{
  font-family:var(--serif);
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.45;
  color:var(--ink);
  margin:0 0 1.4em;
}
.letter__lead em{color:var(--gold);font-style:italic}
.letter__p{
  font-family:var(--serif);
  font-size:clamp(20px,1.65vw,26px);
  line-height:1.6;color:var(--ink);
  margin:0 0 1.4em;
}
.letter__close{margin-top:2vh}
.letter__intro{
  font-family:var(--serif);
  font-size:clamp(28px,3.2vw,44px);
  line-height:1.25;
  color:var(--navy);
  margin:0 0 1.2em;
  letter-spacing:-.005em;
}
.letter__intro .w{display:inline-block;will-change:transform,opacity,filter}
.letter__intro-sub{
  font-family:var(--body);
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.6;
  color:rgba(10,15,26,.78);
  max-width:62ch;
  margin:0 0 3em;
  letter-spacing:.005em;
}
.letter__sign{
  margin-top:3em;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,1.6vw,26px);
  color:var(--navy);
  line-height:1.4;
}
.letter__sign span{
  display:inline-block;
  font-style:normal;
  font-family:var(--body);
  font-size:.62em;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:.35em;
}

/* ============================================================
   BIG QUOTE — massive scroll-revealed pull quote between sections
   ============================================================ */
.bigquote{
  position:relative;
  padding:18vh 5vw;
  overflow:hidden;
  text-align:center;
}
.bigquote--cream{
  background:var(--cream);
  color:var(--navy);
}
.bigquote--gold{
  background:transparent;
  color:var(--cream);
  text-align:center;
}
.bigquote__text{
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(56px, 10.5vw, 180px);
  line-height:.92;
  letter-spacing:-.03em;
}
.bigquote__text em{
  font-style:italic;
  color:var(--gold);
  display:inline-block;
}
.bigquote--gold .bigquote__text em{
  color:var(--gold-soft);
}

/* ============================================================
   HOW IT WORKS — full logo moment
   ============================================================ */
.howitworks{
  background:var(--paper);
  padding:18vh 28px;
  text-align:center;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.howitworks__inner{max-width:1200px;margin:0 auto}
.howitworks__logo{
  display:block;margin:0 auto;
  width:min(78%,860px);height:auto;
}
.howitworks__caption{
  margin:5vh 0 0;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(28px,3.4vw,46px);
  color:var(--navy);letter-spacing:-.005em;
}

/* ============================================================
   GPS — Apple-style pinned wordmark
   ============================================================ */
.gps{
  position:relative;
  background:var(--ink);
  color:var(--cream);
  padding-bottom:24vh;
}
.gps__pin{
  position:relative;
  height:200vh; /* scroll runway for pin */
}
/* Sticky stage hosts the globe + word + eyebrow */
.gps__stage{
  position:sticky;top:0;
  height:100vh;margin:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 80% at 50% 40%, #0E1A33 0%, #0A0F1A 60%, #06091A 100%);
  overflow:hidden;
  isolation:isolate;
}
.gps__globe{
  position:absolute;
  width:min(78vh, 64vw);
  height:min(78vh, 64vw);
  z-index:0;
  opacity:.92;
  filter:drop-shadow(0 0 60px rgba(232,194,96,.12));
}
.gps__globe-rot{
  transform-origin:center;
  animation:gpsSpin 80s linear infinite;
}
.gps__globe-mer{
  transform-origin:center;
  animation:gpsSpin 60s linear infinite reverse;
}
@keyframes gpsSpin{
  0%  {transform:rotate(0deg)}
  100%{transform:rotate(360deg)}
}
.gps__globe-dots circle{
  filter:drop-shadow(0 0 6px rgba(244,216,122,.9));
  animation:gpsDotPulse 3.6s ease-in-out infinite;
}
.gps__globe-dots circle:nth-child(2){animation-delay:.4s}
.gps__globe-dots circle:nth-child(3){animation-delay:.8s}
.gps__globe-dots circle:nth-child(4){animation-delay:1.2s}
.gps__globe-dots circle:nth-child(5){animation-delay:1.6s}
.gps__globe-dots circle:nth-child(6){animation-delay:2.0s}
.gps__globe-dots circle:nth-child(7){animation-delay:2.4s}
.gps__globe-dots circle:nth-child(8){animation-delay:2.8s}
@keyframes gpsDotPulse{
  0%,100%{opacity:.55;r:2.2}
  50%   {opacity:1;   r:3.4}
}
.gps__globe-arcs path{
  stroke-dasharray:280;
  stroke-dashoffset:280;
  opacity:0;
  animation:gpsArcDraw 6s ease-in-out infinite;
}
.gps__globe-arcs path:nth-child(1){animation-delay:0s}
.gps__globe-arcs path:nth-child(2){animation-delay:.9s}
.gps__globe-arcs path:nth-child(3){animation-delay:1.8s}
.gps__globe-arcs path:nth-child(4){animation-delay:2.7s}
.gps__globe-arcs path:nth-child(5){animation-delay:3.6s}
.gps__globe-arcs path:nth-child(6){animation-delay:4.5s}
@keyframes gpsArcDraw{
  0%   {stroke-dashoffset:280; opacity:0}
  20%  {opacity:1}
  60%  {stroke-dashoffset:0;   opacity:1}
  80%  {stroke-dashoffset:0;   opacity:.6}
  100% {stroke-dashoffset:-280; opacity:0}
}
@media (prefers-reduced-motion: reduce){
  .gps__globe-rot,.gps__globe-mer,.gps__globe-dots circle,.gps__globe-arcs path{
    animation:none;
  }
  .gps__globe-arcs path{stroke-dashoffset:0;opacity:.7}
}

.gps__word{
  position:relative;z-index:2;
  margin:0;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(110px,22vw,360px);
  letter-spacing:.02em;
  line-height:1;
  white-space:nowrap;
  text-align:center;
  text-shadow:0 2px 30px rgba(6,9,26,.85), 0 0 80px rgba(6,9,26,.7);
}
.gps__char{
  display:inline-block;
  font-style:italic;
  background:linear-gradient(180deg,
    #FFF1B8 0%,
    #F4D87A 35%,
    #E8C25A 70%,
    #C9A33C 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  transform-origin:50% 50%;
  will-change:transform,opacity;
  padding:0 .03em;
}
.gps__eyebrow{
  position:absolute;
  bottom:9vh;left:50%;transform:translateX(-50%);
  z-index:3;margin:0;
  display:inline-flex;align-items:center;gap:14px;
  font-family:var(--body);
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:rgba(244,216,122,.85);
}
.gps__rule{
  display:inline-block;width:42px;height:1px;
  background:linear-gradient(90deg, rgba(244,216,122,0), #F4D87A);
}
.gps__copy{
  position:relative;
  max-width:880px;margin:0 auto;padding:6vh 28px 0;
  text-align:center;
}

.gps__lede{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px,2.4vw,30px);
  line-height:1.5;color:rgba(250,248,243,.92);
  margin:0 0 2em;
}
.gps__strike{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin:0 auto;
  font-family:var(--body);font-size:14px;
  letter-spacing:.08em;text-transform:uppercase;
  color:rgba(250,248,243,.78);
  transition:color 1.2s ease;
  padding:0 2px;
}
.gps__clock{
  flex:0 0 auto;
  width:56px;height:56px;
  filter:drop-shadow(0 0 18px rgba(242,210,124,.45));
  will-change:transform;
}
.gps__clock-hour,.gps__clock-minute{
  /* svgOrigin is set by gsap; no CSS transform-origin needed */
  will-change:transform;
}
@media (max-width:760px){
  .gps__clock{width:40px;height:40px}
}
.gps__strike-text{position:relative;z-index:1}
.gps__strike-line{
  position:absolute;
  left:calc(56px + 14px);top:calc(50% - 1px);
  width:calc(100% - 56px - 14px - 4px);height:2px;
  background:linear-gradient(90deg, rgba(184,152,42,.0) 0%, var(--gold-soft) 10%, #F2D27C 50%, var(--gold-soft) 90%, rgba(184,152,42,.0) 100%);
  transform:scaleX(0);
  transform-origin:left center;
  z-index:2;
  pointer-events:none;
  box-shadow:0 0 14px rgba(242,210,124,.7), 0 0 4px rgba(242,210,124,.9);
}
@media (max-width:760px){
  .gps__strike-line{left:calc(40px + 14px); width:calc(100% - 40px - 14px - 4px)}
}
.gps__strike.is-struck{color:rgba(250,248,243,.42)}

/* ============================================================
   CLARITY AI — frosted glass wordmark, l-extension, sharp cuts
   ============================================================ */
.clarity{
  position:relative;
  background:var(--navy-deep);
  color:var(--cream);
  /* no overflow:hidden — it kills position:sticky inside */
  isolation:isolate;
}
.clarity__bg{
  position:absolute;inset:0;
  z-index:0;
  pointer-events:none;
}
.clarity__bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.22;filter:blur(3px) saturate(.7) contrast(1.08);
}
.clarity::before{
  content:"";
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(184,152,42,.08), transparent 70%),
    linear-gradient(180deg, rgba(6,17,42,.55), rgba(6,17,42,.92));
}

/* PIN: the wordmark stays fixed for ~250vh of scroll */
.clarity__pin{
  position:relative;
  height:300vh;
  z-index:2;
}
.clarity__sticky{
  position:sticky;top:0;
  height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:visible;
}
/* eyebrow label above the wordmark, hairline rules on either side */
.clarity__eyebrow{
  position:absolute;
  top:calc(50% - 0.62em * clamp(110px,22vw,360px) / 16);
  top:22vh;
  left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:14px;
  width:min(720px,80vw);
  margin:0;
  font-family:var(--body);
  font-size:clamp(11px,.92vw,14px);
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(250,248,243,.65);
  justify-content:center;
  opacity:0;
}
.clarity__eyebrow-text em{
  font-family:var(--serif);
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  font-size:1.2em;
  color:var(--gold-soft);
  padding-left:.12em;
}
.clarity__rule{
  flex:1 1 auto;height:1px;
  background:linear-gradient(90deg, rgba(250,248,243,0), rgba(250,248,243,.35), rgba(250,248,243,0));
  max-width:140px;
}
.clarity__word{
  margin:0;
  font-family:var(--hair);
  font-weight:300;
  font-style:italic;
  font-size:clamp(110px,22vw,360px);
  line-height:.9;
  letter-spacing:-.03em;
  color:rgba(250,248,243,.92);
  text-shadow:0 30px 80px rgba(0,0,0,.45);
  white-space:nowrap;
  position:relative;
  -webkit-font-smoothing:antialiased;
  /* start blurry; JS scrubs this to 0 as you scroll = clarity made literal */
  filter:blur(22px);
  will-change:filter;
}
/* Soft focus-sweep highlight that travels across the wordmark as it sharpens.
   Sibling of .clarity__word so it sits in clean stacking context against the dark bg. */
.clarity__lens{
  position:absolute;
  top:18%;bottom:18%;
  left:0;width:24%;
  background:linear-gradient(90deg,
    rgba(255,248,220,0) 0%,
    rgba(255,248,220,.10) 25%,
    rgba(255,255,240,.55) 45%,
    rgba(255,255,220,.90) 50%,
    rgba(255,248,220,.55) 55%,
    rgba(255,248,220,.10) 75%,
    rgba(255,248,220,0) 100%);
  pointer-events:none;
  will-change:transform;
  z-index:3;
  filter:blur(6px);
  transform:translateX(-120%);
}
.cl-c{
  display:inline-block;
  transform-origin:50% 100%;
  will-change:transform,opacity,filter;
}
.cl-l{
  position:relative;
  display:inline-block;
  /* match the same color/weight as the rest of the wordmark — no bolding */
  color:inherit;
  font-weight:inherit;
  z-index:3;
}
.cl-flourish{
  /* sized to the wordmark; sits under the l descender, draws calligraphically */
  position:absolute;
  left:50%;
  bottom:-2vw;
  width:14vw;
  max-width:280px;
  height:auto;
  transform:translateX(-180%);
  pointer-events:none;
  overflow:visible;
  z-index:1;
  filter:drop-shadow(0 0 14px rgba(250,248,243,.22));
}
@media (max-width:760px){
  .cl-flourish{width:18vw; transform:translateX(-200%); bottom:-3vw}
}
.cl-flourish__path{
  stroke-dasharray:var(--flourLen, 800);
  stroke-dashoffset:var(--flourLen, 800);
  transition:none;
}
.clarity__sup{
  font-family:var(--display);font-weight:900;
  font-size:.18em;
  letter-spacing:.04em;
  color:var(--gold-soft);
  vertical-align:super;
  margin-left:.18em;
  font-style:normal;
}

/* COPY: appears AFTER the pinned wordmark */
.clarity__copy{
  position:relative;z-index:4;
  max-width:880px;margin:0 auto;padding:8vh 28px 4vh;
  display:flex;flex-direction:column;gap:2em;
}
.clarity__copy--after{padding:6vh 28px 8vh}
.clarity__p{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,2.8vw,40px);
  line-height:1.35;
  color:rgba(250,248,243,.95);
  margin:0;
  text-align:center;
  letter-spacing:-.005em;
}
.clarity__p strong{
  font-weight:400;font-style:italic;
  color:var(--gold-soft);
}

/* the joke as a bomb line */
.jokequote{
  position:relative;z-index:4;
  padding:8vh 4vw 12vh;
  text-align:left;
  max-width:1400px;margin:0 auto;
}
.jokequote__text{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(60px,9.5vw,160px);
  line-height:.98;
  letter-spacing:-.025em;
  margin:0;
  color:var(--cream);
  padding-left:0;
}
.jokequote__text:nth-child(1){padding-left:0}
.jokequote__text:nth-child(2){padding-left:14%}
.jokequote__text:nth-child(3){padding-left:28%}
.jokequote__text:nth-child(4){padding-left:42%}
.jokequote__text em{
  font-style:italic;
  color:var(--gold-soft);
  background:linear-gradient(180deg, #F2D27C 0%, #D6B045 50%, #8C6E18 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* pass-the-bar callout */
.barquote{
  position:relative;z-index:4;
  padding:8vh 4vw 18vh;
  text-align:right;
  max-width:1400px;margin:0 auto;
}
.barquote__kicker{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(20px,2vw,28px);
  color:rgba(250,248,243,.55);
  margin:0 0 .4em;
  letter-spacing:.005em;
}
.barquote__text{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(68px,10.5vw,180px);
  line-height:.94;letter-spacing:-.028em;
  margin:0;color:var(--cream);
}
.barquote__text em{
  font-style:italic;
  background:linear-gradient(180deg, #F2D27C 0%, #D6B045 50%, #8C6E18 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ============================================================
   LEGICYCLE ENGINE — cinematic night Capitol full-bleed
   ============================================================ */
.engine{
  position:relative;
  background:#020611;
  color:var(--cream);
  padding:0;
  overflow:hidden;
  isolation:isolate;
}
.engine__bg{
  position:absolute;inset:0;z-index:0;
}
.engine__bg img{
  width:100%;height:100%;object-fit:cover;
  object-position:center 35%;
  filter:saturate(1.05) contrast(1.08) brightness(1);
}
.engine__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(85% 65% at 50% 35%, rgba(0,0,0,0) 0%, rgba(2,6,17,.25) 60%, rgba(2,6,17,.7) 100%),
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(2,6,17,.35) 60%, rgba(2,6,17,.85) 100%);
}
.engine__inner{
  position:relative;z-index:2;
  max-width:880px;margin:0 auto;
  padding:18vh 28px 8vh;
}
.engine__caption{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(22px,2.2vw,32px);
  color:var(--gold-soft);
  margin:0 0 4vh;
  letter-spacing:.005em;
  text-align:left;
}
.engine__h{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(48px,6.8vw,98px);
  line-height:.98;letter-spacing:-.022em;
  color:var(--cream);
  margin:0 0 .6em;
}
.engine__h em{
  font-style:italic;
  color:var(--gold-soft);
}
.engine__p{
  font-family:var(--serif);
  font-size:clamp(22px,2vw,30px);
  line-height:1.5;
  color:rgba(250,248,243,.92);
  margin:0 0 1.6em;
  max-width:780px;
}
.tm{font-size:.55em;vertical-align:super;color:var(--gold-soft);margin-left:.1em}
.engine__close{
  margin-top:3em;
  font-family:var(--serif);font-weight:400;font-style:italic;
  font-size:clamp(38px,5vw,68px);
  line-height:1.05;
  color:var(--cream);
  letter-spacing:-.015em;
}

/* ============================================================
   ENGINE BEATS — editorial 3-up grid (replaces oversized bigquote)
   ============================================================ */
.engine__beats{
  position:relative;z-index:2;
  background:rgba(2,4,14,.92);
  padding:14vh 5vw 10vh;
  border-top:1px solid rgba(250,248,243,.08);
}
.engine__beats-intro{
  max-width:780px;margin:0 auto 8vh;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(18px,1.8vw,26px);
  color:rgba(250,248,243,.55);
  text-align:center;letter-spacing:-.005em;
}
.engine__beats-row{
  display:grid;grid-template-columns:repeat(3,1fr);
  max-width:1360px;margin:0 auto;gap:0;
}
.engine__beat{padding:0 4vw 0 0}
.engine__beat:not(:first-child){padding-left:4vw;border-left:1px solid rgba(250,248,243,.1)}
.engine__beat-n{
  display:block;font-family:var(--body);font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:1.4em;
}
.engine__beat-h{
  margin:0 0 .9em;font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.2vw,52px);
  line-height:1.1;letter-spacing:-.018em;
  color:rgba(250,248,243,.95);
}
.engine__beat-h em{font-style:italic;color:var(--gold-soft)}
.engine__beat-p{
  margin:0;font-family:var(--serif);
  font-size:clamp(15px,1.05vw,18px);line-height:1.5;
  color:rgba(250,248,243,.65);max-width:30ch;
}
.engine__beat-p strong{color:var(--gold-soft);font-weight:500;letter-spacing:.005em}
.engine__beats-coda{
  max-width:880px;margin:10vh auto 0;
  font-family:var(--serif);
  font-size:clamp(22px,2.4vw,38px);
  line-height:1.2;letter-spacing:-.01em;
  color:rgba(250,248,243,.62);text-align:center;
}
.engine__beats-coda em{font-style:italic;color:rgba(242,210,124,.95);font-size:1.1em}
.engine__inner--close{padding-top:8vh;padding-bottom:18vh}
@media(max-width:880px){
  .engine__beats-row{grid-template-columns:1fr;gap:6vh}
  .engine__beat{padding:0!important;border-left:0!important;border-top:1px solid rgba(250,248,243,.1);padding-top:6vh!important}
  .engine__beat:first-child{border-top:0;padding-top:0!important}
}

/* WindTunnel feature strip — F1 in the wind tunnel */
.windtunnel{
  margin:14vh auto 0;max-width:1360px;
  display:grid;grid-template-columns:1.4fr .9fr;gap:0;
  align-items:stretch;
  border-top:1px solid rgba(250,248,243,.1);
  border-bottom:1px solid rgba(250,248,243,.1);
}
.windtunnel__media{
  position:relative;overflow:hidden;
  aspect-ratio:16/9;
  background:#000;
}
.windtunnel__media img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.05) saturate(.85) brightness(.95);
  transform:scale(1.04);
}
.windtunnel__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(2,4,14,.0) 50%, rgba(2,4,14,.55) 100%),
             linear-gradient(180deg, rgba(2,4,14,.15), rgba(2,4,14,0) 30%);
  pointer-events:none;
}
.windtunnel__streak{
  position:absolute;top:0;bottom:0;left:-30%;width:60%;
  background:linear-gradient(90deg,
    rgba(255,248,220,0) 0%,
    rgba(255,248,220,.06) 40%,
    rgba(255,255,240,.18) 50%,
    rgba(255,248,220,.06) 60%,
    rgba(255,248,220,0) 100%);
  filter:blur(14px);
  mix-blend-mode:screen;
  pointer-events:none;
  will-change:transform;
}
.windtunnel__cap{
  display:flex;flex-direction:column;justify-content:center;
  padding:6vh 4vw;
  background:rgba(2,4,14,.72);
  border-left:1px solid rgba(250,248,243,.08);
}
.windtunnel__kicker{
  font-family:var(--body);font-size:11px;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(250,248,243,.55);margin-bottom:1.2em;
}
.windtunnel__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.4vw,72px);
  line-height:1;letter-spacing:-.02em;
  color:var(--cream);margin-bottom:.55em;
}
.windtunnel__name .tm{font-size:.32em;vertical-align:super;color:var(--gold-soft);letter-spacing:0;margin-left:.05em}
.windtunnel__sub{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.15vw,20px);line-height:1.4;
  color:rgba(250,248,243,.7);max-width:24ch;
}
@media(max-width:880px){
  .windtunnel{grid-template-columns:1fr;margin-top:10vh}
  .windtunnel__cap{padding:5vh 6vw;border-left:0;border-top:1px solid rgba(250,248,243,.08)}
}

/* ============================================================
   WAITLIST
   ============================================================ */
.waitlist{
  position:relative;
  min-height:90vh;
  display:flex;align-items:center;justify-content:center;
  color:var(--cream);overflow:hidden;
  background:var(--ink);
}
.waitlist__bg{position:absolute;inset:0;z-index:0}
.waitlist__bg img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(.8) contrast(1.05)}
.waitlist::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(6,17,42,.5), rgba(6,17,42,.85));
}
.waitlist__inner{
  position:relative;z-index:2;
  max-width:760px;width:100%;padding:0 28px;text-align:center;
}
.waitlist__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,6vw,84px);
  line-height:1.02;letter-spacing:-.02em;
  margin:0 0 1em;
}
.waitlist__form{
  display:flex;gap:10px;
  max-width:520px;margin:0 auto;
}
.waitlist__form input{
  flex:1;
  padding:18px 22px;
  border:1px solid rgba(250,248,243,.4);
  background:rgba(255,255,255,.05);
  color:var(--cream);
  font-family:var(--body);font-size:15px;
  border-radius:999px;
  outline:none;
}
.waitlist__form input::placeholder{color:rgba(250,248,243,.55)}
.waitlist__form input:focus{border-color:var(--gold-soft)}
.waitlist__form button{
  position:relative;
  padding:18px 28px;
  background:var(--cream);color:var(--ink);
  border:0;border-radius:999px;
  font-family:var(--body);font-weight:500;font-size:14px;
  letter-spacing:.04em;
  overflow:hidden;
  isolation:isolate;
  transition:transform .25s ease, color .35s ease;
}
.waitlist__form button::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(242,210,124,.0) 30%, rgba(242,210,124,.95) 50%, rgba(214,176,69,.95) 65%, transparent 100%);
  transform:translateX(-110%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.waitlist__form button:hover{color:var(--navy)}
.waitlist__form button:hover::before{transform:translateX(0)}
.nav__cta{position:relative;overflow:hidden;isolation:isolate}
.nav__cta::before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(110deg, transparent 0%, rgba(242,210,124,.0) 30%, rgba(242,210,124,.9) 50%, rgba(214,176,69,.9) 65%, transparent 100%);
  transform:translateX(-110%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.nav__cta:hover::before{transform:translateX(0)}

/* ============================================================
   PRODUCT DIVIDERS — three pillars, editorial grid
   ============================================================ */
.products{
  background:var(--cream);
  color:var(--ink);
  padding:11vh 5vw 16vh;
  border-top:1px solid rgba(11,17,30,.08);
  border-bottom:1px solid rgba(11,17,30,.08);
}
.products__head{
  max-width:min(900px,86vw);
  margin:0 auto 8vh;
  text-align:center;
}
.products__kicker{
  display:flex;align-items:center;gap:14px;
  justify-content:center;
  font-family:var(--body);
  font-size:clamp(11px,.92vw,14px);
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(11,17,30,.55);
  margin:0 0 1.6em;
}
.products__kicker-rule{
  flex:0 1 100px;height:1px;
  background:linear-gradient(90deg, rgba(11,17,30,0), rgba(184,152,42,.55), rgba(11,17,30,0));
}
.products__h{
  margin:0;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5.4vw,86px);
  line-height:1.04;letter-spacing:-.022em;
  color:var(--navy);
  text-wrap:balance;
}
.products__h em{font-style:italic;color:var(--gold)}
.products__grid{
  list-style:none;
  margin:0 auto;padding:0;
  max-width:1480px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  position:relative;
}
.product{
  position:relative;
  padding:0 4vw;
  display:flex;flex-direction:column;
  min-height:46vh;
}
.product + .product{
  border-left:1px solid rgba(11,17,30,.14);
}
.product__num{
  font-family:var(--body);
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.6em;
  display:inline-flex;align-items:center;gap:.7em;
}
.product__num::before{
  content:"";
  width:24px;height:1px;
  background:var(--gold);
}
.product__name{
  margin:0 0 .15em;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px,5.4vw,84px);
  line-height:1;
  letter-spacing:-.025em;
  color:var(--navy);
}
.product__name em{
  font-style:italic;
  color:var(--gold);
}
.product__sup{
  font-family:var(--display);
  font-weight:900;
  font-size:.22em;
  vertical-align:super;
  margin-left:.18em;
  letter-spacing:.04em;
  color:var(--gold-soft);
  font-style:normal;
}
.product__sub{
  margin:0 0 1.4em;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.05vw,18px);
  color:var(--gold);
  letter-spacing:.005em;
}
.product__desc{
  margin:0 0 2em;
  font-family:var(--serif);
  font-size:clamp(15px,1.1vw,19px);
  line-height:1.55;
  color:rgba(11,17,30,.78);
  max-width:34ch;
}
.product__link{
  margin-top:auto;
  display:inline-flex;align-items:center;gap:.4em;
  font-family:var(--body);
  font-size:13px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--navy);
  text-decoration:none;
  padding-bottom:.5em;
  border-bottom:1px solid rgba(11,17,30,.25);
  width:fit-content;
  transition:color .35s ease, border-color .35s ease, gap .35s ease;
}
.product__link:hover{
  color:var(--gold);
  border-color:var(--gold);
  gap:.7em;
}
.product__link span{transition:transform .35s ease}
.product__link:hover span{transform:translateX(3px)}
@media (max-width:880px){
  .products{padding:12vh 6vw 12vh}
  .products__grid{grid-template-columns:1fr;gap:8vh}
  .product{padding:0;min-height:auto}
  .product + .product{
    border-left:0;
    border-top:1px solid rgba(11,17,30,.14);
    padding-top:8vh;
  }
}

/* ============================================================
   FOOTER — minimal
   ============================================================ */
.foot{
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:28px clamp(20px, 6vw, 64px);
  font-family:var(--body);font-size:11.5px;
  line-height:1.55;
  color:rgba(11,27,51,.55);
  background:var(--cream);
  border-top:1px solid var(--rule);
  text-align:center;
  flex-wrap:wrap;
}
.foot span{ max-width: 920px }

/* ============================================================
   TEAM — editorial org chart
   ============================================================ */
.team{
  position:relative;
  background:var(--paper);
  padding:18vh 6vw 14vh;
  border-top:1px solid var(--rule);
  overflow:hidden;
}
.team::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(184,152,42,.08), transparent 70%),
    repeating-linear-gradient(0deg, rgba(11,27,51,.025) 0 1px, transparent 1px 36px);
}
.team__inner{position:relative;max-width:1180px;margin:0 auto}
.team__eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--body);font-weight:500;
  font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);
  margin:0 0 28px;
}
.team__eyebrow-rule{
  display:inline-block;width:48px;height:1px;
  background:linear-gradient(90deg, var(--gold) 0%, rgba(184,152,42,0) 100%);
}
.team__title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5.6vw,82px);
  line-height:1.04;letter-spacing:-.018em;
  color:var(--ink);
  margin:0 0 84px;
  max-width:18ch;
}
.team__title em{
  font-style:italic;
  background:linear-gradient(180deg, #F8E6A6 0%, #E8C260 38%, #C9A33C 70%, #8C6E18 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(34,16,2,.15));
}

/* ----- Org chart — editorial, type-led, hand-drawn gold curves ----- */
.org{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  row-gap:clamp(72px, 9vh, 128px);
  width:100%;max-width:1080px;margin:0 auto;
  padding:8px 0 12px;
}
.org__lines{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}
.org__lines path{
  fill:none;
  stroke:url(#orgGold);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.org__lines circle{ fill:var(--gold) }
.org__tier{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(64px, 11vw, 220px);
}
.org__tier--founders{ gap:clamp(48px, 7vw, 140px) }
.org__tier--pair{ gap:clamp(40px, 5.5vw, 96px) }

/* ----- Member — typography-led, no boxes ----- */
.member{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  margin:0;
  padding:8px 4px 4px;
  max-width:320px;
}
.member__role{
  font-family:var(--body);font-weight:500;
  font-size:10.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);
  margin:0 0 12px;
}
.member__name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(22px, 2.1vw, 28px);
  line-height:1.08;letter-spacing:-.012em;
  color:var(--ink);
  margin:0;
}
.member__name em{
  font-style:italic;
  background:linear-gradient(180deg, #F8E6A6 0%, #E8C260 38%, #C9A33C 70%, #8C6E18 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.member__rule{
  display:block;width:28px;height:1px;
  background:linear-gradient(90deg, rgba(184,152,42,0) 0%, var(--gold) 50%, rgba(184,152,42,0) 100%);
  margin:14px auto 0;
  opacity:.7;
  transition:width .35s ease, opacity .35s ease;
}
.member:hover .member__rule{ width:56px; opacity:1 }

.member--lead .member__role{ font-size:11px }
.member--lead .member__name{ font-size:clamp(28px, 2.6vw, 38px) }
.member--small .member__name{ font-size:clamp(19px, 1.7vw, 23px) }
.member--small .member__role{ font-size:10px; letter-spacing:.26em }

.member__link{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:14px;
  font-family:var(--body);font-weight:500;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(184,152,42,.85);
  text-decoration:none;
  border-bottom:1px solid rgba(184,152,42,.25);
  padding-bottom:3px;
  transition:color .25s ease, border-color .25s ease;
}
.member__link svg{display:block}
.member__link:hover{ color:var(--gold); border-color:var(--gold) }

/* The serif ampersand between founders, set bigger for editorial weight */
.member__amp{
  align-self:center;
  font-family:var(--serif);font-style:italic;
  font-size:clamp(40px, 4vw, 64px);
  line-height:1;
  color:var(--gold);
  opacity:.75;
  margin-top:14px;
  transform:translateY(2px);
}

/* Founders sit on a single horizontal axis */
.org__tier--founders{ align-items:flex-start }

/* Mobile */
@media (max-width:760px){
  .team{padding:14vh 6vw 10vh}
  .team__title{margin-bottom:48px}
  .org{row-gap:48px}
  .org__tier{flex-direction:column;gap:36px}
  .member__amp{display:none}
  .org__lines{display:none}
  .member{padding:0}
  /* On mobile, draw a tiny gold rule between stacked members instead of curves */
  .org__tier::after{
    content:"";display:block;width:1px;height:24px;
    background:linear-gradient(180deg, var(--gold) 0%, rgba(184,152,42,.15) 100%);
    margin:6px auto 0;
  }
  .org__tier:last-child::after{display:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:760px){
  .nav{padding:14px 20px}
  .nav__word{font-size:18px}
  .hero__inner{padding:0 24px 8vh}
  .hero__title{font-size:clamp(60px,15vw,140px)}
  .letter{padding:18vh 0 12vh}
  .letter__title{font-size:clamp(38px,10vw,68px)}
  .gps__pin{height:160vh}
  .gps__word{font-size:38vw}
  .clarity{min-height:300vh}
  .clarity__word{font-size:28vw}
  .jokequote__text{font-size:clamp(44px,12vw,84px)}
  .jokequote__text:nth-child(2){padding-left:8%}
  .jokequote__text:nth-child(3){padding-left:16%}
  .jokequote__text:nth-child(4){padding-left:24%}
  .barquote__text{font-size:clamp(52px,13vw,90px)}
  .engine__h{font-size:clamp(40px,9vw,68px)}
  .bigquote__text{font-size:clamp(48px,12vw,90px)}
  .waitlist__form{flex-direction:column}
  .waitlist__form input,.waitlist__form button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .hero__img{animation:none;transform:none}
  *{transition:none !important;animation:none !important}
}

/* ==========================================================
   iOS / mobile optimization — phones (≤640) and small tablets
   ========================================================== */
@supports (padding: max(0px)){
  :root{
    --safe-l: env(safe-area-inset-left, 0px);
    --safe-r: env(safe-area-inset-right, 0px);
    --safe-t: env(safe-area-inset-top, 0px);
    --safe-b: env(safe-area-inset-bottom, 0px);
  }
  .nav{padding-left:max(20px, var(--safe-l)) !important;padding-right:max(20px, var(--safe-r)) !important;padding-top:max(14px, var(--safe-t)) !important}
}
html{ -webkit-text-size-adjust:100% }
body{ -webkit-tap-highlight-color: transparent; overflow-x:hidden }
img, svg{ max-width:100% }

@media (max-width: 640px){
  /* ---- NAV: tighter, safe-area aware ---- */
  .nav{
    padding:14px 16px !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(10,15,26,.55);
  }
  .nav__cta{padding:8px 14px;font-size:12px;letter-spacing:.14em}
  .nav__login{padding:8px 10px;font-size:12px;letter-spacing:.12em}
  .nav__word{font-size:18px}
  .nav__mark{width:26px;height:26px}

  /* ---- HERO: smaller title, breathing room, clear nav ---- */
  .hero{min-height:100svh}
  .hero__inner{
    padding: calc(108px + var(--safe-t, 0px)) 22px 72px !important;
    align-items:flex-start !important;
    text-align:left !important;
    justify-content:flex-end !important;   /* anchor title to bottom — keeps it off the sun */
    min-height:100svh;
    box-sizing:border-box;
    display:flex;flex-direction:column;
    position:relative;
  }
  /* dark scrim behind title for legibility against the sun glow */
  .hero__inner::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:62%;
    background:linear-gradient(180deg,
      rgba(10,15,26,0) 0%,
      rgba(10,15,26,.32) 30%,
      rgba(10,15,26,.62) 65%,
      rgba(10,15,26,.82) 100%);
    pointer-events:none;
    z-index:1;
  }
  .hero__inner > *{ position:relative; z-index:2 }
  .hero__title{
    font-size:clamp(44px, 12.5vw, 64px) !important;
    line-height:1.02 !important;
    margin:0 !important;
    letter-spacing:-0.01em;
    text-shadow: 0 2px 18px rgba(10,15,26,.55), 0 1px 3px rgba(10,15,26,.6);
  }
  .hero__line{display:block !important;white-space:normal;text-align:left !important}
  .hero__line--top{display:block;gap:0}
  .hero__line--em{display:block;margin-top:.02em}
  .hero__sub{font-size:16px;text-shadow:0 1px 6px rgba(10,15,26,.55)}

  /* ---- LETTER / SECTIONS: tighter padding ---- */
  .letter,.clarity,.engine,.team,.products,.waitlist{padding-left:20px;padding-right:20px}
  .letter__inner,.engine__inner,.team__inner,.waitlist__inner{padding-left:0;padding-right:0}
  h2,.section__title{font-size:clamp(30px, 8vw, 44px) !important;line-height:1.15}

  /* ---- GPS: smaller globe, smaller GPS letters, no pin overflow ---- */
  .gps__pin{height:160vh}
  .gps__globe{width:min(82vw, 70vh);height:min(82vw, 70vh)}
  .gps__word{font-size:clamp(80px, 38vw, 180px) !important;letter-spacing:.01em}
  .gps__eyebrow{bottom:6vh;font-size:10px;letter-spacing:.28em;padding:0 20px;text-align:center}
  .gps__copy{padding:5vh 22px 0}
  .gps__lede{font-size:18px !important;line-height:1.55}

  /* ---- ENGINE ("From start to finish… policy done") ---- */
  .engine{min-height:auto;padding:90px 20px 110px}
  .engine__bg img{object-position: center 30%}
  .engine__credit{right:12px;bottom:10px;font-size:9.5px}
  .engine__caption{font-size:11px}
  .engine__beats,.engine__grid{grid-template-columns:1fr !important;gap:18px}

  /* ---- TEAM / ORG CHART: stacked, single column ---- */
  .team{padding:90px 20px 110px}
  .team__title{font-size:clamp(32px,9vw,46px)}
  .org{padding-top:16px}
  .org__lines{display:none !important}            /* curves don't make sense in a stacked column */
  .org__tier{display:flex;flex-direction:column;align-items:center;gap:36px;margin-bottom:36px}
  .org__tier--founders{gap:30px}
  .member__amp{display:none}                       /* big ampersand reads weird stacked */
  .member{text-align:center}
  .member__role{font-size:10.5px;letter-spacing:.28em}
  .member__name{font-size:clamp(28px,8vw,40px)}
  .member__rule{margin-left:auto;margin-right:auto}
  .member__link{justify-content:center}

  /* ---- WAITLIST: full-width form, big tap targets ---- */
  .waitlist{padding:80px 20px 96px}
  .waitlist__title{font-size:clamp(28px,8vw,40px) !important;line-height:1.18}
  .waitlist__form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:420px;margin:28px auto 0}
  .waitlist__form input,
  .waitlist__form button{
    width:100%;
    height:52px;                   /* 44pt+ — iOS HIG tap target */
    font-size:16px;                /* prevents iOS auto-zoom on focus */
    border-radius:14px;
    padding:0 18px;
    box-sizing:border-box;
  }
  .waitlist__form button{font-weight:600;letter-spacing:.04em}
  .waitlist__status{font-size:13px;margin:6px 0 0;text-align:center;color:rgba(244,216,122,.85)}

  /* ---- PRODUCTS / CARDS / GENERIC GRIDS ---- */
  .products__grid,.cards,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;gap:18px}
  .card,.product__card{padding:22px}

  /* ---- IN-PROGRESS PAGE: tighten ---- */
  .ip__inner,.inprogress__inner{padding:80px 22px}
  .ip__title,.inprogress__title{font-size:clamp(44px,14vw,72px) !important;line-height:1.05}
  .ip__sub,.inprogress__sub{font-size:16px}

  /* ---- TYPOGRAPHIC SAFETY ---- */
  p{ overflow-wrap:break-word; word-break: break-word; hyphens:auto }
  a{ -webkit-touch-callout: none }
}

/* ---- iPhone SE / very narrow phones ---- */
@media (max-width: 380px){
  .hero__title{font-size:42px !important}
  .gps__word{font-size:78px !important}
  .nav__word{display:none}
  .nav__cta{font-size:11px;padding:7px 11px}
  .nav__login{font-size:11px;padding:7px 8px}
  .nav__actions{gap:6px}
}

/* ---- Touch — disable hover-only effects on iOS so they don’t "stick" ---- */
@media (hover: none){
  *:hover{ transition:none }
  .member:hover .member__rule,
  .card:hover, .product__card:hover{ transform:none }
}

/* ============================================================
   PRODUCT SHOWCASE — editorial browser frames over cream/dark
   ============================================================ */
.showcase{
  position:relative;
  max-width:1180px;
  margin: 8vh auto 4vh;
  padding: 0 28px;
  text-align:center;
  opacity:0;
  transform: translateY(28px) scale(.985);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1);
}
.showcase.in{opacity:1;transform:none}
.showcase__frame{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background: linear-gradient(180deg, #2a2a2a, #0e0e0e);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 30px 80px -20px rgba(8,12,28,.55),
    0 12px 30px -10px rgba(8,12,28,.45),
    0 0 0 1px rgba(232,194,96,.18);
}
.showcase__frame::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,225,140,.10), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(8,12,28,.18));
  mix-blend-mode: screen;
}
.showcase__bar{
  display:flex; align-items:center; gap:8px;
  padding: 12px 16px;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.showcase__bar span{
  width:11px;height:11px;border-radius:50%;
  background:#d8633c;
}
.showcase__bar span:nth-child(2){background:#e0b53b}
.showcase__bar span:nth-child(3){background:#46a85a}
.showcase__img{
  display:block;
  width:100%;
  height:auto;
  background:#FAF8F3;
}
.showcase__cap{
  margin-top: 18px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing:-.01em;
  color: var(--navy);
  font-weight: 400;
}
.showcase__cap em{ font-style: italic; color:#8a6e1e }
.showcase--dark .showcase__cap{ color: #f5ecd0 }
.showcase--dark .showcase__cap em{ color:#F4D87A }

/* Engine previews stack two showcases */
.engine__previews{
  position:relative; z-index:2;
  max-width:1180px; margin: 6vh auto 2vh;
  padding: 0;
  display:flex; flex-direction:column; gap: 6vh;
}
.engine__previews .showcase{ margin: 0 auto }

@media (max-width: 720px){
  .showcase{ padding: 0 16px; margin: 6vh auto 3vh }
  .showcase__frame{ border-radius: 12px }
  .showcase__bar{ padding:8px 10px }
  .showcase__bar span{ width:9px;height:9px }
  .showcase__cap{ margin-top: 12px }
}

/* Showcase inside Clarity: lift above the dark overlay */
.clarity .showcase{
  position: relative;
  z-index: 5;
}
.clarity .showcase__frame{
  background: linear-gradient(180deg, #1f2438, #0a1124);
}

/* ============================================================
   ANIMATED CURSOR — dashboard demo gets a "live" feel
   ============================================================ */
.showcase--demo{
  position: relative;
}
.showcase--demo .showcase__frame{ overflow: hidden }
.showcase--demo .demo-cursor{
  position:absolute;
  top: 95%; left: 70%;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  pointer-events:none;
  z-index: 4;
  opacity: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
}
.showcase--demo.in .demo-cursor{
  animation: demoCursorPath 11s cubic-bezier(.45,.05,.55,.95) 1.2s infinite;
}
.showcase--demo .demo-cursor svg{ display:block; width:100%; height:100% }

/* Pulse ring when cursor "clicks" */
.showcase--demo .demo-click{
  position:absolute;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(244, 216, 122, .9);
  pointer-events:none;
  z-index: 3;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.4);
}
.showcase--demo.in .demo-click{
  animation: demoClickPulse 11s linear 1.2s infinite;
}

/* highlight glow that follows cursor stops */
.showcase--demo .demo-spot{
  position:absolute;
  width: 180px; height: 90px;
  border-radius: 12px;
  background: radial-gradient(closest-side, rgba(244,216,122,.18), transparent 70%);
  pointer-events:none;
  z-index: 2;
  opacity: 0;
  transform: translate(-50%,-50%);
}
.showcase--demo.in .demo-spot{
  animation: demoSpot 11s linear 1.2s infinite;
}

/* Path: New Bill (12% 24%) → Bill Writer (12% 39%) → Active draft (44% 76%) → out
   Coordinates are %s of the .showcase__frame box. */
@keyframes demoCursorPath {
  0%   { top:95%; left:70%; opacity:0; }
  3%   { top:95%; left:70%; opacity:1; }
  18%  { top:26%; left:13%; opacity:1; } /* over New Bill */
  24%  { top:26%; left:13%; opacity:1; } /* hover pause */
  38%  { top:41%; left:13%; opacity:1; } /* over Bill Writer */
  44%  { top:41%; left:13%; opacity:1; } /* hover pause */
  62%  { top:78%; left:46%; opacity:1; } /* over active draft */
  68%  { top:78%; left:46%; opacity:1; } /* hover pause */
  84%  { top:78%; left:46%; opacity:1; }
  98%  { top:95%; left:80%; opacity:0; }
  100% { top:95%; left:80%; opacity:0; }
}
@keyframes demoClickPulse {
  0%, 22% { opacity:0; transform: translate(-50%,-50%) scale(.4); top:26%; left:13%; }
  24%     { opacity:.95; transform: translate(-50%,-50%) scale(.4); top:26%; left:13%; }
  30%     { opacity:0; transform: translate(-50%,-50%) scale(1.6); top:26%; left:13%; }
  31%, 44% { opacity:0; top:41%; left:13%; }
  46%     { opacity:.95; transform: translate(-50%,-50%) scale(.4); top:41%; left:13%; }
  52%     { opacity:0; transform: translate(-50%,-50%) scale(1.6); top:41%; left:13%; }
  53%, 68% { opacity:0; top:78%; left:46%; }
  70%     { opacity:.95; transform: translate(-50%,-50%) scale(.4); top:78%; left:46%; }
  76%     { opacity:0; transform: translate(-50%,-50%) scale(1.6); top:78%; left:46%; }
  100%    { opacity:0; }
}
@keyframes demoSpot {
  0%, 14% { opacity:0; }
  18%, 26% { opacity:1; top:26%; left:13%; }
  30%, 38% { opacity:0; }
  38%, 44% { opacity:1; top:41%; left:13%; }
  48%, 60% { opacity:0; }
  62%, 70% { opacity:1; top:78%; left:46%; }
  74%, 100%{ opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .showcase--demo.in .demo-cursor,
  .showcase--demo.in .demo-click,
  .showcase--demo.in .demo-spot { animation: none; opacity: 0 }
}
@media (max-width: 720px){
  /* hide on mobile — small viewport makes pixel-perfect cursor tour fragile */
  .showcase--demo .demo-cursor,
  .showcase--demo .demo-click,
  .showcase--demo .demo-spot { display: none }
}

/* ============================================================
   TEAM \u2014 squared, evenly distributed grid + lightbox bio modal
   Replaces the prior connected org-chart layout.
   ============================================================ */
/* ====== TEAM GRID — EY-style two-column row layout ====== */
.team{ background:#1F2333 !important; color:#F4F2EC; border-top:1px solid rgba(255,255,255,.05) }
.team::before{ display:none }
.team__title{ color:#F4F2EC }
.team__title em{
  background: linear-gradient(180deg,#F8E6A6 0%,#E8C260 38%,#C9A33C 70%,#8C6E18 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

.team__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(40px, 6vw, 96px);
  row-gap: clamp(28px, 3.6vw, 44px);
  margin: clamp(40px, 6vw, 72px) 0 0;
  align-items:stretch;
}
@media (max-width: 720px){ .team__grid{ grid-template-columns: 1fr; row-gap: 22px } }

.tcard{
  appearance:none; -webkit-appearance:none;
  background: transparent;
  border:0;
  padding: 6px 4px;
  display:flex; align-items:center; gap: clamp(18px, 2vw, 28px);
  cursor:pointer; text-align:left;
  font:inherit; color:inherit;
  border-radius:8px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.tcard:hover{ transform: translateX(2px) }
.tcard:hover .tcard__name{ color:#F4D87A }
.tcard:focus-visible{ outline:2px solid var(--gold); outline-offset:6px }

.tcard__avatar{
  position:relative; flex:0 0 auto;
  width: clamp(96px, 10.5vw, 132px);
  height: clamp(96px, 10.5vw, 132px);
  border-radius: 50%;
  overflow:hidden;
  background: linear-gradient(180deg,#3A4156 0%,#262C3D 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 18px 32px -22px rgba(0,0,0,.55);
}
.tcard__avatar img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit: cover;
  object-position: center 35%;
  display:block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.tcard:hover .tcard__avatar img{ transform: scale(1.06) }

.tcard__avatar--mono{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg,#2A3045 0%,#181D2A 100%);
  color:#D4B452;
}
.tcard__avatar--mono span{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing:.02em;
  opacity:.92;
}

.tcard__body{
  display:flex; flex-direction:column; gap:6px;
  min-width:0;
}
.tcard__name{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.15;
  color:#FAF8F1;
  letter-spacing: -0.005em;
  transition: color .25s ease;
}
.tcard__role{
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.4;
  letter-spacing: .02em;
  text-transform: none;
  color: #B7BCC9;
}

/* ---- BIO MODAL — EY-style stacked panel: photo+quote on top, dark meta band below ---- */
.bio-modal{
  position:fixed; inset:0; z-index:1000;
  opacity:0; pointer-events:none;
  transition: opacity .3s ease;
}
.bio-modal[aria-hidden="false"]{ opacity:1; pointer-events:auto }
.bio-modal__scrim{
  position:absolute; inset:0;
  background: rgba(8, 13, 24, .78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.bio-modal__panel{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%, -48%);
  width: min(980px, 92vw);
  max-height: 92vh;
  background: #1F2333;
  border:1px solid rgba(212,180,82,.18);
  border-radius: 4px;
  overflow:auto;
  display:grid;
  grid-template-rows: minmax(360px, 60vh) auto;
  grid-template-columns: 1fr;
  box-shadow: 0 40px 100px rgba(0,0,0,.55);
  opacity:0;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
  color:#F4F2EC;
}
.bio-modal[aria-hidden="false"] .bio-modal__panel{
  transform: translate(-50%, -50%);
  opacity:1;
}
.bio-modal__close{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(8,13,24,.55);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  z-index:5;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.bio-modal__close:hover{ background: var(--gold); color:#0A0F1A; border-color: var(--gold); transform: rotate(90deg) }

.bio-modal__hero{
  position:relative;
  background: #1F2333;
  overflow:hidden;
  min-height: 0;
}
.bio-modal__img{
  display:block;
  width: 100%;
  height: 100%;
  position:absolute;
  inset: 0;
  object-fit: cover;
  object-position: center 30%;
  transform: scale(.92);
  transform-origin: center 35%;
}
@media (max-width: 820px){
  .bio-modal__img{ object-position: center 25%; transform: scale(.95); }
}
.bio-modal__hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(31,35,51,.0) 60%, rgba(31,35,51,.55) 100%);
  pointer-events:none;
}
.bio-modal__quote{
  position:absolute;
  left: clamp(28px, 4vw, 56px);
  right: 50%;
  top: clamp(28px, 4vw, 56px);
  color:#fff;
  max-width: 520px;
  z-index:2;
}
.bio-modal__qmark{
  display:block;
  width: clamp(36px, 3.6vw, 52px);
  height: auto;
  color: #F4D87A;
  margin-bottom: 14px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.bio-modal__quote-text{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 1.8vw, 28px);
  line-height: 1.32;
  letter-spacing: -0.005em;
  color:#fff;
  margin:0;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}

.bio-modal__meta{
  padding: clamp(28px, 3.2vw, 44px) clamp(32px, 4vw, 64px) clamp(32px, 3.6vw, 48px);
  background:#1F2333;
  display:grid;
  grid-template-columns: 1fr;
  gap: 0;
  text-align:center;
}
.bio-modal__name{
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.012em;
  margin: 0 0 10px;
  color:#FAF8F1;
}
.bio-modal__role{
  font-family: var(--body);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: .02em;
  text-transform: none;
  color: #F4D87A;
  margin: 0 0 14px;
}
.bio-modal__linkedin{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid rgba(244,216,122,.4);
  border-radius: 999px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .02em;
  color: #F4D87A;
  text-decoration: none;
  background: transparent;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  margin-bottom: 22px;
}
.bio-modal__linkedin:hover{
  background: #F4D87A;
  color: #0A0F1A;
  border-color: #F4D87A;
  transform: translateY(-1px);
}
.bio-modal__linkedin[hidden]{ display: none; }
.bio-modal__bio{
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.65;
  color: #C9CDD8;
  max-width: 720px;
  margin: 0 auto;
  text-align:left;
}
.bio-modal__bio p{ margin: 0 0 14px }
.bio-modal__bio p:last-child{ margin-bottom: 0 }

/* When member has no photo, hide hero entirely and show only meta band */
.bio-modal--no-photo .bio-modal__panel{
  grid-template-rows: auto;
  width: min(720px, 92vw);
}
.bio-modal--no-photo .bio-modal__hero{ display:none }
.bio-modal--no-photo .bio-modal__meta{
  padding: clamp(40px, 5vw, 72px) clamp(28px, 3.6vw, 56px);
}

@media (max-width: 820px){
  .bio-modal__panel{ width: 94vw; max-height: 92vh; grid-template-rows: 56vw auto }
  .bio-modal__quote{ left:20px; right:20px; top:18px; max-width:none }
  .bio-modal__quote-text{ font-size: 17px; line-height:1.3 }
  .bio-modal__qmark{ width: 32px; margin-bottom: 8px }
  .bio-modal__name{ font-size: clamp(30px, 8vw, 42px) }
}

/* small TM/R/C marks shared across the site */
.tm, .reg, .cmark{
  font-size: .55em;
  vertical-align: super;
  line-height: 0;
  margin-left: .08em;
  letter-spacing: 0;
  font-weight: 500;
  opacity: .85;
}

/* tm next to large display words */
.clarity__tm{
  font-size: .35em;
  vertical-align: super;
  margin-left: .12em;
  color: var(--gold);
  letter-spacing: 0;
  font-weight: 400;
}
.product__name .tm{
  font-size: .42em;
  color: var(--gold);
  margin-left: .12em;
}
.team__title .tm{
  font-size: .42em;
  color: var(--gold);
  font-style: normal;
  margin-left: .08em;
}
.team__title em{ white-space: nowrap }
@media (max-width: 720px){
  .team__title{ font-size: clamp(28px, 8.6vw, 42px); line-height:1.08 }
}