/* ==========================================================================
   Deakin Studio — the whole stylesheet.

   One file, deliberately. Tokens and base type first, then components, then
   every responsive rule, then motion. There is no second "design system"
   sheet: this design did not arrive as a linted system, so pretending it did
   would be structure for its own sake.

   House rules:
   - No colour or measurement is written twice. Everything comes from a token
     below. The sanctioned exceptions are clamp() type sizes, breakpoint
     widths and grid track sizes.
   - Borders are 2px solid ink, everywhere, always. That is the design.
   - No `style` attribute appears in any page, which is what allows the site's
     CSP to set `style-src 'self'` with no 'unsafe-inline'.
   ========================================================================== */

/* --- Font ----------------------------------------------------------------
   One variable file covering 400–700, latin subset, self-hosted. The design
   export loads this from the Google CDN; the site's own CSP sets
   `font-src 'self'`, which would block it. */
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Colour. Contrast against the surfaces each is used on, all AA or better:
     muted/paper 7.3:1 · muted-on-ink/ink 8.0:1 · paper/blue 6.6:1
     blue/paper 6.6:1 · lime/blue 6.6:1 · lime/ink 15.5:1 · lime-ink/lime 9.7:1 */
  --ink: #14181f;
  --paper: #f2efe6;
  --card: #ffffff;
  --blue: #1d3fd8;
  --lime: #d8ff3e;
  --lime-ink: #3a4212;
  --muted: #454b55;
  --muted-on-ink: #a8adb8;
  --line-on-ink: #3a4048;
  /* The export uses #9aa0a8 here. That is 2.3:1 on paper and fails the 3:1
     non-text minimum, so it is darkened one step to 4.0:1. */
  --rule-dash: #6f757e;

  /* Layout */
  --max: 1280px;
  --gutter: clamp(20px, 5vw, 48px);
  --bw: 2px;
  --r: 12px;
  --r-sm: 8px;
  --r-md: 10px;

  /* Rhythm */
  --pad-band: clamp(44px, 6vw, 64px);
  --pad-hero: clamp(40px, 5.5vw, 72px);
  --gap: 20px;

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

/* --- Reset and base ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }

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

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

/* Hover is a quiet dim, matching the export. Never applied to the whole card
   surfaces that carry images — see .case-card. */
a:hover { opacity: 0.8; }

/* --- Focus --------------------------------------------------------------
   Designed, never the browser default. Ink ring on paper, lime on dark. */
:focus-visible {
  outline: var(--bw) solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.topbar :focus-visible,
.band--ink :focus-visible,
.band--blue :focus-visible,
.statrow__cell--blue :focus-visible,
.price-card--feature :focus-visible {
  outline-color: var(--lime);
}

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--lime);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-sm);
  padding: 12px 20px;
  font-weight: 700;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

/* --- Shell --------------------------------------------------------------
   Everything, including the blue bar and the full-width bands, lives inside
   a 1280px sheet centred on paper. That is the design's own structure. */
.shell {
  max-width: var(--max);
  margin: 0 auto;
  background: var(--paper);
}

