/* ============================================================
   CCE landing page styles
   Faithful port of the CCE Landing Page design canvas.
   Tokens mirror the Clarity Coach design system exactly.
   ============================================================ */

:root {
  /* hues — 2% budget, semantic only */
  --yellow: #FCCA03;
  --ember: #E8542F;   /* People  — develop people */
  --indigo: #5B4BFF;  /* Systems — build systems  */

  /* neutrals */
  --stage: #0A0A0B;
  --ink: #0F0F0F;
  --body: #4A4A50;
  --mist: #F7F7F9;
  --paper: #FFFFFF;
  --hairline: #EDEDF1;
  --border: #E4E4E8;
  --metadata: #8B8B90;
  --secondary-text: #55555A;
  --tertiary-text: #6B6B72;
  --text-strong: #3D3D43;
  --field-border: #DCDCE1;
  --dark-secondary: #A0A0A8;
  /* Only ever used on the stage surface. #6B6B72 (the light-theme tertiary)
     lands at 3.7:1 there, which is under AA for the 11px mono it carries. */
  --dark-tertiary: #8A8A92;

  --accent-people: var(--ember);
  --accent-systems: var(--indigo);

  --font-display: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-pill: 999px;
  --space-section: 112px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--indigo); }
::selection { background: var(--yellow); color: var(--ink); }

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

.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;
}

/* ---------- shared type ---------- */

.inner { max-width: 1120px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px); }
.inner--wide { max-width: 1280px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--metadata);
  margin: 0 0 20px;
}

/* ---------- house-yellow accent rule ----------
   The brand permits hue in exactly three forms: the triad marks, a 2–3px
   rule or underline, and one chip per surface. This is the rule form — it
   opens a section the way the yellow period closes the wordmark. Keep it to
   one per surface; it stops being an accent the moment it repeats. */
.rule-accent {
  width: 56px; height: 3px;
  background: var(--yellow);
  margin: 0 0 26px;
  border-radius: 2px;
}
.rule-accent + .eyebrow { margin-top: -6px; }

h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  max-width: 18ch;
  text-wrap: balance;
}
/* For headlines written as a full sentence rather than a short phrase —
   18ch would break this one across five lines. */
.h2--wide { max-width: 26ch; }

.lead {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.55;
  color: var(--body);
  max-width: 52ch;
  margin: 0 0 36px;
}

.statement {
  font-size: clamp(19px, 2.4vw, 23px);
  line-height: 1.4;
  color: var(--ink);
  font-weight: 600;
  max-width: 30ch;
  margin: 36px 0 0;
}

section { padding: clamp(72px, 9vw, var(--space-section)) 0; }
.bg-mist { background: var(--mist); }
.bg-paper { background: var(--paper); }

/* ------------------------------------------------------------------
   Low-contrast seams.

   The gap should be proportional to the contrast of the boundary it sits
   on. 112px top + bottom reads as a considered break when the ground
   genuinely changes — light to stage, or into a photograph. Between two
   light sections it reads as a void, and mist against paper is only a
   whisper of a boundary, so it does not earn the full measure either.

   The top-padding rule is the guaranteed half; :has() trims the matching
   bottom so the seam closes from both sides, and simply doesn't apply in
   a browser without it.
   ------------------------------------------------------------------ */
.bg-paper + .bg-paper,
.bg-mist  + .bg-mist,
.on-stage + .on-stage,
.bg-paper + .bg-mist,
.bg-mist  + .bg-paper { padding-top: clamp(40px, 4.5vw, 56px); }

.bg-paper:has(+ .bg-paper),
.bg-mist:has(+ .bg-mist),
.on-stage:has(+ .on-stage),
.bg-paper:has(+ .bg-mist),
.bg-mist:has(+ .bg-paper) { padding-bottom: clamp(40px, 4.5vw, 56px); }

/* ------------------------------------------------------------------
   .on-stage — a section inverted onto the near-black STAGE surface.

   Rather than duplicating every component rule in a dark variant, this
   re-points the same tokens the components already read. Anything using
   var(--ink) / var(--body) / var(--border) inside flips automatically,
   so a stage section can never drift from its light counterpart.
   ------------------------------------------------------------------ */
