/* ============================================================
   SPARQ+ — design system
   Sub-brand of TechSparq. Pure black chassis, surgical red, WebGL-first.
   Typography: Geist (display + body) + Geist Mono (labels).
   ============================================================ */

/* ---------- TOKENS ---------- */
:root {
  /* Color */
  --void: #000000;
  --ink: #0A0A0A;
  --carbon: #111111;
  --steel: #1A1A1A;
  --slate: #2A2A2A;
  --mid: #6B6B6B;
  --ash: #9A9A9A;
  --rule: rgba(255, 255, 255, 0.08);
  --rule-strong: rgba(255, 255, 255, 0.18);
  --bone: #F2F0EB;
  --paper: #FAF9F6;
  --red: #D0021B;
  --red-bright: #E70909;
  --red-glow: rgba(208, 2, 27, 0.5);

  /* Typography */
  --f-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --f-body: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --f-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (mobile-first) */
  --t-mono: clamp(10px, 0.6rem + 0.1vw, 11px);
  --t-label: clamp(10px, 0.65rem + 0.1vw, 12px);
  --t-body: clamp(15px, 0.85rem + 0.2vw, 17px);
  --t-lead: clamp(17px, 0.95rem + 0.3vw, 20px);
  --t-h3: clamp(22px, 1.2rem + 0.6vw, 30px);
  --t-h2: clamp(32px, 1.6rem + 1.6vw, 56px);
  --t-h1: clamp(48px, 2.4rem + 4vw, 128px);
  --t-display: clamp(72px, 3rem + 7vw, 200px);

  /* Spacing */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;
  --s-9: 200px;

  /* Layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max-w: 1440px;
  --nav-h: 72px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);
  --d-fast: 0.3s;
  --d-mid: 0.6s;
  --d-slow: 1.2s;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--bone);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';
  overflow-x: hidden;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--bone); }

/* Lock scroll while page transitions or nav overlay are active */
html.is-locked, html.is-locked body { overflow: hidden; height: 100vh; }

/* ---------- TYPE PRIMITIVES ---------- */
.mono {
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}
.mono--red { color: var(--red); }
.mono--bone { color: var(--bone); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--red);
}

.h-display {
  font-family: var(--f-display);
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.04em;
  /* Optical alignment: at display size, font side-bearings read as a few px
     of visual indent vs. adjacent body type. Pull back ~4% of em so the
     visual left edge of the H1 lines up with the body copy below. */
  margin-inline-start: -0.04em;
}
.h1 {
  font-family: var(--f-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.035em;
}
.h2 {
  font-family: var(--f-display);
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}
.h3 {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.h1 em, .h2 em, .h3 em, .h-display em {
  font-style: italic;
  color: var(--ash);
  font-weight: 500;
}
.lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ash);
  font-weight: 400;
}
p, .body { color: var(--ash); }
p strong { color: var(--bone); font-weight: 500; }

/* ---------- LAYOUT ---------- */
.shell {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: var(--s-7) 0; }
.section-tight { padding: var(--s-6) 0; }
.section-grand { padding: var(--s-9) 0; }
.section--bone { background: var(--bone); color: var(--ink); }
.section--bone p, .section--bone .lead { color: var(--steel); }
.section--bone .mono { color: var(--steel); }

@media (min-width: 768px) {
  .section { padding: var(--s-8) 0; }
}

/* ---------- LINKS ---------- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone);
  padding-bottom: 4px;
  transition: color var(--d-fast) var(--ease-out);
}
.link::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform 0.5s var(--ease-out);
}
.link:hover::after { transform: scaleX(0); transform-origin: right; }
.link--red { color: var(--red); }
.link--ink { color: var(--ink); }
.link svg, .link .arrow { transition: transform 0.4s var(--ease-out); }
.link:hover svg, .link:hover .arrow { transform: translate(4px, -4px); }

/* ---------- BUTTON ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 32px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--bone);
  border: 1px solid var(--red);
  cursor: pointer;
  overflow: hidden;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.btn span { position: relative; z-index: 2; }
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bone);
  transform: translateY(101%);
  transition: transform 0.5s var(--ease-out);
  z-index: 1;
}
.btn:hover { color: var(--red); }
.btn:hover::before { transform: translateY(0); }
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: var(--rule-strong);
}
.btn--ghost::before { background: var(--bone); }
.btn--ghost:hover { color: var(--ink); border-color: var(--bone); }

/* ---------- NAV ---------- */
.sp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--rule);
  transition: transform 0.5s var(--ease-out);
}
.sp-nav.is-hidden { transform: translateY(-100%); }
.sp-mark {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sp-mark span { color: var(--red); margin-left: 1px; }
.sp-mark img { height: 32px; width: auto; display: block; }
.sp-mark img + .sp-mark-text { display: none; }
.sp-nav-links {
  list-style: none;
  display: none;
  gap: 36px;
  align-items: center;
}
.sp-nav-links a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  position: relative;
  padding: 4px 0;
  transition: color var(--d-fast) var(--ease-out);
}
.sp-nav-links a::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}
.sp-nav-links a:hover { color: var(--red); }
.sp-nav-links a:hover::before { transform: scaleX(1); transform-origin: left; }
.sp-nav-links a[aria-current="page"] { color: var(--red); }

