/* Scroldev — scroldev.com
   Built from the brand book: Ink, Paper and one Ember signal; Geist for words, Geist Mono for counts;
   one easing curve; things fade, they don't stop. */

@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  /* Palette (brand book · color) */
  --ink: #0d0c0b;
  --paper: #f3eee6;
  --ember: #ff4f1a;
  --ember-deep: #e8400c;
  --ash: #9a9289;
  --stone: #5c564f;
  --rule: #2a2622;
  --pill: #211e1b;
  --panel: #161412;

  /* Type */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-display: clamp(2.75rem, 1rem + 8vw, 8.75rem); /* the hero's three short lines */
  --fs-h1: clamp(2.5rem, 1.7rem + 3vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-label: 0.8125rem;

  /* Grid (12 columns, 80px margins, 24px gutter; 20/16 on mobile) */
  --margin: clamp(20px, 5.6vw, 80px);
  --gutter: clamp(16px, 1.7vw, 24px);
  --section: clamp(96px, 10vw, 160px);
  --radius: 18px;

  /* Motion: one curve. 200ms micro, 450ms UI, 700ms sections. */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --t-micro: 200ms;
  --t-ui: 450ms;
  --t-section: 700ms;
  --intro-delay: 0.1s;
}

/* Surfaces: every section declares the ground it sits on. */
[data-surface="ink"], :root {
  --bg: var(--ink);
  --fg: var(--paper);
  --muted: #b8b0a6; /* Ash, lifted for reading at body sizes on Ink */
  --line: var(--rule);
  --accent: var(--ember);
  --card: #11100e;
}
[data-surface="paper"] {
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--stone);
  --line: rgb(13 12 11 / 0.14);
  --accent: var(--ember-deep);
  --card: #ece6dc;
}
[data-surface="ember"] {
  --bg: var(--ember);
  --fg: #fff;
  --muted: var(--ink);
  --line: rgb(255 255 255 / 0.45);
  --accent: #fff;
}

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

html {
  color-scheme: dark;
  background: var(--ink);
  color: var(--paper);
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  scrollbar-color: var(--stone) var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.5556;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* The native scrollbar, drawn as the mark: a quiet track and a pill thumb. */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--stone); border: 3px solid var(--ink); border-radius: 12px; }
::-webkit-scrollbar-thumb:hover { background: var(--ember); }

::selection { background: var(--ember); color: var(--ink); }

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { border: 0; padding: 0; min-width: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.skip {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-small);
  transform: translateY(-160%);
  transition: transform var(--t-ui) var(--ease);
}
.skip:focus { transform: none; }

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--margin);
}

section[data-surface], footer[data-surface] {
  position: relative;
  background: var(--bg);
  color: var(--fg);
}
section[data-surface="ink"], footer[data-surface="ink"] { background: transparent; }

/* The live pill grid: one fixed layer under every dark section. Content sits above it. */
.pills {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
main, .footer { position: relative; z-index: 1; }

/* The Paper section uses the light tile from the same kit. */
.agency {
  /* A sheet laid over the Ink: inset and rounded, it grows to full width as it rises (scaled in main.js). */
  margin-inline: clamp(6px, 1vw, 16px);
  border-radius: clamp(24px, 3vw, 44px);
  transform-origin: 50% 0;
  background:
    radial-gradient(70% 60% at 100% 0%, rgb(255 79 26 / 0.13), transparent 65%),
    radial-gradient(55% 45% at 0% 100%, rgb(232 64 12 / 0.07), transparent 70%),
    url("patterns/pattern-pill-grid-tile-light.svg") center top / 240px 240px repeat,
    linear-gradient(180deg, #f6f2eb, #ece3d6);
}

.section { padding-block: var(--section); }
/* Two dark sections in a row share one gap, not two: the space between them is a single section's padding. */
.section[data-surface="ink"] + .section[data-surface="ink"] { padding-top: 0; }

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

.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.385;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 400;
}

.h1, .hero-title, .statement, .manifesto, .contact-title, .pillar-title, .plan-amount, .gauge-num {
  font-weight: 500;
  font-feature-settings: "ss01" 0;
}

.h1 {
  font-size: var(--fs-h1);
  line-height: 1.0625;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
[data-surface="ink"] .h1 {
  background: linear-gradient(180deg, #fff 0%, var(--paper) 45%, #d6cbbd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.333;
  letter-spacing: -0.015em;
  font-weight: 500;
}

.section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
}
.section-label .num {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fg);
}
.section-label .num::after {
  content: "";
  width: 32px;
  height: 1px;
  background: currentColor;
  opacity: 0.4;
}

.section-head { display: grid; gap: 24px; margin-bottom: clamp(56px, 7vw, 96px); }
.section-head .h1 { max-width: 16ch; }
.section-intro { max-width: 40ch; color: var(--muted); }
.section-head--split { grid-template-columns: 1fr; align-items: end; }
.section-head--split > div { display: grid; gap: 24px; }

@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 7fr 5fr; gap: var(--gutter); }
  .section-head--split .section-intro { justify-self: end; }
}

.fineprint { margin-top: 24px; color: var(--muted); font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* The thumb as a glyph: a small pill that leads labels and tags. */
.pip {
  display: inline-block;
  width: 5px;
  height: 12px;
  flex: none;
  border-radius: 3px;
  background: var(--accent);
}
.pip--muted { background: var(--muted); opacity: 0.7; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  padding: 0 14px 0 13px;
  border: 1.5px solid color-mix(in srgb, var(--fg) 20%, transparent);
  border-radius: 999px;
  font-size: 0.6875rem;
  white-space: nowrap;
}

/* Cards (brand book · UI elements): radius 18, a 1px border, 26px padding, flat. No glass, no shadows. */
.card {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--card);
}
[data-surface="paper"] .card { border-color: rgb(13 12 11 / 0.12); }

/* Cards catch the light: with a mouse, an Ember glint follows the pointer across a card's edge, and a softer
   light across its surface (the pointer position is set in main.js). */
@media (hover: hover) and (pointer: fine) {
  .card, .brief { position: relative; isolation: isolate; }
  .card::before, .card::after, .brief::before, .brief::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--t-ui) var(--ease);
  }
  .card::before, .brief::before {
    inset: 0;
    z-index: -1;
    background: radial-gradient(460px circle at var(--mx, 50%) var(--my, 0%), rgb(255 79 26 / 0.15), transparent 65%);
  }
  .card::after, .brief::after {
    inset: -1px;
    padding: 1.5px;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), rgb(255 178 140), rgb(255 79 26 / 0.45) 40%, transparent 75%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .card:hover::before, .card:hover::after, .brief:hover::before, .brief:hover::after { opacity: 1; }
}

/* Ember light: one soft pool per dark section, alternating sides down the page so the warmth stays even. Each pool
   fades to nothing at its own edge and nothing clips it, so light passes from one section into the next without a
   seam. A section sets where its pool sits (--gx, --gy) and, rarely, its size or strength (--gs, --ga). */
.idea, .services-pin, .audience, .pillars, .process, .pricing, .contact, .footer { isolation: isolate; }
/* Pools spill up and down into the next section, never sideways: the page stays exactly as wide as the screen, so a
   phone never zooms out to fit the light. (Clip, unlike hidden, keeps the vertical spill and the services pin.) */
