/* Self-hosted: no render-blocking request to a second origin, no second DNS+TLS.
   Latin subsets only, the site is English. Static woff2 pulled from Google Fonts. */
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/archivo-500-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: italic; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/archivo-500-italic-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; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/archivo-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/archivo-500-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; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/archivo-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/archivo-600-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; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/archivo-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/archivo-700-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; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400-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; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-500-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; }

/* ===========================================================
   The Systems Guy, brand-b. Deep blue and teal.
   Section-rhythm system unchanged from v7. Light dominant,
   midnight-blue bands as punctuation. Palette and typography
   are the only things that differ from v7.
   Grounds, the only background values on the page:
     paper   #FFFFFF   default section ground
     grey    #F1F4F7   alternating section ground, cool tinted
     ink     #050E1A   midnight blue: hero, testimonial, booking, footer
     surface #112232   cards inside ink sections only
     teal    #0B6E75   the single CTA interruption band and buttons
   Derived grounds, the proof columns in 05. Each is the teal
   above diluted into paper, so no new hue enters the page.
   These are the exact values color-mix produces, and the same
   literals are restated as the @supports fallback:
     proof col 1  #DDEBEC   teal 14% over paper
     proof col 2  #E9F2F3   teal  9% over paper
     proof col 3  #F3F8F8   teal  5% over paper
   Accent discipline: teal appears as hairlines, numbers, one
   clause per headline, and one full-bleed band. Amber #B06A09
   is used exactly once, on the Wrong Fuel Rescue LIVE dot.

   Gradients: the page uses flat fill everywhere with ONE
   sanctioned exception, the 01 hero. The hero sits on a
   documentary photograph, so the headline needs a scrim to hold
   contrast over the busy areas of the image. That scrim is a
   radial plus a linear wash, both of them the ink ground at
   partial alpha, no second hue and no glow. It is a legibility
   device over a photo, not decoration, and it is the only
   gradient in the file. Nothing else may take one.
   =========================================================== */

:root {
  /* grounds */
  --paper: #FFFFFF;
  --grey-ground: #F1F4F7;
  --ink: #050E1A;
  --surface: #112232;

  /* ink on light */
  --head-light: #050E1A;
  --body-light: #3F5261;
  --mono-light: #556877;
  --rule-light: #DCE3EA;

  /* ink on dark */
  --head-dark: #F4F8FA;
  --body-dark: #A8BCCC;
  --mono-dark: #93A9BA;
  --rule-dark: #22394C;

  /* accent, one hue, two tints: deep for light grounds, bright for dark */
  --blue: #0B6E75;         /* teal, deep. Accent on paper and grey. */
  --blue-hover: #09565C;
  --accent-bright: #35F0E0; /* teal, bright. Accent on midnight blue only. */
  --accent-head: #0D9B92;   /* teal, mid. Display-size headline accents on light grounds only.
                               3.43:1 on paper, 3.11:1 on grey. Darkened from #10A398, which
                               cleared paper but fell to 2.83:1 on the grey ground.
                               Never use below display size, it fails at body scale. */
  --green: #B06A09;        /* signal amber. ONCE per page. LIVE dot only.
                              Darkened from #C2740A, same amber hue (35 degrees),
                              because the dot sits on the proof section's first
                              column (#DDEBEC, teal 14% over paper) where #C2740A
                              measured 2.96:1 and missed the 3:1 non-text
                              threshold. #B06A09 measures 3.50:1 there and
                              4.28:1 on plain paper. */

  /* type families */
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-subhead: 'Archivo', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  /* Labels, eyebrows and small captions were IBM Plex Mono. Dropped: the
     monospace read as a technical label everywhere it appeared, and it
     appeared everywhere. Same family as body copy now, so the label
     treatment comes from case and tracking alone, not a second voice. */
  --font-mono: 'IBM Plex Sans', system-ui, sans-serif;

  /* type scale, retuned for Archivo and IBM Plex Sans */
  --fs-eyebrow: 0.75rem;
  --fs-body: 1.0625rem;
  --fs-body-lg: 1.1875rem;
  --fs-h3: 1.375rem;
  --fs-h2: 2.375rem;
  --fs-display: 3.75rem;

  /* rhythm */
  --gap: 1.5rem;
  --section-y: 7.5rem;
  --wrap: 1140px;
  --radius: 5px;
  /* media radius, shared by the layered figures in 03 and 04. Softer
     than the 5px button radius, which every button on the site depends on
     and which must not change. */
  --radius-media: 12px;
  /* pale tint of the accent, derived from --blue over --paper. No new hue:
     it is the existing deep teal at 10%. Flat fill: the only gradient in
     the file is the sanctioned hero scrim described in the header.
     The literal is the fallback; the color-mix line is the same colour
     expressed from the tokens, and wins wherever it is supported. */
  --tint-accent: rgba(11, 110, 117, 0.10);
  --tint-accent: color-mix(in srgb, var(--blue) 10%, var(--paper));
  /* and the same rule again for the grey ground. Identical accent, identical
     10%, only the ground it dilutes into changes. #DAE7EA. Reusing
     --tint-accent here would fail: that value bakes in --paper as its ground
     and lands at 1.05:1 on grey, which is invisible. */
  --tint-accent-grey: rgba(11, 110, 117, 0.10);
  --tint-accent-grey: color-mix(in srgb, var(--blue) 10%, var(--grey-ground));
}

@media (max-width: 720px) {
  :root {
    --fs-display: 2.375rem;
    --fs-h2: 1.8125rem;
    --section-y: 4.5rem;
  }
}

/* ---- fonts: loaded from Google Fonts via a single link in the head ---- */

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

/* scroll-padding-top keeps every in-page anchor clear of the fixed bar.
   The header measures 64.8px at desktop and tablet widths, so 5rem (80px)
   lands the target with about 15px of breathing room. At 560 and below the
   bar is retuned to a single line and measures about 61px, so 4.75rem
   (76px) holds the same clearance there. Without this, every
   "Book a Discovery Call" click parks the booking section under the bar. */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (max-width: 560px) {
  html { scroll-padding-top: 4.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--paper);
  color: var(--body-light);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--head-light); font-family: var(--font-display); font-weight: 500; letter-spacing: -0.022em; line-height: 1.06; }