.sp-nav-cta {
  display: none;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--red);
  padding: 12px 18px;
  transition: background var(--d-fast) var(--ease-out);
}
.sp-nav-cta:hover { background: var(--red-bright); }

/* Language switcher — native <select>, minimally themed to fit the nav */
.sp-lang-wrap {
  display: none;
  align-items: center;
  gap: 6px;
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.sp-lang-icon {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  opacity: 0.55;
  transform: translateY(-1px);
}
.sp-lang {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: var(--bone);
  background: transparent;
  border: 1px solid var(--rule-strong, rgba(255,255,255,0.2));
  padding: 6px 24px 6px 10px;
  cursor: pointer;
  /* keep the OS-native dropdown UI */
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}
.sp-lang:hover { border-color: var(--red); }
.sp-lang:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.sp-lang option {
  background: var(--void, #000);
  color: var(--bone);
  letter-spacing: normal;
}
[dir="rtl"] .sp-lang { padding: 6px 10px 6px 24px; }
@media (min-width: 1024px) {
  .sp-lang-wrap { display: inline-flex; }
}

.sp-burger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 32px;
  height: 24px;
  padding: 0;
  align-items: flex-end;
  justify-content: center;
}
.sp-burger span {
  display: block;
  height: 1.5px;
  background: var(--bone);
  transition: width 0.3s var(--ease-out), transform 0.4s var(--ease-out), opacity 0.3s var(--ease-out);
}
.sp-burger span:nth-child(1) { width: 32px; }
.sp-burger span:nth-child(2) { width: 22px; }

@media (min-width: 1024px) {
  .sp-nav-links { display: flex; }
  .sp-nav-cta { display: inline-flex; align-items: center; }
  .sp-burger { display: none; }
}

/* Nav overlay (mobile + tablet) */
.sp-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--void);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--nav-h) var(--gutter) var(--gutter);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-out);
}
.sp-overlay.is-open { opacity: 1; pointer-events: auto; }
.sp-overlay-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle at 80% 20%, rgba(208, 2, 27, 0.18), transparent 60%),
              radial-gradient(circle at 20% 80%, rgba(208, 2, 27, 0.08), transparent 50%);
  opacity: 0.7;
}
.sp-overlay-inner { position: relative; z-index: 1; }
.sp-overlay-links { list-style: none; }
.sp-overlay-links li {
  border-top: 1px solid var(--rule);
  overflow: hidden;
}
.sp-overlay-links li:last-child { border-bottom: 1px solid var(--rule); }
.sp-overlay-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-family: var(--f-display);
  font-size: clamp(40px, 8vw, 80px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bone);
  transition: color var(--d-fast) var(--ease-out), padding var(--d-fast) var(--ease-out);
}
.sp-overlay-links a span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  transition: color var(--d-fast) var(--ease-out);
}
.sp-overlay-links a:hover { color: var(--red); padding-left: 16px; }
.sp-overlay-links a:hover span { color: var(--red); }

.sp-overlay-meta {
  margin-top: var(--s-5);
  display: grid;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.sp-overlay-meta a { color: var(--bone); }
.sp-overlay-meta a:hover { color: var(--red); }

body.nav-open .sp-burger span:nth-child(1) { width: 26px; transform: translateY(7.5px) rotate(45deg); }
body.nav-open .sp-burger span:nth-child(2) { width: 26px; transform: translateY(-7.5px) rotate(-45deg); }

/* (Custom cursor removed — using native system cursor.) */

/* ---------- PAGE TRANSITION ----------
   Simplified for low-flicker: single uniform black surface, no blend mode,
   no stagger. transitions.js fades it out as one unit after load. */
.sp-curtain {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: block;
  background: var(--void);
  opacity: 1;
  /* GPU-promote so the fade doesn't trigger layout */
  will-change: opacity;
}
/* Hide the legacy 3-panel children — single curtain element handles coverage now. */
.sp-curtain-panel { display: none; }

.sp-curtain-mark {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(40px, 8vw, 96px);
  letter-spacing: -0.04em;
  color: var(--bone);
  opacity: 1;
  z-index: 9001;
  pointer-events: none;
  will-change: opacity;
}
.sp-curtain-mark span { color: var(--red); }

/* ---------- LOADING INDICATOR ----------
   Lives behind the wordmark while the curtain is up.
   - Faint red radial glow pulses
   - Thin ring with a sweeping arc (white tint cycling toward red)
   - On load complete: arc snaps fully red, glow flares once, then fades with the curtain. */
.sp-curtain-loader {
  position: fixed;
  top: 50%; left: 50%;
  width: clamp(220px, 26vmin, 340px);
  height: clamp(220px, 26vmin, 340px);
  transform: translate(-50%, -50%);
  z-index: 9001;
  pointer-events: none;
  opacity: 1;
  will-change: opacity;
}
.sp-curtain-loader-glow {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(208, 2, 27, 0.22) 0%, rgba(208, 2, 27, 0) 62%);
  animation: sp-loader-pulse 2.6s ease-in-out infinite;
  filter: blur(6px);
  will-change: opacity, transform;
}
.sp-curtain-loader-ring {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: sp-loader-spin 2.4s linear infinite;
  transform-origin: center;
}
.sp-curtain-loader-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}
.sp-curtain-loader-arc {
  fill: none;
  stroke: rgba(255, 255, 255, 0.92);
  stroke-width: 1.75;
  stroke-linecap: round;
  /* Visible arc length out of circumference 2π·54 ≈ 339.29 */
  stroke-dasharray: 90 250;
  stroke-dashoffset: 0;
  animation: sp-loader-color 2.8s ease-in-out infinite;
}

