/* ============================================================
   XORA STUDIOS — xorastudios.com  (DESIGN.md v2)
   Aurora field · object-as-artifact · clarity panels · tonal stack
   Decision refs in comments (D/N numbers).
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Core brand — Xora brand kit. Token names kept; values are brand tokens.
     x-red / x-magenta / x-purple are now light / hover / core violet. */
  --x-red: #A470FF;      /* violet-70, light end of the ramp, focus ring */
  --x-magenta: #8A47FF;  /* violet-90, accent-hover */
  --x-purple: #7D33FF;   /* Electric Violet, core / primary */
  --x-black: #141223;    /* Dark Violet */
  --x-white: #FFFFFF;

  /* Gradients — violet ramp, light to Deep Violet tail */
  --x-gradient: linear-gradient(120deg, #A470FF 0%, #7D33FF 55%, #5A1FC0 100%);
  --x-gradient-deep: linear-gradient(120deg, #45178F 0%, #5A1FC0 60%, #7D33FF 100%);

  /* Tonal surface stack (N05) — Dark Violet base, raised step per brand */
  --s0-canvas: #141223;
  --s1-panel: #1C1930;
  --s2-lift: #241F3D;
  --s-recess: #0E0C1A;
  --hairline: #2A2A2E;
  --hairline-bright: #3E3D47;

  /* Text tiers (D19) — Off-white, mid tint, Graphite */
  --ink-90: #F5F5F5;
  --ink-60: #B4B2BC;
  --ink-40: #8C8A94;
  --link: #A470FF;

  /* Clarity panel (N06) — brand light-surface mapping */
  --clarity-bg: #FFFFFF;
  --clarity-head: #141223;
  --clarity-body: #3A3548;
  --clarity-muted: #6B6875;
  --clarity-hairline: #E4E2E9;

  /* Fonts (D06, D18) — Space Grotesk / Inter / Orbitron only */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Inter', ui-sans-serif, system-ui, sans-serif; /* label/eyebrow role */
  --font-wordmark: 'Orbitron', var(--font-display);

  /* Shape (§7) */
  --r-pill: 999px;
  --r-card: 16px;
  --r-panel: 24px;
  --r-sm: 6px;

  --max-w: 1280px;
  /* Signature ease (N04 — Vivid focus pull) */
  --ease: cubic-bezier(0.52, 0.01, 0, 1);

  /* Aurora live vars (JS-driven, N02) */
  --aurora-hue: 0deg;
  --aurora-op: 0.42;

  /* Surface-dependent atmospherics (themed — see §14) */
  --blob-1: rgba(125,51,255,0.60);
  --blob-2: rgba(164,112,255,0.48);
  --blob-3a: rgba(190,153,255,0.22);
  --blob-3b: rgba(69,23,143,0.38);
  --scrim-core: rgba(20,18,35,0.78);
  --scrim-mid: rgba(20,18,35,0.35);
  --nav-bg: rgba(20,18,35,0.60);
  --overlay-bg: rgba(20,18,35,0.97);
  --media-plate: #1A1730;
  --field-bg: rgba(255,255,255,0.05);
  --field-bg-focus: rgba(255,255,255,0.07);
  --grain-op: 0.05;
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.55;
  color: var(--ink-60);
  background: var(--s0-canvas);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.container { max-width: var(--max-w); margin-inline: auto; padding-inline: 28px; }
::selection { background: var(--x-purple); color: #fff; }

main { position: relative; z-index: 1; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; color: var(--ink-90); }

/* ---------- 3. Aurora field (N02) ---------- */
.aurora {
  position: fixed; inset: -10%; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora .blob {
  position: absolute; border-radius: 50%;
  filter: blur(100px) hue-rotate(var(--aurora-hue));
  opacity: var(--aurora-op);
  will-change: transform;
  transition: opacity 800ms var(--ease);
}
.aurora .b1 {
  width: 46vw; height: 46vw; min-width: 420px; min-height: 420px;
  top: -8%; left: -6%;
  background: radial-gradient(circle, var(--blob-1), transparent 65%);
  animation: drift1 26s ease-in-out infinite alternate;
}
.aurora .b2 {
  width: 40vw; height: 40vw; min-width: 360px; min-height: 360px;
  top: 34%; right: -10%;
  background: radial-gradient(circle, var(--blob-2), transparent 65%);
  animation: drift2 32s ease-in-out infinite alternate;
}
.aurora .b3 {
  width: 36vw; height: 36vw; min-width: 320px; min-height: 320px;
  bottom: -14%; left: 24%;
  background: radial-gradient(circle at 40% 40%, var(--blob-3a), var(--blob-3b) 45%, transparent 72%);
  animation: drift3 21s ease-in-out infinite alternate;
}
@keyframes drift1 { from { transform: translate(0,0) scale(1); }   to { transform: translate(6vw, 8vh) scale(1.12); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-7vw, -6vh) scale(0.94); } }
@keyframes drift3 { from { transform: translate(0,0) scale(0.96); } to { transform: translate(5vw, -7vh) scale(1.1); } }
.aurora .grain {
  position: absolute; inset: 0; opacity: var(--grain-op);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- 3a. Page veil (N17) ----------
   Covers first paint and wraps every navigation in a brand-dark fade,
   so page loads read as one continuous transition, never a re-load. */
.veil {
  position: fixed; inset: 0; z-index: 300;
  background: var(--s0-canvas);
  display: none; place-items: center;
  opacity: 1; visibility: visible;
  transition: opacity 420ms var(--ease), visibility 0s 420ms;
}
html.js .veil { display: grid; }
.veil img { width: 44px; animation: veil-pulse 1.2s ease-in-out infinite; }
.veil.lift { opacity: 0; visibility: hidden; }
@keyframes veil-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .veil { transition-duration: 150ms; }
  .veil img { animation: none; }
}

/* ---------- 3b. WebGL layers (N13/N14/N15, Home only) ----------
   Crossfades, never display-swaps: no visible "switch" on load. */
#nebula {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity 900ms var(--ease);
}
#nebula canvas { width: 100%; height: 100%; display: block; }
body.webgl3d #nebula { opacity: 1; }
.aurora { transition: opacity 900ms var(--ease); }
body.webgl3d .aurora { opacity: 0; visibility: hidden; transition: opacity 900ms var(--ease), visibility 0s 900ms; }

/* Full-viewport object stage (N22): the travelling hologram renders here,
   anchored to DOM slots — scroll-scrubbed, never pinned (N21) */
#holo-stage {
  position: fixed; inset: 0; z-index: 4; pointer-events: none;
  opacity: 0; transition: opacity 700ms var(--ease);
}
#holo-stage canvas { width: 100%; height: 100%; display: block; }
body.webgl3d #holo-stage { opacity: 1; }

.hero-object { position: relative; aspect-ratio: 4 / 3; }
body.webgl3d .hero-object { cursor: grab; touch-action: pan-y; }
body.webgl3d .hero-object:active { cursor: grabbing; }
.hero-object .fallback {
  position: absolute; inset: 0; margin: auto; width: min(560px, 100%);
  transition: opacity 500ms var(--ease);
}
body.webgl3d .hero-object .fallback { opacity: 0; }
body.webgl3d .statement-object img { visibility: hidden; } /* solid 3D lands in this slot */

/* Scrim utility — body text never sits raw on the aurora (D19/§3) */
.text-scrim { position: relative; }
.text-scrim::before {
  content: ""; position: absolute; inset: -12% -8%;
  background: radial-gradient(ellipse at 40% 50%, var(--scrim-core), var(--scrim-mid) 60%, transparent 80%);
  z-index: -1; filter: blur(6px);
}

/* ---------- 4. Typography (N08) ---------- */
.display-xl { font-size: clamp(56px, 9vw, 112px); line-height: 1.0;  letter-spacing: -0.03em; }
.display    { font-size: clamp(44px, 6.5vw, 76px); line-height: 1.05; letter-spacing: -0.025em; }
.h-lg  { font-size: clamp(32px, 4.5vw, 52px); line-height: 1.1;  letter-spacing: -0.02em; }
.h-md  { font-size: 32px; line-height: 1.2;  letter-spacing: -0.015em; font-weight: 500; }
.h-sub { font-size: 22px; line-height: 1.35; letter-spacing: -0.01em; font-weight: 500; }
.body-lg { font-size: 18px; line-height: 1.6; }
.body-sm { font-size: 14px; line-height: 1.5; }

.eyebrow {
  font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-40);
  display: block; margin-bottom: 16px;
}
.caption { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
.lockup {
  font-family: var(--font-wordmark); font-size: 15px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-90);
}
.tag-red, h1.tag-red, h2.tag-red, .hero-copy h1.tag-red { color: var(--x-red); }
.grad-text {
  background: var(--x-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---------- 5. Motion utilities (N04) ---------- */
/* Word-mask text reveal */
.tr .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.tr .w > i {
  display: inline-block; font-style: normal;
  transform: translateY(115%);
  transition: transform 600ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.tr.in .w > i { transform: none; }
/* Fade-rise for body blocks — hidden state gated on html.js so no-JS users see everything */
html.js .fr { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: var(--d, 0ms); }
html.js .fr.in { opacity: 1; transform: none; }

/* Revisit within the same session: pages render instantly, no replayed entrances.
   Fixes the "old page loads first, then switches" feel on every navigation. */
html.revisit .fr, html.js.revisit .fr { opacity: 1; transform: none; transition: none; }
html.revisit .tr .w > i { transform: none; transition: none; }

/* ---------- 6. Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  padding: 13px 28px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.btn-primary { background: var(--x-purple); color: #fff; }
.btn-primary:hover { background: var(--x-magenta); transform: scale(1.02); }
.btn-primary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.btn-ghost { background: transparent; border-color: var(--hairline); color: var(--ink-90); }
.btn-ghost:hover { border-color: var(--hairline-bright); }
.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; color: var(--link);
  transition: gap 200ms var(--ease);
}
.link-arrow:hover { gap: 12px; text-decoration: underline; text-underline-offset: 4px; }

/* Arrow chip (Auros) */
.chip {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  background: var(--s2-lift); border: 1px solid var(--hairline);
  display: grid; place-items: center;
  color: var(--ink-90); font-size: 14px;
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}

/* ---------- 7. Navigation — one dark capsule (D10, Auros consistency) ---------- */
.nav-wrap {
  position: fixed; top: 20px; left: 0; right: 0; z-index: 100;
  padding-inline: 24px; display: flex; justify-content: center; pointer-events: none;
}
.nav-capsule {
  pointer-events: auto;
  display: flex; align-items: center; gap: 26px;
  width: 100%; max-width: 1020px;
  padding: 10px 12px 10px 20px;
  border-radius: var(--r-pill);
  background: var(--nav-bg);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { width: 26px; height: 26px; }
.nav-logo .wordmark { font-family: var(--font-wordmark); font-size: 12px; letter-spacing: 0.28em; color: var(--ink-90); white-space: nowrap; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  position: relative; font-size: 14px; font-weight: 500;
  color: var(--ink-60); padding: 8px 12px; border-radius: var(--r-pill);
  transition: color 200ms var(--ease);
}
.nav-links a:hover, .nav-links a.active { color: var(--ink-90); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; background: var(--x-red); border-radius: 2px;
}
.nav-cta { padding: 10px 20px; font-size: 14px; }

/* Theme toggle — glass sliding switch, sits between CTA and burger.
   Track holds both icons in fixed positions; the thumb slides left/right
   on activation (brand toggle spec: 34x19 track, sized up here to clear
   two icons; on-state fills Electric Violet, thumb travels to sit over
   the active icon). */
.nav-burger { display: none; margin-left: auto; background: none; border: 0; cursor: pointer; padding: 10px; }
.nav-burger span { display: block; width: 20px; height: 2px; margin: 4px 0; background: var(--ink-90); }
.nav-overlay {
  position: fixed; inset: 0; z-index: 90; background: var(--overlay-bg);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;
  opacity: 0; visibility: hidden; transition: opacity 250ms var(--ease);
}
.nav-overlay.open { opacity: 1; visibility: visible; }
.nav-overlay a { font-family: var(--font-display); font-size: 32px; font-weight: 500; color: var(--ink-90); padding: 10px; }
.nav-overlay a.active { color: var(--x-red); }
body.nav-locked { overflow: hidden; }

/* ---------- 8. Sections & heroes ---------- */
section { padding: clamp(56px, 7vw, 104px) 0; position: relative; }

/* Home hero — object over aurora, headline overlaps object edge (§5, Vivid) */
.hero {
  min-height: 100vh; display: flex; align-items: center; padding: 140px 0 80px;
}
.hero-inner {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 24px; align-items: center; width: 100%;
}
.hero-copy { position: relative; z-index: 2; }
.hero-copy h1 { margin-bottom: 28px; }
.hero-copy .lede { font-size: 18px; line-height: 1.6; color: var(--ink-60); max-width: 470px; margin-bottom: 36px; }
.hero-copy .lede strong { color: var(--ink-90); font-weight: 500; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; }
.hero-tagline { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40); }
.hero-object { position: relative; z-index: 1; margin-left: -12%; will-change: transform, opacity; }
.hero-object img { width: min(560px, 100%); animation: idle-float 8s ease-in-out infinite; }
@keyframes idle-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
.hero-scroll-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-40);
  animation: hint-pulse 2.4s ease-in-out infinite;
}
@keyframes hint-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }

/* Interior page hero */
.page-hero { min-height: 52vh; display: flex; align-items: center; padding: 160px 0 64px; }
.page-hero .lockup { margin-bottom: 24px; display: inline-block; }
.page-hero h1 { margin-bottom: 26px; max-width: 900px; }
.page-hero .lede { font-size: 18px; line-height: 1.6; color: var(--ink-60); max-width: 640px; margin-bottom: 36px; }
.page-hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; width: 100%; }
.page-hero-object img { width: min(420px, 100%); opacity: 0.9; }

/* ORYZO statement section — text / object / text (N03) */
.statement { min-height: 100vh; display: flex; align-items: center; }
.statement-grid {
  display: grid; grid-template-columns: 1fr minmax(300px, 1.05fr) 1fr;
  gap: 48px; align-items: center; width: 100%;
}
.statement-grid h2 { text-align: left; }
.statement-object { will-change: transform, opacity; }
.statement-object img { width: 100%; }
.statement-copy p { max-width: 400px; }

/* Section heading block */
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
/* When the heading block is the only thing in its section, its trailing
   margin is dead space stacked on top of the section's own padding. */
.sec-head:last-child { margin-bottom: 0; }
.sec-head h2 { margin-bottom: 18px; }
.sec-head p { font-size: 18px; line-height: 1.6; color: var(--ink-60); max-width: 620px; }