.on-stage {
  background: var(--stage);
  --ink: #FFFFFF;
  --body: #A8A8B0;
  --text-strong: #D4D4DA;
  --secondary-text: #A8A8B0;
  /* Deliberately lighter than the light-theme equivalents: --metadata and
     --tertiary-text carry 11–13px mono, and the light values land at 3.7:1
     on this ground, under the 4.5:1 floor. These clear 7:1. */
  --tertiary-text: #9A9AA2;
  --metadata: #9A9AA2;
  --hairline: rgba(255, 255, 255, 0.10);
  --border: rgba(255, 255, 255, 0.24);
  --field-border: rgba(255, 255, 255, 0.24);
  --mist: rgba(255, 255, 255, 0.05);
  --paper: transparent;

  /* REQUIRED. Headings and other text that never declare a colour inherit
     body's *computed* value — re-pointing --ink alone does not reach them,
     which leaves h2 sitting black-on-black. Setting colour here gives the
     whole subtree something white to inherit. */
  color: var(--ink);
}

/* ---------- buttons ---------- */

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-pill);
  padding: 15px 28px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease);
  cursor: pointer;
  border: 1px solid transparent;
}
.btn--primary { color: #fff; background: var(--ink); }
.btn--primary:hover { color: #fff; background: #2A2A30; }
.btn--secondary { color: var(--ink); background: transparent; border-color: var(--field-border); }
.btn--secondary:hover { color: var(--ink); border-color: var(--ink); }
.btn--onstage { color: var(--ink); background: #fff; }
.btn--onstage:hover { color: var(--ink); background: var(--mist); }
.btn--onstage-ghost { color: #fff; background: transparent; border-color: rgba(255,255,255,0.35); }
.btn--onstage-ghost:hover { color: #fff; border-color: #fff; }

.btnrow { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 28px; }

/* ============================================================
   NAV — CCE is the primary mark
   ============================================================ */

.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 14px clamp(24px, 5vw, 56px);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hairline);
}

.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand__mark { height: 30px; width: auto; }
.brand__rule { width: 1px; height: 26px; background: var(--border); flex: none; }
.brand__name {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--metadata);
  line-height: 1.35;
  white-space: nowrap;
}
.nav__cta {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: #fff; background: var(--ink); border-radius: var(--radius-pill);
  padding: 10px 22px; display: inline-flex; align-items: center; flex: none;
  transition: background 240ms var(--ease);
}
.nav__cta:hover { color: #fff; background: #2A2A30; }

@media (max-width: 720px) {
  .brand__rule, .brand__name { display: none; }
  .brand__mark { height: 26px; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero { padding: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 100px); }
.hero__grid {
  display: grid; grid-template-columns: 1fr 0.82fr;
  gap: 64px; align-items: center;
}
.hero__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(38px, 5.4vw, 64px);
  line-height: 1.03; letter-spacing: -0.04em;
  margin: 0 0 26px;
}
.hero__media { aspect-ratio: 4 / 5; width: 100%; }
.capline {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--metadata); margin-top: 12px;
}

/* ============================================================
   MEDIA SLOTS
   ============================================================ */

.media {
  position: relative; width: 100%; height: 100%;
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--mist);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--contain img { object-fit: contain; }

/* branded empty state — shown until the real photo is dropped in */
.media__pending {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 24px; text-align: center;
  background: var(--mist);
  border: 1px dashed var(--border); border-radius: var(--radius-md);
}
.media__pending b {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--metadata);
}
.media__pending span {
  font-family: var(--font-mono); font-size: 11px; line-height: 1.6;
  color: var(--tertiary-text); word-break: break-word; max-width: 34ch;
}
.media.is-loaded .media__pending { display: none; }

.caption {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--metadata); margin-top: 10px;
}

/* ============================================================
   RECOGNITION
   ============================================================ */

.recog__grid {
  display: grid; grid-template-columns: 1.3fr 0.9fr;
  gap: 56px; align-items: center;
}

/* These four are alternatives, not a sequence — so no numerals. The house
   rule swaps bullets for mono numerals, but numbering would imply an order
   that isn't there, so the marker is a plain ink dash: geometric, no icon. */
