/* ============================================================================
   PATHWAY FINANCIAL
   Tokens: docs/website-plan.md §3.  Every value is defined once, here.
   No hex value may be repeated in an HTML file.
   ========================================================================== */

:root {
  /* ---- Blue, from the logo mark. Brand is 500. ------------------------- */
  --blue-50:#F0F6FB; --blue-100:#DBE9F5; --blue-200:#B7D2EA; --blue-300:#86B3DA;
  --blue-400:#4A8DC5; --blue-500:#1267A7; --blue-600:#0F568C; --blue-700:#0C4470;
  --blue-800:#093454; --blue-900:#07253C;

  /* ---- Ink, from the logo wordmark. Brand is 700. ---------------------- */
  --ink-50:#F5F7F8; --ink-100:#EAEDEF; --ink-200:#D6DBDE; --ink-300:#B4BCC1;
  --ink-400:#8B959C; --ink-500:#667179; --ink-600:#4A555E; --ink-700:#343D45;
  --ink-800:#262E34; --ink-900:#1C2226;

  /* ---- Warm neutrals, keeps it off "bank" ------------------------------ */
  --sand-50:#FAF8F5; --sand-100:#F4EFE8; --sand-200:#E8DFD3;

  --white:#FFFFFF;
  --success:#2E7D5B; --surface:#FFFFFF;

  /* ---- Semantic aliases ------------------------------------------------- */
  --focus-ring: var(--blue-500);     /* .on-brand flips this to white       */
  --border-field: var(--ink-500);    /* 5.00:1, SC 1.4.11 needs 3:1        */
  --border-hair: var(--ink-100);     /* decorative dividers and card edges  */
  --measure: 68ch;

  /* ---- Type ------------------------------------------------------------- */
  /* Headings and body share one family. The display token stays so heading
     treatment can be changed in one place. */
  --font-display: var(--font-sans);
  --weight-display: 700;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --text-display: clamp(2.75rem, 7vw, 4.5rem);
  --text-h1:      clamp(2rem, 4.5vw, 2.75rem);
  --text-h2:      clamp(1.75rem, 3.4vw, 2.25rem);
  --text-h3:      1.25rem;
  --text-body-lg: clamp(1.0625rem, 1.4vw, 1.1875rem);
  --text-body:    1rem;
  --text-small:   0.875rem;
  --text-eyebrow: 0.75rem;

  /* ---- Space / shape ---------------------------------------------------- */
  /* Vertical rhythm. Every gap on the site comes from this scale. */
  --space-2: .5rem;  --space-3: .75rem; --space-4: 1rem;  --space-5: 1.25rem;
  --space-6: 1.5rem; --space-8: 2rem;   --space-10: 2.5rem; --space-12: 3rem;

  --container: 1120px;
  --gutter: clamp(1.25rem, 4vw, 2rem);
  --section-y: clamp(3.5rem, 9vw, 7rem);

  --r-card: 16px;
  --r-btn: 10px;
  --r-img: 22px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(52,61,69,.06);
  --shadow-md: 0 1px 2px rgba(52,61,69,.06), 0 8px 24px rgba(52,61,69,.07);
  --shadow-lg: 0 2px 4px rgba(52,61,69,.05), 0 18px 48px rgba(52,61,69,.10);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================================
   BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

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

body {
  background: var(--surface);
  color: var(--ink-700);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  color: var(--ink-800);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); line-height: 1.12; letter-spacing: -.032em; }
h2 { font-size: var(--text-h2); line-height: 1.18; letter-spacing: -.026em; }
h3 { font-size: var(--text-h3); line-height: 1.35; letter-spacing: -.005em;
     font-family: var(--font-sans); font-variation-settings: normal; }

p { text-wrap: pretty; }
input, button, textarea, select { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
/* Without height:auto the HTML height="" attribute resolves the box and
   aspect-ratio is ignored entirely. Rules that set an explicit height
   (e.g. .footer__me img) still win over this. */
img { height: auto; }
.inline-icon {
  display: inline-block; vertical-align: -2px; width: 15px; height: 15px;
  margin-left: .15rem;
}
a { color: var(--blue-500); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-600); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}
.on-brand { --focus-ring: var(--white); }

::selection { background: var(--blue-100); color: var(--ink-900); }

/* ============================================================================
   LAYOUT
   ========================================================================== */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--sand { background: var(--sand-50); }
.section--tight { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.measure { max-width: var(--measure); }
.center { text-align: center; margin-inline: auto; }

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--blue-500); color: var(--white); padding: 10px 18px;
  border-radius: var(--r-btn); font-weight: 600; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 8px; color: var(--white); }

.eyebrow {
  font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue-600);
}

