/* ==========================================================================
   NOVARUS  ·  light / glass
   An AI company. White base, golden accent, liquid glass, generous whitespace.
   Everything that moves is transform or opacity only, so no animation ever
   costs a layout pass. Type is Inter: heavy and tight on headings, quiet on body.
   ========================================================================== */

/* ============================ TOKENS ============================ */
:root{
  --white:#FFFFFF;
  --canvas:#FBFBFA;
  --surface:#FFFFFF;
  --surface-2:#F5F5F3;
  --surface-3:#EFEFEC;
  --ink:#16161A;
  --ink-2:#3A3A40;

  /* golden, not electric: warmer and quieter than a signal yellow */
  --gold:#F0B429;
  --gold-lift:#FFCE4E;
  --gold-deep:#B67C05;      /* the only one legible as text on white */
  --gold-wash:#FEF6E3;

  --muted:#65656E;
  --faint:#8E8E96;
  --line:rgba(22,22,26,.09);
  --line-2:rgba(22,22,26,.15);
  --ok:#1F9254; --warn:#B67C05; --bad:#C0392B;

  /* glass */
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.82);
  --glass-line:rgba(255,255,255,.75);
  --blur:saturate(180%) blur(22px);

  /* three light shadows read expensive; one heavy one reads cheap */
  --sh-1:0 1px 2px rgba(22,22,26,.05);
  --sh-2:0 1px 2px rgba(22,22,26,.04), 0 6px 16px -6px rgba(22,22,26,.08);
  --sh-3:0 1px 3px rgba(22,22,26,.04), 0 12px 32px -12px rgba(22,22,26,.12);
  --sh-4:0 2px 6px rgba(22,22,26,.05), 0 24px 60px -24px rgba(22,22,26,.18);
  --sh-gold:0 10px 30px -10px rgba(240,180,41,.55);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
  --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px;
  --band:clamp(64px,7.5vw,124px);

  --maxw:1240px; --maxw-wide:1400px; --pad-x:clamp(20px,5vw,64px);

  --f:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;

  --h1:clamp(2.6rem,6vw,5.4rem);
  --h2:clamp(2rem,4vw,3.4rem);
  --h3:clamp(1.4rem,2.2vw,2rem);
  --lh-tight:1.03; --lh-snug:1.14; --lh-body:1.6;
  --tr-tight:-.035em; --tr-x:-.045em;

  --r-s:12px; --r:18px; --r-l:26px; --r-xl:34px; --r-pill:999px;

  /* short, and the overshoot curve is what makes it feel physical */
  --t-fast:130ms; --t:200ms; --t-slow:340ms;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.32,.72,0,1);

  --z-dock:90; --z-nav:100; --z-menu:900;
}

/* ============================ BASE ============================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ -webkit-text-size-adjust:100%; scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar{ width:0; height:0; }
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--f); font-size:17px; line-height:var(--lh-body); font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:clip;
}
img,svg,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
h1,h2,h3,h4{ font-family:var(--f); font-weight:700; letter-spacing:var(--tr-tight); line-height:var(--lh-snug); text-wrap:balance; color:var(--ink); }
h1{ font-weight:800; letter-spacing:var(--tr-x); line-height:var(--lh-tight); }
p{ text-wrap:pretty; }
::selection{ background:var(--gold); color:var(--ink); }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--gold-deep); outline-offset:3px; border-radius:8px;
}
.num{ font-variant-numeric:tabular-nums; }
.mono{ font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; }
.accent{ color:var(--gold-deep); }

.skip{
  position:fixed; top:-120px; left:var(--s4); z-index:10000;
  background:var(--ink); color:#fff; padding:var(--s3) var(--s5);
  font-size:.9rem; border-radius:var(--r-s); transition:top var(--t) var(--ease);
}
.skip:focus{ top:var(--s4); }

.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.container--wide{ max-width:var(--maxw-wide); }
.band{ position:relative; padding-block:var(--band); background:var(--canvas); }
.band--light{ background:var(--white); }
.band > .container{ position:relative; z-index:1; }

.lede{ font-size:clamp(1.1rem,1.5vw,1.35rem); line-height:1.5; color:var(--muted); max-width:56ch; }
.body-lg{ font-size:1.0625rem; color:var(--muted); max-width:64ch; }
.grain{ display:none; }

/* ============================ ORGANIC BACKGROUND ============================
   Two warm fields and one cool one, drifting on long cycles. Low enough that
   you register movement without ever looking at it. Transform only. */
.amb{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.amb i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(70px); opacity:.55; will-change:transform;
  background:radial-gradient(circle at 50% 50%, rgba(240,180,41,.30) 0%, rgba(240,180,41,0) 70%);
  animation:drift var(--d,52s) ease-in-out infinite alternate;
}
.amb i:nth-child(1){ width:52vw; height:52vw; left:-12%; top:-18%; --d:56s; }
.amb i:nth-child(2){
  width:42vw; height:42vw; right:-10%; top:22%; --d:44s; animation-direction:alternate-reverse;
  background:radial-gradient(circle at 50% 50%, rgba(255,206,78,.26) 0%, rgba(255,206,78,0) 70%);
}
.amb i:nth-child(3){
  width:36vw; height:36vw; left:40%; bottom:-16%; --d:64s;
  background:radial-gradient(circle at 50% 50%, rgba(176,198,255,.22) 0%, rgba(176,198,255,0) 68%);
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(6vw,-5vh,0) scale(1.18); }
}
.amb::after{ content:none; }