.idea, .services, .audience, .pillars, .process, .pricing, .contact { overflow-x: clip; }
.idea::before, .services-pin::before, .audience::before, .pillars::before, .process::before, .pricing::before,
.contact-glow, .footer-glow {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--gx, 50%);
  top: var(--gy, 50%);
  width: var(--gs, clamp(460px, 62vw, 1000px));
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 79 26 / var(--ga, 0.13)), rgb(232 64 12 / calc(var(--ga, 0.13) * 0.4)) 50%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.idea::before { --gx: 4%; --gy: 64%; }
.services-pin::before { --gx: 72%; --gy: 58%; }
.audience::before { --gx: 6%; --gy: 40%; }
.pillars::before { --gx: 94%; --gy: 50%; }
.process::before { --gx: 8%; --gy: 50%; }
.pricing::before { --gx: 50%; --gy: 36%; --gs: clamp(520px, 78vw, 1180px); }
.contact-glow { --gx: 76%; --gy: 62%; --ga: 0.2; }
/* The footer clips (nothing may hang below the page), so its pool stays inside it. */
.footer-glow { --gx: 10%; --gy: 58%; --gs: clamp(360px, 46vw, 720px); --ga: 0.12; }

/* ---------- Buttons ---------- */

.btn {
  --h: 52px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 22px 0 26px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), translate var(--t-ui) var(--ease);
}

/* With a mouse, buttons lean toward the pointer and their labels lean a little further (set in main.js). */
.btn { translate: var(--pull-x, 0px) var(--pull-y, 0px); }
.btn-label { translate: calc(var(--pull-x, 0px) * 0.4) calc(var(--pull-y, 0px) * 0.4); transition: translate var(--t-ui) var(--ease); }

/* Labels roll up like a scrolled line: the copy below slides in to replace them. */
.btn-label { display: block; height: 1.25em; overflow: hidden; line-height: 1.25em; }
.btn-label > span {
  display: block;
  text-shadow: 0 1.25em 0 currentColor;
  transition: transform var(--t-ui) var(--ease);
}
.btn:hover .btn-label > span { transform: translateY(-1.25em); }

.btn .icon { transition: transform var(--t-ui) var(--ease); }
.btn:hover .icon { transform: translate(2px, -2px); }
.btn:hover .icon:has(use[href="#i-arrow-right"]) { transform: translateX(3px); }

.btn--primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 52%, color-mix(in srgb, var(--accent) 90%, #000));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 14px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--ink);
}
.btn--primary:hover { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 70%, #fff), color-mix(in srgb, var(--accent) 92%, #fff)); }
.btn--secondary { border-color: color-mix(in srgb, var(--fg) 30%, transparent); color: var(--fg); }
.btn--secondary:hover { border-color: var(--fg); }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: var(--paper); }
.btn--sm { --h: 40px; padding: 0 16px 0 18px; font-size: 0.9375rem; gap: 8px; }
.btn--sm .icon { width: 18px; height: 18px; }

/* ---------- Progress + HUD ---------- */

.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 3px;
  pointer-events: none;
}
.progress::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: rgb(154 146 137 / 0.2);
}
.progress-thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ember);
  transform: translateX(var(--x, 0px));
  will-change: transform;
}

.hud {
  position: fixed;
  right: var(--margin);
  bottom: 24px;
  z-index: 40;
  display: none;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 16px;
  border: 1px solid color-mix(in srgb, var(--fg) 18%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease), color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
}
.hud .icon { width: 16px; height: 16px; color: var(--accent); }
.hud.is-on { opacity: 1; transform: none; }
.hud[data-on="paper"] { --bg: var(--paper); --fg: var(--ink); --muted: var(--stone); --accent: var(--ember-deep); }
.hud[data-on="ember"] { --bg: var(--ember-deep); --fg: #fff; --muted: rgb(255 255 255 / 0.8); --accent: #fff; }

@media (min-width: 900px) {
  .js .hud { display: inline-flex; }
}

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

.header {
  --fg: var(--paper);
  --accent: var(--ember);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  color: var(--fg);
  transition: transform var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.header.is-hidden { transform: translateY(-130%); }
.header[data-on="paper"] { --bg: var(--paper); --fg: var(--ink); --accent: var(--ember-deep); }
.header[data-on="ember"] { --bg: var(--ember-deep); --fg: #fff; --accent: #fff; }
.menu-open .header { --bg: var(--ink); --fg: var(--paper); --accent: var(--ember); transform: none; }

.header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 60px;
  margin-top: 12px;
  padding: 0 8px 0 20px;
  border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg, var(--ink)) 92%, transparent);
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.menu-open .header-inner { background: transparent; border-color: transparent; }

.logo { display: block; margin-right: auto; }
.logo svg { height: 26px; width: auto; aspect-ratio: 4662 / 994; overflow: visible; }
.logo-thumb, .cue-thumb { fill: var(--accent); transition: fill var(--t-ui) var(--ease); }

.nav { display: none; gap: 4px; }
.nav a {
  position: relative;
  padding: 8px 12px;
  font-size: var(--fs-small);
  opacity: 0.72;
  transition: opacity var(--t-micro) var(--ease);
}
.nav a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 12px;
  height: 3px;
  margin-left: -6px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-micro) var(--ease), transform var(--t-micro) var(--ease);
}
.nav a:hover, .nav a.is-current { opacity: 1; }
.nav a.is-current::before { opacity: 1; transform: none; }

/* Over the hero, which has its own Ember button, the header's call to action stays quiet. */
.header-cta { display: none; transition: opacity var(--t-ui) var(--ease), visibility 0s linear 0s, background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease), translate var(--t-ui) var(--ease); }
.js .header:not(.is-past-hero) .header-cta {
  background: transparent;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--fg) 30%, transparent);
  color: var(--fg);
}
.header[data-on="ember"] .header-cta { opacity: 0; visibility: hidden; transition-delay: 0s, var(--t-ui), 0s, 0s, 0s; }

.menu-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -2px;
  border: 0;
  border-radius: 999px;
  background: none;
  cursor: pointer;
}
.menu-button .icon { grid-area: 1 / 1; width: 24px; height: 24px; transition: opacity var(--t-micro) var(--ease), transform var(--t-ui) var(--ease); }
.menu-button .icon-close { opacity: 0; transform: rotate(-45deg); }
.menu-open .menu-button .icon-open { opacity: 0; transform: rotate(45deg); }
.menu-open .menu-button .icon-close { opacity: 1; transform: none; }

@media (min-width: 900px) {
  .nav { display: flex; }
  .header-cta { display: inline-flex; }
  .menu-button { display: none; }
  .logo svg { height: 26px; }
}

/* Mobile menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease);
}
.menu.is-open { opacity: 1; }
.is-locked { overflow: hidden; }
.menu[hidden] { display: none; }
.menu-inner { display: flex; flex-direction: column; justify-content: space-between; padding-top: 120px; padding-bottom: 40px; }
.menu-links li { border-top: 1px solid var(--rule); }
.menu-links li:last-child { border-bottom: 1px solid var(--rule); }
.menu-links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  font-size: clamp(2.25rem, 9vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.menu-links .label { color: var(--muted); }
.menu.is-open .menu-links a { opacity: 1; transform: none; }
.menu.is-open .menu-links li:nth-child(2) a { transition-delay: 60ms; }
.menu.is-open .menu-links li:nth-child(3) a { transition-delay: 120ms; }
.menu.is-open .menu-links li:nth-child(4) a { transition-delay: 180ms; }
.menu-foot { display: grid; gap: 20px; justify-items: start; }
.menu-mail { color: var(--muted); font-size: var(--fs-small); }

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

/* Pinned while the scroll dives into the mark; with reduced motion or no script it is one plain screen. */
.hero { position: relative; }
.js .hero { height: 300vh; }

.hero-stage {
  --out: 0;
  --say: 0;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  isolation: isolate;
}
.no-js .hero-stage { position: relative; }

