/* ==========================================================================
   Red 4 Digital — design system
   --------------------------------------------------------------------------
   Light and open by default, with white and warm off-white alternating band by
   band so the page is easy to scan on the way down.

   Four colours only — red, gold, black, white. Black appears in exactly one
   place: the hero, where it works as a translucent veil over the photograph
   rather than a flat fill. Nothing else on the site is dark. The bands that
   need to stand apart from white — the opportunity section, the closing call
   to action, the footer — use the light end of the gold scale with normal
   dark text, so the page stays open the whole way down.

   Red carries action; gold carries emphasis and numbers. The research behind
   this rebuild found the entire AI-consultancy category sitting in corporate
   blue, so the red is a deliberate differentiator, not decoration.
   ========================================================================== */

:root {
  /* Brand */
  --red: #c41e25;
  --red-dark: #a3161c;
  --red-tint: #fdf2f2;
  --gold: #b08420;
  --gold-bright: #d9ad3f;
  --gold-tint: #fbf6e9;

  /* A full gold scale, dark end first. Black is now reserved for the hero
     alone; every other dark band and the footer are built from these, so the
     page reads as one warm family rather than as black with gold on top.
     The deep end is a true bronze — dark enough for white text at AA, warm
     enough that it never reads as grey. */
  /* The light scale, used for every gold band and the footer. */
  --gold-100: #faf4e4;
  --gold-150: #f6eee0;
  --gold-200: #f1e5c4;

  /* Sampled straight off the R4 mark — the gold in the logo itself. Reserved
     for the closing call to action, which is the one band that should stop
     you, so it is the one band that carries the full-strength colour. */
  --gold-logo: #a37f4a;
  --gold-logo-lift: #b08d5e;
  --gold-logo-deep: #957240;
  /* On that gold, text has to go almost black to clear 4.5:1. A mid brown
     fails outright, so the deep band gets its own muted colour. */
  --on-gold-deep: #241d10;
  --gold-300: #e7d5a6;
  --gold-600: #8f6a15;
  --gold-700: #6f5211;

  /* Lines and muted text on the light gold bands. Both are mixed from the gold
     rather than from neutral grey, which reads as dirt against a warm ground. */
  /* Lines and muted text on the light gold bands. Both are mixed from the gold
     rather than from neutral grey, which reads as dirt against a warm ground. */
  --on-gold-line: #e8dcbc;
  --on-gold-muted: #6b6250;

  /* Neutrals, all mixed toward the brand black rather than pure grey */
  --ink: #0b0b0c;
  --ink-soft: #1b1b1f;
  --text: #17171b;
  --text-muted: #5c5c66;
  --text-faint: #8a8a93;
  --line: #e5e3df;
  --line-strong: #d2cfc9;
  --paper: #ffffff;
  --paper-alt: #f7f6f3;
  --paper-warm: #f2efe9;

  /* On dark */
  --on-dark: #ffffff;
  --on-dark-muted: #a9a9b2;
  --on-dark-line: rgba(255, 255, 255, 0.14);

  --wrap: 1240px;
  --wrap-narrow: 820px;
  --radius: 4px;
  --radius-lg: 8px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(11, 11, 12, 0.04), 0 8px 24px rgba(11, 11, 12, 0.06);
  --shadow-float: 0 4px 12px rgba(11, 11, 12, 0.08), 0 24px 64px rgba(11, 11, 12, 0.18);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 0; }

/* ── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.6vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }
h4 { font-size: 1.05rem; }

h1 em, h2 em, h3 em {
  font-style: normal;
  color: var(--red);
}

p { text-wrap: pretty; }

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 62ch;
}

/* The small uppercase label that opens most sections. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--red); flex: none;
}
.on-dark .eyebrow { color: var(--gold-300); }
.on-dark .eyebrow::before { background: var(--gold-300); }

/* ── Layout ──────────────────────────────────────────────────────────────── */
.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 44px, var(--wrap-narrow)); margin-inline: auto; }

