/* Greater Health: Concept C (Goals first) */
:root {
  --navy: #0B2A4A;
  --navy-2: #16395E;
  --blue: #1B78C2;        /* buttons with white text (passes AA) */
  --sky: #5BB8F0;         /* brand light blue, use with navy text */
  --sky-tint: #EAF4FB;
  --mist: #F5F9FC;
  --line: #DCE7F0;
  --ink: #14212E;
  --body: #3A4A5C;
  --muted: #50637A;
  --eyebrow: #1A6AA8;
  --placeholder: #DCEAF5;
  --placeholder-line: #9FBBD3;
  --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;   /* light headings and stats */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 104px; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font-body); overflow-x: hidden; }
a { color: var(--blue); }
a:hover { color: var(--navy); }
b, strong { font-weight: 600; }
img { max-width: 100%; display: block; }

.container { max-width: 1240px; margin: 0 auto; }
.section { padding: clamp(72px, 9vw, 128px) 24px; }
.section > .container.stack { gap: clamp(36px, 4vw, 56px); }
.section-intro { align-items: center; text-align: center; margin: 0 auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--eyebrow); }
.h2 { margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; font-size: clamp(34px, 4vw, 48px); line-height: 1.1; color: var(--navy); }
.lead { margin: 0; font-size: 19px; line-height: 1.6; color: var(--body); }
.stack { display: flex; flex-direction: column; }
.placeholder { background: var(--placeholder); border: 2px dashed var(--placeholder-line); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 15px; padding: 16px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; color: var(--navy); padding: 12px 18px; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 56px; padding: 0 28px; border-radius: 999px; font-weight: 600; font-size: 18px; text-decoration: none; border: 2px solid transparent; cursor: pointer; font-family: inherit; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: #155f9a; color: #fff; }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: #071D34; color: #fff; }
.btn-white { background: #fff; color: var(--navy); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn:focus-visible, .who-card:focus-visible, .nl:focus-visible, .menu-toggle:focus-visible, .connection a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

/* Header */
/* A frosted pill that floats over the page and stays at the top */
.site-header { position: fixed; top: 12px; left: 16px; right: 16px; z-index: 40; }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px 10px 24px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; box-shadow: 0 10px 30px rgba(11, 42, 74, .12); }
.site-header:has(.main-nav.is-open) .container { border-radius: 24px; }
/* The client's MAIN logo (runner above the wordmark, their blue), trimmed of its empty border.
   Logos are exempt from contrast rules. It fills the 44px logo link in the header and shows larger in the footer. */
.logo { display: inline-flex; align-items: center; text-decoration: none; }
.logo img { height: 44px; width: auto; max-width: none; }
.footer-logo img { height: 64px; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; font-size: 19px; font-weight: 500; }
.main-nav a.nl { color: var(--navy); text-decoration: none; padding: 10px 0; }
.main-nav .btn { min-height: 48px; font-size: 18px; }
.menu-toggle { display: none; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px; border: 2px solid var(--navy); border-radius: 999px; background: transparent; color: var(--navy); font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.menu-toggle .icon-close, .menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }
/* Below this width the full nav wraps, so it folds behind the Menu button. Without JS (no .js class) the nav just shows. */
@media (max-width: 1119.98px) {
  .js .site-header .logo { flex: 1 1 0; min-width: 0; }
  .js .menu-toggle { display: inline-flex; }
  .js .main-nav { display: none; }
  .js .main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; flex-basis: 100%; gap: 0; padding-bottom: 8px; }
  .js .main-nav.is-open a.nl { display: flex; align-items: center; min-height: 52px; padding: 0; border-top: 1px solid rgba(11, 42, 74, .18); }
  .js .main-nav.is-open .btn { margin-top: 12px; }
}
/* Wide screens: the links spread evenly across the space between the logo and the "Make a referral" button.
   The empty ::before is an extra first item, so space-between also leaves an equal gap after the logo
   (its -16px margin cancels the header's 16px gap between the logo and the nav). */
@media (min-width: 1120px) {
  .main-nav { flex: 1 1 auto; justify-content: space-between; }
  .main-nav::before { content: ''; margin-left: -16px; }
}

/* Hero: centred headline with a cycling word (see js/main.js) */
.hero { background: var(--sky); padding: clamp(112px, 11vw, 140px) 24px 0; }
.hero .container { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hero-eyebrow { font-size: 15px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.hero h1 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(44px, 7vw, 104px); line-height: 1.02; letter-spacing: -.015em; color: var(--navy); max-width: 1050px; }
.hero p { margin: 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: var(--navy); max-width: 640px; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 8px; }
/* White highlighter behind the cycling word keeps it readable on the blue.
   Inner page headings reuse it with .hl (set by headingHighlight in front matter, see layouts/page.njk). */
.rotator, .hl { position: relative; z-index: 0; display: inline-block; padding: 0 .08em; }
/* The band is its own box (behind the word) so it can carry a soft shadow */
.rotator::before, .hl::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: -1; background: rgba(255, 255, 255, .85); border-radius: 3px; box-shadow: 0 2px 4px rgba(11, 42, 74, .28), 0 10px 24px rgba(11, 42, 74, .38); }
.rotator { transition: opacity .2s ease, transform .2s ease; }
.rotator.is-swapping { opacity: 0; transform: translateY(.15em); }