.hero-mark { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
@keyframes fade-in { to { opacity: 1; } }
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes rise-fade { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* The copy leaves first, dissolving downward. */
.hero-inner {
  padding-top: 120px;
  padding-bottom: 136px;
  opacity: calc(1 - var(--out) * 1.15);
  transform: translateY(calc(var(--out) * 12vh));
}
.hero-stage.is-out .hero-inner, .hero-stage.is-out .hero-foot { pointer-events: none; visibility: hidden; }

.hero-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  color: var(--muted);
  animation: rise-fade var(--t-section) var(--ease) both;
  animation-delay: var(--intro-delay);
}

.hero-title {
  /* Three beats, one per line, as big as the width allows and never taller than the screen can hold. */
  font-size: min(var(--fs-display), 13vh);
  line-height: 0.98;
  letter-spacing: -0.045em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-title .line > span { display: inline-block; animation: rise 1s var(--ease) both; animation-delay: calc(var(--intro-delay) + 0.08s); }
.hero-title .line:nth-child(2) > span { animation-delay: calc(var(--intro-delay) + 0.2s); }
.hero-title .line:nth-child(3) > span {
  animation-delay: calc(var(--intro-delay) + 0.32s);
  /* "for eternity." warms toward Ember, the way the track fades. */
  background: linear-gradient(95deg, var(--paper) 35%, #ffb594 72%, var(--ember));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-lede {
  max-width: 33ch;
  margin-top: 28px;
  color: var(--muted);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.5;
  animation: rise-fade var(--t-section) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + 0.35s);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
  animation: rise-fade var(--t-section) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + 0.45s);
}

.hero-offer {
  margin-top: 28px;
  color: var(--muted);
  animation: rise-fade var(--t-section) var(--ease) both;
  animation-delay: calc(var(--intro-delay) + 0.55s);
}

.hero-foot {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 28px;
  color: var(--muted);
  opacity: calc(1 - var(--out) * 3);
}
.hero-foot > * { animation: fade-in var(--t-section) var(--ease) both; animation-delay: calc(var(--intro-delay) + 0.6s); }

.cue { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); }
.cue .label { color: var(--muted); transition: color var(--t-micro) var(--ease); }
.cue:hover .label { color: var(--paper); }
.cue-mark { width: 15px; height: 24px; overflow: visible; }
.cue-thumb { animation: cue 2.4s var(--ease) infinite; }
@keyframes cue {
  0% { transform: none; opacity: 1; }
  60% { transform: translateY(18px); opacity: 1; }
  80% { transform: translateY(18px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Inside the thumb: an Ember chapter page, white on Ember like the brand book's openers, the promise centred on it. */
.hero-dive {
  position: absolute;
  inset: 0;
  display: flex;
  color: #fff;
  opacity: var(--say);
  pointer-events: none;
}
.hero-dive-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-top: 72px;
  padding-bottom: 40px;
  text-align: center;
}
.hero-dive-label { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(24px, 5vh, 48px); color: rgb(255 255 255 / 0.88); }
.hero-dive-label .pip { background: #fff; }
.hero-dive-line {
  /* Sized so "earns the next." always fits the width, and both lines fit the height. */
  font-size: max(2.5rem, min(13.5vw, 19vh, 10rem));
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.05em;
  text-wrap: balance;
  transform: translateY(calc((1 - var(--say)) * 48px));
}
.hero-dive-line span { display: block; }
.hero-dive-sub {
  margin-top: 28px;
  color: rgb(255 255 255 / 0.92);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  transform: translateY(calc((1 - var(--say)) * 24px));
}
.no-js .hero-dive { display: none; }

@media (min-width: 900px) {
  .hero-inner { padding-bottom: 128px; }
}

/* Short laptop screens: the three-line headline steps down and the hero tightens, so it clears the header. */
@media (min-width: 900px) and (max-height: 820px) {
  .hero-title { font-size: min(var(--fs-display), 12vh); }
  .hero-inner { padding-bottom: 96px; }
  .hero-lede { margin-top: 20px; }
  .hero-actions { margin-top: 26px; }
  .hero-offer { margin-top: 20px; }
}

/* Wide, short screens can't give three lines their size (the height runs out first and leaves the width empty), so
   there the first two beats share a line and the headline grows into the width instead. Squarer screens and phones
   keep three lines. */
@media (min-width: 900px) and (min-aspect-ratio: 17/10) {
  .hero-title { font-size: min(clamp(3.25rem, 1.2rem + 5.4vw, 8rem), 15vh); }
  .hero-title .line:nth-child(-n + 2) { display: inline-block; }
}

/* Phones: Display at 56 (the brand book's mobile size), and the copy sits low so the mark has the top of the screen.
   Everything shares one centre line: the mark above (on the canvas), then the words and the calls to action. */
@media (max-width: 899px) {
  .hero-title { font-size: clamp(2.75rem, 14.4vw, 3.5rem); }
  .hero-inner { padding-bottom: 92px; text-align: center; }
  .hero-label { justify-content: center; margin-bottom: 20px; }
  .hero-lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-foot { justify-content: center; }
  .hero-offer { text-wrap: balance; }
  .hero-lede { margin-top: 20px; }
  .hero-actions { margin-top: 24px; }
  .hero-offer { margin-top: 20px; }
  /* Both calls to action share one row on a standard phone. */
  .hero-actions { gap: 10px; }
  .hero-actions .btn { --h: 50px; gap: 8px; padding: 0 18px 0 20px; font-size: 1rem; }
  .hero-actions .btn .icon { width: 18px; height: 18px; }
}
/* Tablets in portrait use the phone layout with room to spare: the headline grows into it. */
@media (min-width: 600px) and (max-width: 899px) {
  .hero-title { font-size: clamp(3.5rem, 10vw, 5.5rem); }
}

@media (max-height: 720px) and (max-width: 899px) {
  .hero-title { font-size: clamp(2.375rem, 10.5vw, 3rem); }
  .hero-inner { padding-bottom: 88px; }
  .hero-lede { margin-top: 16px; }
  .hero-actions { margin-top: 20px; }
}


/* ---------- 01 The idea ---------- */

.idea { padding-bottom: clamp(64px, 8vw, 120px); }

.manifesto {
  max-width: 21ch;
  margin-top: 40px;
  font-size: clamp(2.125rem, 1.2rem + 3.9vw, 5.25rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: pretty;
}
.manifesto .w { color: rgb(243 238 230 / 0.45); transition: color var(--t-micro) linear; }
.manifesto .w.is-lit { color: var(--paper); }

.idea-foot {
  display: grid;
  gap: 32px;
  margin-top: clamp(56px, 7vw, 104px);
}
.idea-body { max-width: 44ch; color: var(--muted); }
.idea-quote { max-width: 26ch; font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500; }
.idea-quote span { color: var(--muted); }

@media (min-width: 900px) {
  .idea-foot { grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: end; }
  .idea-body { grid-column: 1 / span 5; }
  .idea-quote { grid-column: 7 / span 6; }
}

/* ---------- 02 What we build ---------- */

.services-pin { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 6vw, 72px); padding-block: var(--section); }
.services-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.services-intro { display: grid; gap: 24px; }
.services-head .h1 { max-width: 13ch; }
.services-meter { display: none; }

.services-track { display: grid; gap: 72px; max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
.service { --d: 1; display: grid; gap: 28px; align-content: start; }
.service-copy { display: grid; gap: 14px; max-width: 44ch; }
.service-copy .tag { justify-self: start; color: var(--fg); }
.service-copy h3 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.025em; }
.service-copy p:last-child { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }

@media (min-width: 900px) {
  .services-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    padding-block: 72px 24px;
    align-content: center;
    gap: clamp(28px, 5vh, 56px);
    overflow-x: clip; /* the panels slide past sideways; the light may spill up and down */
  }
  .services-meter { display: grid; gap: 14px; justify-items: end; color: var(--muted); }
  .meter-track { position: relative; width: 200px; height: 4px; border-radius: 2px; background: rgb(243 238 230 / 0.16); }
  .meter-thumb {
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 6px;
    border-radius: 3px;
    background: var(--ember);
    transform: translateX(var(--mx, 0px));
  }
  .services-track {
    display: flex;
    gap: clamp(24px, 3vw, 48px);
    width: max-content;
    max-width: none;
    margin: 0;
    padding-inline: max(var(--margin), calc((100vw - 1440px) / 2 + var(--margin)));
    will-change: transform;
  }
  .service { flex: none; width: min(40vw, calc((100vh - 500px) * 1.45), 640px); }
}

/* Demo frames: the track's shape, rounded at the top and fading out at the bottom. */
.service-demo {
  --r: clamp(24px, 3vw, 48px);
  position: relative;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  background: radial-gradient(70% 50% at 50% 0%, rgb(255 79 26 / 0.09), transparent 70%), rgb(13 12 11 / 0.4);
  -webkit-mask-image: linear-gradient(#000 76%, transparent);
  mask-image: linear-gradient(#000 76%, transparent);
}
.service-demo .label { font-size: 0.6875rem; }

/* 1 · Motion: a small page scrolls, and each block arrives as it's reached. */
.demo-motion { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 18px 18px 0; }
.mini-bar { display: flex; align-items: center; gap: 6px; }
.mini-bar i { width: 8px; height: 8px; border-radius: 50%; background: rgb(243 238 230 / 0.16); }
.mini-bar span { width: 40%; height: 8px; margin-left: 12px; border-radius: 4px; background: rgb(243 238 230 / 0.08); }
.mini-view { position: relative; overflow: hidden; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; background: var(--ink); }
.mini-page { display: grid; gap: 14px; padding: 9% 12% 0 10%; transform: translateY(calc(var(--d) * -40%)); }
.mini-hero { display: grid; gap: 8px; padding-bottom: 8px; }
.mini-hero b { display: block; height: 14px; border-radius: 4px; background: var(--paper); }
.mini-hero b:first-child { width: 78%; }
.mini-hero b:nth-child(2) { width: 52%; }
.mini-hero s { display: block; width: 64%; height: 6px; margin-top: 4px; border-radius: 3px; background: rgb(243 238 230 / 0.25); }
.mini-hero em { display: block; width: 24%; height: 16px; margin-top: 6px; border-radius: 8px; background: var(--ember); }
.mini-row, .mini-arch, .mini-lines {
  --k: clamp(0, (var(--d) - var(--t)) * 5, 1);
  opacity: var(--k);
  transform: translateY(calc((1 - var(--k)) * 20px));
}
.mini-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.mini-row span { height: 46px; border: 1px solid var(--line); border-radius: 8px; background: rgb(243 238 230 / 0.06); }
.mini-arch { height: 96px; border-radius: 64px 64px 0 0; background: linear-gradient(rgb(255 79 26 / 0.32), transparent); }
.mini-lines { display: grid; gap: 6px; }
.mini-lines b { display: block; height: 6px; border-radius: 3px; background: rgb(243 238 230 / 0.2); }
.mini-lines b:nth-child(2) { width: 82%; }
.mini-lines b:nth-child(3) { width: 64%; }
.mini-scroll { position: absolute; top: 8px; right: 6px; bottom: 8px; width: 3px; border-radius: 2px; background: rgb(243 238 230 / 0.1); }
.mini-scroll span { position: absolute; left: 0; top: calc(var(--d) * 60%); width: 3px; height: 26%; border-radius: 2px; background: var(--ember); }

/* 2 · Design: the layout assembles on the 12-column grid, one piece at a time. */
.blueprint {
  position: absolute;
  inset: 16% 8% 0;
  border-right: 1px solid rgb(243 238 230 / 0.07);
  background:
    repeating-linear-gradient(90deg, rgb(243 238 230 / 0.07) 0 1px, transparent 1px calc(100% / 12)),
    repeating-linear-gradient(180deg, rgb(243 238 230 / 0.04) 0 1px, transparent 1px 24px);
}
.piece {
  --k: clamp(0, (var(--d) - var(--t)) * 4, 1);
  position: absolute;
  opacity: var(--k);
  transform: translate(calc(var(--ox) * (1 - var(--k))), calc(var(--oy) * (1 - var(--k))));
}
.piece-h1 { top: 22%; left: 8%; width: 50%; height: 9%; border-radius: 6px; background: var(--paper); }
.piece-h2 { top: 34%; left: 8%; width: 34%; height: 9%; border-radius: 6px; background: var(--paper); }
.piece-text { top: 50%; left: 8%; display: grid; gap: 6px; width: 38%; }
.piece-text b { display: block; height: 5px; border-radius: 3px; background: rgb(243 238 230 / 0.3); }
.piece-text b:nth-child(3) { width: 70%; }
.piece-arch { top: 20%; right: 8%; width: 33%; height: 64%; border: 1px solid rgb(243 238 230 / 0.25); border-bottom: 0; border-radius: 999px 999px 0 0; background: linear-gradient(rgb(243 238 230 / 0.12), transparent); }
.piece-btn { top: 66%; left: 8%; width: 18%; height: 8%; border-radius: 999px; background: var(--ember); }
.demo-caption { position: absolute; top: 7%; left: 8%; color: var(--muted); }

/* 3 · Speed: the gauge fills to the score we build to. */
.demo-speed { display: grid; align-content: center; justify-items: center; padding-bottom: 10%; }
.gauge { width: 64%; overflow: visible; }
.gauge path { fill: none; stroke-width: 10; stroke-linecap: round; }
.gauge-track { stroke: rgb(243 238 230 / 0.1); }
.gauge-fill { stroke: var(--ember); stroke-dasharray: 1 2; stroke-dashoffset: calc(1 - var(--d) * 0.9); }
.gauge-num {
  margin-top: -16%;
  font-size: clamp(3rem, 1.5rem + 3vw, 5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.gauge-num small { margin-left: 2px; color: var(--muted); font-size: 0.5em; vertical-align: top; }
.gauge-label { margin-top: 12px; color: var(--muted); }

/* 4 · CMS: a headline is retyped and published. */
.demo-cms { display: grid; padding: 9% 9% 0; }
.cms { display: grid; gap: 10px; align-content: start; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink); }
.cms-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); }
.cms-status { transition: color var(--t-ui) var(--ease); }
.cms.is-published .cms-status { color: var(--ember); }
.cms-label { color: var(--muted); }
.cms-field { display: flex; align-items: center; min-height: 42px; padding: 8px 12px; border: 1px solid rgb(243 238 230 / 0.2); border-radius: 8px; font-size: clamp(0.875rem, 0.7rem + 0.5vw, 1.125rem); font-weight: 500; }
.cms-field--short { color: var(--muted); font-weight: 400; }
.caret { width: 1.5px; height: 1.1em; margin-left: 2px; background: var(--ember); animation: blink 1s steps(1) infinite; }
.cms-publish {
  justify-self: end;
  padding: 8px 16px;
  border: 1px solid rgb(243 238 230 / 0.3);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
}
.cms.is-published .cms-publish { border-color: var(--ember); background: var(--ember); color: var(--ink); }
@keyframes blink { 50% { opacity: 0; } }

/* 5 · Weeks: the three packages' real timelines on a four-week axis. */
.demo-weeks { display: grid; align-content: start; gap: 24px; padding: 11% 8% 0; }
.weeks-axis { display: grid; grid-template-columns: repeat(4, 1fr); color: var(--muted); }
.weeks-axis span { padding-left: 8px; border-left: 1px solid var(--line); }
.weeks-bars { display: grid; gap: 20px; }
.bar { --k: clamp(0, (var(--d) - var(--t)) * 2.5, 1); display: grid; gap: 8px; }
.bar p { display: flex; justify-content: space-between; gap: 8px; width: calc(var(--len) * 100%); min-width: 136px; color: var(--fg); opacity: calc(0.35 + var(--k) * 0.65); }
.bar p span:last-child { color: var(--muted); }
.bar-track { position: relative; height: 6px; border-radius: 3px; background: rgb(243 238 230 / 0.08); }
.bar-fill { position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--len) * var(--k) * 100%); border-radius: 3px; background: var(--paper); }
.bar-fill::after { content: ""; position: absolute; top: -3px; right: -3px; width: 6px; height: 12px; border-radius: 3px; background: var(--ember); opacity: var(--k); }

/* ---------- 03 Agency (Paper) ---------- */

.statement {
  max-width: 24ch;
  margin-top: 40px;
  font-size: clamp(1.875rem, 1rem + 3vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: pretty;
}
.statement em { font-style: normal; color: var(--accent); }

.promises { display: grid; gap: 40px; margin-top: clamp(64px, 8vw, 120px); }
.promises li { display: grid; gap: 12px; align-content: start; padding-top: 24px; border-top: 1px solid var(--line); }
.promises .label { display: flex; gap: 12px; color: var(--muted); }
.promises .label .num { color: var(--fg); }
.promises p:last-child { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; max-width: 36ch; }

.are { display: grid; gap: var(--gutter); margin-top: 64px; }
.are .card { display: grid; gap: 14px; align-content: start; background: transparent; }
.are .label { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.are .card--quiet { border-style: dashed; }
.are .card--quiet p:last-child { color: var(--muted); }

@media (min-width: 900px) {
  .promises { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
  .are { grid-template-columns: 1fr 1fr; }
}

/* ---------- Who we serve ---------- */

.audience-grid { display: grid; gap: var(--gutter); }
.audience-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 12px;
  transition: border-color var(--t-ui) var(--ease), background-color var(--t-ui) var(--ease);
}
.audience-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; }
.audience-top .label { color: var(--muted); }
.audience-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 1px solid rgb(243 238 230 / 0.13);
  border-radius: 16px;
  background: radial-gradient(circle at 30% 20%, rgb(255 79 26 / 0.3), rgb(255 79 26 / 0.06) 65%), rgb(243 238 230 / 0.04);
  color: var(--paper);
  transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease);
}
.audience-icon .icon { width: 24px; height: 24px; }
.audience-card h3 { max-width: 14ch; }
.audience-card > p { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.audience-tags { display: flex; flex-wrap: wrap; gap: 6px; align-self: end; margin-top: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.audience-tags li {
  padding: 4px 10px;
  border: 1px solid rgb(243 238 230 / 0.14);
  border-radius: 999px;
  background: rgb(243 238 230 / 0.04);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.audience-card:hover { border-color: rgb(243 238 230 / 0.26); background-color: var(--panel); }
.audience-card:hover .audience-icon { border-color: rgb(255 79 26 / 0.6); }

.say-no { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 40px; }
.say-no .tag { color: var(--muted); }
.say-no ul { display: grid; gap: 6px; width: 100%; color: var(--muted); font-size: var(--fs-small); }

@media (min-width: 640px) {
  .say-no ul { display: flex; flex-wrap: wrap; gap: 8px 0; width: auto; }
  .say-no li + li::before { content: "·"; margin: 0 12px; opacity: 0.6; }
}

@media (min-width: 640px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .audience-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Pillars ---------- */

.pillar-list { position: relative; border-bottom: 1px solid var(--rule); }
.pillar {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 28px 0 32px;
  border-top: 1px solid var(--rule);
}
.pillar-num { color: var(--muted); transition: color var(--t-ui) var(--ease); }
.pillar-title {
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: rgb(243 238 230 / 0.45);
  transition: color var(--t-ui) var(--ease);
}
.pillar-text { max-width: 38ch; color: var(--muted); opacity: 0.75; transition: opacity var(--t-ui) var(--ease); }
.pillar::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 64px;
  height: 3px;
  border-radius: 2px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-ui) var(--ease);
}
.pillar.is-active .pillar-title { color: var(--paper); }
.pillar.is-active .pillar-text { opacity: 1; }
.pillar.is-active .pillar-num { color: var(--paper); }
.pillar.is-active::before { transform: none; }
.no-js .pillar-title, .is-static .pillar-title { color: var(--paper); }
.no-js .pillar-text, .is-static .pillar-text { opacity: 1; }

@media (min-width: 900px) {
  .pillar { grid-template-columns: repeat(12, 1fr); gap: var(--gutter); align-items: baseline; padding: 40px 0 44px; }
  .pillar-num { grid-column: 1 / span 2; }
  .pillar-title { grid-column: 3 / span 6; }
  .pillar-text { grid-column: 9 / span 4; }
}

/* ---------- 04 How Scroldev works ----------
   Each step has a small demo of that part of the work. A demo is driven by --p (0 → 1, set in main.js) and each
   piece in it arrives at its own --t, one after another. Phones and tablets: every demo sits in its own frame under
   its step. Desktop: the demos share one pinned stage beside the steps (see the media query below). */

.flow { display: grid; gap: 28px; }
.flow-stage { display: none; }
.flow-step { display: grid; gap: 12px; align-content: start; }
.flow-num { color: var(--muted); }
.flow-step h3 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.025em; }
.flow-step h3 + p { max-width: 38ch; color: var(--muted); font-size: var(--fs-small); line-height: 1.6; }
.flow-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.flow-meta .pip { background: var(--muted); opacity: 0.7; transition: background-color var(--t-ui) var(--ease), opacity var(--t-ui) var(--ease); }

/* The frame: a dark card lit from the top, with the live pill grid showing through. */
.flow-demo, .flow-stage {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 28px;
  background: radial-gradient(70% 50% at 50% 0%, rgb(255 79 26 / 0.11), transparent 70%), rgb(13 12 11 / 0.4);
}
.flow-demo {
  --p: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 12px;
  margin-bottom: 40px;
  padding: clamp(16px, 4vw, 40px);
  font-size: 0.875rem;
  line-height: 1.5;
}
.flow-demo:last-child { margin-bottom: 0; }
.flow-demo > * { width: 100%; max-width: 460px; }
.demo-build > * { max-width: 580px; }
.flow-demo .label { font-size: 0.6875rem; }

/* UI panels inside the demos: flat, a hairline border, no shadows. */
.ui {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgb(243 238 230 / 0.1);
  border-radius: 16px;
  background: #151311;
}
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ui-head > .label { color: var(--muted); }
.ui-title { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.ui-title .icon { width: 16px; height: 16px; color: var(--muted); }

/* Two states in one place: the first gives way to the second once --p passes --at. */
.swap { --s: clamp(0, (var(--p) - var(--at, 0.5)) * 30, 1); display: grid; justify-items: end; }
.swap > span { grid-area: 1 / 1; opacity: calc(1 - var(--s)); transition: opacity var(--t-micro) linear; }
.swap > span:last-child { opacity: var(--s); color: var(--fg); }
.status > span { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border: 1px solid rgb(243 238 230 / 0.14); border-radius: 999px; }
.status > span:last-child { border-color: rgb(255 79 26 / 0.45); background: rgb(255 79 26 / 0.1); color: var(--ember); }

/* A row that checks itself off: waiting (a ring), working (the Ember thumb), done (a Paper check). */
.tick { position: relative; width: 16px; height: 16px; flex: none; border: 1px solid rgb(243 238 230 / 0.22); border-radius: 50%; }
.tick::before, .tick::after { content: ""; position: absolute; }
.tick::before { left: 5px; top: 3px; width: 4px; height: 8px; border-radius: 2px; background: var(--ember); opacity: calc(var(--on) - var(--done)); }
.tick::after {
  inset: -1px;
  border-radius: 50%;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D0C0B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat;
  opacity: var(--done);
  scale: calc(0.6 + var(--done) * 0.4);
}
.run-steps li, .checks li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  background: rgb(243 238 230 / calc((var(--on) - var(--done)) * 0.06));
  color: rgb(243 238 230 / calc(0.42 + var(--on) * 0.58));
}
.run-steps li { --on: clamp(0, (var(--p) - var(--a)) * 40, 1); --done: clamp(0, (var(--p) - var(--b)) * 40, 1); }
.checks li { --on: clamp(0, (var(--p) - var(--t)) * 30, 1); --done: clamp(0, (var(--p) - var(--t) - 0.07) * 30, 1); }
.run-steps .label, .checks .label { color: var(--muted); opacity: calc(0.4 + var(--done) * 0.6); }
.run-steps, .checks { display: grid; gap: 2px; }

/* 1 · Discover: the brief types itself out, then the kickoff's answers line up under it. */
.ui-field { min-height: 7.4em; padding: 12px 14px; border: 1px solid rgb(243 238 230 / 0.08); border-radius: 12px; background: var(--ink); font-size: 0.9375rem; line-height: 1.55; }
.ui-field .caret { display: inline-block; vertical-align: -0.2em; scale: calc(1 - clamp(0, (var(--p) - 0.52) * 30, 1)); }
.brief-out { position: relative; display: grid; gap: 6px; padding-left: 18px; }
.brief-out::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(rgb(255 79 26 / 0.55), rgb(243 238 230 / 0.1) 60%, transparent); opacity: clamp(0, (var(--p) - 0.56) * 14, 1); }
.brief-out li {
  --k: clamp(0, (var(--p) - var(--t)) * 14, 1);
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 7px 12px;
  border: 1px solid rgb(243 238 230 / 0.08);
  border-radius: 12px;
  background: #131110;
  opacity: var(--k);
  translate: calc((1 - var(--k)) * -10px) 0;
}
.brief-out li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 7px; height: 7px; margin-top: -4px; border: 1px solid rgb(255 79 26 / 0.6); border-radius: 50%; background: var(--ink); }
.brief-out .label { color: var(--muted); }
.brief-out .is-key { border-color: rgb(255 79 26 / 0.4); }
.brief-out .is-key span:last-child { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.brief-out .is-key span:last-child::before { content: ""; width: 4px; height: 10px; border-radius: 2px; background: var(--ember); }
@media (max-width: 440px) {
  .brief-out li { grid-template-columns: 1fr; gap: 2px; padding-block: 9px; }
}
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips b { padding: 0 7px; border: 1px solid rgb(243 238 230 / 0.14); border-radius: 999px; font-size: 0.75rem; font-weight: 400; }

/* 2 · Design: the homepage locks into the 12-column grid, piece by piece; then the other pages follow its system. */
.demo-board .swap { --at: 0.52; }
.board {
  position: relative;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  border: 1px solid rgb(243 238 230 / 0.08);
  border-radius: 10px;
  background: repeating-linear-gradient(90deg, rgb(243 238 230 / 0.055) 0 1px, transparent 1px calc(100% / 12)) 6% 0 / 88% 100% no-repeat, var(--ink);
}
.blk {
  --k: clamp(0, (var(--p) - var(--t)) * 10, 1);
  position: absolute;
  border-radius: 4px;
  opacity: var(--k);
  transform: translate(calc(var(--ox) * (1 - var(--k))), calc(var(--oy) * (1 - var(--k))));
  /* An Ember outline while a piece is moving, gone once it locks into place. */
  outline: 1px dashed rgb(255 79 26 / calc((1 - var(--k)) * 2));
  outline-offset: 3px;
}
.blk-nav { top: 6%; left: 6%; right: 6%; height: 4%; background: rgb(243 238 230 / 0.12); }
.blk-h1 { top: 20%; left: 6%; width: 46%; height: 9%; background: var(--paper); }
.blk-h2 { top: 32%; left: 6%; width: 32%; height: 9%; background: var(--paper); }
.blk-text { top: 48%; left: 6%; display: grid; gap: 5px; width: 36%; }
.blk-text b { height: 4px; border-radius: 2px; background: rgb(243 238 230 / 0.3); }
.blk-text b:last-child { width: 70%; }
.blk-btn { top: 63%; left: 6%; width: 15%; height: 7%; border-radius: 999px; background: var(--ember); }
.blk-arch { top: 17%; right: 6%; width: 32%; height: 56%; border: 1px solid rgb(243 238 230 / 0.25); border-bottom: 0; border-radius: 999px 999px 0 0; background: linear-gradient(rgb(255 79 26 / 0.22), transparent); }
.blk-row { top: 79%; left: 6%; right: 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 15%; }
.blk-row i { border: 1px solid rgb(243 238 230 / 0.1); border-radius: 4px; background: rgb(243 238 230 / 0.05); }
.system-label { color: var(--muted); opacity: clamp(0, (var(--p) - 0.6) * 14, 1); }
.pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pages li { --k: clamp(0, (var(--p) - var(--t)) * 14, 1); display: grid; gap: 6px; opacity: var(--k); translate: 0 calc((1 - var(--k)) * 10px); }
.pages .label { color: var(--muted); }
.page { display: grid; align-content: start; gap: 4px; aspect-ratio: 4 / 3; overflow: hidden; padding: 9px; border: 1px solid rgb(243 238 230 / 0.1); border-radius: 8px; background: var(--ink); }
.page b { width: 70%; height: 5px; border-radius: 2px; background: var(--paper); }
.page i { height: 12px; border: 1px solid rgb(243 238 230 / 0.1); border-radius: 3px; background: rgb(243 238 230 / 0.05); }
.page s { height: 18px; border-radius: 18px 18px 0 0; background: linear-gradient(rgb(243 238 230 / 0.16), transparent); }
.page u { width: 40%; height: 6px; border-radius: 3px; background: rgb(243 238 230 / 0.3); }

/* 3 · Build: a production build in a window, each step ticking off, with its activity log. */
.ui-window { container-type: inline-size; gap: 0; padding: 0; overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px 0 14px; border-bottom: 1px solid rgb(243 238 230 / 0.08); color: var(--muted); }
.win-dots { display: flex; gap: 5px; }
.win-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgb(243 238 230 / 0.14); }
.win-bar .swap { margin-left: auto; }
.demo-build .swap { --at: 0.93; }
.win-body { display: grid; }
.run { display: grid; gap: 10px; padding: 16px 14px 14px; }
.run-title { padding-inline: 2px; font-weight: 500; }
.run-bar { position: relative; height: 3px; margin: 2px 2px 6px; border-radius: 2px; background: rgb(243 238 230 / 0.08); }
.run-bar span { position: absolute; inset: 0 auto 0 0; width: calc(clamp(0, var(--p) / 0.9, 1) * 100%); border-radius: 2px; background: var(--paper); }
.log { display: grid; align-content: start; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid rgb(243 238 230 / 0.08); }
.log > .label { color: var(--muted); }
.log ol { display: grid; gap: 7px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.02em; }
.log li { --k: clamp(0, (var(--p) - var(--t)) * 20, 1); display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px; color: var(--muted); white-space: nowrap; opacity: var(--k); }
.log b { color: var(--paper); font-weight: 400; }
.log li:last-child b { color: var(--ember); }
@container (min-width: 520px) {
  .win-body { grid-template-columns: minmax(0, 1fr) 196px; }
  .log { border-top: 0; border-left: 1px solid rgb(243 238 230 / 0.08); }
}

