/* ==========================================================================
   Blueprint Marketing
   Built from blueprint-marketing-design-system-2026-07-19.md
   Sections 1 to 9 of this file are home-variation-a.html's stylesheet, carried
   over unchanged. Section 10 onward adds only what the three new pages need.
   ========================================================================== */

/* ---------- Local fonts. Config Mono VF is Typekit and loads per page ---------- */
@font-face{
  font-family:"Instrument Sans";
  src:url("../assets/fonts/InstrumentSans-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("../assets/fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- §10 design-system :root, pasted verbatim ---------- */
:root {
  --color-primary: #4569ad;
  --color-primary-dark: #35528a;
  --color-secondary: #e8eef8;
  --color-ink: #23272e;
  --color-body: #5a6472;
  --color-muted: #8a8071;
  --color-bg: #fdfcfa;
  --color-bg-alt: #f4f1ea;
  --color-surface: #fdfcfa;
  --color-footer-bg: #23272e;   /* the footer only, §3 exception */
  --color-on-footer: #cdc9c2;   /* 9.09:1 AAA on the footer */
  --color-success: #2a7053;
  --color-error: #b3261e;
  --color-on-primary: #fdfcfa;
  --hairline: rgba(35,39,46,.10);

  --font-display: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "Config Mono VF", ui-monospace, SFMono-Regular, Menlo, monospace;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --gap: 24px;
  --container-max: 1240px;
  --section-pad-y: 120px;
  --radius: 12px;
  --shadow: 0 2px 6px rgba(35,39,46,.04), 0 10px 24px rgba(35,39,46,.06);
  --shadow-lg: 0 6px 14px rgba(35,39,46,.07), 0 18px 40px rgba(35,39,46,.10);
  --transition: 150ms ease;
  --focus-ring: 3px solid var(--color-primary);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--color-bg); color:var(--color-body);
  font-family:var(--font-body); font-size:16px; line-height:1.75;
  overflow-x:hidden;
  /* Design system §4. Both lines are required and both are INHERITED, so they
     govern every heading, paragraph, button and label on the page. Removing them
     renders the whole page one step heavier without any token changing. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%; height:auto; display:block;}
a{color:var(--color-primary); text-decoration:none;}
a:hover{color:var(--color-primary-dark);}
:focus-visible{outline:var(--focus-ring); outline-offset:2px; border-radius:var(--space-xs);}

h1,h2,h3{font-family:var(--font-display); color:var(--color-ink); line-height:1.15; margin:0;}
h1{font-size:48px; font-weight:600; letter-spacing:-.02em;}
h2{font-size:32px; font-weight:600; letter-spacing:-.02em;}
h3{font-size:20px; font-weight:600;}
p{margin:0; max-width:65ch;}
.accent{font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:1.06em; color:var(--color-primary);}

.eyebrow{
  font-family:var(--font-mono); font-size:14px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary);
  margin:0 0 var(--space-xs); line-height:1.4;
}
.wrap{width:100%; max-width:var(--container-max); margin-inline:auto; padding-inline:var(--space-lg);}
section{padding-block:var(--section-pad-y);}
.band-alt{background:var(--color-bg-alt);}

/* Skip link. Visible only on keyboard focus. */
.skip-link{
  position:absolute; left:var(--space-lg); top:-100px; z-index:100;
  background:var(--color-primary); color:var(--color-on-primary);
  padding:var(--space-sm) var(--space-md); border-radius:var(--radius);
  font-family:var(--font-display); font-weight:600;
  transition:top var(--transition);
}
.skip-link:focus{top:var(--space-sm); color:var(--color-on-primary);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:14px 28px; cursor:pointer;
  border-radius:var(--radius); border:1px solid transparent;
  font-family:var(--font-display); font-size:16px; font-weight:600; line-height:1.15; white-space:nowrap;
  transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn-primary{background:var(--color-primary); color:var(--color-on-primary);}
.btn-primary:hover{background:var(--color-primary-dark); color:var(--color-on-primary); transform:translateY(-2px); box-shadow:var(--shadow);}
.btn-primary:active{background:var(--color-primary-dark); transform:translateY(0); box-shadow:none;}

.btn-secondary{background:transparent; color:var(--color-primary); border-color:var(--color-primary);}
.btn-secondary:hover{background:var(--color-primary); color:var(--color-on-primary); transform:translateY(-2px);}
.btn-secondary:active{
  background:var(--color-primary-dark); border-color:var(--color-primary-dark);
  color:var(--color-on-primary); transform:translateY(0);
}

/* On the blue band the primary inverts (§6) */
.btn-on-primary{background:var(--color-on-primary); color:var(--color-primary);}
.btn-on-primary:hover{background:var(--color-bg-alt); color:var(--color-primary-dark); transform:translateY(-2px); box-shadow:var(--shadow);}
.btn-on-primary:active{transform:translateY(0); box-shadow:none;}

.btn:disabled,.btn[aria-disabled="true"]{
  cursor:not-allowed; opacity:.6; transform:none; box-shadow:none;
}
.btn-primary:disabled,.btn-primary[aria-disabled="true"]{background:var(--color-muted); color:var(--color-on-primary); border-color:transparent;}
.btn-secondary:disabled,.btn-secondary[aria-disabled="true"]{background:transparent; color:var(--color-muted); border-color:var(--color-muted);}
.btn[aria-disabled="true"]:hover{transform:none; box-shadow:none;}

/* Text + arrow links (design system §6). Arrow slide is the non-color cue. */
.link{color:var(--color-primary); text-decoration:none; font-weight:500;}
.link .arrow{white-space:nowrap;}
.link svg{width:.8em; height:.8em; vertical-align:-.02em; transition:transform var(--transition);}
.link:hover{color:var(--color-primary-dark);}
.link:hover svg{transform:translateX(2px);}
.link.ext:hover svg{transform:translate(2px, -2px);}
.link:focus-visible{outline:var(--focus-ring); outline-offset:2px; border-radius:3px;}

/* ---------- Header: light, logo left, inline nav, CTA right, sticky ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(253,252,250,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
  transition:box-shadow var(--transition);
}
/* Sticky header gains elevation once the page scrolls (design system §8: state
   change, not motion), so it stays readable over content. JS toggles .is-stuck. */
.site-header.is-stuck{box-shadow:var(--shadow);}
.header-inner{display:flex; align-items:center; gap:var(--space-xl); min-height:76px;}
/* min-height keeps the logo a 44px tap target even where the mark renders shorter */
.logo{display:inline-flex; align-items:center; min-height:44px;}
.logo img{width:182px;}
.main-nav{display:flex; gap:var(--space-lg); margin-left:auto;}
.main-nav a{
  display:inline-flex; align-items:center; min-height:44px; padding-inline:var(--space-sm);
  font-family:var(--font-display); font-weight:500; color:var(--color-ink); position:relative;
  transition:color var(--transition);
}
/* bottom:8px, not 16px: the anchor is a 44px tap target, so a higher rule crowds the word */
.main-nav a::after{
  content:""; position:absolute; left:var(--space-sm); right:var(--space-sm); bottom:8px; height:2px;
  background:var(--color-primary); transform:scaleX(0); transform-origin:left;
  transition:transform var(--transition);
}
.main-nav a:hover{color:var(--color-primary);}
.main-nav a:hover::after,.main-nav a[aria-current="page"]::after{transform:scaleX(1);}
.header-actions{display:flex; align-items:center; gap:var(--space-md); margin-left:auto;}
.main-nav + .header-actions{margin-left:0;}

/* ---------- Mobile menu ---------- */
.nav-toggle{
  display:none; align-items:center; justify-content:center; gap:var(--space-sm);
  width:44px; height:44px; padding:0; cursor:pointer;
  background:transparent; border:1px solid var(--hairline); border-radius:var(--radius);
  color:var(--color-ink); transition:background var(--transition), border-color var(--transition);
}
.nav-toggle:hover{background:var(--color-secondary); border-color:var(--color-primary);}
.nav-toggle svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round;}
.nav-toggle .icon-close{display:none;}
.nav-toggle[aria-expanded="true"] .icon-open{display:none;}
.nav-toggle[aria-expanded="true"] .icon-close{display:block;}

/* Hidden above the breakpoint. Below it, the panel is visible by default so that a
   no-JS reader can still navigate; the .js hook below collapses it once JS is present. */
.mobile-nav{
  display:none; border-top:1px solid var(--hairline);
  background:var(--color-bg); padding-block:var(--space-sm) var(--space-md);
}
.mobile-nav ul{list-style:none; margin:0; padding:0;}
/* Scoped to `li a`, not `.mobile-nav a`: the latter outweighs .btn-primary and would
   repaint the CTA's label in ink and give it a divider. */
.mobile-nav li a{
  display:flex; align-items:center; min-height:44px;
  font-family:var(--font-display); font-weight:500; font-size:18px; color:var(--color-ink);
  border-bottom:1px solid var(--hairline); transition:color var(--transition);
}
.mobile-nav li:last-child a{border-bottom:none;}
.mobile-nav li a:hover,.mobile-nav li a[aria-current="page"]{color:var(--color-primary);}
.mobile-nav .btn{display:flex; width:100%; margin-top:var(--space-md);}

/* ---------- Hero: Split ---------- */
/* min-height, not height: short viewports and the mobile stack still grow rather than clip.
   160px = the 76px sticky header plus clearance, so the band below shows its top edge but
   keeps its heading under the fold. */
.hero{
  padding-block:var(--space-3xl);
  min-height:calc(100vh - 160px);
  display:flex; align-items:center;
}
.hero > .wrap{width:100%;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:var(--space-2xl); align-items:center;}
.hero h1{margin-bottom:var(--space-lg);}
.hero-sub{font-size:20px; line-height:1.6; margin-bottom:var(--space-xl);}
.hero-ctas{display:flex; flex-wrap:wrap; gap:var(--space-md);}

/* ---------- Pipeline board (static final frame of the hero animation) ---------- */
.bp-browser{
  width:100%; max-width:460px; margin-inline:auto;
  border-radius:14px; overflow:hidden; background:var(--color-surface);
  box-shadow:var(--shadow-lg); border:1px solid var(--hairline);
}
.bp-topbar{background:var(--color-primary); padding:11px 14px; display:flex; align-items:center; gap:12px;}
.bp-lights{display:flex; gap:6px;}
.bp-lights span{width:9px; height:9px; border-radius:50%; background:rgba(253,252,250,.4);}
.bp-url{
  flex:1; background:rgba(253,252,250,.16); color:var(--color-on-primary);
  font-family:var(--font-mono); font-size:12px; padding:5px 10px; border-radius:6px;
}
.bp-body{padding:22px 22px 26px;}
.bp-head{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:1px solid var(--hairline); padding-bottom:12px; margin-bottom:18px;
}
.bp-label{font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--color-body);}
.bp-amount{font-family:var(--font-mono); font-size:20px; font-weight:600; line-height:1; color:var(--color-ink);}
.bp-board{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; position:relative;}
.bp-col-label{font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-body); margin-bottom:var(--space-sm);}
.bp-slot{height:118px; border:1.5px dashed var(--hairline); border-radius:10px; background:var(--color-bg-alt);}
/* The card is an absolutely-positioned sibling of the three slots. JS drives its
   transform (Lead -> Proposal -> Won) and the counter; see js/main.js. */
