/* ==========================================================================
   S M SADIK — "LIQUID TANGERINE"
   One design language, two lighting conditions.

   Layers
     1. Tokens      primitives → semantic (dark default, light override)
     2. Base        reset, type, page canvas (ambient light field, grid, grain)
     3. Materials   glass tiers: lens (nav/overlays), pane (hero/contact), sheet (cards)
     4. Components  buttons, nav, theme toggle, sections …
     5. Motion      reveals, proof choreography, reduced motion / transparency

   Lighting rule: every highlight, sheen and shadow assumes one light source
   from the top-left. Shadows are tinted with the page hue, never pure black.
   ========================================================================== */

/* ─── 1. TOKENS ─────────────────────────────────────────────────────────── */

@property --tt-cx { syntax: '<percentage>'; inherits: false; initial-value: 150%; }
@property --tt-cy { syntax: '<percentage>'; inherits: false; initial-value: -40%; }

:root {
  /* Primitives */
  --navy-950: #04060D;
  --navy-900: #070B16;
  --navy-850: #0A1020;
  --navy-800: #0E1528;
  --navy-700: #151E36;
  --cream-50: #FBFAF8;
  --cream-100: #F4F1EC;
  --cream-200: #EAE5DD;
  --ink-900: #0E1220;
  --tangerine-300: #FFA36B;
  --tangerine-400: #FF8540;
  --tangerine-500: #FF6B1A;
  --tangerine-600: #E85A0C;
  --tangerine-700: #C2410C;
  --sunshine-400: #FFC83D;

  /* Type */
  --font-display: 'Clash Display', 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Shape — concentric: outer bezel radius = inner radius + bezel width */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --bezel: 6px;

  /* Space (8pt) */
  --section-y: clamp(5rem, 9vw, 7.5rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.36, 0.64, 1);
  --dur-fast: 180ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* Layers */
  --z-base: 1;
  --z-float: 80;
  --z-menu: 90;
  --z-nav: 100;
  --z-toast: 950;
  --z-skip-link: 1000;
  --z-modal: 1100;

  /* ── Semantic: DARK (default) ── */
  color-scheme: dark;
  --bg: var(--navy-900);
  --bg-deep: var(--navy-950);
  --surface-solid: var(--navy-850);
  --text: #F5F3F0;
  --text-2: rgba(245, 243, 240, 0.72);
  --text-3: rgba(245, 243, 240, 0.56);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  --accent: var(--tangerine-500);
  --accent-text: var(--tangerine-500);
  --accent-grad: linear-gradient(100deg, #FF9A55 0%, var(--tangerine-500) 55%, #FF5A0A 100%);
  --accent-soft: rgba(255, 107, 26, 0.12);
  --accent-line: rgba(255, 107, 26, 0.32);
  --accent-glow: rgba(255, 107, 26, 0.55);
  --on-accent: #0B0F1A;

  /* Glass */
  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.025) 55%, rgba(255, 255, 255, 0.04) 100%);
  --glass-fill-lens: linear-gradient(160deg, rgba(22, 30, 54, 0.72) 0%, rgba(10, 16, 32, 0.62) 100%);
  --glass-fill-pane: linear-gradient(160deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 60%);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-lowlight: rgba(0, 0, 0, 0.35);
  --glass-shadow: 0 30px 60px -30px rgba(2, 4, 12, 0.85), 0 12px 24px -16px rgba(2, 4, 12, 0.6);
  --bezel-fill: rgba(255, 255, 255, 0.022);
  --bezel-line: rgba(255, 255, 255, 0.06);
  /* Ring: a soft, blurred glow around cards (replaces the hard double bezel).
     Neutral by default, tangerine on hover. Same layer count so it can transition. */
  --ring: 0 0 6px 1px rgba(255, 255, 255, 0.09), 0 0 22px 5px rgba(255, 255, 255, 0.045);
  --ring-hover: 0 0 8px 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 24px 6px color-mix(in srgb, var(--accent) 28%, transparent);
  --chip-bg: rgba(255, 255, 255, 0.05);
  --input-bg: rgba(255, 255, 255, 0.035);
  --menu-bg: rgba(7, 11, 22, 0.78);

  /* Canvas */
  --orb-1: rgba(255, 107, 26, 0.16);
  --orb-2: rgba(255, 200, 61, 0.07);
  --orb-3: rgba(46, 72, 180, 0.22);
  --grid-line: rgba(255, 255, 255, 0.04);
  --noise-opacity: 0.055;
  --noise-blend: overlay;

  /* Data */
  --chart-muted: rgba(255, 255, 255, 0.12);
  --chart-ring-track: rgba(255, 255, 255, 0.08);
  --logo-filter: none;
  --logo-opacity: 0.62;
  --shot-filter: brightness(0.9) saturate(0.95);
  --success: #4ADE80;
  --success-soft: rgba(74, 222, 128, 0.1);
  --error: #FF8A5C;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--cream-100);
  --bg-deep: #EDE8E1;
  --surface-solid: var(--cream-50);
  --text: var(--ink-900);
  --text-2: rgba(14, 18, 32, 0.72);
  --text-3: rgba(14, 18, 32, 0.62);
  --line: rgba(14, 18, 32, 0.08);
  --line-strong: rgba(14, 18, 32, 0.14);

  /* #FF6B1A is only 2.6:1 on cream — text uses the deeper tangerine (4.6:1),
     fills and glows keep the brand orange. */
  --accent-text: var(--tangerine-700);
  --accent-grad: linear-gradient(100deg, var(--tangerine-600) 0%, var(--tangerine-700) 60%, #A8360A 100%);
  --accent-soft: rgba(232, 90, 12, 0.1);
  --accent-line: rgba(232, 90, 12, 0.3);
  --accent-glow: rgba(255, 107, 26, 0.45);

  --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.82) 0%, rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.66) 100%);
  --glass-fill-lens: linear-gradient(160deg, rgba(255, 255, 255, 0.78) 0%, rgba(250, 247, 242, 0.62) 100%);
  --glass-fill-pane: linear-gradient(160deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.46) 60%);
  --glass-border: rgba(14, 18, 32, 0.07);
  --glass-highlight: rgba(255, 255, 255, 1);
  --glass-lowlight: rgba(120, 80, 40, 0.08);
  --glass-shadow: 0 30px 60px -32px rgba(110, 64, 24, 0.28), 0 12px 24px -18px rgba(110, 64, 24, 0.18);
  --bezel-fill: rgba(255, 255, 255, 0.42);
  --bezel-line: rgba(14, 18, 32, 0.05);
  --ring: 0 0 6px 1px rgba(14, 18, 32, 0.10), 0 0 22px 5px rgba(14, 18, 32, 0.05);
  --chip-bg: rgba(255, 255, 255, 0.6);
  --input-bg: rgba(255, 255, 255, 0.7);
  --menu-bg: rgba(244, 241, 236, 0.8);

  --orb-1: rgba(255, 138, 64, 0.22);
  --orb-2: rgba(255, 200, 61, 0.2);
  --orb-3: rgba(150, 160, 220, 0.2);
  --grid-line: rgba(14, 18, 32, 0.045);
  --noise-opacity: 0.04;
  --noise-blend: multiply;

  --chart-muted: rgba(14, 18, 32, 0.1);
  --chart-ring-track: rgba(14, 18, 32, 0.07);
  --logo-filter: invert(1);
  --logo-opacity: 0.66;
  --shot-filter: none;
  --success: #15803D;
  --success-soft: rgba(21, 128, 61, 0.09);
  --error: #B42318;
}

/* ─── 2. BASE ───────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul, ol { list-style: none; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 1rem;
  z-index: var(--z-skip-link);
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

.wrapper {
  position: relative;
  z-index: var(--z-base);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main { position: relative; z-index: var(--z-base); }

/* Page canvas: a fixed light field behind everything, so glass always has
   colour to refract and sections never read as separate flat blocks. */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -10%, transparent 40%, var(--bg-deep) 100%),
    var(--bg);
}
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.ambient-orb--1 {
  width: 62vmax; height: 62vmax;
  top: -24vmax; left: -18vmax;
  background: radial-gradient(circle, var(--orb-1) 0%, transparent 62%);
  animation: orbDrift1 38s var(--ease-in-out) infinite alternate;
}
.ambient-orb--2 {
  width: 48vmax; height: 48vmax;
  top: 30%; right: -20vmax;
  background: radial-gradient(circle, var(--orb-2) 0%, transparent 62%);
  animation: orbDrift2 46s var(--ease-in-out) infinite alternate;
}
.ambient-orb--3 {
  width: 70vmax; height: 70vmax;
  bottom: -40vmax; left: 10%;
  background: radial-gradient(circle, var(--orb-3) 0%, transparent 60%);
  animation: orbDrift3 52s var(--ease-in-out) infinite alternate;
}
@keyframes orbDrift1 { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@keyframes orbDrift2 { to { transform: translate(-10vmax, -4vmax) scale(0.94); } }
@keyframes orbDrift3 { to { transform: translate(6vmax, -8vmax) scale(1.05); } }

.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
}