/* ============================ BUTTONS ============================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border-radius:var(--r-pill);
  background:var(--ink); color:#fff;
  font-size:1rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  box-shadow:var(--sh-2);
  transition:transform var(--t) var(--spring), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-3); }
.btn:active{ transform:translateY(0) scale(.98); transition-duration:80ms; }
.btn__arrow{ width:15px; height:15px; transition:transform var(--t) var(--spring); }
.btn:hover .btn__arrow{ transform:translateX(3px); }
.btn--gold{ background:var(--gold); color:var(--ink); box-shadow:var(--sh-gold); }
.btn--gold:hover{ background:var(--gold-lift); }
.btn--ghost{
  background:var(--glass-strong); color:var(--ink);
  border:1px solid var(--line-2); box-shadow:var(--sh-1);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
}
.btn--ghost:hover{ background:#fff; }

.link-mono{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.9rem; font-weight:600; color:var(--ink);
  padding-bottom:2px; border-bottom:1.5px solid var(--gold);
  transition:color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.link-mono:hover{ color:var(--gold-deep); border-color:var(--gold-deep); }

.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border-radius:var(--r-pill);
  background:var(--white); border:1px solid var(--line);
  font-size:.9rem; font-weight:500; color:var(--ink); white-space:nowrap; box-shadow:var(--sh-1);
}
.chip b{ font-weight:700; }
.chip--live{ background:var(--gold-wash); border-color:rgba(240,180,41,.5); }
.led{
  width:7px; height:7px; border-radius:50%; background:var(--gold); flex:none;
  box-shadow:0 0 0 0 rgba(240,180,41,.6); animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(240,180,41,.55); }
  70%{ box-shadow:0 0 0 9px rgba(240,180,41,0); }
  100%{ box-shadow:0 0 0 0 rgba(240,180,41,0); }
}

/* ============================ HEADER ============================
   No wordmark. A compact glass monogram left, the phone right. That is all. */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:18px var(--pad-x); pointer-events:none;
  transition:padding var(--t-slow) var(--ease);
}
.nav > *{ pointer-events:auto; }
.nav[data-stuck="true"]{ padding-block:11px; }
.nav__island{
  display:flex; align-items:center; border-radius:var(--r-pill);
  background:var(--glass); border:1px solid var(--glass-line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sh-2);
  transition:background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.nav[data-stuck="true"] .nav__island{ background:var(--glass-strong); box-shadow:var(--sh-3); }
.nav__brand{ padding:0; width:46px; height:46px; justify-content:center; }
.nav__brand svg{ width:24px; height:24px; }
.nav__pill{ display:none; }
.nav__side{ padding:5px 5px 5px 6px; gap:var(--s2); }
.nav__tel{
  display:inline-flex; align-items:center; gap:8px; padding:0 14px 0 12px;
  font-size:.95rem; font-weight:600; color:var(--ink); white-space:nowrap;
  font-family:var(--f); letter-spacing:0; text-transform:none;
  transition:color var(--t) var(--ease);
}
.nav__tel:hover{ color:var(--gold-deep); }
.nav .btn{ padding:11px 20px; font-size:.92rem; }
.wordmark{ display:none; }

.burger{ display:none; width:42px; height:42px; place-items:center; border-radius:var(--r-pill); }
.burger i{ display:block; width:17px; height:1.8px; background:var(--ink); border-radius:2px;
  transition:transform 320ms var(--spring), opacity 160ms linear; }
.burger i + i{ margin-top:4px; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(5.8px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-5.8px) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:var(--z-menu);
  background:rgba(255,255,255,.88); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  display:flex; flex-direction:column; justify-content:center; padding:96px var(--pad-x) var(--s12);
  opacity:0; visibility:hidden; transition:opacity 260ms var(--ease), visibility 260ms;
}
.menu[data-open="true"]{ opacity:1; visibility:visible; }
.menu ul{ display:grid; gap:var(--s2); }
.menu li a{
  display:flex; align-items:baseline; gap:var(--s5);
  font-size:clamp(2rem,8vw,2.8rem); font-weight:700; letter-spacing:var(--tr-x);
  padding-block:12px; border-bottom:1px solid var(--line); color:var(--ink);
}
.menu li a span{ font-family:var(--f-mono); font-size:.68rem; color:var(--gold-deep); letter-spacing:.1em; }
.menu__foot{ margin-top:var(--s12); display:grid; gap:var(--s3); color:var(--muted); }
.menu__foot a{ color:var(--ink); }

/* ============================ DOCK ============================
   macOS behaviour: the label pops ABOVE the icon rather than widening the
   pill. Nothing animates width, so every frame is composited and the bounce
   lands instantly. */
.dock{ display:none; }
@media (hover:hover) and (min-width:761px){
  .dock{
    position:fixed; left:50%; bottom:24px; z-index:var(--z-dock);
    display:flex; align-items:center; gap:6px; padding:9px;
    border-radius:var(--r-pill);
    background:var(--glass); border:1px solid var(--glass-line);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    box-shadow:var(--sh-4); transform:translateX(-50%);
  }
  .dock a{
    position:relative; display:grid; place-items:center;
    width:46px; height:46px; border-radius:var(--r-pill); color:var(--ink-2);
    transition:transform 220ms var(--spring), background 150ms var(--ease), color 150ms var(--ease);
    will-change:transform;
  }
  .dock a svg{ width:20px; height:20px; }
  .dock a span{
    position:absolute; bottom:calc(100% + 12px); left:50%;
    padding:7px 13px; border-radius:var(--r-pill);
    background:var(--ink); color:#fff;
    font-size:.8rem; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
    box-shadow:var(--sh-3);
    opacity:0; transform:translate(-50%,6px) scale(.9);
    transition:opacity 130ms var(--ease), transform 240ms var(--spring);
    pointer-events:none;
  }
  .dock a span::after{
    content:""; position:absolute; top:100%; left:50%; margin-left:-4px;
    border:4px solid transparent; border-top-color:var(--ink);
  }
  .dock a:hover, .dock a:focus-visible{
    transform:translateY(-8px) scale(1.16); background:var(--gold-wash); color:var(--ink);
  }
  .dock a:hover span, .dock a:focus-visible span{ opacity:1; transform:translate(-50%,0) scale(1); }
  .dock a:active{ transform:translateY(-3px) scale(1.05); transition-duration:90ms; }
  /* neighbours lift a little too, the way a real dock does */
  .dock a:hover + a{ transform:translateY(-3px) scale(1.07); }
  .dock a[aria-current="page"]{ color:var(--ink); background:var(--gold-wash); }
  .dock a[aria-current="page"]::after{
    content:""; position:absolute; bottom:5px; left:50%; width:4px; height:4px; margin-left:-2px;
    border-radius:50%; background:var(--gold-deep);
  }
  .foot{ padding-bottom:calc(var(--s16) + 56px); }
}

/* ============================ HERO ============================ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:center;
  padding:clamp(120px,15vh,168px) 0 clamp(56px,8vh,96px); overflow:hidden; background:var(--white);
}
.hero::before, .hero::after{ content:none; }
.hero__grid{
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:minmax(0,1fr) clamp(300px,30vw,400px);
  gap:clamp(32px,5vw,80px); align-items:center;
}
.hero__eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:var(--s5);
  padding:8px 16px; border-radius:var(--r-pill);
  background:var(--glass-strong); border:1px solid var(--line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  box-shadow:var(--sh-1); color:var(--ink-2);
  font-size:.82rem; font-weight:500; letter-spacing:0; text-transform:none; font-family:var(--f);
}
.hero__eyebrow::after{ content:none; }
.hero h1{ font-size:var(--h1); max-width:15ch; margin-bottom:var(--s5); }
.hero h1 .l{ display:block; overflow:hidden; }
.hero h1 .l > i{ display:block; font-style:normal; transform:translateY(105%); }
.js .hero.is-ready h1 .l > i{
  transform:translateY(0); transition:transform 900ms var(--ease);
  transition-delay:calc(var(--d) * 90ms + 60ms);
}
.no-js .hero h1 .l > i, .rm .hero h1 .l > i{ transform:none; }
.textflow{ color:var(--gold-deep); background:none; -webkit-text-fill-color:currentColor; animation:none; }
.hero__deck{ margin-bottom:var(--s6); max-width:60ch; }
.hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); margin-bottom:var(--s8); }

.caps{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--s6); }
.caps li{
  display:inline-flex; align-items:center; padding:7px 13px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-2);
  font-size:.82rem; font-weight:500; letter-spacing:0; text-transform:none;
  font-family:var(--f); white-space:nowrap;
}
.caps li::after{ content:none; }

.spec-strip{ display:flex; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:var(--s5); }
.spec-strip li{
  display:flex; align-items:baseline; gap:8px;
  padding-right:var(--s6); margin-right:var(--s6); border-right:1px solid var(--line);
  font-size:.86rem; color:var(--muted); font-family:var(--f);
  letter-spacing:0; text-transform:none; margin-block:5px;
}
.spec-strip li:last-child{ border-right:0; margin-right:0; padding-right:0; }
.spec-strip b{ color:var(--ink); font-weight:700; font-size:1rem; }

/* ---- the proof phone, glass on white ---- */
.hero__proof{ display:flex; justify-content:center; }
.proof{ position:relative; width:min(340px,100%); }
.proof::before{
  content:""; position:absolute; inset:-12% -18%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(240,180,41,.30), transparent 70%); filter:blur(14px);
}
.proof__phone{
  position:relative; border-radius:44px; padding:11px;
  background:var(--glass-strong); border:1px solid var(--glass-line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--sh-4);
}
.proof__screen{
  border-radius:34px; background:var(--white); padding:18px 15px;
  display:flex; flex-direction:column; gap:11px; min-height:clamp(380px,40vw,440px);
  border:1px solid var(--line);
}
.proof__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:11px; border-bottom:1px solid var(--line); }
.proof__biz{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:.86rem; }
.proof__clock{ font-family:var(--f-mono); font-size:.66rem; color:var(--faint); }
.proof__scenes{ position:relative; flex:1; min-height:0; }
.proof__scene{ position:absolute; inset:0; display:flex; flex-direction:column; gap:9px;
  opacity:0; pointer-events:none; transition:opacity 420ms var(--ease); }
