/* Self-hosted fonts (latin subsets), replacing the Google Fonts CDN
   so no visitor data leaves the site. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/archivo-500.woff2") format("woff2");
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/archivo-600.woff2") format("woff2");
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/archivo-700.woff2") format("woff2");
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/archivo-800.woff2") format("woff2");
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/archivo-900.woff2") format("woff2");
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ============================================================
   Design system
   Monochrome, high-contrast, generous whitespace. One accent.
   Motion is quiet: short fades and lifts, nothing looping.
   All motion is disabled under prefers-reduced-motion.
   ============================================================ */

:root {
  --bg: #faf9f6;
  --bg-dark: #131311;
  --ink: #161613;
  --ink-soft: #5C5850;
  --ink-faint: #6f6c64; /* 4.98:1 on --bg, 5.24:1 on --paper; passes AA for small text */
  --line: #E3E0D7;
  --line-strong: #cfccc1;
  --line-dark: #3A3934;
  --accent: #c8451b;
  --paper: #ffffff;
  --max: 1120px;
  --font: 'Archivo', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --accent-hover: #A93A16;
  --accent-on-dark: #FF8057;
  /* Spectrum accents: monochrome base, colour arrives through motion.
     Palette: gold to orange to hot pink to deep indigo (fade style).
     Stops are mirrored so the sliding animation loops seamlessly. */
  --c1: #ffd45e;
  --c2: #ff8057;
  --c3: #e5537b;
  --c4: #46406e;
  --spectrum: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c3), var(--c2), var(--c1));
  /* Rounded, colour-blocked tiles: soft daylight tints of the
     spectrum stops, light enough that ink text keeps 13:1+. */
  --radius: 22px;
  --radius-sm: 14px;
  --tile-a: #ffedbe;
  --tile-b: #ffe0d4;
  --tile-c: #fadde6;
  --tile-d: #e3e0f0;
}

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

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

/* Visually hidden, available to screen readers and the outline */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: auto; scroll-padding-top: calc(var(--header-h, 72px) + 14px); }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.container {
  width: 75%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

@media (max-width: 620px) {
  .container { width: auto; padding: 0 20px; }
}

/* ---------- Type scale ---------- */

h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }

/* Two registers: inner pages get this calm-but-confident h1; the
   butter-pass section at the end of this file gives only the
   homepage hero the poster treatment. */
.display {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

h2 { font-size: clamp(2.1rem, 4.8vw, 3.6rem); font-weight: 750; letter-spacing: -0.03em; }
h3 { font-size: 1.25rem; line-height: 1.3; }

.lede {
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 38em;
}

.eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1.4rem;
}

.muted { color: var(--ink-soft); }
.small { font-size: 0.9rem; }

/* ---------- Header / nav ---------- */

.site-header {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.3s ease;
}

.site-header.scrolled { box-shadow: 0 6px 24px rgba(22, 22, 19, 0.07); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  flex-wrap: wrap;
}

.brand {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.brand-logo {
  display: block;
  height: 27px;
  width: auto;
}

/* The square "a." tile beside the wordmark: app-icon weight for the
   brand, with a small tilt of life on hover. */
.brand-mark {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  transition: transform 0.25s ease;
}

.brand:hover .brand-mark { transform: rotate(-5deg) scale(1.05); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  list-style: none;
  position: relative;
}

/* Sliding underline that glides between menu items and settles under
   the current page. js/site.js builds it (motion allowed only) and
   adds .has-indicator, which retires the per-link underline below so
   there is never a double line. A thin spectrum thread, matching the
   scroll-progress bar and eyebrow dashes. */
.nav-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
  background: var(--accent);
  transition: left 0.32s cubic-bezier(0.45, 0, 0.2, 1),
              width 0.32s cubic-bezier(0.45, 0, 0.2, 1);
}

.nav-links:not(.has-indicator) .nav-indicator { display: none; }
.nav-links.has-indicator a:not(.btn) { background-image: none; }

.nav-links a {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.nav-links a:not(.btn) {
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.2s ease;
}

.nav-links a:not(.btn):hover { background-size: 100% 1px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }
.nav-links a[aria-current="page"]:not(.btn) { background-size: 100% 1px; }

/* The nav pill keeps button colours: without this, .nav-links a
   (ink-soft text) outranks .btn (cream text) and the label vanishes
   into the ink pill until hover. */
.nav-links a.btn { color: var(--bg); }
.nav-links a.btn:hover { color: #fff; }

/* ---------- Buttons and links ---------- */

.btn {
  display: inline-block;
  padding: 14px 30px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--bg);
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 999px;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.btn:active { transform: scale(0.98); }

.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); }

.btn-sm { padding: 10px 20px; font-size: 0.88rem; }

.btn-outline {
  background: transparent;
  color: var(--ink);
}

