@font-face{font-family:"Archivo";src:url("../fonts/archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --bg:#07090f;
  --surface:#11151f;
  --ink:#eef1f6;
  --muted:#a3abb9;
  --accent:#5a9bfc;
  --accent-ink:#07090f;
  --paper:#eef1f6;
  --paper-ink:#07090f;
  --m:clamp(16px,2.4vw,32px);
  --gap:clamp(120px,13vw,200px);
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-head:clamp(2.5rem,1.2rem + 5vw,5.5rem);
  --step-display:clamp(4.5rem,12vw,12.5rem);
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-expo:cubic-bezier(0.16,1,0.3,1);
  --bar-bg:transparent;--bar-ink:var(--ink);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-size:var(--step-body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.skip{position:absolute;left:var(--m);top:-80px;z-index:100;background:var(--paper);color:var(--paper-ink);padding:12px 16px;text-decoration:none}
.skip:focus{top:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 1.6em;border:0;border-radius:999px;font-weight:600;font-size:var(--step-body);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform 140ms var(--ease-out),background-color 180ms ease,color 180ms ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--accent);color:var(--accent-ink)}
.btn-accent:hover{background:var(--ink)}
.btn-ink{background:var(--paper-ink);color:var(--paper)}
.btn-ink:hover{background:var(--paper);color:var(--paper-ink)}

/* Bar */
.bar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:24px;padding:16px var(--m);background:var(--bar-bg);color:var(--bar-ink);transition:background-color 300ms ease,color 300ms ease,transform 450ms var(--ease-out)}
.bar.is-solid{--bar-bg:rgba(7,9,15,.92)}
.bar.is-hidden{transform:translateY(-100%)}
.wordmark{margin-right:auto;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:1.5rem;line-height:1;text-decoration:none}
.bar nav ul{display:flex;gap:clamp(16px,2vw,32px)}
.bar nav a{font-size:var(--step-small);font-weight:500;text-decoration:none;padding:12px 0;opacity:.7;transition:opacity 180ms ease}
.bar nav a:hover,.bar nav a.is-active{opacity:1}
.bar nav a.is-active{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.bar-cta{align-self:center;min-height:42px;padding:0 1.3em;font-size:var(--step-small)}
@media (max-width:760px){.bar nav{display:none}}

/* ---------- Particle field ---------- */
.field{position:relative;height:720svh;background:var(--bg)}
.field-stage{position:sticky;top:0;height:100svh;overflow:clip}
.field-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.field-fallback{position:absolute;left:0;right:0;top:34%;text-align:center;font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.85;font-size:var(--step-display);color:var(--ink)}
.has-field .field-fallback{display:none}
.field-copy{position:absolute;left:var(--m);bottom:clamp(28px,6vh,64px);max-width:min(580px,46vw);opacity:0;visibility:hidden;transform:translateY(24px);pointer-events:none;transition:opacity 450ms ease,transform 700ms var(--ease-expo),visibility 0s linear 450ms}
.field-copy.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity 500ms ease 120ms,transform 800ms var(--ease-expo) 120ms,visibility 0s}
.field-copy h1,.field-copy h2{font-size:var(--step-lead);font-weight:700;line-height:1.2;margin-bottom:10px;color:var(--bh,var(--bc))}
.field-copy[data-step]:not([data-step="0"]) h2{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(2.25rem,1.4rem + 3vw,4rem);line-height:.9;margin-bottom:16px}
.field-copy .lede{font-size:var(--step-lead);line-height:1.35;margin-bottom:24px}
.btn-brand{background:var(--bc);color:var(--bt);transition:transform 140ms var(--ease-out),background-color 400ms ease,color 400ms ease}
.btn-brand:hover{background:var(--ink);color:var(--bg)}
.brand-index{position:absolute;right:var(--m);bottom:clamp(28px,6vh,64px);display:grid;gap:6px;text-align:right}
.brand-index li{display:grid;justify-items:end;opacity:.32;transition:opacity 400ms ease,transform 500ms var(--ease-out);transform:translateX(0)}
.brand-index b{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(1.5rem,2.4vw,2.5rem);line-height:1}
.brand-index li.is-on{opacity:1;transform:translateX(-12px)}
.brand-index li.is-on b{color:var(--on,var(--ink))}
.brand-index b{transition:color 400ms ease}
.field-hint{position:absolute;left:50%;bottom:clamp(30px,calc(6vh + 2px),66px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 18px 10px 12px;border-radius:999px;background:rgba(17,21,31,.7);border:1px solid rgba(238,241,246,.1);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:opacity 500ms ease,transform 600ms var(--ease-expo);animation:hintIn 900ms var(--ease-expo) 1.8s both}
.field-hint .mouse{position:relative;width:16px;height:24px;border:1.5px solid var(--muted);border-radius:9px;flex:none}
.field-hint .mouse::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:5px;margin-left:-1px;border-radius:2px;background:var(--accent);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(7px);opacity:0}100%{opacity:0}}
@keyframes hintIn{from{opacity:0;transform:translate(-50%,12px)}}
@media (max-width:1100px){.field-hint{display:none}}
.field[data-step]:not([data-step="0"]) .field-hint{opacity:0;transform:translate(-50%,12px)}
@media (hover:none){.field-hint{display:none}}
@media (max-width:760px){
  .field{height:620svh}
  .field-copy{max-width:none;right:var(--m)}
  .brand-index{display:none}
  .brand-index li{justify-items:start;display:none}
  .brand-index li.is-on{display:grid;transform:none}
  .brand-index b{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){
  .field{height:auto}
  .field-stage{position:relative;height:auto;min-height:100svh;padding-bottom:40px}
  .field-copy.is-on,.brand-index{position:relative;left:auto;right:auto;bottom:auto;margin:0 var(--m)}
  .field-stage{display:flex;flex-direction:column;justify-content:flex-end;gap:32px}
  .field-canvas{height:60svh;position:relative}
  .brand-index li{opacity:1}
  .field-hint{display:none}
}

/* ---------- Section heads ---------- */
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:end;padding:0 var(--m);margin-bottom:clamp(40px,5vw,72px)}
.sec-head h2{grid-column:1/8;font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:var(--step-head)}
.sec-head p{grid-column:8/13;font-size:var(--step-lead);line-height:1.35;color:var(--muted)}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}.sec-head h2,.sec-head p{grid-column:auto}}