.proof__scene[data-active="true"]{ opacity:1; }
.proof [data-s]{ opacity:0; transform:translateY(8px); }
.proof__scene[data-active="true"] [data-s]{
  opacity:1; transform:none;
  transition:opacity 460ms var(--ease), transform 460ms var(--spring);
  transition-delay:calc(var(--s) * 520ms);
}
.rm .proof [data-s], .no-js .proof [data-s]{ opacity:1; transform:none; }
.rm .proof__scene, .no-js .proof__scene{ position:relative; opacity:1; }
.rm .proof__scene:not(:first-child), .no-js .proof__scene:not(:first-child){ display:none; }
.proof__ev{ display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:var(--r-s);
  background:var(--surface-2); font-size:.82rem; color:var(--ink-2); }
.proof__ev svg{ width:15px; height:15px; flex:none; color:var(--gold-deep); }
.proof__ev b{ display:block; font-size:.7rem; color:var(--faint); font-weight:400; margin-top:2px; }
.proof__b{ max-width:86%; padding:10px 13px; font-size:.85rem; line-height:1.4;
  border-radius:17px 17px 17px 6px; background:var(--surface-2); color:var(--ink-2); }
.proof__b--out{ margin-left:auto; border-radius:17px 17px 6px 17px; background:var(--gold); color:var(--ink); font-weight:500; }
.proof__ok{ margin-top:auto; display:grid; gap:3px; padding:13px; border-radius:var(--r-s);
  background:var(--gold-wash); border:1px solid rgba(240,180,41,.42); }
