/* =================================================
   GAPLINE — SHARED STYLESHEET

   Design system adapted from the Framer DESIGN.md in
   VoltAgent/awesome-claude-design: a near-black artboard,
   oversized display type with aggressive negative tracking,
   white pill CTAs, charcoal surfaces, and vibrant gradient
   spotlight CARDS as the atmosphere device.

   Adapted, not cloned. GT Walsheim is proprietary, so
   display type runs Figtree (geometric, holds tight
   tracking) with Inter for body — both from Google Fonts.

   Every shared rule lives here. Pages carry no <style>
   block and no inline style attributes.
================================================= */

/* =================================================
   DESIGN TOKENS
================================================= */
/* -------------------------------------------------
   THEME
   Light is the base definition on bare :root. Dark is
   redefined twice — once under prefers-color-scheme for
   people who never touch the toggle, guarded so an
   explicit light choice still wins, and once under
   [data-theme="dark"] so the toggle beats the OS in
   both directions. Never define a colour only inside a
   media or [data-theme] block.

   The Framer system this is adapted from says "don't
   ship a light-mode marketing page". We ship one anyway
   because respecting the visitor's preference matters
   more than brand purity — but the dark theme stays the
   canonical look, and light is a genuine design, not an
   inversion.
------------------------------------------------- */
:root {
  /* ---- light (default) ---- */
  --canvas:        #FAFAF9;
  --surface-1:     #FFFFFF;
  --surface-2:     #F2F2F0;
  --hairline:      #E4E2DE;
  --hairline-soft: #EDEBE7;

  --ink:           #0A0A0A;
  --ink-muted:     #6A6A6E;

  /* Taken from the logo's own violet. The blue it replaced sat at 4.46:1 on
     this canvas, just under AA; this clears it at 5.07:1. */
  --accent:        #6A4CF5;
  --logo-pillar:   #0A0A0A;

  /* Chrome and lift values that differ per theme */
  --nav-bg:          rgba(250,250,249,0.72);
  --nav-bg-scrolled: rgba(250,250,249,0.92);
  --btn-glow:        0 8px 24px rgba(10,10,10,0.18);
  --lift-fill:       rgba(10,10,10,0.06);
  --lift-fill-hover: rgba(10,10,10,0.12);
  /* On light, surface-1 is #FFF against a #FAFAF9 canvas — a secondary pill
     using it is all but invisible, so it gets its own token per theme. */
  --btn-2-bg:        rgba(10,10,10,0.07);
  --btn-2-bg-hover:  rgba(10,10,10,0.13);
  --ph-tint-a:       rgba(106,76,245,0.20);
  --ph-tint-b:       rgba(255,115,22,0.16);
  --icon-hover-bg:   rgba(10,10,10,0.08);
  --chrome-bg:       rgba(10,10,10,0.04);
  --chrome-dot:      rgba(10,10,10,0.16);
  --ph-border:       rgba(10,10,10,0.28);
  --ph-ink:          var(--ink-muted);
  --placeholder:     #A0A09E;
  --lift: 0 1px 0 0 rgba(255,255,255,0.7) inset, 0 6px 20px rgba(10,10,10,0.08);
  --ok-text:  #15803D;
  --err-text: #B4243F;

  /* Signal / gradient family — identical in both themes.
     Saturated colour reads on either ground. Every value is sampled from the
     logo artwork, so the washes and the mark are the same family. */
  --g-magenta: #d44df0;
  --g-violet:  #6a4cf5;
  --g-orange:  #ff7316;
  --g-coral:   #ff0b89;
  --success:   #22c55e;

  --font-display: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* 5px base unit — the system's non-standard 5/10/15/20/30 ladder. */
  --sp-hair: 1px;  --sp-xxs: 4px;  --sp-xs: 8px;   --sp-sm: 12px;
  --sp-md: 15px;   --sp-lg: 20px;  --sp-xl: 30px;  --sp-xxl: 40px;
  --sp-section: 96px;

  --r-xs: 4px;  --r-sm: 6px;  --r-md: 10px; --r-lg: 15px;
  --r-xl: 20px; --r-xxl: 30px; --r-pill: 100px; --r-full: 9999px;

  --max-w: 1199px;
  --pad-x: 24px;
  --nav-h: 56px;
  --ease: 0.22s ease;
}

/* ---- dark: the canonical look ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:        #090909;
    --surface-1:     #141414;
    --surface-2:     #1c1c1c;
    --hairline:      #262626;
    --hairline-soft: #1a1a1a;

    --ink:           #ffffff;
    --ink-muted:     #999999;

    /* A tint of the logo violet — the mark's own #6A4CF5 only reaches 3.76:1
       on this canvas, so it lifts to clear AA at 5.64:1. */
    --accent:        #8B72FF;
    --logo-pillar:   #FAFAF9;

    --nav-bg:          rgba(9,9,9,0.72);
    --nav-bg-scrolled: rgba(9,9,9,0.92);
    --btn-glow:        0 8px 24px rgba(255,255,255,0.14);
    --lift-fill:       rgba(255,255,255,0.09);
    --lift-fill-hover: rgba(255,255,255,0.16);
    --icon-hover-bg:   rgba(255,255,255,0.10);
    --chrome-bg:       rgba(255,255,255,0.05);
    --chrome-dot:      rgba(255,255,255,0.18);
    --ph-border:       rgba(255,255,255,0.35);
    --btn-2-bg:        var(--surface-1);
    --btn-2-bg-hover:  var(--surface-2);
    --ph-tint-a:       rgba(106,76,245,0.30);
    --ph-tint-b:       rgba(255,115,22,0.20);
    --placeholder:     #6b6b6b;
    --lift: 0 -0.5px 0 0 rgba(255,255,255,0.10) inset, 0 10px 30px rgba(0,0,0,0.25);
    --ok-text:  #86efac;
    --err-text: #ffa8b8;
  }
}

:root[data-theme="dark"] {
  --canvas:        #090909;
  --surface-1:     #141414;
  --surface-2:     #1c1c1c;
  --hairline:      #262626;
  --hairline-soft: #1a1a1a;

  --ink:           #ffffff;
  --ink-muted:     #999999;

  --accent:        #8B72FF;
  --logo-pillar:   #FAFAF9;

  --nav-bg:          rgba(9,9,9,0.72);
  --nav-bg-scrolled: rgba(9,9,9,0.92);
  --btn-glow:        0 8px 24px rgba(255,255,255,0.14);
  --lift-fill:       rgba(255,255,255,0.09);
  --lift-fill-hover: rgba(255,255,255,0.16);
  --icon-hover-bg:   rgba(255,255,255,0.10);
  --chrome-bg:       rgba(255,255,255,0.05);
  --chrome-dot:      rgba(255,255,255,0.18);
  --ph-border:       rgba(255,255,255,0.35);
  --btn-2-bg:        var(--surface-1);
  --btn-2-bg-hover:  var(--surface-2);
  --ph-tint-a:       rgba(106,76,245,0.30);
  --ph-tint-b:       rgba(255,115,22,0.20);
  --placeholder:     #6b6b6b;
  --lift: 0 -0.5px 0 0 rgba(255,255,255,0.10) inset, 0 10px 30px rgba(0,0,0,0.25);
  --ok-text:  #86efac;
  --err-text: #ffa8b8;
}