.bp-card{
  position:absolute; top:0; left:0; box-sizing:border-box;
  width:calc((100% - 20px) / 3); height:118px; border-radius:10px; padding:10px 12px;
  border:1.5px solid var(--color-primary); background:var(--color-secondary); opacity:0;
  transition:transform .85s cubic-bezier(.4,0,.2,1), border-color .4s, background-color .4s, opacity .4s;
}
.bp-card.is-won{border-color:var(--color-success);}
/* Fallback when JS is off: show the card as the static final Won frame. The counter
   already reads 3 in the markup. (200% of the card's own width + two 10px gaps lands
   it in the Won column.) */
html:not(.js) .bp-card{opacity:1; transform:translate(calc(200% + 20px), 27px);}
.bp-card-top{display:flex; align-items:center; gap:7px; margin-bottom:var(--space-sm);}
/* 24px circle, not 22px, so the initials can sit at the 12px floor (§9: no text
   below 12px). At 22px they were 10px and broke that rule. */
.bp-avatar{
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  background:var(--color-primary); color:var(--color-on-primary);
  font-family:var(--font-mono); font-size:12px; font-weight:600; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.bp-name{font-size:12px; font-weight:600; color:var(--color-ink);}
.bp-contact{font-size:12px; color:var(--color-body);}

/* ---------- Services: Icon card grid, heading on a left rail ---------- */
.rail{display:grid; grid-template-columns:340px 1fr; gap:var(--space-2xl); align-items:start;}
.card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap);}