.proof__ok .mono{ color:var(--gold-deep); font-size:.62rem; }
.proof__ok strong{ font-size:1.05rem; font-weight:700; letter-spacing:-.02em; }
.proof__ok span:last-child{ font-size:.78rem; color:var(--muted); }
.proof__foot{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); text-align:center; }
.proof__ticks{ display:flex; justify-content:center; gap:6px; padding-top:10px; }
.proof__ticks i{ width:16px; height:3px; border-radius:2px; background:var(--line-2); transition:background var(--t) var(--ease); }
.proof__ticks i[data-on="true"]{ background:var(--gold); }
.proof__tag{
  position:absolute; z-index:3; white-space:nowrap;
  font-size:.74rem; font-weight:600; padding:9px 15px; border-radius:var(--r-pill);
  background:var(--white); color:var(--ink); box-shadow:var(--sh-3); border:1px solid var(--line);
  font-family:var(--f); letter-spacing:0; text-transform:none;
}
.proof__tag--a{ top:-4%; right:-11%; }
.proof__tag--b{ bottom:-4%; left:-11%; background:var(--gold); border-color:transparent; }

/* ============================ SECTION HEAD ============================ */
.head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s6);
  flex-wrap:wrap; margin-bottom:clamp(28px,3.4vw,48px); border-top:0; padding-top:0; }
.head::before{ content:none; }
.head__no{ font-family:var(--f); font-size:.82rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--gold-deep); }
.head__note{ font-family:var(--f); font-size:.86rem; letter-spacing:0; text-transform:none; color:var(--faint); }
.cutline{ display:none; }
.trap-tab{ clip-path:none; padding-inline:var(--s5); }

/* ============================ LAYER CARDS ============================ */
.layers{ display:grid; gap:var(--s5); }
.layer{
  position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,3.4vw,56px); align-items:center;
  padding:clamp(26px,3vw,44px); border-radius:var(--r-xl);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-2);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.layer:hover{ transform:translateY(-3px); box-shadow:var(--sh-3); }
.layer::before{ content:none; }
.layer:nth-child(even){ direction:rtl; }
.layer:nth-child(even) > *{ direction:ltr; }
.layer__meta{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s4); flex-wrap:wrap; }
.layer__no{ font-family:var(--f); font-size:.78rem; font-weight:600; letter-spacing:0;
  color:var(--gold-deep); background:var(--gold-wash); padding:5px 11px; border-radius:var(--r-pill); }
.layer__tag{ color:var(--faint); font-family:var(--f); font-size:.82rem; letter-spacing:0; text-transform:none; }
.layer__tag::before{ content:none; }
.layer h3{ font-size:var(--h3); margin-bottom:var(--s4); max-width:20ch; }
.layer p{ color:var(--muted); max-width:52ch; margin-bottom:var(--s5); font-size:1.0625rem; }
.layer__list{ display:grid; margin-bottom:var(--s5); border-top:1px solid var(--line); }
.layer__list li{ display:grid; grid-template-columns:22px minmax(0,1fr); gap:var(--s3);
  padding-block:11px; border-bottom:1px solid var(--line); font-size:.98rem; color:var(--muted); }
.layer__list li::before{ content:""; width:6px; height:6px; margin-top:9px; border-radius:50%; background:var(--gold); }
.layer__foot{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; }