/* Map panorama: full width, its sky slides up under the buttons and blends into the hero blue.
   --map-overlap, 12vw (22vw on phones), closes the blue gap under the buttons and keeps Capel Sound, the highest dot, clear of them.
   Only the sides are clipped, so the picture can float down from above (see the arrival below). */
.hero .container > :not(.hero-map) { position: relative; z-index: 1; }
.hero-map { --map-overlap: 12vw; position: relative; width: 100vw; margin-top: calc(-1 * var(--map-overlap)); overflow-x: clip; background: #fff; }
.map-frame { position: relative; }
.map-frame img { display: block; width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent 100%); mask-image: linear-gradient(to bottom, #000 90%, transparent 100%); }
.map-dots { position: absolute; inset: 0; }
.map-dots-phone { display: none; }
/* Dots pop in near to far (--i), each with one soft pulse, then stay put. Dividing by the tour's --zoom keeps them the
   same size on screen while it zooms in. The see-through ::before makes each one about 24px to point at. */
@property --zoom { syntax: '<number>'; inherits: true; initial-value: 1; }
.map-dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 3px #fff; scale: calc(1 / var(--zoom)); animation: map-dot-in .45s cubic-bezier(.2, .8, .2, 1.2) backwards; animation-delay: calc(400ms + var(--i) * 140ms); }
.map-dot::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; }
.map-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--blue); opacity: 0; animation: map-dot-pulse 1.2s ease-out backwards; animation-delay: calc(500ms + var(--i) * 140ms); }
@keyframes map-dot-in { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes map-dot-pulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3); opacity: 0; } }

/* Arrival (with JavaScript, motion allowed): the map picture starts at the very top of the screen and slowly floats
   down into place, then main.js runs the suburb tour below. Only the picture moves; the white box behind it stays,
   so no sky shows below it on the way down. --map-drop is how far up it starts (main.js measures it; this is the fallback).
   The float waits for main.js to mark the map .is-ready (its picture has loaded), so a slow connection can't use up the
   animation before the picture shows. Until then it stays hidden, and appears anyway after 4s if main.js never runs. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-map { --map-drop: -28vw; }
  .js .hero-map:not(.is-ready) { background: transparent; }
  .js .map-frame { opacity: 0; animation: map-reveal 0s 4s forwards; }
  .js .hero-map.is-ready .map-frame { opacity: 1; animation: map-float 3.2s cubic-bezier(.25, .6, .3, 1) backwards; }
  /* Most of the map is below the first screen (phones): no float, it just shows, and the tour waits until it's seen */
  .js .hero-map.no-float { background: #fff; }
  .js .hero-map.no-float .map-frame { opacity: 1; animation: none; }
}
@keyframes map-reveal { to { opacity: 1; } }
@keyframes map-float { from { transform: translateY(var(--map-drop)); opacity: 0; } 10% { opacity: 1; } to { transform: none; opacity: 1; } }

/* Suburb tour (js/main.js): zooms the picture (transform and --zoom, set inline) onto each suburb in turn, switches on a
   soft "area we visit" glow around it, drops its dot in and shows a card beside it; then zooms back out to show them all,
   the glows together making up the service area. The glows are part of the map, so they grow with the zoom. While zoomed,
   the box clips the picture and soft fades hide its edges: sky blue at the top (under the buttons), white at the bottom.
   "Skip map tour" jumps to the end (WCAG 2.2.2). Under reduced motion main.js shows the end straight away. */