.btn-outline { border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.arrow-link {
  font-weight: 600;
  font-size: 0.95rem;
  transition: color 0.2s ease;
}

.arrow-link::after {
  content: "\2192";
  display: inline-block;
  margin-left: 0.4em;
  transition: transform 0.22s ease;
}

.arrow-link:hover { color: var(--accent); }
.arrow-link:hover::after, a.card:hover .arrow-link::after { transform: translateX(5px); }

.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

/* ---------- Sections ---------- */

.section { padding: clamp(70px, 10vw, 120px) 0; border-top: 1px solid var(--line-strong); }
.section-tight { padding: clamp(50px, 7vw, 80px) 0; border-top: 1px solid var(--line-strong); }

/* Asymmetric section rail: eyebrow in a left column, content offset right */
.rail { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
.rail .eyebrow { margin-bottom: 0; padding-top: 0.6em; }

@media (max-width: 900px) {
  .rail { grid-template-columns: 1fr; gap: 12px; }
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 60px);
  flex-wrap: wrap;
}

/* ---------- Hero ---------- */

.hero { padding: clamp(80px, 12vw, 150px) 0; position: relative; overflow: hidden; }

.hero .container { position: relative; z-index: 1; }

/* Two soft spectrum orbs glow behind the hero type: pre-faded
   radial gradients (no filter blur, so no GPU cost), pure CSS so
   they render identically without JS. Static, not animated. */
.hero::before,
.hero::after {
  display: none;
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
}

.hero::before {
  width: 56vw;
  height: 56vw;
  top: -24vw;
  right: -14vw;
  background: radial-gradient(circle,
    rgba(255, 212, 94, 0.34) 0%,
    rgba(255, 128, 87, 0.16) 42%,
    rgba(255, 128, 87, 0) 68%);
}

.hero::after {
  width: 42vw;
  height: 42vw;
  bottom: -26vw;
  left: -12vw;
  background: radial-gradient(circle,
    rgba(229, 83, 123, 0.16) 0%,
    rgba(229, 83, 123, 0.07) 45%,
    rgba(229, 83, 123, 0) 70%);
}

/* three.js particle layer, injected by js/hero-scene.js on capable
   desktops only. Lives in the dark closing band, where the fade
   palette pops and the page changes character mid-scroll. */
.scene-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 45%, #000 40%, transparent 85%);
  mask-image: radial-gradient(120% 130% at 50% 45%, #000 40%, transparent 85%);
}

.scene-layer canvas { display: block; width: 100%; height: 100%; }

.hero .display { max-width: 12.5em; margin-bottom: 1.4rem; }
.hero .lede { margin-bottom: 2.4rem; }

/* Three-fact strip under the hero CTAs: what, how much, how fast at a
   glance, each led by a small accent dot. Scannable per the reading
   research, wraps cleanly on narrow screens. */
.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  margin-top: 28px;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
}

.hero-facts li { display: inline-flex; align-items: center; }

.hero-facts li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 11px;
  flex: none;
}

/* Subject line under the hero headline: the positioning statement,
   set heavier than the lede with a short spectrum dash lead-in. */
.hero-tagline {
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 650;
  letter-spacing: 0.005em;
  color: var(--ink);
  margin-bottom: 1.2rem;
}

.hero-tagline::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  margin-right: 12px;
  vertical-align: 0.28em;
  background: var(--accent);
}

/* The headline's full stop is the brand's warm dot: a small
   spectrum-lit circle instead of a typed period. Pure CSS, so it
   reads identically without JavaScript; GSAP only pops it in. */
.dot-period {
  display: inline-block;
  width: 0.13em;
  height: 0.13em;
  margin-left: 0.05em;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
}

/* ---------- Grids and cards ---------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

.card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 30px 28px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.25s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

a.card:hover {
  border-color: var(--ink);
}

article.card:hover { border-color: var(--ink-faint); }

/* Whole-card click targets (js/site.js wires data-href): the card
   lifts and a soft fade-palette light blooms behind it, so the
   whole tile reads as a button. */
.card[data-href] { cursor: pointer; }

.card[data-href]:hover {
  border-color: var(--ink);
}

.card[data-href]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Quirky colour moment: a thin spectrum edge slides in along the
   top of a card while it is hovered. */
.card { position: relative; overflow: hidden; }

.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--spectrum);
  background-size: 300% 100%;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.card:hover::before { transform: scaleX(0); }

.card h3 { margin-top: 2px; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card .arrow-link { margin-top: auto; }

.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }

.tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  padding: 4px 12px;
  border-radius: 999px;
}

/* Marks a build that exists and runs today, as opposed to the
   illustrative examples */