/* =================================================
   RESET & BASE
================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  background: var(--canvas);
  color-scheme: light;
}
body {
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  font-feature-settings: 'cv01','cv05','cv09','cv11','ss03';
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

body.menu-open { position: fixed; width: 100%; overflow: hidden; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: var(--ink); color: var(--canvas);
  padding: 12px 20px; border-radius: 0 0 var(--r-md) 0;
  font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 0; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); }

/* =================================================
   TYPOGRAPHY
   Negative tracking is set in em so it survives the
   responsive size drop — reduce the size, keep the
   percentage. -0.05em is the brand signature.
================================================= */
.display-xxl, .display-xl, .display-lg, .display-md {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.display-xxl { font-size: clamp(42px, 6.6vw, 92px); line-height: 0.88; letter-spacing: -0.05em; }
.display-xl  { font-size: clamp(38px, 6.4vw, 85px);  line-height: 0.95; letter-spacing: -0.05em; }
.display-lg  { font-size: clamp(32px, 4.8vw, 62px);  line-height: 1.00; letter-spacing: -0.05em; }
.display-md  { font-size: clamp(26px, 2.6vw, 32px);  line-height: 1.13; letter-spacing: -0.031em; }

.headline {
  font-family: var(--font-body);
  font-size: 22px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.036em;
  color: var(--ink);
}
.subhead {
  font-size: clamp(18px, 2vw, 24px); font-weight: 400;
  line-height: 1.3; color: var(--ink-muted);
  max-width: 62ch;
}
.body-lg { font-size: 18px; line-height: 1.45; color: var(--ink-muted); }
.body    { font-size: 15px; line-height: 1.5;  color: var(--ink-muted); }
.body-sm { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); }
.caption { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--ink-muted); }
.micro   { font-size: 12px; line-height: 1.2; color: var(--ink-muted); }

/* Eyebrow — small, tracked-out, the one place tracking goes positive */
.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--sp-md);
}

/* Inline link — the only place accent-blue appears in text */
.link { color: var(--accent); }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =================================================
   SECTIONS
   Sections separate by mode change — a band of charcoal
   cards, then black with a gradient spotlight, then back.
   The dark canvas is the whitespace.
================================================= */
.section { padding: var(--sp-section) var(--pad-x); }
.section-inner { max-width: var(--max-w); margin: 0 auto; }
.section-hd { max-width: 780px; margin-bottom: var(--sp-xxl); }
.section-hd--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-foot { margin-top: var(--sp-xxl); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* =================================================
   BUTTONS — pill or circle only, never squared,
   never a blue fill.
================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs);
  padding: 14px 24px; min-height: 44px;
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em;
  border: none; cursor: pointer; white-space: nowrap;
  transition: background var(--ease), color var(--ease),
              transform var(--ease), box-shadow var(--ease);
}
.btn-primary { background: var(--ink); color: var(--canvas); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--btn-glow); }
.btn-secondary { background: var(--btn-2-bg); color: var(--ink); }
.btn-secondary:hover { background: var(--btn-2-bg-hover); transform: translateY(-1px); }
/* A secondary pill sitting ON a card would otherwise be surface-1 on surface-1
   and disappear. Lift it off whatever surface it lands on instead of hard-coding
   the next step up, so it reads on both surface-1 and surface-2 cards. */
.card .btn-secondary, .price-card .btn-secondary {
  background: var(--lift-fill);
}
.card .btn-secondary:hover, .price-card .btn-secondary:hover {
  background: var(--lift-fill-hover);
}
.btn-lg { padding: 16px 30px; font-size: 15px; }
.btn--block { width: 100%; }

.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--surface-1); color: var(--ink);
  transition: background var(--ease);
}
.btn-icon:hover { background: var(--surface-2); }

/* min-height, not padding: WCAG 2.2 asks for a 24px target and a standalone
   link at 14px is about 17px tall. Padding would push the surrounding layout
   around; a min-height with centred content does not. */
.arrow-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  transition: gap var(--ease), color var(--ease);
}
.arrow-link:hover { gap: 12px; color: var(--ink); }
.arrow-link .chev { color: var(--ink-muted); }

/* =================================================
   SCROLL REVEAL
   Gated behind html.js (set before first paint) so a
   blocked script leaves the page readable, not blank.
================================================= */
.reveal-ready .reveal { opacity: 0; transform: translateY(24px); }
.reveal-ready .reveal.reveal { transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1), transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.reveal-ready .reveal.visible { opacity: 1; transform: none; }
.reveal-ready .reveal.d1 { transition-delay: 0.06s; }
.reveal-ready .reveal.d2 { transition-delay: 0.12s; }
.reveal-ready .reveal.d3 { transition-delay: 0.18s; }
.reveal-ready .reveal.d4 { transition-delay: 0.24s; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.anim-1 { animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.05s both; }
.anim-2 { animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.15s both; }
.anim-3 { animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.25s both; }
.anim-4 { animation: fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) 0.35s both; }

/* =================================================
   NAV — 56px bar, hamburger below 810px
================================================= */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 900;
  height: var(--nav-h);
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ease), background var(--ease);
}
.nav.scrolled { border-bottom-color: var(--hairline); background: var(--nav-bg-scrolled); }
.nav-inner {
  max-width: var(--max-w); margin: 0 auto; height: var(--nav-h);
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--sp-lg);
}
.logo { display: inline-flex; align-items: center; gap: 8px; }
.logo-name {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.045em;
  color: var(--ink);
}
/* The mark is the generated artwork itself. Its pillars are drawn in
   currentColor and take --logo-pillar, which is the artwork's own #FAFAF9 on
   dark and inverts on light — where the original white would land on a #FAFAF9
   canvas and disappear. The bridging line keeps its baked gradient either way. */
.logo-mark { flex: none; display: block; height: 19px; width: auto; color: var(--logo-pillar); }

.nav-links { display: flex; justify-content: center; align-items: center; gap: var(--sp-xxs); }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--ink-muted);
  padding: 8px 14px; border-radius: var(--r-pill);
  transition: color var(--ease), background var(--ease);
}
.nav-links a:hover { color: var(--ink); background: var(--surface-1); }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-cta { display: flex; align-items: center; gap: var(--sp-sm); }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer;
  width: 44px; height: 44px; align-items: center; justify-content: center;
}
.hamburger span { display: block; width: 20px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; }
.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--canvas); border-top: 1px solid var(--hairline);
  padding: var(--sp-lg) var(--pad-x) calc(var(--sp-xxl) + env(safe-area-inset-bottom, 0px));
  max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
  overscroll-behavior: contain; z-index: 899;
}
.nav-mobile.open { display: block; }
.nav-mobile a:not(.btn) {
  display: block; padding: 14px 0; font-size: 17px; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--hairline-soft);
}
.nav-mobile .btn { margin-top: var(--sp-lg); width: 100%; }