.noise-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: var(--noise-opacity);
  mix-blend-mode: var(--noise-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

/* ─── TYPE SYSTEM ─── */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--chip-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 1.4rem;
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 10px var(--accent-glow);
}

.section { padding: var(--section-y) 0 calc(var(--section-y) + 1rem); position: relative; }

.section-head { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem 4rem;
  align-items: end;
}
.section-head--split .section-desc { margin-bottom: 0.4rem; }

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 4.4vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text);
}
.section-desc {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  color: var(--text-2);
  max-width: 36rem;
}

.accent-text {
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* keep descenders from clipping inside the gradient box */
  padding-bottom: 0.06em;
}
.accent-dot { color: var(--accent-text); }

.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.35;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* ─── 3. MATERIALS ──────────────────────────────────────────────────────── */

/* Sheet — the everyday card. No backdrop blur (cheap to scroll); depth comes
   from a layered fill, a machined double bezel (box-shadow rings follow the
   radius, so the outer shell stays concentric), a top highlight and a tinted
   drop shadow. */
.lg-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--ring),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-lowlight),
    var(--glass-shadow);
  transition:
    transform 500ms var(--ease-out),
    box-shadow 500ms var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
/* Spotlight edge: a 1px border that lights up under the cursor */
.lg-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--accent-glow), transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
  z-index: 3;
}
/* Specular sheen inside the glass */
.lg-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.lg-card > * { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  .lg-card:hover {
    transform: translateY(-3px);
    box-shadow:
      var(--ring-hover),
      inset 0 1px 0 var(--glass-highlight),
      inset 0 -1px 0 var(--glass-lowlight),
      var(--glass-shadow);
  }
  .lg-card:hover::before,
  .lg-card:hover::after { opacity: 1; }
}

/* Other framed surfaces get the same ring behaviour: soft grey glow at rest,
   tangerine glow on hover. Box-shadow only, so nothing here is expensive to animate. */
.glass-pane, .about-photo-frame, .ss-frame, .loom-frame { transition: box-shadow 500ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .glass-pane:hover {
    box-shadow:
      var(--ring-hover),
      inset 0 1px 0 var(--glass-highlight),
      inset 0 -1px 0 var(--glass-lowlight),
      var(--glass-shadow);
  }
  .glass-pane.glass-refract:hover {
    box-shadow:
      var(--ring-hover),
      var(--lg-specular),
      inset 0 1px 0 var(--glass-highlight),
      inset 0 -1px 0 var(--glass-lowlight),
      var(--glass-shadow),
      var(--lg-underglow);
  }
  .about-photo-frame:hover { box-shadow: var(--ring-hover), var(--glass-shadow); }
  .loom-frame:hover { box-shadow: var(--ring-hover), var(--glass-shadow); }
  .ss-frame:hover {
    box-shadow:
      var(--ring-hover),
      inset 0 1px 0 var(--glass-highlight),
      var(--glass-shadow);
  }
}

/* Pane — hero panel and contact card: real backdrop blur, used sparingly */
.glass-pane {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--glass-fill-pane);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  box-shadow:
    var(--ring),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-lowlight),
    var(--glass-shadow);
}
/* Refraction edge: a thin bright rim on the lit (top-left) side */
.glass-pane::before,
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--glass-highlight) 0%, transparent 35%, transparent 70%, var(--accent-line) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Refract — true lens refraction, for exactly two surfaces: the nav pill and
   the hero panel. An SVG displacement filter (#lg-refract-pill in
   partials/nav.html, #lg-refract-panel in index.html) bends the backdrop at
   the rim and leaves the centre untouched, then the usual blur runs on top.

   Fallback is pure cascade, no sniffing:
     1st backdrop-filter  plain blur, understood everywhere
     2nd backdrop-filter  url() + blur; Chromium renders it
     -webkit- line last   Safari never reads the 2nd line (old Safari has no
                          unprefixed property; Safari 18+ aliases the two, so
                          the last one wins). Chromium ignores the prefix.
   Firefox parses url() as valid but can't apply it to a backdrop, so the
   Gecko-only @supports below hands it the plain blur back.

   Never animate any filter here: transform and opacity only. */
.lg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

.site-nav.glass-refract {
  backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: url(#lg-refract-pill) blur(12px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
}
.glass-pane.glass-refract {
  backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: url(#lg-refract-panel) blur(4px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
@supports (-moz-appearance: none) {
  .site-nav.glass-refract { backdrop-filter: blur(20px) saturate(170%); }
  .glass-pane.glass-refract { backdrop-filter: blur(22px) saturate(160%); }
}

/* Light: a thin specular line on the top-left inner edge, plus the soft,
   page-tinted floating shadow. Dark: the same, with a faint tangerine
   underglow, since a dark shadow on a navy page disappears. */
.glass-refract {
  --lg-specular:
    inset 2px 2px 1px -1px var(--glass-highlight),
    inset -1.5px -1.5px 1px -1px color-mix(in srgb, var(--glass-highlight) 45%, transparent),
    inset 0 0 14px 0 color-mix(in srgb, var(--glass-highlight) 22%, transparent);
  /* Reading layer: the lens is clear at the rim, calm where text sits */
  --lg-scrim: radial-gradient(120% 100% at 50% 52%, rgba(7, 11, 24, 0.62) 0%, rgba(7, 11, 24, 0.46) 62%, rgba(7, 11, 24, 0.12) 100%);
  --lg-underglow: 0 22px 40px -26px color-mix(in srgb, var(--accent-glow) 30%, transparent);
}
[data-theme="light"] .glass-refract {
  --lg-underglow: 0 0 0 transparent;
  --lg-scrim: radial-gradient(120% 100% at 50% 52%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.55) 62%, rgba(255, 255, 255, 0.14) 100%);
}
.site-nav.glass-refract,
[data-theme="light"] .site-nav.glass-refract {
  box-shadow:
    var(--lg-specular),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-lowlight),
    var(--glass-shadow),
    var(--lg-underglow);
}
.glass-pane.glass-refract {
  background: var(--lg-scrim), var(--glass-fill-pane);
  box-shadow:
    var(--ring),
    var(--lg-specular),
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-lowlight),
    var(--glass-shadow),
    var(--lg-underglow);
}

/* ─── 4. BUTTONS ────────────────────────────────────────────────────────── */

.btn {
  --tx: 0px;
  --ty: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  height: 54px;
  padding: 0 1.6rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transform: translate(var(--tx), var(--ty));
  transition:
    transform 400ms var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}
.btn:has(.btn-icon) { padding-right: 0.45rem; }
.btn:active { transform: translate(var(--tx), var(--ty)) scale(0.98); }

/* Button-in-button: the arrow lives in its own glass bead */
.btn-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform 450ms var(--ease-spring), background-color var(--dur-base) var(--ease-out);
}
.btn-icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn:hover .btn-icon { transform: translate(2px, -2px) scale(1.06); }

.btn-primary {
  background: linear-gradient(180deg, var(--tangerine-400) 0%, var(--tangerine-500) 100%);
  color: var(--on-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(120, 30, 0, 0.25),
    0 12px 32px -12px var(--accent-glow);
}
.btn-primary .btn-icon { background: rgba(11, 15, 26, 0.14); }
.btn-primary:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(120, 30, 0, 0.25),
    0 18px 40px -12px var(--accent-glow);
}
.btn-primary:hover .btn-icon { background: rgba(11, 15, 26, 0.2); }

.btn-glass {
  background: var(--chip-bg);
  color: var(--text);
  border: 1px solid var(--line-strong);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.btn-glass .btn-icon { background: var(--chip-bg); border: 1px solid var(--line); }
.btn-glass:hover { border-color: var(--accent-line); }

.btn-sm { height: 44px; padding: 0 1.15rem; font-size: 0.875rem; gap: 0.6rem; }
.btn-sm:has(.btn-icon) { padding-right: 0.35rem; }
.btn-sm .btn-icon { width: 34px; height: 34px; }

/* ─── 5. NAV — floating island ──────────────────────────────────────────── */

.site-header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: center;
  padding: 0 12px;
  pointer-events: none;
  transition: transform 520ms var(--ease-out);
}
.site-header.is-hidden { transform: translateY(calc(-100% - 20px)); }