.tag-live {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Colour-blocked tiles ----------
   Grids opted in with .tile-grid trade paper-white cards for soft
   spectrum tints, cycling through the fade palette. Ink text keeps
   13:1+ contrast on every tint. */
.tile-grid > .card:nth-child(odd) { background: var(--paper); }
.tile-grid > .card:nth-child(even) { background: var(--paper); }

.tile-grid > .card .tag { border-color: rgba(22, 22, 19, 0.25); color: var(--ink-soft); }
.tile-grid > .card .card-art { background: rgba(255, 255, 255, 0.45); border-bottom-color: rgba(22, 22, 19, 0.12); }
.tile-grid > .card details { border-top-color: rgba(22, 22, 19, 0.16); }
.tile-grid > .card summary { color: var(--ink-soft); }

.tile-grid > a.card:hover,
.tile-grid > .card[data-href]:hover {
  border-color: transparent;
  transform: translateY(-6px) scale(1.01);
}

/* Filter buttons (work page) */
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }

.filter {
  font-family: var(--font);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
}

.filter { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.filter:hover { border-color: var(--ink); color: var(--ink); }
.filter.active { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Filtering animation (work page): surviving cards pop back in with
   a small staggered rise. The delay is set inline by the filter
   script; reduced motion kills all animation globally. */
@keyframes filter-pop {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.card.filter-pop { animation: filter-pop 0.45s ease both; }

/* Card headings double as the card's real link (keyboard and screen
   reader path); the whole card stays clickable via data-href. */
.card h3 a { color: inherit; transition: color 0.2s ease; }
.card:hover h3 a { color: var(--accent); }

/* Scorecard answers are full sentences, not one-word chips: soften
   the stadium radius and let wrapped lines breathe so multi-line
   answers read cleanly inside the button. */
.quiz-q .filter {
  border-radius: 16px;
  text-align: left;
  line-height: 1.45;
  padding: 10px 18px;
}

/* ---------- Who we work with ---------- */

/* One deep-experience card, then an open cloud of industry pills
   that says "any business" rather than "these three only". */
.industry-feature {
  background: var(--paper);
  border: 1px solid var(--line);
  max-width: 640px;
  margin-bottom: 24px;
}

.industry-cloud { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; }

.industry-cloud .logo-pill { font-size: 0.9rem; }

.pill-accent {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Numbered method rows ---------- */

.method-row {
  display: grid;
  grid-template-columns: 150px 1fr 1.4fr;
  gap: 24px;
  padding: 38px 0;
  border-top: 1px solid var(--line-strong);
  align-items: start;
}

.method-row:last-child { border-bottom: 1px solid var(--line-strong); }

.method-num {
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--line);
  transition: color 0.25s ease;
}

.method-row:hover .method-num {
  background: var(--spectrum);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spectrum-slide 5s linear infinite;
}

.method-row h3 { font-size: 1.35rem; }
.method-row p { color: var(--ink-soft); }

/* ---------- Pricing ---------- */

.price-card {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 36px 30px;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* The featured build card commits: full ink, cream type, gold
   arrows. The strongest block on the pricing row. */
.price-card.featured {
  background: var(--bg-dark);
  border-color: var(--bg-dark);
  color: var(--bg);
}

.price-card.featured .eyebrow { color: rgba(250, 249, 246, 0.72); }
.price-card.featured .price { color: var(--bg); }
.price-card.featured .price span { color: rgba(250, 249, 246, 0.6); }
.price-card.featured li { color: #b4b1a6; }
.price-card.featured li::before { color: var(--c1); }

.price-card.featured .btn {
  background: var(--bg);
  border-color: var(--bg);
  color: var(--ink);
}

.price {
  font-size: 2rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.price span { font-size: 0.95rem; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }

/* In the tier cards the qualifier ("fixed", "/ month") sits on its
   own line on every card, so a long range like $4,500 to $20,000
   never wraps unevenly against its neighbours. */
.price-card .price { white-space: nowrap; font-size: clamp(1.35rem, 2vw, 2rem); }
.price-card .price span { display: block; margin-top: 3px; }

.price-card ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.price-card li {
  padding-left: 22px;
  position: relative;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.price-card li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.85rem;
}

/* Who each tier suits, one plain line above the button */
.price-card .best-for {
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 4px;
}

.price-card .best-for strong { color: var(--ink); }

.price-card.featured .best-for { color: #b4b1a6; border-top-color: var(--line-dark); }
.price-card.featured .best-for strong { color: var(--bg); }

.price-card .btn { margin-top: auto; text-align: center; }

/* ---------- Pricing hover: fade ring + halo ----------
   Pure CSS. On hover a card grows a sliding fade-gradient ring
   (::before, a 2px frame behind the card's solid background) and a
   soft blurred rainbow halo around it (::after). Both pseudos sit at
   z-index -1, so the card must never create its own stacking
   context. Reduced motion freezes the slide; the static ring stays. */
.price-card { position: relative; }

.price-card::before,
.price-card::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: calc(var(--radius) + 3px);
  background: var(--spectrum);
  background-size: 300% 100%;
  animation: spectrum-slide 6s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.price-card::before { inset: -2px; }

.price-card::after {
  inset: -4px;
  filter: blur(16px);
}

.price-card:hover::before { opacity: 1; }
.price-card:hover::after { opacity: 0.5; }

/* ---------- Pricing: audit banner ----------
   The $500 front door, full width above the three tiers. Gold tile
   tint so the eye starts here; fixed build quotes only come after it. */
.audit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  background: var(--paper);
  padding: 30px 32px;
  margin-bottom: 26px;
}

.audit-banner h3 { margin: 8px 0 8px; font-size: 1.4rem; }
.audit-banner p { color: var(--ink-soft); max-width: 46em; }
.audit-copy { flex: 1 1 420px; }
.audit-copy .tag { border-color: rgba(22, 22, 19, 0.25); }

.audit-price {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.audit-price .price {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.audit-price .price span {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
}

/* ---------- Pricing comparison cards ----------
   The old text table rebuilt as a visual comparison: four option
   cards, a big cost figure on each, and tick/cross rows so the eye
   gets the story without reading. The Autonym card is the hero. */
.compare-wrap { margin-top: clamp(44px, 6vw, 72px); }

.compare-title {
  font-size: 1.35rem;
  margin-bottom: 20px;
}

.compare-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
}

.compare-card {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.compare-card h4 {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.4;
}

.compare-figure {
  display: block;
  font-size: clamp(1.4rem, 1.8vw, 1.8rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.compare-cap {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 6px;
}

.compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.compare-list li {
  position: relative;
  padding-left: 30px;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.compare-list li::before {
  position: absolute;
  left: 0;
  top: 0.05em;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
}

.compare-list li.no::before {
  content: "\2715";
  background: var(--line);
  color: var(--ink-soft);
}

.compare-list li.mid::before {
  content: "\223C";
  font-size: 0.8rem;
  background: var(--line);
  color: var(--ink-soft);
}

.compare-list li.yes::before {
  content: "\2713";
  background: var(--accent);
  color: #fff;
}

/* The Autonym card: ink outline, fade-gradient figure, ink copy */
.compare-card.compare-hero { border: 2px solid var(--ink); }

.compare-card.compare-hero h4 { color: var(--ink); }

.compare-card.compare-hero .compare-figure {
  background: linear-gradient(105deg, #f0602f, var(--c3) 50%, var(--c4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .compare-card.compare-hero .compare-figure { background: none; color: var(--ink); }
}

.compare-card.compare-hero li { color: var(--ink); font-weight: 600; }

@media (max-width: 1000px) {
  .compare-cards { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .compare-cards { grid-template-columns: 1fr; }
}

.compare-note { margin-top: 14px; }

/* ---------- Stats / expectation strip ---------- */

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.stat { padding: 34px 28px; }
.stat + .stat { border-left: 1px solid var(--line-strong); }

/* Stat numerals carry the fade palette. Pure gold is left out on
   purpose (gold on cream fails contrast), but the sweep starts at a
   bright sun-orange that still passes 3:1 for large text, so the
   numbers read as the fade pattern rather than flat maroon. */
.stat .stat-value {
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  background: linear-gradient(105deg, #f0602f, var(--c3) 50%, var(--c4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* If a browser cannot clip a background to text, the numbers must
   still exist: plain ink beats invisible facts. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .stat .stat-value { background: none; color: var(--ink); }
}

.stat .stat-label {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 6px;
}

/* Plain-case attribution line under a stat, for cited figures */
.stat .stat-note {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 10px;
  text-transform: none;
  letter-spacing: 0;
}

/* Case-study stat strips are full-bleed bands (direct children of
   main): keep the edge-to-edge rules but inset the cells so the
   numbers line up with the container instead of hugging the
   viewport edge. Cell padding is 28px, container margin is 12.5%. */
main > .stat-row {
  padding-left: calc(12.5% - 28px);
  padding-right: calc(12.5% - 28px);
}

@media (max-width: 620px) {
  main > .stat-row { padding-left: 0; padding-right: 0; }
}

/* Illustrative strips carry their caveat ON the tiles, so a skim or
   an AI snippet can never mistake the figures for measured client
   results. The full disclaimer sentence remains below the strip. */
.stats-illustrative { position: relative; }

.stats-illustrative::after {
  content: "Illustrative figures";
  position: absolute;
  top: 10px;
  right: calc(12.5% - 28px + 10px);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 10px;
  background: var(--bg);
  pointer-events: none;
}

@media (max-width: 620px) {
  .stats-illustrative::after { right: 10px; }
}

/* Four-across variant for case study metric strips */
.stat-row.stats-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .stat-row.stats-4 { grid-template-columns: 1fr 1fr; }
  .stats-4 .stat:nth-child(3) { border-left: none; }
  .stats-4 .stat:nth-child(n+3) { border-top: 1px solid var(--line-strong); }
}

@media (max-width: 620px) {
  .stat-row.stats-4 { grid-template-columns: 1fr; }
  .stats-4 .stat + .stat { border-left: none; border-top: 1px solid var(--line-strong); }
}

/* ---------- Breadcrumb path (case study pages) ---------- */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 2.2rem;
}

.crumbs a { color: var(--ink-soft); transition: color 0.2s ease; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--line-strong); }

/* ---------- Card artwork thumbnails ---------- */

.card-art {
  margin: -30px -28px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.card-art svg { display: block; width: 100%; height: auto; }

/* Wide art band on case study pages */
.cs-art {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: var(--bg);
}

/* Infographic palette: the little diagrams draw from richer, deeper
   versions of the fade stops than the UI does, so the artwork reads
   deliberate instead of washed out. Scoped to the art blocks only. */
.card-art, .cs-art {
  --c1: #eda63c;
  --c2: #c8451b;
  --c3: #b23a63;
  --c4: #514a80;
  background: #f5f2ea;
}

.cs-art svg { display: block; width: 100%; height: auto; max-height: 220px; }

/* ---------- Build sheet (closing metadata panel) ---------- */

.sheet {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px 28px;
  border-top: 1px solid var(--line-strong);
  padding-top: 28px;
  max-width: 760px;
}

.sheet dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 3px;
}

.sheet dd { color: var(--ink-soft); margin: 0; }

@media (max-width: 620px) {
  .sheet { grid-template-columns: 1fr; gap: 4px; }
  .sheet dd { margin-bottom: 14px; }
}

/* ---------- Bio / about ---------- */

.bio { display: grid; grid-template-columns: 320px 1fr; gap: clamp(32px, 6vw, 80px); align-items: start; }

.portrait {
  aspect-ratio: 4 / 5;
  background: var(--bg-dark);
  color: var(--bg);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  font-weight: 650;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

/* ---------- FAQ ---------- */

.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  padding: 22px 0;
  font-weight: 600;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq { counter-reset: faq-q; }

.faq summary { font-size: 1.12rem; align-items: baseline; }

.faq summary::before {
  counter-increment: faq-q;
  content: counter(faq-q, decimal-leading-zero);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-right: 18px;
}

.faq summary > span, .faq summary { flex: none; }
.faq summary { display: grid; grid-template-columns: auto 1fr auto; }

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ink-faint); font-weight: 400; justify-self: end; }
.faq details[open] summary::after { content: "\2212"; }
.faq details[open] summary::before { color: var(--accent); }
.faq details p { padding: 0 0 24px; color: var(--ink-soft); max-width: 44em; }

/* ---------- Contact split: booking and message side by side ---------- */

.contact-split { align-items: start; gap: clamp(28px, 4vw, 56px); }

.contact-col-title { font-size: 1.5rem; margin-bottom: 10px; }

@media (max-width: 980px) {
  .contact-split { grid-template-columns: 1fr; }
}

/* ---------- Calendly inline embed (contact page) ---------- */

.calendly-embed {
  margin-top: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

/* Holding text behind the widget: visible for the second or two the
   third-party calendar takes to arrive, covered once it paints. */
.calendly-embed::before {
  content: "Loading the calendar...";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-faint);
  font-size: 0.95rem;
}

.calendly-embed .calendly-inline-widget { position: relative; z-index: 1; }

/* ---------- Forms ---------- */

.form { display: flex; flex-direction: column; gap: 20px; max-width: 620px; }

.form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.form input, .form textarea, .form select {
  width: 100%;
  font-family: var(--font);
  font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-sm);
}

.form input:focus, .form textarea:focus, .form select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(200, 69, 27, 0.18);
}

/* ---------- Dark CTA band ---------- */

.cta-band {
  /* Layered fade-palette glows over the ink give the closing band
     real depth instead of a flat black slab: a warm peach light top
     right, a pink echo bottom left, and a deep indigo floor rising
     from below. Pure CSS, so it renders without JS; the three.js
     particles layer on top on capable desktops. */
  background:
    radial-gradient(60vw 42vw at 84% -6%, rgba(255, 128, 87, 0.16), transparent 62%),
    radial-gradient(34vw 30vw at 70% 12%, rgba(255, 212, 94, 0.07), transparent 60%),
    radial-gradient(48vw 38vw at 4% 100%, rgba(229, 83, 123, 0.14), transparent 64%),
    radial-gradient(80vw 60vw at 50% 135%, rgba(70, 64, 110, 0.55), transparent 74%),
    var(--bg-dark);
  color: var(--bg);
  padding: clamp(80px, 11vw, 130px) 0;
  position: relative;
  overflow: hidden;
}

.cta-band .container { position: relative; z-index: 1; }

.band-mark {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 26px;
}

.portrait-mark {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border: 1px solid var(--line-strong);
}
.cta-band h2 { max-width: 16em; margin-bottom: 1.2rem; }
.cta-band .lede { color: #b4b1a6; margin-bottom: 2.2rem; }
.cta-band .btn { background: var(--bg); border-color: var(--bg); color: var(--ink); }
.cta-band .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); }
.cta-band .btn-outline { background: transparent; color: var(--bg); border-color: var(--line-dark); }
.cta-band .btn-outline:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Article / prose ---------- */

.prose { max-width: 680px; }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: 1.6rem; margin-top: 2em; }
.prose h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.3em; color: var(--ink-soft); }
.prose li + li { margin-top: 0.4em; }
.prose p { color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.2em;
  color: var(--ink-soft);
}

.article-meta {
  display: flex;
  gap: 14px;
  align-items: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--bg-dark);
  color: #b4b1a6;
  padding: 72px 0;
  font-size: 0.9rem;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.site-footer .brand { color: var(--bg); }
.site-footer a:hover { color: var(--bg); }
.footer-links { display: flex; gap: 22px; list-style: none; flex-wrap: wrap; }

.footer-brand { display: inline-flex; align-items: center; gap: 11px; }
.footer-brand .brand-mark { width: 34px; height: 34px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .bio { grid-template-columns: 1fr; }
  .portrait { max-width: 320px; }
  .method-row { grid-template-columns: 96px 1fr; }
  .method-row p { grid-column: 2; }
}

@media (max-width: 620px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--line-strong); }
  .nav { justify-content: center; }
}

/* ---------- Expandable build details (work page) ---------- */

.card details { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 12px; }

.card summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}

.card summary::-webkit-details-marker { display: none; }
.card summary::after { content: " +"; }
.card details[open] summary::after { content: " \2212"; }
.card summary:hover { color: var(--accent); }

.card details ul { list-style: none; padding: 12px 0 0; display: flex; flex-direction: column; gap: 7px; }

.card details li {
  font-size: 0.9rem;
  color: var(--ink-soft);
  padding-left: 20px;
  position: relative;
}

.card details li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 0.78rem;
}

/* ---------- Tool stack pills ---------- */

.logo-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Infinite marquee variant: two identical pill sets scroll forever,
   pausing on hover. Falls back to a wrapped static row when motion
   is reduced. */
.marquee { overflow: hidden; position: relative; }

.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 70px;
  z-index: 1;
  pointer-events: none;
}