/* ---- preview slab ---- */
.slab{ position:relative; perspective:1600px; min-height:0; display:grid; place-items:center; }
.slab__body{
  position:relative; width:100%; max-width:420px; aspect-ratio:16/11; border-radius:var(--r-l);
  background:var(--glass-strong); border:1px solid var(--glass-line);
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); box-shadow:var(--sh-4);
  transform:rotateY(var(--ry,-6deg)) rotateX(var(--rx,2deg));
  transition:transform 600ms var(--ease);
}
.slab__body::after{ content:none; }
.slab__edge{
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(to top, rgba(240,180,41,.22), transparent 84%);
  border-radius:0 0 var(--r-l) var(--r-l); pointer-events:none;
}
.slab__stamp{ position:absolute; right:15px; bottom:12px; font-family:var(--f-mono);
  font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.scr{ position:absolute; inset:8% 8% 16%; display:grid; align-content:start; gap:9px; color:var(--ink); }
.scr__chrome{ display:flex; align-items:center; gap:7px; padding-bottom:9px; border-bottom:1px solid var(--line); }
.scr__dot{ width:7px; height:7px; border-radius:50%; background:var(--line-2); flex:none; }
.scr__url{ font-family:var(--f-mono); font-size:.6rem; color:var(--faint); }
.scr__h{ font-size:1rem; font-weight:700; letter-spacing:-.025em; line-height:1.16; }
.scr__p{ font-size:.76rem; color:var(--muted); }
.scr__cta{ display:inline-flex; align-items:center; align-self:start; gap:5px;
  background:var(--gold); color:var(--ink); font-weight:700; font-size:.7rem; padding:7px 13px; border-radius:var(--r-pill); }
.scr__thumbs{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.scr__thumb{ aspect-ratio:5/3; border-radius:8px; background:var(--surface-2); }
.scr__row{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-block:8px; border-bottom:1px solid var(--line); font-size:.76rem; color:var(--muted); }
.scr__row:last-child{ border-bottom:0; }
.scr__row b{ font-family:var(--f-mono); font-weight:700; font-size:.74rem; color:var(--ink); }
.scr__row b.hot{ color:var(--gold-deep); }
.scr__msg{ max-width:84%; padding:8px 11px; font-size:.74rem; border-radius:14px 14px 14px 5px;
  background:var(--surface-2); color:var(--ink-2); }
.scr__msg--out{ margin-left:auto; border-radius:14px 14px 5px 14px; background:var(--gold); color:var(--ink); }
.scr__time{ font-family:var(--f-mono); font-size:.58rem; color:var(--faint); letter-spacing:.06em; }
.scr__pin{ display:flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600; }
.scr__pin svg{ width:13px; height:13px; color:var(--gold-deep); flex:none; }
.scr__bars{ display:flex; align-items:flex-end; justify-content:flex-start; gap:6px; height:42px; }
.scr__bars i{ flex:1 1 0; max-width:26px; background:var(--surface-3); border-radius:3px 3px 0 0; min-height:4px; }
.scr__bars i.on{ background:var(--gold); }
.slab__float{
  position:absolute; z-index:3; transform:translateZ(60px);
  padding:11px 15px; border-radius:var(--r) var(--r) var(--r) 6px;
  background:var(--gold); color:var(--ink); font-size:.82rem; font-weight:600; line-height:1.35;
  box-shadow:var(--sh-3); max-width:216px; right:-9%; top:-11%;
}
.slab__float--alt{ background:var(--white); color:var(--ink); border:1px solid var(--line);
  right:auto; left:-9%; top:auto; bottom:-8%; border-radius:var(--r) var(--r) 6px var(--r); transform:translateZ(44px); }

/* ============================ MATH BAND ============================ */
.math{ position:relative; overflow:hidden; background:var(--white); }
.math__flow{ display:none; }
.math__inner{ position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:clamp(28px,4vw,72px); align-items:center; }
.math__figure{ display:grid; gap:var(--s2); }
.math__num{ font-size:clamp(5rem,13vw,12rem); font-weight:800; letter-spacing:-.055em; line-height:.85; color:var(--gold-deep); }
.math__cap{ color:var(--faint); font-family:var(--f); letter-spacing:0; text-transform:none; font-size:.9rem; }
.math__body h2{ font-size:clamp(1.7rem,3vw,2.6rem); margin-bottom:var(--s4); max-width:19ch; }
.math__body p{ color:var(--muted); max-width:54ch; margin-bottom:var(--s5); }
.math__rows{ display:grid; border-top:1px solid var(--line); max-width:600px; }
.math__row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s5);
  padding-block:14px; border-bottom:1px solid var(--line); }
.math__row span{ color:var(--muted); font-size:.98rem; }
.math__row b{ font-family:var(--f-mono); font-weight:700; font-size:1rem; }
.math__row--win b{ color:var(--gold-deep); }

/* ============================ STEPS ============================ */
.steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s5); align-items:start; }
.step{ position:relative; padding:var(--s6); border-radius:var(--r-l);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.step:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.step__rule{ display:none; }
.step__no{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; margin-bottom:var(--s4);
  background:var(--gold-wash); color:var(--gold-deep);
  font-family:var(--f); font-size:.78rem; font-weight:700; letter-spacing:0;
}
.step h3{ font-size:1.1rem; margin-bottom:var(--s2); }
.step p{ color:var(--muted); font-size:.95rem; }

/* ============================ PLATE / PRICES ============================ */
.plate{ border-radius:var(--r-xl); border:1px solid var(--line); background:var(--white); overflow:hidden; box-shadow:var(--sh-2); }
.plate__head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  padding:var(--s6) clamp(22px,3vw,36px); border-bottom:1px solid var(--line); background:var(--surface-2); }
.plate__head h3{ font-size:1.2rem; }
.price-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--s5); align-items:baseline;
  padding:16px clamp(22px,3vw,36px); border-bottom:1px solid var(--line); transition:background var(--t) var(--ease); }
.price-row:last-child{ border-bottom:0; }
.price-row:hover{ background:var(--gold-wash); }
.price-row__name{ font-weight:600; font-size:1.02rem; }
.price-row__note{ display:block; color:var(--faint); font-weight:400; font-size:.9rem; margin-top:2px; }
.price-row__fig{ font-family:var(--f-mono); font-weight:700; font-size:1rem; white-space:nowrap; }
.price-row__fig i{ font-style:normal; font-weight:400; color:var(--faint); font-size:.8rem; }

/* ============================ TIERS ============================ */
.tiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:var(--s5); align-items:start; }
.tier{ position:relative; display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s6); border-radius:var(--r-xl);
  background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-2);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.tier:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.tier--pick{ border-color:var(--gold); box-shadow:var(--sh-3), 0 0 0 3px var(--gold-wash); }
.tier--pick::before{ content:none; }
.tier__flag{ position:absolute; top:-12px; left:var(--s6);
  background:var(--gold); color:var(--ink); padding:5px 13px; border-radius:var(--r-pill);
  font-family:var(--f); font-size:.72rem; font-weight:700; letter-spacing:0; text-transform:none; }