/* ---------- 9. Components ---------- */

/* Panel cards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: var(--s1-panel); border: 1px solid var(--hairline);
  border-radius: var(--r-card); padding: 32px;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.card h3 { font-size: 20px; font-weight: 500; margin: 18px 0 10px; }
.card p { font-size: 15px; line-height: 1.6; color: var(--ink-60); }
.card-icon { width: 40px; height: 40px; color: var(--link); }

/* Linked cards lift tonally (Auros) */
a.card, .card-link { display: block; }
a.card:hover, .card-link:hover { background: var(--s2-lift); border-color: var(--hairline-bright); transform: translateY(-4px); }

/* Spec marquee (N04) */
.marquee {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  overflow: hidden; padding: 16px 0; position: relative; z-index: 1;
}
.marquee-track {
  display: flex; gap: 40px; width: max-content;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40);
  animation: marq 90s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { white-space: nowrap; }
@keyframes marq { to { transform: translateX(-50%); } }

/* Case cards */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.case-card {
  background: var(--s1-panel); border: 1px solid var(--hairline);
  border-radius: var(--r-card); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease);
}
.case-card:hover { background: var(--s2-lift); border-color: var(--hairline-bright); transform: translateY(-4px); }
.case-card:hover .chip { transform: translate(2px, -2px); border-color: var(--hairline-bright); }
.case-card .chip { position: absolute; top: 20px; right: 20px; z-index: 2; }
.case-media { aspect-ratio: 16/9; background: var(--media-plate); }
.case-media svg, .case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-body { padding: 24px 32px 32px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.case-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.status-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 12px;
  border: 1px solid var(--hairline); border-radius: var(--r-pill);
  color: var(--ink-90);
}
.case-client { font-family: var(--font-mono); font-size: 12px; color: var(--ink-40); }
.case-body h3 { font-size: 22px; font-weight: 500; }
.case-body > p { font-size: 15px; line-height: 1.6; color: var(--ink-60); }
.case-body .link-arrow { margin-top: auto; padding-top: 8px; font-size: 15px; }