.recog__body { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 20px; }
.recog__body li {
  display: grid; grid-template-columns: 22px 1fr; gap: 4px;
  font-size: 18px; line-height: 1.55; color: var(--text-strong);
  max-width: 46ch;
}
.recog__body li::before {
  content: ''; width: 12px; height: 2px; background: var(--ink);
  margin-top: 0.72em;   /* optical centre of the first line */
}
.recog__rule { width: 56px; height: 2px; background: var(--border); margin: 32px 0 24px; }
.recog__close {
  font-size: clamp(19px, 2.2vw, 22px); line-height: 1.45; font-weight: 600;
  color: var(--ink); max-width: 36ch; margin: 0;
}
.recog__media { align-self: center; }
/* 4:3, not the 4:5 the other slots use — the source frame is 3:2, and the
   notes wall on the left is the subject as much as the person on the right.
   A 4:5 window can hold one or the other, not both.
   height:auto is required: .media sets height:100%, which would otherwise beat
   aspect-ratio whenever this grid item stretches (as it does under 780px). */
.recog__media .media { aspect-ratio: 4 / 3; height: auto; }

/* ============================================================
   COST OF COMPLEXITY
   ============================================================ */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin: 8px 0 0; }
.stat { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-display); }
.stat__value {
  font-size: 46px; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; color: var(--ink);
  /* Tabular figures so each digit occupies the same box — without this the
     glyph widths shift on every frame of the count and the number visibly
     wobbles. The span's reserved min-width (set in JS) handles the change in
     digit *count*; this handles the change in digit *shape*. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.stat__num { display: inline-block; }
.stat__unit { font-size: 17px; color: var(--metadata); font-family: var(--font-mono); }
.stat__caption {
  font-size: 13px; line-height: 1.55; color: var(--tertiary-text);
  font-family: var(--font-body);
}
.source {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; color: var(--metadata); margin-top: 16px;
}

/* ============================================================
   NUMBERED ROWS (moments / outcomes)
   ============================================================ */

.rows { display: flex; flex-direction: column; margin-top: 8px; }
.row {
  display: grid; grid-template-columns: 64px 1fr; gap: 32px;
  align-items: baseline; padding: 26px 16px;
  border-bottom: 1px solid var(--hairline);
  transition: background-color 240ms var(--ease);
}

/* ------------------------------------------------------------------
   Moments — selectable rows.

   Three states, each doing a different job:
     rest      hairline-separated list
     hover     mist ground + a house-yellow edge rule wiping down
     selected  inverted to stage, numeral in house yellow

   The yellow edge is the brand's sanctioned "2–3px rule" form of hue, and
   selection keeps to a single hue on the surface. Rows are real <button>s
   with aria-pressed, so this is keyboard- and screen-reader-operable
   rather than a click handler bolted to a div.
   ------------------------------------------------------------------ */
.rows--moments .row {
  position: relative; width: 100%; text-align: left;
  font: inherit; color: inherit; background: none;
  border: none; border-bottom: 1px solid var(--hairline);
  cursor: pointer; -webkit-appearance: none; appearance: none;
  transition: background-color 240ms var(--ease), border-color 240ms var(--ease);
}
.rows--moments .row:first-child { border-top: 1px solid var(--hairline); }

/* the yellow edge — scales from the top so it reads as a wipe, not a fade */
.rows--moments .row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--yellow);
  transform: scaleY(0); transform-origin: top;
  transition: transform 240ms var(--ease);
}
.rows--moments .row:hover::before,
.rows--moments .row:focus-visible::before,
.rows--moments .row[aria-pressed="true"]::before { transform: scaleY(1); }

.rows--moments .row:hover { background-color: var(--mist); }
.rows--moments .row:hover .row__n { color: var(--ink); }
.rows--moments .row:hover .row__t { color: var(--ink); }

.rows--moments .row:focus-visible {
  outline: 2px solid var(--ink); outline-offset: -2px;
}

/* selected — inverted, with the numeral carrying the hue */
.rows--moments .row[aria-pressed="true"] {
  background-color: var(--stage);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}
