/* ============================================================================
   FixedBySanti — stylesheet
   ----------------------------------------------------------------------------
   Three references, one system:
     Apple    rationed blue, huge display type, negative tracking, photography
              treated as the subject rather than decoration
     Resend   hairline borders instead of shadows, ghost buttons, monospace
              reserved for genuinely technical strings
     Linear   darkness as substrate (#08090A), 0.5px hairlines, a low 400–600
              weight band, 6/12px radii — precision-machined, no ornament
   Type       Space Grotesk (display) · Inter (reading) · JetBrains Mono (data)
   Imagery    every photograph sits on a near-black plate in BOTH themes, so the
              hardware is always lit against black the way Apple shoots it
   ========================================================================== */

/* ------------------------------------------------------------------ fonts -- */
@font-face{ font-family:'Space Grotesk'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/space-grotesk-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/space-grotesk-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Space Grotesk'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/space-grotesk-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-weight:600; font-style:normal; font-display:swap;
  src:url('../fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-weight:400; font-style:normal; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-weight:500; font-style:normal; font-display:swap;
  src:url('../fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }

/* ---------------------------------------------------------------- tokens -- */
:root{
  color-scheme: light dark;

  --blue:#0071E3;
  --blue-lit:#2997FF;
  --plate:#08090A;               /* the black photography sits on, both themes */

  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1280px;
  --gut:clamp(20px,5vw,60px);
  --nav-h:78px;
  --band:clamp(80px,10vw,150px);

  --r:12px;
  --r-sm:6px;
  --r-pill:999px;
  --hair-w:0.5px;

  --ease:cubic-bezier(.22,.72,.24,1);
  --slow:cubic-bezier(.16,1,.3,1);
  --fast:180ms var(--ease);
}

:root,[data-theme="light"]{
  --canvas:#F4F4F6;
  --canvas-rgb:244,244,246;
  --canvas-2:#EAEAEE;
  --surface:#FFFFFF;
  --ink:#101114;
  --ink-2:#3C3F45;
  --muted:#6C7077;
  --hair:rgba(16,17,20,.14);
  --hair-2:rgba(16,17,20,.07);
  --glass:rgba(244,244,246,.72);
  --logo-light:block; --logo-dark:none;
  --link:#0062C4;
}
[data-theme="dark"]{
  --canvas:#0B0C0E;
  --canvas-rgb:11,12,14;
  --canvas-2:#101216;
  --surface:#131519;
  --ink:#F4F5F7;
  --ink-2:#C4C7CC;
  --muted:#82868D;
  --hair:rgba(244,245,247,.13);
  --hair-2:rgba(244,245,247,.06);
  --glass:rgba(16,18,22,.68);
  --logo-light:none; --logo-dark:block;
  --link:#2997FF;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --canvas:#0B0C0E; --canvas-rgb:11,12,14; --canvas-2:#101216; --surface:#131519;
    --ink:#F4F5F7; --ink-2:#C4C7CC; --muted:#82868D;
    --hair:rgba(244,245,247,.13); --hair-2:rgba(244,245,247,.06);
    --glass:rgba(16,18,22,.68); --logo-light:none; --logo-dark:block; --link:#2997FF;
  }
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  width:100%; margin:0; padding:0;
  /* Belt-and-suspenders: whatever shows at the very edge of the viewport —
     a scrollbar gutter, a rendering seam, anything — is themed, never the
     browser's own default white/grey page colour. */
  background:var(--canvas);
}
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; padding:0; width:100%; min-height:100vh;
  background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.5; letter-spacing:-.014em;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .45s var(--ease), color .45s var(--ease);
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--blue); color:#fff; }

h1,h2,h3{ margin:0; font-family:var(--display); font-weight:500; letter-spacing:-.03em; }
h4{ margin:0; font-family:var(--display); font-weight:500; letter-spacing:-.02em; }
h1{ font-size:clamp(2.7rem,6.6vw,5.4rem); line-height:1.02; }
h2{ font-size:clamp(2.05rem,4.2vw,3.4rem); line-height:1.06; }
h3{ font-size:clamp(1.24rem,1.8vw,1.6rem); line-height:1.16; letter-spacing:-.02em; }
h4{ font-size:1.08rem; line-height:1.25; }
p{ margin:0 0 1.05em; } p:last-child{ margin-bottom:0; }

.lede{ font-size:clamp(1.08rem,1.5vw,1.32rem); line-height:1.45; color:var(--ink-2); letter-spacing:-.016em; }
.muted{ color:var(--muted); }
.eyebrow{ font-family:var(--mono); font-size:.75rem; color:var(--muted);
  letter-spacing:.06em; text-transform:uppercase; margin:0 0 18px; }
.data{ font-family:var(--mono); font-size:.78rem; letter-spacing:-.01em; }
.mw{ max-width:60ch; } .mw-s{ max-width:46ch; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.band{ width:100%; padding-block:var(--band); position:relative; }
.band--tight{ padding-block:clamp(56px,7vw,96px); }
.alt{ width:100%; background:var(--canvas-2); }
.sec-head{ margin-bottom:clamp(36px,4.5vw,64px); max-width:68ch; }

/* --------------------------------------------------- scroll progress hair -- */
.progress{ position:fixed; inset:0 auto auto 0; height:2px; width:100%; z-index:90;
  transform:scaleX(var(--p,0)); transform-origin:0 50%; background:var(--blue);
  opacity:.9; pointer-events:none; }

/* ------------------------------------------------------------------- nav -- */
/* Every page opens on a dark hero or dark page-header, so the unstuck nav is
   always sitting over dark video or imagery — regardless of light/dark theme.
   It therefore defaults to light text, matching what's always behind it, and
   only switches to theme-aware colour once it picks up the glass background
   on scroll (.stuck), by which point it sits over the plain canvas instead. */
.nav{ width:100%; position:fixed; inset:0 0 auto 0; z-index:80; height:var(--nav-h);
  display:flex; align-items:center; border-bottom:var(--hair-w) solid transparent;
  color:#F4F5F7;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .4s var(--slow), color .35s var(--ease); }
.nav.stuck{ background:var(--glass); border-bottom-color:var(--hair); color:var(--ink);
  -webkit-backdrop-filter:saturate(1.7) blur(22px); backdrop-filter:saturate(1.7) blur(22px); }
.nav.hide{ transform:translateY(-102%); }
.nav__in{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; height:52px; flex:none; }
.brand img{ height:46px; width:auto; }
img.l{ display:var(--logo-light); } img.d{ display:var(--logo-dark); }
/* The nav's logo follows what's behind the nav, not the theme: the dark-background
   mark while unstuck (always over dark hero/header imagery), the theme-correct
   mark once stuck (sitting over the plain canvas glass). */
.nav:not(.stuck) .brand img.l{ display:none; }
.nav:not(.stuck) .brand img.d{ display:block; }
.nav.stuck .brand img.l{ display:var(--logo-light); }
.nav.stuck .brand img.d{ display:var(--logo-dark); }

.nav__links{ display:none; align-items:center; gap:34px; }
@media (min-width:960px){ .nav__links{ display:flex; } }
.nav__links a{ font-size:.94rem; color:inherit; opacity:.72; position:relative; padding:6px 0;
  transition:opacity var(--fast); }
.nav__links a:hover{ opacity:1; }
.nav__links a[aria-current="page"]{ opacity:1; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:100%;
  background:var(--blue); border-radius:2px; transform:scaleX(0); transform-origin:0 50%;
  transition:transform .4s var(--slow); }
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }

.nav__end{ display:flex; align-items:center; gap:14px; }
.theme{ display:flex; align-items:center; gap:3px; padding:4px; color:inherit;
  border:var(--hair-w) solid currentColor; border-color:rgba(127,127,127,.35);
  border-radius:var(--r-pill); transition:border-color .35s var(--ease); }
.nav.stuck .theme{ border-color:var(--hair); }
.theme button{ width:34px; height:30px; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:0; border-radius:var(--r-pill); color:inherit; opacity:.68;
  transition:opacity var(--fast), background var(--fast), color var(--fast); }
.theme button:hover{ opacity:1; }
.theme button[aria-pressed="true"]{ background:currentColor; opacity:1; }
.theme button[aria-pressed="true"] svg{ color:var(--canvas); }
.nav:not(.stuck) .theme button[aria-pressed="true"] svg{ color:#08090A; }
.theme svg{ width:17px; height:17px; }

.burger{ display:grid; place-items:center; width:44px; height:44px; cursor:pointer;
  background:transparent; border:var(--hair-w) solid rgba(127,127,127,.35);
  border-radius:var(--r-pill); transition:border-color .35s var(--ease); }
.nav.stuck .burger{ border-color:var(--hair); }
@media (min-width:960px){ .burger{ display:none; } }
.burger i{ display:block; width:18px; height:1.5px; background:currentColor; border-radius:2px;
  position:relative; transition:background .3s var(--ease); }
.burger i::before,.burger i::after{ content:""; position:absolute; left:0; width:18px; height:1.5px;
  background:currentColor; border-radius:2px; transition:transform .3s var(--ease), top .3s var(--ease); }
.burger i::before{ top:-6px; } .burger i::after{ top:6px; }
.burger[aria-expanded="true"] i{ background:transparent; }
.burger[aria-expanded="true"] i::before{ top:0; transform:rotate(45deg); }
.burger[aria-expanded="true"] i::after{ top:0; transform:rotate(-45deg); }

.sheet{ position:fixed; inset:var(--nav-h) 0 auto 0; z-index:79; background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(1.7); backdrop-filter:blur(24px) saturate(1.7);
  border-bottom:var(--hair-w) solid var(--hair); padding:8px var(--gut) 26px;
  transform:translateY(-14px); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease); }
.sheet.open{ transform:none; opacity:1; pointer-events:auto; }
.sheet a{ display:block; padding:16px 0; font-family:var(--display); font-size:1.5rem;
  letter-spacing:-.03em; border-bottom:var(--hair-w) solid var(--hair-2); }
.sheet a:last-of-type{ border-bottom:0; }
@media (min-width:960px){ .sheet{ display:none; } }

/* --------------------------------------------------------------- buttons -- */
.btn{ display:inline-flex; align-items:center; gap:9px; padding:13px 26px;
  border-radius:var(--r-pill); border:var(--hair-w) solid transparent; cursor:pointer;
  font-size:1rem; letter-spacing:-.016em; font-weight:500; white-space:nowrap;
  background:var(--blue); color:#fff;
  transition:background var(--fast), transform var(--fast), border-color var(--fast); }
.btn:hover{ background:#1a83e8; }
.btn:active{ transform:scale(.985); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--hair); }
.btn--ghost:hover{ background:transparent; border-color:var(--ink); }
.btn--sm{ padding:11px 22px; font-size:.94rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.tlink{ color:var(--link); }
.tlink:hover{ text-decoration:underline; text-underline-offset:4px; }

/* ------------------------------------------------- photography on a plate -- */
/* Hardware is always lit against black. The plate does not change with theme;
   only the surround does, so images read identically in light and dark.      */
.plate{ position:relative; overflow:hidden; background:var(--plate);
  border-radius:var(--r); border:var(--hair-w) solid var(--hair-2); isolation:isolate; }
.plate img{ width:100%; height:100%; object-fit:cover; }
.plate--contain img{ object-fit:contain; }
.plate::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(125% 100% at 50% 40%, transparent 42%, rgba(0,0,0,.55) 100%); }
.plate figcaption{ position:absolute; inset:auto 0 0 0; z-index:2; padding:20px 22px;
  background:linear-gradient(180deg,transparent,rgba(4,5,6,.9));
  color:#F4F5F7; opacity:0; transform:translateY(10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease); }
.plate:hover figcaption,.plate:focus-within figcaption{ opacity:1; transform:none; }
.plate figcaption b{ display:block; font-weight:500; font-family:var(--display); letter-spacing:-.02em; }
.plate figcaption span{ font-family:var(--mono); font-size:.72rem; color:#9CA0A6; }

/* slow parallax drift, driven by scroll position */
.par img{ transform:translate3d(0,var(--par,0px),0) scale(1.14); will-change:transform; }

/* ------------------------------------------------------------------ hero -- */
.hero{ position:relative; min-height:min(100svh,940px); display:flex; align-items:center;
  width:100%;
  padding-top:calc(var(--nav-h) + 32px); padding-bottom:clamp(48px,6vw,80px);
  overflow:hidden; background:var(--plate); }
.hero__media{ position:absolute; inset:0; z-index:0; width:100%; height:100%; }
.hero__media video,.hero__media img{ width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.8s var(--ease); }
.hero.live .hero__media video,.hero.live .hero__media img{ opacity:.6; }
.hero__media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(4,5,6,.95) 0%, rgba(4,5,6,.78) 40%, rgba(4,5,6,.3) 72%, rgba(4,5,6,.55) 100%),
    linear-gradient(180deg, rgba(4,5,6,.9) 0%, transparent 26%, transparent 62%, var(--canvas) 99%); }

.board{ position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; overflow:hidden; }
.board .trace{ fill:none; stroke:rgba(230,240,255,.15); stroke-width:1;
  stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.hero.live .board .trace{ animation:draw 1.7s var(--slow) forwards; }
.board .pad{ fill:rgba(230,240,255,.15); opacity:0; }
.hero.live .board .pad{ animation:pad 3s var(--ease) forwards; }
.board .ring{ fill:none; stroke:rgba(230,240,255,.13); stroke-width:1; opacity:0; }
.hero.live .board .ring{ animation:ring 1s var(--ease) forwards; }
.board .sweep{ opacity:0; transform-origin:var(--ox) var(--oy); }
.hero.live .board .sweep{ animation:sweep 8s cubic-bezier(.45,0,.2,1) 1.2s infinite; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@keyframes ring{ to{ opacity:1; } }
@keyframes pad{ 0%,42%{ opacity:0; } 58%{ fill:var(--blue); opacity:1; }
  74%{ fill:var(--blue); opacity:1; } 100%{ fill:rgba(230,240,255,.15); opacity:.8; } }
@keyframes sweep{ 0%{ opacity:0; transform:rotate(-40deg); } 5%{ opacity:.9; }
  34%{ opacity:.5; } 40%,100%{ opacity:0; transform:rotate(320deg); } }

.hero__in{ position:relative; z-index:2; width:100%; color:#F4F5F7; }
.hero .eyebrow{ color:#9CA0A6; }
.hero h1{ max-width:15ch; }
.hero .lede{ margin-top:22px; max-width:44ch; color:#C4C7CC; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero .btn--ghost{ color:#F4F5F7; border-color:rgba(244,245,247,.3); }
.hero .btn--ghost:hover{ border-color:#F4F5F7; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:40px; padding-top:22px;
  border-top:var(--hair-w) solid rgba(244,245,247,.16); color:#9CA0A6; }
.hero__meta span{ display:inline-flex; align-items:center; gap:9px; }
.dot{ width:5px; height:5px; border-radius:50%; background:var(--blue); flex:none; }

/* headline resolves word by word, out of blur */
.rise > span{ display:inline-block; opacity:0; filter:blur(12px); transform:translateY(.42em);
  transition:opacity .9s var(--slow), transform .9s var(--slow), filter .9s var(--slow); }
.hero.live .rise > span,.rise.in > span{ opacity:1; filter:blur(0); transform:none; }

/* interior page header */
.phead{ width:100%; position:relative; padding-top:calc(var(--nav-h) + clamp(70px,9vw,130px));
  padding-bottom:clamp(44px,5vw,80px); overflow:hidden; background:var(--plate); }
.phead__media{ position:absolute; inset:0; z-index:0; }
.phead__media img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.phead__media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(96deg, rgba(4,5,6,.95) 0%, rgba(4,5,6,.72) 44%, rgba(4,5,6,.28) 78%),
    linear-gradient(180deg, rgba(4,5,6,.85) 0%, transparent 40%, var(--canvas) 99%); }
.phead .wrap{ position:relative; z-index:1; color:#F4F5F7; }
.phead .eyebrow{ color:#9CA0A6; }
.phead .lede{ color:#C4C7CC; }

/* --------------------------------------------------------------- marquee -- */
.ticker{ width:100%; overflow:hidden; border-block:var(--hair-w) solid var(--hair);
  padding-block:16px; background:var(--canvas); }
.ticker__row{ display:flex; gap:44px; width:max-content; animation:slide 46s linear infinite; }
.ticker:hover .ticker__row{ animation-play-state:paused; }
.ticker span{ font-family:var(--mono); font-size:.78rem; color:var(--muted); white-space:nowrap; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* -------------------------------------------------------------- services -- */
.bento{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:720px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .bento{ grid-template-columns:repeat(4,1fr); } }
.svc{ position:relative; border:var(--hair-w) solid var(--hair); border-radius:var(--r);
  padding:26px 24px 28px; background:var(--surface); overflow:hidden;
  display:flex; flex-direction:column; gap:11px;
  transition:border-color .35s var(--ease), transform .35s var(--ease); }
.svc:hover{ border-color:var(--blue); transform:translateY(-2px); }
/* a soft light follows the pointer across each card */
.svc::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
             rgba(0,113,227,.15), transparent 62%);
  transition:opacity .4s var(--ease); }
.svc:hover::before{ opacity:1; }
.svc > *{ position:relative; }
.svc__ic{ width:30px; height:30px; color:var(--blue); }
.svc__ic svg{ width:100%; height:100%; }
.svc h3{ font-size:1.14rem; }
.svc p{ color:var(--muted); font-size:.94rem; line-height:1.5; }
.svc__from{ margin-top:auto; padding-top:14px; color:var(--muted); }

/* --------------------------------------------------------------- process -- */
.steps{ display:grid; gap:var(--hair-w); border:var(--hair-w) solid var(--hair);
  border-radius:var(--r); overflow:hidden; background:var(--hair); }
@media (min-width:880px){ .steps{ grid-template-columns:repeat(4,1fr); } }
.step{ background:var(--surface); padding:28px 24px 30px; display:flex; flex-direction:column; gap:10px; }
.step__n{ font-family:var(--mono); font-size:.72rem; color:var(--blue); letter-spacing:.04em; }
.step p{ color:var(--muted); font-size:.92rem; }

/* ----------------------------------------------------------------- split -- */
.split{ display:grid; gap:clamp(28px,4vw,68px); align-items:center; }
@media (min-width:920px){ .split{ grid-template-columns:1fr 1fr; }
  .split--wide{ grid-template-columns:1.02fr .98fr; } }
.split--top{ align-items:start; }
.split .plate{ aspect-ratio:4/3; }

/* ------------------------------------------------------------------ stats -- */
.stats{ display:grid; gap:var(--hair-w); background:var(--hair);
  border-block:var(--hair-w) solid var(--hair); }
@media (min-width:640px){ .stats{ grid-template-columns:repeat(4,1fr); } }
.stat{ background:var(--canvas); padding:32px 26px; }
.stat b{ display:block; font-family:var(--display); font-size:clamp(1.9rem,3.2vw,2.7rem);
  font-weight:500; letter-spacing:-.035em; line-height:1.02; }
.stat span{ display:block; margin-top:8px; color:var(--muted); font-size:.92rem; }

/* ---------------------------------------------------------------- gallery -- */
.filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.chip{ padding:8px 17px; border-radius:var(--r-pill); border:var(--hair-w) solid var(--hair);
  background:transparent; cursor:pointer; font-size:.92rem; color:var(--muted);
  transition:all var(--fast); }
.chip:hover{ color:var(--ink); border-color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--canvas); border-color:var(--ink); }

.grid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media (min-width:840px){ .grid{ grid-template-columns:repeat(6,1fr);
  grid-auto-rows:clamp(96px,8.6vw,140px); grid-auto-flow:dense; } }
.tile{ margin:0; grid-column:span 2; min-height:200px; }
@media (min-width:840px){
  .tile{ grid-row:span 2; min-height:0; }
  .tile.wide{ grid-column:span 4; }
  .tile.tall{ grid-row:span 3; }
}
.tile img{ transition:transform 1.1s var(--slow); }
.tile:hover img{ transform:scale(1.05); }
.tile[hidden]{ display:none; }

/* the exploded view, revealed by a wipe as it enters */
.wipe{ clip-path:inset(0 0 100% 0); transition:clip-path 1.3s var(--slow); }
.wipe.in{ clip-path:inset(0 0 0 0); }

/* ------------------------------------------------------------------ forms -- */
.form{ display:grid; gap:18px; }
.row{ display:grid; gap:18px; }
@media (min-width:700px){ .row--2{ grid-template-columns:1fr 1fr; } }
.field label{ display:block; font-size:.92rem; margin-bottom:8px; color:var(--ink-2); }
.field .req{ color:var(--blue); }
.field input,.field select,.field textarea{
  width:100%; padding:14px 16px; background:var(--surface); color:var(--ink);
  border:var(--hair-w) solid var(--hair); border-radius:var(--r-sm); font-size:1rem;
  letter-spacing:-.014em; transition:border-color var(--fast), box-shadow var(--fast); }
.field textarea{ min-height:150px; resize:vertical; line-height:1.55; }
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2382868D' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center; background-size:12px;
  padding-right:44px; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(0,113,227,.16); }
.field input::placeholder,.field textarea::placeholder{ color:var(--muted); }
.field .hint{ margin-top:7px; font-size:.8rem; color:var(--muted); }
.field .err{ margin-top:7px; font-size:.8rem; color:#E0503A; display:none; }
.field.bad input,.field.bad select,.field.bad textarea{ border-color:#E0503A; }
.field.bad .err{ display:block; }
.form__foot{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:6px; }
.note{ font-size:.86rem; color:var(--muted); }

.ticket{ border:var(--hair-w) solid var(--hair); border-radius:var(--r); background:var(--plate);
  color:#E6E8EA; padding:26px; font-family:var(--mono); font-size:.79rem; line-height:1.8;
  position:sticky; top:calc(var(--nav-h) + 24px); }
.ticket h3{ font-family:var(--display); font-size:1.05rem; color:#F4F5F7; margin-bottom:4px; }
.ticket__id{ color:var(--blue-lit); }
.ticket dl{ margin:18px 0 0; display:grid; grid-template-columns:auto 1fr; gap:8px 16px; }
.ticket dt{ color:#82868D; }
.ticket dd{ margin:0; word-break:break-word; }
.ticket dd:empty::after{ content:"—"; color:#5A5E65; }
.ticket__bar{ margin-top:20px; padding-top:16px; border-top:var(--hair-w) solid rgba(244,245,247,.14);
  display:flex; align-items:center; gap:9px; color:#82868D; }

.ok{ border:var(--hair-w) solid var(--hair); border-radius:var(--r); background:var(--surface);
  padding:44px 32px; text-align:center; }
.ok__ic{ width:52px; height:52px; margin:0 auto 18px; color:var(--blue); }

/* ---------------------------------------------------------------- contact -- */
.cards{ display:grid; gap:12px; }
@media (min-width:780px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{ border:var(--hair-w) solid var(--hair); border-radius:var(--r);
  background:var(--surface); padding:26px; }
.card h3{ font-size:1.05rem; margin-bottom:10px; }
.card p,.card address{ font-style:normal; color:var(--muted); font-size:.98rem; line-height:1.6; }
.card a{ color:var(--link); }
.hours{ width:100%; border-collapse:collapse; font-size:.94rem; }
.hours td{ padding:10px 0; border-bottom:var(--hair-w) solid var(--hair-2); color:var(--muted); }
.hours tr:last-child td{ border-bottom:0; }
.hours td:last-child{ text-align:right; color:var(--ink); font-family:var(--mono); font-size:.78rem; }
.hours tr.now td{ color:var(--ink); }
.hours tr.now td:first-child::before{ content:""; display:inline-block; width:5px; height:5px;
  border-radius:50%; background:var(--blue); margin-right:9px; vertical-align:middle; }

.map{ border:var(--hair-w) solid var(--hair); border-radius:var(--r); overflow:hidden;
  background:var(--canvas-2); }
.map iframe{ display:block; width:100%; height:clamp(300px,42vw,440px); border:0;
  filter:grayscale(.95) contrast(.95); }
[data-theme="dark"] .map iframe{ filter:grayscale(1) invert(.92) contrast(.86) brightness(.94); }

.locator{ position:relative; display:grid; place-items:center; padding:8px; }
.locator svg{ width:100%; max-width:250px; height:auto; color:var(--blue); }
.locator .pulse{ transform-origin:50% 50%; opacity:0; }
.reveal.in .locator .pulse{ animation:pulse 3.6s var(--ease) infinite; }
.locator .pulse:nth-child(2){ animation-delay:1.2s; }
.locator .pulse:nth-child(3){ animation-delay:2.4s; }
@keyframes pulse{ 0%{ transform:scale(.22); opacity:.8; } 70%{ opacity:0; } 100%{ transform:scale(1); opacity:0; } }

/* -------------------------------------------------------------------- cta -- */
.cta{ width:100%; position:relative; overflow:hidden; text-align:center; background:var(--plate); color:#F4F5F7; }
.cta .wrap{ position:relative; z-index:1; }
.cta h2{ max-width:19ch; margin-inline:auto; }
.cta .lede{ margin:18px auto 0; max-width:50ch; color:#C4C7CC; }
.cta__cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; }
.cta .btn--ghost{ color:#F4F5F7; border-color:rgba(244,245,247,.3); }
.cta .btn--ghost:hover{ border-color:#F4F5F7; }
.cta__media{ position:absolute; inset:0; z-index:0; }
.cta__media img{ width:100%; height:100%; object-fit:cover; opacity:.45; }
.cta__media::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(80% 110% at 50% 50%, rgba(4,5,6,.5), rgba(4,5,6,.96) 74%); }

/* ----------------------------------------------------------------- footer -- */
.foot{ border-top:var(--hair-w) solid var(--hair); padding-block:clamp(48px,5vw,76px) 32px; }
.foot__top{ display:grid; gap:34px; }
@media (min-width:840px){ .foot__top{ grid-template-columns:1.6fr 1fr 1fr 1fr; } }
.foot img{ height:40px; width:auto; margin-bottom:16px; }
.foot h4{ font-size:.92rem; font-weight:500; margin-bottom:13px; }
.foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot li a,.foot address{ color:var(--muted); font-size:.92rem; font-style:normal; line-height:1.6; }
.foot li a:hover{ color:var(--ink); }
.foot__bot{ margin-top:46px; padding-top:22px; border-top:var(--hair-w) solid var(--hair-2);
  display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
  color:var(--muted); font-size:.78rem; font-family:var(--mono); }

/* ---------------------------------------------------------------- reveals -- */
.reveal{ opacity:0; transform:translateY(14px);
  transition:opacity .8s var(--slow), transform .8s var(--slow); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; padding:12px 18px;
  background:var(--ink); color:var(--canvas); border-radius:0 0 8px 0; }
.skip:focus{ left:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  .reveal,.rise > span{ opacity:1; transform:none; filter:none; }
  .wipe{ clip-path:none; }
  .hero__media video,.hero__media img{ opacity:.6; }
  .board .trace{ stroke-dashoffset:0; } .board .pad,.board .ring{ opacity:.8; }
  .par img{ transform:none; }
  .ticker__row{ animation:none; }
}