/* =================================================
   HERO — one assertive statement, generous air
================================================= */
.hero {
  padding: calc(var(--nav-h) + 44px) var(--pad-x) var(--sp-section);
  position: relative; overflow: hidden;
}
.hero-inner { max-width: var(--max-w); margin: 0 auto; }
.hero h1 { margin-bottom: var(--sp-lg); max-width: 15ch; }
.hero .subhead { margin-bottom: var(--sp-lg); max-width: 54ch; }
.hero-ctas { display: flex; gap: var(--sp-sm); flex-wrap: wrap; margin-bottom: var(--sp-md); }
.hero-note { font-size: 13px; color: var(--ink-muted); }
.hero-note strong { color: var(--ink); font-weight: 500; }

/* =================================================
   GRADIENT SPOTLIGHT CARDS
   The atmosphere device. Cards, never section grounds.
   Never more than two in one viewport.
================================================= */
/* A .spot only lifts when it is genuinely a link. A static one that
   responds to hover reads as clickable and then does nothing, which is
   worse than no feedback at all. */
a.spot:hover { transform: translateY(-3px); box-shadow: var(--lift); }
a.spot { transition: transform var(--ease), box-shadow var(--ease); }

.spot {
  border-radius: var(--r-xxl);
  padding: var(--sp-xl);
  color: var(--ink);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 260px;
}
.spot--violet  { background: radial-gradient(120% 120% at 20% 10%, #8b6bff 0%, var(--g-violet) 45%, #3a1f9e 100%); }
.spot--magenta { background: radial-gradient(120% 120% at 80% 15%, #ec7bff 0%, var(--g-magenta) 45%, #8016a8 100%); }
.spot--orange  { background: radial-gradient(120% 120% at 25% 85%, #ffb066 0%, var(--g-orange) 45%, #c23c00 100%); }
.spot--coral   { background: radial-gradient(120% 120% at 75% 20%, #ff8fa3 0%, var(--g-coral) 45%, #a81232 100%); }
.spot h3 { font-family: var(--font-display); font-size: 26px; font-weight: 500; letter-spacing: -0.035em; margin-bottom: var(--sp-xs); }
.spot p  { font-size: 15px; line-height: 1.4; color: rgba(255,255,255,0.82); max-width: 34ch; }
.spot .spot-tag {
  position: absolute; top: var(--sp-lg); left: var(--sp-xl);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.8);
  background: rgba(0,0,0,0.22); border-radius: var(--r-pill); padding: 5px 12px;
}

/* =================================================
   SURFACE CARDS
================================================= */
.card {
  background: var(--surface-1);
  border-radius: var(--r-xl);
  padding: var(--sp-xl);
  display: flex; flex-direction: column;
  transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
a.card:hover { background: var(--surface-2); transform: translateY(-3px); box-shadow: var(--lift); }
a.card { cursor: pointer; }
a.card:hover .arrow-link { gap: 12px; }
.card-icon {
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink); margin-bottom: var(--sp-lg);
}
.card:hover .card-icon { background: var(--icon-hover-bg); }
.card-icon svg { width: 18px; height: 18px; }
.card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin-bottom: var(--sp-xs); }
.card p { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
.card .arrow-link { margin-top: auto; padding-top: var(--sp-lg); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); align-items: start; }

/* =================================================
   STEPS
================================================= */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-lg); }
.step { border-top: 1px solid var(--hairline); padding-top: var(--sp-lg); }
.step-num { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-muted); display: block; margin-bottom: var(--sp-md); }
.step h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); margin-bottom: var(--sp-xs); }
.step p { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }

/* =================================================
   PRICING — 4-up, charcoal cards
================================================= */
.price-card {
  background: var(--surface-1); border-radius: var(--r-xl);
  padding: var(--sp-xl); display: flex; flex-direction: column; height: 100%;
  position: relative; transition: background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.price-card:hover { background: var(--surface-2); transform: translateY(-3px); box-shadow: var(--lift); }
.price-card--featured { background: var(--surface-2); box-shadow: var(--lift); }
.price-flag {
  align-self: flex-start; margin-bottom: var(--sp-sm);
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--canvas); background: var(--ink);
  border-radius: var(--r-pill); padding: 4px 11px;
}
.price-name { font-size: 17px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); margin-bottom: 4px; }
.price-for { font-size: 13px; color: var(--ink-muted); margin-bottom: var(--sp-lg); min-height: 34px; }
.price-amt { font-family: var(--font-display); font-size: 40px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.price-unit { font-size: 13px; color: var(--ink-muted); margin: 6px 0 var(--sp-lg); }
.price-list { display: flex; flex-direction: column; gap: var(--sp-sm); margin-bottom: var(--sp-xl); }
.price-list li { display: flex; gap: var(--sp-sm); font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.price-list svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 4px; color: var(--ink); }
.price-card .btn { margin-top: auto; }

/* =================================================
   FAQ
================================================= */
.faq-list { max-width: 820px; }
.faq-row { border-bottom: 1px solid var(--hairline); }
.faq-row summary {
  list-style: none; cursor: pointer;
  padding: var(--sp-xl) 44px var(--sp-xl) 0;
  font-size: 18px; font-weight: 500; letter-spacing: -0.025em; color: var(--ink);
  position: relative; min-height: 44px; display: flex; align-items: center;
}
.faq-row summary::-webkit-details-marker { display: none; }
.faq-row summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted);
  transform: rotate(45deg); transition: transform var(--ease);
}
.faq-row[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq-row summary:hover { color: var(--ink); }
.faq-body { padding: 0 44px var(--sp-xl) 0; }
.faq-body p { font-size: 15px; line-height: 1.6; color: var(--ink-muted); }
.faq-body p + p { margin-top: var(--sp-sm); }

/* =================================================
   PAGE HERO (inner pages)
================================================= */
.page-hero { padding: calc(var(--nav-h) + 72px) var(--pad-x) var(--sp-xxl); }
.page-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.page-hero h1 { margin-bottom: var(--sp-lg); max-width: 16ch; }
.page-hero .subhead { max-width: 56ch; }

/* =================================================
   FORM
================================================= */
.form-card { background: var(--surface-1); border-radius: var(--r-xl); padding: var(--sp-xl); }
.field { margin-bottom: var(--sp-lg); }
.field label { display: block; font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: var(--sp-xs); }
.field .req { color: var(--ink-muted); }
.field input, .field textarea {
  width: 100%; padding: 12px 14px; min-height: 44px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 15px; letter-spacing: -0.01em;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.5; }
/* Level 3 — the blue ring is the only chromatic depth signal */
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0,153,255,0.15);
}
.field-hint { font-size: 13px; color: var(--ink-muted); margin-top: 6px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; line-height: 1.5; color: var(--ink-muted); margin-top: var(--sp-md); }
.form-msg { display: none; padding: 14px 16px; border-radius: var(--r-md); font-size: 14px; line-height: 1.5; margin-bottom: var(--sp-lg); }
.form-msg.show { display: block; }
.form-msg--ok  { background: rgba(34,197,94,0.12);  border: 1px solid rgba(34,197,94,0.35);  color: var(--ok-text); }
.form-msg--err { background: rgba(255,85,119,0.12); border: 1px solid rgba(255,85,119,0.38); color: var(--err-text); }

