/* ============================================================
   GrowTricity · "Signal from noise" visual system
   All design values live in the custom properties below.
   Responsive behaviour uses container queries on .viewport
   (container width == viewport width; in production these can
   be transcribed 1:1 to @media queries at the same breakpoints).
   ============================================================ */

:root {
  /* -- colour -- */
  --ink: #161310;            /* warm black — primary surface + text  */
  --ink-soft: #3B362E;
  --ink-muted: #5A544A;      /* smallest text colour, AA on paper    */
  --paper: #F3EDE3;          /* cream — retained brand recognition   */
  --paper-deep: #EAE2D3;     /* secondary cream surface              */
  --cream-on-ink: #CFC7B8;   /* body text on ink                     */
  --signal: #F05A28;         /* orange — the signal. AA on ink.      */
  --line: rgba(22, 19, 16, 0.16);        /* hairline on paper        */
  --line-strong: rgba(22, 19, 16, 0.75);
  --line-on-ink: rgba(243, 237, 227, 0.18);

  /* -- typography -- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --size-display-1: clamp(46px, 6.4cqw, 88px);
  --size-display-2: clamp(34px, 4.2cqw, 56px);
  --size-h3: clamp(22px, 2cqw, 27px);
  --size-body-lg: clamp(18px, 1.5cqw, 21px);
  --size-body: 17px;
  --size-data: 15px;
  --size-data-sm: 14px;   /* absolute minimum anywhere in the system */
  --track-display: -0.025em;
  --leading-body: 1.55;

  /* -- spacing -- */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-5: 48px; --space-6: 64px; --space-7: 96px; --space-8: 140px;
  --section-y: clamp(72px, 9cqw, 140px);
  --gutter: clamp(20px, 4.5cqw, 72px);
  --measure: 62ch;
  --content-max: 1296px;

  /* -- borders + radii -- */
  --border-hairline: 1px solid var(--line);
  --border-structural: 2px solid var(--ink);
  --border-signal: 3px solid var(--signal);
  --radius: 0px;              /* the system is square               */
  --radius-interactive: 2px;  /* buttons/inputs only                */

  /* -- shadows: none. Rules and surface shifts carry depth. -- */

  /* -- motion -- */
  --dur-fast: 150ms;
  --dur: 400ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--signal); }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: var(--radius-interactive); }
.on-ink :focus-visible { outline-color: var(--paper); }

.viewport {
  container-type: inline-size;
  container-name: viewport;
  width: 100%;
  margin: 0 auto;
  background: var(--paper);
  overflow-x: clip;   /* guarantees no horizontal overflow */
}
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--signal); color: var(--ink);
  padding: 12px 20px; font-weight: 600; z-index: 50;
}
.skip-link:focus { left: 12px; top: 12px; }

.shell { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--gutter); }

/* ---------- shared type roles ---------- */
.display-1 { font-family: var(--font-display); font-size: var(--size-display-1); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.02; text-wrap: balance; }
.display-2 { font-family: var(--font-display); font-size: var(--size-display-2); font-weight: 700; letter-spacing: var(--track-display); line-height: 1.06; text-wrap: balance; }
.data, .kicker { font-family: var(--font-data); font-size: var(--size-data); font-weight: 500; }
.kicker { text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); }
.on-ink .kicker { color: var(--cream-on-ink); }
.lede { font-size: var(--size-body-lg); max-width: var(--measure); text-wrap: pretty; }

/* section header: index number + kicker over a hairline */
.section-head { display: flex; align-items: baseline; gap: var(--space-2); border-top: var(--border-structural); padding-top: var(--space-2); margin-bottom: var(--space-5); }
.section-head .idx { font-family: var(--font-data); font-size: var(--size-data); font-weight: 500; color: var(--signal); }
.on-ink .section-head { border-top-color: var(--paper); }
section > .shell > .display-2 { margin-bottom: var(--space-3); max-width: 22ch; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  padding: 16px 26px; border-radius: var(--radius-interactive);
  text-decoration: none; border: 2px solid var(--ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn .arrow { width: 20px; height: 20px; }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--ink-soft); color: var(--paper); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.on-ink .btn-primary { background: var(--signal); border-color: var(--signal); color: var(--ink); }
.on-ink .btn-primary:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.on-ink .btn-ghost { border-color: var(--paper); color: var(--paper); }
.on-ink .btn-ghost:hover { background: var(--paper); color: var(--ink); }
.text-link { font-weight: 600; font-size: var(--size-body); display: inline-flex; align-items: center; gap: 8px; }
.text-link .arrow { width: 18px; height: 18px; color: var(--signal); }

/* ---------- header + nav ---------- */
.site-header { background: var(--ink); color: var(--paper); border-bottom: 3px solid var(--signal); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 18px; }
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.site-header .brand-lockup .brand-spark { width: 40px; height: 40px; flex: none; }
.site-header .brand-lockup .brand-wordmark { width: auto; height: 40px; flex: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-4); }
.site-nav a { text-decoration: none; font-weight: 600; font-size: 17px; color: var(--paper); }
.site-nav a:hover { color: var(--signal); }
.site-nav .btn { padding: 12px 20px; font-size: 16px; }
.nav-toggle { display: none; background: none; border: 2px solid var(--paper); border-radius: var(--radius-interactive); color: var(--paper); font-family: var(--font-display); font-weight: 600; font-size: 16px; padding: 10px 16px; cursor: pointer; }