.section { padding: var(--pad-band) var(--gutter); }
.section--tight { padding-top: 0; }
.section--flush { padding-bottom: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
.eyebrow {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 16px;
}
.eyebrow--lime { color: var(--lime); }
.eyebrow--ink { color: var(--ink); }

.h-hero {
  font-size: clamp(40px, 7.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.04em;
  font-weight: 700;
  max-width: 13ch;
}
/* The export sizes its h1 per page — 76px on the case study down to 56px on
   contact, where the headline is long and sits beside the form. Two modifiers
   carry that, rather than letting every interior page shout at 76px. */
.h-page {
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 700;
}
.h-page--md { font-size: clamp(34px, 5.4vw, 64px); }
.h-page--sm { font-size: clamp(32px, 4.8vw, 56px); letter-spacing: -0.035em; line-height: 1.04; }
.h-band {
  font-size: clamp(28px, 4.4vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.h-sec {
  font-size: clamp(26px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.h-card {
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Headings carry their own bottom rhythm, since the reset zeroes all margins.
   The modifiers below strip it back off where a flex/grid gap already owns
   the spacing. */
.h-page { margin-bottom: clamp(20px, 2.4vw, 28px); }
.h-sec { margin-bottom: clamp(24px, 2.6vw, 32px); }
.h-band { margin-bottom: 18px; }

/* Where a flex gap already owns the spacing, take the margin back off. Child
   selectors only — the case-study CTA nests its heading inside a div and must
   keep its rhythm. */
.band__head > .h-sec,
.band__row > .h-sec { margin-bottom: 0; }
.band__row .band__lede { margin-bottom: 0; }

/* Headline measure. The export sets these per page (15–17ch on h1, 24–26ch on
   h2); two utilities are close enough and stay legible. */
.hmeasure { max-width: 16ch; }
.hmeasure-wide { max-width: 24ch; }

/* A block that follows a full-width element and needs its own air. */
.after-block { margin-top: 24px; }

.lead {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 56ch;
}
.prose {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}
.prose + .prose { margin-top: 18px; }

.small { font-size: 15px; line-height: 1.55; color: var(--muted); }
.tiny { font-size: 13px; line-height: 1.5; color: var(--muted); }

.on-ink { color: var(--muted-on-ink); }
.measure-narrow { max-width: 46ch; }
.measure-mid { max-width: 54ch; }

/* ==========================================================================
   Header, navigation
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px var(--gutter);
  background: var(--blue);
  color: var(--paper);
}

.wordmark {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav {
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
}
.nav a[aria-current='page'] {
  color: var(--lime);
  font-weight: 700;
}

/* The header CTA. Paper on blue. */
.btn-nav {
  background: var(--paper);
  color: var(--blue);
  padding: 10px 20px;
  border-radius: var(--r-sm);
  font-weight: 700;
  white-space: nowrap;
}

/* Disclosure menu — CSS only, shown at ≤760px. No script required to open. */
.menu { display: none; position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  background: var(--paper);
  color: var(--blue);
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 700;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 40;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  background: var(--card);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
}
.menu__panel a {
  padding: 13px 20px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: var(--bw) solid var(--paper);
}
.menu__panel a:last-child { border-bottom: 0; }
.menu__panel a[aria-current='page'] { color: var(--blue); font-weight: 700; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 16px 30px;
  border-radius: var(--r-md);
  font-size: clamp(15px, 1.3vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  border: var(--bw) solid transparent;
  transition: transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--blue { background: var(--blue); color: var(--paper); }
.btn--paper { background: var(--paper); color: var(--blue); }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--block { display: block; width: 100%; }

/* A plain text link that reads as a call to action. */
.link-cta {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--blue);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding: var(--pad-hero) var(--gutter) var(--pad-band); }

.hero__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: end;
  margin-top: 36px;
}

/* Two-column interior heroes: about (1fr 340px), contact (1fr 480px). */
.hero--split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.hero--split-wide { grid-template-columns: 1fr 480px; }

/* ==========================================================================
   Stat row — 2px ink hairlines produced by the grid gap showing through
   ========================================================================== */
.statrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bw);
  background: var(--ink);
}
.statrow--bleed {
  border-top: var(--bw) solid var(--ink);
  border-bottom: var(--bw) solid var(--ink);
}
.statrow--framed {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
}
.statrow--meta { grid-template-columns: repeat(3, 1fr); }

.statrow__cell { background: var(--paper); padding: 32px 36px; }
.statrow__cell--blue { background: var(--blue); color: var(--paper); }
.statrow__cell--lime { background: var(--lime); color: var(--lime-ink); }
.statrow__cell--card { background: var(--card); }

.statrow__num {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 700;
}
.statrow__num--sm { font-size: clamp(22px, 2.6vw, 28px); }
.statrow__num--md { font-size: clamp(30px, 3.8vw, 44px); }

.statrow__label { font-size: 15px; line-height: 1.4; margin-top: 4px; color: var(--muted); }
.statrow__cell--blue .statrow__label { color: var(--paper); opacity: 0.85; }
.statrow__cell--lime .statrow__label { color: var(--lime-ink); }

/* Compact variant used inside the work page's case card. */
.statrow--mini { border-radius: var(--r-md); }
.statrow--mini .statrow__cell { padding: 14px 16px; }
.statrow--mini .statrow__label { font-size: 13px; margin-top: 2px; }

/* Meta strip on the case study: label above value, all on card white. */
.metacell__key {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 6px;
}
.metacell__val { font-size: 15px; font-weight: 500; line-height: 1.4; }
.metacell__val--blue { color: var(--blue); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  padding: 28px;
}
.card--flush { padding: 0; overflow: hidden; }
.card--lime { background: var(--lime); color: var(--lime-ink); }
.card--lime .small { color: var(--lime-ink); }
.card--dashed {
  border-style: dashed;
  border-color: var(--rule-dash);
  background: transparent;
}

.card__head {
  background: var(--lime);
  color: var(--ink);
  border-bottom: var(--bw) solid var(--ink);
  padding: 14px 24px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.card__body { padding: 6px 24px; }

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

/* Service teaser cards on the home page. */
.teaser { display: block; }
.teaser__title { margin-bottom: 10px; }

/* ==========================================================================
   Proof — the browser-chrome frame around evidence screenshots
   ========================================================================== */
.proof {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.frame {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
}
.frame__bar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-bottom: var(--bw) solid var(--ink);
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
}
.frame__note { color: var(--blue); font-weight: 700; }
.frame__foot {
  padding: 10px 18px;
  border-top: var(--bw) solid var(--ink);
  background: var(--card);
  font-size: 13px;
  color: var(--muted);
}
.frame img { width: 100%; }

/* The founder block on the home page: the portrait in a frame, beside the
   pitch. The figure is capped at its display width rather than left fluid —
   the source photo is 535px wide, so stretching it past that only softens it. */
.founder {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.founder__fig { max-width: 340px; }

/* The name reads as ink, the role beside it as the caption's own muted grey. */
.frame__foot strong { color: var(--ink); }

/* Numbered 01–04 list inside a card. */
.steplist__row {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: var(--bw) solid var(--paper);
}
.steplist__row:last-child { border-bottom: 0; }
.steplist__n { font-size: 15px; font-weight: 700; color: var(--blue); }
.steplist__title { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.steplist__text { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   Bands — the full-bleed colour blocks
   ========================================================================== */
.band { padding: var(--pad-band) var(--gutter); }
.band--ink { background: var(--ink); color: var(--paper); }
.band--blue { background: var(--blue); color: var(--paper); }

.band--ink .h-sec, .band--ink .h-band, .band--blue .h-sec, .band--blue .h-band { color: var(--paper); }

.band__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 48px);
  align-items: center;
}
.band__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
}
/* Centred CTA band. The max-widths sit on the children, not the wrapper:
   `ch` resolves against each element's own font size, so a 44ch cap on the
   wrapper would strangle a 60px headline. */
.band__cta { text-align: center; }
.band__cta .h-band { max-width: 18ch; margin: 0 auto 20px; }
.band__cta .band__lede { max-width: 44ch; margin: 0 auto 32px; }

.band__lede { opacity: 0.85; margin: 0 0 32px; font-size: 17px; }
.band--ink .band__lede { color: var(--muted-on-ink); opacity: 1; }

.shot { border-radius: var(--r); width: 100%; }
.shot--framed { border: var(--bw) solid var(--ink); }
.shot--framed-ink { border: var(--bw) solid var(--line-on-ink); }
.shot__cap { font-size: 14px; color: var(--muted-on-ink); padding-top: 12px; }

/* Cards sitting on an ink band. */
.card--on-ink {
  border: var(--bw) solid var(--line-on-ink);
  border-radius: var(--r);
  background: transparent;
  padding: 26px;
}
.card--on-ink .card__label {
  font-size: 15px;
  font-weight: 700;
  color: var(--lime);
  margin-bottom: 10px;
}
.card--on-ink p { font-size: 15px; line-height: 1.55; color: var(--muted-on-ink); }

/* ==========================================================================
   Services
   ========================================================================== */
.svc-list { display: flex; flex-direction: column; gap: var(--gap); }

.svc-row {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  padding: clamp(28px, 3vw, 40px);
  display: grid;
  grid-template-columns: 80px 1fr 260px;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}
.svc-row__n {
  font-size: clamp(32px, 3.6vw, 44px);
  line-height: 1;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.03em;
}
.svc-row__title { margin-bottom: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: start; }
.chip {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* Five-step process strip, hairlines via gap. */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--bw);
  background: var(--line-on-ink);
  border: var(--bw) solid var(--line-on-ink);
  border-radius: var(--r);
  overflow: hidden;
  list-style: none;
  padding: 0;
  margin: 0;
}
.steps__cell { background: var(--ink); padding: 24px 20px; }
.steps__title { font-size: 15px; font-weight: 700; color: var(--lime); margin-bottom: 10px; }
.steps__text { font-size: 14px; line-height: 1.5; color: var(--muted-on-ink); }

.band__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: 44px;
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  align-items: stretch;
  /* Room for the badge, which hangs 14px above its card. */
  padding-top: 14px;
}

.price-card {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  padding: clamp(28px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  position: relative;
}
.price-card--feature { background: var(--blue); color: var(--paper); }

.price-card__badge {
  position: absolute;
  top: -14px;
  left: 36px;
  background: var(--lime);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-sm);
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}
.price-card__tier { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
.price-card__fig {
  font-size: clamp(40px, 4.4vw, 52px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.price-card__meta { font-size: 14px; color: var(--muted); margin: 4px 0 22px; }
.price-card--feature .price-card__meta { color: var(--paper); opacity: 0.8; }

.price-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--muted);
  flex: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}
.price-card--feature .price-card__list { color: var(--paper); opacity: 0.92; }
.price-card__list li::before { content: '— '; }

.price-card .btn { margin-top: 24px; }

/* After-launch cards: figure beside description. */
.after {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  padding: clamp(24px, 3vw, 32px);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(18px, 2.4vw, 24px);
  align-items: start;
}
.after__fig {
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.after__per { font-size: 13px; color: var(--muted); }
.after__title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }

/* FAQ question. Same weight as .after__title but with its own name, because
   the two move independently. */
.faq__q { font-size: 18px; line-height: 1.35; font-weight: 700; margin-bottom: 10px; }

/* ==========================================================================
   About
   ========================================================================== */
.spec__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: var(--bw) solid var(--paper);
}
.spec__row:last-child { border-bottom: 0; }
.spec__key { font-size: 14px; color: var(--muted); }
.spec__val { font-size: 20px; font-weight: 700; white-space: nowrap; }

.beliefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px clamp(28px, 4vw, 48px);
  list-style: none;
  padding: 0;
  margin: 0;
}
.beliefs li {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.01em;
  border-left: 3px solid var(--lime);
  padding-left: 20px;
}

/* Work page: the one real project. */
.case-card {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  overflow: hidden;
}
.case-card:hover { opacity: 1; }
.case-card:hover .case-card__more { text-decoration: underline; }
.case-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-right: var(--bw) solid var(--ink);
}
.case-card__body {
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
}
.case-card__kicker { font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 10px; }
.case-card__title { font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: -0.025em; font-weight: 700; margin-bottom: 12px; }
.case-card__more { font-size: 16px; font-weight: 700; color: var(--blue); }

.slot__label {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 10px;
}
.card--lime .slot__label { color: var(--lime-ink); }

/* Case study "The problem": label column beside prose. */
.split-label {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(28px, 4vw, 56px);
}

.scores { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.score {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  padding: 22px;
  text-align: center;
}
.score--lime { background: var(--lime); }
.score__n {
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--blue);
}
.score--lime .score__n { color: var(--lime-ink); }
.score__label { font-size: 14px; font-weight: 500; color: var(--muted); margin-top: 6px; }
.score--lime .score__label { color: var(--lime-ink); }

.backlink {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 24px;
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--bw);
  background: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  overflow: hidden;
}
.contact-cell { background: var(--card); padding: 22px 24px; }
.contact-cell__key {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blue);
  margin-bottom: 6px;
}
.contact-cell__val { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }

.form {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  background: var(--card);
  padding: clamp(24px, 3vw, 36px);
}
.form__title { font-size: clamp(20px, 2vw, 24px); letter-spacing: -0.02em; font-weight: 700; margin-bottom: 24px; }
.form__stack { display: flex; flex-direction: column; gap: 18px; }
.field__label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; }

.input {
  width: 100%;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-sm);
  padding: 13px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  background: var(--card);
}
.input::placeholder { color: var(--muted); opacity: 1; }
textarea.input { resize: vertical; min-height: 92px; }

/* Home-count picker: real radio inputs, so it works with JavaScript off.
   The input is visually hidden but still focusable and still the thing that
   receives the focus ring, via :focus-visible + label. */
.homes__legend { font-size: 13px; font-weight: 700; margin-bottom: 8px; padding: 0; }
.homes__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.homes__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.homes__chip {
  display: inline-block;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-sm);
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  background: var(--card);
  color: var(--ink);
  transition: background-color 0.12s var(--ease), color 0.12s var(--ease);
}
.homes__input:checked + .homes__chip {
  background: var(--blue);
  color: var(--paper);
  font-weight: 700;
}
.homes__input:focus-visible + .homes__chip {
  outline: var(--bw) solid var(--ink);
  outline-offset: 3px;
}