.band { padding-block: clamp(64px, 8vw, 118px); }
.band--alt { background: var(--paper-alt); }
.band--warm { background: var(--paper-warm); }
.band--tight { padding-block: clamp(44px, 5vw, 72px); }

/* The gold bands are light — a warm cream, not a dark fill. A slow diagonal
   gradient across the light end of the scale keeps a full-width band from
   going flat, and hairline borders stop it bleeding into the white either
   side. Text stays the normal dark. */
.band--gold {
  background: linear-gradient(168deg, var(--gold-100) 0%, var(--gold-150) 55%, var(--gold-200) 100%);
  color: var(--text);
  border-block: 1px solid var(--on-gold-line);
}
.band--gold .lead, .band--gold p { color: var(--on-gold-muted); }

/* Full-strength logo gold. Used once, on the closing call to action. */
.band--gold-deep {
  background: linear-gradient(168deg, var(--gold-logo-lift) 0%, var(--gold-logo) 55%, var(--gold-logo-deep) 100%);
  color: var(--ink);
  border-block: 1px solid rgba(0, 0, 0, 0.12);
}
.band--gold-deep .lead, .band--gold-deep p { color: var(--on-gold-deep); }
/* Red on gold sits at 1.9:1 and vanishes. White carries the button instead and
   keeps the red where it still reads — in the label. */
.band--gold-deep .btn--primary { background: #fff; color: var(--red); }
.band--gold-deep .btn--primary:hover { background: var(--ink); color: #fff; }
.band--gold-deep .link-arrow { color: var(--ink); }

/* Kept for the hero, the only dark ground left on the site. */
.on-dark { color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--on-dark); }
.on-dark .lead, .on-dark p { color: var(--on-dark-muted); }

.section-head { max-width: 760px; margin-bottom: clamp(38px, 5vw, 62px); }
.section-head h2 + .lead { margin-top: 18px; }
/* Centred variant. The auto margins are needed twice over: once on the block,
   which is narrower than the wrap it sits in, and again on its children —
   .lead carries its own 62ch cap, so without this it centres its text inside a
   box still sitting flush against the left edge. */
.section-head--centre { margin-inline: auto; text-align: center; }
.section-head--centre > * { margin-inline: auto; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform 0.25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--red); color: #fff; }
.btn--primary:hover { background: var(--red-dark); }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-soft); }

.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: #96701a; }

.btn--line { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: var(--ink); color: #fff; }

/* The hero is dark but is not marked .on-dark — the white offer card lives
   inside it and must keep its light styling. Buttons are called out directly. */
.on-dark .btn--line,
.hero .btn--line { border-color: var(--on-dark-line); color: #fff; }
.on-dark .btn--line:hover,
.hero .btn--line:hover { background: #fff; color: var(--ink); border-color: #fff; }

.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 18px 32px; font-size: 1rem; }

/* Inline text link with an arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600; font-size: 0.92rem;
  color: var(--red);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease), gap 0.2s var(--ease);
}
.link-arrow:hover { border-color: currentColor; gap: 11px; }
.link-arrow svg { width: 15px; height: 15px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(14px);
}

/* The brand rule. Long red, a short gold centred on the screen, then long
   black. Sits on the sticky header rather than the hero, so it is under the
   bar on every page and stays there while scrolling — it also serves as the
   header's bottom edge, which is why there is no separate border. */
.site-header::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--red) 0%, var(--red) 45%,
    var(--gold) 45%, var(--gold) 55%,
    var(--ink) 55%, var(--ink) 100%);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; height: 76px;
}
.header-logo img { height: var(--logo-h, 34px); width: auto; }