/* Case detail (Portfolio) */
.case-detail { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.case-detail .case-media {
  border-radius: var(--r-panel); border: 1px solid var(--hairline); overflow: hidden;
}
.case-detail h2 { margin: 18px 0 28px; }
.case-facts { display: flex; flex-direction: column; gap: 26px; }
.case-fact strong {
  display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 6px;
}
.case-fact p { line-height: 1.65; color: var(--ink-60); max-width: 520px; }

/* Clarity panel (N06) */
.clarity {
  background: var(--clarity-bg); color: var(--clarity-body);
  border-radius: var(--r-panel); padding: clamp(36px, 5vw, 72px);
}
.clarity h2, .clarity h3 { color: var(--clarity-head); }
.clarity .eyebrow { color: var(--clarity-muted); }
.clarity p { color: var(--clarity-body); }

/* Process steps — on clarity panel (§8) */
.process { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.process::before { content: ""; position: absolute; top: 5px; left: 2%; right: 2%; height: 1px; background: var(--clarity-hairline); }
.step { position: relative; padding-top: 24px; }
.step::before { content: ""; position: absolute; top: 1px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--x-purple); }
.step .eyebrow { margin-bottom: 8px; }
.step h3 { font-size: 21px; font-weight: 500; margin-bottom: 8px; }
.step p { font-size: 15px; line-height: 1.6; color: var(--clarity-muted); }

/* Stats — gradient digits as the object (N03, Learn) */
.stats { display: flex; gap: clamp(40px, 8vw, 96px); flex-wrap: wrap; }
.stat-number {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(56px, 8vw, 104px); line-height: 1.0; letter-spacing: -0.03em;
}
.stat-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-40); margin-top: 10px;
}