/* Section intro block */
.lede { font-size: var(--text-body-lg); color: var(--ink-600); max-width: 62ch; }
.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head .eyebrow { display: block; margin-bottom: .75rem; }
.section-head h2 + p { margin-top: 1rem; }

/* ============================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-sans); font-size: 1rem; font-weight: 600; line-height: 1;
  padding: 1rem 1.6rem; border-radius: var(--r-btn); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn--primary { background: var(--blue-500); color: var(--white); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--blue-600); color: var(--white); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink-800); border-color: var(--ink-200); }
.btn--ghost:hover { background: var(--ink-50); color: var(--ink-900); border-color: var(--ink-300); }
.btn--onblue { background: var(--white); color: var(--blue-700); }
.btn--onblue:hover { background: var(--blue-50); color: var(--blue-700); transform: translateY(-2px); }
.btn--lg { padding: 1.125rem 2rem; font-size: 1.0625rem; }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ============================================================================
   SITE NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--border-hair); box-shadow: var(--shadow-sm); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand__mark { width: 40px; height: 40px; flex: none; }
.brand__name {
  font-family: var(--font-sans); font-weight: 600; font-size: .875rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-800);
  line-height: 1; white-space: nowrap;
}
/* Below this the wordmark and the menu button start fighting for room, and
   the mark alone is unambiguous. */
@media (max-width: 379px) { .brand__name { display: none; } }

.nav__links { display: none; align-items: center; gap: .35rem; list-style: none; padding: 0; }
.nav__links a {
  display: block; padding: .55rem .8rem; border-radius: var(--r-btn);
  font-size: .9375rem; font-weight: 500; color: var(--ink-700); text-decoration: none;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.nav__links a:hover { background: var(--ink-50); color: var(--ink-900); }
.nav__links a[aria-current="page"] { color: var(--blue-500); font-weight: 600; }
.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border: 1px solid var(--ink-200); background: var(--white);
  border-radius: var(--r-btn); cursor: pointer; color: var(--ink-800);
}
.nav__toggle:hover { background: var(--ink-50); }
.nav__toggle > span:first-child { position: relative; display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .22s var(--ease), opacity .16s var(--ease); }
.nav__toggle > span:first-child::before, .nav__toggle > span:first-child::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform .22s var(--ease), opacity .16s var(--ease);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
[data-menu-open="true"] .nav__toggle > span:first-child { background: transparent; }
[data-menu-open="true"] .nav__toggle > span:first-child::before { transform: translateY(6px) rotate(45deg); }
[data-menu-open="true"] .nav__toggle > span:first-child::after  { transform: translateY(-6px) rotate(-45deg); }

/* Mobile overlay panel */
.menu {
  position: fixed; inset: 0; z-index: 99; background: var(--sand-50);
  padding: 96px var(--gutter) 2rem; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  /* visibility must flip INSTANTLY on open, or the first link is still inside a
     hidden subtree when we move focus into it and focus() silently fails.
     Delaying it on close instead keeps the fade-out visible. */
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s .22s;
}
[data-menu-open="true"] .menu {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility 0s 0s;
}
.menu ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.menu nav a {
  display: block; padding: 1rem .25rem; font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.028em;
  color: var(--ink-800); text-decoration: none; border-bottom: 1px solid var(--border-hair);
}
.menu nav a[aria-current="page"] { color: var(--blue-500); }
.menu__foot { margin-top: auto; padding-top: 2rem; }
.menu__foot .btn { width: 100%; }

/* The full nav row needs brand + six links + the booking button, none of
   which wrap. "Book a free consultation" is a 241px button, so the row wants
   about 1080px; 1120 leaves headroom. If this label ever gets longer, re-check
   this number. Below it the hamburger stays in charge. */