h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-h2); letter-spacing: -0.018em; line-height: 1.14; }
h3 { font-size: var(--fs-h3); font-family: var(--font-subhead); font-weight: 600; letter-spacing: -0.005em; line-height: 1.3; }

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Buttons are excluded: they carry their own ground and their own text colour,
   and inheriting the bright teal here left white-on-teal buttons reading
   teal-on-teal at 4.19:1, below AA. */
.ground-ink a:not([class*="btn"]) { color: var(--accent-bright); }

img { max-width: 100%; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }

/* ---- section grounds ---- */
section { padding: var(--section-y) 0; }

.ground-paper { background: var(--paper); }
.ground-grey  { background: var(--grey-ground); border-top: 1px solid var(--rule-light); border-bottom: 1px solid var(--rule-light); }
.ground-ink   { background: var(--ink); }

.ground-ink h1, .ground-ink h2, .ground-ink h3 { color: var(--head-dark); }
.ground-ink { color: var(--body-dark); }
.ground-ink .eyebrow, .ground-ink .mono { color: var(--mono-dark); }

/* ---- shared type utilities ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mono-light);
  margin-bottom: 1.25rem;
  display: block;
}

.section-sub { max-width: 60ch; font-size: var(--fs-body-lg); line-height: 1.6; margin-top: 1rem; }

/* ---- buttons, radius exactly 5px, never a pill ---- */
.btn {
  display: inline-block;
  background: var(--blue);
  color: #FFFFFF;
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 1.05rem 2.1rem;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: background 0.18s ease;
}
.btn:hover { background: var(--blue-hover); color: #FFFFFF; text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--head-light); outline-offset: 3px; }
.ground-ink .btn:focus-visible { outline-color: var(--head-dark); }

.btn-invert { background: var(--paper); color: var(--blue); }
.btn-invert:hover { background: var(--grey-ground); color: var(--blue-hover); }
.btn-invert:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }

.cta-row { margin-top: 4rem; }
.s05-proof .cta-row, .s10-faq .cta-row { text-align: center; }

/* ---- scroll reveal, must stay visible without JS ---- */
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
  .js .reveal.is-visible { opacity: 1; transform: none; }
}

/* ===========================================================
   00, nav. Solid surface bar, fixed, at every scroll position.
   =========================================================== */
/* solid bar, always. Wordmark left, actions right. */
.s00-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 0.85rem 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule-dark);
}
.nav-actions { display: flex; align-items: center; gap: 1.5rem; }
.btn-sm { padding: 0.62rem 1.15rem; font-size: 0.875rem; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

/* The bar stays dark all the way down, so there is no scrolled state to
   draw. Single lockup, one weight, one colour, flat fill. */
.wordmark { display: inline-flex; align-items: baseline; text-decoration: none; color: var(--head-dark); }
.wordmark:hover { text-decoration: none; }
.wordmark-name { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; font-size: 1.3125rem; white-space: nowrap; }

/* ---- the bar at phone widths ----
   At 375 the wordmark and the button together want about 436px against
   311px of usable room, so both wrapped: the wordmark to three lines, the
   button to two, and the bar grew to 135px, a sixth of the viewport, with
   the H1 jammed under it. Both strings are brand copy and cannot be
   shortened, so the fix is type size, tracking and padding only.
   At these values the two lockups measure about 300px against 319px of
   room, so both hold one line and the bar returns to about 61px.
   The button keeps a 36px tap target: the height comes out of the vertical
   padding, which is not reduced, and only the type and the side padding
   give way. */
@media (max-width: 560px) {
  .nav-inner { gap: 0.5rem; }
  .wordmark-name { font-size: 0.9375rem; letter-spacing: -0.02em; }
  .nav-actions .btn-sm {
    font-size: 0.6875rem;
    letter-spacing: 0.09em;
    padding: 0.7rem 0.7rem;
    white-space: nowrap;
  }
}

/* ===========================================================
   01, hero. Midnight blue, full bleed, centred axis.
   The radial lift raises the middle of the section to the
   surface value and lets the corners fall back to the ground.
   Two palette values only, no third colour, no glow, no haze.
   =========================================================== */
.s01-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-top: 13rem;
  padding-bottom: 9rem;
  /* documentary photograph, graded into the palette by a midnight wash,
     plus a softer centre scrim so the type stays safe over the busiest areas */
  background-color: var(--ink);
  background-image:
    radial-gradient(ellipse 58% 54% at 50% 48%, rgba(5, 14, 26, 0.74) 0%, rgba(5, 14, 26, 0.12) 76%),
    linear-gradient(rgba(5, 14, 26, 0.62), rgba(5, 14, 26, 0.62)),
    url('/assets/hero-photo.jpg');
  background-size: auto, auto, cover;
  background-position: center, center, center 40%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
.s01-hero .wrap { position: relative; z-index: 1; }
/* the centred headline holds 60px at 1440, exactly as before, and scales
   down between breakpoints so it reflows rather than overflowing */
.s01-hero h1 { max-width: 100%; margin: 0 auto; font-size: clamp(2.375rem, 1.2rem + 3.2vw, var(--fs-display)); }
/* the accent clause is set in Archivo's real italic, not a synthesised slant */
.s01-hero h1 em { font-style: italic; }
.hero-sub { max-width: 54ch; font-size: var(--fs-body-lg); line-height: 1.6; margin: 1.75rem auto 2.5rem; color: var(--body-dark); }
.s01-hero .hero-actions { justify-content: center; }


/* ===========================================================
   03, is this you. Paper, feature split, list below.
   =========================================================== */
/* three body paragraphs, then the closing line set apart by a rule. The
   paragraph immediately before the closer drops its bottom margin so the
   rule keeps the spacing it was drawn for, whichever paragraph that is. */
.gap-body { font-size: var(--fs-body-lg); line-height: 1.6; margin-bottom: 1.25rem; }
.gap-body:has(+ .gap-close) { margin-bottom: 0; }
.gap-close {
  max-width: 52ch;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--head-light);
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-light);
}