/* facts strip under the header */
.facts-strip { background: var(--ink); color: var(--cream-on-ink); border-bottom: 1px solid var(--line-on-ink); }
.facts-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: 12px 0; padding-block: 12px; font-family: var(--font-data); font-size: var(--size-data-sm); }
.facts-strip li { display: flex; align-items: center; }
.facts-strip li + li::before { content: ""; width: 6px; height: 6px; background: var(--signal); margin-inline: 16px; flex: none; }

/* ---------- hero ---------- */
.hero { padding: 0; background: var(--ink); color: var(--paper); }
.hero .grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-5); align-items: center; padding-block: clamp(32px, 3cqw, 44px); }
.hero .display-1 { font-size: clamp(42px, 4.9cqw, 70px); }
.hero .kicker { margin-bottom: var(--space-3); }
.hero-meta { display: none; }
.hero p { color: var(--cream-on-ink); margin-top: var(--space-3); }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.hero .hero-reassurance { max-width: 58ch; font-size: 15px; margin-top: var(--space-2); }
/* Visually hidden, still read by screen readers. The hero form labels use it. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- hero actions: booking CTA + call-back form in one band ---------- */
.hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.hero-actions .cta-row { margin-top: 0; flex: 0 0 auto; }
.hero-lead { flex: 1 1 24rem; min-width: 0; }
.hero-lead-note { margin-top: 0 !important; margin-bottom: 6px; font-size: 14px; }
.hero-lead-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-lead-row input[type="text"],
.hero-lead-row input[type="tel"] {
  flex: 1 1 6rem; min-width: 0; padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--ink); background: var(--paper); border: 2px solid var(--paper);
  border-radius: var(--radius-interactive);
}
/* The phone hint is the longer string, so it gets the spare room. */
.hero-lead-row input[type="tel"] { flex-grow: 1.5; }
.hero-lead-row input::placeholder { color: var(--ink-muted); opacity: 1; }
.hero-lead-row input:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
/* Compact so the two fields and the action stay on one row beside the CTA. */
.hero-lead-row .btn { flex: 0 0 auto; font-size: 16px; padding: 13px 18px; }
/* Honeypot. Off-screen rather than display:none so bots still fill it. */
.hero-lead-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.hero-lead-status { min-height: 1.2em; margin-top: 6px !important; font-size: 14px; font-weight: 600; }
.hero-lead-status a { color: var(--signal); font-weight: 700; }

.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: var(--space-4); border-top: 1px solid var(--line-on-ink); padding-top: var(--space-2); font-family: var(--font-data); font-size: var(--size-data); color: var(--cream-on-ink); }
.hero-facts li { display: flex; align-items: center; }
.hero-facts li + li::before { content: ""; width: 6px; height: 6px; background: var(--signal); margin-inline: 14px; flex: none; }
.hero-art img { width: 100%; height: auto; }

/* ---------- generic section rhythm ---------- */
.section { padding-block: var(--section-y); }
.section.on-ink { background: var(--ink); color: var(--paper); }
.section.deep { background: var(--paper-deep); }