@media (min-width: 1120px) {
  .nav__links { display: flex; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .menu { display: none; }
}

/* ============================================================================
   HERO
   ========================================================================== */
.hero { position: relative; overflow: hidden; background: var(--sand-50); }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(115% 85% at 86% 4%, rgba(18,103,167,.22), transparent 62%),
    radial-gradient(85% 75% at 2% 98%, rgba(232,223,211,.85), transparent 68%);
  pointer-events: none;
}
.hero__road {
  position: absolute; right: -14%; top: 50%; transform: translateY(-50%);
  width: min(760px, 78vw); opacity: .085; color: var(--blue-500); pointer-events: none;
}
.hero__inner {
  position: relative; display: grid; gap: clamp(2.5rem, 6vw, 4rem);
  padding-block: clamp(3rem, 8vw, 6rem);
}
.hero__chip {
  display: inline-flex; align-items: center; gap: .5rem; background: var(--white);
  border: 1px solid var(--blue-100); color: var(--blue-700);
  padding: .5rem .9rem; border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.hero__chip svg { width: 14px; height: 14px; color: var(--blue-500); }
.hero h1 {
  font-size: var(--text-display); line-height: 1.03; letter-spacing: -.038em;
  margin-top: 1.5rem; max-width: 14ch;
}
.hero h1 em { font-style: normal; color: var(--blue-500); }
.hero__sub { font-size: var(--text-body-lg); color: var(--ink-600); margin-top: 1.5rem; max-width: 48ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; margin-top: 2.5rem; }
.hero__trust div { display: flex; align-items: center; gap: .5rem; font-size: var(--text-small); color: var(--ink-600); }
.hero__trust svg { width: 16px; height: 16px; color: var(--success); flex: none; }

.hero__figure { position: relative; justify-self: start; width: 100%; max-width: 420px; }
.hero__figure img {
  position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5;
  object-fit: cover; object-position: 50% 18%;
  border-radius: var(--r-img); box-shadow: var(--shadow-lg);
}

@media (min-width: 880px) {
  .hero__inner { grid-template-columns: 1.15fr .85fr; align-items: center; }
  .hero__figure { justify-self: end; max-width: 100%; }
}

/* Page intro band, echoes the hero so every page opens on brand colour. */
.pagehead {
  position: relative; overflow: hidden; background: var(--sand-50);
  padding-block: clamp(3rem, 6.5vw, 5rem);
}
.pagehead::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 130% at 92% 0%, rgba(18,103,167,.16), transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(232,223,211,.7), transparent 65%);
}
.pagehead > * { position: relative; }

/* ============================================================================
   PATH DIVIDER, the S-curve on a warm band
   ========================================================================== */
.divider { background: var(--sand-200); overflow: hidden; line-height: 0; }
.divider svg { width: 100%; height: 64px; color: var(--blue-500); opacity: .18; }

/* ============================================================================
   CARDS / GRIDS
   ========================================================================== */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 820px) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }

.card {
  background: var(--white); border: 1px solid var(--border-hair); border-radius: var(--r-card);
  padding: clamp(1.5rem, 3vw, 2rem); box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.section--sand .card { background: var(--white); }
.card--link:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-600); }

/* Step cards, the number badge sits on the same line as the heading, which
   removes ~64px of empty space above the words in every card. */
.step__head {
  display: flex; align-items: center; gap: .7rem;
  margin-bottom: var(--space-4);
}
.step__glyph {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
}
.step__glyph svg { width: 32px; height: 32px; color: var(--blue-500); }
.step__glyph b {
  position: absolute; font-family: var(--font-sans);
  font-size: .75rem; font-weight: 700; color: var(--blue-600);
}
.step h3 { font-size: 1.0625rem; letter-spacing: -.012em; margin: 0; }
.step > p { margin: 0; }

/* Service tier card */
.tier { display: flex; flex-direction: column; height: 100%; }
.tier .eyebrow { margin-bottom: .75rem; }
.tier h2 { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.026em; }
.tier__meta { font-size: var(--text-small); color: var(--ink-500); margin-top: .4rem; }
.tier > p { margin-top: 1rem; }
.tier ul { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.tier li { display: flex; gap: .65rem; font-size: .9375rem; color: var(--ink-700); }
.tier li svg { width: 18px; height: 18px; color: var(--blue-500); flex: none; margin-top: .28rem; }
.tier__foot { margin-top: auto; padding-top: 1.75rem; text-align: center; }
.tier--feature { border-color: var(--blue-200); box-shadow: var(--shadow-md); }

/* Resource card */
.res { display: flex; flex-direction: column; gap: .3rem; text-decoration: none; }
.res__title { font-weight: 600; color: var(--ink-800); display: flex; align-items: center; gap: .4rem; }
.res__title svg { width: 14px; height: 14px; color: var(--ink-400); flex: none; }
.card--link:hover .res__title { color: var(--blue-600); }
.card--link:hover .res__title svg { color: var(--blue-500); }
.res__by { font-size: var(--text-small); color: var(--ink-500); }

/* Two-column prose + aside */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1.35fr; } }
.split__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 18%; border-radius: var(--r-img); box-shadow: var(--shadow-md); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-700); max-width: var(--measure); }
.prose ul { padding-left: 1.15rem; display: grid; gap: .5rem; }

/* NOT / IS panels */
.panel { border-radius: var(--r-card); padding: clamp(1.5rem, 3vw, 2rem); border: 1px solid var(--border-hair); }
.panel--not { background: var(--ink-50); }
.panel--is  { background: var(--blue-50); border-color: var(--blue-100); }
.panel h3 { margin-bottom: 1rem; }
.panel dl { display: grid; gap: 1rem; margin: 0; }
.panel dt { font-weight: 600; color: var(--ink-800); font-size: .9375rem; }
.panel dd { margin: .15rem 0 0; color: var(--ink-600); font-size: .9375rem; }