.site-nav {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 1160px;
  height: 62px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 8px 0 10px;
  border-radius: var(--radius-pill);
  background: var(--glass-fill-lens);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    inset 0 -1px 0 var(--glass-lowlight),
    0 18px 40px -20px rgba(2, 4, 12, 0.55);
}
[data-theme="light"] .site-nav { box-shadow: inset 0 1px 0 var(--glass-highlight), 0 18px 40px -22px rgba(110, 64, 24, 0.3); }

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  justify-self: start;
  border-radius: var(--radius-pill);
}
.nav-logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--on-accent);
  background: linear-gradient(145deg, var(--tangerine-300), var(--tangerine-500) 60%, var(--tangerine-600));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 4px rgba(140, 40, 0, 0.3), 0 6px 16px -6px var(--accent-glow);
  flex-shrink: 0;
}
.nav-logo-word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--text);
}

.nav-links { display: flex; gap: 0.15rem; }
.nav-links a {
  display: block;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active {
  color: var(--text);
  background: var(--chip-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 0 0 1px var(--line);
}

.nav-right { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }

.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--chip-bg);
  cursor: pointer;
  position: relative;
}
.nav-burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--text);
  transition: transform 450ms var(--ease-out);
}
.nav-burger span:nth-child(1) { transform: translate(-50%, -4px); }
.nav-burger span:nth-child(2) { transform: translate(-50%, 3px); }
.menu-open .nav-burger span:nth-child(1) { transform: translate(-50%, -0.5px) rotate(45deg); }
.menu-open .nav-burger span:nth-child(2) { transform: translate(-50%, -0.5px) rotate(-45deg); }

/* ─── THEME TOGGLE — sun & clouds ↔ crescent moon & stars ─── */

.theme-toggle {
  position: relative;
  width: 66px;
  height: 36px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
/* 44px minimum hit area without growing the visual */
.theme-toggle::after { content: ''; position: absolute; inset: -4px -2px; }

.tt-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  /* Day sky */
  background: linear-gradient(160deg, #8ACDF6 0%, #B7E1FB 55%, #DDF1FF 100%);
  box-shadow:
    inset 0 2px 5px rgba(22, 80, 140, 0.35),
    inset 0 -1px 0 rgba(255, 255, 255, 0.6),
    0 0 0 1px rgba(14, 18, 32, 0.08);
  transition: box-shadow 600ms var(--ease-out);
}
/* Night sky layer cross-fades over the day sky (gradients can't transition) */
.tt-track::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 120%, rgba(90, 110, 220, 0.45), transparent 60%),
    linear-gradient(160deg, #0B1230 0%, #16204A 60%, #22306A 100%);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.tt-knob {
  --tt-cx: 150%;
  --tt-cy: -40%;
  position: absolute;
  top: 4px;
  left: 4px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  /* Sun */
  background: radial-gradient(circle at 34% 30%, #FFF3B8 0%, var(--sunshine-400) 42%, #FF9A3C 100%);
  box-shadow:
    inset -2px -3px 5px rgba(214, 100, 20, 0.35),
    inset 1px 1px 2px rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 214, 102, 0.28),
    0 0 14px 2px rgba(255, 186, 70, 0.65);
  /* The crescent is carved by a masked circle that slides in from outside the disc */
  -webkit-mask: radial-gradient(circle 12.5px at var(--tt-cx) var(--tt-cy), transparent 96%, #000 100%);
  mask: radial-gradient(circle 12.5px at var(--tt-cx) var(--tt-cy), transparent 96%, #000 100%);
  transform: translateX(0) rotate(0deg);
  transition:
    transform 620ms var(--ease-spring),
    --tt-cx 620ms var(--ease-out),
    --tt-cy 620ms var(--ease-out),
    box-shadow 500ms var(--ease-out),
    scale 300ms var(--ease-spring);
  z-index: 2;
}
/* Moon surface cross-fades over the sun (gradients can't transition) */
.tt-knob::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #FFFFFF 0%, #EDEAF6 45%, #C9C5DC 100%);
  box-shadow: inset -2px -2px 4px rgba(120, 116, 150, 0.35);
  opacity: 0;
  transition: opacity 500ms var(--ease-out);
}
.tt-crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(142, 138, 170, 0.55);
  box-shadow: inset 0.5px 0.5px 1px rgba(80, 76, 110, 0.5);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-spring);
}
.tt-crater--1 { width: 6px; height: 6px; left: 6px; top: 12px; }
.tt-crater--2 { width: 4px; height: 4px; left: 11px; top: 20px; }
.tt-crater--3 { width: 3px; height: 3px; left: 5px; top: 5.5px; }

.tt-clouds,
.tt-stars {
  position: absolute;
  top: 0;
  height: 100%;
  transition: transform 620ms var(--ease-out), opacity 450ms var(--ease-out);
  z-index: 1;
}
.tt-clouds { right: 2px; width: 40px; }
.tt-cloud { fill: #fff; }
.tt-cloud--back { opacity: 0.72; }
.tt-cloud--front { filter: drop-shadow(0 1px 1px rgba(40, 110, 180, 0.25)); }

.tt-stars { left: 4px; width: 34px; opacity: 0; transform: translateY(-70%); }
.tt-star {
  fill: #FFF6D8;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-spring);
}

/* — Night — */
[data-theme="dark"] .tt-track {
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .tt-track::before { opacity: 1; }
[data-theme="dark"] .tt-knob {
  --tt-cx: 82%;
  --tt-cy: 22%;
  transform: translateX(30px) rotate(-20deg);
  box-shadow:
    0 0 0 4px rgba(200, 210, 255, 0.08),
    0 0 14px 1px rgba(190, 205, 255, 0.45);
}
[data-theme="dark"] .tt-knob::before { opacity: 1; }
[data-theme="dark"] .tt-crater { opacity: 1; transform: scale(1); }
[data-theme="dark"] .tt-crater--2 { transition-delay: 60ms; }
[data-theme="dark"] .tt-crater--3 { transition-delay: 120ms; }
[data-theme="dark"] .tt-clouds { opacity: 0; transform: translateY(80%); }
[data-theme="dark"] .tt-stars { opacity: 1; transform: none; }
[data-theme="dark"] .tt-star { opacity: 1; transform: scale(1); }
[data-theme="dark"] .tt-star--1 { transition-delay: 120ms; }
[data-theme="dark"] .tt-star--2 { transition-delay: 200ms; }
[data-theme="dark"] .tt-star--3 { transition-delay: 260ms; opacity: 0.8; }
[data-theme="dark"] .tt-star--4 { transition-delay: 320ms; opacity: 0.6; }
[data-theme="dark"] .tt-star--5 { transition-delay: 380ms; }
[data-theme="dark"] .tt-star--6 { transition-delay: 440ms; opacity: 0.5; }

/* Hover: stars twinkle / clouds drift — only while the visitor is engaging */
@media (hover: hover) and (pointer: fine) {
  /* scale the knob's glow, not a filter — filter + mask drops the sun in Chromium */
  .theme-toggle:hover .tt-knob { scale: 1.06; }
  [data-theme="dark"] .theme-toggle:hover .tt-star--1 { animation: ttTwinkle 1.4s var(--ease-in-out) infinite; }
  [data-theme="dark"] .theme-toggle:hover .tt-star--2 { animation: ttTwinkle 1.4s var(--ease-in-out) 0.35s infinite; }
  [data-theme="dark"] .theme-toggle:hover .tt-star--5 { animation: ttTwinkle 1.4s var(--ease-in-out) 0.7s infinite; }
  [data-theme="light"] .theme-toggle:hover .tt-cloud--front { animation: ttDrift 2.4s var(--ease-in-out) infinite alternate; }
  [data-theme="light"] .theme-toggle:hover .tt-cloud--back { animation: ttDrift 2.4s var(--ease-in-out) 0.4s infinite alternate-reverse; }
}
@keyframes ttTwinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.55; } }
@keyframes ttDrift { from { transform: translateX(0); } to { transform: translateX(-2.5px); } }

.theme-toggle:active .tt-knob { scale: 0.94; }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ─── MOBILE MENU ─── */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--menu-bg);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  display: flex;
  flex-direction: column;
  padding: 104px var(--gutter) max(2rem, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  transition: opacity 450ms var(--ease-out), visibility 0s linear 450ms;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; transition: opacity 450ms var(--ease-out); }