.marquee::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--bg), transparent); }

.marquee-track { display: flex; width: max-content; animation: marquee-roll 22s linear infinite; }

/* The tools marquee is draggable when JS is up: grab it and throw it */
.marquee { cursor: grab; }
.marquee.dragging { cursor: grabbing; }
.marquee .logo-pill { user-select: none; -webkit-user-select: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-set { display: flex; gap: 10px; padding-right: 10px; }

@keyframes marquee-roll {
  to { transform: translateX(-50%); }
}

.logo-pill {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 9px 20px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  border-radius: 999px;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.logo-pill:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Giant type marquee ----------
   An oversized strip of the four admin pains named in the hero lede,
   rolling as outlined type with spectrum-filled alternates. Pure CSS
   like the tool marquee: runs without JS, stops wrapped and static
   under reduced motion. */
.marquee-giant {
  overflow: hidden;
  position: relative;
  padding: clamp(30px, 4.5vw, 52px) 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}

.marquee-giant .marquee-track { animation-duration: 30s; }

.giant-word {
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  padding-right: 0.9em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink-soft);
}

.giant-word.fill {
  -webkit-text-stroke: 0px transparent;
  background: var(--spectrum);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: spectrum-slide 9s linear infinite;
}

/* ---------- Scroll reveal ----------
   .reveal is added by js/site.js only, so content is always
   visible without JavaScript. */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.reveal.in { opacity: 1; transform: none; }

/* ---------- Spectrum motion ----------
   The base stays monochrome; colour arrives through movement.
   All of it is decorative and switched off under reduced motion. */

@keyframes spectrum-slide {
  to { background-position: 300% 0; }
}

/* Pocket glow: a soft fade-palette light that lives INSIDE a small
   set of chosen blocks and follows the cursor around while you are
   over them. js/site.js tags the blocks and feeds --mx / --my on
   fine-pointer devices only. */
.glow-block { position: relative; }

.glow-block::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    circle 260px at var(--mx, 50%) var(--my, 40%),
    rgba(229, 83, 123, 0.14),
    rgba(255, 128, 87, 0.06) 45%,
    rgba(255, 128, 87, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.glow-block:hover::after { opacity: 0; }

/* On dark blocks the glow warms up and leans gold */
.portrait.glow-block::after,
.price-card.featured.glow-block::after,
.cta-band.glow-block::after {
  background: radial-gradient(
    circle 320px at var(--mx, 50%) var(--my, 40%),
    rgba(255, 212, 94, 0.16),
    rgba(229, 83, 123, 0.08) 50%,
    rgba(229, 83, 123, 0) 72%
  );
}

/* Word-split scaffolding for the hero headline: each word sits in a
   masked wrapper so it can rise into view. Built by js/motion.js
   only when GSAP is present, so the plain headline is the default. */
.hero h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.hero h1 .wi { display: inline-block; will-change: transform; }

/* SplitText line masks (linesClass: "sl"): the clip box gets a
   little extra room top and bottom, cancelled by negative margins,
   so descenders and apostrophes are never cropped by the mask while
   the visual line spacing stays exactly the same. */
.sl-mask {
  padding: 0.1em 0.06em 0.16em 0;
  margin: -0.1em -0.06em -0.16em 0;
}

/* Spectrum scroll-progress thread, pinned under the sticky header.
   Created by js/motion.js on GSAP pages only. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 60;
  background: linear-gradient(90deg, #FFD45E, #FF8057 40%, #E5537B 70%, #46406E);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

/* Animated gradient word for one key phrase in a heading */
.gradient-word {
  background: var(--spectrum);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spectrum-slide 8s linear infinite;
  padding-right: 0.06em;
  margin-right: -0.06em;
}

/* Theme: no gradient button hovers */

.cta-band .btn:not(.btn-outline):hover { color: #fff; }

/* Short spectrum dash before every eyebrow */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 3px;
  margin-right: 10px;
  vertical-align: 0.22em;
  background: var(--spectrum);
  background-size: 300% 100%;
  animation: spectrum-slide 7s linear infinite;
}

/* ---------- Floating call pill ----------
   Appears after real scroll depth on every page except contact.
   Built by js/site.js; dismissable per session. */
.sticky-cta {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.sticky-cta.show { opacity: 1; transform: none; pointer-events: auto; }

.sticky-cta .btn {
  color: #fff;
  border: 1px solid rgba(250, 249, 246, 0.5);
  box-shadow: 0 14px 38px rgba(22, 22, 19, 0.28);
}

.sticky-cta-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line-strong);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sticky-cta-close:hover { color: var(--ink); border-color: var(--ink); }

@media (max-width: 620px) {
  .sticky-cta { right: 14px; bottom: 14px; left: 14px; justify-content: flex-end; }
}

/* ---------- Film grain ----------
   A static, near-invisible noise wash that stops large flat areas
   looking sterile. Pure texture, no animation. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}

/* ---------- Smooth scroll scaffolding ----------
   js/motion.js activates ScrollSmoother on fine-pointer desktops
   only, adding .has-smoother to the body. The wrapper divs are inert
   everywhere else, and without JS the page scrolls natively. */
body.has-smoother .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.has-smoother main { padding-top: var(--header-h, 66px); }

/* ---------- Keyboard focus ---------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible { border-radius: 999px; }

/* ============================================================
   Butter pass (round 9): poster scale, the gold slab, the pinned
   method scene, the loader moment and the giant closing CTA.
   Inspired by the commitment and buttery scroll of buttermax.net,
   executed entirely in Autonym's own palette and voice.
   ============================================================ */

/* Poster register for the homepage hero only. The sitewide calm
   .display lives in the type-scale section near the top; nothing
   goes below line-height 0.98 (tighter clips descenders and
   stacks lines into each other). */
body[data-gsap] .hero .display {
  font-size: clamp(3rem, 8.8vw, 7.2rem);
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.hero .display { max-width: 11em; }

/* Loader: an ink curtain with the cream wordmark and a gold sweep.
   Hidden unless the inline head script adds html.is-loading before
   first paint, so it can never trap a no-JS or reduced-motion
   visitor. js/motion.js runs the choreography and lifts it. */
.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--bg-dark);
  align-items: center;
  justify-content: center;
}

html.is-loading .loader { display: flex; }

.loader-inner { text-align: center; overflow: hidden; }

.loader-inner img {
  height: 34px;
  width: auto;
  margin: 0 auto 18px;
}

.loader-bar {
  width: 180px;
  height: 3px;
  margin: 0 auto;
  background: rgba(250, 249, 246, 0.16);
  overflow: hidden;
}

.loader-bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-on-dark);
  transform: scaleX(0);
  transform-origin: left center;
}