/* Wordmark gets a faint red textShadow that intensifies as the loader runs.
   Bumps the perceived "charge" without touching the typography itself. */
.sp-curtain-mark {
  text-shadow: 0 0 24px rgba(208, 2, 27, 0);
  animation: sp-loader-mark-pulse 2.8s ease-in-out infinite;
}

/* Bump mark above the loader (loader is at 9001) */
.sp-curtain-mark { z-index: 9002; }

/* On load completion: snap arc fully red and full circle, flare the glow */
.sp-curtain-loader.is-complete .sp-curtain-loader-ring {
  animation: sp-loader-spin-finish 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.sp-curtain-loader.is-complete .sp-curtain-loader-arc {
  animation: sp-loader-arc-finish 0.5s ease-out forwards;
}
.sp-curtain-loader.is-complete .sp-curtain-loader-glow {
  animation: sp-loader-glow-finish 0.6s ease-out forwards;
}
.sp-curtain-loader.is-complete ~ .sp-curtain-mark,
.is-complete + .sp-curtain-mark {
  animation: sp-loader-mark-finish 0.5s ease-out forwards;
}

@keyframes sp-loader-spin {
  to { transform: rotate(360deg); }
}
@keyframes sp-loader-color {
  0%   { stroke: rgba(255, 255, 255, 0.92); }
  55%  { stroke: rgba(208, 2, 27, 1); }
  100% { stroke: rgba(255, 255, 255, 0.92); }
}
@keyframes sp-loader-pulse {
  0%, 100% { opacity: 0.42; transform: scale(0.92); }
  50%      { opacity: 0.95; transform: scale(1.06); }
}
@keyframes sp-loader-mark-pulse {
  0%, 100% { text-shadow: 0 0 18px rgba(208, 2, 27, 0); }
  50%      { text-shadow: 0 0 36px rgba(208, 2, 27, 0.35); }
}

/* Completion: continue spin briefly then settle */
@keyframes sp-loader-spin-finish {
  to { transform: rotate(540deg); }
}
@keyframes sp-loader-arc-finish {
  to {
    stroke: rgba(208, 2, 27, 1);
    stroke-dasharray: 339.292 339.292;
  }
}
@keyframes sp-loader-glow-finish {
  0%   { opacity: 0.5; transform: scale(1); }
  60%  { opacity: 1;   transform: scale(1.28); }
  100% { opacity: 0.7; transform: scale(1.18); }
}
@keyframes sp-loader-mark-finish {
  to { text-shadow: 0 0 50px rgba(208, 2, 27, 0.55); }
}

/* Reduced motion: hold static, ditch animation */
@media (prefers-reduced-motion: reduce) {
  .sp-curtain-loader-ring,
  .sp-curtain-loader-arc,
  .sp-curtain-loader-glow,
  .sp-curtain-mark {
    animation: none !important;
  }
  .sp-curtain-loader-arc {
    stroke: rgba(208, 2, 27, 0.85);
    stroke-dasharray: 339.292 339.292;
  }
}

/* ---------- BACK TO TOP ----------
   Floating button injected by footer.js. Shows after the user scrolls past
   the first viewport, smooth-scrolls back to top via Lenis. */
.sp-back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--bone);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out),
              transform 0.3s var(--ease-out),
              background 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sp-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.sp-back-to-top:hover {
  background: var(--red);
  border-color: var(--red);
}
.sp-back-to-top-icon {
  color: var(--red);
  font-size: 14px;
  line-height: 1;
  transition: color 0.2s var(--ease-out), transform 0.25s var(--ease-out);
}
.sp-back-to-top:hover .sp-back-to-top-icon {
  color: var(--bone);
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .sp-back-to-top { right: 16px; bottom: 16px; padding: 10px 12px; }
  .sp-back-to-top-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-back-to-top { transition: opacity 0.001ms !important; }
  .sp-back-to-top.is-visible { transform: none; }
}