.detail-card { background: var(--surface-1); border-radius: var(--r-lg); padding: var(--sp-lg); }
.detail-card h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-xs); }
.detail-card p { font-size: 15px; line-height: 1.5; color: var(--ink-muted); }
/* Standalone, so it needs the 24px target. The same address inside a
   sentence on the FAQ page doesn't — WCAG exempts inline links. */
.detail-card a { color: var(--ink); display: inline-flex; align-items: center; min-height: 24px; }
.detail-card a:hover { color: var(--accent); }
.contact-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-xxl); align-items: start; }
.contact-side { display: flex; flex-direction: column; gap: var(--sp-sm); }

/* =================================================
   PROSE
================================================= */
.prose { max-width: 680px; }
.prose p { font-size: 17px; line-height: 1.65; color: var(--ink-muted); margin-bottom: var(--sp-lg); }
.prose p strong { color: var(--ink); font-weight: 500; }
.prose h2 { font-family: var(--font-display); font-size: 24px; line-height: 1.25; font-weight: 500; letter-spacing: -0.035em; color: var(--ink); margin: var(--sp-xxl) 0 var(--sp-md); }
.prose ul { display: flex; flex-direction: column; gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.prose ul li { display: flex; gap: var(--sp-sm); font-size: 16px; line-height: 1.6; color: var(--ink-muted); }
.prose ul li::before { content: ''; flex-shrink: 0; width: 4px; height: 4px; border-radius: var(--r-full); background: var(--ink-muted); margin-top: 11px; }

/* =================================================
   CTA BAND
================================================= */
.cta-band { padding: var(--sp-section) var(--pad-x); border-top: 1px solid var(--hairline);  position: relative; overflow: hidden; }
.cta-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.cta-inner h2 { margin-bottom: var(--sp-md); }
.cta-inner .subhead { margin: 0 auto var(--sp-xl); }
.cta-btns { display: flex; gap: var(--sp-sm); justify-content: center; flex-wrap: wrap; }

/* =================================================
   FOOTER
================================================= */
.footer { padding: 64px var(--pad-x) var(--sp-xl); border-top: 1px solid var(--hairline);  position: relative; }
.footer-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp-xxl); padding-bottom: var(--sp-xxl); }
.f-blurb { font-size: 14px; line-height: 1.55; color: var(--ink-muted); max-width: 30ch; margin-top: var(--sp-sm); }
.footer-col h2 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: var(--sp-md); }
.footer-col ul li { margin-bottom: var(--sp-sm); }
.footer-col ul li a { font-size: 14px; color: var(--ink-muted); transition: color var(--ease); }
.footer-col ul li a:hover { color: var(--ink); }
.contact-row { display: flex; gap: var(--sp-xs); align-items: flex-start; margin-bottom: var(--sp-sm); font-size: 14px; color: var(--ink-muted); }
.contact-row svg { flex-shrink: 0; margin-top: 3px; }
.contact-row a:hover { color: var(--ink); }
.footer-bottom {
  max-width: var(--max-w); margin: 0 auto; padding-top: var(--sp-lg);
  border-top: 1px solid var(--hairline-soft);
  display: flex; justify-content: space-between; gap: var(--sp-sm);
  /* Was --ink-faint (#9A9A9E light / #6b6b6b dark) — 2.68:1 and 3.74:1,
     both under WCAG AA's 4.5:1 for 12px text. It had no other user, so
     retired rather than left as a token nobody could use without failing
     the same check. */
  font-size: 12px; color: var(--ink-muted);
}

/* =================================================
   FOCUS
================================================= */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs);
}

/* =================================================
   RESPONSIVE — card grids 4→2 at 810px, 1-up below
================================================= */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .work-grid, .grid-3, .steps { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .proof-inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-xl); }
}

@media (max-width: 810px) {
  :root { --sp-section: 64px; --pad-x: 20px; }
  .nav-inner > nav, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .nav-inner { grid-template-columns: 1fr auto; }
  .hero { padding-top: calc(var(--nav-h) + 56px); }
  .grid-2, .grid-3, .grid-4, .work-grid, .steps { grid-template-columns: 1fr; }
  .ad-grid, .ba-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-xl); }
  .footer-bottom { flex-direction: column; gap: 6px; }
  .spot { min-height: 220px; padding: var(--sp-lg); }
  .spot .spot-tag { left: var(--sp-lg); }
  .page-hero { padding-top: calc(var(--nav-h) + 48px); }
}