.mobile-menu-inner { display: flex; flex-direction: column; justify-content: space-between; height: 100%; max-width: 560px; }
.mobile-links li { overflow: hidden; border-bottom: 1px solid var(--line); }
.mobile-links a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.9rem 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  text-decoration: none;
  transform: translateY(105%);
  transition: transform 700ms var(--ease-out);
}
.mobile-links a span { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0; color: var(--accent-text); }
.menu-open .mobile-links a { transform: none; }
.menu-open .mobile-links li:nth-child(1) a { transition-delay: 60ms; }
.menu-open .mobile-links li:nth-child(2) a { transition-delay: 100ms; }
.menu-open .mobile-links li:nth-child(3) a { transition-delay: 140ms; }
.menu-open .mobile-links li:nth-child(4) a { transition-delay: 180ms; }
.menu-open .mobile-links li:nth-child(5) a { transition-delay: 220ms; }
.menu-open .mobile-links li:nth-child(6) a { transition-delay: 260ms; }
.mobile-menu-foot {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out) 300ms, transform 600ms var(--ease-out) 300ms;
}
.menu-open .mobile-menu-foot { opacity: 1; transform: none; }
.mobile-menu-contact { font-size: 0.875rem; color: var(--text-2); text-decoration: none; }

/* ─── 6. HERO ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 120px 0 80px;
  overflow: hidden;
}
.hero-chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
}
.hero-chart-grid { stroke: var(--grid-line); stroke-width: 1; }
.hero-chart-area { fill: url(#heroChartFill); }
.hero-chart-line {
  fill: none;
  stroke: url(#heroChartStroke);
  stroke-width: 2.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255, 107, 26, 0.4));
}
.hero-chart-dot { fill: #FF6B1A; }
.hero-chart-pulse {
  fill: none;
  stroke: #FF6B1A;
  stroke-width: 1;
  opacity: 0.5;
  animation: heroChartPulse 2.6s var(--ease-in-out) infinite;
}
@keyframes heroChartPulse {
  0% { r: 5; opacity: 0.5; }
  100% { r: 16; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chart-pulse { animation: none; opacity: 0.25; }
}
/* Keeps the copy legible over the shader and melts the hero into the page */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--bg) 88%, transparent) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 42%, transparent 72%),
    linear-gradient(180deg, transparent 70%, var(--bg) 100%);
}
.hero-wrapper { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(3rem, 6.6vw, 6rem);
  line-height: 0.97;
  letter-spacing: -0.045em;
  color: var(--text);
  margin-bottom: 1.6rem;
}
.hero-sub {
  font-size: 1.0625rem;
  color: var(--text-2);
  max-width: 33rem;
  margin-bottom: 2.25rem;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; }

.avail {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2rem;
  font-size: 0.8125rem;
  color: var(--text-2);
}
.avail-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px var(--success-soft), 0 0 12px var(--success);
  flex-shrink: 0;
  animation: availPulse 2.4s var(--ease-in-out) infinite;
}
@keyframes availPulse {
  50% { box-shadow: 0 0 0 6px transparent, 0 0 16px var(--success); }
}

/* Corner glow: a soft accent blob clipped inside the card, the same
   restrained-blob technique used for the page's ambient orbs — gives the
   track-record panel some depth instead of sitting flat. Head/stats/foot
   get z-index so they stay above it (glow is a plain absolute layer, which
   would otherwise paint over static content). */
.hero-panel { padding: 1.35rem; overflow: hidden; }
.hero-panel::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: -45%;
  right: -30%;
  width: 65%;
  aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(40px);
  opacity: 0.4;
  pointer-events: none;
}
.hero-panel-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.15rem 0.35rem 1.1rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.hero-panel-tag {
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
}
/* 2×2 grid with hairlines drawn by the 1px gap over a line-coloured backing */
.hero-stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.hero-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 1.35rem 1.25rem 1.25rem;
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
}
.hero-stat dt { font-size: 0.8125rem; color: var(--text-3); line-height: 1.35; }
.hero-stat-val {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.hero-stat-val--accent { color: var(--accent-text); }
/* Tiny rising sparkline riding next to the ROAS figure — a one-glance echo
   of the hero's growth-chart motif, not a whole second chart. */
.hero-stat-spark {
  width: 34px;
  height: 13px;
  overflow: visible;
  flex-shrink: 0;
}
.hero-stat-spark polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.75;
}
.hero-panel-foot {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.5rem;
  padding: 1.1rem 0.35rem 0.15rem;
}
.hero-panel-foot span {
  font-size: 0.75rem;
  color: var(--text-2);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--chip-bg);
}

/* ─── 7. LOGOS ──────────────────────────────────────────────────────────── */

.logos { position: relative; padding: 1rem 0 2.5rem; }
.logos-label {
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.75rem;
}
.logos-track-wrap {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logos-track { display: flex; width: max-content; animation: logosScroll 48s linear infinite; }
.logos-track-wrap:hover .logos-track { animation-play-state: paused; }
.logos-set { display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem); padding-right: clamp(2.5rem, 5vw, 4.5rem); }
.logo-mark {
  height: 34px;
  width: auto;
  opacity: var(--logo-opacity);
  filter: var(--logo-filter);
  transition: opacity var(--dur-base) var(--ease-out);
}
.logo-mark--square { height: 42px; }
.logo-mark--wordmark { height: 30px; }
.logo-mark:hover { opacity: 1; }
@keyframes logosScroll { to { transform: translateX(-25%); } }

/* ─── 8. METRICS — bento ────────────────────────────────────────────────── */

.metrics { padding: 1rem 0 var(--section-y); }
.metrics-bento {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.9rem;
}
.metric-item {
  padding: 1.6rem 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 150px;
}
.metric-item--hero {
  grid-row: span 2;
  justify-content: space-between;
  padding: 2rem;
}
.metric-kicker {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.metric-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(2rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric-item--hero .metric-num {
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.05em;
}
.metric-desc { font-size: 0.875rem; color: var(--text-3); }
.metric-note { font-size: 0.9375rem; color: var(--text-2); max-width: 22rem; }

/* ─── 9. ABOUT ──────────────────────────────────────────────────────────── */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.about-photo-frame {
  position: relative;
  max-width: 380px;
  border-radius: var(--radius-xl);
  box-shadow:
    var(--ring),
    var(--glass-shadow);
}
.about-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: var(--radius-xl);
}
.about-photo-frame::after {
  /* inner glass rim over the photo edge */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.about-photo-chip {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  color: var(--text);
  background: var(--glass-fill-lens);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.about-bio { font-size: 1.0625rem; color: var(--text-2); max-width: 38rem; margin-top: 1.4rem; }
.about-facts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.9rem; }
.about-facts li {
  font-size: 0.8125rem;
  color: var(--text-2);
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--chip-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.about-facts strong { color: var(--text); font-weight: 600; }

/* ─── 10. EXPERTISE — asymmetric bento ──────────────────────────────────── */

.expertise-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.9rem;
}
.exp-card { padding: 1.75rem; display: flex; flex-direction: column; }
.exp-card--lg { grid-column: span 4; }
.exp-card--md { grid-column: span 2; }
.exp-card--sm { grid-column: span 2; }
.exp-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  margin-bottom: 1.4rem;
}
.exp-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 0.6rem;
}
.exp-card--lg .exp-title { font-size: clamp(1.5rem, 2.2vw, 1.85rem); }
.exp-desc { font-size: 0.9375rem; color: var(--text-2); line-height: 1.6; }
.exp-card--lg .exp-desc { max-width: 34rem; }
.exp-tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: auto; padding-top: 1.5rem; }
.exp-tags li {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-2);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--chip-bg);
}
.exp-card--link { text-decoration: none; }
.exp-arrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  background: var(--chip-bg);
  color: var(--accent-text);
  transition: transform 450ms var(--ease-spring), background-color var(--dur-base) var(--ease-out);
}
.exp-card--link > .exp-arrow { position: absolute; }
.exp-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.exp-card--link:hover .exp-arrow { transform: translate(2px, -2px) scale(1.06); background: var(--accent-soft); }

.platforms-block { margin-top: 3.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.platforms-label { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.platforms-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.platform-pill {
  font-size: 0.8125rem;
  color: var(--text-2);
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--chip-bg);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.platform-pill:hover { border-color: var(--accent-line); color: var(--text); }

/* ─── 11. PROOF ─────────────────────────────────────────────────────────── */

.proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem; }
.systems-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem; }
.systems-grid > :first-child { grid-column: 1 / -1; }

.proof-card { display: flex; flex-direction: column; padding: 1.9rem; }
.proof-badge {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.7rem;
  margin-bottom: 1.1rem;
}
.proof-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.proof-period {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}
.proof-body { font-size: 0.9375rem; color: var(--text-2); line-height: 1.6; margin-bottom: 1.5rem; }