/* Lock scroll while curtain is up */
html:not(.sp-revealed) { overflow: hidden; height: 100%; }
html:not(.sp-revealed) body { overflow: hidden; }
/* Suppress body skew animation during loading to remove perceived jitter */
html:not(.sp-revealed) body { transform: none !important; }

/* ---------- WEBGL CANVAS WRAPPERS ---------- */
.webgl {
  position: relative;
  overflow: hidden;
}
.webgl > canvas {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}
.webgl-overlay {
  position: relative;
  z-index: 2;
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  position: absolute;
  top: calc(var(--nav-h) + 24px);
  /* Align with the shell's content edge regardless of viewport.
     On wide screens the shell is centered with auto margins, so the
     content edge is (viewport - max-w)/2 + gutter from the page edge.
     On narrow screens, the shell occupies full width and the content
     edge is just the gutter. max() picks whichever is larger. */
  left: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
}
/* Back-arrow icon stands in front of the link so the affordance reads instantly */
.breadcrumb::before {
  content: '←';
  display: inline-block;
  font-family: var(--f-mono);
  font-weight: 600;
  color: var(--red);
  width: auto;
  height: auto;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  transition: transform var(--d-fast) var(--ease-out);
}
.breadcrumb:hover::before { transform: translateX(-3px); }
.breadcrumb a {
  color: var(--bone);
  position: relative;
  padding-bottom: 2px;
  /* Always visible underline so it reads as a link, not a label */
  border-bottom: 1px solid var(--rule-strong);
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.breadcrumb a:hover { color: var(--red); border-bottom-color: var(--red); }
.breadcrumb-sep { color: var(--mid); opacity: 0.5; }
.breadcrumb-current { color: var(--mid); }

/* Heroes that include a breadcrumb get extra top padding so the eyebrow doesn't crowd it */
.sp-hero:has(.breadcrumb) {
  padding-top: calc(var(--nav-h) + var(--s-7));
}

/* ---------- HERO (home + capabilities) ---------- */
.sp-hero {
  position: relative;
  min-height: 100svh;
  background: var(--void);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--nav-h) + var(--s-5)) 0 var(--s-6);
}
.sp-hero-bg { position: absolute; inset: 0; z-index: 0; }
.sp-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.92) 100%);
  pointer-events: none;
  z-index: 2;
}
.sp-hero-bg video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.55;
  filter: contrast(1.05) saturate(0.85);
}
/* Heavy black overlay used on top of video heroes (e.g. home).
   Sits between the video/canvas and the gradient overlay so the copy
   stays the brightest thing on the page. Tuned to 0.4 so the video
   reads as ambient atmosphere behind the gradient that already darkens
   the bottom for text legibility. */
.sp-hero-darken {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.4);
}
.sp-hero-content { position: relative; z-index: 3; width: 100%; }
/* Hero eyebrow: pinned to a consistent top-of-hero position on every page.
   Previously the eyebrow lived above the H1 in normal flow, which meant
   its vertical position varied by H1/body length. Now it anchors to the
   nav top edge with a fixed offset so it reads in the same place across
   pages — adjacent to the breadcrumb when one is present. */
.sp-hero-eyebrow {
  position: absolute;
  top: calc(var(--nav-h) + 24px);
  left: max(var(--gutter), calc((100vw - var(--max-w)) / 2 + var(--gutter)));
  z-index: 5;
  margin-bottom: 0;
}
/* When the hero contains a breadcrumb, the eyebrow drops below it so the
   two stack rather than overlap. */