/* While loading, hold the page still behind the curtain */
html.is-loading body { overflow: hidden; }

/* The fade slab: the giant pain-point marquee on a quiet
   left-to-right sweep of the fade palette's daylight tints
   (gold to peach to pink to soft indigo), echoing the skin
   gradient the whole brand is designed around without shouting.
   Ink type keeps 13:1+ contrast on every stop. */
.marquee-giant {
  background: var(--bg-dark);
  color: var(--bg);
  border-top: none;
  border-bottom: none;
  padding: clamp(64px, 9vw, 120px) 0;
}

.marquee-giant::before { background: linear-gradient(90deg, var(--bg-dark), transparent); }
.marquee-giant::after { background: linear-gradient(270deg, var(--bg-dark), transparent); }

.marquee-giant .butter-head {
  margin-bottom: clamp(30px, 4vw, 54px);
}

.marquee-giant .butter-head .eyebrow { color: var(--accent-on-dark); }
.marquee-giant .butter-head .eyebrow::before { background: var(--accent-on-dark); }
.marquee-giant .butter-head h2 { color: var(--bg); }
.marquee-giant .butter-foot .arrow-link { color: var(--bg); }

.marquee-giant .butter-head h2 {
  max-width: 14em;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
}

.marquee-giant .butter-foot {
  margin-top: clamp(30px, 4vw, 54px);
}