.nav-main { display: flex; align-items: center; gap: 4px; }
.nav-main a {
  padding: 9px 14px; border-radius: var(--radius);
  font-size: 0.94rem; font-weight: 500; color: var(--text);
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav-main a:hover { background: var(--paper-alt); color: var(--ink); }
.nav-main a[aria-current="page"] { color: var(--red); font-weight: 600; }

.header-right { display: flex; align-items: center; gap: 14px; }
.header-phone {
  font-family: "Space Grotesk", sans-serif; font-weight: 600;
  font-size: 0.92rem; color: var(--ink); white-space: nowrap;
}
.header-phone:hover { color: var(--red); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 9px; cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }

@media (max-width: 1040px) {
  .nav-main, .header-phone { display: none; }
  .nav-toggle { display: block; }
}

/* Mobile drawer */
.nav-drawer {
  position: fixed; inset: 76px 0 0; z-index: 99;
  background: var(--paper);
  padding: 28px 22px 40px;
  overflow-y: auto;
  transform: translateY(-8px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}
.nav-drawer.open { opacity: 1; visibility: visible; transform: none; }
.nav-drawer a {
  display: block; padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.22rem; font-weight: 600;
}
.nav-drawer .btn { margin-top: 26px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  /* The black is a translucent veil rather than a wash over a faded picture:
     the image runs at full strength underneath and this controls how much
     shows through. Heaviest on the left where the headline sits, lifting
     across to the right so the photograph reads around the offer card.
     The lightest stop is still 0.40, which keeps white text on the right-hand
     side of the band above AA. */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg,
    rgba(11, 11, 12, 0.93) 0%,
    rgba(11, 11, 12, 0.88) 32%,
    rgba(11, 11, 12, 0.66) 62%,
    rgba(11, 11, 12, 0.40) 100%);
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  background: var(--ink);
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  /* Favours the right of the frame, where the software on screen actually is. */
  object-position: 60% center;
}



.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(min(340px, 100%), 0.85fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 108px);
}
.hero-copy h1 { color: #fff; margin-bottom: 24px; }
.hero-copy h1 em { color: var(--gold-bright); }
.hero-copy .lead { color: var(--on-dark-muted); font-size: clamp(1.05rem, 1.4vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* The white offer card, floated over the dark band. */
.offer-card {
  background: #fff;
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: clamp(26px, 3vw, 36px);
  border-top: 4px solid var(--red);
}
.offer-card .eyebrow { color: var(--red); margin-bottom: 12px; }
.offer-card h2 {
  font-size: clamp(1.3rem, 1.9vw, 1.6rem);
  color: var(--ink);
  margin-bottom: 16px;
}
.offer-price {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 18px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.offer-price .amount {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1;
}
.offer-price .note { font-size: 0.88rem; color: var(--text-muted); }
.offer-card p { font-size: 0.96rem; color: var(--text-muted); margin-bottom: 18px; }

.offer-guarantee {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--gold-tint);
  border-left: 3px solid var(--gold);
  padding: 14px 16px; margin-bottom: 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.offer-guarantee svg { width: 18px; height: 18px; color: var(--gold); flex: none; margin-top: 2px; }
.offer-guarantee strong {
  font-size: 0.93rem; font-weight: 600; color: var(--ink); line-height: 1.5;
}
.offer-foot {
  font-size: 0.83rem; color: var(--text-faint);
  margin: 14px 0 0; text-align: center;
}

/* Trust bar under the hero */
/* The column count comes from how many items are actually switched on, so
   turning one off splits the rest equally rather than leaving a gap where it
   used to be. Both counts are emitted by the template — CSS cannot do the
   arithmetic inside repeat(). */
.trust-bar {
  border-top: 1px solid var(--on-dark-line);
  display: grid;
  grid-template-columns: repeat(var(--trust-cols, 4), minmax(0, 1fr));
}
.trust-item { padding: 26px 26px 30px; }
.trust-item + .trust-item { border-left: 1px solid var(--on-dark-line); }
.trust-item .value {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem); font-weight: 700;
  letter-spacing: -0.02em; color: var(--gold-bright); margin-bottom: 7px;
}
.trust-item .label { font-size: 0.88rem; color: var(--on-dark-muted); line-height: 1.5; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .trust-bar { grid-template-columns: repeat(var(--trust-cols-sm, 2), minmax(0, 1fr)); }
  /* At two columns every odd item starts a row, whatever the total. */
  .trust-item:nth-child(odd) { border-left: none; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--on-dark-line); }
}
@media (max-width: 560px) {
  .trust-bar { grid-template-columns: 1fr; }
  .trust-item + .trust-item { border-left: none; border-top: 1px solid var(--on-dark-line); }
}

/* ── Cards & grids ───────────────────────────────────────────────────────── */
/* Explicit column counts rather than auto-fit. auto-fit decides the count from
   available width, which orphaned the fourth service card into a row of its
   own at desktop widths — four items in a three-column grid. Fixed counts with
   named breakpoints keep every grid balanced at every size. */
.grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1000px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}
.grid > * { background: var(--paper); padding: clamp(26px, 2.8vw, 38px); }
.band--alt .grid > * { background: var(--paper-alt); }

/* Numbered service card — the 01/02/03 pattern */
.svc-card { display: flex; flex-direction: column; position: relative; transition: background 0.25s var(--ease); }
.svc-card:hover { background: var(--red-tint); }
.svc-num {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--red); margin-bottom: 16px;
}
.svc-card h3 { margin-bottom: 12px; }
.svc-card p { color: var(--text-muted); font-size: 0.97rem; margin-bottom: 20px; flex: 1; }