/* ============================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq { border-top: 1px solid var(--border-hair); }
.faq__item { border-bottom: 1px solid var(--border-hair); }
.faq__h { font: inherit; margin: 0; letter-spacing: normal; }
.faq__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem;
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: 1.4rem .25rem; font-family: var(--font-sans); font-size: 1.0625rem;
  font-weight: 600; color: var(--ink-800); line-height: 1.45;
}
.faq__q:hover { color: var(--blue-600); }
.faq__q svg { width: 22px; height: 22px; flex: none; margin-top: .15rem; color: var(--blue-500); transition: transform .24s var(--ease); }
.faq__q[aria-expanded="true"] svg { transform: rotate(180deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--ease); }
.faq__item:has(.faq__q[aria-expanded="true"]) .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p, .faq__a ul { color: var(--ink-600); max-width: var(--measure); }
.faq__a > div > *:first-child { padding-top: .15rem; }
.faq__a > div > *:last-child { padding-bottom: 1.6rem; }
.faq__a > * + * { margin-top: 1rem; }
.faq__a ul { padding-left: 1.15rem; display: grid; gap: .5rem; margin-top: 1rem; }

.finePrint {
  margin-top: 2.5rem; padding: 1.25rem 1.5rem; background: var(--ink-50);
  border-radius: var(--r-card); font-size: var(--text-small); color: var(--ink-600);
}

/* ============================================================================
   CTA BAND
   ========================================================================== */
.cta {
  position: relative; overflow: hidden; background: var(--blue-500); color: var(--white);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 85% 15%, rgba(255,255,255,.12), transparent 55%);
}
.cta__road { position: absolute; left: -6%; bottom: -30%; width: min(560px, 70vw); opacity: .10; color: var(--white); }
.cta__inner { position: relative; text-align: center; }
.cta h2 { color: var(--white); max-width: 20ch; margin-inline: auto; }
/* Only the band's own lead paragraph is centred and measure-capped. Without
   the child combinator this also caught .waitlist__note, indenting it 33px
   away from the input it belongs to. */
.cta__inner > p { color: var(--blue-50); margin-top: 1rem; max-width: 52ch; margin-inline: auto; }

/* Waitlist form */
.waitlist { margin-top: 2rem; max-width: 460px; margin-inline: auto; text-align: left; }
.waitlist label { display: block; font-size: var(--text-small); font-weight: 600; color: var(--white); margin-bottom: .5rem; }
.waitlist__row { display: flex; flex-direction: column; gap: .6rem; }
.waitlist input[type="email"] {
  width: 100%; font-family: var(--font-sans); font-size: 1rem; padding: .95rem 1rem;
  border-radius: var(--r-btn); border: 1px solid var(--border-field);
  background: var(--white); color: var(--ink-800);
}
.waitlist input::placeholder { color: var(--ink-400); }
/* Honeypot, off-screen for people, still in the DOM for bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist__note { font-size: .75rem; color: var(--blue-100); margin-top: .85rem; }
.waitlist__ok {
  display: none; gap: .75rem; align-items: flex-start; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-card); padding: 1.25rem 1.4rem;
  margin-top: 2rem; max-width: 460px; margin-inline: auto; text-align: left; color: var(--white);
}
.waitlist__ok svg { width: 20px; height: 20px; flex: none; margin-top: .2rem; }
[data-sent="true"] .waitlist { display: none; }
[data-sent="true"] .waitlist__ok { display: flex; }
@media (min-width: 520px) {
  .waitlist__row { flex-direction: row; }
  .waitlist__row .btn { flex: none; }
}

/* Non-brand CTA variant used mid-page */
.cta--soft { background: var(--sand-100); color: var(--ink-700); }
.cta--soft h2 { color: var(--ink-800); }
.cta--soft p { color: var(--ink-600); }

/* ============================================================================
   FOOTER
   ========================================================================== */
.footer { background: var(--blue-900); color: var(--blue-100); padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; } }
.footer h2 { font-family: var(--font-sans); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-200); margin-bottom: 1rem; }
.footer a { color: var(--blue-100); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer ul { list-style: none; padding: 0; display: grid; gap: .2rem; font-size: .9375rem; }
.footer ul a { display: inline-block; padding: .35rem 0; min-height: 24px; }
.footer__me { display: flex; gap: 1rem; align-items: flex-start; }
.footer__me img { width: 60px; height: 60px; border-radius: var(--r-pill); object-fit: cover; object-position: 50% 14%; flex: none; }
.footer__name { color: var(--white); font-weight: 600; }
.footer__role { font-size: var(--text-small); color: var(--blue-200); }
.footer__social { display: flex; gap: .6rem; margin-top: 1rem; }
.footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--blue-400); border-radius: var(--r-btn); }
.footer__social a:hover { background: var(--blue-800); border-color: var(--blue-500); }
.footer__social svg { width: 18px; height: 18px; }
.footer__fine { margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--blue-700); font-size: .8125rem; color: var(--blue-200); display: grid; gap: .75rem; }
.footer { --focus-ring: var(--white); }