.rows--moments .row[aria-pressed="true"] + .row { border-top-color: transparent; }
.rows--moments .row[aria-pressed="true"] .row__n { color: var(--yellow); }
.rows--moments .row[aria-pressed="true"] .row__t { color: #fff; font-weight: 600; }
.rows--moments .row[aria-pressed="true"]:focus-visible { outline-color: var(--yellow); }


@media (prefers-reduced-motion: reduce) {
  .rows--moments .row::before { transition: none; }
}
.rows--outcomes .row { padding: 22px 16px; }
.rows--outcomes .row:last-child { border-bottom: none; }
.row__n {
  font-family: var(--font-mono); font-size: 13px; color: var(--metadata);
  transition: color 240ms var(--ease);
}
.row__t {
  font-size: 20px; line-height: 1.4; color: var(--text-strong);
  max-width: 42ch; transition: color 240ms var(--ease), font-weight 240ms var(--ease);
}
/* Short label above each row's one-liner, so the list scans by category
   before it is read as a sentence. */
.row__label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--metadata); margin-bottom: 5px;
  transition: color 240ms var(--ease);
}
.rows--moments .row:hover .row__label { color: var(--secondary-text); }
.rows--moments .row[aria-pressed="true"] .row__label { color: var(--yellow); }
.rows--outcomes .row__t { font-size: 18px; line-height: 1.45; max-width: 46ch; }

/* ============================================================
   WHEN SOMETHING CHANGES

   The five rows stay in the left column rather than running full width.
   Narrowing them is not a compromise: the row text is capped at 42ch
   anyway, so nothing reflows, and the selected black bars read as
   deliberate marks instead of heavy full-bleed slabs.
   ============================================================ */

.changed__grid {
  display: grid; grid-template-columns: 1.55fr 0.95fr;
  gap: clamp(40px, 5vw, 64px); align-items: center;
}
.changed__media .media { aspect-ratio: 4 / 5; height: auto; }

/* ============================================================
   WHAT WE HELP WITH

   Three areas, each with a bar showing how much of the work sits there.
   The bars cycle through four mixes; the point is only that the balance
   shifts, so there is no scale, no labels and nothing to read off them.
   ============================================================ */

.help {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 44px; margin-top: 8px;
}
/* Column is a flex stack so the bar can be pinned to the bottom. Without
   this, one phrase wrapping to two lines would drop that column's bar out
   of line with the other two. */
.help__col { display: flex; flex-direction: column; }
.help__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.help__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.help__name {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
/* Four verb-first phrases, stacked. Tighter leading than body copy and a
   small row gap so they read as one group rather than four paragraphs.
   No max-width: the column already measures them, and a cap would force
   the longer phrases to wrap. */
.help__list {
  list-style: none; padding: 0;
  display: flex; flex-direction: column; gap: 5px;
  font-size: 16px; line-height: 1.45; color: var(--body);
  margin: 0 0 22px;
}
.help__track {
  display: block; width: 100%; height: 6px; margin-top: auto;
  background: var(--hairline); border-radius: 3px; overflow: hidden;
}
.help__fill {
  display: block; height: 100%; width: 22%;
  background: var(--ink); border-radius: 3px;
  transition: width 900ms var(--ease);
}
.help__note {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.06em; color: var(--tertiary-text);
  margin: 26px 0 0; min-height: 1.6em;
}

/* ============================================================
   HOW WE WORK — three-step plan

   Oversized editorial numerals on a single hairline, which is the whole
   device: no icons, no cards, no arrows.
   ============================================================ */

.plan {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.plan__step { position: relative; }

/* One hairline per step, reaching across the gap into the next. Drawn per
   step rather than as a single line across the row so it stops at the third
   numeral instead of trailing off the end. */
.plan__step:not(:last-child)::after {
  content: ''; position: absolute; top: 34px; left: 0; right: -40px;
  height: 1px; background: var(--border);
}
.plan__n {
  display: block; position: relative; z-index: 1;
  font-family: var(--font-display); font-weight: 800;
  font-size: 64px; line-height: 1; letter-spacing: -0.05em;
  color: var(--ink); margin-bottom: 20px;
  /* its own ground, so the hairline passes behind rather than through */
  background: var(--stage); padding-right: 18px; width: fit-content;
}
.plan__name {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink);
}
.plan__text {
  font-size: 16px; line-height: 1.55; color: var(--body);
  margin: 0; max-width: 32ch;
}

/* ============================================================
   CLIENT PROOF

   Three compositions, not three cards. No borders, no shadows, no card
   ground: each item is a photograph and a pull quote sharing a row, and
   the variation between them is what stops the section reading as a
   template. Crops differ too, so the rhythm comes from the imagery.
   ============================================================ */

.proof {
  display: flex; flex-direction: column;
  gap: clamp(64px, 8vw, 104px);
  margin-top: 8px;
}
.proof__item { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }

/* The case-study frames are all 1024 square, so rhythm comes from size and
   side rather than from cropping three different shapes out of them. Only
   the third is re-cut, and only to a 16:9 that tightens onto the discussion.
   The founder frame in particular is a three-panel composite and cannot be
   cropped at all without losing a panel. */

/* a: photograph leads, and it is the largest of the three */
.proof__item--a { grid-template-columns: 1.15fr 0.85fr; }
.proof__item--a .media { aspect-ratio: 1 / 1; }

/* b: reversed and smaller, so the eye resets */
.proof__item--b { grid-template-columns: 1fr 1fr; }
.proof__item--b .media { aspect-ratio: 1 / 1; }

/* c: a wide band with the quote beneath, closing the run */
.proof__item--c { grid-template-columns: 1fr; gap: 32px; }
.proof__item--c .media { aspect-ratio: 16 / 9; }
.proof__item--c .proof__quote { max-width: 46ch; }

.proof__label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--metadata); margin: 0 0 18px;
}
.proof__tick { width: 16px; height: 2px; background: var(--ink); flex: none; }