/* Promise / feature tiles */
.tile h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 11px; }
.tile h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold); flex: none;
}
.tile p { color: var(--text-muted); font-size: 0.97rem; }

/* Stat tiles */
.stat .value {
  display: block; font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 700;
  letter-spacing: -0.03em; color: var(--gold); line-height: 1; margin-bottom: 14px;
}
/* Deepened on the light ground: the mid gold cleared 3:1 against bronze but
   not against cream. These are large display figures, so 3:1 is the bar. */
.band--gold .stat .value { color: var(--gold-600); }
.stat p { font-size: 0.95rem; color: var(--text-muted); }
.band--gold .stat p { color: var(--on-gold-muted); }
.band--gold .grid { background: var(--on-gold-line); border-color: var(--on-gold-line); }
.band--gold .grid > * { background: rgba(255, 255, 255, 0.62); }

/* ── AI model strip ──────────────────────────────────────────────────────── */
.models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
@media (max-width: 1000px) { .models { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .models { grid-template-columns: 1fr; } }
.model { background: var(--paper); padding: 30px 28px; }
.model-name {
  display: flex; align-items: baseline; gap: 9px; margin-bottom: 12px;
}
.model-name strong {
  font-family: "Space Grotesk", sans-serif; font-size: 1.15rem;
  font-weight: 700; letter-spacing: -0.02em; color: var(--ink);
}
.model-name span { font-size: 0.8rem; color: var(--text-faint); }
.model p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; }
/* The vendor mark sits where the red/gold rule used to, so the card keeps its
   rhythm. Uploaded icons are painted through a mask rather than shown directly
   — that way any SVG comes out in gold regardless of its own colours. */
.model-mark {
  display: block; width: 27px; height: 27px; margin-bottom: 16px;
  color: var(--gold); flex: none;
}
.model-mark--upload {
  background: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}

/* ── Split comparison (the opportunity band) ─────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--on-gold-line); border: 1px solid var(--on-gold-line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.split-side { background: rgba(255, 255, 255, 0.62); padding: clamp(26px, 3vw, 40px); }
.split-side--win { background: linear-gradient(160deg, rgba(196, 30, 37, 0.07), rgba(255, 255, 255, 0.62) 70%); }
.split-side h3 {
  font-family: "Space Grotesk", sans-serif; font-size: 1.15rem;
  margin-bottom: 20px; color: var(--ink);
}
.split-side--lose h3 { color: var(--text-muted); }
.split-side li {
  padding: 12px 0 12px 28px; position: relative;
  border-top: 1px solid var(--on-gold-line);
  color: var(--on-gold-muted); font-size: 0.96rem; line-height: 1.6;
}
.split-side li:first-child { border-top: none; }
.split-side li::before {
  position: absolute; left: 0; top: 12px; font-weight: 700; font-size: 1rem;
}
.split-side--lose li::before { content: "↓"; color: #a89a7c; }
.split-side--win li::before { content: "↑"; color: var(--red); }
.split-side--win li { color: var(--text); }

.punch { margin-top: clamp(40px, 5vw, 66px); max-width: 900px; }
.punch p:first-child {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.35rem, 2.7vw, 2rem); line-height: 1.35;
  letter-spacing: -0.02em; color: var(--ink); font-weight: 500; margin-bottom: 16px;
}
.punch p + p { color: var(--on-gold-muted); max-width: 62ch; }

/* ── Proof ───────────────────────────────────────────────────────────────── */
.client-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (max-width: 900px) { .client-list { grid-template-columns: 1fr; } }
.client { background: var(--paper); padding: clamp(24px, 2.6vw, 34px); }
.client h3 { font-size: 1.08rem; margin-bottom: 10px; }
.client h3::after {
  content: ""; display: block; width: 30px; height: 2px;
  background: var(--gold); margin-top: 12px;
}
.client p { font-size: 0.93rem; color: var(--text-muted); }

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; margin-top: 22px; }
.product {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--paper);
  transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.product:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.product-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper-warm); }
