:root{
  --ink:#fff; --mute:rgba(255,255,255,.62); --line:rgba(255,255,255,.18);
  --glass:rgba(18,18,20,.52);
  --gut:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;color:var(--ink);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font:400 clamp(16px,1.2vw,19px)/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;background:#000}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Stage */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
.bg{position:absolute;inset:-8%;background-size:cover;background-position:center;opacity:0;
  transition:opacity 1.4s var(--ease);will-change:transform,opacity;filter:saturate(.85) contrast(1.05)}
.bg.on{opacity:1}
.veil{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 40%,rgba(0,0,0,.05),rgba(0,0,0,.65)),
  linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.45))}
.grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

main{position:relative;z-index:1}
.sec{position:relative;min-height:100vh;display:flex;align-items:center;padding:18vh var(--gut)}
.wrap{width:100%;max-width:1280px;margin:0 auto}
.wrap.narrow{max-width:760px}

/* Type */
.mega{font-weight:800;letter-spacing:-.05em;line-height:.84;font-size:clamp(72px,19vw,300px);text-transform:none}
.mega span{display:block;overflow:hidden;padding-bottom:.06em}
.mega span>em{display:block;font-style:normal;will-change:transform}
.mega.small{font-size:clamp(56px,12vw,190px)}
.big{font-weight:700;letter-spacing:-.035em;line-height:1.04;font-size:clamp(34px,6vw,96px);max-width:16ch}
.statement .big{font-weight:600;font-size:clamp(26px,4.4vw,68px);line-height:1.12;max-width:26ch}
.eyebrow{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);margin-bottom:1.4rem}
.lede{font-size:clamp(18px,2vw,28px);max-width:30ch;color:rgba(255,255,255,.85);margin-top:2.2rem;line-height:1.35}
.muted,.note,.credit{color:var(--mute)}
.note{max-width:56ch;margin-top:2.6rem}
.reveal .w{display:inline-block;opacity:.14}

/* Hero */
.hero{min-height:112vh;align-items:flex-end}
.hero-icon{width:84px;height:84px;border-radius:22px;margin-bottom:2.2rem;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.cue{margin-top:3.5rem;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);display:flex;align-items:center;gap:14px}
.cue i{display:block;width:1px;height:56px;background:linear-gradient(#fff,transparent);animation:cue 2s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* Showcase */
.showcase{padding:0;display:block;min-height:0}
.pin{height:100vh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;padding:0 var(--gut);max-width:1400px;margin:0 auto}
.steps{position:relative;min-height:15em}
.step{position:absolute;inset:0 auto auto 0;opacity:0;transform:translateY(40px);transition:opacity .6s var(--ease),transform .8s var(--ease);max-width:30ch}
.step.is-on{opacity:1;transform:none}
.step h2{font-size:clamp(36px,5vw,76px);letter-spacing:-.04em;line-height:1;margin-bottom:1.2rem}
.step p{color:rgba(255,255,255,.8);font-size:clamp(17px,1.5vw,22px)}
.phone-wrap{display:flex;justify-content:center;perspective:1600px}
.phone{position:relative;aspect-ratio:1206/2622;height:min(78vh,760px);border-radius:clamp(30px,4.2vh,52px);background:#050505;
  padding:0;box-shadow:0 0 0 2px #2a2a2c,0 0 0 9px #0b0b0c,0 0 0 10px #3a3a3d,0 60px 140px rgba(0,0,0,.7);overflow:hidden;transform-style:preserve-3d}
.phone .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--ease)}
.phone .shot.is-on{opacity:1}
.phone::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,rgba(255,255,255,.14),transparent 30%);pointer-events:none}

/* Categories */
.cat-list{list-style:none;margin-top:5rem;border-top:1px solid var(--line)}
.cat-list li{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.6rem 0;border-bottom:1px solid var(--line);
  transition:padding .5s var(--ease),background .5s}