.tier__name{ font-size:1.12rem; font-weight:700; letter-spacing:-.02em; }
.tier__fig{ font-family:var(--f); font-weight:800; font-size:2rem; letter-spacing:-.04em; }
.tier__fig small{ font-size:.8rem; font-weight:500; color:var(--faint); letter-spacing:0; }
.tier__for{ color:var(--muted); font-size:.95rem; }
.tier__list{ display:grid; border-top:1px solid var(--line); }
.tier__list li{ display:grid; grid-template-columns:20px minmax(0,1fr); gap:var(--s2);
  padding-block:10px; border-bottom:1px solid var(--line); font-size:.94rem; color:var(--muted); }
.tier__list li::before{ content:""; width:6px; height:6px; margin-top:8px; border-radius:50%; background:var(--gold); }
.tier__note{ font-size:.86rem; color:var(--faint); margin-top:auto; }
.tier .btn{ width:100%; }

/* ============================ TABLES ============================ */
.tablewrap{ overflow:hidden; border-radius:var(--r-xl); border:1px solid var(--line); background:var(--white); box-shadow:var(--sh-2); }
.tbl{ width:100%; border-collapse:collapse; }
.tbl caption{ text-align:left; padding:var(--s5) clamp(20px,2.6vw,30px); border-bottom:1px solid var(--line);
  font-size:.86rem; color:var(--faint); background:var(--surface-2); font-family:var(--f); letter-spacing:0; text-transform:none; }
.tbl th, .tbl td{ padding:14px clamp(16px,2.2vw,26px); text-align:left; border-bottom:1px solid var(--line); font-size:.96rem; vertical-align:top; }
.tbl thead th{ font-size:.78rem; font-weight:600; color:var(--faint); font-family:var(--f); letter-spacing:0; text-transform:none; }
.tbl tbody th{ font-weight:600; color:var(--ink); }
.tbl td{ color:var(--muted); }
.tbl td.fig{ font-family:var(--f-mono); font-weight:700; color:var(--ink); white-space:nowrap; }
.tbl td.win{ color:var(--gold-deep); font-family:var(--f-mono); font-weight:700; }
.tbl tr:last-child th, .tbl tr:last-child td{ border-bottom:0; }

/* ============================ NOTES / LINKS / SEQ ============================ */
.notes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s5); }
.note{ padding:var(--s6); border-radius:var(--r-l); background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-1); }
.note::before{ content:none; }
.note h3{ font-size:1.05rem; margin-bottom:var(--s2); }
.note p{ color:var(--muted); font-size:.96rem; }

.links{ display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s4); }
.linkcard{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6);
  border-radius:var(--r-l); background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease); }
.linkcard:hover{ transform:translateY(-4px); box-shadow:var(--sh-3); }
.linkcard__kind{ color:var(--gold-deep); }
.linkcard h3{ font-size:1.2rem; }
.linkcard p{ color:var(--muted); font-size:.95rem; }
.linkcard__url{ margin-top:auto; display:flex; align-items:center; gap:7px; font-family:var(--f-mono); font-size:.76rem; }

.seq{ display:grid; border-top:1px solid var(--line); }
.seq li{ display:grid; grid-template-columns:clamp(44px,5vw,66px) minmax(0,1fr); gap:var(--s4);
  padding-block:var(--s5); border-bottom:1px solid var(--line); align-items:start; }
.seq__no{ font-family:var(--f); font-weight:700; font-size:.86rem; color:var(--gold-deep); letter-spacing:0; }
.seq h3{ font-size:1.08rem; margin-bottom:4px; }
.seq p{ color:var(--muted); font-size:.96rem; }

/* ============================ FAQ ============================ */
.qa{ display:grid; border-top:1px solid var(--line); }
.qa__item{ border-bottom:1px solid var(--line); }
.qa__q{ width:100%; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s6);
  padding-block:22px; text-align:left; font-size:1.08rem; font-weight:600; letter-spacing:-.02em;
  transition:color var(--t) var(--ease); color:var(--ink); }
.qa__q:hover{ color:var(--gold-deep); }
.qa__sign{ position:relative; width:16px; height:16px; flex:none; margin-top:6px; }
.qa__sign::before,.qa__sign::after{ content:""; position:absolute; inset:50% 0 auto 0; height:2px;
  background:currentColor; border-radius:2px; transition:transform 300ms var(--spring); }
.qa__sign::after{ transform:rotate(90deg); }
.qa__item[data-open="true"] .qa__sign::after{ transform:rotate(0deg); }
.qa__item[data-open="true"] .qa__q{ color:var(--gold-deep); }
.qa__a{ overflow:hidden; height:0; transition:height 340ms var(--ease); }
.qa__a > div{ padding-bottom:22px; color:var(--muted); max-width:70ch; }

/* ============================ FORM ============================ */
.formwrap{ padding:clamp(24px,3vw,40px); border-radius:var(--r-xl); background:var(--white);
  border:1px solid var(--line); box-shadow:var(--sh-2); }
