/* ============================================================================
   Doctor Jonathan Toussaint — counselling & family therapy
   The clinical-practice register: someone anxious or hurting arrives here. Still,
   low-contrast calm. A "still water" palette — deep slate ink, eucalyptus mist,
   a quiet teal-blue for action, one warm clay accent for the human touch. Sans-led
   (Hanken Grotesk) with a single calm serif italic (Newsreader) for the quiet
   asides. Left-aligned, generous air, hairline rules, soft shapes, slow motion.
   A DIFFERENT design DNA from the estate hub (parchment/foliage-green, two serifs).
   One committed light theme by design — calm and unhurried, never clinical-white.
   ========================================================================== */

/* ---- fonts (self-hosted; no Google Fonts links on a fleet/client node) ----- */
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/hanken-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url(/assets/fonts/hanken-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url(/assets/fonts/hanken-500-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url(/assets/fonts/hanken-600-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url(/assets/fonts/hanken-700-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url(/assets/fonts/newsreader-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Newsreader'; font-style:italic; font-weight:400; font-display:swap;
  src:url(/assets/fonts/newsreader-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- tokens ---------------------------------------------------------------- */
:root {
  --paper: #F6F5F1;        /* warm-cool off-white page (never clinical white) */
  --mist: #E7EDEA;         /* eucalyptus mist — section bands */
  --mist-deep: #DBE5E1;    /* deeper mist — quiet panels, hairlines on mist */
  --surface: #FFFFFF;      /* cards */
  --ink: #26333B;          /* deep slate — body, never pure black */
  --ink-strong: #1B2830;   /* headings */
  --ink-soft: #5B6A72;     /* captions, secondary (AA on paper) */
  --slate: #35545F;        /* mid slate-blue — quiet structural accents */
  --teal: #2F6470;         /* still-water teal-blue: links + primary action (AA on white/paper) */
  --teal-deep: #24505A;    /* hover / pressed */
  --teal-soft: #5E8B96;    /* muted teal for quiet marks on light */
  --clay: #A85F41;         /* warm clay — the one human accent: eyebrows, small marks (AA large) */
  --clay-soft: #C08063;
  --band-deep: #253840;    /* the deep calm band (CTA / footer) — slate, NOT green */
  --band-ink: #E7EDEA;     /* text on the deep band */
  --band-ink-soft: #A9BBC0;/* secondary text on the deep band (AA) */
  --line: rgba(38,51,59,.12);
  --line-soft: rgba(38,51,59,.08);
  --ring: rgba(47,100,112,.5);
  --shadow-sm: 0 1px 2px rgba(27,40,48,.04), 0 4px 14px -8px rgba(27,40,48,.16);
  --shadow: 0 1px 2px rgba(27,40,48,.05), 0 18px 44px -26px rgba(27,40,48,.30);
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --shell: 1140px;
  --shell-narrow: 760px;
  --measure: 64ch;
  --radius: 18px;
  --radius-sm: 12px;
}

/* ---- base ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 1.06rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
img { display: block; }
[hidden] { display: none !important; }

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 600; line-height: 1.14; margin: 0 0 .5em; letter-spacing: -.017em; color: var(--ink-strong); }
h1 { font-size: clamp(2.1rem, 5vw, 3.15rem); font-weight: 600; letter-spacing: -.025em; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); }
h3 { font-size: clamp(1.18rem, 2.2vw, 1.4rem); }
h4 { font-size: 1.02rem; font-weight: 600; margin-bottom: .35em; letter-spacing: -.005em; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(47,100,112,.38); transition: color .2s ease, text-decoration-color .2s ease; }
a:hover { color: var(--teal-deep); text-decoration-color: currentColor; }

strong { font-weight: 600; color: var(--ink-strong); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 3px; }

.serif { font-family: var(--font-serif); font-style: italic; }

/* ---- layout ---------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(1.15rem, 4vw, 2.2rem); }
.narrow { max-width: var(--shell-narrow); }
section { padding: clamp(3rem, 7vw, 5.4rem) 0; }
.section-tight { padding: clamp(2rem, 4vw, 3rem) 0; }
.band-mist { background: var(--mist); }
.band-deep { background: var(--band-deep); color: var(--band-ink); }
.band-deep h1, .band-deep h2, .band-deep h3, .band-deep h4 { color: #fff; }
.band-deep a { color: #fff; text-decoration-color: rgba(255,255,255,.45); }
.lede { font-size: clamp(1.12rem, 1.9vw, 1.32rem); line-height: 1.62; color: var(--ink); max-width: 40ch; }
.measure { max-width: var(--measure); }
.prose { max-width: var(--measure); }
.prose p, .prose li { color: var(--ink); }
.prose h2 { margin-top: 2em; }
.prose h3 { margin-top: 1.7em; }
.mt-1 { margin-top: .8rem; } .mt-2 { margin-top: 1.5rem; } .mt-3 { margin-top: 2.4rem; }
.center { text-align: center; }
.small { font-size: .92rem; color: var(--ink-soft); }

/* eyebrow / kicker — the one clay accent, quiet and small */
.kicker { display: inline-flex; align-items: center; gap: .55rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--clay); margin: 0 0 1rem; }
.kicker::before { content: ""; width: 1.7rem; height: 1px; background: var(--clay-soft); opacity: .7; }
.band-deep .kicker { color: #D8A98F; }
.band-deep .kicker::before { background: #D8A98F; opacity: .6; }

/* section intro — left aligned, a thin rule above */
.intro { max-width: 52ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.intro .lede { margin-top: .3rem; max-width: 52ch; }

/* ---- header ---------------------------------------------------------------- */
.skip { position: absolute; left: -999px; top: 0; background: var(--teal); color: #fff; padding: .6rem 1rem; z-index: 200; border-radius: 0 0 8px 0; }
.skip:focus { left: 0; }
.preview-strip { background: var(--band-deep); color: var(--band-ink-soft); font-size: .78rem;
  text-align: center; padding: .42rem 1rem; letter-spacing: .01em; }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(246,245,241,.86);
  backdrop-filter: saturate(1.1) blur(9px); -webkit-backdrop-filter: saturate(1.1) blur(9px);
  border-bottom: 1px solid var(--line-soft); }
.masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 74px; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink-strong); }
.brand:hover { color: var(--ink-strong); }
.brand-mark { width: 40px; height: 40px; flex: none; }
.brand-lines { display: flex; flex-direction: column; line-height: 1.12; }
.brand-name { font-weight: 600; font-size: 1.06rem; letter-spacing: -.02em; }
.brand-sub { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

.nav-toggle { display: none; font: inherit; font-weight: 500; font-size: .95rem; color: var(--ink-strong);
  background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: .5rem 1rem; cursor: pointer; }
.site-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.9rem); }
.site-nav a { color: var(--ink); text-decoration: none; font-size: .98rem; font-weight: 500; letter-spacing: -.005em; }
.site-nav a:not(.nav-cta) { position: relative; padding: .3rem 0; }
.site-nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: var(--teal); transition: right .25s ease; }
.site-nav a:not(.nav-cta):hover::after { right: 0; }
.site-nav a:not(.nav-cta):hover { color: var(--teal-deep); }
.nav-cta { background: var(--teal); color: #fff !important; padding: .58rem 1.15rem; border-radius: 999px;
  font-weight: 600; transition: background .2s ease; }
.nav-cta:hover { background: var(--teal-deep); }
body[data-page="counselling"] .nav-counselling::after,
body[data-page="parenting"] .nav-parenting::after,
body[data-page="wellbeing"] .nav-wellbeing::after,
body[data-page="about"] .nav-about::after { right: 0; }

/* ---- buttons --------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; gap: .5rem; font: inherit; font-weight: 600; font-size: 1rem;
  background: var(--teal); color: #fff; border: 1px solid var(--teal); border-radius: 999px;
  padding: .8rem 1.6rem; text-decoration: none; cursor: pointer; transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn svg { width: 1.05em; height: 1.05em; }
.btn-ghost { background: transparent; color: var(--teal); border-color: rgba(47,100,112,.34); }
.btn-ghost:hover { background: rgba(47,100,112,.06); color: var(--teal-deep); border-color: var(--teal); transform: translateY(-1px); box-shadow: none; }
.band-deep .btn { background: #fff; color: var(--band-deep); border-color: #fff; }
.band-deep .btn:hover { background: var(--mist); border-color: var(--mist); color: var(--band-deep); }
.arrow-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; text-decoration: none; color: var(--teal); }
.arrow-link .a { transition: transform .2s ease; }
.arrow-link:hover .a { transform: translateX(3px); }

/* ---- hero ------------------------------------------------------------------ */
.hero { padding: clamp(2.4rem, 5vw, 4.2rem) 0 clamp(2.4rem, 5vw, 3.6rem); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero h1 { margin-bottom: .35em; }
.hero .lede { max-width: 42ch; margin-top: 1rem; color: var(--ink); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; align-items: center; }
.hero-portrait { position: relative; }
.hero-portrait .frame { position: relative; border-radius: 26px; overflow: hidden; box-shadow: var(--shadow);
  background: var(--mist); }
.hero-portrait img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.hero-portrait .frame::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(37,56,64,.14)); }
/* the still-water panel behind the portrait */
.hero-portrait::before { content: ""; position: absolute; inset: -14px -14px 22px 22px; z-index: -1;
  border-radius: 30px; background: var(--mist); opacity: .8; }

.credential-row { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.8rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line); }
.credential-row span { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; color: var(--ink-soft); font-weight: 500; }
.credential-row .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--teal-soft); flex: none; }