/* §6: cards are static here, so they do not lift on hover.
   Elevation is set by the surface underneath: hairline on a white section,
   --shadow on the off-white band. Never both. */
.card{
  background:var(--color-surface); border-radius:var(--radius);
  padding:var(--space-lg);
  display:flex; gap:var(--space-md); align-items:flex-start;
}
section:not(.band-alt) .card{border:1px solid var(--hairline);}
.band-alt .card{box-shadow:var(--shadow);}

.icon-plate{
  width:44px; height:44px; flex-shrink:0; border-radius:var(--radius); background:var(--color-secondary);
  display:flex; align-items:center; justify-content:center;
}
.icon-plate svg{width:22px; height:22px; stroke:var(--color-primary); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
.card h3{margin-bottom:var(--space-xs);}
.card p{font-size:16px; line-height:1.6;}
.section-head{max-width:65ch;}
.section-foot{margin-top:var(--space-xl);}

/* ---------- Process: Numbered process row ---------- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-xl); margin-top:var(--space-2xl);}
.steps-3{grid-template-columns:repeat(3,1fr);}
.step{position:relative;}
/* Connector is drawn per step, not once across the row. A single absolute rule can't
   terminate on both outer numerals, because the numerals are left-aligned in their
   columns: any percentage that clears 01 overshoots 04. Each step instead spans its own
   column plus the gap, reaching the next numeral. The last step draws nothing, so there
   is no tail past the final numeral. */
.step:not(:last-child)::after{
  content:""; position:absolute; top:24px; z-index:0;
  left:0; right:calc(-1 * var(--space-xl));
  height:1px; background:var(--hairline);
}
/* The numeral's opaque background masks the start of its own line */
.step-num{
  font-family:var(--font-mono); font-size:32px; font-weight:600; line-height:1;
  color:var(--color-primary); background:var(--color-bg);
  display:inline-block; padding-right:var(--space-md); margin-bottom:var(--space-lg);
  position:relative; z-index:1;
}
.band-alt .step-num{background:var(--color-bg-alt);}
.step h3{margin-bottom:var(--space-sm);}

/* Quiet staggered reveal (design system §8). JS adds .is-in per step, left to right.
   Without JS nothing gets .reveal-ready, so every step is visible from the start. */
.js .reveal-ready .step{opacity:0; transform:translateY(12px); transition:opacity 400ms ease, transform 400ms ease;}
.js .reveal-ready .step:not(:last-child)::after{transform:scaleX(0); transform-origin:left; transition:transform 400ms ease;}
.js .reveal-ready .step.is-in{opacity:1; transform:none;}
.js .reveal-ready .step.is-in:not(:last-child)::after{transform:scaleX(1);}

/* Generic scroll reveal (design system §8: Quiet). The same short fade + small upward
   offset as the steps above, applied site-wide. JS adds .reveal to target blocks and
   .is-visible when each scrolls into view, with a per-item transition-delay for a
   cascade. Added only from JS, so no-JS readers never see hidden content. */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity 550ms ease, transform 550ms cubic-bezier(.16,1,.3,1);}