.proof-metrics { display: flex; flex-wrap: wrap; gap: 1.1rem 1.75rem; margin-top: auto; }
.proof-metric { display: flex; flex-direction: column; gap: 0.35rem; }
.proof-metric .pm-val {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.proof-metric .pm-label { font-size: 0.75rem; color: var(--text-3); }

.proof-card--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 2.75rem;
  align-items: center;
  padding: 2.25rem;
}
.proof-main { display: flex; flex-direction: column; height: 100%; }
.proof-card--featured .proof-title { font-size: clamp(1.5rem, 2.4vw, 2rem); }

.proof-chart {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.proof-card--featured .proof-chart--side {
  margin-top: 0;
  padding: 0 0 0 2.75rem;
  border-top: none;
  border-left: 1px solid var(--line);
}
.proof-chart svg { width: 100%; height: auto; overflow: visible; }
.proof-chart .chart-bar { fill: var(--chart-muted); }
.proof-chart .chart-bar--accent { fill: var(--accent); }
.proof-chart .chart-baseline { stroke: var(--line-strong); stroke-width: 1; }
.proof-chart .chart-avg { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 3; }
.proof-chart .chart-ring { fill: none; stroke: var(--chart-ring-track); stroke-width: 10; }
.proof-chart .chart-ring--accent { stroke: var(--accent); stroke-linecap: round; }
.proof-chart .chart-val {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  fill: var(--text);
}
.proof-chart .chart-val--accent { fill: var(--accent-text); }
.proof-chart .chart-val--sm { font-size: 7.5px; }
.proof-chart .chart-val--lg { font-size: 15px; letter-spacing: -0.03em; }
.proof-chart .chart-cat {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 500;
  fill: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.proof-chart .chart-cat--left { font-size: 9px; text-transform: none; letter-spacing: 0; }
.proof-chart .chart-bar--accent,
.proof-chart .chart-ring--accent { filter: drop-shadow(0 0 6px rgba(255, 107, 26, 0.35)); }
.proof-chart-caption { font-size: 0.75rem; color: var(--text-3); margin-top: 0.75rem; }

.stack-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; }
.stack-tags li {
  font-size: 0.75rem;
  color: var(--text-2);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--chip-bg);
}
.stack-tags .stack-tag--live { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-soft); }

/* ─── 12. SLIDESHOW — glass device frame ────────────────────────────────── */

.ss-frame {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 0.6rem;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  box-shadow:
    var(--ring),
    inset 0 1px 0 var(--glass-highlight),
    var(--glass-shadow);
}
.ss-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; }
.ss-chrome {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.35rem 0.6rem 0.75rem;
}
.ss-lights { display: flex; gap: 6px; }
.ss-lights i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.ss-lights i:first-child { background: var(--accent); opacity: 0.85; }
.ss-address {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
  padding: 0.25rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  border: 1px solid var(--line);
}
.ss-count { justify-self: end; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); }
.ss-viewport { position: relative; overflow: hidden; border-radius: calc(var(--radius-xl) - 0.6rem); background: var(--surface-solid); }
.ss-track { display: flex; transition: transform 800ms var(--ease-out); }
.ss-slide { min-width: 100%; margin: 0; display: flex; flex-direction: column; background: var(--surface-solid); }
.ss-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  background: #F4F5F7;
  filter: var(--shot-filter);
  transition: filter var(--dur-slow) var(--ease-out);
}
.ss-frame:hover .ss-slide img { filter: none; }
.ss-slide figcaption {
  padding: 0.95rem 1.25rem;
  font-size: 0.8125rem;
  color: var(--text-2);
  line-height: 1.5;
  border-top: 1px solid var(--line);
}
.ss-slide figcaption strong { color: var(--accent-text); font-weight: 600; margin-right: 0.5rem; }
.ss-arrow {
  position: absolute;
  top: calc(50% - 26px);
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
  background: var(--glass-fill-lens);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 24px -12px rgba(2, 4, 12, 0.5);
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ss-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ss-arrow:hover { background: var(--accent); color: var(--on-accent); }
.ss-arrow:active { transform: translateY(-50%) scale(0.95); }
.ss-prev { left: 14px; }
.ss-next { right: 14px; }
.ss-dots { display: flex; justify-content: center; gap: 2px; padding: 0.6rem 0 0.2rem; }
.ss-dot { width: 26px; height: 26px; padding: 0; border: none; background: transparent; cursor: pointer; position: relative; }
.ss-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  transform: translate(-50%, -50%);
  transition: width 450ms var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.ss-dot.active::after { width: 22px; background: var(--accent); }

/* ─── 13. PROCESS ───────────────────────────────────────────────────────── */

.loom-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface-solid);
  box-shadow:
    var(--ring),
    var(--glass-shadow);
}
.loom-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.loom-frame::before,
.creative-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, var(--surface-solid) 8%, var(--tangerine-500) 18%, var(--surface-solid) 33%);
  background-size: 300% 100%;
  animation: media-shimmer 1.6s ease-in-out infinite;
  opacity: 0.18;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.loom-frame.is-loaded::before,
.creative-thumb.is-loaded::before { opacity: 0; }
@keyframes media-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── 14. EXPERIENCE — timeline with a light rail ───────────────────────── */

.timeline { position: relative; --rail-x: 214px; }
.timeline-rail {
  position: absolute;
  left: var(--rail-x);
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: var(--line);
}
.timeline-rail-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 30%, transparent) 100%);
  box-shadow: 0 0 12px var(--accent-glow);
  transform-origin: top;
}
.motion-ready .timeline-rail-fill {
  animation: railFill linear both;
  animation-timeline: view();
  animation-range: entry 30% cover 70%;
}
@keyframes railFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 180px 1fr;
  column-gap: 68px;
  padding: 0.4rem 0 3rem;
}
.timeline-item:last-child { padding-bottom: 0; }
.tl-period { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-3); padding-top: 0.3rem; }
.tl-dot {
  position: absolute;
  left: calc(var(--rail-x) - 5px);
  top: 0.75rem;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent-glow);
}
.tl-role {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}
.tl-company { font-size: 0.875rem; color: var(--accent-text); margin: 0.3rem 0 1.1rem; }
.tl-points { display: flex; flex-direction: column; gap: 0.6rem; }
.tl-points li { position: relative; padding-left: 1.25rem; font-size: 0.9375rem; color: var(--text-2); line-height: 1.6; }
.tl-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
}

/* ─── 15. CREATIVE ──────────────────────────────────────────────────────── */

.creative-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 1.9rem;
}
.creative-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
}
.creative-card > span { display: block; }
.creative-card--featured { grid-row: span 2; }
.creative-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: var(--surface-solid);
  isolation: isolate;
}
.creative-card--featured .creative-thumb { flex: 1; aspect-ratio: auto; min-height: 280px; }
.creative-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.creative-card:hover .creative-thumb img { transform: scale(1.04); }
.creative-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(4, 6, 13, 0.55) 100%);
}
.creative-play {
  position: absolute;
  left: 1.1rem;
  bottom: 1.1rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(10, 16, 32, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: transform 450ms var(--ease-spring), background-color var(--dur-base) var(--ease-out);
}
/* a triangle's visual centre sits right of its box centre */
.creative-play svg { width: 20px; height: 20px; fill: #fff; margin-left: 2px; }
.creative-card:hover .creative-play { transform: scale(1.08); background: var(--accent); }
.creative-card:hover .creative-play svg { fill: var(--on-accent); }
.creative-card--featured .creative-play { width: 68px; height: 68px; }
.creative-info { padding: 1.35rem 1.5rem 1.5rem; }
.creative-info .proof-badge { display: inline-flex; margin-bottom: 0.8rem; }
.creative-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  color: var(--text);
}
.creative-card--featured .creative-title { font-size: 1.55rem; }
.creative-sub { display: block; font-size: 0.875rem; color: var(--text-2); margin-top: 0.2rem; }

/* ─── LIGHTBOX ─── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg-deep) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.lightbox[hidden] { display: none; }
.lightbox-inner {
  position: relative;
  width: min(960px, 100%);
  aspect-ratio: 16 / 9;
  max-height: calc(100dvh - 2rem);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  box-shadow: var(--ring), 0 40px 80px -30px rgba(0, 0, 0, 0.8);
}
.lightbox-inner--shorts { aspect-ratio: 9 / 16; width: min(380px, 100%, calc((100dvh - 2rem) * 9 / 16)); }
.lightbox-inner iframe { width: 100%; height: 100%; border: 0; }
.lightbox-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  background: rgba(10, 16, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.lightbox-close svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; }
.lightbox-close:hover { background: var(--accent); color: var(--on-accent); }

/* ─── 16. CONTACT ───────────────────────────────────────────────────────── */

.contact-section { position: relative; padding: var(--section-y) 0 calc(var(--section-y) + 1rem); overflow: hidden; }
/* Single restrained glow behind the card — replaces the old animated
   "converging beams" SVG, which read as a dated stock connection-lines
   effect. Sits first in the DOM so the (positioned) glass card, which
   comes later, naturally paints on top of it. */
.contact-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(760px, 92vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
}
.contact-wrapper { display: flex; justify-content: center; }
.contact-card { width: 100%; max-width: 700px; padding: clamp(2rem, 5vw, 3.25rem); text-align: center; }
.contact-card .eyebrow { margin-bottom: 1.25rem; }
.contact-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text);
}
.contact-sub { color: var(--text-2); margin: 1rem auto 2rem; max-width: 30rem; }
.contact-actions { display: flex; justify-content: center; }