.form{ display:grid; gap:var(--s4); }
.form__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--s4); }
.field{ display:grid; gap:7px; }
.field > span{ font-size:.86rem; font-weight:500; color:var(--ink-2); font-family:var(--f); letter-spacing:0; text-transform:none; }
.field input, .field select, .field textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-s); font-size:16px;
  background:var(--surface-2); border:1px solid transparent; color:var(--ink); font-family:var(--f);
  transition:background var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  background:var(--white); border-color:var(--gold); box-shadow:0 0 0 4px var(--gold-wash); outline:none;
}
.field input::placeholder, .field textarea::placeholder{ color:var(--faint); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form__note{ font-size:.9rem; color:var(--faint); }
.callpanel{ display:grid; gap:var(--s5); padding:clamp(26px,3vw,40px); border-radius:var(--r-xl);
  background:var(--gold-wash); border:1px solid rgba(240,180,41,.35); }
.callpanel__num{ font-size:clamp(1.9rem,4vw,2.9rem); font-weight:800; letter-spacing:-.04em;
  display:inline-flex; align-items:center; gap:var(--s3); }
.callpanel__num:hover{ color:var(--gold-deep); }
.contact__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(26px,3.4vw,52px); align-items:start; }

/* ============================ CLOSE ============================ */
.close{ position:relative; overflow:hidden; background:var(--white); padding-block:clamp(72px,9vw,140px); }
.close::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 60% at 50% 112%, rgba(240,180,41,.30), transparent 70%); }
.close__inner{ position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:clamp(28px,4vw,72px); align-items:end; }
.close h2{ font-size:clamp(2rem,4.6vw,3.8rem); max-width:14ch; margin-top:var(--s3); }
.close__side{ display:grid; gap:var(--s5); justify-items:start; }
.close p{ color:var(--muted); max-width:44ch; }
.close__cta{ display:grid; gap:var(--s3); width:min(100%,300px); }
.close .mono{ color:var(--gold-deep); }

/* ============================ FOOTER ============================ */
.foot{ background:var(--surface-2); color:var(--ink); padding-block:clamp(44px,5vw,68px) var(--s6); border-top:1px solid var(--line); }
.foot__grid{ display:grid; grid-template-columns:minmax(150px,.9fr) minmax(0,2fr) minmax(0,.9fr) minmax(0,1.05fr);
  gap:clamp(24px,3vw,48px); padding-bottom:var(--s8); border-bottom:1px solid var(--line); }
.foot__brand{ display:flex; align-items:center; align-self:start; }
.foot__brand svg{ width:34px; height:34px; }
.foot__col h4{ font-size:.82rem; font-weight:600; color:var(--faint); margin-bottom:var(--s4);
  font-family:var(--f); letter-spacing:0; text-transform:none; }
.foot__col ul{ display:grid; gap:10px; }
.foot__col--wide ul{ grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s5); }
.foot__col a, .foot__col li{ color:var(--ink-2); font-size:.96rem; transition:color var(--t) var(--ease); }
.foot__col a:hover{ color:var(--gold-deep); }
.foot__base{ display:flex; justify-content:space-between; align-items:center; gap:var(--s5); flex-wrap:wrap;
  padding-top:var(--s5); color:var(--faint); }

/* ============================ HIDDEN LEGACY ============================ */
.rail{ display:none; }
.cursor{ display:none; }
.pre{ display:none; }