.marquee-giant .arrow-link:hover { color: var(--ink); opacity: 0.7; }

.marquee-giant .giant-word {
  font-size: clamp(3.4rem, 10.5vw, 9rem);
  -webkit-text-stroke: 1.5px var(--bg);
}

.marquee-giant .giant-word.fill {
  background: none;
  animation: none;
  -webkit-text-stroke: 0;
  color: var(--accent-on-dark);
  -webkit-text-fill-color: var(--accent-on-dark);
}

/* The method scene: left column pins (via ScrollTrigger, because
   position: sticky cannot live inside ScrollSmoother's transform)
   while the five steps scroll past a gold progress rail. Without
   JS or on mobile it is simply a clean two-column layout. */
.method-grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) 1.6fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.method-rail-track {
  width: 3px;
  height: 120px;
  background: var(--line);
  margin-top: 30px;
  overflow: hidden;
}

.method-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  transform: scaleY(0);
  transform-origin: top center;
}

.method-grid .method-row {
  grid-template-columns: 110px 1fr;
  gap: 6px 24px;
  padding: 28px 0;
}

/* The numeral spans both text rows and centres against them, so the
   heading and its line sit level with the big 01..05 instead of
   hanging off its bottom edge. */
.method-grid .method-row .method-num { grid-row: 1 / span 2; align-self: center; }
.method-grid .method-row p { grid-column: 2; }
.method-grid .method-row h3 { align-self: end; }