/* ---- layered figure, used by 03 and 04. Three planes: tint panel behind,
        photograph, caption card in front breaking the bottom edge. Every
        plane is contained inside the figure's own padding box, so nothing
        can overflow the column or push the page sideways. No shadow
        anywhere: the card is separated by a hairline and a solid fill.
        03  image left,  panel juts up and right, card breaks bottom left.
        04  image right, mirrored with .gap-figure--flip, with only the
            tint panel restated for the grey ground. ---- */
.gap-figure {
  /* --panel-jut: how far the tint panel peeks past the top edge and the
                  photograph's inner edge, right in 03, left in 04.
     --card-jut:  how far the caption card sits past the photograph's
                  outer edge, left in 03, right in 04.
     Both figures share these values, so the two read as one device. */
  --panel-jut: 16px;
  --card-jut: 20px;
  --card-drop: 1.5rem;
  position: relative;
  padding: var(--panel-jut) var(--panel-jut) var(--card-drop) var(--card-jut);
}
/* doubled class: .fsplit-media img sets border-radius 0 later in the file at
   equal specificity, so this needs to outrank it rather than rely on order */
.gap-figure.fsplit-media img {
  position: relative;
  z-index: 1;
  border-radius: var(--radius-media);
}
/* the offset panel: the photograph's own rectangle, shifted up and right */
.gap-figure-panel {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: calc(var(--card-jut) + var(--panel-jut));
  bottom: calc(var(--card-drop) + var(--panel-jut));
  background: var(--tint-accent);
  border-radius: var(--radius-media);
}
/* the caption card, overlapping the bottom left corner of the photograph */
.gap-figure-card {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: 0;
  max-width: min(300px, 100%);
  background: var(--paper);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-media);
  padding: 0.85rem 1.15rem 0.95rem;
}
.gap-card-label {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--head-light);
}
/* deep teal, never the amber signal, which is spent on the WFR LIVE dot */
.gap-card-dot {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.42em;
  border-radius: 50%;
  background: var(--blue);
}
.gap-card-sub {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--body-light);
}

/* ---- 04, the same device reflected. Only the horizontal sides swap:
        the panel juts up and to the LEFT, the card breaks the bottom
        RIGHT corner. Vertical geometry, radii and jut distances are the
        shared values above, so the two containers stay identical in
        weight. The dot still leads the label, so the text itself is not
        mirrored, only the plane positions. ---- */
.gap-figure--flip {
  padding-right: var(--card-jut);
  padding-left: var(--panel-jut);
}
.gap-figure--flip .gap-figure-panel {
  right: calc(var(--card-jut) + var(--panel-jut));
  left: 0;
}
.gap-figure--flip .gap-figure-card {
  left: auto;
  right: 0;
}

/* ---- 04 sits on the grey ground. The card keeps the light-ground colours,
        which work better here than on 03: on paper the card fill matched the
        ground exactly and only the hairline separated it, whereas on grey a
        paper fill is a step in its own right, hairline on top. Only the
        panel needs restating, against the ground it actually sits on. The
        midnight-ground variants of this device went with The Cost: no ink
        section carries a layered figure now. ---- */
.ground-grey .gap-figure-panel { background: var(--tint-accent-grey); }

/* one column: the layering stays, tightened, and the card pulls back flush
   inside the photograph's outer edge, 03 left and 04 right, so it cannot
   crowd the copy that now sits below. Shared by both figures. */
@media (max-width: 900px) {
  .gap-figure { --panel-jut: 12px; --card-jut: 12px; }
}
@media (max-width: 720px) {
  .gap-figure { --panel-jut: 10px; --card-jut: 0px; --card-drop: 1.25rem; }
  .gap-figure-card { padding: 0.75rem 1rem 0.85rem; }
}

/* ===========================================================
   04, why trust the diagnosis. Grey, split, portrait right.
   =========================================================== */
/* the grid itself is not declared here: .trust-grid joins the shared .fsplit
   rule further down so 03 and 04 hold identical column proportions from
   one declaration rather than three. */
/* Measure set in ch, the same mechanism .fsplit-head uses. 18ch is the only
   value that breaks this headline cleanly, measured in Chrome with Archivo
   actually loaded, at 1440:
     I'm not an automation guy
     who learned marketing.
     I'm a marketer who
     learned to build.
   The first sentence closes at the end of line two, so the teal clause opens
   line three on its own, and the last line carries three words rather than a
   stranded "build.". 17ch and 18.5ch both break it again, so do not nudge
   this value without re-measuring. */
.trust-copy h2 { margin-bottom: 2rem; max-width: 18ch; }
/* matches .gap-body: the section bodies are set one step up the scale,
   not at the global body default */