.product-img img { width: 100%; height: 100%; object-fit: cover; }
.product-body { padding: 22px 24px 26px; }
.product-body h3 { font-size: 1.08rem; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.product-body h3 svg { width: 15px; height: 15px; color: var(--text-faint); }
.product-body p { font-size: 0.93rem; color: var(--text-muted); }

/* ── Tech stack chips ────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  padding: 9px 16px; border: 1px solid var(--line-strong);
  border-radius: 100px; font-size: 0.88rem; font-weight: 500;
  color: var(--text-muted); background: var(--paper);
}
.band--gold .chip { border-color: var(--on-gold-line); color: var(--on-gold-muted); background: rgba(255, 255, 255, 0.6); }
.on-dark .chip { border-color: var(--on-dark-line); color: var(--on-dark-muted); background: transparent; }

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.cta-band { text-align: center; }
.cta-band h2 { margin-bottom: 18px; }
.cta-band .lead { margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 32px; }
.cta-band .link-arrow { color: var(--red); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg, var(--gold-150) 0%, var(--gold-200) 100%);
  color: var(--on-gold-muted);
  border-top: 1px solid var(--on-gold-line);
  padding-top: clamp(52px, 6vw, 80px);
}
/* Explicit column counts. The previous rule combined a 240px minimum first
   column with auto-fit 150px columns, giving the grid an 840px floor it could
   not shrink below — which pushed every page 71px wider than a phone screen. */
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: 48px;
}
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
.footer-brand img { height: var(--logo-footer-h, 40px); width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: 0.92rem; line-height: 1.7; max-width: 38ch; }
.footer-col h5 {
  font-family: "Space Grotesk", sans-serif; font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 16px;
}
.footer-col li { margin-bottom: 10px; font-size: 0.91rem; line-height: 1.6; }
.footer-col a:hover { color: var(--red); }

/* Black band. The one place besides the hero where the site goes dark, and it
   earns it: this is the memorial note, not a marketing one. */
.footer-four {
  background: var(--ink); color: var(--on-dark);
  padding-block: 40px;
}
.footer-four-inner {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px); align-items: start;
}

/* The memorial clock. Deliberately quiet — it sits at the edge of the band and
   is never the first thing read. */
.munich { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.munich-clock { width: 62px; height: auto; color: var(--gold-300); opacity: 0.55; }
.munich figcaption {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark-muted); opacity: 0.8; white-space: nowrap;
}
.footer-four p { color: var(--on-dark-muted); }
/* The R4 monogram sits with the heading it belongs to — the Eddie Colman
   note is the one place on the site where the mark carries actual meaning. */
/* Stacked rather than side by side: at this size the monogram no longer sits
   comfortably on a line with the heading. */
.footer-four-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
/* Plain on white — both halves of the monogram read as drawn, so it needs no
   tile behind it. */
.r4-mark { flex: none; display: inline-flex; }
.r4-mark img { width: var(--mark-h, 96px); height: var(--mark-h, 96px); display: block; }
.footer-four h5 {
  font-family: "Space Grotesk", sans-serif; font-size: 0.78rem;
  font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-300);
}
.footer-four p { font-size: 0.89rem; line-height: 1.7; max-width: 74ch; }