/* ============================================================================
   MOTION
   ========================================================================== */
/* Only hide when scripting is present to bring it back, see config.js. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================================
   ACCEPTING_CLIENTS, see assets/js/config.js
   Static default in the HTML is "false" so the safe state renders without JS.
   ========================================================================== */
[data-accepting="false"] .when-open   { display: none !important; }
[data-accepting="true"]  .when-closed { display: none !important; }
/* Inline swaps (CTA heading and body) must not become block boxes. */
.cta h2 > .when-open, .cta h2 > .when-closed,
.cta__inner > p > .when-open, .cta__inner > p > .when-closed { display: inline; }

/* ============================================================================
   STATEMENT, the "why I do this" block on the home page.
   Deliberately carries no photograph: the hero already shows James, and
   repeating the same portrait twice on one page reads as filler.
   ========================================================================== */
.statement { position: relative; overflow: hidden; }
.statement--brand { background: var(--blue-800); }
.statement--brand .eyebrow { color: var(--blue-200); }
.statement--brand .statement__quote { color: var(--white); }
.statement--brand .statement__body { color: var(--blue-100); }
.statement--brand .statement__link { color: var(--white); text-decoration: underline; }
.statement--brand .statement__link:hover { color: var(--blue-100); }
.statement__inner { position: relative; max-width: 46ch; margin-inline: auto; text-align: center; }
.statement__quote {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3.6vw, 2.125rem); line-height: 1.28;
  letter-spacing: -.028em; color: var(--ink-800);
  margin-top: 1.25rem; text-wrap: balance;
}
.statement__body { margin-top: 1.5rem; color: var(--ink-600); }
.statement__link { font-weight: 600; text-decoration: none; }
.statement__link:hover { text-decoration: underline; }

/* ============================================================================
   BRAND MARK + ROAD MOTIF
   The inline SVGs carry no colour of their own so the palette stays in one
   file. Anything not painted here inherits currentColor from its context.
   ========================================================================== */
.mark-frame { stroke: var(--blue-500); }
.mark-road  { fill: var(--ink-700); }

/* ============================================================================
   VERTICAL RHYTHM
   These replace what used to be 43 one-off inline margins. Spacing now comes
   from the scale above, applied structurally, so every page opens and breathes
   the same way.
   ========================================================================== */

/* Page/section intro: eyebrow → heading → lead paragraph. */
.intro > .eyebrow { display: block; }
.intro > * + * { margin-top: var(--space-4); }
.intro > .eyebrow + h1,
.intro > .eyebrow + h2 { margin-top: var(--space-3); }
.intro > h1 + .lede,
.intro > h2 + .lede { margin-top: var(--space-5); }
.intro > * + .hero__actions { margin-top: var(--space-8); }

/* Generic stack for prose-ish groups. */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-10); }

/* A grid that fits as many equal columns as the space allows. */
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Resources: a titled group of cards. */
.res-group + .res-group { margin-top: var(--space-12); }
.res-group > h2 { margin-bottom: var(--space-6); }

/* Narrower measures for reading-heavy blocks. */
.wrap--reading { max-width: 860px; }
.card--centred { max-width: 760px; margin-inline: auto; }

/* Small print that follows a block of content. */
.after-note { margin-top: var(--space-8); font-size: var(--text-small); }

/* The section immediately after the intro band. The band already carries the
   separation, so this one starts tighter, but never at zero, or the first
   heading collides with the band edge. */
.section--after-intro { padding-top: clamp(2.5rem, 5vw, 3.5rem); }

/* Footer contact line. */
.footer__note { margin-top: var(--space-4); font-size: .9375rem; color: var(--blue-200); }

/* Blocks that follow a prose section inside the same <section>. */
.stack-lg-item { margin-top: var(--space-10); }

/* Booking state of the closing band. */
.cta__open { margin-top: var(--space-8); }
.cta__fine { margin-top: var(--space-4); }

/* The card heading's supporting paragraph. */
.card > h3 + p { margin-top: var(--space-3); }
.card > .step__head + p { margin-top: 0; }


/* ============================================================================
   CALCULATORS
   Everything runs in the browser; no figure a visitor types is ever sent
   anywhere. Inputs are sized for thumbs first.
   ========================================================================== */