.trust-copy p { font-size: var(--fs-body-lg); line-height: 1.6; margin-bottom: 1.25rem; max-width: 60ch; }
.trust-pull {
  margin-top: 2.5rem; padding-left: 1.5rem;
  border-left: 2px solid var(--blue);
  color: var(--head-light);
  font-family: var(--font-subhead); font-weight: 500;
  letter-spacing: -0.008em; line-height: 1.45;
  font-size: var(--fs-body-lg);
}
/* the portrait's own framing is gone: it now uses the shared layered figure
   (.gap-figure), which brings its own radius, panel and caption card. The old
   .trust-card paper frame would have clipped both new planes at overflow. */

/* ===========================================================
   05, proof. Paper. Six systems in three parallel columns,
   one column per outcome, in the same order 03c promises them.
   ONE container, not three: three stacked containers made the
   section three screens tall, and a tabbed version was rejected
   because it would hide two thirds of the evidence behind an
   interaction. Read across, all six visible, no click.

   The container is defined by hairlines on the section's own
   paper ground, not by a fill. Two reasons. 04 above is a
   full-bleed grey band and 06 below is full-bleed ink, so a
   grey panel here would repeat the value directly above it,
   and an ink panel would spend the page's dark punctuation one
   section early and flatten the ink testimonial that follows.
   Paper keeps the run grey, light, dark and lets 06 land.
   The frame is a grid whose 1px gaps show the --rule-light
   background through, inside a 1px hairline. The offer section
   above uses the same device on the midnight ground. Radius is --radius-media, the value
   the photo figures already use. No new hue, no new radius,
   no fill, no shadow.

   Even columns, 2 / 2 / 2, after the trim from eleven entries:
   nothing is moved between groups and nothing is padded out.
   Grid stretch makes all three cells the same height, so the
   vertical hairlines run the full depth of the container and any
   column that ends early does so into white space inside a level
   frame. The frame does the balancing, not the content.

   The three columns are tinted, so the text does not sit on
   --paper here. Measured against the worst of the three, the
   14% column #DDEBEC, with the paper value in brackets:
     group head   --head-light   15.8:1  (19.4)
     entry name   --head-light   15.8:1  (19.4)
     attribution  --mono-light    4.7:1  ( 5.8)
     client attr  --blue          4.9:1  ( 6.0)
     LIVE label   --head-light   15.8:1  (19.4)
     line         --body-light    6.6:1  ( 8.1)
     figure       --head-light   15.8:1  (19.4)
   Every one still clears 4.5:1 on all three tints.
   Amber is still spent exactly once, on the Wrong Fuel Rescue
   LIVE dot. That dot does not sit on paper: it sits in the first
   column, on #DDEBEC, where the old #C2740A measured 2.96:1 and
   failed. It is a 7px dot, a non-text graphical object, so the
   threshold is 3:1. --green is now #B06A09, measured 3.50:1 on
   #DDEBEC. The 3.62:1 this comment used to claim was measured
   against plain paper, which is not the ground it lands on.
   =========================================================== */

/* intro centred, the columns below stay left aligned so the entries
   remain scannable down three shared left edges */
.proof-intro { text-align: center; max-width: 68ch; margin: 0 auto clamp(3.5rem, 6vw, 5rem); }
.proof-intro .rule { margin-left: auto; margin-right: auto; }
.proof-intro h2 { max-width: 26ch; margin-left: auto; margin-right: auto; }
.proof-intro .section-sub { margin-left: auto; margin-right: auto; max-width: 56ch; }

.proof-cols {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-media);
  overflow: hidden;
}
/* --pc-pad: one padding value for all three columns, so they stay identical
   in weight. Reduced, not removed, at narrow widths, so the text column
   never collapses into a gutter. */
.proof-col {
  --pc-pad: clamp(1.25rem, 2.2vw, 2rem);
  background: var(--paper);
  padding: var(--pc-pad);
  min-width: 0;
}
/* Three light grounds, one hue. The same deep teal diluted into paper at
   three strengths, so the columns read as three colours without introducing
   a second or third hue. Descending: the outcome a buyer weighs first
   carries the most colour. Body text measured at 8.4:1 or better on all
   three, so nothing needed re-colouring. */
.proof-col:nth-child(1) { background: color-mix(in srgb, var(--blue) 14%, var(--paper)); }
.proof-col:nth-child(2) { background: color-mix(in srgb, var(--blue) 9%, var(--paper)); }
.proof-col:nth-child(3) { background: color-mix(in srgb, var(--blue) 5%, var(--paper)); }
/* the same three values as literals, for engines without color-mix. These
   are the exact results, computed channel by channel in sRGB and confirmed
   against the rendered computed style, not approximations:
     14%  rgb(221, 235, 236)  #DDEBEC
      9%  rgb(233, 242, 243)  #E9F2F3
      5%  rgb(243, 248, 248)  #F3F8F8
   The 9% and 5% literals were previously one step dark on every channel. */