/* Red closing strip — the last step down the page. A thin white rule separates
   it from the black band above, so the two solid colours never touch. */
.footer-bottom {
  background: var(--red);
  border-top: 3px solid #fff;
  color: rgba(255, 255, 255, 0.88);
  padding-block: 22px;
  font-size: 0.84rem;
}
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between;
}
.footer-bottom a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 980px) {
  .footer-four-inner { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
  .munich { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; }
}
@media (max-width: 700px) {
  .footer-four-inner { grid-template-columns: 1fr; }
}

/* ── Reveal on scroll ─────────────────────────────────────────────────────
   Gated behind the .js class, which the inline script sets before first paint.
   Without it every .reveal stays fully visible — so a JS error, a blocked
   script or a text-only browser can never leave the page blank below the fold.
   The content is in the HTML either way; only the animation is conditional. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Page hero (every page except the homepage) ───────────────────────────── */
/* Light, not dark. The black hero is the homepage's alone; inner pages open on
   paper so the run down the site stays open. */
.page-hero {
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-alt) 100%);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 86px);
}
.page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(min(320px, 100%), 0.8fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.page-hero h1 { margin-bottom: 20px; }
.page-hero .lead { margin-bottom: 4px; }
.page-hero .hero-actions { margin-top: 30px; }
@media (max-width: 900px) {
  .page-hero-inner { grid-template-columns: 1fr; }
}

/* The priced offer card, reused from the homepage hero on a light ground. */
.price-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--red);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 2.6vw, 32px);
  box-shadow: var(--shadow-card);
}
.price-card .eyebrow { margin-bottom: 10px; }
.price-card p { font-size: 0.96rem; color: var(--text-muted); margin-bottom: 18px; }

/* ── Numbered process ────────────────────────────────────────────────────── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px;
  background: var(--on-gold-line);
  border: 1px solid var(--on-gold-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  counter-reset: step;
}
.step { background: rgba(255, 255, 255, 0.62); padding: clamp(24px, 2.6vw, 34px); }
.step-label {
  display: inline-block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 14px;
}
.step h3 { font-size: 1.1rem; margin-bottom: 10px; }
.step p { font-size: 0.95rem; color: var(--on-gold-muted); }

/* ── In scope / out of scope ─────────────────────────────────────────────── */
/* The single most trust-building block on a fixed-price page: it answers the
   question every buyer is actually asking — what exactly do I get. */
.scope { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(24px, 3vw, 48px); }
.scope-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.05rem; padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.scope-head::before {
  content: ""; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: var(--red);
}
.scope-head--out::before { background: var(--text-faint); }
.scope li {
  position: relative; padding: 12px 0 12px 30px;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem; color: var(--text);
}
.scope li::before {
  content: "✓"; position: absolute; left: 2px; top: 12px;
  color: var(--red); font-weight: 700;
}
.scope-out li { color: var(--text-muted); }
.scope-out li::before { content: "—"; color: var(--text-faint); }

.stat-note { margin-top: 20px; font-size: 0.85rem; color: var(--text-faint); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); max-width: 900px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem; font-weight: 600; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); }
.faq-icon {
  position: relative; width: 16px; height: 16px; flex: none;
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; background: var(--red);
  transition: transform 0.25s var(--ease);
}
.faq-icon::before { left: 0; top: 7px; width: 16px; height: 2px; }
.faq-icon::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-icon::after { transform: scaleY(0); }
.faq-body { padding: 0 0 22px; max-width: 72ch; }
.faq-body p { color: var(--text-muted); }

/* ── About: founder ──────────────────────────────────────────────────────── */
.founder { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.founder-photo { margin: 0; }
.founder-photo img {
  width: 100%; border-radius: var(--radius-lg);
  background: var(--paper-warm); object-fit: cover;
}
.founder-photo figcaption {
  margin-top: 12px; font-size: 0.84rem; color: var(--text-faint);
  font-family: "Space Grotesk", sans-serif; letter-spacing: 0.04em;
}
.founder-text h2 { margin-bottom: 22px; }
.founder-text p { color: var(--text-muted); margin-bottom: 18px; max-width: 66ch; }
.founder-text p strong { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } }

/* ── About: the Eddie Colman band ────────────────────────────────────────── */
.band--eddie { background: var(--ink); color: var(--on-dark); padding-block: clamp(56px, 7vw, 96px); }
.band--eddie h2 { color: #fff; }
.band--eddie p { color: var(--on-dark-muted); margin-bottom: 16px; max-width: 62ch; }
.band--eddie .eyebrow { color: var(--gold-300); }
.band--eddie .eyebrow::before { background: var(--gold-300); }
.eddie { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(28px, 4vw, 56px); align-items: center; }
.eddie-mark img { width: var(--mark-about-h, 110px); height: var(--mark-about-h, 110px); }
.munich--large .munich-clock { width: 92px; }
@media (max-width: 900px) {
  .eddie { grid-template-columns: auto minmax(0, 1fr); }
  .munich--large { grid-column: 1 / -1; flex-direction: row; gap: 16px; }
}
@media (max-width: 560px) {
  .eddie { grid-template-columns: 1fr; }
  .eddie-mark img { width: 84px; height: 84px; }
}

/* ── Contact ─────────────────────────────────────────────────────────────── */
.contact-details { margin-top: 34px; border-top: 1px solid var(--line); }
.contact-details li {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 0.96rem; color: var(--text-muted);
}
.contact-label {
  font-family: "Space Grotesk", sans-serif; font-size: 0.74rem;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); padding-top: 3px;
}
.contact-details a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }
.contact-details a:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 480px) { .contact-details li { grid-template-columns: 1fr; gap: 4px; } }

.form-card {
  background: var(--paper); border: 1px solid var(--line);
  border-top: 4px solid var(--red); border-radius: var(--radius-lg);
  padding: clamp(24px, 2.8vw, 36px); box-shadow: var(--shadow-card);
}
.form-card h2 { font-size: 1.4rem; margin-bottom: 8px; }
.form-intro { font-size: 0.94rem; color: var(--text-muted); margin-bottom: 24px; }

.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }
.field label {
  display: block; margin-bottom: 6px;
  font-size: 0.85rem; font-weight: 500; color: var(--text);
}
.req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--paper); font-size: 0.97rem;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(196, 30, 37, 0.12);
}
.field textarea { resize: vertical; min-height: 120px; }

/* Honeypot. Off-screen rather than display:none — some bots skip hidden
   fields, and this one exists precisely to be filled in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin-top: 14px; font-size: 0.92rem; min-height: 1.2em; }
.form-status.is-error { color: var(--red); }
.form-status.is-ok { color: #1c7a3e; font-weight: 500; }
.form-small { margin-top: 14px; font-size: 0.8rem; color: var(--text-faint); line-height: 1.6; }

/* ── Legal documents ─────────────────────────────────────────────────────── */
.legal-updated { margin-top: 10px; font-size: 0.9rem; color: var(--text-faint); }
.legal-doc h2 {
  font-size: 1.3rem; margin: 40px 0 14px;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.legal-doc h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.legal-doc p { color: var(--text-muted); margin-bottom: 16px; }
.legal-doc ul { margin: 0 0 18px; }
.legal-doc li {
  position: relative; padding: 6px 0 6px 22px; color: var(--text-muted);
}
.legal-doc li::before {
  content: ""; position: absolute; left: 2px; top: 15px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.legal-doc a { color: var(--red); border-bottom: 1px solid currentColor; }

/* ── Insights ────────────────────────────────────────────────────────────── */
.post-date {
  display: block; margin-top: auto; padding-top: 14px;
  font-size: 0.83rem; color: var(--text-faint);
}
.post-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; font-size: 0.88rem; color: var(--text-faint);
}
.post-flag {
  padding: 3px 10px; border-radius: 100px;
  background: var(--gold-tint); color: var(--gold-600);
  font-size: 0.78rem; font-weight: 600;
}
.post-hero-img { margin-top: -20px; }
.post-hero-img img { width: 100%; border-radius: var(--radius-lg); }

.post-body { font-size: 1.06rem; line-height: 1.75; }
.post-body > p { color: var(--text-muted); margin-bottom: 22px; }
.post-body > h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin: 42px 0 16px; }
.post-body > h3 { margin: 32px 0 12px; }
.post-body ul, .post-body ol { margin: 0 0 22px; }
.post-body li {
  position: relative; padding: 6px 0 6px 24px; color: var(--text-muted);
}
.post-body li::before {
  content: ""; position: absolute; left: 2px; top: 16px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.post-body a { color: var(--red); border-bottom: 1px solid currentColor; }
.post-body blockquote {
  margin: 28px 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--gold);
  font-size: 1.12rem; color: var(--ink);
}
.post-body img { border-radius: var(--radius); margin: 24px 0; }
.post-source {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 0.9rem; color: var(--text-faint);
}
.post-source a { color: var(--red); }