.js .reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){.js .reveal{opacity:1; transform:none;}}

/* ---------- Why us: Offset / overlap cards ---------- */
.offset-band{background:var(--color-primary); border-radius:var(--radius); padding:var(--space-2xl) var(--space-xl);}
.offset-band h2{color:var(--color-on-primary); max-width:20ch;}
.offset-band .eyebrow{color:var(--color-secondary);}
.offset-band .accent{color:var(--color-secondary);}
/* No align-items:start here: the cards must stretch so each row lands on one
   baseline. Ragged card heights were most of what made the stagger read as broken. */
.offset-cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
  margin-top:var(--space-xl); margin-bottom:var(--space-lg);
}
/* Six cards resolve to a clean 3x2. Offset the MIDDLE column of each row (items 2 and 5),
   not every even card: nth-child(even) hits 2,4,6, which inverts row two to low/high/low
   and pushes the two middle cards together. */
.offset-cards .card{display:block; height:100%; border:none; box-shadow:var(--shadow);}
.offset-cards .card:nth-child(3n+2){transform:translateY(var(--space-lg));}

/* ---------- FAQ: Accordion ---------- */
.faq{max-width:820px; margin-top:var(--space-xl);}
.faq details{border-bottom:1px solid var(--hairline);}
.faq summary{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-md);
  min-height:44px; padding-block:var(--space-lg); cursor:pointer; list-style:none;
  font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--color-ink);
  transition:color var(--transition);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--color-primary);}
.faq summary::after{content:"+"; font-family:var(--font-mono); font-size:24px; color:var(--color-primary); line-height:1;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{padding-bottom:var(--space-lg);}
/* A newly-opened panel eases in rather than snapping. JS closes the previously open
   item in the same group (see js/main.js), so only one is ever open at a time. */
.faq details[open] > *:not(summary){animation:faq-open 300ms ease;}
@keyframes faq-open{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){.faq details[open] > *:not(summary){animation:none;}}

/* ---------- CTA band: Full-bleed ---------- */
/* 96px rather than the global 120px. Documented exception, design system §5: the 120px rule
   exists because space does the structural work colour used to do, and on the one solid
   blue band colour is already doing that work. */
.cta-band{background:var(--color-primary); text-align:center; padding-block:var(--space-3xl);}
.cta-band h2{color:var(--color-on-primary);}
.cta-band .accent{color:var(--color-secondary);}
.cta-band p{color:var(--color-secondary); margin:var(--space-md) auto var(--space-xl); font-size:20px;}

/* ---------- Footer: 4-column mega on the one sanctioned dark surface (design system §3) ---------- */
.site-footer{background:var(--color-footer-bg); color:var(--color-bg-alt); padding-block:var(--space-3xl) var(--space-lg);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:var(--space-2xl);}
.site-footer h3{color:var(--color-bg); font-size:14px; letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-mono); font-weight:500; margin-bottom:var(--space-lg);}
.site-footer p,.site-footer li{color:var(--color-on-footer); font-size:16px;}
.site-footer a{color:var(--color-on-footer);}
/* Footer links hover to --color-bg, not --color-primary: the blue is 2.77:1 here and fails (§3) */
.site-footer a:hover{color:var(--color-bg);}
.site-footer ul{list-style:none; margin:0; padding:0;}
.site-footer li a{display:inline-flex; align-items:center; min-height:44px;}
.footer-logo img{width:200px; margin-bottom:var(--space-lg);}
/* Scoped to .site-footer so it outweighs `.site-footer p` (0,1,1), which otherwise
   forces this back to 16px in the muted footer colour. */
.site-footer .footer-tagline{
  font-family:var(--font-serif); font-style:italic; font-size:24px;
  line-height:1.4; color:var(--color-bg);
}