.cat-list li:hover{padding-left:1.2rem}
.cat-list b{font-size:clamp(26px,4vw,60px);letter-spacing:-.035em;font-weight:700}
.cat-list span{color:var(--mute);text-align:right;max-width:34ch}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:4.5rem}
.cards.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{padding:2rem;border-radius:28px;background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4)}
.card h3{font-size:1.5rem;letter-spacing:-.02em;margin-bottom:.7rem}
.card p{color:rgba(255,255,255,.75)}
.meter{margin-top:3.5rem;height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:100%;background:#fff;transform-origin:left;transform:scaleX(.5);border-radius:99px}

/* Duo */
.duo{display:flex;justify-content:center;gap:clamp(16px,3vw,48px);margin:5rem 0 4rem;perspective:1600px}
.phone.small{height:min(56vh,520px);margin:0;position:relative}
.phone.small img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.duo figure{position:relative}
.duo figcaption{position:absolute;left:0;right:0;top:calc(100% + 22px);text-align:center;color:var(--mute);font-size:.85rem;letter-spacing:.14em;text-transform:uppercase}
.bullets{list-style:none;display:grid;gap:1.2rem;max-width:62ch;margin-top:5rem}
.bullets li{padding-left:1.4rem;position:relative;color:rgba(255,255,255,.8)}
.bullets li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:#fff}
.bullets b{color:#fff}

/* Privacy */
.privacy{align-items:flex-start}
.legal{margin-top:3rem;padding:clamp(24px,4vw,56px);border-radius:32px;background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);backdrop-filter:blur(30px) saturate(1.3)}
.legal h3{font-size:1.15rem;margin:2.2rem 0 .6rem;letter-spacing:-.01em}
.legal h3:first-child{margin-top:0}
.legal p{color:rgba(255,255,255,.8)}
.legal a{text-underline-offset:3px}

/* Contact */
.contact{min-height:100vh}
.mail{display:inline-block;margin:3rem 0 1rem;font-size:clamp(24px,4vw,56px);font-weight:700;letter-spacing:-.03em;text-decoration:none;border-bottom:2px solid #fff}
footer{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;margin-top:8rem;padding-top:1.6rem;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}
footer a{text-decoration:none}footer a:hover{color:#fff}
.credit a{text-underline-offset:3px}
.credit{font-size:.78rem;margin-top:1.2rem;opacity:.7}

/* Dock */
.dock{position:fixed;top:max(18px,env(safe-area-inset-top));right:var(--gut);z-index:50;display:flex;gap:8px;align-items:center}
.dock-btn{padding:.62rem 1.1rem;border-radius:99px;font-size:.84rem;font-weight:600;letter-spacing:.02em;background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);transition:background .3s,color .3s,transform .3s var(--ease)}
.dock-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.16)}
.dock-btn[aria-expanded=true]{background:#fff;color:#000}
.pop{position:absolute;top:calc(100% + 12px);right:0;min-width:240px;padding:10px;border-radius:24px;background:rgba(14,14,16,.78);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(32px) saturate(1.5);backdrop-filter:blur(32px) saturate(1.5);box-shadow:0 30px 80px rgba(0,0,0,.6);
  transform-origin:top right;animation:pop .35s var(--ease)}
.pop[hidden]{display:none}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.96)}}
.pop a{display:flex;justify-content:space-between;gap:2rem;padding:.75rem 1rem;border-radius:16px;text-decoration:none;font-size:.95rem}
.pop a:hover,.pop a:focus-visible{background:rgba(255,255,255,.12)}
.pop a small{color:var(--mute)}

/* Track */
.track{position:fixed;right:max(16px,2.2vw);bottom:22px;z-index:40;width:62px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:6px;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}
.track svg{width:100%;overflow:visible}
.lane{stroke:rgba(255,255,255,.28);stroke-width:1.6}
.lane.in{fill:rgba(255,255,255,.05)}
.trail{stroke:#fff;stroke-width:3.4}
.finish{stroke:#fff;stroke-width:2.4;opacity:.9}
#runner{fill:#fff;stroke:#000;stroke-width:2}
#runner{animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{r:6.5}}
.track-pct{font-size:.7rem;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}

/* Mobile */
@media(max-width:820px){
  .pin{grid-template-columns:1fr;align-content:center;gap:2rem;padding-top:11vh}
  .steps{min-height:13em;order:2}
  .phone{height:min(46vh,440px)}
  .dock-btn{padding:.5rem .8rem;font-size:.78rem}
  .duo{flex-direction:column;align-items:center;gap:60px}
  .phone.small{height:min(60vh,520px)}
  .cat-list li{flex-direction:column;gap:.3rem}.cat-list span{text-align:left}
  .track{width:44px;bottom:14px}
  .track-pct{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01s!important}
  .reveal .w{opacity:1}
}