.method-row.is-active .method-num {
  background: var(--spectrum);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spectrum-slide 5s linear infinite;
}

@media (max-width: 900px) {
  .method-grid { grid-template-columns: 1fr; }
  .method-rail-track { display: none; }
}

/* Giant closing CTA: the band headline at poster scale with a
   gold key word, and a bigger primary button to land on. */
.cta-band h2 {
  font-size: clamp(2.7rem, 7.5vw, 6.4rem);
  max-width: 10.5em;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

/* The key phrase in the closing headline carries the animated fade
   gradient (bright half only: gold to peach to pink, all of which
   read clearly on the ink band). */
.cta-band .gold-word {
  background: linear-gradient(100deg, var(--c1), var(--c2) 45%, var(--c3), var(--c2), var(--c1));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: spectrum-slide 8s linear infinite;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cta-band .gold-word { background: none; color: var(--c1); }
}

.btn-huge {
  padding: 20px 44px;
  font-size: 1.12rem;
}

/* Promise strip: the three standing promises in one scannable line,
   replacing a full essay section. Gold dots, no reading burden. */
.promise-strip { padding: clamp(34px, 4.5vw, 52px) 0; }

.promises {
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 18px 40px;
  flex-wrap: wrap;
}

.promises li {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  font-weight: 650;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 12px;
}

.promises li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: radial-gradient(circle at 32% 30%, var(--c1) 0%, var(--c2) 55%, var(--c3) 100%);
}

@media (max-width: 900px) {
  .promises { flex-direction: column; }
}

/* Card headings scaled for scanning: the heading carries the card,
   the sentence under it is support. */
.card h3 { font-size: 1.35rem; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  .reveal { opacity: 1; transform: none; }
  .loader { display: none !important; }
  html.is-loading body { overflow: auto; }
  .method-rail-fill { transform: none; }
  .method-row.is-active .method-num { background: none; color: var(--accent); animation: none; }
  .glow-block::after { display: none; }
  .gradient-word { background: none; color: var(--ink); animation: none; }
  .cta-band .gold-word { background: none; color: var(--c1); animation: none; }
  .scene-layer { display: none; }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
  .marquee-set[aria-hidden="true"] { display: none; }
  .giant-word { font-size: clamp(1.6rem, 4vw, 2.6rem); }
  .giant-word.fill { background: none; color: var(--ink); -webkit-text-stroke: 0; }
  .sticky-cta { transition: none; }
}