/* Offering rows (Learn) */
.offer { padding: 32px 0; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; }
.offer:last-of-type { border-bottom: 1px solid var(--hairline); }
.offer h3 { font-size: 24px; font-weight: 500; }
.offer p { line-height: 1.65; color: var(--ink-60); }

/* CTA band */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { color: var(--ink-60); font-size: 18px; max-width: 560px; margin: 0 auto 36px; }
.cta-band .btn-row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* Recognition (About) */
.recognition {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-40); text-align: center;
}
.about-mark { position: absolute; right: 4%; top: 16%; width: min(360px, 30vw); opacity: 0.06; pointer-events: none; }

/* ---------- 10. Contact form — dark panel (N18) ----------
   Sits in the theme instead of glaring against it. */
.contact-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.form-panel {
  background: var(--s1-panel); border: 1px solid var(--hairline);
  border-radius: var(--r-panel); padding: clamp(32px, 4.5vw, 56px);
}
.form-field { margin-bottom: 24px; }
.form-field label {
  display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-40); margin-bottom: 8px;
}
.form-field input, .form-field textarea {
  width: 100%; font-family: var(--font-body); font-size: 16px;
  padding: 14px 20px; color: var(--ink-90); caret-color: var(--link);
  background: var(--field-bg); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); outline: none;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background 200ms var(--ease);
}
.form-success { display: none; padding: 32px; background: var(--s2-lift); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.form-success.show { display: block; }
.form-success p { font-size: 18px; font-weight: 500; color: var(--ink-90); }
.contact-aside > div { padding: 24px 0; border-top: 1px solid var(--hairline); }
.contact-aside h3 { font-size: 16px; font-weight: 500; margin-bottom: 8px; }
.contact-aside p { color: var(--ink-60); }
.contact-aside a.email { color: var(--link); font-weight: 500; }
.contact-aside a.email:hover { text-decoration: underline; text-underline-offset: 4px; }
.social-row { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 15px; }
.social-row a { color: var(--ink-60); transition: color 200ms var(--ease); }
.social-row a:hover { color: var(--ink-90); }

/* ---------- 11. Footer — recessed well (Auros) ---------- */
footer {
  position: relative; z-index: 1;
  background: var(--s-recess); color: var(--ink-60);
  border-top: 1px solid var(--hairline);
  padding: clamp(64px, 9vw, 120px) 0 40px;
}
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; flex-wrap: wrap; margin-bottom: 56px; }
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand .nav-logo img { width: 30px; height: 30px; }
.footer-brand .wordmark { font-family: var(--font-wordmark); font-size: 13px; letter-spacing: 0.28em; color: var(--ink-90); }
.footer-tagline { font-size: 15px; color: var(--ink-60); }
.footer-social { display: flex; gap: 18px; }
.footer-social a { font-size: 14px; color: var(--ink-60); transition: color 200ms var(--ease); }
.footer-social a:hover { color: var(--ink-90); }
.footer-bottom {
  border-top: 1px solid var(--hairline); padding-top: 24px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-40);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap;
}
.footer-legal { display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .footer-legal { align-items: center; }
}