.calc { display: grid; gap: var(--space-8); align-items: start; }
/* Grid items default to min-width:auto, so the 460px schedule table would
   force BOTH columns wide enough to overflow the page on a phone. Letting them
   shrink lets .calc__tablewrap scroll on its own instead. */
.calc > * { min-width: 0; }
@media (min-width: 940px) {
  .calc { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-12); }
  .calc__panel { position: sticky; top: 96px; }
}

.calc__panel {
  background: var(--sand-50); border: 1px solid var(--border-hair);
  border-radius: var(--r-card); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.calc__panel h2 { font-size: 1.125rem; margin-bottom: var(--space-5); }

.field { display: block; margin-bottom: var(--space-5); }
.field:last-child { margin-bottom: 0; }
.field > span { display: block; font-size: .875rem; font-weight: 600; color: var(--ink-800); margin-bottom: var(--space-2); }
.field__hint { display: block; font-size: .75rem; font-weight: 400; color: var(--ink-500); margin-top: 2px; }
.field input, .field select {
  width: 100%; font-family: var(--font-sans); font-size: 1rem; color: var(--ink-800);
  padding: .8rem .9rem; min-height: 48px;
  border: 1px solid var(--border-field); border-radius: var(--r-btn);
  background: var(--white); -webkit-appearance: none; appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667179' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px;
  padding-right: 2.6rem;
}
.field input:focus-visible, .field select:focus-visible { border-color: var(--blue-500); }
.field--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
/* Labels in a multi-column row are often different heights: one carries a hint
   line, or one wraps and its neighbour does not. Each cell stretches to the
   tallest, and the control is pushed to the bottom of its own cell, so every
   input lands on the same line whatever the label above it does.
   Note: do NOT use align-items:end here. That aligns the MARGIN box, and the
   trailing .field has margin-bottom:0 while its sibling does not, which throws
   the controls out by exactly that margin. */
.field--split > .field,
.debt__grid > .field {
  display: flex; flex-direction: column; height: 100%; margin-bottom: 0;
}
.field--split > .field > input,
.field--split > .field > select,
.debt__grid > .field > input,
.debt__grid > .field > select { margin-top: auto; }

/* Headline result */
.calc__headline {
  background: var(--blue-500); color: var(--white); border-radius: var(--r-card);
  padding: clamp(1.25rem, 3vw, 1.75rem); margin-bottom: var(--space-6);
}
.calc__headline .calc__label { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-100); }
.calc__headline .calc__value { font-size: clamp(2rem, 5.5vw, 2.75rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; margin-top: var(--space-2); }
.calc__headline .calc__sub { font-size: .9375rem; color: var(--blue-100); margin-top: var(--space-2); }

/* Key/value rows */
.calc__rows { display: grid; }
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--border-hair); }
.calc__row:last-child { border-bottom: 0; }
.calc__row dt { font-size: .9375rem; color: var(--ink-600); }
.calc__row dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--ink-800); font-variant-numeric: tabular-nums; text-align: right; }
.calc__row--total { border-top: 2px solid var(--ink-800); border-bottom: 0; margin-top: var(--space-2); padding-top: var(--space-4); }
.calc__row--total dt { font-weight: 600; color: var(--ink-800); }
.calc__row--total dd { color: var(--blue-600); font-size: 1.125rem; }
.calc__row--good dd { color: var(--success); }

/* Messages */
.calc__msg { border-radius: var(--r-btn); padding: .9rem 1rem; font-size: .875rem; margin-bottom: var(--space-5); display: flex; gap: .6rem; align-items: flex-start; }
.calc__msg svg { width: 17px; height: 17px; flex: none; margin-top: .12rem; }
.calc__msg--warn { background: #FBF3E4; border: 1px solid #E4C989; color: #6B4E12; }
.calc__msg--stop { background: #FBE9E9; border: 1px solid #E2AFAF; color: #8C2B2B; }
.calc__msg--info { background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-700); }

/* Actions */
.calc__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: var(--space-6); }
.calc__actions .btn { flex: 1 1 auto; min-width: 160px; }