/* ---------- ledger (stage overview + level detail) ---------- */
.ledger { border-top: var(--border-structural); margin-top: var(--space-5); }
.ledger-row {
  display: grid; grid-template-columns: 90px minmax(0, 5fr) minmax(0, 6fr) minmax(0, 4fr) 56px;
  gap: var(--space-3); align-items: baseline;
  padding-block: var(--space-4); border-bottom: var(--border-hairline);
  color: inherit; text-decoration: none;
  transition: background var(--dur-fast) var(--ease);
}
a.ledger-row:hover { background: var(--paper-deep); color: inherit; }
a.ledger-row:hover .row-arrow { color: var(--signal); transform: translateX(4px); }
.ledger-row .num { font-family: var(--font-data); font-size: clamp(28px, 2.6cqw, 40px); font-weight: 500; color: var(--signal); }
.ledger-row h3 { font-family: var(--font-display); font-size: var(--size-h3); font-weight: 700; letter-spacing: -0.01em; }
.ledger-row .tag { font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); display: block; margin-bottom: 8px; }
.ledger-row .tag.required::before { content: "●"; color: var(--signal); margin-right: 8px; }
.ledger-row p { max-width: 46ch; text-wrap: pretty; }
.ledger-row .meta { font-family: var(--font-data); font-size: var(--size-data); }
.ledger-row .meta strong { display: block; font-size: 19px; font-weight: 500; margin-bottom: 4px; }
.row-arrow { width: 26px; height: 26px; color: var(--ink); align-self: center; transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.ledger-note { display: flex; flex-wrap: wrap; gap: 10px 0; margin-top: var(--space-3); font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); }
.ledger-note li { display: flex; align-items: center; list-style: none; }
.ledger-note li + li::before { content: ""; width: 6px; height: 6px; background: var(--signal); margin-inline: 14px; flex: none; }
.after-ledger { margin-top: var(--space-5); }

/* ---------- principles (why it begins differently) ---------- */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin-top: var(--space-6); }
.principle { border-top: var(--border-signal); padding-top: var(--space-2); }
.principle .num { font-family: var(--font-data); font-size: var(--size-data); color: var(--ink-muted); }
.section.on-ink .principle .num { color: var(--cream-on-ink); }
.principle h3 { font-size: var(--size-h3); font-weight: 700; margin: 10px 0 12px; letter-spacing: -0.01em; }
.principle p { text-wrap: pretty; }
.section.on-ink .principle p { color: var(--cream-on-ink); }
.objection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- free-class path ---------- */
.preview-path { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-7); align-items: start; }
.preview-cta { margin-top: var(--space-5); }
.preview-steps { list-style: none; counter-reset: preview-step; border-top: var(--border-structural); }
.preview-steps li { counter-increment: preview-step; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px var(--space-2); padding-block: var(--space-3); border-bottom: var(--border-hairline); }
.preview-steps li::before { content: counter(preview-step, decimal-leading-zero); grid-row: 1 / span 2; font-family: var(--font-data); font-size: var(--size-data); color: var(--signal); }
.preview-steps strong { font-size: 20px; }
.preview-steps span { color: var(--ink-muted); }

/* ---------- programme summary ---------- */
.programme-total { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--space-3); align-items: baseline; margin-top: var(--space-4); padding: var(--space-4); border: var(--border-structural); background: var(--paper); }
.programme-total p { margin: 0; }
.programme-total strong { font-size: 20px; }

/* ---------- lower detail ---------- */
.detail-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.detail-pair > div { border-top: var(--border-signal); padding-top: var(--space-3); }
.detail-pair h3 { font-size: var(--size-h3); }
.detail-pair p { margin: var(--space-2) 0 var(--space-3); max-width: 48ch; }
.after-cta { margin-top: var(--space-3); }
.after-cta .text-link { color: var(--paper); }

/* ---------- business strip ---------- */
.biz-strip { border: var(--border-structural); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-4); margin-top: var(--space-6); }
.biz-strip p { font-size: var(--size-body-lg); font-weight: 600; max-width: 40ch; text-wrap: balance; }

/* ---------- founder ---------- */
.founder .grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-6); align-items: start; }
.founder figure img { width: 100%; height: auto; object-fit: cover; border: var(--border-structural); }
.founder figcaption { font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); margin-top: 10px; }
.founder p { max-width: var(--measure); margin-top: var(--space-3); text-wrap: pretty; }
.founder-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); border-top: var(--border-hairline); padding-top: var(--space-3); }
.founder-stats .stat strong { display: block; font-family: var(--font-display); font-size: clamp(24px, 2.2cqw, 32px); font-weight: 700; letter-spacing: -0.015em; }
.founder-stats .stat span { font-family: var(--font-data); font-size: var(--size-data-sm); color: var(--ink-muted); }
.founder .text-link { margin-top: var(--space-4); }