@media (max-width: 480px) {
  .proof-inner { grid-template-columns: 1fr 1fr; }
  .hero-ctas, .cta-btns { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .cta-btns .btn { width: 100%; }
}

/* =================================================
   REDUCED MOTION
================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-ready .reveal { opacity: 1 !important; transform: none !important; }
}

/* =================================================
   THEME TOGGLE
   Two glyphs in one button; CSS picks which shows so
   the icon always previews what you'd switch TO.
================================================= */
.theme-toggle .i-sun  { display: none; }
.theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .i-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle svg { width: 17px; height: 17px; }

/* The whole page eases between themes rather than snapping. */
body, .nav, .card, .price-card, .form-card, .detail-card,
.frame, .tile, .mockup-tile, .faq-row, .step, .footer {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =================================================
   COPY-EMAIL BUTTON
   The mailto fallback is invisible to anyone without a
   mail client wired up, so the address is also offered
   as something you can copy.
================================================= */
.copy-row { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 8px 14px;
  border-radius: var(--r-pill); border: none; cursor: pointer;
  background: var(--btn-2-bg); color: var(--ink);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  transition: background var(--ease);
}
.copy-btn:hover { background: var(--btn-2-bg-hover); }
.copy-btn svg { width: 13px; height: 13px; }
.copy-btn.copied { background: rgba(34,197,94,0.18); color: var(--ok-text); }

/* deco:begin — generated by tools/build-deco.py, do not hand-edit */
/* =================================================
   DECORATION
   Motifs from the same trade: the mark's own gap
   scattered as texture, viewfinder brackets, film
   perforations and timecode ticks, a lens iris, and
   one tool mark per service (play, cursor, swatches,
   feed grid, registration mark).

   Every mark is a mask, not an image, so it takes
   currentColor and follows the theme. The shapes are
   same-origin files because the CSP allows no data:
   URIs — see tools/build-deco.py.

   All of it is ambient by intent: background at a
   glance, deliberate on a second look. It must never
   out-shout the work.
================================================= */
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after,
.cta-band::before,
.cta-band::after,
.offer-strip::before,
.steps::before,
.portfolio-note::after,
.spot::after,
.footer::before {
  content: ""; position: absolute; pointer-events: none;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}

/* These carry decoration in a pseudo-element, so they must establish a
   containing block. Set here rather than in the layout rules so the whole
   decoration system stays removable by regenerating this block. */
.page-hero, .offer-strip, .steps, .portfolio-note { position: relative; }

/* Viewfinder brackets — the page seen through a camera. One element carries
   all four corners as four mask layers. Every page top gets them, so the
   inner pages open the same way the home page does. */
.hero::before,
.page-hero::before,
.cta-band::before {
  opacity: 0.14;
  -webkit-mask-image: url("/images/deco/bracket-tl.svg"), url("/images/deco/bracket-tr.svg"), url("/images/deco/bracket-br.svg"), url("/images/deco/bracket-bl.svg");
  mask-image: url("/images/deco/bracket-tl.svg"), url("/images/deco/bracket-tr.svg"), url("/images/deco/bracket-br.svg"), url("/images/deco/bracket-bl.svg");
  -webkit-mask-position: left top, right top, right bottom, left bottom;
  mask-position: left top, right top, right bottom, left bottom;
  -webkit-mask-size: 26px 26px; mask-size: 26px 26px;
}
.hero::before { inset: calc(var(--nav-h) + 18px) 18px 30px; }
.page-hero::before { inset: calc(var(--nav-h) + 16px) 18px 16px; }
.cta-band::before { inset: 26px 18px; }

/* The gap, scattered. The brand's atom used as texture. */
.hero::after,
.page-hero::after,
.cta-band::after {
  inset: 0; opacity: 0.06;
  -webkit-mask-image: url("/images/deco/specks.svg"); mask-image: url("/images/deco/specks.svg");
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  -webkit-mask-size: 460px 460px; mask-size: 460px 460px;
}
/* The iris rides the same layer as the specks on the CTA band: one lens
   opening, large and faint, beside the last thing on the page. */
.cta-band::after {
  -webkit-mask-image: url("/images/deco/specks.svg"), url("/images/deco/iris.svg");
  mask-image: url("/images/deco/specks.svg"), url("/images/deco/iris.svg");
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-size: 460px 460px, 250px 250px;
  mask-size: 460px 460px, 250px 250px;
  -webkit-mask-position: 0 0, right 64px center;
  mask-position: 0 0, right 64px center;
}

/* Timecode ticks and film perforations, run as edge rules. The ticks sit on
   the strips that read as a measured run: the offer strip and the steps. */
.offer-strip::before,
.steps::before,
.footer::before {
  left: 0; right: 0; top: 0; height: 14px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.offer-strip::before,
.steps::before {
  opacity: 0.16;
  -webkit-mask-image: url("/images/deco/ticks.svg"); mask-image: url("/images/deco/ticks.svg");
  -webkit-mask-size: 48px 14px; mask-size: 48px 14px;
}
.steps::before { top: -14px; }
.footer::before {
  opacity: 0.13;
  -webkit-mask-image: url("/images/deco/perforations.svg"); mask-image: url("/images/deco/perforations.svg");
  -webkit-mask-size: 26px 14px; mask-size: 26px 14px;
}

/* The empty-portfolio panel is the barest page on the site. One large iris,
   very faint, so it reads as composed rather than unfinished. */
.portfolio-note::after {
  right: -40px; bottom: -50px; width: 260px; height: 260px; opacity: 0.07;
  -webkit-mask-image: url("/images/deco/iris.svg"); mask-image: url("/images/deco/iris.svg");
  -webkit-mask-size: contain; mask-size: contain;
}

/* Spots are the one surface with no texture at all — a flat gradient card,
   the "atmosphere device" per the hand-written rule above them. A single
   faint iris in the corner, in the spot's own white text colour, reads as a
   lens catching stray light rather than a blank panel. */
.spot::after {
  right: -30px; bottom: -36px; width: 200px; height: 200px; opacity: 0.10;
  -webkit-mask-image: url("/images/deco/iris.svg"); mask-image: url("/images/deco/iris.svg");
  -webkit-mask-size: contain; mask-size: contain;
}

/* One tool mark per service, watermarked into its card. The mark is the
   object the service produces — a play button, a pointer, a set of swatches.
   Driven by data-mark so the markup names the motif and this block owns the
   drawing. */
[data-mark] { position: relative; }
[data-mark]::after {
  content: ""; position: absolute; pointer-events: none;
  right: 16px; bottom: 14px; width: 104px; height: 104px;
  background: currentColor; opacity: 0.05;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
}
[data-mark="play"]::after     { -webkit-mask-image: url("/images/deco/play.svg");     mask-image: url("/images/deco/play.svg"); }
[data-mark="iris"]::after     { -webkit-mask-image: url("/images/deco/iris.svg");     mask-image: url("/images/deco/iris.svg"); }
[data-mark="cursor"]::after   { -webkit-mask-image: url("/images/deco/cursor.svg");   mask-image: url("/images/deco/cursor.svg"); }
[data-mark="crop"]::after     { -webkit-mask-image: url("/images/deco/crop.svg");     mask-image: url("/images/deco/crop.svg"); }
[data-mark="swatches"]::after { -webkit-mask-image: url("/images/deco/swatches.svg"); mask-image: url("/images/deco/swatches.svg"); }
[data-mark="grid"]::after     { -webkit-mask-image: url("/images/deco/grid.svg");     mask-image: url("/images/deco/grid.svg"); }
/* A hovered card lifts its mark very slightly out of the background. */
a[data-mark]:hover::after { opacity: 0.09; }

/* Decoration is the first thing to go when contrast is the priority. */
@media (prefers-contrast: more) {
  .hero::before, .hero::after, .page-hero::before, .page-hero::after,
  .cta-band::before, .cta-band::after, .offer-strip::before,
  .steps::before, .portfolio-note::after, .spot::after, .footer::before,
  [data-mark]::after { display: none; }
}
/* deco:end */

/* Studio refinement — one shared system for the seven-page site. */
:root { --nav-h: 76px; }
html { scroll-padding-top: calc(var(--nav-h) + 24px); }
[hidden] { display: none !important; }
.nav { border-bottom: 1px solid var(--hairline); }
.nav-inner { max-width: calc(var(--max-w) + 2 * var(--pad-x)); }
.logo-name { font-size: 24px; }
.logo-mark { height: 23px; }
.nav-links a { padding: 10px; }
.nav-links a[aria-current="page"] { background: var(--surface-2); }
.btn { gap: 14px; min-height: 44px; }
.btn-primary span[aria-hidden] { font-size: 20px; line-height: 1; }
.hero { padding-top: calc(var(--nav-h) + 28px); padding-bottom: 0; }
.hero::before, .hero::after { display: none; }
.studio-kicker { display: flex; justify-content: space-between; gap: 20px; color: var(--ink-muted); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 24px; border-bottom: 1px solid var(--hairline); }
.hero-layout { display: grid; grid-template-columns: 1.12fr 1fr; gap: 64px; align-items: center; padding: 64px 0; }
.hero h1 { font-size: clamp(56px, 6vw, 84px); line-height: .99; letter-spacing: -.065em; max-width: none; margin-bottom: 26px; }
.hero-line { display: block; }
.hero-line--accent { color: var(--accent); }
.hero .subhead { font-size: 19px; line-height: 1.55; max-width: 44ch; margin-bottom: 28px; }
.hero .eyebrow { margin-bottom: 24px; }
.hero-ctas { gap: 10px; }
.hero-ctas .btn-lg { padding: 16px 22px; }
.hero-note { line-height: 1.5; }
.studio-art { position: relative; border-radius: 14px; background: #17121e; color: #f7f4ff; overflow: hidden; min-width: 0; isolation: isolate; }
.studio-art::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 75% 40%, #36234c 0%, transparent 65%), linear-gradient(135deg,#21192a,#100f13); }
.art-topline { display: flex; justify-content: space-between; padding: 24px; font: 10px/1.4 var(--font-body); letter-spacing: .13em; color: #c6bed0; }
.bridge-art { height: 286px; position: relative; display: flex; align-items: center; justify-content: center; gap: 24px; perspective: 800px; }
.bridge-pillar { width: 30%; height: 77%; border-radius: 70px 28px 28px 70px; background: linear-gradient(135deg,#f7f1fc 0%,#c9b7e1 45%,#776888 100%); box-shadow: inset 2px 2px 2px #fff8, 14px 20px 28px #0007; transform: rotate(-9deg) skewY(-4deg); }
.bridge-pillar:nth-child(2) { border-radius: 28px 70px 70px 28px; background: linear-gradient(130deg,#aa88cc,#5c4279 50%,#302637); transform: rotate(-9deg) skewY(-4deg) translateY(-13px); }
.bridge-line { position: absolute; width: 82%; height: 8px; top: 48%; border-radius: 20px; background: linear-gradient(90deg,#ff0b89,#d44df0 30%,#8d6cff 64%,#ff7316); transform: rotate(-9deg); box-shadow: 0 0 24px #c152f188; }
.bridge-orbit { position: absolute; width: 90%; height: 80%; border: 1px solid #ffffff1a; border-radius: 50%; transform: rotate(-28deg); z-index: -1; }

/* --- Companion pieces to .bridge-art ---------------------------------
   Same vocabulary as the hero mark: soft 3D solids, the logo gradient, one
   light source from the upper left. Pure CSS — no image request, no render to
   regenerate, and they scale to any size. Each sits on the dark .studio-art
   stage, which stays dark in both themes exactly like the hero art does.
   All three are decorative: the markup carries aria-hidden. */
.art--compact { display: grid; place-items: center; padding: 36px 30px; min-height: 320px; }
.art-stage { position: relative; width: 100%; max-width: 330px; aspect-ratio: 1 / 0.82; }

/* Logo creation — a mark being struck on its construction guides. */
.mark-art .m-ring { position: absolute; inset: 12% 24%; border: 1px solid #ffffff26; border-radius: 50%; }
.mark-art .m-cross { position: absolute; background: #ffffff1f; }
.mark-art .m-cross:nth-of-type(2) { left: 6%; right: 6%; top: 50%; height: 1px; }
.mark-art .m-cross:nth-of-type(3) { top: 6%; bottom: 6%; left: 50%; width: 1px; }
.mark-art .m-pillar {
  position: absolute; top: 27%; height: 46%; width: 17%;
  border-radius: 34px 14px 14px 34px;
  background: linear-gradient(135deg,#f7f1fc 0%,#c9b7e1 45%,#776888 100%);
  box-shadow: inset 2px 2px 2px #fff8, 10px 14px 22px #0007;
  transform: rotate(-9deg) skewY(-4deg); left: 30%;
}
.mark-art .m-pillar:nth-of-type(5) {
  left: 53%; border-radius: 14px 34px 34px 14px;
  background: linear-gradient(130deg,#aa88cc,#5c4279 50%,#302637);
  transform: rotate(-9deg) skewY(-4deg) translateY(-9px);
}
.mark-art .m-arc {
  position: absolute; inset: 20% 16%; border-radius: 50%;
  border: 3px solid transparent; border-top-color: #ff7316; border-right-color: #d44df0;
  transform: rotate(-34deg); filter: drop-shadow(0 0 12px #d44df066);
}

/* Branding — the palette as physical slabs, stacked and offset. */
.palette-art .p-card {
  position: absolute; left: 12%; width: 62%; height: 26%;
  border-radius: 14px; box-shadow: 12px 16px 26px #0008, inset 2px 2px 2px #ffffff30;
}
.palette-art .p-card:nth-of-type(1) { top: 12%; left: 8%;  background: linear-gradient(130deg,#f7f1fc,#cdbfe0); transform: rotate(-7deg); }
.palette-art .p-card:nth-of-type(2) { top: 34%; left: 15%; background: linear-gradient(130deg,#8d6cff,#4a2ea8); transform: rotate(-7deg); }
.palette-art .p-card:nth-of-type(3) { top: 56%; left: 22%; background: linear-gradient(130deg,#ff3d9a,#a81250); transform: rotate(-7deg); }
.palette-art .p-chip {
  position: absolute; bottom: 9%; width: 13%; height: 9%; border-radius: 7px;
  box-shadow: 4px 6px 12px #0007;
}
.palette-art .p-chip:nth-of-type(4) { left: 26%; background: #8d6cff; }
.palette-art .p-chip:nth-of-type(5) { left: 43%; background: #ff3d9a; }
.palette-art .p-chip:nth-of-type(6) { left: 60%; background: #ff7316; }

/* Social — a fanned stack of posts, artwork and caption blocked in. */
.feed-art .f-post {
  position: absolute; top: 16%; width: 34%; height: 66%;
  border-radius: 16px; padding: 8%;
  background: linear-gradient(135deg,#f7f1fc 0%,#d9cfe6 100%);
  box-shadow: 12px 18px 28px #0008, inset 2px 2px 2px #fff9;
}
.feed-art .f-post:nth-of-type(1) { left: 4%;  transform: rotate(-8deg); }
.feed-art .f-post:nth-of-type(2) { left: 33%; transform: rotate(-2deg) translateY(-12px); z-index: 2; }
.feed-art .f-post:nth-of-type(3) { left: 62%; transform: rotate(5deg); }
.feed-art .f-art { position: absolute; inset: 10% 10% 34%; border-radius: 9px; }
.feed-art .f-post:nth-of-type(1) .f-art { background: linear-gradient(135deg,#ff3d9a,#a81250); }
.feed-art .f-post:nth-of-type(2) .f-art { background: linear-gradient(135deg,#8d6cff,#4a2ea8); }
.feed-art .f-post:nth-of-type(3) .f-art { background: linear-gradient(135deg,#ff9a3d,#c23c00); }
.feed-art .f-line { position: absolute; left: 10%; height: 5%; border-radius: 3px; background: #2c2438; }
.feed-art .f-line:nth-of-type(2) { bottom: 18%; width: 62%; }
.feed-art .f-line:nth-of-type(3) { bottom: 8%;  width: 40%; opacity: .55; }

@media (max-width: 600px) {
  .art--compact { min-height: 250px; padding: 26px 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .art-stage > * { will-change: auto; }
}
.art-caption { display: flex; justify-content: space-between; align-items: flex-end; padding: 12px 24px 24px; font: 23px/1.15 var(--font-display); letter-spacing: -.025em; }
.art-cross { font-size: 38px; color: #bd99e2; }
.art-formats { display: flex; border-top: 1px solid #ffffff24; }
.art-formats a { flex: 1; text-align: center; min-height: 48px; display: flex; justify-content: center; align-items: center; font-size: 11px; color: #e3dcea; border-right: 1px solid #ffffff24; transition: background var(--ease); }
.art-formats a:last-child { border: 0; }
.art-formats a:hover { background: #ffffff15; }
.art-formats a:focus-visible { outline-color: #ddd0ff; outline-offset: -4px; }
.offer-strip { display: grid; grid-template-columns: repeat(3,1fr); padding: 26px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); gap: 24px; }
.offer-strip p { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.offer-strip strong { font-weight: 500; }
.offer-index { font-size: 11px; color: var(--accent); font-variant-numeric: tabular-nums; }
.service-cards .card { position: relative; padding: 32px; border: 1px solid var(--hairline); border-radius: 12px; min-height: 290px; }
.service-cards .card-icon { border-radius: 8px; width: 44px; height: 44px; margin-bottom: 36px; }
.service-cards .service-number { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--accent); margin-bottom: 32px; }
.service-cards .card-icon + .service-number { position: absolute; right: 32px; top: 46px; }
.service-cards h3 { font: 26px/1.15 var(--font-display); letter-spacing: -.035em; margin-bottom: 16px; }
.service-cards .arrow-link { margin-top: auto; padding-top: 32px; }
.service-cards .card:nth-child(2) { background: var(--surface-2); }
.spot { color: #fff; border-radius: 16px; padding-top: 75px; }
.spot p { color: #fff; line-height: 1.55; }
.spot--violet { background: linear-gradient(125deg,#6742d8,#39217d); }
.spot--orange { background: linear-gradient(125deg,#9b3d12,#672415); }
.spot--magenta { background: linear-gradient(125deg,#94349c,#502367); }
.spot--coral { background: linear-gradient(125deg,#a82957,#691c44); }
.spot .spot-tag { color: #fff; background: #0003; }
.question-layout { display: grid; grid-template-columns: .95fr 1fr; gap: 64px; }
.question-layout .arrow-link { margin-top: 24px; }
.question-layout .faq-row:first-child { border-top: 1px solid var(--hairline); }
.home-questions { background: var(--surface-2); }
.page-hero { padding-top: calc(var(--nav-h) + 64px); padding-bottom: 42px; }
.page-hero + .section { padding-top: 32px; }
.page-hero .subhead { line-height: 1.5; font-size: 20px; }
.page-hero h1 { line-height: 1.02; }
.section-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.section-links a { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 18px; font-size: 13px; }
.section-links a:hover { background: var(--surface-2); }
.service-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.pricing-grid { align-items: stretch; padding-top: 10px; }
.price-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 28px 24px; }
.price-card:hover { transform: none; box-shadow: none; }
.price-card--featured { border-color: var(--accent); }
.price-flag { position: absolute; top: -14px; margin: 0; font-size: 10px; }
.price-for { line-height: 1.5; min-height: 44px; }
.price-amt { font-size: 46px; margin-top: 8px; }
.price-name { min-height: 42px; }
.portfolio-note { display: grid; grid-template-columns: .75fr 1.25fr; border: 1px solid var(--hairline); background: var(--surface-1); border-radius: 16px; overflow: hidden; }
.portfolio-note > div:last-child { padding: 56px; }
.portfolio-note p { color: var(--ink-muted); font-size: 17px; line-height: 1.6; margin: 18px 0 26px; max-width: 44ch; }
.portfolio-symbol { display: flex; align-items: center; justify-content: center; gap: 16px; position: relative; background: var(--surface-2); min-height: 240px; }
.portfolio-symbol span { width: 22%; height: 120px; background: var(--ink); border-radius: 40px 12px 12px 40px; }
.portfolio-symbol span:last-child { border-radius: 12px 40px 40px 12px; }
.portfolio-symbol::after { content: ''; position: absolute; width: 60%; height: 5px; background: linear-gradient(90deg,#ff0b89,#6a4cf5,#ff7316); }
.form-card { border: 1px solid var(--hairline); border-radius: 16px; padding: 36px; }
.form-intro { margin-bottom: 28px; }
.form-intro p { font-size: 13px; color: var(--ink-muted); margin-top: 10px; }
.service-choice { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.service-choice legend { font-size: 14px; font-weight: 500; margin-bottom: 12px; }
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.choice-grid label { position: relative; cursor: pointer; display: flex; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--hairline); border-radius: 8px; font-size: 13px; }
.choice-grid label:has(:checked) { border-color: var(--accent); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-grid input { accent-color: var(--accent); width: 17px; height: 17px; flex: none; margin-top: 1px; }
.choice-grid small { display: block; font-size: 11px; line-height: 1.5; color: var(--ink-muted); margin-top: 4px; }
.form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { font-size: 14px; }
.field input, .field textarea { font-size: 16px; background: var(--canvas); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-muted); }
.field input:focus, .field textarea:focus { box-shadow: 0 0 0 3px #8b72ff25; }
.field [aria-invalid="true"] { border-color: var(--err-text); }
.field-error { color: var(--err-text); font-size: 12px; line-height: 1.5; margin-top: 6px; }
.optional { color: var(--ink-muted); font-size: 12px; margin-left: 6px; font-weight: 400; }
.enquiry-review { border-top: 1px solid var(--hairline); margin-top: 32px; padding-top: 28px; }
.enquiry-review > p { font-size: 14px; line-height: 1.5; color: var(--ink-muted); margin: 16px 0; }
.enquiry-review textarea { font-size: 14px; line-height: 1.65; min-height: 270px; }
.review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.detail-card { border: 1px solid var(--hairline); border-radius: 12px; padding: 24px; }
.contact-side .detail-card:first-child { background: var(--surface-2); }
.contact-side .detail-card:first-child p { font-size: 22px; letter-spacing: -.04em; }
.nav-mobile { height: calc(100dvh - var(--nav-h)); max-height: none; }
.nav-mobile a[aria-current="page"] { color: var(--accent); }
body.menu-open main, body.menu-open .footer { pointer-events: none; }
@media (min-width: 1025px) { .contact-side { position: sticky; top: calc(var(--nav-h) + 24px); } }
@media (min-width: 811px) and (max-width: 1080px) { .nav-links a { padding: 10px 7px; font-size: 12px; } .nav-cta > .btn-icon:not(.theme-toggle) { display: none; } .nav-cta { gap: 6px; } .nav-cta > .btn { font-size: 12px; padding: 12px 16px; } }
@media (max-width: 1100px) { .hero-layout { gap: 32px; } .hero h1 { font-size: 64px; } .hero-ctas .btn-lg { font-size: 13px; padding: 14px 18px; } }
@media (max-width: 810px) {
  :root { --nav-h: 64px; }
  .studio-kicker { font-size: 9px; gap: 14px; line-height: 1.6; }
  .studio-kicker span:last-child { text-align: right; max-width: 150px; }
  .hero-layout { grid-template-columns: 1fr; gap: 32px; padding: 40px 0 32px; }
  .hero h1 { font-size: clamp(48px,9.8vw,76px); }
  .hero .subhead { font-size: 17px; }
  .hero .eyebrow { font-size: 10px; margin-bottom: 20px; }
  .hero-ctas .btn-lg { font-size: 14px; }
  .hero-ctas { flex-direction: row; }
  .hero-ctas .btn { width: auto; flex: 1; }
  .studio-art { max-width: 580px; width: 100%; }
  .bridge-art { height: 240px; }
  .offer-strip { gap: 16px; }
  .offer-strip p { display: block; font-size: 11px; line-height: 1.55; }
  .offer-index { display: block; margin-bottom: 6px; }
  .question-layout { grid-template-columns: 1fr; gap: 32px; }
  .service-cards .card { min-height: 0; padding: 26px; }
  .service-cards .card-icon { margin-bottom: 24px; }
  .service-cards .card-icon + .service-number { top: 40px; right: 26px; }
  .portfolio-note { grid-template-columns: 1fr; }
  .portfolio-note > div:last-child { padding: 28px; }
  .portfolio-symbol { min-height: 220px; }
  .form-card { padding: 24px; }
  .page-hero .subhead { font-size: 18px; }
  .price-name, .price-for { min-height: 0; }
  .price-card { padding: 32px 26px; }
  .pricing-grid { gap: 26px; }
}
@media (max-width: 480px) {
  .hero-ctas .btn-lg { padding: 14px 12px; font-size: 12px; gap: 8px; }
  .art-topline { font-size: 9px; padding: 20px; }
  .art-caption { font-size: 22px; }
  .art-formats a { font-size: 10px; }
  .form-two-col { grid-template-columns: 1fr; gap: 0; }
  .choice-grid { gap: 8px; }
  .choice-grid label { padding: 12px 10px; gap: 7px; font-size: 12px; }
  .choice-grid small { font-size: 10px; }
  .form-card { padding: 20px; }
  .review-actions .btn { width: 100%; }
}
@media (prefers-contrast: more) { .card, .detail-card, .form-card, .choice-grid label { border-color: var(--ink); } }
@media print { .nav, .nav-mobile, .cta-band, .theme-toggle { display: none; } .hero, .page-hero { padding-top: 20px; } .reveal { opacity: 1 !important; transform: none !important; } }
/* Navigation remains usable if JavaScript is unavailable or fails to load. */
.btn:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 810px) {
  :root:not(.reveal-ready) .hamburger { display: none; }
  :root:not(.reveal-ready) .nav-mobile { position: relative; display: flex; flex-wrap: wrap; gap: 8px 18px; height: auto; top: 0; margin-top: var(--nav-h); padding: 16px var(--pad-x); }
  :root:not(.reveal-ready) .nav-mobile a:not(.btn) { font-size: 14px; padding: 8px 0; }
  :root:not(.reveal-ready) .nav-mobile .theme-toggle { display: none; }
  :root:not(.reveal-ready) .hero, :root:not(.reveal-ready) .page-hero { padding-top: 28px; }
}

/* Native controls and animation timing follow the visitor’s chosen theme. */
:root { --control-border: #85858a; }
:root[data-theme="dark"] { color-scheme: dark; --control-border: #77777e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --control-border: #77777e; } }
.field input, .field textarea { border-color: var(--control-border); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-delay: 0s !important; } }

@keyframes lineUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.js .hero-line { animation: lineUp .6s ease both; }
.js .hero-line:nth-child(2) { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { .js .hero-line { animation: none; } }

/* =================================================
   ART ANIMATION
   Each piece performs the service it stands for: the
   logo is struck onto its guides, the palette stacks
   up, the posts fan out, and the line finds its way
   across the gap.

   Two rules make this safe to ship:

   1. Every animation ENDS on the element's resting
      state and uses `both`. The reduced-motion block
      above collapses all animation to 0.01ms, so a
      visitor who asked for less motion lands on the
      finished artwork instead of a frozen half-drawn
      one.
   2. Animation is only ever attached under .visible
      (or .js for the hero). With no JavaScript the
      class never arrives, the keyframes never apply,
      and the art sits in its final state already.

   The moving parts use the independent `translate` /
   `rotate` / `scale` properties, never `transform`,
   because `transform` already carries each piece's
   resting pose and would be overwritten.
================================================= */

@keyframes art-rise   { from { opacity: 0; translate: 0 26px; scale: .82; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes art-fade   { from { opacity: 0; scale: .86; }                    to { opacity: 1; scale: 1; } }
@keyframes art-pop    { from { opacity: 0; scale: .3; }                     to { opacity: 1; scale: 1; } }
@keyframes art-swoosh { from { opacity: 0; rotate: -200deg; scale: .55; }   to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes art-slide  { from { opacity: 0; translate: -46px -12px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes art-fan    { from { opacity: 0; translate: 0 34px; rotate: -16deg; scale: .9; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }
@keyframes art-draw   { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* Logo creation — guides, then the stroke swoops round, then the mark lands.
   The order a mark is actually drawn in. */
.reveal.visible .mark-art .m-ring  { animation: art-fade .7s ease-out .05s both; }
.reveal.visible .mark-art .m-cross { animation: art-fade .7s ease-out .12s both; }
.reveal.visible .mark-art .m-arc   { animation: art-swoosh 1.15s cubic-bezier(.22,.9,.3,1) .2s both; }
.reveal.visible .mark-art .m-pillar                   { animation: art-rise .75s cubic-bezier(.22,1.1,.36,1) .62s both; }
.reveal.visible .mark-art .m-pillar:nth-of-type(5)    { animation-delay: .74s; }

/* Branding — the palette arriving one slab at a time, chips last. */
.reveal.visible .palette-art .p-card:nth-of-type(1) { animation: art-slide .7s cubic-bezier(.22,1,.36,1) .08s both; }
.reveal.visible .palette-art .p-card:nth-of-type(2) { animation: art-slide .7s cubic-bezier(.22,1,.36,1) .22s both; }
.reveal.visible .palette-art .p-card:nth-of-type(3) { animation: art-slide .7s cubic-bezier(.22,1,.36,1) .36s both; }
.reveal.visible .palette-art .p-chip:nth-of-type(4) { animation: art-pop .5s cubic-bezier(.3,1.4,.5,1) .56s both; }
.reveal.visible .palette-art .p-chip:nth-of-type(5) { animation: art-pop .5s cubic-bezier(.3,1.4,.5,1) .64s both; }
.reveal.visible .palette-art .p-chip:nth-of-type(6) { animation: art-pop .5s cubic-bezier(.3,1.4,.5,1) .72s both; }

/* Social — the stack fanning out into a feed. */
.reveal.visible .feed-art .f-post:nth-of-type(1) { animation: art-fan .8s cubic-bezier(.22,1,.36,1) .10s both; }
.reveal.visible .feed-art .f-post:nth-of-type(2) { animation: art-fan .8s cubic-bezier(.22,1,.36,1) .24s both; }
.reveal.visible .feed-art .f-post:nth-of-type(3) { animation: art-fan .8s cubic-bezier(.22,1,.36,1) .38s both; }

/* The hero mark. The pillars settle, the orbit opens, and then the line is
   drawn left to right across the gap — which is the whole point of the name,
   so it is the last thing to happen and the only thing that moves on load. */
.js .bridge-art .bridge-pillar                { animation: art-rise .8s cubic-bezier(.22,1.1,.36,1) .25s both; }
.js .bridge-art .bridge-pillar:nth-child(2)   { animation-delay: .37s; }
.js .bridge-art .bridge-orbit                 { animation: art-fade 1s ease-out .5s both; }
.js .bridge-art .bridge-line                  { animation: art-draw .85s cubic-bezier(.35,.85,.3,1) .72s both; }

.btn-icon { border: 1px solid var(--hairline); }

/* Original Blender artwork, rendered once for a lightweight page. */