.proof__quote {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.4;
  letter-spacing: -0.02em; color: var(--ink);
  margin: 0; max-width: 36ch; text-wrap: pretty;
}
.proof__attr {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--metadata); margin: 20px 0 0;
}

/* ============================================================
   TRANSITION BAND
   ============================================================ */

.band { padding: 0; background: var(--stage); }
.band__media {
  width: 100%; height: 62vh; min-height: 420px; max-height: 680px;
  overflow: hidden; background: var(--stage); position: relative;
}
.band__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }

/* Optional band: hidden unless its photograph actually loads, so a missing
   file leaves a clean page rather than an empty slot. */
.band--optional { display: none; }
.band--optional.is-ready { display: block; }

@media (max-width: 780px) {
  .band__media { height: auto; aspect-ratio: 4 / 3; min-height: 0; }
}

/* ============================================================
   FINAL CTA / CONVERSION
   ============================================================ */

.final { background: var(--stage); }
.final__grid {
  display: grid; grid-template-columns: 1fr 0.9fr;
  gap: 64px; align-items: start;
}
.final__headline {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(32px, 4vw, 46px); line-height: 1.08;
  letter-spacing: -0.035em; color: #fff; margin: 0 0 24px;
}
.final__lead { font-size: 18px; line-height: 1.55; color: var(--dark-secondary); max-width: 42ch; margin: 0 0 16px; }
.final__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dark-tertiary);
  margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);
  line-height: 2;
}

/* form card */
.card {
  background: var(--paper); border-radius: var(--radius-md);
  padding: clamp(24px, 3.5vw, 36px);
}
.card__title {
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: -0.02em; margin: 0 0 6px;
}
.card__sub { font-size: 14px; line-height: 1.55; color: var(--tertiary-text); margin: 0 0 24px; }

.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field > label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--secondary-text);
}
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 15px; color: var(--ink);
  padding: 13px 14px; border: 1px solid var(--field-border);
  border-radius: var(--radius-sm); background: var(--paper);
  width: 100%; transition: border-color 240ms var(--ease);
}
.field textarea { resize: vertical; min-height: 92px; }
/* 44px minimum touch target; the 13px padding alone leaves inputs at 43px. */
.field input, .field select { min-height: 46px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink);
}
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--ember); }
.field__error {
  font-size: 13px; line-height: 1.4; color: var(--ember); margin: 0;
}
.field__count {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--metadata); margin: 0; text-align: right;
}
.field__count.is-limit { color: var(--ember); }
.card .btn { width: 100%; margin-top: 8px; }
.card .btn[disabled] { opacity: 0.55; cursor: progress; }
.card__note {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--metadata); text-align: center; margin: 14px 0 0; line-height: 1.7;
}
.card__note.is-error { color: var(--ember); }
.hp { position: absolute; left: -9999px; }