/* ---------- method ---------- */
.method-steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: var(--space-6); border-left: var(--border-hairline); }
.method-steps li { list-style: none; counter-increment: step; border-right: var(--border-hairline); padding: var(--space-3); }
.method-steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-data); font-size: var(--size-data); color: var(--signal); display: block; margin-bottom: var(--space-2); }
.method-steps h3 { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.section.on-ink .method-steps { border-color: var(--line-on-ink); }
.section.on-ink .method-steps li { border-color: var(--line-on-ink); }

/* ---------- FAQ ---------- */
.faq-list { border-top: var(--border-structural); margin-top: var(--space-5); max-width: 900px; }
.faq-list details { border-bottom: var(--border-hairline); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-3); font-family: var(--font-display); font-size: var(--size-h3); font-weight: 600; letter-spacing: -0.01em; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .mark { flex: none; width: 30px; height: 30px; position: relative; }
.faq-list summary .mark::before, .faq-list summary .mark::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--signal); }
.faq-list summary .mark::before { width: 18px; height: 3px; }
.faq-list summary .mark::after { width: 3px; height: 18px; transition: transform var(--dur-fast) var(--ease); }
.faq-list details[open] summary .mark::after { transform: scaleY(0); }
.faq-list details p { padding-bottom: var(--space-3); max-width: var(--measure); color: var(--ink-soft); text-wrap: pretty; }