/* ---- pathway signature ("What brings you here?") --------------------------- */
.pathway { position: relative; }
.pathway-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.6rem; }
.pathway-head .q { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 2.8vw, 2rem); color: var(--ink-strong); letter-spacing: -.01em; }
.pathway-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.path {
  --pc: var(--teal);
  display: flex; flex-direction: column; gap: .7rem; text-align: left; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem 1.15rem 1.25rem; color: var(--ink); cursor: pointer;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; position: relative;
  font-family: inherit; font-size: 1rem; width: 100%;
}
.path:hover, .path:focus-visible { border-color: var(--pc); transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.path .pico { width: 34px; height: 34px; color: var(--pc); }
.path .plabel { font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--ink-strong); }
.path .psub { font-size: .86rem; color: var(--ink-soft); line-height: 1.45; }
.path[aria-pressed="true"] { border-color: var(--pc); box-shadow: 0 0 0 1px var(--pc), var(--shadow); }

/* the reveal panel (JS enhancement; hidden by default, links work JS-off from the cards) */
.pathway-panel { margin-top: 1rem; background: var(--mist); border: 1px solid var(--mist-deep); border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 1.7rem) clamp(1.3rem, 3vw, 1.9rem); }
.pathway-panel .pp-line { font-family: var(--font-serif); font-style: italic; font-size: 1.22rem; color: var(--ink-strong); margin-bottom: 1rem; }
.pathway-panel .pp-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.pathway-note { margin-top: 1.1rem; font-size: .9rem; color: var(--ink-soft); }