.sp-hero:has(.breadcrumb) .sp-hero-eyebrow {
  top: calc(var(--nav-h) + 24px + 28px);
}
.sp-hero-title { color: var(--bone); margin-bottom: var(--s-3); max-width: 18ch; }
.sp-hero-body { max-width: 60ch; margin-bottom: var(--s-5); }
.sp-hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
  max-width: 600px;
}
.sp-hero-stat { padding-right: var(--s-3); }
.sp-hero-stat-val {
  font-family: var(--f-display);
  font-size: clamp(28px, 1.6rem + 1.5vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bone);
  line-height: 1;
}
.sp-hero-stat-label {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 8px;
}
.sp-hero-scroll {
  position: absolute;
  bottom: var(--s-3);
  right: var(--gutter);
  z-index: 3;
  display: none;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  align-items: center;
  gap: 12px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.sp-hero-scroll::before {
  content: '';
  width: 1px; height: 64px;
  background: linear-gradient(180deg, var(--red), transparent);
  animation: scrollLine 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (min-width: 768px) {
  .sp-hero { padding-bottom: var(--s-7); }
  .sp-hero-scroll { display: inline-flex; }
}

/* ---------- CAPABILITY CARDS ---------- */
.cap-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.cap-card {
  position: relative;
  background: var(--void);
  padding: var(--s-4) var(--s-3);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
.cap-card .cap-card-title { font-size: clamp(20px, 1.1rem + 0.4vw, 26px); }
.cap-card .cap-card-body { font-size: 13px; line-height: 1.55; }
.cap-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(208, 2, 27, 0.15), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.cap-card:hover { background: var(--ink); }
.cap-card:hover::before { opacity: 1; }
/* Background image for cards with [data-bg] — fades in on hover */
.cap-card[data-bg]::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--card-bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out), transform 1.2s var(--ease-out);
  z-index: 0;
  filter: brightness(0.45) contrast(1.05) saturate(0.9);
  transform: scale(1.06);
}
.cap-card[data-bg]:hover::after { opacity: 1; transform: scale(1); }
.cap-card > * { position: relative; z-index: 1; }
.cap-card-num { color: var(--red); }
.cap-card-title { margin: var(--s-3) 0 var(--s-2); }
.cap-card-body { color: var(--mid); margin-bottom: var(--s-3); font-size: 14px; line-height: 1.6; }
.cap-card-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  margin-top: auto;
  /* Guaranteed breathing room above the link, even when the inner content
     stack is tall enough that margin-top:auto has no leftover space to
     spread. Especially important on the /capabilities/ index where each
     card has chips below the body. */
  padding-top: var(--s-4);
}
.cap-card-link span:last-child { transition: transform 0.4s var(--ease-out); }
.cap-card:hover .cap-card-link span:last-child { transform: translate(4px, -4px); }

/* Mobile: 1 column · Tablet: 2x2 · Desktop+: 4 across */
@media (min-width: 768px) {
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .cap-card { padding: var(--s-4); min-height: 340px; }
}
@media (min-width: 1100px) {
  .cap-grid { grid-template-columns: repeat(4, 1fr); }
  .cap-card { padding: var(--s-4) var(--s-3); min-height: 360px; }
  /* Auto-fit columns to actual card count so adjacent-capabilities sections
     (and any other partial grid) don't show empty cells on desktop. */
  .cap-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); }
  .cap-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
}
/* Featured card for 5-card row in home: pulls eye to Creator Network or any card with .cap-card--featured */
.cap-card--featured {
  background: linear-gradient(135deg, rgba(208,2,27,0.18), rgba(208,2,27,0.04));
  border-left: 1px solid var(--red);
}
.cap-card--featured::after {
  content: 'New';
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--red);
  padding: 4px 8px;
}
.cap-card { transition: background 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.cap-card:hover { transform: translateY(-4px); }

/* Footer mark wrap */
.sp-foot-mark-wrap { min-height: 28px; }
.sp-foot-mark--type {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--bone);
}
.sp-foot-mark--type span { color: var(--red); }

/* ============================================================
   PUSHED MOTION — added in v1.1
   ============================================================ */

/* Persistent ambient WebGL backdrop — sits behind everything */
.sp-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: screen;
}
.sp-ambient canvas { width: 100% !important; height: 100% !important; display: block; }
body > section, body > footer { position: relative; z-index: 1; }

/* Scroll velocity → subtle skew */
body { transition: transform 0.4s var(--ease-out); transform-origin: top center; }
body.is-scrolling { /* set by motion.js */ }

/* Image FX — animated reveals + hover distort */
.image-fx {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--ink);
}
.image-fx > img,
.image-fx > video,
.image-fx > canvas {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease-out);
  transform: scale(1.1);
  filter: brightness(0.7) contrast(1.05);
}
.image-fx.is-in > img,
.image-fx.is-in > video,
.image-fx.is-in > canvas {
  transform: scale(1);
  filter: brightness(1) contrast(1);
}
.image-fx::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--void);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 1.2s var(--ease-in-out);
  z-index: 2;
  pointer-events: none;
}
.image-fx.is-in::before { transform: scaleX(0); transform-origin: left; }
.image-fx:hover > img,
.image-fx:hover > video {
  transform: scale(1.04);
  filter: brightness(1.1) contrast(1.08) saturate(1.1);
}
.image-fx-frame {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.image-fx-frame::before, .image-fx-frame::after {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border: 1px solid var(--red);
}
.image-fx-frame::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.image-fx-frame::after { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }
.image-fx-meta {
  position: absolute;
  left: 16px; bottom: 16px;
  z-index: 3;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(0,0,0,0.6);
  padding: 8px 12px;
  backdrop-filter: blur(8px);
}

/* Dim modifier — for bright/light source imagery that needs to fit the dark palette.
   Applies a stronger brightness/saturation reduction and a tonal red-tinted overlay. */
.image-fx--dim > img,
.image-fx--dim > video,
.image-fx--dim > canvas {
  filter: brightness(0.55) contrast(1.08) saturate(0.7) !important;
}
.image-fx--dim::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%),
    radial-gradient(60% 60% at 80% 20%, rgba(208, 2, 27, 0.10), transparent 70%);
}