/* ---------- final CTA ---------- */
.final-cta { text-align: left; }
.final-cta .signal-art { width: min(560px, 70%); margin-bottom: var(--space-5); }
.final-cta .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.final-cta p { color: var(--cream-on-ink); max-width: var(--measure); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: var(--cream-on-ink); border-top: 3px solid var(--signal); padding-block: var(--space-7) var(--space-5); }
.site-footer .top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); }
.site-footer .brand img { height: 28px; width: auto; }
.site-footer .brand .wordmark { width: 236px; height: auto; color: var(--paper); }
.site-footer .brand .tagline { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--paper); margin-top: var(--space-3); letter-spacing: -0.015em; }
.site-footer .brand p { margin-top: var(--space-2); max-width: 34ch; text-wrap: pretty; }
.site-footer .brand .text-link { color: var(--paper); margin-top: var(--space-3); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.footer-cols h3 { font-family: var(--font-data); font-size: var(--size-data-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--paper); margin-bottom: var(--space-2); }
.footer-cols ul { list-style: none; display: grid; gap: 10px; }
.footer-cols a { text-decoration: none; font-size: 16px; }
.footer-cols a:hover { color: var(--signal); }
.site-footer .backing { border-top: 1px solid var(--line-on-ink); margin-top: var(--space-6); padding-top: var(--space-4); font-size: 16px; max-width: 88ch; text-wrap: pretty; }
.site-footer .backing strong { color: var(--paper); }
.site-footer .legal { border-top: 1px solid var(--line-on-ink); margin-top: var(--space-4); padding-top: var(--space-3); font-family: var(--font-data); font-size: var(--size-data-sm); line-height: 1.7; }
.site-footer .legal a { color: var(--paper); }

/* ---------- motion ---------- */
.reveal { transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
/* Hidden only when scripting is live (see the inline guard in the head). No JS = no blank sections. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.reveal.in { opacity: 1; transform: none; }

/* Grouped cards arrive in sequence rather than as one block. Three steps, 70ms apart. */
.js .principles > .principle:nth-child(2) { transition-delay: 70ms; }
.js .principles > .principle:nth-child(3) { transition-delay: 140ms; }

/* The orange rule above each card draws itself in as the card lands. The rule is
   the page's signature mark, so it earns the one piece of motion that is not a fade. */
.js .principle { position: relative; border-top-color: transparent; }
.js .principle::before {
  content: ""; position: absolute; top: -3px; left: 0; right: 0; height: 3px;
  background: var(--signal); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 520ms var(--ease);
}
.js .principle.in::before { transform: scaleX(1); }

/* Read progress. The header's existing 3px rule fills as the page is read, so the
   indicator costs no new chrome and no page height. Where scroll timelines are not
   supported the rule simply stays full width, which is the current design exactly. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Scoped to the homepage body class so it outranks site-navigation.css,
       which loads after this file and sets the same border at one class deep. */
    /* No position declaration here: the shared header is position:sticky and any
       positioned value already anchors the ::after. Setting relative unsticks it. */
    .signal-home-page .gt-site-header { border-bottom-color: rgba(240, 90, 40, 0.2); }
    .signal-home-page .gt-site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
      background: var(--signal); transform-origin: 0 50%;
      animation: gt-read-progress linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes gt-read-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
}
/* Smallest supported phones: the headline wraps to six lines at 42px, which
   pushes the call-back form out of the first viewport. Step the hero type down
   so the offer, the date, the place and both asks still fit without scrolling. */
@media (max-width: 360px) {
  .hero .display-1 { font-size: 34px; }
  .hero .lede { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .js .reveal { opacity: 1; transform: none; }
  .js .principle { border-top-color: var(--signal); }
  .js .principle::before { display: none; }
}

/* ============================================================
   MOBILE — one breakpoint at 720px (container width)
   ============================================================ */
@media (max-width: 720px) {
  .site-nav { display: none; }
  .site-nav.open { display: grid; position: absolute; left: 0; right: 0; top: 100%; background: var(--ink); border-bottom: 3px solid var(--signal); padding: var(--space-3) var(--gutter) var(--space-4); gap: var(--space-3); z-index: 40; }
  .site-nav.open a { font-size: 20px; }
  .nav-toggle { display: inline-block; }
  .site-header .bar { position: relative; }
  .site-header { position: relative; }
  .site-header .brand-lockup { gap: 8px; }
  .site-header .brand-lockup .brand-spark { width: 36px; height: 36px; }
  .site-header .brand-lockup .brand-wordmark { height: 34px; }

  /* The strip costs a whole band of vertical space on a phone, so it is hidden
     here. The phone-only .hero-meta line below therefore has to carry the
     in-person, location and start-date facts. Do not drop "In person" from it. */
  .facts-strip { display: none; }

  .hero .grid { grid-template-columns: 1fr; gap: var(--space-4); padding-block: 20px 48px; }
  .hero .kicker { margin-top: var(--space-2); margin-bottom: var(--space-2); }
  .hero .lede { margin-top: 12px; }
  .hero-meta { display: block; margin-top: 4px !important; margin-bottom: 8px;
    font-family: var(--font-data); font-size: 13px; line-height: 1.4; color: var(--cream-on-ink); }
  .hero-art { display: none; }
  .hero .cta-row { margin-top: var(--space-3); }
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; font-size: 13px; }
  .hero-facts li + li::before { display: none; }
  .cta-row .btn { width: 100%; justify-content: center; }
  /* On a phone the booking button and the call-back form must both sit in the
     first viewport, so the reassurance line (repeated in section 01) gives way. */
  .hero .hero-reassurance { display: none; }
  .hero-actions { flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
  .hero-actions .cta-row, .hero-lead { width: 100%; flex: 0 0 auto; }
  /* Overrides .hero .cta-row above, which would otherwise re-add a 24px gap
     and push the form's submit button out of the first viewport. */
  .hero-actions .cta-row { margin-top: 0; }
  /* Name and mobile share one row so the submit still lands above the fold. */
  .hero-lead-row input[type="text"],
  .hero-lead-row input[type="tel"] { flex: 1 1 8rem; }
  .hero-lead-row .btn { width: 100%; justify-content: center; }

  .ledger-row { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto; row-gap: var(--space-2); }
  .ledger-row .num { grid-row: 1 / span 3; }
  .ledger-row p, .ledger-row .meta { grid-column: 2; }
  .row-arrow { display: none; }

  .principles, .objection-grid { grid-template-columns: 1fr; }
  .preview-path { grid-template-columns: 1fr; gap: var(--space-5); }
  .preview-cta { width: 100%; justify-content: center; }
  .programme-total { grid-template-columns: 1fr; }
  .detail-pair { grid-template-columns: 1fr; gap: var(--space-5); }
  .biz-strip { grid-template-columns: 1fr; }
  .biz-strip .btn { width: 100%; justify-content: center; }
  .founder .grid { grid-template-columns: 1fr; }
  .method-steps { grid-template-columns: 1fr; border-left: none; border-top: var(--border-hairline); }
  .method-steps li { border-right: none; border-bottom: var(--border-hairline); padding-inline: 0; }
  .section.on-ink .method-steps li { border-color: var(--line-on-ink); }
  .faq-list summary { font-size: 20px; }
  .site-footer .top { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .final-cta .signal-art { width: 100%; }
}