.lead-divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 2.25rem 0 1.6rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lead-divider::before, .lead-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.lead-form { text-align: left; margin-bottom: 1.75rem; }
.lead-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lead-field { display: block; margin-bottom: 1rem; }
.lead-field > span { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--text-2); margin-bottom: 0.45rem; }
.lead-field em { font-style: normal; color: var(--text-3); font-weight: 400; }
.lead-field input,
.lead-field select,
.lead-field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--input-bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  box-shadow: inset 0 2px 4px rgba(2, 4, 12, 0.12);
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.lead-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-2) 50%),
    linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
.lead-field select option { background: var(--surface-solid); color: var(--text); }
.lead-field textarea { resize: vertical; min-height: 92px; }
.lead-field input::placeholder, .lead-field textarea::placeholder { color: var(--text-3); opacity: 0.7; }
.lead-field input:focus,
.lead-field select:focus,
.lead-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: inset 0 2px 4px rgba(2, 4, 12, 0.1), 0 0 0 4px var(--accent-soft);
}
.lead-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-submit { width: 100%; justify-content: center; margin-top: 0.4rem; }
.lead-submit:disabled { opacity: 0.6; cursor: wait; }
.lead-status { min-height: 1.3rem; margin-top: 0.85rem; font-size: 0.8125rem; text-align: center; color: var(--text-2); }
.lead-status--success { color: var(--success); }
.lead-status--error { color: var(--error); }
.lead-note { font-size: 0.75rem; color: var(--text-3); text-align: center; }
.lead-note a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; }

.contact-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
  font-size: 0.8125rem;
}
.contact-info a { color: var(--text-2); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.contact-info a:hover { color: var(--accent-text); }
.contact-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); opacity: 0.6; }
.copy-email {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.55rem;
  cursor: pointer;
}

/* CTA + marquee: card on the left, a column of what I work on scrolling on
   the right. The fade is a mask, not per-frame JS, so it costs nothing. */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.contact-grid .contact-card { max-width: none; }
.contact-actions { flex-wrap: wrap; gap: 0.85rem; }
.contact-note { font-size: 0.8125rem; color: var(--text-3); margin: 1.1rem 0 1.6rem; }

.cta-marquee {
  --marquee-gap: 1.7rem;
  display: flex;
  flex-direction: column;
  height: 470px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
.cta-marquee-track {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--marquee-gap);
  padding-bottom: var(--marquee-gap);
  animation: marqueeY 26s linear infinite;
}
.cta-marquee:hover .cta-marquee-track,
.cta-marquee.is-paused .cta-marquee-track { animation-play-state: paused; }
.cta-marquee li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.1vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text);
}
.cta-marquee li::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 12px var(--accent-glow);
}
@keyframes marqueeY { to { transform: translateY(-100%); } }
@keyframes marqueeX { to { transform: translateX(-100%); } }

/* Quick brief modal (native <dialog>). Not .glass-pane: that sets
   position: relative, which would pull the dialog out of the top layer's
   fixed positioning. .brief-inner carries the padding so a click whose
   target is the <dialog> itself can only be a click on the backdrop. */
.brief-modal {
  position: fixed;
  width: min(640px, calc(100% - 2rem));
  max-width: none;
  max-height: min(92dvh, 900px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  color: var(--text);
  background: color-mix(in srgb, var(--surface-solid) 94%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    var(--ring),
    inset 0 1px 0 var(--glass-highlight),
    0 40px 90px -30px rgba(2, 4, 12, 0.8);
  overflow: auto;
  overscroll-behavior: contain;
}
.brief-modal[open] { animation: briefIn 420ms var(--ease-out); }
.brief-modal::backdrop { background: rgba(4, 6, 13, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-theme="light"] .brief-modal::backdrop { background: rgba(40, 26, 12, 0.32); }
.brief-modal[open]::backdrop { animation: briefFade 300ms var(--ease-out); }
@keyframes briefIn { from { opacity: 0; transform: translateY(18px) scale(0.98); } }
@keyframes briefFade { from { opacity: 0; } }
.brief-open body { overflow: hidden; }
.brief-inner { padding: clamp(1.5rem, 4vw, 2.25rem); }
.brief-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.brief-head .eyebrow { margin-bottom: 1rem; }
.brief-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.brief-sub { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--text-2); }
.brief-close {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
  background: var(--chip-bg);
  border: 1px solid var(--line-strong);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.brief-close:hover { border-color: var(--accent-line); transform: rotate(90deg); }
.brief-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.brief-modal .lead-form { margin-bottom: 0; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-grid .cta-marquee { order: -1; }
  .cta-marquee {
    flex-direction: row;
    height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
  }
  .cta-marquee-track { flex-direction: row; padding: 0 var(--marquee-gap) 0 0; animation-name: marqueeX; animation-duration: 32s; }
  .cta-marquee li { white-space: nowrap; font-size: clamp(1.5rem, 5vw, 2.1rem); }
}
@media (max-width: 720px) {
  /* Phones: the modal becomes a full-screen sheet so the keyboard can't hide the form */
  .brief-modal { width: 100%; height: 100dvh; max-height: 100dvh; border: none; border-radius: 0; box-shadow: none; }
  .brief-inner { padding: max(1.25rem, env(safe-area-inset-top)) var(--gutter) max(1.75rem, env(safe-area-inset-bottom)); }
  .contact-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ─── 17. FOOTER · FLOATING · TOAST ─────────────────────────────────────── */

.site-footer { position: relative; z-index: var(--z-base); padding: 1.75rem 0 2rem; }
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem 2rem; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.footer-brand .nav-logo-mark { width: 32px; height: 32px; border-radius: 10px; font-size: 0.95rem; }
.footer-mark { font-family: var(--font-display); font-weight: 600; color: var(--text); }
.footer-tagline { font-size: 0.8125rem; color: var(--text-3); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.footer-nav a { font-size: 0.8125rem; color: var(--text-2); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.footer-nav a:hover { color: var(--accent-text); }
.footer-top,
.back-to-top-float {
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--accent-text);
  background: var(--glass-fill-lens);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}
.footer-top { width: 42px; height: 42px; transition: transform var(--dur-base) var(--ease-out); }
.footer-top:hover { transform: translateY(-2px); }
.footer-top svg,
.back-to-top-float svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.back-to-top-float {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: var(--z-float);
  width: 48px;
  height: 48px;
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 14px 30px -14px rgba(2, 4, 12, 0.6);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px) scale(0.92);
  transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.back-to-top-float.visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top-float:hover { color: var(--on-accent); background: var(--accent); }

.toast {
  position: fixed;
  top: 92px;
  left: 50%;
  z-index: var(--z-toast);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  background: var(--glass-fill-lens);
  border: 1px solid var(--accent-line);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 18px 40px -20px rgba(2, 4, 12, 0.6);
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform 400ms var(--ease-out);
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ─── COOKIE CONSENT PANEL ───
   Hidden by default (main.js only reveals it while consent is undecided).
   Anchored bottom-left as a small, structured panel — the same corner-card
   pattern used by Stripe, Vercel and most dev-tool sites — rather than a
   full-width bar or a centred toast, so it reads as a deliberate settings
   panel instead of a transient pop-up. Built on .glass-pane (the same
   material as the hero panel and contact card) so it matches the site's
   heaviest material tier, not the lightweight toast. */
.cookie-banner {
  position: fixed;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-toast);
  width: min(380px, calc(100vw - clamp(2rem, 6vw, 3.5rem)));
  padding: 1.35rem;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-head {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.cookie-banner-head svg {
  width: 16px;
  height: 16px;
  stroke: var(--accent-text);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.cookie-banner p {
  margin: 0 0 1.1rem;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-2);
}
.cookie-banner-actions {
  display: flex;
  gap: 0.6rem;
}
.cookie-banner-actions .btn {
  flex: 1;
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 400px) {
  .cookie-banner-actions { flex-direction: column; }
}

/* ─── LEGAL CONTENT (privacy policy) ─── */
.legal-content { max-width: 42rem; }
.legal-content h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 2.25rem 0 0.75rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-2);
}
.legal-content p { margin: 0 0 0.9rem; }
.legal-content ul { margin: 0 0 0.9rem; padding-left: 1.25rem; }
.legal-content li { margin-bottom: 0.4rem; }
.legal-content a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.legal-content strong { color: var(--text); font-weight: 600; }

/* ─── 404 ─── */
.notfound { padding: 6rem 0; max-width: 640px; }
.notfound h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--text);
  margin-bottom: 1.25rem;
}

/* ─── AGENCY PARTNER PAGE (/agency-partner) ───
   Reuses the homepage materials (.lg-card, .glass-pane, .exp-*, .proof-*,
   .lead-*); only the layouts below are new. No shader canvas on this page. */
.agency-hero h1 { font-size: clamp(2.75rem, 5.4vw, 4.9rem); }
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--line);
}
.split-col {
  padding: 1.25rem 1.15rem;
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
}
.split-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
  margin-bottom: 0.85rem;
}
.split-col--accent .split-label { color: var(--accent-text); }
.split-list { display: flex; flex-direction: column; gap: 0.65rem; }
.split-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--text);
}
.split-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-3);
}
.split-col--accent .split-list li::before { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.9rem; }
.step-card { padding: 1.75rem; display: flex; flex-direction: column; }
.step-num {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--accent-text);
  margin-bottom: 2.25rem;
}