@supports not (background: color-mix(in srgb, red 50%, white)) {
  .proof-col:nth-child(1) { background: #DDEBEC; }
  .proof-col:nth-child(2) { background: #E9F2F3; }
  .proof-col:nth-child(3) { background: #F3F8F8; }
}
/* the accent tick above each column heading, the same 44px device the
   rest of the page uses. 2px here, as before, so it reads as a marker
   rather than a second .rule. */
.proof-group-head::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--blue);
  margin-bottom: 1rem;
}
/* one step below the old --fs-h3: three of these now sit side by side in
   narrow columns, and at 22px they wrapped and outweighed the evidence
   under them. 19px still clears the 16px entry names by a full step. */
.proof-group-head { font-size: 1.1875rem; letter-spacing: -0.012em; margin-bottom: 1.4rem; }

.proof-list { list-style: none; display: grid; gap: 1.4rem; }
.proof-item { border-top: 1px solid var(--rule-light); padding-top: 0.9rem; min-width: 0; }

/* ---- density. Each entry is up to four stacked text objects,
        so the ladder between them has to be unambiguous and every step has
        to be cheap in vertical space:
          name  16px subhead 600, the only thing at full ink weight
          attr  12px mono, sentence case, near-neutral tracking
          line  14px body
          fig   14px subhead 600 on the teal spine
        The attribution used to be uppercase mono on 0.12em tracking. At
        column width that ran three lines for "Built while leading growth at
        Exscape" and competed with the name for weight, which is exactly
        backwards: the system is the claim, the client is the footnote. It
        keeps the mono family, so it still reads as metadata, but drops the
        caps and most of the tracking. ---- */
.proof-name {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 1rem; line-height: 1.28; letter-spacing: -0.005em;
  color: var(--head-light);
  overflow-wrap: break-word;
}
/* attribution. Teal marks a client engagement, so only Wrong Fuel Rescue
   takes it. The Exscape lines were built in employment, not for a client,
   and stay in the neutral mono grey so the two can never read alike. */
.proof-attr {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
  margin-top: 0.4rem;
  /* body font, not mono: these are company names read as names, not labels */
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 400;
  letter-spacing: 0; line-height: 1.45;
  color: var(--mono-light);
}
.proof-attr--client { color: var(--blue); }
.proof-live { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--head-light); }
/* the page's single amber. Nothing else may take --green. */
.status-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

.proof-line { margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.55; color: var(--body-light); }
/* the figure, on the same 2px teal spine the 04 pull quote uses.
   Four of the six carry one, the other two carry none. */
.proof-fig {
  margin-top: 0.7rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--blue);
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 0.875rem; line-height: 1.35; letter-spacing: -0.008em;
  color: var(--head-light);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================
   06, testimonial. Midnight blue, full width, centred measure.
   =========================================================== */
/* ---- 06, testimonials. Cards on the ink ground, avatar breaking the top
   edge. Built as a grid so a second quote drops in without a rewrite.
   Deliberately no star rating: there is no review platform behind it,
   so stars would be proof that does not exist. ---- */
.quote-intro { text-align: center; }
.quote-intro .rule { margin-left: auto; margin-right: auto; }
.quote-intro .eyebrow { margin-bottom: 3.25rem; }

.quote-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  max-width: 60rem;
  margin: 0 auto;
}
.quote-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-media);
  padding: 4.25rem 2rem 2rem;
  display: flex;
  flex-direction: column;
}
.quote-avatar {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid var(--ink);
}
.quote-lead {
  font-family: var(--font-subhead);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--head-dark);
  text-align: center;
  margin-bottom: 1.5rem;
}
.quote-card blockquote p { color: var(--body-dark); margin-bottom: 1.1rem; font-size: var(--fs-body); }
.quote-attr {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-dark);
  display: flex; flex-direction: column; gap: 0.2rem;
  text-align: center;
}
.quote-attr strong { color: var(--head-dark); font-family: var(--font-subhead); font-weight: 600; letter-spacing: -0.005em; }
.quote-attr em {
  font-family: var(--font-mono); font-style: normal; font-weight: 500;
  font-size: var(--fs-eyebrow); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mono-dark);
}

/* ===========================================================
   CTA interruption. Deep teal band, the only large teal fill.
   =========================================================== */
.s09-cta { background: var(--blue); padding: 4.5rem 0; }
.cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 2rem; }
.cta-band h2 { color: #FFFFFF; max-width: 20ch; font-size: var(--fs-h2); }

/* ===========================================================
   06, FAQ. Grey, native details accordion.
   =========================================================== */
/* centred intro, then the accordion in a framed container on paper so the
   questions sit on their own surface rather than loose on the grey band.
   Same frame device as the proof columns, so it is not a new treatment. */
.faq-intro { text-align: center; max-width: 60ch; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); }
.faq-intro .rule { margin-left: auto; margin-right: auto; }
.faq-intro h2 { max-width: 22ch; margin: 0 auto; }

.faq-list {
  max-width: 56rem;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius-media);
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
  overflow: hidden;
}
.faq-list details:last-child { border-bottom: 0; }
.faq-list details { border-bottom: 1px solid var(--rule-light); }
.faq-list summary { list-style: none; cursor: pointer; padding: 1.5rem 2.5rem 1.5rem 0; color: var(--head-light); font-family: var(--font-subhead); font-weight: 500; letter-spacing: -0.01em; font-size: var(--fs-body-lg); position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 1.3rem; color: var(--blue); font-family: var(--font-mono); font-weight: 500; font-size: 1.25rem; }
.faq-list details[open] summary::after { content: "\2212"; }
.faq-list summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.faq-list p { padding: 0 2.5rem 1.75rem 0; max-width: 68ch; }

/* ===========================================================
   07, book. Midnight blue, embedded calendar on a surface card.
   =========================================================== */
.s11-book .section-sub { color: var(--body-dark); }
.cal-embed { position: relative; background: var(--surface); border: 1px solid var(--rule-dark); border-radius: var(--radius); overflow: hidden; min-height: 700px; }
/* opaque, not transparent: a transparent iframe lets the loading message
   behind it show through even after the widget has painted. */
.cal-embed iframe { position: relative; z-index: 1; display: block; width: 100%; min-height: 700px; background: var(--surface); }