.map-frame { transform-origin: 0 0; transition: transform var(--move, 1s) cubic-bezier(.65, 0, .35, 1), --zoom var(--move, 1s) cubic-bezier(.65, 0, .35, 1); }
.hero-map.is-zooming { overflow: clip; }
.map-glows { position: absolute; inset: 0; pointer-events: none; }
.map-glow { position: absolute; width: 9%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(91, 184, 240, .5), rgba(91, 184, 240, .22) 60%, transparent); opacity: 0; scale: .2; }
.map-dots-phone .map-glow { width: 15%; }
.map-glow::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(27, 120, 194, .5); opacity: 0; }
.map-glow.is-on { opacity: 1; scale: 1; }
.map-glow.is-on::after { animation: map-glow-ring 1.4s ease-out .1s backwards; }
.hero-map.tour-done .map-glow { opacity: .7; scale: 1; }
@keyframes map-glow-ring { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.25); } }
/* Dots on the tour: hidden until it reaches them, then dropped in. The one it's on grows and glows. */
.hero-map.has-tour .map-dot, .hero-map.has-tour .map-dot::after { animation: none; }
.hero-map.has-tour:not(.tour-done) .map-dot:not(.is-visited) { opacity: 0; }
.hero-map.has-tour .map-dot.is-visited { animation: map-dot-drop .55s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.hero-map.has-tour .map-dot.is-visited::after { animation: map-dot-pulse 1.2s ease-out .25s backwards; }
/* Only while zooming, so skipping goes straight to the end */
.hero-map.is-zooming .map-dot { transition: width .3s ease, height .3s ease, margin .3s ease, box-shadow .3s ease; }
.hero-map.is-zooming .map-glow { transition: opacity .9s ease, scale 1.1s cubic-bezier(.2, .8, .2, 1); }
.hero-map.is-zooming .map-caption { transition: opacity .35s ease, translate .35s ease; }
.map-dot.is-current { z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px; box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(91, 184, 240, .55), 0 0 24px 8px rgba(91, 184, 240, .7); }
.map-dots-phone .map-dot.is-current { width: 20px; height: 20px; margin: -10px 0 0 -10px; }
@keyframes map-dot-drop { from { transform: translateY(-28px) scale(.4); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
/* The tour's own layer over the map (main.js adds it): the edge fades, the card and the Skip button */
.map-tour { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.map-tour::before, .map-tour::after { content: ''; position: absolute; left: 0; right: 0; opacity: 0; transition: opacity .6s ease; }
.map-tour::before { top: 0; height: calc(var(--map-overlap) + 60px); background: linear-gradient(var(--sky) 60%, transparent); }
.map-tour::after { bottom: 0; height: 18%; background: linear-gradient(transparent, #fff 80%); }
.hero-map.is-zooming .map-tour::before, .hero-map.is-zooming .map-tour::after { opacity: 1; }
/* The card: "Someone in <suburb> needs", the service and why. main.js places it beside the current dot (above it on
   phones). Examples of the kind of support we give, not real clients. */
.map-caption { position: absolute; z-index: 1; left: 0; top: 0; display: flex; flex-direction: column; gap: 2px; width: max-content; max-width: min(270px, calc(100% - 24px)); padding: 12px 16px; background: #fff; border-radius: 18px; box-shadow: 0 10px 30px rgba(11, 42, 74, .2); text-align: left; color: var(--navy); opacity: 0; translate: 0 6px; }
.map-caption.is-shown { opacity: 1; translate: 0 0; }
.map-caption-who { font-size: 14px; color: var(--muted); }
.map-caption-service { font-size: 18px; font-weight: 600; line-height: 1.25; }
.map-caption-need { font-size: 16px; line-height: 1.4; color: var(--body); }
.map-skip { position: absolute; z-index: 1; right: 16px; min-height: 44px; padding: 0 18px; white-space: nowrap; font-size: 15px; box-shadow: 0 6px 18px rgba(11, 42, 74, .2); pointer-events: auto; }
.map-skip[hidden] { display: none; }

/* A suburb found by the checker: bigger glowing dot with its name in the pill; the other dots fade back */
.hero-map.has-found .map-dot { opacity: .4; transition: opacity .3s ease; }
.hero-map.has-found .map-dot.is-found { opacity: 1; z-index: 2; width: 20px; height: 20px; margin: -10px 0 0 -10px; box-shadow: 0 0 0 3px #fff, 0 0 0 8px rgba(91, 184, 240, .55), 0 0 26px 8px rgba(91, 184, 240, .75); }
.hero-map .map-dot.is-found::after { animation: map-dot-pulse 1s ease-out 3; }
/* Names only show in a navy pill beside the dot, never at rest (they crowd): pointing at a dot with a mouse (not while
   the tour zooms), tapping near one up to 899px wide (see js/main.js), or a checker match */
.map-label { display: none; position: absolute; left: 24px; top: 50%; transform: translateY(-50%); padding: 4px 12px; white-space: nowrap; background: var(--navy); color: #fff; border-radius: 999px; box-shadow: 0 4px 14px rgba(11, 42, 74, .25); font-size: 15px; font-weight: 600; transform-origin: left center; animation: map-pill-in .18s ease-out; }
.map-dot.label-left .map-label { left: auto; right: 24px; }
.map-dot.is-found .map-label, .map-dot.is-tapped .map-label { display: block; }
.map-dot.is-tapped { z-index: 3; }
@media (hover: hover) {
  .hero-map:not(.is-zooming) .map-dot:hover { z-index: 3; }
  .hero-map:not(.is-zooming) .map-dot:hover .map-label { display: block; }
}
/* A pill that would run off the map flips to the dot's other side (js/main.js adds .pill-flip) */
.map-dot.pill-flip .map-label { left: auto; right: 24px; }
.map-dot.label-left.pill-flip .map-label { left: 24px; right: auto; }
/* The pill grows out from its dot (origin on the dot side) */
.map-dot.label-left .map-label, .map-dot.pill-flip .map-label { transform-origin: right center; }
.map-dot.label-left.pill-flip .map-label { transform-origin: left center; }
@keyframes map-pill-in { from { opacity: 0; transform: translateY(-50%) scale(.6); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
/* The message and way back, fixed to the bottom of the screen so it never covers a dot */
.map-found { position: fixed; left: 50%; bottom: 16px; z-index: 45; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; width: max-content; max-width: calc(100% - 24px); padding: 10px 10px 10px 20px; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(15px); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; box-shadow: 0 10px 30px rgba(11, 42, 74, .22); }
.map-found[hidden] { display: none; }
.map-found-text { font-weight: 600; color: var(--navy); }
.map-found .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }

/* Goal card (in "Who we help") */
.goal-card { background: #fff; border-radius: 32px; padding: 40px; display: flex; flex-wrap: wrap; gap: 40px; box-shadow: 0 24px 60px rgba(11, 42, 74, .12); }
.goal-card[hidden] { display: none; }
.goal-card h3 { margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; font-size: 34px; line-height: 1.2; color: var(--navy); }
.tag { background: var(--sky-tint); color: var(--navy); border-radius: 999px; padding: 8px 16px; font-weight: 500; font-size: 16px; }

/* Quick facts */
/* A white card overlapping the bottom of the map (the map fades into white behind it).
   The overlap scales with width so it never covers the lowest suburb dot. */
/* Overlap = 2.9vw - 22px (8vw - 20px on phones) keeps about 12px between the card and the lowest dot and its name
   (Glen Waverley) at any width */
.facts { position: relative; z-index: 2; margin-top: min(0px, calc(22px - 2.9vw)); padding: 0 24px; }
.facts .container { max-width: 1040px; padding: 8px 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); column-gap: 24px; background: #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(11, 42, 74, .14), 0 2px 8px rgba(11, 42, 74, .06); }
.fact { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 0; text-align: center; }
.fact strong { font-family: var(--font-display); font-weight: 300; font-size: 40px; color: var(--blue); line-height: 1; }
.fact span { font-size: 16px; color: var(--body); }
.facts-credit { margin: 14px auto 0; max-width: 1040px; text-align: center; font-size: 12px; line-height: 1.4; color: var(--muted); }
.facts-credit a { color: inherit; }

/* Cards & grids */
.grid { display: grid; gap: 16px; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 32px; }
/* Flex so a short last row sits centred under the centred heading */
.grid-who { display: flex; flex-wrap: wrap; justify-content: center; }
.grid-places { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid-funding { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 14px; }
.grid-stories { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; }
.card-title { font-family: var(--font-body); font-size: 20px; font-weight: 600; color: var(--navy); }
.card-body { font-size: 16px; line-height: 1.5; color: var(--body); }

.ep-step { display: flex; flex-direction: column; gap: 10px; border-top: 3px solid var(--navy); padding-top: 20px; }
.ep-step .num { font-family: var(--font-display); font-size: 56px; font-weight: 300; color: var(--blue); line-height: 1; }
.ep-step .card-title { font-size: 24px; }

/* Person cards are buttons: choosing one shows its goal */
.who-card { flex: 1 1 340px; max-width: 400px; background: #fff; border-radius: 28px; padding: 18px; display: flex; gap: 18px; align-items: center; border: 2px solid transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 12px 32px rgba(11, 42, 74, .08), 0 2px 6px rgba(11, 42, 74, .05); transition: transform .2s ease, box-shadow .2s ease, background .15s, border-color .15s; }
.who-card:hover { border-color: var(--sky); transform: translateY(-4px); box-shadow: 0 18px 44px rgba(11, 42, 74, .14); }
.who-card[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); }
.who-card[aria-pressed="true"] .card-title, .who-card[aria-pressed="true"] .card-body { color: #fff; }
.who-card .placeholder { flex: none; width: 88px; height: 88px; border-radius: 50%; font-size: 12px; padding: 0; }

.place-card { border-radius: 24px; overflow: hidden; background: var(--sky-tint); display: flex; flex-direction: column; }
.place-card .placeholder { height: 150px; border: 0; }
.place-card .inner { padding: 22px; display: flex; flex-direction: column; gap: 6px; }

/* Suburb checker */
.checker { display: flex; flex-wrap: wrap; gap: 32px; background: var(--mist); border-radius: 28px; padding: 36px; }
.checker form { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; }
.checker label { font-family: var(--font-body); font-size: 26px; font-weight: 600; color: var(--navy); }
.checker input { flex: 1 1 220px; min-height: 56px; padding: 0 20px; font-size: 18px; font-family: inherit; color: var(--ink); background: #fff; border: 2px solid #7F97AD; border-radius: 999px; }
.checker .result { margin: 0; font-size: 18px; line-height: 1.5; color: var(--navy); font-weight: 500; }
.chips { flex: 1 1 460px; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.chips li { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 16px; color: var(--navy); }
.chips li.more { background: none; border: 0; color: var(--body); padding: 8px 6px; }

/* Funding (dark) */
.dark { background: var(--navy); color: #fff; }
.dark .h2 { color: #fff; }
.fund-card { background: var(--navy-2); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.fund-card .card-title { color: var(--sky); }
.fund-card .card-body { color: #E3EEF7; }

/* Stories / testimonials */
.story { background: var(--mist); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.story .placeholder { height: 200px; border: 0; }
.story .inner { padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.story h3 { margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; font-size: 22px; line-height: 1.25; color: var(--navy); }
.story p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.quote { margin: 0; background: #fff; border-radius: 24px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.quote blockquote { margin: 0; font-size: 20px; line-height: 1.5; }
.quote figcaption { display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--muted); font-weight: 500; }
/* Google reviews: a source line with five filled stars under the name, then the review links below the cards */
.review-source { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 400; }
.review-stars { display: inline-flex; gap: 2px; color: var(--blue); }
.review-stars .icon { width: 16px; height: 16px; fill: currentColor; }
.review-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 32px; }
/* The reviews block sits tighter than the section's own spacing; its heading matches the community bubble title */
.reviews { gap: 24px; }
.h-sub { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -.01em; color: var(--navy); }
.person { display: flex; gap: 16px; align-items: center; }
.person .placeholder { flex: none; width: 96px; height: 96px; border-radius: 50%; font-size: 13px; padding: 0; }
/* Community connections (independent organisations, shown as a list of cards) */
/* A navy Greater Health bubble with a pathway line to each organisation's card.
   Wide screens: the line branches to three cards. Narrower: it runs down the left. Lines and dots are decoration. */
.community { margin-top: clamp(24px, 4vw, 56px); }
.pathway { display: flex; flex-direction: column; align-items: center; position: relative; }
.pathway-hub { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hub-card { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: clamp(28px, 4vw, 44px); text-align: center; background: var(--navy); border-radius: 28px; box-shadow: 0 24px 60px rgba(11, 42, 74, .18); }
.hub-card h3 { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.hub-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 3vw, 36px); line-height: 1.05; letter-spacing: -.01em; color: #fff; }
.hub-subtitle { font-family: var(--font-body); font-weight: 600; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; letter-spacing: .01em; color: var(--sky); }
.hub-card .lead { color: #D6E6F3; }
.hub-stem { width: 2px; height: 32px; background: var(--sky); }
.pathway .grid-community { width: 100%; position: relative; }
.pathway .connection { position: relative; overflow: visible; }
.pathway .grid-community::before, .pathway .connection::before { content: ''; position: absolute; background: var(--sky); }
.pathway .connection::after { content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px var(--mist); }
@media (min-width: 960px) {
  /* Three across. The branch line runs between the first and last card centres; adjust it if a fourth card is added. */
  .pathway .grid-community { grid-template-columns: repeat(3, 1fr); padding-top: 40px; }
  .pathway .grid-community::before { top: 0; height: 2px; left: calc((100% - 40px) / 6); right: calc((100% - 40px) / 6); }
  .pathway .connection::before { top: -40px; left: calc(50% - 1px); width: 2px; height: 40px; }
  .pathway .connection::after { top: -8px; left: calc(50% - 8px); }
}
@media (max-width: 959.98px) {
  .pathway { align-items: stretch; padding-left: 48px; }
  .pathway-hub { margin-left: -48px; width: calc(100% + 48px); }
  .hub-card { max-width: none; width: 100%; }
  .hub-stem { display: none; }
  .pathway .grid-community { grid-template-columns: 1fr; padding-top: 24px; }
  .pathway .grid-community::before { top: 0; left: -25px; width: 2px; height: 63px; }
  .pathway .connection::before { top: 39px; left: -25px; width: 2px; height: calc(100% + 20px); }
  .pathway .connection:last-child::before { display: none; }
  .pathway .connection::after { top: 31px; left: -32px; }
}
.grid-community { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.connection { background: #fff; border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.connection h4 { margin: 0; font-family: var(--font-body); font-size: 22px; font-weight: 600; color: var(--navy); }
.connection p { margin: 0; flex: 1; font-size: 17px; line-height: 1.55; color: var(--body); }
.connection a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }

/* FAQ */
.faq-list { flex: 2 1 560px; border-top: 1px solid var(--line); }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 4px; min-height: 44px; font-family: var(--font-body); font-size: 20px; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq .chev { flex: none; transition: transform .2s; }
.faq[open] .chev { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 4px 24px; font-size: 18px; line-height: 1.65; color: var(--body); max-width: 820px; }

/* CTA + footer */
.cta { background: var(--sky); padding: clamp(88px, 10vw, 144px) 24px; }
.cta .container { max-width: 900px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.cta h2 { margin: 0; font-family: var(--font-display); font-weight: 300; letter-spacing: -.01em; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; color: var(--navy); }
.cta p { margin: 0; font-size: 20px; line-height: 1.6; color: var(--navy); }
.site-footer { background: var(--navy); color: #CFE3F3; }
.site-footer .container { padding: 64px 24px 32px; display: flex; flex-direction: column; gap: 40px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 32px; }
.footer-cols nav, .footer-cols > div { display: flex; flex-direction: column; gap: 4px; }
.footer-cols .head { font-weight: 500; color: #fff; padding-bottom: 6px; }
.footer-cols a { color: #CFE3F3; padding: 6px 0; }
/* Social links: round 44px icon buttons in one row (the link's aria-label names the platform) */
.social { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 10px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #fff; border: 1.5px solid rgba(255,255,255,.4); border-radius: 50%; text-decoration: none; }
.social a:hover { border-color: #fff; }
.social a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.social .icon, .social-link .icon { width: 20px; height: 20px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); padding-top: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-size: 15px; line-height: 1.6; }
.footer-bottom a { color: #CFE3F3; }

/* Depth: soft shadows and rounder corners on cards (the lift on hover is only for cards you can click) */
.place-card, .story, .quote, .connection, .checker { border-radius: 28px; box-shadow: 0 12px 32px rgba(11, 42, 74, .08), 0 2px 6px rgba(11, 42, 74, .05); }
.fund-card { border-radius: 22px; border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 12px 28px rgba(0, 0, 0, .18); }
.connection { transition: transform .2s ease, box-shadow .2s ease; }
.connection:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(11, 42, 74, .14); }

/* ---------- Multi-page additions: current nav item, text links, inner pages ---------- */
/* Touch targets at least 44px tall (project rule): header logo and footer links (the social icons are 44px round) */
.site-header .logo { min-height: 44px; }
.footer-cols nav > a, .footer-cols > div > a { display: flex; align-items: center; min-height: 44px; padding: 0; }
.footer-cols nav, .footer-cols > div:has(> a) { gap: 0; }
.contact-link { display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
/* Current page in the main nav: a navy underline */
.main-nav a.nl[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--navy); text-decoration-thickness: 2px; text-underline-offset: 8px; }

/* "Learn more" links with an arrow. They use the darker eyebrow blue so they pass AA on white, mist and tint. */
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 18px; font-weight: 600; color: var(--eyebrow); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.text-link:hover { color: var(--navy); }
.text-link svg { flex: none; transition: transform .2s ease; }
.text-link:hover svg { transform: translateX(3px); }
.stack > .text-link, .info-card > .text-link, .note-card > .text-link { align-self: flex-start; }
.stack > .text-link.is-centred { align-self: center; }
.dark .text-link, .hub-card .text-link { color: var(--sky); }
.dark .text-link:hover, .hub-card .text-link:hover { color: #fff; }
.text-link:focus-visible, .page-jump a:focus-visible, .info-card a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.dark .text-link:focus-visible, .hub-card .text-link:focus-visible, .dark .btn:focus-visible { outline-color: #fff; }

/* Inner page hero: the homepage hero's sky blue, without the map or the cycling word */
.page-hero { background: var(--sky); padding: clamp(128px, 12vw, 168px) 24px clamp(64px, 7vw, 104px); }
.page-hero .container { max-width: 960px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.page-hero h1 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(40px, 6vw, 80px); line-height: 1.04; letter-spacing: -.015em; color: var(--navy); }
.page-hero p { margin: 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.5; color: var(--navy); max-width: 640px; }
/* "On this page" links under the intro */
.page-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 8px; }
.page-jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .75); color: var(--navy); font-size: 16px; font-weight: 600; text-decoration: none; }
.page-jump a:hover { background: #fff; color: var(--navy); }

/* Content building blocks */
.intro-narrow { max-width: 760px; }
.dark .lead { color: #CFE3F3; }
.h3 { margin: 0; font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.prose { display: flex; flex-direction: column; gap: 16px; }
.prose p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--body); max-width: 70ch; }
/* Outline button for navy sections */
.btn-outline-light { background: transparent; color: #fff; border-color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--navy); }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
/* Text beside a photo (or a card); stacks on narrow screens */
.feature { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(32px, 4vw, 64px); }
.feature-text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.feature-media { flex: 1 1 360px; min-width: 0; min-height: 320px; border-radius: 28px; }
/* Ticked list, two columns where there's room */
.check-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px 28px; }
.check-list li { position: relative; padding-left: 32px; font-size: 17px; line-height: 1.5; color: var(--body); }
.check-list li::before { content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--sky-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B78C2' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
/* White cards with soft shadows (not clickable, so no lift) */
.grid-cards { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px; }
.info-card { min-width: 0; background: #fff; border-radius: 28px; padding: clamp(24px, 3vw, 32px); display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 32px rgba(11, 42, 74, .08), 0 2px 6px rgba(11, 42, 74, .05); }
.info-card p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--body); }
.info-card .num { font-family: var(--font-display); font-size: 44px; font-weight: 300; line-height: 1; color: var(--blue); }
.label { font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--eyebrow); }
/* A white card with a photo on top (Who we help) */
.aside-card { flex: 1 1 340px; min-width: 0; background: #fff; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 12px 32px rgba(11, 42, 74, .08), 0 2px 6px rgba(11, 42, 74, .05); }
.aside-card .placeholder { min-height: 220px; border: 0; }
.aside-card .inner { padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 12px; }
.aside-card .inner .h3 { font-size: 19px; }
.aside-card .inner .h3 + .tag-list { margin-bottom: 8px; }
/* A quiet, low-key note (Support work, Acknowledgement of Country) */
.section-tight { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.note-card { max-width: 860px; margin: 0 auto; background: var(--mist); border-radius: 28px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 12px; }
.note-card p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--body); }
/* Team */
.team-card .placeholder { aspect-ratio: 1 / 1; border-radius: 20px; margin-bottom: 8px; }
/* Blog */
.post-card time { font-size: 15px; color: var(--muted); }
.post-card h3 { margin: 0; font-family: var(--font-display); font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: -.01em; color: var(--navy); }
.post-card .text-link { margin-top: auto; padding-top: 6px; }
/* Blog grid: 1 column on phones, 2 on tablets, 3 on desktop; cards in a row share a height */
.grid-posts { grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .grid-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-posts { grid-template-columns: repeat(3, 1fr); } }
.post-card[hidden] { display: none; }
.posts-more { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.posts-more[hidden], .posts-more .btn[hidden] { display: none; }
.posts-count { margin: 0; font-size: 16px; color: var(--muted); }
/* Contact: referral pathway cards, three across with a centred last row */
.grid-pathways { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.grid-pathways > * { flex: 1 1 340px; max-width: 400px; }
.pathway-card .card-title { font-size: 22px; }
.pathway-card .btn { align-self: flex-start; margin-top: auto; }
.pathway-card .who { padding: 12px 0 8px; border-top: 1px solid var(--line); }
.form-note { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.dark .form-note { color: #CFE3F3; }
/* Links inside text on the mist background use the darker blue so they pass AA */
.inline-link { color: var(--eyebrow); }
.social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 50%; color: var(--navy); text-decoration: none; }
.social-link:hover { border-color: var(--navy); color: var(--navy); }
/* FAQ page: one block per group, laid out like the homepage FAQ */
.faq-group { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.faq-group + .faq-group { margin-top: clamp(24px, 4vw, 48px); }

/* Icons: Lucide line icons, inlined at build time by the "icon" shortcode (eleventy.config.js). Always decoration. */
.icon { flex: none; width: 24px; height: 24px; }
/* The round badge: a 24px blue icon in a 48px sky tint circle on white cards.
   On the mist note card the circle is white; on navy it's a faint white circle with a sky blue icon. */
.icon-badge { display: block; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--sky-tint); color: var(--blue); }
.note-card .icon-badge { background: #fff; }
.dark .icon-badge { background: rgba(255, 255, 255, .1); color: var(--sky); }
.place-card .icon-badge, .fund-card .icon-badge, .info-card .icon-badge { margin-bottom: 6px; }

/* About, Our team and Contact (front matter heroMap): a faint South East map behind the page hero. Decoration only.
   It sits low in the hero and fades out towards the text. The map is lighter than the sky blue, so navy text only gains contrast. */
.page-hero-map { position: relative; isolation: isolate; overflow: hidden; }
.page-hero-map::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/img/map-desktop.webp") center bottom / cover no-repeat; opacity: .6; -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%); mask-image: linear-gradient(to top, #000 10%, transparent 70%); }
@media (max-width: 640px) {
  .page-hero-map::before { background-image: url("/img/map-phone.webp"); }
}

/* FAQ search (js/main.js): a mist panel like the homepage suburb checker. Hidden without JavaScript. */
.faq-search { max-width: 860px; margin: 0 auto clamp(48px, 6vw, 80px); display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 3vw, 36px); background: var(--mist); border-radius: 28px; }
.faq-search[hidden], .faq-search-empty[hidden], .faq[hidden], .faq-group[hidden] { display: none; }
.faq-search-label { font-size: 22px; font-weight: 600; color: var(--navy); }
.faq-search-row { display: flex; flex-wrap: wrap; gap: 10px; }
.faq-search input { flex: 1 1 220px; min-width: 0; min-height: 56px; padding: 0 20px; font-size: 18px; font-family: inherit; color: var(--ink); background: #fff; border: 2px solid #7F97AD; border-radius: 999px; -webkit-appearance: none; appearance: none; }
.faq-search input::placeholder { color: var(--muted); opacity: 1; }
.faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.faq-search-status { margin: 0; font-size: 16px; color: var(--muted); }
.faq-search-empty { margin: 0; font-size: 18px; line-height: 1.55; color: var(--navy); }

/* Contact: "Who's referring?" toggles (js/main.js). Hidden without JavaScript. The chosen one turns navy with a tick. */
.refer-filter { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.refer-filter[hidden] { display: none; }
.refer-question { margin: 0; font-size: 22px; font-weight: 600; color: var(--navy); }
.refer-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.refer-option { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 8px 20px; border: 2px solid var(--navy); border-radius: 24px; background: #fff; color: var(--navy); font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; }
.refer-option:hover { background: var(--sky-tint); }
.refer-option[aria-pressed="true"] { background: var(--navy); color: #fff; }
.refer-option[aria-pressed="true"]::before { content: ''; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.refer-reset { border-color: transparent; background: transparent; color: var(--eyebrow); text-decoration: underline; text-underline-offset: 4px; }
.refer-reset:hover { background: transparent; color: var(--navy); }
.refer-option:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.refer-status { margin: 0; min-height: 1.5em; font-size: 16px; color: var(--muted); }
/* Pathway cards once a referrer is chosen: the fits get a blue border and a "Fits you" badge; the rest go flat on the mist.
   Text colours never change (no fading), so the quieter cards keep AA contrast and stay clickable. */
.pathway-card { position: relative; border: 2px solid transparent; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
.pathway-card.is-fit { border-color: var(--blue); }
.pathway-card.is-quiet { background: transparent; box-shadow: none; border-color: var(--line); }
.pathway-card.is-quiet .icon-badge { background: #fff; color: var(--muted); }
.pathway-card.is-quiet .btn-primary { background: transparent; color: var(--navy); border-color: var(--navy); }
.pathway-card.is-quiet .btn-primary:hover { background: var(--navy); color: #fff; }
.fit-badge { display: none; position: absolute; top: calc(clamp(24px, 3vw, 32px) + 9px); right: clamp(24px, 3vw, 32px); align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 600; }
.fit-badge .icon { width: 18px; height: 18px; }
.pathway-card.is-fit .fit-badge { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .pathway-card { transition: none; }
  html { scroll-behavior: auto; }
  .who-card:hover, .connection:hover { transform: none; }
  .rotator { transition: none; }
  .map-dot, .map-dot::after, .hero-map .map-dot.is-found::after, .map-label { animation: none; }
  .hero-map.has-found .map-dot { transition: none; }
  .text-link svg { transition: none; }
  .text-link:hover svg { transform: none; }
}
@media (max-width: 640px) {
  /* Stack the two halves of the hero eyebrow instead of wrapping after the dot */
  .hero-eyebrow { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .hero-eyebrow-dot { display: none; }
  .site-header { left: 12px; right: 12px; }
  .site-header .container { padding: 8px 8px 8px 18px; gap: 12px; }
  .hero-map { --map-overlap: 22vw; }
  .map-dots-desktop { display: none; }
  .map-dots-phone { display: block; }
  .map-found { border-radius: 24px; padding: 12px; text-align: center; }
  .facts { margin-top: min(0px, calc(20px - 8vw)); }
  .facts-credit { font-size: 11px; }
  .menu-toggle { padding: 0 14px; }
  .goal-card, .checker { padding: 24px; }
  .facts .container { padding: 4px 20px; grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .fact { padding: 18px 0; }
  .fact strong { font-size: 32px; }
}

/* Privacy policy and terms of use: one readable column of headed sections */
.legal { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; }
.legal .note-card { margin: 0; }
.legal-section { display: flex; flex-direction: column; gap: 8px; }
.legal-section h2 { margin: 0; font-family: var(--font-display); font-weight: 300; font-size: clamp(26px, 3vw, 32px); line-height: 1.2; letter-spacing: -.01em; color: var(--navy); }
.legal-section p { margin: 0; font-size: 18px; line-height: 1.65; color: var(--body); }
.legal .covers { font-size: 15px; color: var(--muted); }