/* ============================ CALL BAR (phone) ============================ */
.callbar{ display:none; }
@media (max-width:760px){
  .callbar{
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:var(--glass-strong); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    border-top:1px solid var(--line);
  }
  .callbar__btn{ display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px;
    border-radius:var(--r-pill); font-size:1rem; font-weight:600; }
  .callbar__btn svg{ width:17px; height:17px; }
  .callbar__btn--call{ background:var(--gold); color:var(--ink); }
  .callbar__btn--cta{ background:var(--ink); color:#fff; }
  body{ padding-bottom:84px; }
}

/* ============================ REVEALS ============================ */
.js [data-rv]{ opacity:0; transform:translateY(18px);
  transition:opacity 700ms var(--ease), transform 700ms var(--ease);
  transition-delay:calc(var(--d,0) * 70ms); }
.js [data-rv].is-in{ opacity:1; transform:none; }
.no-js [data-rv]{ opacity:1; transform:none; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1080px){
  .hero__grid{ grid-template-columns:1fr; gap:var(--s10); }
  .hero__proof{ order:2; }
  .layer{ grid-template-columns:1fr; }
  .layer:nth-child(even){ direction:ltr; }
  .math__inner{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .close__inner{ grid-template-columns:1fr; align-items:start; }
  .contact__grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .foot__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .foot__brand, .foot__col--wide{ grid-column:1 / -1; }
}
@media (max-width:760px){
  :root{ --band:clamp(48px,8vw,72px); }
  .nav{ padding:12px var(--pad-x); }
  .nav .btn{ display:none; }
  .nav__tel{ display:none; }
  .burger{ display:grid; }
  .nav__brand{ width:42px; height:42px; }
  .nav__side{ padding:0; }
  .hero{ min-height:auto; padding-top:104px; }
  .hero h1{ max-width:100%; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1; }
  .steps{ grid-template-columns:1fr; }
  .layer{ padding:var(--s5); border-radius:var(--r-l); }
  .slab__body{ max-width:300px; aspect-ratio:auto; }
  .scr{ position:relative; inset:auto; padding:18px 16px 30px; }
  .proof{ width:min(310px,88%); }
  .proof__tag--a{ right:-2%; top:-3%; }
  .proof__tag--b{ left:-2%; bottom:-3%; }
  .tbl, .tbl tbody, .tbl tr, .tbl td{ display:block; width:100%; }
  .tbl thead{ display:none; }
  .tbl tr{ padding:var(--s5); border-bottom:1px solid var(--line); }
  .tbl td{ border:0; padding:3px 0; }
  .tbl td[data-label]::before{ content:attr(data-label); display:block; font-size:.76rem; color:var(--faint); }
  .spec-strip li{ border-right:0; padding-right:0; margin-right:var(--s5); }
  .foot__col a, .foot__col li{ display:flex; align-items:center; min-height:44px; }
  .foot__col ul{ gap:0; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .amb i{ animation:none; }
  .js [data-rv]{ opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   PAGE HEADER (inner pages)
   This was the break: .phero had no rules at all, so every inner page put its
   h1 at 18px from the top, underneath an 82px fixed nav, at full container
   width running under the phone pill.
   ========================================================================== */
.phero{
  position:relative; overflow:hidden; background:var(--white);
  padding:clamp(132px,17vh,180px) 0 clamp(48px,6vw,84px);
  border-bottom:1px solid var(--line);
}
.phero__inner{ position:relative; z-index:1; }
.phero__eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:var(--s5);
  padding:8px 16px; border-radius:var(--r-pill);
  background:var(--surface-2); color:var(--ink-2);
  font-family:var(--f); font-size:.82rem; font-weight:500; letter-spacing:0; text-transform:none;
}
.phero__eyebrow::after{ content:none; }
.phero h1{ font-size:clamp(2.2rem,4.4vw,3.9rem); max-width:17ch; margin-bottom:var(--s5); }
.phero .lede{ max-width:60ch; }
.contact__side{ display:grid; }

/* ==========================================================================
   BRAND TILE
   The monogram was a small gold chip floating inside a white circle, which
   read as a mistake. The island IS the tile now: a gold rounded square with
   the N knocked out, the same mark as the favicon.
   ========================================================================== */
.nav__brand{
  width:44px; height:44px; padding:0; border-radius:13px;
  background:var(--gold); border:0; box-shadow:var(--sh-2);
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition:transform var(--t) var(--spring), box-shadow var(--t) var(--ease);
}
.nav[data-stuck="true"] .nav__brand{ background:var(--gold); box-shadow:var(--sh-2); }
.nav__brand:hover{ transform:scale(1.06) rotate(-3deg); box-shadow:var(--sh-3); }
.nav__brand svg{ width:44px; height:44px; border-radius:13px; }
.foot__brand svg{ width:38px; height:38px; border-radius:11px; }

/* the dock steps out of the way when you scroll down, back when you scroll up */
@media (hover:hover) and (min-width:761px){
  .dock{ transition:transform 320ms var(--ease), opacity 240ms var(--ease); }
  .dock[data-hide="true"]{ transform:translateX(-50%) translateY(140%); opacity:0; pointer-events:none; }
}

/* ==========================================================================
   PINNED CAPABILITIES  ·  the home page signature
   Seven cards stacked vertically was just a long scroll. Here the visual pins
   in the middle of the viewport and swaps as the copy moves past it, so the
   whole story happens in one screen. Sticky, not scroll hijacking: the wheel
   behaves exactly as the browser intends.
   ========================================================================== */
.pin{ position:relative; display:grid; grid-template-columns:28px minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,72px); }

.pin__rail{ position:sticky; top:50vh; align-self:start; display:grid; gap:10px; height:0; padding-top:4px; }
.pin__dot{
  width:8px; height:8px; padding:0; border-radius:50%; background:var(--line-2);
  transition:transform 260ms var(--spring), background 200ms var(--ease);
}
.pin__dot[data-on="true"]{ background:var(--gold); transform:scale(1.7); }
.pin__dot:hover{ background:var(--gold-deep); }

.pin__steps{ display:grid; }
.pin__step{
  min-height:76vh; display:flex; flex-direction:column; justify-content:center;
  padding-block:var(--s8);
  opacity:.32; transform:translateY(0);
  transition:opacity 420ms var(--ease);
}
.pin__step[data-on="true"]{ opacity:1; }
.pin__no{
  display:inline-block; align-self:flex-start; margin-bottom:var(--s4);
  padding:5px 12px; border-radius:var(--r-pill);
  background:var(--gold-wash); color:var(--gold-deep);
  font-size:.78rem; font-weight:600;
}
.pin__step h3{ font-size:clamp(1.6rem,2.8vw,2.5rem); margin-bottom:var(--s4); max-width:18ch; }
.pin__step p{ color:var(--muted); font-size:1.0625rem; max-width:46ch; margin-bottom:var(--s5); }

.pin__stage{ position:sticky; top:0; height:100svh; display:grid; place-items:center; }
.pin__cards{ position:relative; width:100%; max-width:430px; aspect-ratio:16/11; }
.pin__card{
  position:absolute; inset:0;
  opacity:0; transform:translateY(22px) scale(.97);
  transition:opacity 460ms var(--ease), transform 620ms var(--ease);
  pointer-events:none;
}
.pin__card[data-on="true"]{ opacity:1; transform:none; pointer-events:auto; }
.pin__card .slab__body{ transform:rotateY(-7deg) rotateX(2deg); max-width:none; width:100%; }

@media (max-width:1080px){
  /* on a narrow screen the pin becomes an ordinary stack, which is the right
     behaviour: there is no room to hold a visual beside the copy */
  .pin{ grid-template-columns:1fr; gap:0; }
  .pin__rail{ display:none; }
  .pin__stage{ display:none; }
  .pin__step{
    min-height:0; opacity:1; padding:var(--s6); margin-bottom:var(--s4);
    background:var(--white); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--sh-2);
  }
}
@media (prefers-reduced-motion:reduce){
  .pin__step{ opacity:1; }
  .pin__card{ transition:none; }
}

@media (min-width:1081px){ .pin__step{ min-height:64vh; } }