.lane-grid,
.standards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem; }
.lane-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-3);
  margin-bottom: 0.4rem;
}

/* ─── FAQ ───
   Native <details>/<summary>: crawlable and fully usable without JS. */
.faq-list { display: flex; flex-direction: column; gap: 0.9rem; }
.faq-item { padding: 1.4rem 1.75rem; }
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  color: var(--accent-text);
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer { margin-top: 0.9rem; font-size: 0.9375rem; color: var(--text-2); line-height: 1.6; max-width: 42rem; }

/* Homepage footer teaser pointing to this page */
.footer-nav a.footer-agency { color: var(--accent-text); }

/* Agency route, made visible: an accent chip in the nav (set per page via
   page-links "highlight") and a pill under the homepage hero CTAs. Both stay
   outlined so the solid orange button remains the one primary action. */
.nav-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 36px;
  padding: 0 0.95rem 0 0.8rem;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
  transition: border-color var(--dur-base) var(--ease-out), --peel 450ms var(--ease-spring);
}
.nav-highlight:hover { border-color: var(--accent); }
.nav-highlight .eyebrow-dot { animation: highlightPulse 2.4s var(--ease-in-out) infinite; }
@keyframes highlightPulse {
  50% { box-shadow: 0 0 0 6px transparent, 0 0 14px var(--accent-glow); }
}
.nav-highlight--menu { --peel-open: 20px; height: 48px; padding: 0 1.3rem 0 1.1rem; font-size: 0.9375rem; }
.nav-highlight-arrow { margin-left: 0.15rem; }

/* ─── PEEL LABEL ───
   "White-label" taken literally: the element is a label with a folded
   corner. Every 8s the corner lifts and (on touch screens, which have no
   hover) the text flips to show whose name goes on the work. On hover or
   focus it peels open and flips. Reduced motion: static label. */
@property --peel { syntax: '<length>'; inherits: true; initial-value: 8px; }
.peel {
  --peel: 8px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - var(--peel)) 0, 100% var(--peel), 100% 100%, 0 100%);
  animation: peelPeek 8s var(--ease-in-out) 2s infinite;
}
.peel::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: var(--peel);
  height: var(--peel);
  background: linear-gradient(225deg, transparent 50%, var(--tangerine-300) 50%);
  border-bottom-left-radius: 3px;
  filter: drop-shadow(-1px 1px 1.5px rgba(60, 18, 0, 0.35));
  pointer-events: none;
}
.peel-text { display: inline-grid; overflow: hidden; vertical-align: top; }
.peel-front, .peel-back {
  grid-area: 1 / 1;
  transition: transform 450ms var(--ease-spring), opacity 250ms var(--ease-out);
}
.peel-back { transform: translateY(110%); opacity: 0; }
@keyframes peelPeek {
  0%, 72%, 100% { --peel: 8px; }
  78%, 92% { --peel: var(--peel-open, 15px); }
}
.peel:hover, .peel:focus-visible,
.hero-agency:hover .peel, .hero-agency:focus-visible .peel { animation: none; --peel: var(--peel-open, 15px); }
.peel:hover .peel-front, .peel:focus-visible .peel-front,
.hero-agency:hover .peel-front, .hero-agency:focus-visible .peel-front { transform: translateY(-110%); opacity: 0; }
.peel:hover .peel-back, .peel:focus-visible .peel-back,
.hero-agency:hover .peel-back, .hero-agency:focus-visible .peel-back { transform: none; opacity: 1; }
@media (hover: none) {
  .peel .peel-front { animation: peelFront 8s var(--ease-in-out) 2s infinite; }
  .peel .peel-back { animation: peelBack 8s var(--ease-in-out) 2s infinite; }
}
@keyframes peelFront {
  0%, 74%, 100% { transform: none; opacity: 1; }
  78%, 92% { transform: translateY(-110%); opacity: 0; }
}
@keyframes peelBack {
  0%, 74%, 100% { transform: translateY(110%); opacity: 0; }
  78%, 92% { transform: none; opacity: 1; }
}

.hero-agency {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 100%;
  margin-top: 1.25rem;
  padding: 0.4rem 0.4rem 0.4rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text);
  text-decoration: none;
  background: var(--chip-bg);
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 var(--glass-highlight), 0 10px 28px -16px var(--accent-glow);
  transition: border-color var(--dur-base) var(--ease-out);
}
.hero-agency:hover { border-color: var(--accent); }
.hero-agency-tag {
  --peel-open: 11px;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 5px;
  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
  transition: --peel 450ms var(--ease-spring);
}
.hero-agency-arrow {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--on-accent);
  background: var(--accent);
  transition: transform 450ms var(--ease-spring);
}
.hero-agency-arrow svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-agency:hover .hero-agency-arrow { transform: translate(2px, -2px) scale(1.06); }
.hero-agency + .avail { margin-top: 1.5rem; }

@media (max-width: 960px) {
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .steps-grid, .lane-grid, .standards-grid { grid-template-columns: 1fr; }
  .step-num { margin-bottom: 1.25rem; }
  .hero-agency { display: flex; }
  .hero-agency-text { flex: 1; }
}
@media (max-width: 380px) {
  .nav-right .nav-highlight { padding: 0 0.7rem; font-size: 0.75rem; }
}
/* Smallest phones: drop the dot and tighten the gaps so the burger still fits */
@media (max-width: 360px) {
  .nav-right { gap: 0.4rem; }
  .nav-right .nav-highlight { padding: 0 0.6rem; }
  .nav-right .nav-highlight .eyebrow-dot { display: none; }
}
@media (max-width: 420px) {
  .split-grid { grid-template-columns: 1fr; }
}

/* ─── 18. MOTION ────────────────────────────────────────────────────────── */

/* Entry reveal: rise + un-blur. Scoped to .motion-ready (set in <head>) so
   no-JS and reduced-motion visitors see content immediately. */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(6px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out),
    box-shadow 500ms var(--ease-out);
}
.motion-ready .reveal.visible { opacity: 1; transform: none; filter: none; }
.motion-ready .reveal-delay-1 { transition-delay: 90ms; }
.motion-ready .reveal-delay-2 { transition-delay: 180ms; }
.motion-ready .reveal-delay-3 { transition-delay: 270ms; }
.motion-ready .reveal-delay-4 { transition-delay: 360ms; }
.motion-ready .reveal-delay-5 { transition-delay: 450ms; }
/* Once revealed, cards must answer hover instantly — drop the stagger delay */
.motion-ready .lg-card.reveal.visible { transition-delay: 0ms; }
@media (hover: hover) and (pointer: fine) {
  .motion-ready .lg-card.reveal.visible:hover { transform: translateY(-3px); }
}