/* ---------- 12. Reduced motion (D19/N04) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora .blob { animation: none; }
  .hero-object img { animation: none; }
  .marquee-track { animation: none; }
  .hero-scroll-hint { animation: none; }
  .tr .w > i { transform: none; transition: none; }
  html.js .fr, .fr { opacity: 1; transform: none; transition: none; }
  .statement-object, .hero-object { opacity: 1 !important; transform: none !important; }
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 960px) {
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: block; }
  .hero { padding-top: 120px; }
  .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-object { order: -1; margin-left: 0; display: flex; justify-content: center; }
  .hero-object img { width: min(340px, 75%); }
  .statement { min-height: 0; }
  .statement-grid { grid-template-columns: 1fr; gap: 32px; }
  .statement-object { max-width: 340px; margin-inline: auto; }
  .card-grid, .case-grid, .case-detail, .contact-grid, .page-hero-grid { grid-template-columns: 1fr; }
  /* Case study cards alternate media left/right by design on desktop, which
     the source markup order reflects. On a single mobile column that meant
     some cards showed image-then-text and others text-then-image. Media
     first, consistently, on every card. */
  .case-detail .case-media, .case-detail .case-media-pair { order: -1; }
  .case-detail .text-scrim { order: 2; }
  .process { grid-template-columns: 1fr; gap: 28px; }
  .process::before { display: none; }
  .step { padding-top: 0; padding-left: 24px; }
  .step::before { top: 8px; }
  .offer { grid-template-columns: 1fr; gap: 14px; }
  .page-hero { padding-top: 126px; min-height: 0; }
  .about-mark { display: none; }
  .text-scrim::before { inset: -6% -6%; }
}

/* ============================================================
   14. Photography
   The site is otherwise 3D, illustration and gradient, so real photos
   need one consistent treatment or they read as a scrapbook dropped
   into a designed page. Treatment is switched by data-photo on <html>:
     data-photo="natural"  — consistent crop and a light grade only
     data-photo="graded"   — natural, plus a violet wash tying photos
                             into the brand
   ============================================================ */