/* ── Cookie consent ──────────────────────────────────────────────────────── */
/* Bottom-left rather than a full-width bar: it stays out of the way of the
   hero's call to action, which is the thing the page exists to get clicked. */
.consent {
  position: fixed; z-index: 200;
  left: 16px; bottom: 16px; width: min(100% - 32px, 420px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: 20px 22px;
}
.consent[hidden] { display: none; }
.consent p { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted); margin-bottom: 16px; }
.consent a { color: var(--red); border-bottom: 1px solid currentColor; }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .btn { padding: 10px 18px; font-size: 0.9rem; }

/* The full call to action wraps to two lines on a phone and pushes the header
   out of shape; below 620px it swaps to a short form rather than disappearing,
   because it is the main conversion route on the site. */
.nav-cta { white-space: nowrap; }
.nav-cta-short { display: none; }
@media (max-width: 620px) {
  .nav-cta-full { display: none; }
  .nav-cta-short { display: inline; }
  .nav-cta { padding: 11px 16px; font-size: 0.88rem; }
  .header-inner { gap: 12px; height: 68px; }
  .header-logo img { height: calc(var(--logo-h, 34px) * 0.82); }
}

/* Turnstile only renders anything on the rare occasion it needs a human, so
   this collapses to nothing on almost every visit rather than leaving a gap. */
.form-turnstile:not(:empty) { margin-bottom: 16px; }

/* ── Town pages ──────────────────────────────────────────────────────────── */

/* The local-market prose. Measured rather than full width — this is the section
   people actually read, so it gets a comfortable line length. */
.prose { max-width: 68ch; }
.prose p { font-size: 1.02rem; line-height: 1.75; color: var(--text-muted); }
.prose p + p { margin-top: 18px; }

/* A worked example. Same card language as .svc-card, but the outcome line is
   the point — it is what turns a description into a claim. */
.scenario {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 26px 22px;
}
.scenario h3 { font-size: 1.05rem; margin-bottom: 10px; }
.scenario p { font-size: 0.93rem; color: var(--text-muted); line-height: 1.65; }
.scenario-outcome {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--line);
  font-weight: 600; color: var(--ink);
}
.scenario-outcome svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--red); }

.local-proof { text-align: center; }
.local-proof h2 { margin-bottom: 14px; }
.local-proof p { color: var(--text-muted); line-height: 1.7; }

.areas-block { text-align: center; }
.areas-block h2 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); margin-bottom: 20px; }
.areas-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  list-style: none; padding: 0; margin: 0 0 18px;
}
.areas-list li {
  font-size: 0.85rem; color: var(--text-muted);
  border: 1px solid var(--line); border-radius: 100px; padding: 5px 13px;
  background: var(--paper);
}
.areas-note { font-size: 0.88rem; color: var(--text-faint); max-width: 60ch; margin: 0 auto; }

/* Towns with a page sit in the same list as towns without one, so a linked
   entry has to be visibly clickable at rest — the existing rule only changes
   colour on hover, which a reader never discovers. */
.footer-col a { text-decoration: none; }
.footer-col ul a { border-bottom: 1px solid currentColor; }