/* (Cursor trail dots removed — using native system cursor.) */

/* Scramble — applied by motion.js to elements with [data-scramble]; just visual cue */
[data-scramble] {
  display: inline-block;
}
[data-scramble].is-scrambling {
  color: var(--red);
}

/* Marker line for sections — animated on enter */
.section-marker {
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
}
.section-marker::before {
  content: '';
  display: block;
  width: 64px; height: 1px;
  background: var(--red);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out) 0.2s;
}
.section-marker.is-in::before { transform: scaleX(1); }

/* Vertical marquee column variant — used on creator network */
.marquee-vertical {
  height: 100%;
  overflow: hidden;
  position: relative;
}
.marquee-vertical-track {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  animation: marqueeV 40s linear infinite;
}
.marquee-vertical:nth-child(even) .marquee-vertical-track { animation-direction: reverse; animation-duration: 50s; }
@keyframes marqueeV { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* Creator wall grid — used on /capabilities/creator-network/ */
.creator-wall {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.creator-wall .image-fx { aspect-ratio: 4 / 5; }
@media (min-width: 768px) {
  .creator-wall { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) {
  .creator-wall { grid-template-columns: repeat(6, 1fr); }
}

/* Stats blocks */
.stat-row { display: grid; gap: var(--s-3); border-top: 1px solid var(--rule); padding-top: var(--s-3); }
.stat-row .stat-num {
  font-family: var(--f-display);
  font-size: clamp(40px, 4vw, 72px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--bone);
  line-height: 1;
  white-space: nowrap;
}
.stat-row .stat-num span { color: var(--red); }
.stat-row .stat-label {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 8px;
}
@media (min-width: 768px) { .stat-row { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
@media (min-width: 1024px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .sp-ambient { display: none; }
  .image-fx > img, .image-fx > video, .image-fx > canvas { transform: none; filter: none; }
  .image-fx::before { display: none; }
  .marquee-vertical-track { animation: none; }
  body { transition: none; }
}

/* ---------- PROCESS STEPS ---------- */
.process-steps { display: grid; gap: 1px; background: var(--rule); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.process-step {
  background: var(--void);
  padding: var(--s-5) var(--gutter);
  display: grid;
  gap: var(--s-3);
  align-items: start;
}
.process-step-num { color: var(--red); }
.process-step-title { margin-bottom: var(--s-2); }
.process-step-body { color: var(--mid); max-width: 56ch; }
@media (min-width: 768px) {
  .process-step { grid-template-columns: 120px 1fr 1fr; gap: var(--s-5); padding: var(--s-6) var(--gutter); }
}

/* ---------- LIST CHIPS ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  border: 1px solid var(--rule-strong);
  padding: 8px 14px;
  background: rgba(255,255,255,0.02);
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.chip:hover { background: rgba(208, 2, 27, 0.1); border-color: var(--red); color: var(--bone); }

/* ---------- CASE STUDY TILES ---------- */
.case-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.case-card {
  position: relative;
  display: block;
  background: var(--ink);
  overflow: hidden;
  cursor: pointer;
  min-height: 480px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.6s var(--ease-out);
}
.case-card:hover { transform: translateY(-4px); }
.case-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.case-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out), filter 0.6s var(--ease-out);
  filter: brightness(0.55) contrast(1.05) saturate(0.85);
}
.case-card:hover .case-card-bg img {
  transform: scale(1.04);
  filter: brightness(0.7) contrast(1.05) saturate(1);
}
.case-card-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.85) 100%),
    radial-gradient(60% 60% at 80% 20%, rgba(208, 2, 27, 0.18), transparent 70%);
  pointer-events: none;
}
.case-card-content {
  position: relative;
  z-index: 1;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 480px;
}
.case-card-eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s-3);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.case-card-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: var(--red);
}
.case-card-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 1.6rem + 1.2vw, 42px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bone);
  margin-bottom: var(--s-3);
  max-width: 22ch;
}
.case-card-title em { color: var(--ash); font-weight: 500; }
.case-card-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  margin-bottom: var(--s-3);
}
.case-card-link {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--s-3);
}
.case-card-link span:last-child { transition: transform 0.4s var(--ease-out); }
.case-card:hover .case-card-link span:last-child { transform: translate(4px, -4px); }

.case-card--featured { min-height: 640px; }
.case-card--featured .case-card-content { min-height: 640px; }
.case-card--featured .case-card-title { font-size: clamp(36px, 2.2rem + 1.8vw, 64px); max-width: 18ch; }

@media (min-width: 768px) {
  .case-grid { grid-template-columns: 1fr 1fr; }
  .case-card--featured { grid-column: 1 / -1; }
}