.photo {
  position: relative; overflow: hidden;
  border-radius: var(--r-card); border: 1px solid var(--hairline);
  background: var(--media-plate);
}
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Baseline grade: evens out mixed phone-camera exposure across a set */
.photo img { filter: saturate(0.92) contrast(1.04); }

/* Violet wash — only under data-photo="graded" */
html[data-photo="graded"] .photo img { filter: saturate(0.72) contrast(1.06); }
html[data-photo="graded"] .photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(145deg, rgba(125,51,255,0.42), rgba(164,112,255,0.14));
  mix-blend-mode: soft-light;
}

/* Aspect helpers */
.photo-wide { aspect-ratio: 16 / 9; }
.photo-portrait { aspect-ratio: 4 / 5; }
.photo-square { aspect-ratio: 1 / 1; }

/* Paired case media: primary photo above, app screenshot below */
.case-media-pair { display: grid; gap: 14px; }
.case-media-pair .photo { border-radius: var(--r-panel); }

/* Workshop photo gallery — static grid, same card-grid rhythm used
   elsewhere on the site. Each photo gets full size and no motion, so
   quality issues in source photos are visible and fixable rather than
   hidden (and exaggerated) by a small, fast-moving strip. */
/* Workshop photo carousel — one photo fills the whole stage at a time,
   auto-advancing with a crossfade. No card/border/plate: object-fit: cover
   on a fixed-height stage makes every photo fill it identically no matter
   its own resolution or aspect ratio, so mixed-quality source photos read
   as a deliberate full-bleed treatment rather than an inconsistency. */
.photo-carousel {
  position: relative; width: 100%;
  /* No fixed height and no cover-crop: each photo shows at its own real
     resolution and aspect ratio, only capped so a very tall shot doesn't
     dominate the page. This is a deliberate reversal of the earlier
     fixed-stage version — that consistency was making genuinely
     lower-resolution source photos look worse by stretching/cropping them
     to fit a box that didn't match their real dimensions. */
  min-height: clamp(240px, 30vw, 360px);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-panel); overflow: hidden;
  background: var(--media-plate);
}
.carousel-slide {
  display: none; width: 100%; height: auto;
  max-height: 72vh; object-fit: contain;
}
.carousel-slide.is-active { display: block; }
@media (max-width: 960px) {
  .carousel-slide { max-height: 60vh; }
}
.carousel-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--hairline-bright);
  background: rgba(20,18,35,0.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--ink-90); cursor: pointer;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.carousel-btn:hover { background: rgba(20,18,35,0.7); transform: translateY(-50%) scale(1.06); }