/* ---- the two fallback messages ----
   The iframe is opaque and sits at z-index 1, so a message behind it at
   z-index 0 can never be read: with JavaScript off the section rendered as
   a blank 700px box with no explanation at all. Both messages now sit in
   front of the iframe instead, at z-index 2, on the same --surface fill the
   iframe carries so there is no seam.
   Overlaying is only safe because of two things:
     pointer-events: none  so neither message can ever swallow a click
                           meant for the widget underneath it;
     display: none         the moment the widget is actually usable.
   Three states, all covered:
     JS on, loading   .js shows the loading message over the blank iframe.
     JS on, loaded    script.js sets .is-loaded on the iframe load event and
                      the message goes to display: none, out of the flow
                      entirely, so nothing overlays the working widget.
     JS off           the .js class is never added, so the loading message
                      stays hidden, and the noscript message, which the
                      parser only emits when scripting is off, shows on top
                      of the dead iframe. There is no working widget to
                      cover in that state, because the widget needs JS. */
.cal-fallback-msg {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  padding: 2.5rem;
  background: var(--surface);
  color: var(--body-dark);
  font-size: var(--fs-body-lg);
  pointer-events: none;
}
.js .cal-fallback-msg { display: flex; align-items: center; }
/* set by script.js on the iframe load event. Outranks the .js rule above
   on specificity, so the order of these two does not matter. */
.cal-embed.is-loaded .cal-fallback-msg { display: none; }
/* last, so it beats the display: none on .cal-fallback-msg at equal
   specificity. Only ever parsed when scripting is off. */
.cal-fallback-noscript { display: flex; align-items: center; color: var(--head-dark); }

/* ===========================================================
   12, footer. Midnight blue.
   =========================================================== */
.s12-footer { background: var(--ink); border-top: 1px solid var(--rule-dark); padding: 2.5rem 0; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; }
.lockup { font-family: var(--font-subhead); font-weight: 500; letter-spacing: -0.005em; color: var(--body-dark); }
.lockup .pipe { color: var(--mono-dark); }
.footer-meta { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mono-dark); }
/* the trading entity, stated plainly. Body font, not mono: this is a
   sentence a reader may need to rely on, not a label. */
.footer-legal { font-size: 0.875rem; color: var(--body-dark); }

/* the .visually-hidden utility lived here. Its only consumers were the
   before/after metric lists in 05, which are gone, so it went with them. */

/* ===========================================================
   responsive
   =========================================================== */
/* the three columns are the whole point of the section, so they hold all the
   way down to the phone breakpoint and the padding gives way instead. At 768
   a column is roughly 240px wide with about 195px of text inside it, which
   still carries a two-line entry name. */
@media (max-width: 900px) {
  .proof-col { --pc-pad: 1.1rem; }
  .proof-group-head { font-size: 1.0625rem; }
}

@media (max-width: 900px) {
  .s01-hero h1 { max-width: 18em; }
}

@media (max-width: 720px) {
  .s01-hero { padding-top: 8.5rem; padding-bottom: 4.5rem; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  /* below this the columns stack. The 1px gap keeps working, it just draws
     horizontal rules between the three groups instead of vertical ones, so
     the container stays one object. The section is tall again on a phone,
     which is the accepted cost of showing all six without an interaction. */
  .proof-cols { grid-template-columns: 1fr; margin-top: 2.5rem; }
  /* padding comes back up once each group has the full width to itself */
  .proof-col { --pc-pad: 1.5rem; }
  .proof-group-head { font-size: 1.1875rem; }
}

/* ===========================================================
   03c, the fix. Paper, centred single column, three points below.
   Split, split, centred: the third section in the family breaks
   the pattern on purpose, so it gets extra vertical room to read
   as deliberate rather than empty.
   =========================================================== */
.s03c-solution { padding-top: calc(var(--section-y) * 1.4); padding-bottom: calc(var(--section-y) * 1.4); }

.solution-intro { max-width: 68ch; margin: 0 auto; text-align: center; }
.solution-intro .rule { margin: 0 auto 1.1rem; }
/* the headline gets its own measure, the container must stay wide enough
   for the subline to breathe underneath it */
.solution-intro .fsplit-head { margin: 0 auto 1.5rem; max-width: 34ch; }
.solution-intro .section-sub { margin: 1.5rem auto 0; max-width: 56ch; }

/* the three outcomes carry the section, so they are set at real scale
   rather than as a footnote under the headline */
.fix-list {
  list-style: none; margin-top: clamp(3.5rem, 6vw, 5.5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.fix-list li { padding-top: 1.9rem; border-top: 1px solid var(--rule-light); position: relative; }
/* the 44px accent tick, the same marker .proof-group-head::before and
   .offer-next-head::before carry. It takes --blue, not --accent-head:
   --accent-head is documented as display-size only, and a 2px rule is not
   display size. The two markers now match. */
.fix-list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 2px; background: var(--blue); }
.fix-no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--mono-light);
  margin-bottom: 1.1rem;
}
.fix-list h3 { font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.75rem); color: var(--head-light); margin-bottom: 0.75rem; letter-spacing: -0.015em; }
.fix-list p { max-width: 34ch; font-size: var(--fs-body); }


@media (max-width: 1024px) {
  .fix-list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  .fix-list { grid-template-columns: 1fr; gap: 2rem; }
}

/* ===========================================================
   03d, what happens next. Midnight blue. Three steps in the
   framed grid the proof columns already use, then the three
   paths under a hairline.

   Ink, not a third light ground: 03 and 03c are both paper, so
   this is where the page's dark punctuation lands now that The
   Cost is gone. No new device. The step grid is the proof frame
   with --rule-dark hairlines and --surface cells, the fill every
   card on an ink section already takes. The closing line uses the
   rule-separated closer .gap-close already establishes.

   Deliberately compact: this is a map of the engagement, not a
   sales page, and it must not outweigh the argument above it.
   =========================================================== */
.offer-intro { text-align: center; max-width: 68ch; margin: 0 auto; }
.offer-intro .rule { margin-left: auto; margin-right: auto; }
.offer-intro h2 { max-width: 24ch; margin: 0 auto; }
.offer-intro .section-sub { margin: 1.25rem auto 0; max-width: 56ch; color: var(--body-dark); }