/* "Coming soon" empty case tile */
.case-card--soon {
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--rule-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}
.case-card--soon span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ---------- TESTIMONIAL ---------- */
.testimonial {
  position: relative;
  background: var(--ink);
  border: 1px solid var(--rule);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  overflow: hidden;
}
.testimonial::before {
  content: '"';
  position: absolute;
  top: 8px;
  right: 24px;
  font-family: var(--f-display);
  font-size: 200px;
  font-weight: 700;
  line-height: 0.8;
  color: var(--red);
  opacity: 0.18;
  pointer-events: none;
}
.testimonial-quote {
  font-family: var(--f-display);
  font-size: clamp(20px, 1.1rem + 0.5vw, 26px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--bone);
  margin-bottom: var(--s-4);
  position: relative;
  z-index: 1;
}
.testimonial-attr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--rule);
  padding-top: var(--s-3);
}
.testimonial-name {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  font-weight: 600;
}
.testimonial-meta {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--mid);
  font-weight: 400;
}
.testimonial--feature {
  background: linear-gradient(135deg, rgba(208,2,27,0.10), rgba(208,2,27,0.02));
  border-color: var(--red);
  border-left-width: 2px;
}
.testimonial--feature::before { color: var(--red); opacity: 0.3; }

.testimonials-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
@media (min-width: 768px) {
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- MARQUEE ---------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-3) 0;
  background: var(--void);
}
.marquee-track {
  display: flex;
  gap: var(--s-5);
  white-space: nowrap;
  animation: marquee 32s linear infinite;
  width: max-content;
}
.marquee-item {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--bone);
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
}
.marquee-item span { color: var(--red); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- CTA BLOCK ---------- */
.cta-block {
  position: relative;
  padding: var(--s-7) 0;
  background: var(--ink) url('/assets/images/cta-bg.jpg') center / cover no-repeat;
  border: 0;
  overflow: hidden;
  isolation: isolate;
}
/* Dark gradient overlay — pseudo-element guarantees inset:0 full coverage */
.cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.85) 100%);
  z-index: 0;
  pointer-events: none;
}
/* Red corner glow */
.cta-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 60% at 80% 20%, rgba(208, 2, 27, 0.22), transparent 60%);
  z-index: 0;
  pointer-events: none;
}
.cta-block > .shell { position: relative; z-index: 1; }
.cta-inner { position: relative; z-index: 1; display: grid; gap: var(--s-5); align-items: end; }
@media (min-width: 768px) {
  .cta-inner { grid-template-columns: 1fr auto; gap: var(--s-6); }
}

/* ---------- FORM ---------- */
.form-row { margin-bottom: var(--s-3); }
.form-row label {
  display: block;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--s-1);
}
.form-row label::after { content: ''; }
.form-row label .req { color: var(--red); margin-left: 4px; }
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--rule);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: var(--t-body);
  outline: none;
  transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus { border-color: var(--red); background: rgba(208,2,27,0.04); }
.form-row textarea { min-height: 160px; resize: vertical; }
.form-grid { display: grid; gap: var(--s-3); }
@media (min-width: 768px) {
  .form-grid { grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4); }
  .form-grid--full { grid-column: 1 / -1; }
}

/* ---------- FOOTER ---------- */
.sp-foot {
  background: var(--void);
  border-top: 1px solid var(--rule);
  padding: var(--s-7) 0 var(--s-3);
}
.sp-foot-grid { display: grid; gap: var(--s-5); }
.sp-foot-mark {
  font-family: var(--f-display);
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--bone);
}
.sp-foot-mark span { color: var(--red); }
.sp-foot-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (min-width: 768px) {
  .sp-foot-cols { grid-template-columns: repeat(3, 1fr); }
}
.sp-foot-col-title {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: var(--s-2);
}
.sp-foot-col ul { list-style: none; display: grid; gap: 8px; }
.sp-foot-col a {
  font-size: 14px;
  color: var(--ash);
  transition: color var(--d-fast) var(--ease-out);
}
.sp-foot-col a:hover { color: var(--bone); }
.sp-foot-base {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mid);
}
.sp-foot-base a { color: var(--mid); }
.sp-foot-base a:hover { color: var(--bone); }

/* (footer column count is set in the rule above the .sp-foot-cols definition; legacy 4-col rule kept off) */

/* ---------- REVEAL ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-delay="2"] { transition-delay: 0.08s; }
[data-reveal-delay="3"] { transition-delay: 0.16s; }
[data-reveal-delay="4"] { transition-delay: 0.24s; }
[data-reveal-delay="5"] { transition-delay: 0.32s; }

[data-split-text] {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
[data-split-text] .line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;
}
[data-split-text] .line-inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--ease-out);
}
[data-split-text].is-in .line-inner { transform: none; }
[data-split-text].is-in .line:nth-child(2) .line-inner { transition-delay: 0.06s; }
[data-split-text].is-in .line:nth-child(3) .line-inner { transition-delay: 0.12s; }
[data-split-text].is-in .line:nth-child(4) .line-inner { transition-delay: 0.18s; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-split-text] .line-inner { transform: none; }
  .marquee-track { animation: none; }
  .sp-hero-bg video { display: none; }
}

/* ---------- UTIL ---------- */
.split { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 768px) { .split { grid-template-columns: 1fr 1.4fr; gap: var(--s-7); } }