.carousel-btn svg { width: 20px; height: 20px; }
.carousel-prev { left: 16px; }
.carousel-next { right: 16px; }
.carousel-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2;
  display: flex; justify-content: center; gap: 7px;
}
.carousel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transition: background 250ms var(--ease), transform 250ms var(--ease);
}
.carousel-dot.is-active { background: #fff; transform: scale(1.3); }
@media (max-width: 960px) {
  .photo-carousel { border-radius: var(--r-card); }
  .carousel-btn { width: 38px; height: 38px; }
}
@media (max-width: 960px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .photo-gallery { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* Feature photo beside copy (home teaser, about) */
.photo-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.photo-split .photo { border-radius: var(--r-panel); }
@media (max-width: 960px) {
  .photo-split { grid-template-columns: 1fr; }
}

/* ---------- 15. Legal pages (privacy, terms) ---------- */
.legal { max-width: 760px; }
.legal p, .legal li { color: var(--ink-60); line-height: 1.7; margin-bottom: 16px; }
.legal h2 {
  font-size: 22px; font-weight: 500; color: var(--ink-90);
  margin: 40px 0 12px; letter-spacing: -0.01em;
}
.legal h2:first-of-type { margin-top: 28px; }
.legal ul { margin: 0 0 16px 20px; }
.legal li { list-style: disc; margin-bottom: 8px; }
.legal strong { color: var(--ink-90); font-weight: 500; }
.legal a { color: var(--link); }
.legal a:hover { text-decoration: underline; text-underline-offset: 4px; }
.legal-meta {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-40); margin-bottom: 32px;
}

/* Footer legal row: privacy link inherits the row's muted treatment */
.footer-bottom a { color: var(--ink-40); transition: color 200ms var(--ease); }
.footer-bottom a:hover { color: var(--ink-90); }

/* ---------- 16. Email contact blocks (forms retired) ---------- */
.mail-options { display: flex; flex-wrap: wrap; gap: 12px; }
.mail-direct {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline);
}
.mail-direct-label {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-40);
}
.mail-direct .email {
  color: var(--link); font-weight: 500; font-size: 17px;
  /* Address stays visible and selectable: some managed desktops have no
     mail client, so the link alone can silently do nothing. */
  user-select: all;
}
.mail-direct .email:hover { text-decoration: underline; text-underline-offset: 4px; }
.copy-email {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-40);
  background: none; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  padding: 6px 14px; cursor: pointer;
  transition: border-color 200ms var(--ease), color 200ms var(--ease);
}
.copy-email:hover { border-color: var(--hairline-bright); color: var(--ink-90); }
.copy-email.is-copied { color: var(--link); border-color: var(--link); }
.gmail-alt {
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  font-size: 13px; color: var(--ink-40); margin-top: 14px;
}
.gmail-alt a { color: var(--link); }
.gmail-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 17. Video testimonials ---------- */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.video-card {
  position: relative; aspect-ratio: 9 / 16;
  border-radius: var(--r-card); overflow: hidden;
  border: 1px solid var(--hairline);
  /* Branded cover, not a frame from the footage: a testimonial's first
     frame is unpredictable (mid-blink, a blank wall), so the thumbnail is
     a fixed, on-brand plate instead — identical across all three, and
     never dependent on what any given video happens to open on. */
  background: radial-gradient(120% 90% at 50% 12%, rgba(125,51,255,0.22), transparent 60%), var(--media-plate);
}
/* The video itself only appears while actually playing; otherwise the
   branded cover is what's shown, including when paused mid-way. */
.video-card video { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 200ms var(--ease); }
.video-card.is-playing video { opacity: 1; }
.video-quote {
  position: absolute; top: 9%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 700; line-height: 1;
  font-size: clamp(64px, 17vw, 108px);
  background: var(--x-gradient); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0.55; pointer-events: none; user-select: none; z-index: 2;
}
/* Large faint mark filling the plate so the card reads as designed, not
   empty, before the quote/button/caption sit on top of it. */
.video-watermark {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 68%; opacity: 0.08; pointer-events: none; z-index: 0;
}
.video-caption {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 18px 18px;
  background: linear-gradient(0deg, rgba(14,12,26,0.92) 0%, rgba(14,12,26,0) 100%);
  display: flex; flex-direction: column; gap: 3px; pointer-events: none;
}
.video-caption-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-40);
}
.video-caption-role { font-size: 14px; color: var(--ink-90); font-weight: 500; }
.video-card.is-playing .video-caption { opacity: 0; transition: opacity 200ms var(--ease); }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
  display: grid; place-items: center; border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(20,18,35,0.05) 0%, rgba(20,18,35,0.55) 100%);
  transition: background 250ms var(--ease), opacity 250ms var(--ease);
}
.video-play::before {
  content: ""; width: 60px; height: 60px; border-radius: 50%;
  background: rgba(20,18,35,0.55); border: 1px solid rgba(255,255,255,0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: block;
}
.video-play::after {
  content: ""; position: absolute;
  width: 0; height: 0;
  border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
  transform: translateX(3px);
}
.video-play:hover::before { background: var(--x-purple); border-color: var(--x-purple); }
/* Once playing, the overlay and its play glyph step out of the way */
.video-card.is-playing .video-play { opacity: 0; pointer-events: none; }
@media (max-width: 960px) {
  .video-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .video-grid { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
}