/* 4 · Launch: the checklist ticks off, the site goes live and the scroll count starts. */
.demo-launch .swap { --at: 0.64; }
.live { --d: clamp(0, (var(--p) - 0.7) / 0.3, 1); opacity: clamp(0, (var(--p) - 0.62) * 12, 1); translate: 0 calc((1 - clamp(0, (var(--p) - 0.62) * 12, 1)) * 12px); }
.flow-demo .url { text-transform: none; letter-spacing: 0.02em; }
.live .url { flex: 1; min-width: 0; padding: 3px 10px; border-radius: 6px; background: rgb(243 238 230 / 0.05); }
.live-count { color: var(--paper); font-variant-numeric: tabular-nums; text-transform: none; white-space: nowrap; }
.live .mini-view { height: 128px; border: 0; border-radius: 0; }
.live .mini-page { padding: 18px 22% 0 8%; }

/* Desktop: the steps scroll past a pinned stage. The step being read is lit and its demo shows on the stage. Only
   once the motion layer is running (.ready); without it, the phone layout shows every demo finished. */
@media (min-width: 1000px) and (min-height: 640px) {
  .ready .flow {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    /* The last row is empty: it keeps the stage pinned while the launch demo finishes. */
    grid-template-rows: repeat(4, auto) 32vh;
    gap: 0 clamp(48px, 6vw, 112px);
  }
  .ready .flow-step {
    grid-column: 1;
    min-height: 76vh;
    align-content: center;
    opacity: 0.32;
    transition: opacity var(--t-ui) var(--ease);
  }
  .ready .flow-step.is-on { opacity: 1; }
  .ready .flow-step.is-on .flow-meta .pip { background: var(--ember); opacity: 1; }
  .ready .flow-stage, .ready .flow-demo {
    --stage-h: min(640px, calc(100vh - 140px));
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: start;
    position: sticky;
    top: calc(50vh - var(--stage-h) / 2 + 28px);
    height: var(--stage-h);
  }
  .ready .flow-stage { display: block; }
  .ready .flow-demo {
    margin: 0;
    padding: 40px 40px 64px;
    border-color: transparent;
    background: none;
    opacity: 0;
    visibility: hidden;
    translate: 0 16px;
    transition: opacity var(--t-ui) var(--ease), translate var(--t-ui) var(--ease), visibility 0s linear var(--t-ui);
  }
  .ready .flow-demo.is-on { opacity: 1; visibility: visible; translate: none; transition-delay: 120ms, 120ms, 0s; }
}
.flow-meter { position: absolute; left: 50%; bottom: 24px; display: flex; align-items: center; gap: 14px; color: var(--muted); translate: -50% 0; }
.flow-meter .meter-track { position: relative; width: 96px; height: 4px; border-radius: 2px; background: rgb(243 238 230 / 0.16); }
.flow-meter .meter-thumb { position: absolute; top: -1px; left: 0; width: 24px; height: 6px; border-radius: 3px; background: var(--ember); transform: translateX(calc(var(--step, 0) * 24px)); transition: transform var(--t-ui) var(--ease); }