.rule { height: 1px; background: var(--rule); }
.spacer-3 { height: var(--s-3); }
.spacer-5 { height: var(--s-5); }
.spacer-7 { height: var(--s-7); }
.center-text { text-align: center; }

.tag-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; font-family: var(--f-mono); font-size: var(--t-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mid); }
.tag-row span { display: inline-flex; align-items: center; gap: 12px; }
.tag-row span::before { content: ''; width: 8px; height: 1px; background: var(--mid); }
.tag-row span:first-child::before { display: none; }

/* ---------- LEADERSHIP CARD ----------
   Image on the left (capped at 360px wide), name/bio on the right.
   On mobile this stacks: photo on top, content below. */
.leader-card {
  display: grid;
  grid-template-columns: minmax(0, 360px) 1fr;
  gap: var(--s-4);
  align-items: center;
  min-height: 0;
  padding: var(--s-4);
}
.leader-card .image-fx { aspect-ratio: 4 / 5; }

/* ---------- MOBILE SWEEP (≤600px) ----------
   iPhone SE / small phones get tighter type, looser word wrap, and reduced
   section padding so long words ("themselves", "engineering", "Accountable")
   don't overflow the viewport and the page doesn't waste vertical space. */
@media (max-width: 600px) {

  /* Display + H1 floors are too high for narrow viewports (default display
     floor is 72px, which busts a 375px screen with negative letter-spacing).
     Override at the class level so the type scale still works on desktop. */
  .h-display {
    font-size: clamp(36px, 9.5vw, 60px);
    letter-spacing: -0.03em;
    line-height: 0.96;
  }
  .h1 {
    font-size: clamp(32px, 7.5vw, 48px);
    letter-spacing: -0.025em;
  }
  .h2 {
    font-size: clamp(24px, 5.8vw, 36px);
  }

  /* Belt-and-suspenders: any remaining long word breaks instead of overflowing */
  .h-display, .h1, .h2, .h3, .sp-hero-title,
  .case-card-title, .testimonial-quote {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Tighter section padding — a 96px top + 96px bottom on every section
     on mobile reads as one tall scroll of empty space. Pull in a notch. */
  .section { padding: var(--s-6) 0; }
  .section-tight { padding: var(--s-5) 0; }
  .section-grand { padding: var(--s-7) 0; }
  .cta-block { padding: var(--s-6) 0; }

  /* Breadcrumb on mobile: allow wrap, tighter font, capped width. Long
     case-study names like "East Coast Coin-op & Amusements" don't fit on
     one line at 375px without wrapping or overflowing. */
  .breadcrumb {
    flex-wrap: wrap;
    max-width: calc(100vw - 40px);
    font-size: 10px;
    gap: 8px;
    line-height: 1.4;
  }

  /* Hero with breadcrumb: bump eyebrow down so it always clears the
     breadcrumb even when it wraps to two lines on mobile. */
  .sp-hero:has(.breadcrumb) {
    padding-top: calc(var(--nav-h) + 88px);
  }
  .sp-hero:has(.breadcrumb) .sp-hero-eyebrow {
    top: calc(var(--nav-h) + 64px);
  }

  /* Reel section (home): 115vh + 760px min-height is too tall on a phone.
     The inline style on index.html sets min-height: 760px, so we need
     !important to override. */
  #work-in-motion .webgl {
    height: 80vh !important;
    min-height: 460px !important;
  }

  /* Hero stats: stack to single column on small screens. 2-col was leaving
     stat labels squeezed and uneven on case studies with 3 stats (2+1 layout). */
  .sp-hero-stats { grid-template-columns: 1fr; gap: var(--s-2); }

  /* Creator wall: single column on mobile so each portrait gets full width.
     Was 2-col which read as cramped at 375px. */
  .creator-wall { grid-template-columns: 1fr; }

  /* Card min-heights: shorter so the grid scrolls less on mobile */
  .case-card { min-height: 360px; }
  .case-card--featured { min-height: 460px; }
  .cap-card { min-height: 260px; }

  /* Image-fx editorial blocks: hold a more reasonable aspect on phones */
  .image-fx { aspect-ratio: 4 / 3; }

  /* Marquee text: smaller floor so it doesn't dwarf the page */
  .marquee-item { font-size: clamp(28px, 7vw, 44px); }

  /* Footer: drop to single column on tightest screens for readability */
  .sp-foot-cols { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .sp-foot-base { font-size: 9px; gap: var(--s-1); }

  /* Leadership cards: stack image on top, name/bio below */
  .leader-card {
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding: var(--s-3);
  }
  .leader-card .image-fx {
    max-width: 100%;
    aspect-ratio: 4 / 5;
  }
}