.offer-steps {
  list-style: none;
  margin-top: clamp(2.75rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule-dark);
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-media);
  overflow: hidden;
}
.offer-step {
  background: var(--surface);
  padding: clamp(1.25rem, 2.2vw, 2rem);
  min-width: 0;
}
.offer-no {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--accent-bright);
  margin-bottom: 0.9rem;
}
.offer-step h3 { font-size: 1.1875rem; letter-spacing: -0.012em; margin-bottom: 0.55rem; }
.offer-step p { font-size: 0.9375rem; line-height: 1.6; color: var(--body-dark); }

.offer-next { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
/* the same 44px accent tick the proof group heads carry */
.offer-next-head::before {
  content: "";
  display: block;
  width: 44px;
  height: 2px;
  background: var(--accent-bright);
  margin-bottom: 1rem;
}
.offer-next-head { font-size: 1.1875rem; letter-spacing: -0.012em; margin-bottom: 1.6rem; }

.offer-paths {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.offer-paths li { padding-top: 1.1rem; border-top: 1px solid var(--rule-dark); }
.offer-path-name {
  font-family: var(--font-subhead); font-weight: 600;
  font-size: 1rem; line-height: 1.28; letter-spacing: -0.005em;
  color: var(--head-dark);
  margin-bottom: 0.4rem;
}
.offer-paths p { font-size: 0.9375rem; line-height: 1.55; color: var(--body-dark); }

.offer-note {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule-dark);
  max-width: 60ch;
  font-size: var(--fs-body-lg);
  line-height: 1.6;
  color: var(--head-dark);
}

@media (max-width: 900px) {
  .offer-paths { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 720px) {
  .offer-steps { grid-template-columns: 1fr; }
}

/* ===========================================================
   DESIGN DEVICES
   Accent rule + numbered eyebrow, two-tone headlines, split
   media, trust band, paired CTAs. One accent moment per section.
   =========================================================== */

/* ---- accent rule, sits immediately above every eyebrow ---- */
.rule {
  display: block;
  width: 44px;
  height: 3px;
  background: var(--blue);
  margin-bottom: 1.1rem;
}
.ground-ink .rule { background: var(--accent-bright); }

/* ---- numbered eyebrow ---- */
.eyebrow-no { color: inherit; }
.eyebrow-sep { margin: 0 0.6em; color: var(--rule-light); }
.ground-ink .eyebrow-sep { color: var(--mono-dark); }

/* ---- two-tone headlines. Second clause carries the accent. ---- */
/* Headline accents are large text, so WCAG asks 3:1 rather than 4.5:1.
   That buys a far more vivid teal than the deep body-size accent.
   --accent-head measures 3.43:1 on paper and 3.11:1 on grey. It clears 3:1
   at display size and nowhere else, so it is confined to h1 em and h2 em.
   Never use it below display size, and never on a rule or a marker: the
   44px accent ticks all take --blue. */
h1 em, h2 em { font-style: normal; color: var(--accent-head); }
.ground-ink h1 em, .ground-ink h2 em { color: var(--accent-bright); }

/* ---- hero, paired CTAs ---- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.btn-ghost {
  background: transparent;
  color: var(--head-dark);
  border: 1px solid var(--head-dark);
  padding: calc(1.05rem - 1px) calc(2.1rem - 1px);
}
.btn-ghost:hover { background: var(--head-dark); color: var(--ink); }
.btn-ghost:focus-visible { outline-color: var(--head-dark); }

/* ---- feature split, the 03 / 03c layout family ----
   Equal columns, copy vertically centred against the media,
   image side alternates: 03 left, 03c centred. ---- */
/* The copy column takes the larger share. A 4:5 photograph filling half the
   width runs taller than the copy beside it and stretches the section, so the
   media column is deliberately the narrower of the two. */
.fsplit,
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
/* image right, copy left: keep the same proportions, mirrored.
   04 mirrors 03, so it takes the reversed proportions. */
.trust-grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); }
.fsplit-media { margin: 0; min-width: 0; }
.fsplit-media img { display: block; width: 100%; height: auto; border-radius: 0; }

/* the photographic panel fills its column, tall, edge to edge, no border */
.fsplit-media--photo img {
  height: 100%;
  /* cropped back from the source 4:5. A full-height portrait made the
     sections taller than the copy warranted. */
  aspect-ratio: 4 / 4.2;
  object-fit: cover;
  border: 0;
}
/* 04 only. The portrait keeps the full width of the source, so the air either
   side of the shoulders is the air the photographer framed. Only the dead space
   above the hair and below the hands is trimmed, which lands it at 96:113,
   close to the near-square proportion of the shot as taken. Cropping in from
   the sides made the face bigger but read as compressed, and cropping to
   4:4.2 clips the steepled hands. This does neither. */