/* "Still losing calls?" gets its own full-width row, a lifted plane on the dark band.
   The card surface is what lets the primary button sit here at all (§3 audit). */
.footer-cta{
  margin-top:var(--space-2xl); padding:var(--space-lg) var(--space-xl);
  background:var(--color-secondary); border-radius:var(--radius);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-lg);
}
.footer-cta h3{
  font-family:var(--font-display); font-size:20px; text-transform:none; letter-spacing:0;
  color:var(--color-ink); margin:0 0 var(--space-xs);
}
.footer-cta p{color:var(--color-body); font-size:16px;}
.footer-cta a{color:var(--color-on-primary);}
.footer-cta a:hover{color:var(--color-on-primary);}

.social{display:flex; gap:var(--space-md); margin-top:var(--space-md);}
.social a{
  width:44px; height:44px; border-radius:var(--radius); border:1px solid rgba(253,252,250,.2);
  display:flex; align-items:center; justify-content:center; transition:background var(--transition), border-color var(--transition);
}
.social a:hover{background:rgba(253,252,250,.1); border-color:var(--color-bg);}
.social svg{width:20px; height:20px; fill:currentColor;}
.footer-legal{
  display:flex; flex-wrap:wrap; gap:var(--space-lg); justify-content:center;
  margin-top:var(--space-3xl); padding-top:var(--space-lg);
  border-top:1px solid rgba(253,252,250,.15); font-size:14px;
}
.footer-legal a{min-height:44px; display:inline-flex; align-items:center;}

/* ==========================================================================
   Added for about.html, what-we-do.html and free-audit.html.
   Every value below still comes from the tokens above.
   ========================================================================== */

/* ---------- Heading margins on the new pages ----------
   Home hand-spaces its sections (a deliberate opt-out, design system §5), so the
   global h1/h2/h3 margin is 0 and .hero h1 sets its own. These pages put prose
   directly under a heading, so they need the §5 margin table: --space-sm below a
   heading, so it hugs the text it introduces. Scoped to the new containers, so
   nothing on the home page moves.

   Every selector is a sibling pair, so each fires only where prose actually follows
   a heading. Home's section-heads have no such sibling, and its hero is excluded by
   :not(.hero) because .hero h1 already carries its own bottom margin: matching it
   here would double the gap on a page that must not move. */
section:not(.hero) > .hero-grid h1 + p,
.booking-grid h1 + p{margin-top:var(--space-lg);}
.split-body h2 + p,
.section-head h2 + p{margin-top:var(--space-sm);}

/* ---------- Inner page hero: a Split with the media column removed (§6.5 note) ---------- */
/* Not the 100vh floor: that belongs to Home. An inner hero introduces the page and
   then gets out of the way. */
.hero-compact{padding-block:var(--space-3xl) var(--space-2xl); text-align:center;}
.hero-compact .wrap{max-width:820px;}
.hero-compact h1{margin-bottom:var(--space-lg);}
.hero-compact p{margin-inline:auto;}

/* ---------- Split with a real photo (About) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center;}
.split-media img{border-radius:var(--radius); width:100%;}
.split-body p + p{margin-top:var(--space-md);}
.fact-list{list-style:none; margin:var(--space-xl) 0 0; padding:0; display:grid; gap:var(--space-md);}
.fact-list li{display:flex; gap:var(--space-md); align-items:flex-start; color:var(--color-body);}
.fact-list strong{color:var(--color-ink);}
/* The tick is a shape, not a colour signal (§9), and it is decorative: the text carries it. */
.fact-list svg{width:20px; height:20px; flex-shrink:0; margin-top:4px; stroke:var(--color-primary); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
/* A closing note on the section, not a fourth card grid (content map, About). */
.values-line{
  margin-top:var(--space-xl); padding-top:var(--space-lg);
  border-top:1px solid var(--hairline);
  font-family:var(--font-serif); font-style:italic; font-size:20px; line-height:1.5;
  color:var(--color-ink);
}

/* ---------- Journey diagram (What We Do hero) ---------- */
/* A stylised diagram, not a screenshot, on the same footing as the Home hero board
   (content map §6). It holds the slot until real screen captures exist. */
.journey{
  background:var(--color-surface); border:1px solid var(--hairline);
  border-radius:var(--radius); padding:var(--space-xl); box-shadow:var(--shadow-lg);
  max-width:460px; margin-inline:auto; width:100%;
}
.journey ol{list-style:none; margin:0; padding:0; display:grid; gap:var(--space-lg);}
.journey li{display:grid; grid-template-columns:36px 1fr; gap:var(--space-md); align-items:start; position:relative;}
.journey li:not(:last-child)::before{
  content:""; position:absolute; left:17px; top:36px; bottom:calc(-1 * var(--space-lg));
  width:1px; background:var(--hairline);
}
.journey-dot{
  width:36px; height:36px; border-radius:50%; background:var(--color-secondary);
  display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--color-primary);
}
.journey-step{font-size:16px; font-weight:600; color:var(--color-ink); line-height:1.4;}
.journey-note{font-size:14px; color:var(--color-body); line-height:1.5;}
.journey-head{
  margin-bottom:var(--space-lg); padding-bottom:var(--space-md); border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-body); font-weight:400;
}