/* Hero intro — a one-time cascade on load */
.motion-ready .hero-copy > *,
.motion-ready .hero-panel {
  animation: heroIn 1100ms var(--ease-out) both;
}
.motion-ready .hero-copy > :nth-child(1) { animation-delay: 80ms; }
.motion-ready .hero-copy > :nth-child(2) { animation-delay: 160ms; }
.motion-ready .hero-copy > :nth-child(3) { animation-delay: 260ms; }
.motion-ready .hero-copy > :nth-child(4) { animation-delay: 340ms; }
.motion-ready .hero-copy > :nth-child(5) { animation-delay: 420ms; }
.motion-ready .hero-copy > :nth-child(6) { animation-delay: 500ms; }
.motion-ready .hero-panel { animation-delay: 380ms; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* ─── PROOF MOTION ───
   One-time reveal when a case study scrolls in (class set in main.js).
   Only transform / opacity / filter / stroke-dashoffset / clip-path animate. */
:root {
  --proof-base: 250ms;   /* let the card's own reveal land first */
  --proof-stagger: 70ms; /* keep in sync with STAGGER in main.js */
}

.motion-ready #proof .proof-metric {
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  transition:
    opacity 600ms var(--ease-out-quint),
    transform 600ms var(--ease-out-quint),
    filter 600ms var(--ease-out-quint);
  transition-delay: calc(150ms + var(--i, 0) * 90ms);
}
.motion-ready #proof .is-in .proof-metric { opacity: 1; transform: none; filter: blur(0); }

.motion-ready #proof .proof-chart .chart-bar {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 900ms var(--ease-out-quint);
  transition-delay: calc(var(--proof-base) + var(--i, 0) * var(--proof-stagger));
}
.motion-ready #proof .proof-chart .chart-bar--h { transform-origin: 0 50%; transform: scaleX(0); }
.motion-ready #proof .proof-chart .chart-bar--accent {
  filter: drop-shadow(0 0 0 rgba(255, 107, 26, 0));
  transition:
    transform 900ms var(--ease-out-quint) calc(var(--proof-base) + var(--i, 0) * var(--proof-stagger)),
    filter 700ms var(--ease-out-quint) calc(var(--proof-base) + var(--n, 4) * var(--proof-stagger) + 600ms);
}
.motion-ready #proof .is-in .proof-chart .chart-bar { transform: none; }
.motion-ready #proof .is-in .proof-chart .chart-bar--accent { filter: drop-shadow(0 0 6px rgba(255, 107, 26, 0.35)); }

.motion-ready #proof .proof-chart text {
  transform-box: fill-box;
  opacity: 0;
  transform: translateY(4px);
  filter: blur(3px);
  transition:
    opacity 500ms var(--ease-out-quint),
    transform 500ms var(--ease-out-quint),
    filter 500ms var(--ease-out-quint);
  transition-delay: calc(var(--proof-base) + var(--i, 0) * var(--proof-stagger) + 450ms);
}
.motion-ready #proof .is-in .proof-chart text { opacity: 1; transform: none; filter: blur(0); }

.motion-ready #proof .proof-chart .chart-avg {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms var(--ease-in-out-cubic);
  transition-delay: calc(var(--proof-base) + var(--n, 4) * var(--proof-stagger) + 450ms);
}
.motion-ready #proof .is-in .proof-chart .chart-avg { clip-path: inset(0 0 0 0); }

.motion-ready #proof .proof-chart .chart-ring--accent {
  stroke-dashoffset: 251.3;
  opacity: 0;
  filter: drop-shadow(0 0 0 rgba(255, 107, 26, 0));
  transition:
    stroke-dashoffset 1400ms var(--ease-out-quint) 450ms,
    opacity 200ms linear 450ms,
    filter 700ms var(--ease-out-quint) 1500ms;
}
.motion-ready #proof .is-in .proof-chart .chart-ring--accent { stroke-dashoffset: 171.9; opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 107, 26, 0.35)); }
.motion-ready #proof .proof-chart .chart-val--lg { transition-delay: 450ms; }

.motion-ready #proof .proof-chart-caption {
  opacity: 0;
  transition: opacity 600ms var(--ease-out-quint);
  transition-delay: calc(var(--proof-base) + 900ms);
}
.motion-ready #proof .is-in .proof-chart-caption { opacity: 1; }

/* Theme switch: circular reveal from the toggle (View Transitions API) */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* ─── 19. RESPONSIVE ────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-burger { display: block; }
  .site-nav { grid-template-columns: 1fr auto; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 560px; }
  .metrics-bento { grid-template-columns: 1fr 1fr; }
  .metric-item--hero { grid-column: 1 / -1; grid-row: auto; min-height: 0; gap: 1.25rem; }
  .expertise-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exp-card--lg { grid-column: 1 / -1; }
  .exp-card--md, .exp-card--sm { grid-column: span 1; }
  .proof-card--featured { grid-template-columns: 1fr; gap: 1.75rem; }
  .proof-card--featured .proof-chart--side { padding: 1.5rem 0 0; border-left: none; border-top: 1px solid var(--line); }
  .section-head--split { grid-template-columns: 1fr; }
  .creative-grid { grid-template-columns: 1fr 1fr; }
  .creative-card--featured { grid-column: 1 / -1; grid-row: auto; }
  .creative-card--featured .creative-thumb { flex: none; aspect-ratio: 16 / 9; min-height: 0; }
}

@media (max-width: 720px) {
  :root { --bezel: 5px; }
  .site-header { top: 10px; padding: 0 10px; }
  .site-nav { height: 58px; padding: 0 6px 0 8px; gap: 0.5rem; }
  .nav-logo-word { display: none; }
  .nav-cta { display: none; }
  .hero { padding: 108px 0 64px; }
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .hero-actions .btn-primary { justify-content: space-between; }
  .hero-stat { padding: 1.1rem 1rem; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo-frame { max-width: 300px; }
  .expertise-bento { grid-template-columns: 1fr; }
  .exp-card--md, .exp-card--sm, .exp-card--lg { grid-column: 1 / -1; }
  .proof-grid, .systems-grid { grid-template-columns: 1fr; }
  .proof-card, .proof-card--featured { padding: 1.5rem; }
  .creative-grid { grid-template-columns: 1fr; }
  .timeline { --rail-x: 5px; }
  .timeline-item { grid-template-columns: 1fr; padding-left: 2rem; row-gap: 0.4rem; }
  .ss-chrome { grid-template-columns: auto 1fr; }
  .ss-address { display: none; }
  .ss-arrow { width: 40px; height: 40px; top: calc(50% - 34px); }
  .ss-prev { left: 8px; }
  .ss-next { right: 8px; }
  .lead-row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { justify-content: center; text-align: center; }
  .footer-brand, .footer-nav { justify-content: center; }
  .back-to-top-float { right: 14px; }
}

/* Phones: the hero panel goes back to plain blur (big surface, low-end GPUs).
   The nav pill is small enough to keep its lens. */
@media (max-width: 720px) {
  .glass-pane.glass-refract {
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
  }
}

@media (max-width: 720px) {
  .metrics-bento { gap: 1.4rem; }
  .metric-item { min-height: 0; padding: 1.25rem 1.15rem; }
  .metric-item:not(.metric-item--hero) .metric-num { font-size: 1.75rem; }
  /* Wide featured chart scrolls sideways instead of shrinking its labels */
  .proof-card--featured .proof-chart--side { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .proof-card--featured .proof-chart--side svg { min-width: 460px; }
  .proof-card--featured .proof-chart--side .proof-chart-caption { position: sticky; left: 0; max-width: calc(100vw - 7rem); }
}

@media (max-width: 420px) {
  .hero-stat-val { font-size: 1.6rem; }
}

/* ─── 20. ACCESSIBILITY PREFERENCES ─────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ambient-orb, .logos-track { animation: none !important; }
  .logos-track { flex-wrap: wrap; justify-content: center; width: auto; }
  .logos-set[aria-hidden="true"] { display: none; }
  .logos-set { flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; padding: 0 var(--gutter); }
}

/* Visitors who ask for less transparency get solid, calm surfaces */
@media (prefers-reduced-transparency: reduce) {
  .lg-card, .glass-pane, .site-nav, .mobile-menu, .ss-frame, .toast, .back-to-top-float, .about-photo-chip, .ss-arrow,
  .site-nav.glass-refract, .glass-pane.glass-refract {
    background: var(--surface-solid);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .noise-overlay, .grid-overlay { display: none; }
}

/* Browsers without backdrop-filter: make lens surfaces opaque enough to read */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav, .mobile-menu, .toast { background: var(--surface-solid); }
}