/* ---- cards ----------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 1.9rem); }
.card h3 { margin-top: 0; }
.card-link { text-decoration: none; color: var(--ink); display: block; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.card-link:hover { border-color: var(--teal-soft); transform: translateY(-3px); box-shadow: var(--shadow); color: var(--ink); }
.card .card-ico { width: 40px; height: 40px; color: var(--teal); margin-bottom: 1rem; }
.card .card-more { margin-top: 1rem; }

/* the approach list — hairline separated, calm */
.approach { display: grid; gap: 0; }
.approach > div { padding: 1.4rem 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.approach > div:last-child { border-bottom: 1px solid var(--line); }
.approach .n { font-family: var(--font-serif); font-style: italic; font-size: 1.5rem; color: var(--teal-soft); line-height: 1; padding-top: .1rem; }
.approach h3 { margin: 0 0 .2em; font-size: 1.14rem; }
.approach p { margin: 0; color: var(--ink-soft); }

/* pull-quote — the calm serif voice */
.pullquote { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 3.6vw, 2.3rem);
  line-height: 1.34; color: var(--ink-strong); max-width: 22ch; letter-spacing: -.01em; margin: 0; }
.band-deep .pullquote { color: #fff; }

/* specialties chips */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { font-size: .9rem; color: var(--slate); background: var(--mist); border: 1px solid var(--mist-deep);
  border-radius: 999px; padding: .38rem .9rem; }

/* two-col split for pages */
.split { display: grid; grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 3rem); }
@media (min-width: 860px) { .split.split-media { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.media-soft { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--mist); }
.media-soft img { width: 100%; height: auto; display: block; }
.figcap { font-size: .82rem; color: var(--ink-soft); margin-top: .6rem; }

/* page head */
.page-head { padding: clamp(2.6rem, 6vw, 4rem) 0 clamp(1.4rem, 3vw, 2rem); }
.page-head h1 { max-width: 20ch; }
.page-head .lede { margin-top: 1rem; max-width: 56ch; }

/* callout / reassurance */
.callout { background: var(--mist); border: 1px solid var(--mist-deep); border-left: 3px solid var(--teal-soft);
  border-radius: var(--radius-sm); padding: 1.3rem 1.5rem; }
.callout h4 { margin-top: 0; }
.callout p { margin-bottom: 0; }
.crisis { border-left-color: var(--clay); }

/* ---- form ------------------------------------------------------------------ */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.5rem, 3.5vw, 2.2rem); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
label { font-size: .9rem; font-weight: 600; color: var(--ink-strong); }
input, select, textarea { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 10px; padding: .72rem .85rem; width: 100%; transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--ring); }
textarea { resize: vertical; min-height: 120px; }
::placeholder { color: hsl(210 12% 45% / .45); }
.form-hint { font-size: .86rem; color: var(--ink-soft); }
.form-result { margin-top: 1.1rem; border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; }
.form-result--ok { background: var(--mist); border: 1px solid var(--teal-soft); }
.form-result--err { background: #FBEDE8; border: 1px solid var(--clay-soft); color: #7a3a24; }

/* ---- footer ---------------------------------------------------------------- */
.site-footer { background: var(--band-deep); color: var(--band-ink-soft); padding: clamp(2.6rem, 5vw, 3.6rem) 0 2rem; }
.site-footer a { color: var(--band-ink); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
.footer-brand { font-family: var(--font-sans); font-weight: 600; font-size: 1.15rem; color: #fff; margin-bottom: .6rem; }
.site-footer h4 { color: var(--band-ink); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; margin-bottom: .9rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.site-footer p { color: var(--band-ink-soft); }
.colophon { margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.12); font-size: .84rem; }
.colophon p { color: var(--band-ink-soft); margin-bottom: .4rem; }
.footer-mark { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.footer-mark svg { width: 34px; height: 34px; }

/* ---- reveal motion (JS adds .is-in; reduced-motion & no-js safe) ----------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; } .reveal-d3 { transition-delay: .24s; }
.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 940px) {
  .pathway-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-portrait { order: -1; max-width: 420px; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  /* Drop the header's backdrop-filter on mobile: a filtered ancestor becomes the
     containing block for its position:fixed children, which would pin the drawer to
     the 74px header box instead of the viewport (drawer then fails to cover the page). */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .nav-toggle { display: inline-block; position: relative; z-index: 210; }
  .site-nav { position: fixed; top: 0; right: 0; bottom: 0; left: auto; height: 100dvh;
    width: min(82vw, 320px); z-index: 200; flex-direction: column;
    align-items: stretch; gap: .2rem; background: var(--paper); padding: 5.2rem 1.4rem 2rem;
    box-shadow: -12px 0 40px -20px rgba(27,40,48,.4); transform: translateX(100%); transition: transform .28s ease;
    border-left: 1px solid var(--line); overflow-y: auto; }
  .site-nav.open { transform: none; }
  .site-nav a { padding: .85rem .2rem; border-bottom: 1px solid var(--line-soft); font-size: 1.06rem; }
  .site-nav a:not(.nav-cta)::after { display: none; }
  .nav-cta { text-align: center; margin-top: .8rem; border-bottom: none !important; }
  .pathway-grid { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .pathway-head { margin-bottom: 1.1rem; }
}
@media (max-width: 420px) {
  .pathway-grid { grid-template-columns: 1fr; }
}