.timelines { display: grid; gap: 12px; margin-top: clamp(64px, 8vw, 104px); }
.timelines .card { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 22px 26px; }
.timelines .label { color: var(--muted); }
.timelines .card p:last-child { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; }
.card--lit, .plan--lit {
  border-color: transparent;
  background:
    radial-gradient(130% 90% at 50% -20%, rgb(255 79 26 / 0.26), rgb(255 79 26 / 0.06) 55%, transparent 80%) padding-box,
    linear-gradient(180deg, rgb(24 21 19 / 0.92), rgb(15 13 12 / 0.92)) padding-box,
    linear-gradient(180deg, var(--ember), rgb(255 79 26 / 0.3) 40%, rgb(243 238 230 / 0.1)) border-box;
}
.card--lit .label { color: var(--paper); }

@media (min-width: 900px) { .timelines { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }

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

.plans { display: grid; gap: var(--gutter); }
.plan { display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-head .tag { color: var(--fg); }
.plan-flag { padding: 5px 10px; border-radius: 999px; background: var(--ember); color: var(--ink); font-size: 0.6875rem; }
.plan-price { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; }
.plan-amount { font-size: clamp(2.75rem, 2rem + 2vw, 3.5rem); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.plan-price .label { color: var(--muted); }
.plan h3 { font-size: 1.25rem; }
.plan-for { margin-top: -10px; color: var(--muted); font-size: var(--fs-small); }
.plan-list { display: grid; gap: 10px; margin: 8px 0 12px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; }
.plan-list li { position: relative; padding-left: 22px; }
.plan-list li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 4px; height: 10px; border-radius: 2px; background: var(--stone); }
.plan--lit .plan-list li::before { background: var(--ash); }
.plan-cta { margin-top: auto; width: 100%; }

@media (min-width: 1000px) {
  .plans { grid-template-columns: repeat(3, 1fr); }
  .plan { padding: 32px; }
}

.compare { margin-top: 56px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.compare summary, .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; list-style: none; }
.compare summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.compare summary { padding: 24px 0; font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; }
details .icon { width: 22px; height: 22px; color: var(--muted); transition: transform var(--t-ui) var(--ease), color var(--t-micro) var(--ease); }
details[open] > summary .icon { transform: rotate(45deg); color: var(--paper); }
summary:hover .icon { color: var(--paper); }

details::details-content {
  block-size: 0;
  overflow-y: clip;
  transition: block-size var(--t-ui) var(--ease), content-visibility var(--t-ui) allow-discrete;
}
details[open]::details-content { block-size: auto; }
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }

.compare-scroll { overflow-x: auto; padding-bottom: 32px; }
.compare table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: var(--fs-small); }
.compare th, .compare td { padding: 14px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.compare thead th { border-top: 0; font-family: var(--mono); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper); }
.compare thead th span { display: block; margin-top: 4px; color: var(--muted); }
.compare tbody th { font-weight: 400; color: var(--muted); width: 30%; }
.compare .is-lit { background: rgb(255 79 26 / 0.06); }
.compare thead .is-lit { color: var(--ember); }
.yes { display: inline-block; width: 5px; height: 12px; border-radius: 3px; background: var(--paper); vertical-align: -1px; }
.is-lit .yes { background: var(--ember); }
.no { color: var(--stone); }