/* Schedule table */
.calc__tablewrap { overflow-x: auto; margin-top: var(--space-6); border: 1px solid var(--border-hair); border-radius: var(--r-card); }
.calc__table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 460px; }
.calc__table th { background: var(--sand-50); text-align: right; font-weight: 600; color: var(--ink-800); padding: .7rem .9rem; border-bottom: 1px solid var(--border-hair); white-space: nowrap; }
.calc__table th:first-child, .calc__table td:first-child { text-align: left; }
.calc__table td { text-align: right; padding: .65rem .9rem; border-bottom: 1px solid var(--border-hair); color: var(--ink-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__table tr:last-child td { border-bottom: 0; }
.calc__table tbody tr:nth-child(even) td { background: var(--sand-50); }

/* Assumptions / disclaimer under a calculator */
.calc__assumptions { margin-top: var(--space-8); background: var(--ink-50); border-radius: var(--r-card); padding: 1.25rem 1.5rem; }
.calc__assumptions h3 { font-size: .9375rem; margin-bottom: var(--space-3); }
.calc__assumptions ul { margin: 0; padding-left: 1.15rem; display: grid; gap: .4rem; }
.calc__assumptions li { font-size: .8125rem; color: var(--ink-600); }

/* Calculator index cards */
.toolcard { display: flex; flex-direction: column; height: 100%; text-decoration: none; }
.toolcard__icon { width: 40px; height: 40px; color: var(--blue-500); margin-bottom: var(--space-4); }
.toolcard h2 { font-size: 1.1875rem; }
.toolcard p { margin-top: var(--space-3); color: var(--ink-600); font-size: .9375rem; }
.toolcard__go { margin-top: auto; padding-top: var(--space-5); font-weight: 600; color: var(--blue-600); font-size: .9375rem; display: inline-flex; align-items: center; gap: .35rem; }
.card--link:hover .toolcard__go { color: var(--blue-700); }

/* ---- Debt rows (snowball) ------------------------------------------------ */
.debt { border: 1px solid var(--border-hair); border-radius: var(--r-btn); padding: 1rem; background: var(--white); margin-bottom: var(--space-4); }
.debt__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.debt__num { font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-600); }
.debt__remove { background: none; border: 0; padding: .35rem .1rem; min-height: 24px; font-family: var(--font-sans); font-size: .8125rem; font-weight: 600; color: var(--ink-500); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.debt__remove:hover { color: var(--blue-600); }
.debt__grid { display: grid; gap: var(--space-3); }
@media (min-width: 520px) { .debt__grid { grid-template-columns: repeat(3, 1fr); } }
.debt .field { margin-bottom: var(--space-3); }
.debt .field:last-child { margin-bottom: 0; }
.debt__grid .field { margin-bottom: 0; }
.btn--add { width: 100%; margin-top: var(--space-2); }

/* ============================================================================
   RESOURCES
   Books get a typographic cover rather than scraped publisher artwork: it is
   on brand, it carries no rights question, and it gives the page the visual
   weight a list of links was missing.
   ========================================================================== */
.reslist { display: grid; gap: var(--space-4); }
@media (min-width: 720px) { .reslist { grid-template-columns: 1fr 1fr; } }

.book { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.book__cover {
  aspect-ratio: 2 / 3; border-radius: 4px 8px 8px 4px;
  padding: .7rem .65rem; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 1px 2px rgba(52,61,69,.14), 0 8px 18px rgba(52,61,69,.16);
  border-left: 5px solid rgba(0,0,0,.22); overflow: hidden;
}
.book__cover--a { background: var(--blue-800); color: var(--white); }
.book__cover--b { background: var(--ink-800); color: var(--white); }
.book__cover--c { background: var(--sand-200); color: var(--ink-800); border-left-color: rgba(52,61,69,.2); }
.book__cover--d { background: var(--blue-500); color: var(--white); }
.book__cover-title { font-size: .6875rem; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; }
.book__cover-author { font-size: .5625rem; font-weight: 500; opacity: .8; letter-spacing: .02em; }
.book__body h3 { font-size: 1.0625rem; }
.book__author { font-size: .8125rem; color: var(--ink-500); margin-top: 2px; }
.book__why { font-size: .9375rem; color: var(--ink-600); margin-top: var(--space-3); }
.book__link { display: inline-flex; align-items: center; gap: .3rem; margin-top: var(--space-3);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  /* Comfortably clear of the 24px target minimum rather than exactly on it. */
  min-height: 32px; padding-block: .25rem; }
.book__link:hover { text-decoration: underline; }

/* Tool + calculator entries */
.resitem { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.resitem__icon { width: 44px; height: 44px; border-radius: var(--r-btn); background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; }
.resitem__icon svg { width: 22px; height: 22px; }
.resitem h3 { font-size: 1.0625rem; }
.resitem__why { font-size: .9375rem; color: var(--ink-600); margin-top: var(--space-3); }
.resitem__link { display: inline-flex; align-items: center; gap: .3rem; margin-top: var(--space-3);
  font-size: .875rem; font-weight: 600; text-decoration: none;
  /* Comfortably clear of the 24px target minimum rather than exactly on it. */
  min-height: 32px; padding-block: .25rem; }
.resitem__link:hover { text-decoration: underline; }
.resitem--mine .resitem__icon { background: var(--blue-500); color: var(--white); }

.res-group__intro { font-size: .9375rem; color: var(--ink-600); max-width: 62ch; margin-top: calc(var(--space-3) * -1); margin-bottom: var(--space-6); }

/* Small print that closes an assumptions block. */
.calc__fine { font-size: .8125rem; color: var(--ink-500); margin-top: var(--space-4); }
.calc__fine--wide { font-size: .8125rem; color: var(--ink-600); }
.calc__roomnote { font-size: .75rem; color: var(--ink-500); margin-top: var(--space-4); }
.calc__panel .field--gap { margin-top: var(--space-6); }

/* Articles link to a book by its id. Clear the sticky nav when they land, and
   mark which card they came for. */
.book { scroll-margin-top: 96px; }
.book:target { border-color: var(--blue-300); box-shadow: var(--shadow-md); }


/* ============================================================================
   ARTICLES
   One reading column with larger type than the rest of the site. Nothing is
   italic: Inter is loaded upright only, so the browser would fake the slant.
   ========================================================================== */
.wrap--article { max-width: 768px; }

/* Breadcrumb, sits where the eyebrow sits on other pages. */
.crumbs ol {
  list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem;
  font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.crumbs li + li::before { content: "\203A"; margin-right: .5rem; color: var(--ink-400); }
.crumbs a { display: inline-block; padding-block: .3rem; color: var(--blue-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* Name above date and reading time. Two fixed lines rather than one wrapping
   row, which on a phone stranded a separator dot at the start of a line. */
.byline { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-small); line-height: 1.45; }
.intro > h1 + .byline { margin-top: var(--space-6); }
.byline img { width: 44px; height: 44px; flex: none; border-radius: var(--r-pill); object-fit: cover; object-position: 50% 14%; }
.byline__name { font-weight: 600; color: var(--ink-800); }
.byline__meta { color: var(--ink-600); }

.article { font-size: 1.125rem; line-height: 1.75; color: var(--ink-700); }
.article > * + * { margin-top: var(--space-5); }
.article h2 { font-size: clamp(1.5rem, 3vw, 1.875rem); margin-top: var(--space-12); scroll-margin-top: 96px; }
.article h3 { font-size: 1.25rem; margin-top: var(--space-10); scroll-margin-top: 96px; }
.article h2 + *, .article h3 + * { margin-top: var(--space-4); }
.article strong { font-weight: 600; color: var(--ink-800); }
.article em { font-style: normal; font-weight: 600; color: var(--ink-800); }
.article a { font-weight: 500; }
.article hr { border: 0; height: 1px; background: var(--border-hair); margin-block: var(--space-10); }

/* Lists use the diamond from the logo as their marker. */
.article ul, .article ol { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.article ul li { position: relative; padding-left: 1.75rem; }
.article ul li::before {
  content: ""; position: absolute; left: .25rem; top: .62em;
  width: 8px; height: 8px; border-radius: 1px; background: var(--blue-500); transform: rotate(45deg);
}
.article ol { counter-reset: item; }
.article ol li { position: relative; padding-left: 2rem; counter-increment: item; }
.article ol li::before { content: counter(item) "."; position: absolute; left: 0; font-weight: 700; color: var(--blue-600); }

.author {
  display: flex; align-items: center; gap: var(--space-5);
  margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--border-hair);
}
.author img { width: 72px; height: 72px; border-radius: var(--r-pill); object-fit: cover; object-position: 50% 14%; flex: none; }
.author .eyebrow { display: block; }
.author__name { font-size: 1.0625rem; font-weight: 700; color: var(--ink-800); line-height: 1.4; margin-top: .15rem; }
.author__role { font-size: var(--text-small); color: var(--ink-600); }
.author__link {
  display: inline-flex; align-items: center; gap: .3rem; min-height: 32px;
  font-size: .875rem; font-weight: 600; text-decoration: none;
}
.author__link:hover { text-decoration: underline; }

/* Article cards on the Learn page. The whole card is clickable through the
   heading link, so a screen reader hears the title rather than every word. */
.postcard { position: relative; display: flex; flex-direction: column; }
.postcard__meta { font-size: var(--text-small); color: var(--ink-500); }
.card .postcard__meta { color: var(--ink-500); }
.postcard h3 { margin: var(--space-2) 0 0; font-size: 1.1875rem; }
.postcard h3 a { color: var(--ink-800); text-decoration: none; }
.postcard h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
.postcard h3 a:focus-visible { outline: none; }
.postcard:has(h3 a:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.postcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
.postcard:hover h3 a { color: var(--blue-600); }
.postcard > p:not(.postcard__meta) { margin-top: var(--space-3); font-size: .9375rem; }
.postcard__go {
  margin-top: auto; padding-top: var(--space-4); display: inline-flex; align-items: center; gap: .35rem;
  font-size: .9375rem; font-weight: 600; color: var(--blue-600);
}