/* ============================================================
   FOOTER
   ============================================================ */

.footer { background: var(--stage); padding: 56px clamp(24px, 5vw, 56px) 44px; border-top: 1px solid rgba(255,255,255,0.1); }
.footer__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px; flex-wrap: wrap;
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.footer__mark { height: 30px; width: auto; margin-bottom: 16px; }
.footer__name {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dark-secondary); margin: 0 0 10px;
}
.footer__line {
  font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: -0.02em; color: #fff; margin: 0 0 22px;
}
/* House yellow, and the footer's single chip of hue. It sits on the stage
   surface where the white version read as just another neutral; ink on
   yellow lands at 12.4:1, so it is the most legible thing down here as
   well as the warmest. Hover deepens the same hue rather than switching
   colour, so the button never stops being yellow. */
.footer__cta {
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  color: var(--ink); background: var(--yellow); border-radius: var(--radius-pill);
  padding: 11px 24px; min-height: 44px; display: inline-flex; align-items: center;
  transition: background 240ms var(--ease);
}
.footer__cta:hover { color: var(--ink); background: #E0B303; }
.footer__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Right column, above the copyright. Reads as a link rather than a second
   button so it stays clearly secondary to Book a Call. Sentence case is
   deliberate: no uppercase transform, so the label renders as written. */
.footer__deck {
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--dark-secondary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  padding-bottom: 2px;
  transition: color 240ms var(--ease), border-color 240ms var(--ease);
}
.footer__deck:hover { color: #fff; border-bottom-color: #fff; }
.footer__deck:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }

.footer__end { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; text-align: right; }
.footer__meta {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--dark-tertiary); margin: 0;
}

/* ============================================================
   REVEAL
   ============================================================ */

.no-js .reveal { opacity: 1 !important; transform: none !important; }
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .help__fill { transition: none; }
}

/* ============================================================
   RESPONSIVE — single breakpoint at 780px, mirroring the canvas
   ============================================================ */

@media (max-width: 780px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .recog__grid { grid-template-columns: 1fr; gap: 40px; }
  .recog__media { align-self: stretch; }
  .stats { grid-template-columns: 1fr; gap: 32px; }

  .row { grid-template-columns: 32px 1fr; gap: 16px; padding: 18px 8px; }
  .rows--outcomes .row { padding: 16px 8px; }
  .row__t { font-size: 17px; }
  .rows--outcomes .row__t { font-size: 17px; }

  /* photo drops below the rows, before the closing line */
  .changed__grid { grid-template-columns: 1fr; gap: 36px; }
  .changed__media .media { aspect-ratio: 4 / 3; }

  .help { grid-template-columns: 1fr; gap: 32px; }

  /* Stacked, image first every time, and all three readable by scrolling:
     no carousel, no swiping. Crops stay wide enough to hold the scene. */
  .proof { gap: 56px; }
  .proof__item { grid-template-columns: 1fr; gap: 24px; }
  .proof__item--b .proof__body { order: 2; }
  .proof__item--b .proof__media { order: 1; }
  .proof__item--a .media,
  .proof__item--b .media { aspect-ratio: 1 / 1; }
  .proof__item--c .media { aspect-ratio: 4 / 3; }
  .proof__quote { font-size: 19px; max-width: none; }
  .proof__item--c .proof__quote { max-width: none; }

  /* stacked: numeral beside the text on a vertical rail, matching the
     dot-gutter pattern used elsewhere on the page */
  .plan { grid-template-columns: 1fr; gap: 28px; }
  .plan__step { display: grid; grid-template-columns: 46px 1fr; gap: 0 18px; }
  .plan__step:not(:last-child)::after {
    top: 8px; bottom: -28px; left: 22px; right: auto; width: 1px; height: auto;
  }
  .plan__n {
    grid-row: 1 / 3; font-size: 40px; margin-bottom: 0;
    padding: 4px 0; background: var(--stage); width: auto; text-align: left;
  }
  .plan__name { margin-top: 2px; }

  .final__grid { grid-template-columns: 1fr; gap: 40px; }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer__end { align-items: flex-start; text-align: left; }
}