/* ---------- Accordion with nested bullets (What We Do) ---------- */
/* What We Do: the same accordion, but each row is a bordered card in a single
   column. align-items:start lets a card expand on click without stretching
   its row neighbour. <details> opens on click, no JS needed. */
.faq-wide{
  max-width:960px; display:grid; grid-template-columns:1fr;
  gap:var(--space-lg); align-items:start;
}
.faq-wide details{
  border-bottom:none; border:1px solid var(--hairline); border-radius:var(--radius);
  background:var(--color-surface); box-shadow:var(--shadow); padding:0 var(--space-lg);
  transition:box-shadow var(--transition);
}
.faq-wide details[open]{box-shadow:var(--shadow-lg);}
.faq summary .summary-text{display:flex; align-items:center; gap:var(--space-md);}
.faq summary svg{width:22px; height:22px; flex-shrink:0; stroke:var(--color-primary); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
.faq-body{padding-bottom:var(--space-lg); padding-left:calc(22px + var(--space-md));}
.faq-body ul{margin:0 0 var(--space-md); padding-left:var(--space-lg);}
.faq-body li{margin-bottom:var(--space-xs); color:var(--color-body);}
.faq-body .why{font-size:16px;}
.faq-body .why em{font-style:italic; color:var(--color-ink);}

/* ---------- Demo section (What We Do) ---------- */
.demo-cards{display:grid; gap:var(--gap); margin-top:var(--space-xl);}
.demo-card{
  background:var(--color-surface); border-radius:var(--radius); padding:var(--space-lg);
  box-shadow:var(--shadow); display:flex; gap:var(--space-md); align-items:flex-start;
}
.demo-card h3{margin-bottom:var(--space-xs);}
.demo-card p{font-size:16px; line-height:1.6;}
/* A status, so it carries a label and a shape, not colour alone (§6 Status). */
.pill{
  display:inline-flex; align-items:center; gap:var(--space-xs);
  font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-body); background:var(--color-bg-alt); border:1px solid var(--hairline);
  border-radius:999px; padding:4px 12px; margin-top:var(--space-sm);
}
.demo-frame{
  background:var(--color-secondary); border:1px solid var(--hairline); border-radius:var(--radius);
  padding:var(--space-xl); text-align:center; box-shadow:var(--shadow);
}
.demo-frame svg{width:48px; height:48px; margin:0 auto var(--space-md); stroke:var(--color-primary); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.demo-frame p{margin-inline:auto; font-size:16px;}
/* The real demo screenshot (replaces the .demo-frame placeholder). Radius + width
   come from .split-media img; this adds the framed border and lift. */
.demo-shot{border:1px solid var(--hairline); box-shadow:var(--shadow-lg); height:auto;}

/* ---------- Booking (Let's chat) ---------- */
.booking-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2xl); align-items:center;}
/* The hero's right column: centres the ≤460px browser-calendar animation. */
.booking-media{display:flex; align-items:center; justify-content:center;}

/* Booking band. The card is brand-blue so it separates cleanly from the hero
   above (content map, Let's chat). Copy sits on blue, the embed stays light. */
#book{scroll-margin-top:88px; padding-block:var(--space-2xl) var(--space-3xl);}
.booking-panel{
  width:90%; max-width:1400px; margin-inline:auto;
  background:var(--color-primary); border-radius:var(--radius);
  padding:var(--space-xl); box-shadow:var(--shadow-lg);
}
.booking-panel h2{font-size:20px; margin-bottom:var(--space-sm); color:var(--color-on-primary);}
/* --color-secondary (4.65:1 on primary) is the on-blue body treatment used by
   .cta-band p; the previous .82 white blended to 4.16:1 and failed AA. */
.booking-panel > p{color:var(--color-secondary);}
/* The embed slot. Marked so it cannot be mistaken for finished, and readable copy
   sits inside it so the page still works before the calendar is connected. */
.embed-slot{
  border-radius:var(--radius); overflow:hidden; background:var(--color-bg-alt);
  margin-top:var(--space-lg);
}
/* The GHL script auto-sizes the iframe; min-height is a fallback while it loads. */
.embed-slot iframe{width:100%; min-height:650px; border:none; display:block;}
.embed-slot svg{width:40px; height:40px; margin:0 auto var(--space-md); stroke:var(--color-primary); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;}
.embed-tag{
  display:inline-block; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  color:var(--color-body); background:var(--color-surface);
  border:1px solid var(--color-muted); border-radius:999px; padding:4px 12px; margin-bottom:var(--space-md);
}
.embed-slot p{margin-inline:auto;}
.booking-points{list-style:none; margin:var(--space-xl) 0 0; padding:0; display:grid; gap:var(--space-lg);}
.booking-points li{display:flex; gap:var(--space-md); align-items:flex-start;}
.booking-points svg{width:22px; height:22px; flex-shrink:0; margin-top:2px; stroke:var(--color-primary); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;}
.booking-points strong{color:var(--color-ink); display:block;}
.booking-points span{font-size:16px; line-height:1.6;}