.form__submit {
  background: var(--lime);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-md);
  padding: 14px 0;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  width: 100%;
  cursor: pointer;
  transition: transform 0.12s var(--ease);
}
.form__submit:active { transform: translateY(1px); }
.form__note { font-size: 13px; color: var(--muted); text-align: center; }

/* ==========================================================================
   Footer
   ========================================================================== */
.sitefoot {
  padding: 28px var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}
.sitefoot--ruled { border-top: var(--bw) solid var(--ink); }
.sitefoot__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* ==========================================================================
   Motion
   Entrances only, and only on surfaces a first-time visitor sees once.
   [data-reveal] is hidden by site.js, not here, so a script failure leaves
   the page fully readable rather than blank.
   ========================================================================== */
[data-reveal] {
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Responsive
   The design export contains no media queries at all — a hard 48px gutter,
   fixed 1280px, and fixed grid tracks. Everything below is new work.
   ========================================================================== */

/* --- 1080: the five-step strip is the first thing to give --------------- */
@media (max-width: 1080px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .svc-row { grid-template-columns: 64px 1fr 220px; }
  .scores { grid-template-columns: repeat(3, 1fr); }
}

/* --- 900: the two-column splits stack ---------------------------------- */
@media (max-width: 900px) {
  .proof { grid-template-columns: 1fr; }
  .hero--split, .hero--split-wide { grid-template-columns: 1fr; }
  .band__split { grid-template-columns: 1fr; }
  .founder { grid-template-columns: 1fr; }
  .split-label { grid-template-columns: 1fr; gap: 20px; }
  .price-grid { grid-template-columns: 1fr; }
  .case-card { grid-template-columns: 1fr; }
  .case-card__img {
    border-right: 0;
    border-bottom: var(--bw) solid var(--ink);
    max-height: 380px;
  }
  .svc-row { grid-template-columns: 64px 1fr; }
  .svc-row .chips { grid-column: 2; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .band__row { flex-direction: column; align-items: flex-start; }
  .band__head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
}

/* --- 760: the navigation collapses ------------------------------------- */
@media (max-width: 760px) {
  .nav { display: none; }
  .menu { display: block; }

  .hero__grid { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .hero__grid .btn { display: block; width: 100%; }

  .h-hero, .h-page { max-width: none; }

  .beliefs { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .scores { grid-template-columns: repeat(2, 1fr); }

  .sitefoot { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* --- 560: everything is one column -------------------------------------- */
@media (max-width: 560px) {
  .statrow { grid-template-columns: 1fr; }
  .statrow--mini { grid-template-columns: repeat(3, 1fr); }
  .statrow__cell { padding: 24px var(--gutter); }
  .statrow--mini .statrow__cell { padding: 12px 10px; }

  .steps { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .scores { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }

  .svc-row { grid-template-columns: 1fr; gap: 16px; }
  .svc-row .chips { grid-column: auto; }

  .after { grid-template-columns: 1fr; gap: 12px; }

  .frame__bar { flex-direction: column; gap: 4px; }

  .price-card__badge { left: 24px; }
}