.gap-figure--flip.fsplit-media--photo img { aspect-ratio: 96 / 113; }
.fsplit-copy { min-width: 0; }
.fsplit-head {
  font-size: clamp(2.125rem, 1.35rem + 2.4vw, 3.125rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  max-width: 15ch;
  overflow-wrap: break-word;
  margin-bottom: 1.5rem;
}
.fsplit-copy .section-sub {
  margin-top: 0;
  max-width: 44ch;
  color: var(--head-light);
  font-family: var(--font-subhead);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: 1.5;
}

/* ---- 06, testimonial. Rule aligned to the quote measure. ---- */

/* ---- accent audit, 04. The rule, the pull quote, the headline clause and
        the caption card dot carry the teal. No other accent in the section. ---- */

@media (max-width: 900px) {

  /* one column, image above the copy whichever side it sat on.
     .trust-grid is stated here rather than in the earlier 900 block: the
     two-column declaration for 04 sits later in the file at equal
     specificity, so an earlier media query would lose the cascade to it
     and the section would stay in two columns on a phone. */
  .fsplit, .trust-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .fsplit-media { order: 1; }
  /* .trust-copy is not .fsplit-copy, so it needs the order stated or it
     would sit above the figure and break the family */
  .fsplit-copy, .trust-copy { order: 2; }
  .fsplit-head { max-width: 20ch; }
  .fsplit-media--photo img { aspect-ratio: 4 / 3; }
  /* 04 opts out of the 4:3 above, because cropping the portrait to landscape
     clips the steepled hands off again. At 96:113 it is short enough not to
     swallow the stacked section, and the source is a full 960px wide, so the
     820-odd px it gets here is still inside native. It is capped anyway, so a
     wide phone cannot blow it up. */
  .gap-figure--flip { max-width: 560px; margin-inline: auto; }
  .fsplit-copy .section-sub { max-width: 60ch; }
}

@media (max-width: 720px) {
  .hero-actions { gap: 0.6rem; }
  .hero-actions .btn { width: 100%; text-align: center; }
}

/* ===========================================================
   02, body of work. Grey band under the hero.
   Counts of work delivered, not a service menu. Static by
   choice: these are numbers meant to be read, not caught.
   =========================================================== */
.s02-work { padding: clamp(2rem, 3vw, 2.75rem) 0; }
/* unnumbered on purpose: this is a band, not one of the numbered
   argument sections, so it must not disturb the 01 to 07 sequence */
.s02-work .wrap { text-align: center; }
.s02-work .rule { margin-left: auto; margin-right: auto; }
.s02-work .eyebrow { margin-bottom: 1.25rem; }
.work-bar li { align-items: center; gap: 0.25rem; }
.work-bar {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.work-bar li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.work-fig {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem);
  color: var(--head-light);
  font-variant-numeric: tabular-nums;
}
.work-label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--body-light);
}

@media (max-width: 720px) {
  .work-bar { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ---- 07, booking. Intro centred, the widget stays full width. ---- */
.book-intro { text-align: center; max-width: 68ch; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); }
.book-intro .rule { margin-left: auto; margin-right: auto; }
.book-intro h2 { max-width: 22ch; margin: 0 auto; }
.book-intro .section-sub { margin: 1.25rem auto 0; max-width: 58ch; }

/* ===========================================================
   thank-you page
   One ink ground the whole way down, so the confirmation reads
   as a full stop rather than another section of the sales page.
   It reuses .eyebrow, .rule, .section-sub, .fix-no and the two
   chrome blocks verbatim; only the layout below is its own.
   =========================================================== */
.ty-body { background: var(--ink); }
.ty {
  /* the bar is fixed, so the first line has to clear it by hand */
  padding: clamp(9rem, 8rem + 6vw, 12rem) 0 clamp(4.5rem, 4rem + 4vw, 7rem);
}
.ty .wrap { text-align: center; }
.ty .rule { margin: 0 auto 1.1rem; }
.ty h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.4vw, var(--fs-display));
  max-width: 14ch; margin: 0 auto;
}
.ty .section-sub { margin: 1.25rem auto 0; max-width: 52ch; }

/* the same three-across rhythm as .fix-list in 02, on the dark ground:
   hairlines and headings take the dark-ground tokens instead. */
.ty-list {
  list-style: none; margin-top: clamp(3.5rem, 6vw, 5rem);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  text-align: left;
}
.ty-list li { padding-top: 1.9rem; border-top: 1px solid var(--rule-dark); position: relative; }
.ty-list li::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 2px; background: var(--accent-bright); }
.ty-list .fix-no { color: var(--mono-dark); }
.ty-list h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  color: var(--head-dark); margin-bottom: 0.75rem; letter-spacing: -0.015em;
}
.ty-list p { max-width: 34ch; font-size: var(--fs-body); }

.ty-prep { margin-top: clamp(3rem, 5vw, 4rem); color: var(--body-dark); font-size: var(--fs-body-lg); }
.ty-actions {
  margin-top: 2rem; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 1.25rem 2rem;
}
.ty-back { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }

@media (max-width: 900px) {
  .ty-list { grid-template-columns: 1fr; gap: 2rem; }
  .ty-list p { max-width: 46ch; }
}

/* ===========================================================
   legal pages
   Long-form reading, so: paper ground, one column, a measure
   set in ch rather than px, and no reveal animation. Nobody
   should have to wait for a privacy policy to fade in.
   =========================================================== */
.legal { padding: clamp(9rem, 8rem + 6vw, 12rem) 0 clamp(4.5rem, 4rem + 4vw, 7rem); }
.legal .wrap { max-width: 46rem; }
.legal h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem); margin: 0 0 0.75rem; }
.legal h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  color: var(--head-light); letter-spacing: -0.015em;
  margin: 3rem 0 0.9rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-light);
  position: relative;
}
.legal h2::before { content: ""; position: absolute; left: 0; top: -1px; width: 44px; height: 2px; background: var(--blue); }
.legal p { font-size: var(--fs-body); line-height: 1.7; margin: 0 0 1.05rem; max-width: 68ch; }
.legal-updated { font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mono-light); margin-bottom: 2.25rem; }
.legal-lead { font-size: var(--fs-body-lg); line-height: 1.6; }
.legal-list { margin: 0 0 1.05rem 1.1rem; padding: 0; max-width: 68ch; }
.legal-list li { font-size: var(--fs-body); line-height: 1.7; margin-bottom: 0.6rem; padding-left: 0.35rem; }
.legal-back { margin-top: 3rem; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; }
.footer-legal a { color: var(--body-dark); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--head-dark); }