/* Scroll cue: centered below the hero, nudging the eye down to the booking band. */
.scroll-cue{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:max-content; min-height:44px; padding-inline:var(--space-md);
  margin:var(--space-lg) auto 0; text-decoration:none;
  font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:600;
  color:var(--color-primary);
}
.scroll-cue:hover{color:var(--color-primary-dark);}
.scroll-cue-chevron{
  width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  animation:scroll-cue-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-cue-bounce{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue-chevron{animation:none;}
}

/* ---------- Browser-calendar animation (Let's chat hero) ----------
   Self-contained block from browser-calendar-animation.html, prefixed bpc-* so it
   can't collide with the index hero board's bp-* classes. Initialised in main.js.
   --bpc-blue matches --color-primary. */
.bpc-browser{
  --bpc-blue:#4569ad; --bpc-ink:#0f172a; --bpc-muted:#64748b;
  width:100%; max-width:460px; border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 40px 80px -24px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06);
}
.bpc-browser *{box-sizing:border-box;}
.bpc-topbar{background:var(--bpc-blue); padding:11px 14px; display:flex; align-items:center; gap:12px;}
.bpc-lights{display:flex; gap:6px;}
.bpc-lights span{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.4);}
.bpc-url{flex:1; background:rgba(255,255,255,.16); color:rgba(255,255,255,.85); font-size:12px; padding:5px 10px; border-radius:6px;}
.bpc-body{padding:22px 22px 26px; background:#fff;}
.bpc-header{display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #e7eaf0; padding-bottom:12px; margin-bottom:18px;}
.bpc-label{font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--bpc-muted);}
.bpc-amount{font-size:21px; font-weight:700; color:var(--bpc-ink);}
.bpc-weekdays{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-bottom:8px;}
.bpc-weekdays span{text-align:center; font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:#9aa5b4;}
.bpc-cal{display:grid; grid-template-columns:repeat(7,1fr); gap:8px;}
.bpc-day{
  position:relative; aspect-ratio:3 / 5; border:1.5px dashed #e1e5ec; border-radius:8px; background:#fafbfc;
  transition:border-color .4s cubic-bezier(.4,0,.2,1), background-color .4s cubic-bezier(.4,0,.2,1), border-style .01s;
}
.bpc-day.is-done{border-style:solid; border-color:var(--bpc-blue); background:rgba(69,105,173,.09);}
.bpc-check{
  position:absolute; top:50%; left:50%; width:22px; height:22px; opacity:0;
  transform:translate(-50%,-50%) scale(.3); filter:drop-shadow(0 2px 4px rgba(69,105,173,.35));
  transition:transform .42s cubic-bezier(.34,1.56,.64,1), opacity .25s ease; pointer-events:none;
}
.bpc-day.is-checked .bpc-check{opacity:1; transform:translate(-50%,-50%) scale(1);}
.bpc-check svg{display:block; width:100%; height:100%;}
@media (prefers-reduced-motion: reduce){
  .bpc-day,.bpc-check{transition:none;}
}

/* The quiz band reads as secondary to the booking above it, so it uses the off-white
   band rather than --color-primary (content map, Let's chat). */
.cta-band-alt{background:var(--color-bg-alt); text-align:center; padding-block:var(--space-3xl);}
.cta-band-alt p{color:var(--color-body); margin:var(--space-md) auto var(--space-xl); font-size:20px;}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid,.rail,.split,.booking-grid{grid-template-columns:1fr;}
  .card-grid,.steps,.offset-cards{grid-template-columns:repeat(2,1fr);}
  .steps-3{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:repeat(2,1fr); gap:var(--space-xl);}
  .step:not(:last-child)::after{display:none;}
  .offset-cards .card:nth-child(3n+2){transform:none;}
  .split-media{order:-1;}

  /* Inline nav gives way to the hamburger */
  .main-nav{display:none;}
  .nav-toggle{display:inline-flex;}
  /* Must match the desktop rule's specificity: .main-nav is display:none here but
     is still an adjacent sibling, so `.main-nav + .header-actions` keeps matching. */
  .main-nav + .header-actions{margin-left:auto;}
  .mobile-nav{display:block;}                                   /* no-JS fallback: reachable */

  /* The header bar is a child of the same stacking context as the overlay below, so it
     needs an explicit z-index to stay ABOVE it: this keeps the logo in place and the
     close (X) toggle clickable while the menu is open. */
  .header-inner{position:relative; z-index:2;}

  /* Critical: .site-header has backdrop-filter, which makes it the containing block for
     its position:fixed descendants. That would trap the overlay inside the ~76px header
     bar (menu items clipped, page not covered). Dropping the filter while the menu is
     open lets the overlay's inset:0 resolve to the viewport for a true full-screen menu.
     The blur is invisible behind the open menu anyway, so nothing is lost. */
  .js .site-header[data-nav-open="true"]{backdrop-filter:none; -webkit-backdrop-filter:none;}

  /* With JS the panel becomes a full-viewport overlay, animated with opacity/transform
     (display can't transition). z-index:1 keeps it under the header bar (z-index:2) but,
     because the whole sticky header sits at z-index:50, still above all page content. */
  .js .mobile-nav{
    position:fixed; inset:0; z-index:1; display:block;
    border-top:none; background:var(--color-bg); overflow-y:auto;
    padding-block:0;
    opacity:0; visibility:hidden; transform:translateY(-12px); pointer-events:none;
    transition:opacity 320ms ease, transform 320ms ease, visibility 0s linear 320ms;
  }
  .js .mobile-nav .wrap{padding-top:calc(76px + var(--space-xl)); padding-bottom:var(--space-2xl);}
  .js .site-header[data-nav-open="true"] .mobile-nav{
    opacity:1; visibility:visible; transform:none; pointer-events:auto;
    transition:opacity 320ms ease, transform 340ms cubic-bezier(.16,1,.3,1), visibility 0s;
  }
  /* Large, well-spaced tap targets so it reads as a full-page menu. Items are visible by
     default (no persistent opacity:0 that could strand them hidden) — the closed overlay's
     own visibility:hidden is what hides them. */
  .js .mobile-nav li a{font-size:24px; min-height:64px; padding-block:var(--space-md);}
  .js .mobile-nav .btn{margin-top:var(--space-xl); min-height:56px;}

  /* Staggered entrance, applied ONLY while the menu is open. fill-mode:both holds each
     item hidden through its delay, then keeps it shown, so the three links and then the
     button appear one after another. Re-runs on every open. */
  @keyframes nav-item-in{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}}
  .js .site-header[data-nav-open="true"] .mobile-nav li a,
  .js .site-header[data-nav-open="true"] .mobile-nav .btn{
    animation:nav-item-in 420ms cubic-bezier(.16,1,.3,1) both;
  }
  .js .site-header[data-nav-open="true"] .mobile-nav li:nth-child(1) a{animation-delay:120ms;}
  .js .site-header[data-nav-open="true"] .mobile-nav li:nth-child(2) a{animation-delay:180ms;}
  .js .site-header[data-nav-open="true"] .mobile-nav li:nth-child(3) a{animation-delay:240ms;}
  .js .site-header[data-nav-open="true"] .mobile-nav .btn{animation-delay:300ms;}
  @media (prefers-reduced-motion: reduce){
    .js .site-header[data-nav-open="true"] .mobile-nav li a,
    .js .site-header[data-nav-open="true"] .mobile-nav .btn{animation:none;}
  }
}
@media (max-width:640px){
  :root{--section-pad-y:72px;}
  h1{font-size:32px;} h2{font-size:24px;} h3{font-size:18px;}
  .eyebrow{font-size:12px;}
  .bp-amount{font-size:24px;} .step-num{font-size:24px;}
  .hero-sub{font-size:18px;}
  .card-grid,.steps,.steps-3,.offset-cards,.footer-grid{grid-template-columns:1fr;}
  .header-inner{gap:var(--space-md);}
  .logo img{width:155px;}
  .header-actions .btn{display:none;}   /* the CTA lives inside the open menu at this width */
  .offset-band{padding-inline:var(--space-lg);}
  .footer-cta{padding:var(--space-lg);}
  .hero-ctas .btn{width:100%;}

  /* Stacked steps carry no connector on mobile: the vertical line overlapped the copy,
     so it stays hidden here (it's already display:none from the 1024px block). Only the
     numeral spacing changes for the stacked layout. */
  .step-num{padding-right:0; padding-bottom:var(--space-sm); margin-bottom:var(--space-md);}

  .booking-panel,.journey,.demo-frame{padding:var(--space-lg);}
  .cta-band .btn,.cta-band-alt .btn{width:100%; max-width:340px;}
  /* On mobile the portrait crops to roughly 4:5 around the subject, so the empty
     upper wall does not push the copy below the fold (content map, About). Excludes
     .demo-shot: that wide screenshot must show in full, not be cropped to 4:5. */
  .split-media img:not(.demo-shot){aspect-ratio:4/5; object-fit:cover; object-position:50% 28%;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;}
  .btn:hover{transform:none;}
  .link:hover svg, .link.ext:hover svg{transform:none;}
  /* Steps and their connectors render immediately, with no animation (content map). */
  .js .reveal-ready .step{opacity:1; transform:none;}
  .js .reveal-ready .step:not(:last-child)::after{transform:none;}
}