/* ---------- Work: stacked cards ---------- */
.work{margin-top:var(--gap)}
.stack{display:grid;gap:0;padding:0 var(--m)}
.card{position:sticky;top:clamp(76px,9vh,96px);min-height:min(78svh,760px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,3vw,56px);align-items:center;padding:clamp(28px,3.4vw,56px);margin-bottom:6vh;background:var(--g);color:var(--t);border-radius:16px;overflow:clip;transform-origin:50% 0}
.card-copy h3{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:var(--step-head);margin-bottom:20px}
.card-copy p{font-size:var(--step-lead);line-height:1.35;color:var(--ink);margin-bottom:24px;max-width:32ch}
.card-link{font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:.5em;min-height:44px}
.card-link::after{content:"\2197";transition:transform 240ms var(--ease-out)}
.card-link:hover::after{transform:translate(3px,-3px)}
.shot{border-radius:10px;overflow:clip;background:#000;aspect-ratio:16/10}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform 900ms var(--ease-out)}
.card:hover .shot img{transform:scale(1.03)}
.more{padding:clamp(24px,3vw,40px) var(--m) 0;font-size:var(--step-lead);color:var(--muted);max-width:70ch}
.more a{color:var(--ink);font-weight:600}
@media (max-width:860px){
  .card{grid-template-columns:1fr;min-height:0;top:72px;align-content:start}
  .shot{order:-1}
}

/* ---------- Numbers ---------- */
.numbers{margin-top:var(--gap);padding:0 var(--m)}
.numbers h2{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:var(--step-head);margin-bottom:clamp(36px,4vw,56px)}
.figures{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.figures b{display:block;font-weight:800;font-stretch:62%;line-height:.82;font-size:var(--step-display);color:var(--accent);font-variant-numeric:tabular-nums}
.figures span{display:block;margin-top:12px;font-size:var(--step-lead);line-height:1.3;max-width:16ch}
@media (max-width:860px){.figures{grid-template-columns:1fr 1fr;row-gap:40px}}

/* ---------- Services: fits one screen ---------- */
.services{margin-top:var(--gap);min-height:100svh;padding:clamp(88px,11vh,120px) var(--m) clamp(28px,5vh,56px);display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,4vh,48px)}
.svc-head{display:flex;align-items:end;justify-content:space-between;gap:24px 48px;flex-wrap:wrap}
.svc-head h2{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:clamp(2.5rem,1.2rem + 4vw,5rem)}
.svc-head p{font-size:var(--step-body);color:var(--muted);max-width:38ch}
.svc-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,48px);align-items:stretch}
.svc-label{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:var(--step-small);font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.svc-label span{color:var(--accent)}
.svc-list{border-top:1px solid rgba(238,241,246,.14)}
.svc{position:relative;border-bottom:1px solid rgba(238,241,246,.14);overflow:clip}
.svc::before{content:"";position:absolute;inset:0;background:var(--c);transform:scaleY(0);transform-origin:50% 100%;transition:transform 520ms var(--ease-expo)}
.svc a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 20px;padding:clamp(12px,2.1vh,22px) 12px;text-decoration:none;transition:color 300ms ease}
.svc b{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.9;font-size:clamp(1.875rem,1rem + 2.6vw,3.75rem);transition:transform 520ms var(--ease-expo)}
.svc span{grid-column:1;font-size:var(--step-small);line-height:1.4;color:var(--muted);transition:color 300ms ease}
.svc i{grid-column:2;grid-row:1/3;font-style:normal;font-size:clamp(1.5rem,2vw,2.25rem);transition:transform 520ms var(--ease-expo)}
.svc:hover::before,.svc:focus-within::before{transform:scaleY(1)}
.svc:hover a,.svc:focus-within a,.svc:hover span,.svc:focus-within span{color:var(--bg)}
.svc:hover b{transform:translateX(14px)}
.svc:hover i{transform:rotate(45deg)}
.svc-peek{position:fixed;left:0;top:0;z-index:40;width:clamp(220px,20vw,320px);aspect-ratio:16/10;border-radius:12px;overflow:clip;pointer-events:none;opacity:0;transition:opacity 260ms ease}
.svc-peek img{width:100%;height:100%;object-fit:cover;object-position:top}
.svc-peek.is-on{opacity:1}
.hire{background:var(--accent);color:var(--accent-ink);border-radius:20px;padding:clamp(24px,3vw,44px);display:flex;flex-direction:column;gap:clamp(16px,2.4vh,26px)}
.hire .svc-label{margin:0;color:rgba(7,9,15,.7)}.hire .svc-label span{color:var(--accent-ink)}
.hire h3{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:clamp(2.25rem,1rem + 3vw,4rem)}
.hire-points{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.hire-points b{display:block;font-weight:800;margin-bottom:2px}
.hire-points span{display:block;font-size:var(--step-small);line-height:1.45}
.hire-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.btn-line{background:transparent;color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--accent-ink)} /* taste-skill-ignore: outline button */
.btn-line:hover{background:var(--accent-ink);color:var(--accent)}
@media (max-width:960px){.services{min-height:0}.svc-grid{grid-template-columns:1fr}}
@media (hover:none),(max-width:960px){.svc-peek{display:none}}