.extras { display: grid; gap: 64px; margin-top: clamp(80px, 9vw, 128px); }
.extras .section-label { margin-bottom: 20px; }

.addons dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
}
.addons dl > div:last-child { border-bottom: 1px solid var(--rule); }
.addons dt { display: grid; gap: 4px; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.addons dt span { color: var(--muted); font-size: var(--fs-small); font-weight: 400; letter-spacing: 0; }
.addons dd { font-family: var(--mono); font-size: 1rem; white-space: nowrap; }
.addons dd small { color: var(--muted); font-size: 0.75rem; margin-inline: 2px; }

.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary { padding: 20px 0; font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; }
.faq details p { max-width: 52ch; padding-bottom: 24px; color: var(--muted); font-size: var(--fs-small); line-height: 1.65; }

@media (min-width: 900px) {
  .extras { grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
  .addons { grid-column: 1 / span 5; }
  .faq { grid-column: 7 / span 6; }
}

/* ---------- 06 Contact: Ember light behind the brief ---------- */

.contact { overflow-x: clip; padding-bottom: clamp(120px, 14vw, 200px); }
.contact-grid { display: grid; gap: 56px; margin-top: clamp(48px, 6vw, 88px); }
.contact-title {
  max-width: 15ch;
  margin-top: 32px;
  font-size: clamp(2.75rem, 1.5rem + 5vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-wrap: balance;
  background: linear-gradient(180deg, #fff 40%, #ffd2bf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-sub { max-width: 40ch; color: var(--fg); font-size: 1.1875rem; line-height: 1.55; }
.next-steps { display: grid; gap: 0; margin-top: 36px; max-width: 420px; }
.next-steps li { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-top: 1px solid rgb(243 238 230 / 0.14); font-weight: 500; }
.next-steps li:last-child { border-bottom: 1px solid rgb(243 238 230 / 0.14); }
.next-steps .label { color: var(--ember); }
.contact-direct { display: grid; gap: 8px; margin-top: 40px; }
.contact-direct > .label { color: var(--muted); }
.contact-email { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.contact-email a {
  color: #fff;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.015em;
  background: linear-gradient(currentColor, currentColor) left bottom / 100% 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size var(--t-ui) var(--ease);
}
.contact-email a:hover { background-size: 0 1.5px; background-position: right bottom; }
.copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid rgb(243 238 230 / 0.25);
  border-radius: 999px;
  background: rgb(243 238 230 / 0.06);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--t-micro) var(--ease);
}
.copy:hover { border-color: var(--fg); }
.copy .icon { width: 14px; height: 14px; }

/* The brief: a flat panel, lit Ember from the corner nearest the light. */
.brief {
  --accent: var(--paper);
  align-self: start;
  display: grid;
  gap: 24px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid rgb(243 238 230 / 0.14);
  border-radius: 28px;
  background: radial-gradient(90% 70% at 100% 100%, rgb(255 79 26 / 0.14), transparent 70%), var(--card);
  color: var(--paper);
}
.field { display: grid; gap: 10px; }
.field > .label, .field legend { color: var(--muted); }
.field legend { margin-bottom: 12px; padding: 0; }
.optional { text-transform: none; letter-spacing: 0; color: rgb(243 238 230 / 0.55); }
.field-row { display: grid; gap: 24px; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 0 12px;
  border: 0;
  border-bottom: 1.5px solid rgb(243 238 230 / 0.28);
  border-radius: 0;
  background: transparent;
  color: var(--paper);
  font: 400 1.0625rem/1.5 var(--sans);
  transition: border-color var(--t-micro) var(--ease);
  appearance: none;
}
.field select {
  padding-right: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A9289' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 2px center / 18px no-repeat;
  cursor: pointer;
}
.field select option { background: var(--ink); color: var(--paper); }
.field textarea { resize: vertical; min-height: 112px; }
.field input::placeholder, .field textarea::placeholder { color: rgb(243 238 230 / 0.45); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--paper); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--ember); }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice span {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border: 1px solid rgb(243 238 230 / 0.2);
  border-radius: 14px;
  background: rgb(243 238 230 / 0.05);
  font-size: var(--fs-small);
  font-weight: 500;
  transition: border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.choice small { color: var(--muted); font-family: var(--mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.04em; text-transform: uppercase; transition: color var(--t-micro) var(--ease); }
.choice:hover span { border-color: rgb(243 238 230 / 0.4); }
.choice input:checked + span { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.choice input:checked + span small { color: var(--stone); }
.choice input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 3px; }

.brief-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 4px; }
.brief-note { color: var(--muted); font-size: 0.875rem; }
.brief-status { color: var(--paper); font-size: var(--fs-small); }
.brief-status:empty { display: none; }
.brief-status a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .choices { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1000px) {
  .contact-grid { grid-template-columns: repeat(12, 1fr); gap: var(--gutter); }
  .contact-copy { grid-column: 1 / span 5; }
  .brief { grid-column: 7 / span 6; }
}

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

.footer { padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(12px, 2vw, 28px); overflow: hidden; }

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px var(--gutter);
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}
.footer-cols .label { margin-bottom: 16px; color: var(--muted); }
.footer-cols ul { display: grid; gap: 8px; }
.footer-cols a {
  padding-bottom: 2px;
  background: linear-gradient(currentColor, currentColor) right bottom / 0 1px no-repeat;
  transition: color var(--t-micro) var(--ease), background-size var(--t-ui) var(--ease);
}
.footer-cols a:hover { color: var(--ember); background-size: 100% 1px; background-position: left bottom; }
.footer-meter { grid-column: 1 / -1; }
.footer-count { font-size: var(--fs-h3); font-weight: 500; letter-spacing: -0.015em; }
.footer-count span { font-family: var(--mono); font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}

/* The last thing on the page: the logo, full width. It draws itself in, then follows the pointer. */
.footer-logo { margin-top: clamp(40px, 6vw, 88px); color: var(--paper); }
.footer-logo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.fl-thumb { fill: var(--ember); }
.js .fl-track { stroke-dasharray: 1 2; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease); }
.js .fl-thumb { opacity: 0; transform: translateY(-8px); transition: opacity var(--t-ui) var(--ease) 0.75s, transform var(--t-ui) var(--ease) 0.75s; }
.js .fl-rise {
  transform-box: fill-box;
  transform: translateY(115%);
  transition: transform var(--t-section) var(--ease);
  transition-delay: calc(0.9s + var(--i) * 60ms);
}
.js .footer-logo.is-drawn .fl-track { stroke-dashoffset: 0; }
.js .footer-logo.is-drawn .fl-thumb { opacity: 1; transform: none; }
.js .footer-logo.is-drawn .fl-rise { transform: none; }
.to-top { display: inline-flex; align-items: center; gap: 8px; transition: color var(--t-micro) var(--ease); }
.to-top:hover { color: var(--paper); }
.to-top .icon { width: 16px; height: 16px; }

@media (min-width: 900px) {
  .footer-cols { grid-template-columns: repeat(12, 1fr); }
  .footer-cols > div { grid-column: span 3; }
  .footer-cols > .footer-meter { grid-column: 10 / span 3; }
}

/* ---------- Reveals ---------- */

/* Headlines: each word rises through its line (split in main.js). The gradient moves onto the words, since a
   gradient clipped to text doesn't reach text that is moving. */
.js .split[data-reveal] { opacity: 1; transform: none; }
.split .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.06em 0.12em;
  margin: 0 -0.06em -0.12em;
}
.split .word > span {
  display: inline-block;
  transform: translate3d(0, 108%, 0);
  transition: transform 0.9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + min(var(--w) * 28ms, 560ms));
}
.split.is-in .word > span, .no-motion .split .word > span { transform: none; }
[data-surface="ink"] .h1.split, .contact-title.split { background: none; color: var(--fg); }
[data-surface="ink"] .h1.split .word > span {
  background: linear-gradient(180deg, #fff 0%, var(--paper) 45%, #d6cbbd 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.contact-title.split .word > span {
  background: linear-gradient(180deg, #fff 40%, #ffd2bf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity var(--t-section) var(--ease), transform var(--t-section) var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js.no-motion [data-reveal] { opacity: 1; transform: none; }

/* ---------- Reduced motion: fades only ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .js [data-reveal] { transform: none; transition: opacity var(--t-ui) linear; }
  .btn-label > span, .btn .icon { transition: none; }
  .js .hero { height: auto; }
  .hero-stage { position: relative; height: auto; min-height: max(100vh, 640px); }
  .hero-inner { transform: none; }
  .hero-dive { display: none; }
  .js .fl-track, .js .fl-thumb, .js .fl-rise { transition: none; }
  .pillar-title { color: var(--paper); }
  .pillar-text { opacity: 1; }
  .ready .flow-demo { translate: none; }
}

/* ---------- 404 ---------- */

.lost { display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: 96px; }
.lost-inner { display: grid; gap: 24px; justify-items: start; }
.lost .label { color: var(--muted); }
.lost .h1 { max-width: 14ch; }
.lost-text { max-width: 40ch; color: var(--muted); margin-bottom: 12px; }
.lost-mark { width: 40px; height: 64px; margin-bottom: 16px; color: var(--paper); overflow: visible; }
.lost-thumb { fill: var(--ember); animation: lost 2.4s var(--ease) infinite; }
@keyframes lost {
  0%, 15% { transform: none; opacity: 1; }
  60% { transform: translateY(40px); opacity: 0; }
  61% { transform: translateY(-12px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}