/* ---------- Stack: tech grid with a cursor spotlight ---------- */
.stackgrid{margin-top:var(--gap)}
.tech{--mx:-999px;--my:-999px;margin:0 var(--m);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;padding:1px;border-radius:18px;overflow:clip;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(130,180,255,1),transparent 70%),rgba(238,241,246,.1)}
.tech li{--x:50%;--y:50%;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:28px;aspect-ratio:1/1;padding:clamp(16px,1.6vw,26px);background:var(--bg);overflow:clip;transform-style:preserve-3d;transition:transform 500ms var(--ease-expo)}
.tech li::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--x) var(--y),color-mix(in srgb,var(--c) 28%,transparent),transparent 70%);opacity:0;transition:opacity 400ms ease}
.tech li:hover::before{opacity:1}
.tech svg{position:relative;width:clamp(40px,4.4vw,68px);height:auto;fill:var(--muted);opacity:.55;transition:fill 400ms ease,opacity 400ms ease,transform 600ms var(--ease-expo)}
.tech svg.wide{width:clamp(80px,8.5vw,130px);margin:-14px 0 -14px -6px}
.tech li:hover svg{fill:var(--c);opacity:1;transform:translateY(-6px) scale(1.18) rotate(-6deg)}
.tech b{position:relative;display:block;font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(1.25rem,.8rem + 1vw,1.875rem);line-height:.95}
.tech span{position:relative;display:block;margin-top:4px;font-size:var(--step-small);color:var(--muted)}
.tech li:hover b{color:var(--c)}
.tech li>div{position:relative}
@media (max-width:1100px){.tech{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:640px){.tech{grid-template-columns:repeat(3,minmax(0,1fr))}.tech li{gap:12px}.tech span{display:none}}

/* ---------- Speed check ---------- */
.speed{margin-top:var(--gap);padding:0 var(--m)}
.speed-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.speed-copy{grid-column:1/7}
.speed-copy h2{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:var(--step-head);margin-bottom:24px}
.speed-lede{font-size:var(--step-lead);line-height:1.35;max-width:30ch;margin-bottom:32px}
.speed-form label{display:block;font-size:var(--step-small);margin-bottom:8px;color:var(--muted)}
.speed-row{display:flex;gap:12px}
.speed-row input{flex:1;min-width:0;min-height:56px;padding:0 20px;border-radius:999px;border:0;background:var(--surface);color:var(--ink);font-size:var(--step-body)}
.speed-row input::placeholder{color:var(--muted)}
.speed-row .btn{min-height:56px}
.speed-status{min-height:1.5em;margin-top:14px;color:var(--muted)}
.speed-result{grid-column:8/13;background:var(--surface);border-radius:16px;padding:clamp(28px,3vw,44px)}
.dial{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}
.dial b{font-weight:800;font-stretch:62%;line-height:.82;font-size:var(--step-display);font-variant-numeric:tabular-nums;transition:color 400ms ease}
.dial b.is-good{color:#3ddc84}.dial b.is-mid{color:#ffb547}.dial b.is-poor{color:#ff5a4f}
.dial span{color:var(--muted)}
.vitals{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px}
.vitals dt{font-size:var(--step-small);color:var(--muted)}
.vitals dd{font-size:var(--step-lead);font-weight:700;font-variant-numeric:tabular-nums}
.speed-next{display:inline-block;margin-top:28px;font-weight:700;color:var(--accent)}
.speed-result.is-loading .dial b{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (max-width:860px){.speed-grid{grid-template-columns:1fr}.speed-copy,.speed-result{grid-column:auto}.speed-row{flex-direction:column}}

/* ---------- About ---------- */
.about{margin-top:var(--gap);padding:0 var(--m)}
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.about-side{grid-column:1/5;position:sticky;top:110px;display:grid;gap:28px}
.about-photo{width:100%;max-width:400px;border-radius:16px;overflow:clip;background:var(--surface);clip-path:inset(0 0 0 0 round 16px)}
.about-photo img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter 700ms ease}
.about-photo:hover img{filter:none}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;max-width:400px}
.about-facts dt{font-size:var(--step-small);color:var(--muted)}
.about-facts dd{font-weight:600;display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:#3ddc84;flex:none;animation:blink 2s ease-in-out infinite}
@keyframes blink{50%{opacity:.3}}
.about-copy{grid-column:6/13}
.about-copy h2{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:var(--step-head);margin-bottom:32px}
.about-big{font-size:clamp(1.5rem,1.1rem + 1.5vw,2.5rem);line-height:1.25;font-weight:500;margin-bottom:clamp(48px,5vw,80px)}
.about-big .w{opacity:.18;transition:opacity 200ms linear}
.about-big .w.is-lit{opacity:1}
.timeline{border-top:1px solid rgba(238,241,246,.14)}
.timeline li{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,5fr);gap:24px;padding:26px 0;border-bottom:1px solid rgba(238,241,246,.14);transition:padding 400ms var(--ease-expo)}
.timeline li:hover{padding-left:14px}
.timeline b{font-weight:800;font-stretch:62%;text-transform:uppercase;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.5rem);line-height:1;color:var(--accent)}
.timeline span{display:block;color:var(--muted);line-height:1.45}
.timeline .co{display:block;font-style:normal;font-weight:600;color:var(--ink);margin-bottom:6px;font-size:var(--step-body)}
.timeline strong{display:block;color:var(--ink);font-size:var(--step-lead);font-weight:700;margin-bottom:4px}
.logo-wall{margin-top:clamp(80px,9vw,140px);scroll-margin-top:110px}
.logo-wall .svc-label{padding:0}
.logos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid rgba(238,241,246,.14);border-left:1px solid rgba(238,241,246,.14)}
.logos li{display:grid;place-items:center;height:clamp(110px,11vw,170px);padding:clamp(20px,3vw,44px);border-right:1px solid rgba(238,241,246,.14);border-bottom:1px solid rgba(238,241,246,.14);transition:background-color 350ms ease}
.logos img{max-height:56px;width:auto;max-width:100%;filter:brightness(0) invert(1);opacity:.6;transition:filter 350ms ease,opacity 350ms ease,transform 450ms var(--ease-expo)}
.logos img.big{max-height:none;height:clamp(56px,6.5vw,100px)}
.logos li{position:relative;overflow:clip}
.logos li::after{content:"";position:absolute;inset:-20% auto -20% 0;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16) 45%,rgba(255,255,255,.32) 50%,rgba(255,255,255,.16) 55%,transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none}
.logos li:hover::after{animation:shine 900ms var(--ease-out)}
@keyframes shine{to{transform:translateX(330%) skewX(-18deg)}}
.logos li:hover img{filter:none;opacity:1;transform:scale(1.18)}
.logos li.is-dark:hover{background:var(--paper)}
.logos li.is-dark:hover::after{background:linear-gradient(100deg,transparent,rgba(7,9,15,.06) 45%,rgba(7,9,15,.14) 50%,rgba(7,9,15,.06) 55%,transparent)}
@media (max-width:860px){.about-grid{grid-template-columns:1fr}.about-side,.about-copy{grid-column:auto}.about-side{position:static}.timeline li{grid-template-columns:1fr;gap:6px}.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- Contact ---------- */
.contact{margin-top:var(--gap);padding:clamp(56px,6vw,96px) var(--m);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;background:var(--surface)}
.contact-copy{grid-column:1/6}
.contact-copy h2{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.88;font-size:var(--step-head);margin-bottom:24px}
.contact-copy p{font-size:var(--step-lead);line-height:1.35;margin-bottom:28px;max-width:36ch}
.contact-links{display:grid;gap:8px;font-size:var(--step-lead)}
.contact-links a{font-weight:600}
.form{grid-column:7/13;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px}
.field-row{display:grid;gap:8px}
.field-row.wide,.form-foot.wide{grid-column:1/-1}
.field-row label{font-size:var(--step-small);color:var(--muted)}
.field-row input,.field-row textarea{width:100%;border:0;border-radius:10px;background:var(--bg);color:var(--ink);padding:14px 16px;min-height:52px;font-size:1rem;transition:box-shadow 180ms ease}
.field-row textarea{resize:vertical;min-height:120px}
.field-row input:focus,.field-row textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)} /* taste-skill-ignore: form field focus ring */
.field-row.is-invalid input,.field-row.is-invalid textarea{box-shadow:inset 0 0 0 2px #ff5a4f} /* taste-skill-ignore: form field error state */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: hidden spam trap, not a rule */
.kind{border:0;padding:0;margin:0;min-width:0}
.kind legend{font-size:var(--step-small);color:var(--muted);padding:0;margin-bottom:8px}
.kind-opts{display:flex;gap:10px;flex-wrap:wrap}
.kind-opts label{position:relative;cursor:pointer}
.kind-opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.kind-opts span{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border-radius:999px;background:var(--bg);color:var(--muted);font-weight:600;transition:background-color 200ms ease,color 200ms ease}
.kind-opts input:checked+span{background:var(--accent);color:var(--accent-ink)}
.kind-opts input:focus-visible+span{outline:3px solid var(--accent);outline-offset:3px}
.form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.form-status{font-weight:500}
@media (max-width:860px){.contact{grid-template-columns:1fr}.contact-copy,.form{grid-column:auto}.form{grid-template-columns:1fr}}

/* ---------- Footer ---------- */
.foot{padding:32px var(--m) 0;overflow:clip}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:var(--step-small)}
.foot-row #clock{color:var(--ink);font-weight:600}
.foot-name{font-weight:800;font-stretch:62%;text-transform:uppercase;line-height:.78;font-size:clamp(5rem,27.5vw,30rem);white-space:nowrap;letter-spacing:-0.02em;margin-top:24px;transform:translateY(16%);color:var(--surface)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}