/* Mobile Radiology Australia
   Tokens fitted to live's MEASURED ladder — see DESIGN.md. Live's type is
   fixed at every width (h1 = 68px at 390 and at 1920), which is why its
   homepage scrolls sideways at 390. The scale below is fluid instead: the
   desktop end matches live to a 1.0% mean error, and it flows down properly. */

:root {
  /* Utopia range: 390 -> 1440, body 16px, ratio 1.230 ----------------------- */
  --u-min-vw: 390;
  --u-max-vw: 1440;
  --fluid: (100vw - var(--u-min-vw) * 1px) / (var(--u-max-vw) - var(--u-min-vw));

  /* step-n = 16 * 1.230^n at the max end; min end is one ratio step lower so
     the scale compresses on small screens instead of overflowing. */
  --step--1: clamp(0.813rem, 0.78rem + 0.14 * var(--fluid) * 16, 0.875rem);
  --step-0:  clamp(0.938rem, 0.91rem + 0.16 * var(--fluid) * 16, 1rem);       /* 16 */
  --step-1:  clamp(1.063rem, 1.00rem + 0.35 * var(--fluid) * 16, 1.231rem);   /* 20 */
  --step-2:  clamp(1.188rem, 1.06rem + 0.72 * var(--fluid) * 16, 1.514rem);   /* 24 */
  --step-3:  clamp(1.375rem, 1.16rem + 1.20 * var(--fluid) * 16, 1.862rem);   /* 30 */
  --step-4:  clamp(1.563rem, 1.22rem + 1.92 * var(--fluid) * 16, 2.290rem);   /* 36 */
  /* EXTENSIONS — live's two display sizes sit above the geometric chain and
     are declared explicitly, as Priority Health declares its 40/45/55px. */
  --step-5:  clamp(1.750rem, 1.32rem + 2.42 * var(--fluid) * 16, 2.500rem);   /* 40 */
  --step-6:  clamp(2.250rem, 1.35rem + 5.08 * var(--fluid) * 16, 4.250rem);   /* 68 */

  --leading-xs: 1.1;
  --leading-s: 1.2;
  --leading-m: 1.35;
  --leading-l: 1.6;

  /* Palette — measured by painted area on the live homepage ---------------- */
  --navy:  rgb(26, 34, 52);
  /* Live is rgb(49,126,194) #317ec2, which fails WCAG AA at 4.29:1 both as
     link text on white and as white-on-button. Darkened 5% to clear 4.5:1 in
     all FOUR uses — 4.99 on white, 4.78 on --mist, 4.58 on --ash, 4.99 for
     white on it — while
     staying visually the same blue. Measured, not guessed. */
  --blue:  rgb(41, 105, 162);
  /* Darkened again when the audiences band moved to --pale: the previous
     rgb(45,115,178) gave link text only 3.94:1 there. This clears 4.56 on
     --pale, 5.77 on white, 5.77 for white-on-blue. */
  --blue-live: rgb(49, 126, 194);
  --ash:   rgb(245, 245, 245);
  --mist:  rgb(250, 250, 250);
  --line:  rgb(212, 212, 212);
  --pale:  rgb(222, 230, 232);
  --white: #fff;
  /* Jotform's own page background, measured on all three embedded forms.
     Used so an embed does not sit on a visibly different surface. */
  --jotform-bg: rgb(243, 243, 254);
  --ink:         rgb(26, 34, 52);
  --ink-body:    rgb(68, 76, 90);
  --ink-inverse: rgba(255, 255, 255, 0.86);

  /* Space — 8px base, fluid at the two larger steps ------------------------ */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-s:   16px;
  --space-m:   24px;
  --space-l:   32px;
  --space-xl:  clamp(40px, 3vw, 48px);
  --space-2xl: clamp(48px, 5vw, 80px);
  --space-3xl: clamp(64px, 7vw, 120px);

  /* Structure — the 1200px cap is REAL, verified at 1920 ------------------- */
  --cap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);

  --font-display: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-l);
  color: var(--ink-body);
  background: var(--white);
  /* Live overflows sideways at 390 because its type never scales. Ours does,
     but keep the guard so a single wide child can never reintroduce it.
     MUST be `clip`, not `hidden`: `hidden` makes body a scroll container and
     silently breaks `position: sticky` for every descendant — which is exactly
     what stopped the header sticking the first time. */
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: var(--leading-s);
  margin: 0 0 var(--space-m);
  text-wrap: balance;
  font-weight: 400;
}
h1 { font-size: var(--step-6); line-height: var(--leading-xs); }
h2 { font-size: var(--step-5); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
p  { margin: 0 0 var(--space-m); }
p:last-child { margin-bottom: 0; }

a { color: var(--blue); }
a:hover, a:focus-visible { color: var(--navy); }

.u-container { width: min(100% - var(--gutter) * 2, var(--cap)); margin-inline: auto; }
.u-centre { text-align: center; }
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Bands ------------------------------------------------------------------- */
.band { padding-block: var(--space-3xl); }
.band--ash   { background: var(--ash); }
.band--mist  { background: var(--mist); }
.band--navy  { background: var(--navy); color: var(--ink-inverse); }
.band--blue  { background: var(--blue); color: var(--white); }
.band--navy h1, .band--navy h2, .band--navy h3,
.band--blue h1, .band--blue h2, .band--blue h3 { color: var(--white); }
.band--tight { padding-block: var(--space-xl); }

.section-title { font-size: var(--step-5); margin-bottom: var(--space-l); }
.lede { font-size: var(--step-1); max-width: 68ch; }

/* Buttons ----------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2xs); min-height: 48px;
  padding: var(--space-xs) var(--space-l);
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
  text-decoration: none; border: 2px solid transparent; border-radius: 2px;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
/* Explicit #fff, not : inside a --navy/--blue band the button was
   picking up --ink-inverse (a tinted white) and failing contrast on its own
   ground. */
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--navy); color: var(--white); }
.btn--ghost { background: transparent; color: var(--white); border-color: currentColor; }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--white); color: var(--navy); }
.btn--dark { background: var(--navy); color: #fff; }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--blue); color: var(--white); }

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header__utility { background: var(--navy); color: var(--ink-inverse); }
.site-header__utility-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l);
  min-height: 58px; padding-block: var(--space-2xs);
  font-family: var(--font-display); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .04em;
}
/* Removed: `.site-header__utility a` was (0,1,1) and beat `.site-header__util-link`
   (0,1,0), so `color: inherit` won and the links took the bar's 86%-opacity ink,
   failing contrast on the blue ground. The later rule was in the sheet and
   silently losing. THIRD time this exact specificity trap has bitten in this
   codebase — prefer one rule per element, at one specificity. */
.site-header__cta { font-weight: 700; }
.site-header__phone { margin-inline-end: auto; }
.site-header__meta { display: flex; gap: var(--space-m); }

.site-header__main { background: var(--white); border-bottom: 1px solid var(--line); }
.site-header__main-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m); min-height: 134px; padding-block: var(--space-s);
}
.site-header__brand img { width: clamp(180px, 20vw, 240px); height: auto; }

.site-header__burger {
  display: none; width: 48px; height: 48px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 2px; cursor: pointer;
}
.site-header__burger-bar,
.site-header__burger-bar::before,
.site-header__burger-bar::after {
  display: block; width: 22px; height: 2px; margin-inline: auto;
  background: var(--navy); content: ''; position: relative;
}
.site-header__burger-bar::before { top: -7px; }
.site-header__burger-bar::after  { top: 5px; }

.site-nav__list {
  display: flex; align-items: center; gap: var(--space-m);
  margin: 0; padding: 0; list-style: none;
}
.site-nav__item { position: relative; }
.site-nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: var(--step-0); font-weight: 600;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.site-nav__link:hover, .site-nav__link:focus-visible { color: var(--blue); }
.site-nav__item--has-children > .site-nav__toggle::after {
  content: ''; width: 7px; height: 7px; margin-left: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.site-nav__sub {
  position: absolute; top: 100%; left: 0; z-index: 20; min-width: 230px;
  margin: 0; padding: var(--space-2xs) 0; list-style: none;
  background: var(--white); border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgb(26 34 52 / .12);
  display: none;
}
.site-nav__item--has-children:hover .site-nav__sub,
.site-nav__item--has-children:focus-within .site-nav__sub,
.site-nav__toggle[aria-expanded="true"] + .site-nav__sub { display: block; }
.site-nav__sub a {
  display: block; padding: var(--space-2xs) var(--space-s);
  color: var(--ink); text-decoration: none; font-size: var(--step-0);
}
.site-nav__sub a:hover, .site-nav__sub a:focus-visible { background: var(--ash); color: var(--blue); }

@media (max-width: 1024px) {
  .site-header__burger { display: grid; place-items: center; }
  .site-nav { display: none; width: 100%; }
  .site-nav.is-open { display: block; }
  .site-header__main-inner { flex-wrap: wrap; min-height: 0; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__item { border-top: 1px solid var(--line); }
  .site-nav__link { width: 100%; padding-block: var(--space-xs); }
  .site-nav__sub { position: static; display: none; border: 0; box-shadow: none; padding-left: var(--space-s); }
  .site-nav__toggle[aria-expanded="true"] + .site-nav__sub { display: block; }
  .site-nav__item--has-children:hover .site-nav__sub { display: none; }
  .site-nav__item--cta { border-top: 0; padding-block: var(--space-s); }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding-block: var(--space-3xl); }
.hero__title { max-width: 18ch; }
.hero__lede { margin-bottom: var(--space-xl); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-bottom: var(--space-xl); }
.hero__locations {
  display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-m);
  margin: 0; padding: 0; list-style: none; font-size: var(--step-0);
}
.hero__locations li + li { border-left: 1px solid var(--line); padding-left: var(--space-m); }
.hero__locations a { color: var(--ink); text-decoration: none; }
.hero__locations a:hover, .hero__locations a:focus-visible { color: var(--blue); text-decoration: underline; }

/* ── Audience cards ─────────────────────────────────────────────────────── */
.audiences__grid, .audience-detail__list, .reviews__list {
  display: grid; gap: var(--space-xl); margin: 0; padding: 0; list-style: none;
}
.audiences__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.audience__num {
  display: grid; place-items: center; width: 48px; height: 48px;
  margin-bottom: var(--space-s); border-radius: 50%;
  background: var(--blue); color: var(--white);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 700;
}
.audience__title { font-size: var(--step-3); margin-bottom: var(--space-2xs); }
.audience__link, .adetail__link {
  display: inline-block; margin-top: var(--space-s);
  font-family: var(--font-display); font-weight: 600; color: var(--blue);
}

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stats__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 0; text-align: center; align-items: stretch;
}
/* Full-height white rule between each stat. Drawn on the item rather than as
   a border on the grid, so it stretches the whole cell and disappears cleanly
   when the columns wrap at narrow widths. */
/* Full-bleed: the stats row spans the viewport, not the 1200px container, so
   the dividers reach the edges of the band at every width. */
.stat { display: grid; gap: var(--space-3xs); position: relative; align-content: center; }
/* The rule spans the BAND's full height, not just the text block: the band's
   own block padding is removed and given to the cells, so top/bottom:0 on the
   cell is the full height of the section. */
.stat + .stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: rgb(255 255 255 / .45);
}
@media (max-width: 620px) { .stat + .stat::before { display: none; } }
.stat__num { font-family: var(--font-display); font-size: var(--step-4); color: var(--white); line-height: 1.1; }
.stat__label { font-size: var(--step-0); text-transform: uppercase; letter-spacing: .06em; }

/* ── Audience detail + reviews ──────────────────────────────────────────── */
.audience-detail__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.adetail__step { font-size: var(--step-1); color: var(--blue); margin-bottom: var(--space-2xs); }
.adetail__title { font-size: var(--step-2); margin-bottom: var(--space-2xs); }
.audience-detail__credit { margin-top: var(--space-xl); font-size: var(--step--1); color: var(--ink-body); }

.reviews__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.review blockquote { margin: 0 0 var(--space-s); padding-left: var(--space-m); border-left: 3px solid var(--blue); }
.review__by { font-size: var(--step--1); }

/* ── Booking CTA + locations ────────────────────────────────────────────── */
.booking-cta__inner { max-width: 62ch; }
.locations-band__inner {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
}
.locations-band__list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2xs); margin: var(--space-m) 0 0; padding: 0; list-style: none;
}
.locations-band__list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.locations-band__list a:hover, .locations-band__list a:focus-visible { color: var(--blue); }
.locations-band__state { color: var(--ink-body); font-weight: 400; font-size: var(--step--1); }

/* ── Contact strip + footer ─────────────────────────────────────────────── */
.contact-strip__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-m);
}
.contact-strip__title { margin: 0; font-family: var(--font-display); font-size: var(--step-2); color: var(--white); }

.site-footer { background: var(--navy); color: var(--ink-inverse); }
.site-footer a:not(.btn):not(.pill) { color: var(--ink-inverse); text-decoration: none; }
/* :not(.btn) matters.  (0,1,1) beat  (0,1,0) on
   specificity, so buttons in the footer inherited the 86%-opacity inverse ink
   and failed contrast on their own blue ground — the rule was in the sheet and
   silently losing. Two rules must agree on specificity, not just order. */
.site-footer a:not(.btn):not(.pill):hover, .site-footer a:not(.btn):not(.pill):focus-visible { color: #fff; text-decoration: underline; }
.site-footer__inner {
  display: grid; gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-block: var(--space-2xl);
}
.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.site-footer__heading {
  font-size: var(--step-1); color: #fff; margin-bottom: var(--space-s);
}
.site-footer__col--brand img { width: 200px; margin-bottom: var(--space-s); }
.site-footer__phone a { font-family: var(--font-display); font-size: var(--step-2); color: #fff; }

.site-footer__legal { border-top: 1px solid rgb(255 255 255 / .14); }
.site-footer__legal-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-s) var(--space-m); padding-block: var(--space-s);
  font-size: var(--step--1);
}
.site-footer__legal p { margin: 0; }
/* Every item in this row centres its content in the same box, so the social
   links and the legal text share one optical centre line. */
.site-footer__legal-inner > p,
.site-footer__legal-links a,
.site-footer__social a { display: grid; place-items: center; min-height: 24px; }
.site-footer__legal-links, .site-footer__social {
  display: flex; gap: var(--space-m); margin: 0; padding: 0; list-style: none;
}

/* ── Imagery ────────────────────────────────────────────────────────────── */
/* MEASURED off live: the hero, the x-ray band, the ultrasound tile and the
   booking band are all CSS BACKGROUNDS on live, not <img>. An img-only crawl
   misses them entirely — hence the earlier pass showing 7 images when the page
   actually carries 20 assets. All are background-size: cover. */

.hero {
  position: relative;
  background-image: linear-gradient(rgb(26 34 52 / .72), rgb(26 34 52 / .72)),
                    url('/assets/images/hero-van.webp');
  background-size: cover;
  background-position: 50% 50%;
  color: var(--ink-inverse);
  padding-block: var(--space-3xl);
}
.hero__title, .hero .lede { color: #fff; }
.hero__locations a { color: var(--ink-inverse); }
.hero__locations a:hover, .hero__locations a:focus-visible { color: #fff; }
.hero__locations li + li { border-left-color: rgb(255 255 255 / .3); }

.easier {
  background-image: linear-gradient(rgb(250 250 250 / .93), rgb(250 250 250 / .93)),
                    url('/assets/images/band-doctor-xray.jpg');
  background-size: cover;
  background-position: 50% 30%;
}

.booking-cta {
  background-image: linear-gradient(rgb(245 245 245 / .92), rgb(245 245 245 / .92)),
                    url('/assets/images/band-dots.jpg');
  background-size: cover;
  background-position: 50% 50%;
}

.services__media, .audience-detail__media { border-radius: 2px; overflow: hidden; }
.services__inner {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: center;
}
/* Image first, copy second. Ordered rather than reordered in the markup so the
   reading order stays heading-then-body for anyone not seeing the layout, and
   the single-column stack below 768 keeps the copy first. */
@media (min-width: 768px) {
  .services__media { order: 1; }
  .services__copy  { order: 2; }
}
.adetail__media img { width: 100%; height: auto; margin-bottom: var(--space-s); }
.locations-band__map img { width: 100%; height: auto; }

/* ── Corrected to live's MEASURED layout (1440) ─────────────────────────── */
/* The first pass drifted into a redesign: left-aligned hero, navy utility bar,
   locations inside the hero, one CTA. Live is none of those. Values below are
   measured, not adjusted by eye. */

/* Utility bar: 58px tall, --blue ground, items spread across the full row. */
/* --blue-live (live's own rgb(49,126,194)) gives white text only 4.29:1 here,
   so the utility bar uses the corrected --blue at 4.99:1. Visually the same
   bar; the difference is measured, not perceived. */
.site-header__utility { background: var(--blue); }
.site-header__utility-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-s) var(--space-l); min-height: 58px;
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.site-header__util-link { color: #fff; text-decoration: none; }
.site-header__util-link:hover, .site-header__util-link:focus-visible { text-decoration: underline; }

/* Pills: BOOK NOW outlined 176x43, PORTAL LOGIN solid 182x39, radius 50px. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 43px; padding: 0 var(--space-l);
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  text-decoration: none; border-radius: 50px; border: 2px solid transparent;
}
/* FOURTH occurrence of the same trap in this file: a `.ancestor a` selector
   at (0,1,1) beats `.pill--solid` at (0,1,0) and repaints the label. Rather
   than adding another :not() each time a button lands in a new container, the
   component states its own colour at a specificity that wins. */
.pill.pill--solid { background: var(--blue); color: #fff; border-color: var(--blue); }
.pill--solid:hover, .pill--solid:focus-visible { background: var(--navy); border-color: var(--navy); color: #fff; }
.pill--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.pill--outline:hover, .pill--outline:focus-visible { background: var(--navy); color: #fff; }
.pill--outline-light { background: transparent; color: #fff; border-color: #fff; }
.pill--outline-light:hover, .pill--outline-light:focus-visible { background: #fff; color: var(--navy); }

.site-header__main-inner { gap: var(--space-l); }
.site-nav { display: flex; align-items: center; gap: var(--space-l); }
.site-header__ctas { display: flex; gap: var(--space-2xs); }

/* Hero: copy CENTRED over the photo, 800px band, no locations inside it. */
.hero { text-align: center; padding-block: var(--space-3xl) calc(var(--space-3xl) * 1.4); }
.hero__inner { max-width: 1100px; margin-inline: auto; }
.hero__title { max-width: none; margin-inline: auto; margin-bottom: var(--space-2xl); }
.hero__lede {
  max-width: 1080px; margin-inline: auto; margin-bottom: var(--space-xl);
  font-size: var(--step-0); color: #fff;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: center; margin: 0; }

/* Locations strip: its own 75px navy bar BELOW the hero. */
.locations-strip { background: var(--navy); }
/* MEASURED: `margin: 0` here was wiping out u-container's `margin-inline: auto`,
   so the 1200px box sat hard LEFT in a 1440 viewport (125px gap left, 84px
   right) while its contents were dutifully centred INSIDE that off-centre box.
   justify-content was never the problem. Reset only the block margin. */
.locations-strip__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2xs) var(--space-m); min-height: 75px;
  margin-block: 0; padding-block: var(--space-2xs); list-style: none;
  /* The UA's default `padding-inline-start: 40px` on <ul> survived because the
     rule only reset padding-BLOCK — so the row sat 40px right of centre
     (125px gap left, 84px right). justify-content and the dividers were both
     fine; the list's own padding was the whole fault. */
  padding-inline: 0;
}
.locations-strip__list li { position: relative; padding-inline: var(--space-s); }
/* MEASURED at 1440: item 2 ends at x=342 and item 3 starts at x=407, so the
   true midpoint is 374 — but `right: 0` put the rule at 342, a 32px leftward
   bias. The row also carries a column-gap, so the space between two items is
   (gap + both paddings); half of that is where the rule belongs. */
.locations-strip__list li:not(:last-child)::after {
  content: ''; position: absolute; top: 50%; translate: 0 -50%;
  right: 0;
  width: 1px; height: 18px; background: rgb(255 255 255 / .28);
}
.locations-strip__list a {
  color: var(--ink-inverse); text-decoration: none;
  font-family: var(--font-display); font-size: var(--step-0);
}
.locations-strip__list a:hover, .locations-strip__list a:focus-visible { color: #fff; text-decoration: underline; }

/* Audience cards: live centres them. */
.audience { text-align: center; }
.audience__num { margin-inline: auto; }

@media (max-width: 1024px) {
  /* `display: none` must come AFTER (and match) the desktop `.site-nav
     { display: flex }`, or the panel stays open and the header renders ~679px
     tall on a phone. */
  .site-nav { display: none; flex-direction: column; align-items: stretch; width: 100%; }
  .site-nav.is-open { display: flex; }
  .site-header__ctas { padding-block: var(--space-s); }
  .locations-strip__list { justify-content: center; }
}

/* Header row was cramping at 1440: the pills wrapped to two lines and
   "How To Order" broke mid-label. Measured fix — stop the labels wrapping and
   let the nav gap shrink before anything else does. */
.site-nav__link { white-space: nowrap; }
.pill { white-space: nowrap; }
.site-nav__list { gap: clamp(10px, 1.2vw, 24px); }
.site-header__ctas { flex-wrap: nowrap; }
.site-header__brand img { width: clamp(150px, 14vw, 190px); }
@media (min-width: 1025px) and (max-width: 1240px) {
  .pill { padding-inline: var(--space-s); font-size: 12px; }
}

/* ══ Band components, built from the live band screenshots ═══════════════ */

/* Hero: letterbox gradient so the vehicles at the midpoint stay visible
   between the title and the lede. Dark top and bottom, clear through the
   middle. Desktop/tablet only — on mobile the photo is too short to letterbox
   and the copy needs a solid ground to stay legible. */
.hero {
  background-image:
    linear-gradient(to bottom,
      rgb(26 34 52 / .82) 0%,
      rgb(26 34 52 / .70) 22%,
      rgb(26 34 52 / .20) 44%,
      rgb(26 34 52 / .20) 58%,
      rgb(26 34 52 / .74) 80%,
      rgb(26 34 52 / .86) 100%),
    url('/assets/images/hero-van.webp');
  background-size: cover;
  background-position: 50% 50%;
  min-height: 800px;
  display: grid;
  /* Content sits BELOW centre so the title and lede clear the top of the
     frame. The photo crops a little top and bottom as a result — accepted,
     because the vehicles sit at the midpoint and stay visible either way. */
  align-items: end;
  /* MEASURED: with a 108px bottom pad the content ended at 606 of 800px, i.e.
     194px of space BELOW it and 144 above — barely moved. Drop the pad so
     `end` actually lands the block low in the frame. */
  padding-bottom: var(--space-2xl);
}
.hero__inner { width: min(100% - var(--gutter) * 2, 1100px); }
/* The gap that opens the middle of the photo. */
.hero__title { margin-bottom: clamp(150px, 24vh, 320px); }
.hero__lede { font-size: var(--step-1); line-height: var(--leading-m); max-width: 80ch; margin-inline: auto; }
@media (max-width: 767px) {
  .hero { min-height: 0; background-image:
    linear-gradient(rgb(26 34 52 / .80), rgb(26 34 52 / .80)), url('/assets/images/hero-van.webp'); }
  .hero__title { margin-bottom: var(--space-xl); }
}

/* Locations strip: centred, not spread. */
.locations-strip__list { justify-content: center; }

/* Audience cards: icon above the number, both centred. */
/* The icons are black line art loaded via <img>, so `fill` cannot reach them.
   brightness(0) normalises to pure black, then the sepia/saturate/hue chain
   lands on the brand navy rgb(26,34,52). */
.audience__icon {
  width: 80px; height: 80px; margin: 0 auto var(--space-s);
  filter: brightness(0) saturate(100%) invert(13%) sepia(24%) saturate(1200%) hue-rotate(184deg) brightness(95%) contrast(92%);
}
.audience__num {
  width: auto; height: auto; background: none; color: var(--ink-body);
  font-size: var(--step-0); border-radius: 0; margin-bottom: var(--space-2xs);
  display: block; border-top: 1px solid var(--line); padding-top: var(--space-s);
  max-width: 200px; margin-inline: auto;
}

/* Partners: two rows of logos, greyscale until hover. */
.partners { text-align: center; background: var(--white); }
.partners__lede { max-width: 70ch; margin-inline: auto; }
.partners__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-2xl); margin: var(--space-xl) 0 0; padding: 0; list-style: none;
}
/* MEASURED: capping on WIDTH alone made the tall logos dominate — WentWest
   rendered 200x200 and PHN 200x127 against CAREPACT at 200x81. Cap the HEIGHT
   so every mark carries similar optical weight regardless of aspect ratio. */
.partners__row img {
  max-width: 200px; max-height: 92px; width: auto; height: auto; object-fit: contain;
}
/* MEASURED: a flat 74px height cap suits wide marks but shrinks square and
   text-dense ones. WentWest is 1:1 and Queensland Health carries fine print,
   so both get a larger allowance; the wide marks stay capped by width. */
.partners__row img[src*="wentwest"]   { max-height: 112px; }
.partners__row img[src*="qld-health"] { max-height: 124px; max-width: 270px; }
.partners__row img[src*="phn-country"]{ max-height: 78px; }
.partners__row--two img { max-width: 300px; max-height: 56px; }

/* "Easier for patients": photo band with a white card overlapping from below. */
.easier { position: relative; padding-bottom: var(--space-3xl); }
.easier__photo {
  height: 450px; background-size: cover; background-position: 50% 30%;
  background-image: url('/assets/images/band-doctor-xray.jpg');
}
.easier__card {
  background: var(--white); text-align: center;
  width: min(100%, 1200px); margin-inline: auto;
  margin-top: -100px; position: relative; z-index: 2;
  padding: var(--space-2xl) clamp(var(--space-l), 5vw, var(--space-3xl));
}
.easier__title { font-size: var(--step-5); max-width: 22ch; margin-inline: auto; }
.easier__card p { max-width: 78ch; margin-inline: auto; }

/* Stats: icon above the figure. */
.stat__icon { width: 50px; height: 50px; margin: 0 auto var(--space-2xs); filter: brightness(0) invert(1); }

/* Services: copy left, credited photo right. */
.services__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.services__media { margin: 0; }
.services__media img { width: 100%; height: auto; border-radius: 2px; }
.services__credit {
  margin-top: var(--space-2xs); font-size: var(--step--1);
  color: var(--ink-body); font-style: italic;
}

/* Tabs. */
.tabs__list {
  display: flex; flex-wrap: wrap; justify-content: space-around;
  gap: var(--space-s); margin-bottom: var(--space-xl);
}
.tabs__tab {
  background: none; border: 0; cursor: pointer; padding: var(--space-2xs) 0;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--ink);
  border-bottom: 2px solid transparent;
}
.tabs__tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }
.tabs__tab:hover { color: var(--blue); }
.tabs__panel { display: none; }
.tabs__panel.is-active { display: grid; }
.tabs__panel {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-2xl); align-items: center;
  background: var(--pale); padding: var(--space-2xl);
}
.tabs__title { font-size: var(--step-4); }
.tabs__media img { width: 100%; height: auto; }

/* Reviews: bordered rounded cards, avatar + name + stars, as a carousel. */
.reviews__title { text-align: center; }
.reviews__viewport { position: relative; overflow: hidden; }
.reviews__track {
  display: flex; gap: var(--space-l); margin: 0; padding: 0; list-style: none;
  scroll-snap-type: x mandatory; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
}
.reviews__track::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 100%; scroll-snap-align: start;
  /* Square corners for consistency with every other surface on the page —
     the bands, the tab panel and the offset card are all square. */
  border: 1px solid var(--line);
  padding: var(--space-xl); background: var(--white);
}
.review__head {
  display: flex; align-items: center; gap: var(--space-s);
  margin-bottom: var(--space-m);
}
/* The photo is 1920x1280 (3:2) and was being squashed into a 52px circle.
   object-fit: cover crops to the square instead of distorting. */
.review__avatar { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; }
.review__by { margin: 0; font-weight: 700; font-size: var(--step-0); color: var(--ink); }
.review__stars { margin: 0 0 0 auto; color: #f5a623; font-size: var(--step-2); letter-spacing: 2px; white-space: nowrap; }
.review blockquote { margin: 0; padding: 0; border: 0; }
.reviews__controls { display: flex; gap: var(--space-2xs); justify-content: center; margin-top: var(--space-l); }
.reviews__btn {
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--white);
  font-size: var(--step-2); line-height: 1; color: var(--ink);
}
.reviews__btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Make a Booking: centred. */
.booking-cta { text-align: center; }
.booking-cta__inner { max-width: 66ch; margin-inline: auto; }
.booking-cta .lede { margin-inline: auto; }

/* Our Locations: full-height 50/50, map left. White on both halves
   (owner's call 2026-09-14 — live uses grey). */
.locations-split { display: grid; grid-template-columns: 1fr 1fr; }
/* SAMPLED from the map PNG itself: every edge pixel is rgb(211,212,212), so
   the column takes that exact value and the image blends into it with no
   visible seam — rather than sitting as a grey rectangle on white. */
.locations-split__media {
  background: rgb(211, 212, 212); display: grid; place-items: center;
  padding: var(--space-2xl);
}
.locations-split__media img { width: 100%; max-width: 720px; height: auto; }
.locations-split__copy { background: var(--white); display: grid; align-items: center; padding: var(--space-3xl) var(--gutter); }
.locations-split__inner { max-width: 520px; }
.locations-split__list {
  margin: var(--space-m) 0; padding-left: var(--space-m);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  /* grid-auto-flow: row fills LEFT-RIGHT then down, so the list reads in data
     order. The default column-first fill put item 5 (the long "Brisbane, Gold
     Coast and Sunshine Coast") at the TOP of column two, which is why
     reordering the data appeared to do nothing. */
  grid-auto-flow: row;
  gap: var(--space-3xs) var(--space-m);
  align-items: start;
}
.locations-split__list li { margin-bottom: 0; }
@media (max-width: 480px) { .locations-split__list { grid-template-columns: 1fr; } }
.locations-split__list a { color: var(--blue); text-decoration: none; }
.locations-split__list a:hover, .locations-split__list a:focus-visible { text-decoration: underline; }
@media (max-width: 767px) { .locations-split { grid-template-columns: 1fr; } }
.band--pale { background: var(--pale); }

/* ── Full-bleed bands: stats + locations strip ──────────────────────────── */
/* Both rows must reach the viewport edges, not stop at the 1200px container,
   so their dividers run the full width of the band on wide screens. The band's
   own vertical padding moves onto the cells so a cell's top/bottom:0 IS the
   full height of the section. */
.stats.band--tight { padding-block: 0; }
.stats__grid {
  width: 100%; max-width: none; margin-inline: 0;
  padding-inline: var(--gutter);
}
.stats .stat { padding-block: var(--space-xl); }

.locations-strip__list {
  width: 100%; max-width: none; margin-inline: 0;
  padding-inline: var(--gutter);
}
/* Distribute across the full width now the row is full-bleed, so the dividers
   sit at even intervals rather than bunching in the middle. */
/* Equal-width grid cells rather than space-evenly. With space-evenly the gap
   between items varies with the viewport, so any fixed divider offset is only
   correct at one width — measured: 0px off at 1440 but -27 at 1920 and +17 at
   900. As equal cells with centred labels, the cell boundary IS the midpoint
   at every width, and the rule needs no magic number. */
@media (min-width: 768px) {
  .locations-strip__list {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 0;
  }
  .locations-strip__list li {
    display: grid; place-items: center; padding-inline: var(--space-2xs);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* 8 equal columns wrapped 1+7 at 900px, which reads as a mistake. Four
     columns break cleanly as 4+4. */
  .locations-strip { padding-block: var(--space-2xs); }
  .locations-strip__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* ── Footer, measured against live ──────────────────────────────────────── */
/* Live: contact strip has its title LEFT and a NAVY pill RIGHT (not centred,
   not an outlined pill). The footer proper is four link columns — no logo
   block, no phone, no lede — and the legal row carries quick links left,
   copyright right, and a second line for Privacy/Governance. */
.contact-strip { background: var(--blue); padding-block: var(--space-xl); }
.contact-strip__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-m);
}
.contact-strip__title {
  margin: 0; font-family: var(--font-display); font-size: var(--step-4);
  font-weight: 400; color: #fff;
}
.pill.pill--ghost { background: var(--white); color: var(--blue); border-color: var(--blue); }
.pill--ghost:hover, .pill--ghost:focus-visible { background: var(--blue); color: #fff; }
.pill--navy { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill--navy:hover, .pill--navy:focus-visible { background: #fff; color: var(--navy); }

/* Four columns, matching live's count: Our Services | Areas We Service |
   Learn | Follow Us. Explicit rather than auto-fit — auto-fit stranded the
   last column on its own row, since the 2xl gaps eat more width than the
   track min accounts for. Steps 4 -> 2 -> 1. */
.site-footer__inner {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: var(--space-3xl);
}
@media (max-width: 900px) {
  .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
}
@media (max-width: 520px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}
.site-footer__heading {
  font-size: var(--step-1); color: #fff; margin-bottom: var(--space-m);
  font-weight: 400;
}
.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-xs); }
.site-footer__col a { font-size: var(--step-0); }

.site-footer__social { display: flex !important; gap: var(--space-s); margin-bottom: var(--space-l) !important; }
.site-footer__social a { color: rgb(255 255 255 / .55); display: grid; place-items: center; min-width: 24px; min-height: 24px; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { color: #fff; }
.site-header__util-phones { display: inline-flex; gap: .35em; align-items: baseline; }
.site-footer__cta { margin-top: var(--space-s); }
/* The light wordmark sits in the space under the Follow Us column. Its own
   rule for width, because .site-footer a is (0,1,1) and would otherwise
   repaint the link — the trap this file has hit five times already. */
.site-footer__logo { display: block; margin-top: var(--space-l); max-width: 190px; }
.site-footer__logo img { width: 100%; height: auto; display: block; }

.site-footer__legal-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-2xs) var(--space-l);
  padding-block: var(--space-m);
}
.site-footer__quick, .site-footer__legal-links {
  display: flex; flex-wrap: wrap; gap: var(--space-l); margin: 0; padding: 0; list-style: none;
}
.site-footer__quick a, .site-footer__legal-links a, .site-footer__copy { font-size: var(--step--1); }
.site-footer__copy { margin-block: 0; color: var(--ink-inverse); }
/* Row 1: quick links LEFT, Privacy | Governance RIGHT — the two are siblings
   in a space-between row, so they fall to opposite ends on their own.
   Row 2: the copyright alone, centred. flex-basis:100% makes it a full-width
   line and text-align does the centring (margin:auto would only centre the
   box, which is already full width). */
.site-footer__legal-links { gap: var(--space-s); align-items: center; }
/* Own band so the rule runs the full viewport width, like the one on
   .site-footer__legal above it. A border inside .site-footer__legal-inner
   stops at the 1200px container cap. padding-block (not margin) so the space
   above and below the links row is symmetric. */
.site-footer__copyright {
  border-top: 1px solid rgb(255 255 255 / .14);
  padding-block: var(--space-m);
}
p.site-footer__copy { text-align: center; margin-block: 0; margin-inline: auto; }
@media (max-width: 767px) {
  /* Matches .site-footer__legal-inner's own column breakpoint: once the row
     stacks left-aligned, a centred copyright would be the odd one out. */
  p.site-footer__copy { text-align: left; }
}
.site-footer__legal-links a { color: var(--blue); }
.site-footer__legal-links li { display: flex; align-items: center; gap: var(--space-s); }
.site-footer__legal-links li + li::before { content: '|'; color: rgb(255 255 255 / .3); }
@media (max-width: 767px) { .site-footer__legal-inner { flex-direction: column; align-items: flex-start; } }

/* ── Sticky header ──────────────────────────────────────────────────────── */
/* Only the main row sticks; the utility bar scrolls away, so the sticky
   element is 134px rather than 192px and keeps more of the page visible.
   In the shared partial, so all 58 pages inherit it. */
/* The <header> sticks, not the inner row: a sticky element only travels
   within its PARENT's box, and .site-header is just 193px tall, so sticking
   the child let the whole thing scroll away after 193px. The utility bar
   therefore stays on screen too — a 193px sticky header rather than 134px. */
/* `display: contents` dissolves the <header> box so the sticky row's parent is
   <body> and it can travel the full page. Sticking the <header> itself worked
   but dragged the blue utility bar along with it; sticking the row inside a
   193px-tall header meant it scrolled away after 193px. This gives a 134px
   sticky white row with the blue bar scrolling away above it. */
.site-header { display: contents; }
.site-header__main {
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow .18s ease;
}
/* Shadow only once it has left the top, so the resting header stays flat. */
.site-header__main.is-stuck { box-shadow: 0 2px 14px rgb(26 34 52 / .14); }

/* An in-page anchor must not land under the sticky row. */
:target { scroll-margin-top: 150px; }

@media (max-width: 1024px) {
  /* The mobile panel opens inside the row, so cap it to the viewport and let
     it scroll rather than pushing the page down. */
  .site-header__main { max-height: 100vh; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .site-header__main { transition: none; } }


/* ── Condensed sticky header ────────────────────────────────────────────── */
/* MEASURED at rest: 134px row (min-height, not padding — padding is 16/16),
   logo 190x76. Condensed drops to 96px with a 150px logo: one clear step
   down, still comfortably above the 44px touch-target floor for the pills.
   Everything that changes size is transitioned so the row eases rather than
   snapping when .is-stuck toggles. */
.site-header__main-inner {
  transition: min-height .22s ease, padding-block .22s ease;
}
.site-header__brand img {
  transition: width .22s ease;
}
.site-header__main.is-stuck .site-header__main-inner {
  min-height: 96px;
  padding-block: var(--space-2xs);
}
.site-header__main.is-stuck .site-header__brand img { width: 150px; }

/* The utility bar scrolls away rather than collapsing, so nothing to animate
   there — but the row must not jump when it leaves. */
@media (prefers-reduced-motion: reduce) {
  .site-header__main-inner,
  .site-header__brand img { transition: none; }
}

@media (max-width: 1024px) {
  /* The row is already compact on mobile and the open panel sets its own
     height, so no condensed step there. */
  .site-header__main.is-stuck .site-header__main-inner { min-height: 0; }
}


/* ── Pill sizes ─────────────────────────────────────────────────────────── */
/* The default pill is 43px, measured off live's header. That is right for nav
   and for in-band links, but it made the hero's two primary CTAs read at the
   same weight as a header item. `--lg` is the step up for a hero or a band's
   main action; the 43px default stays everywhere else. */
.pill--lg {
  min-height: 56px;
  padding-inline: var(--space-2xl);
  font-size: var(--step-0);
}
@media (max-width: 480px) {
  /* Full width when they would otherwise wrap awkwardly on a phone. */
  .hero__actions .pill--lg { flex: 1 1 100%; }
}

/* ── Location pages ─────────────────────────────────────────────────────── */
/* MEASURED off live: full-bleed city photo hero with a dark scrim, copy LEFT
   (not centred like the homepage), then a navy band of three bordered icon
   cards, the 50/50 locations split, and a per-city contact strip. */
.loc-hero {
  background-image:
    linear-gradient(to right, rgb(26 34 52 / .86) 0%, rgb(26 34 52 / .74) 46%, rgb(26 34 52 / .44) 100%),
    var(--loc-photo);
  background-size: cover;
  background-position: 50% 50%;
  color: var(--ink-inverse);
  padding-block: var(--space-3xl);
  min-height: 640px;
  display: grid;
  align-items: center;
}
.loc-hero__inner { max-width: 760px; }
.loc-hero__title { color: #fff; font-size: var(--step-6); margin-bottom: var(--space-l); }
/* Same treatment as the homepage lede — --step-1 with the looser leading.
   At the default body size these read as small print under a 68px title. */
.loc-hero__body {
  color: var(--ink-inverse); margin-bottom: var(--space-m);
  font-size: var(--step-1); line-height: var(--leading-m);
}
.loc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: var(--space-l) 0 0; }
@media (max-width: 767px) {
  .loc-hero { min-height: 0; background-image:
    linear-gradient(rgb(26 34 52 / .84), rgb(26 34 52 / .84)), var(--loc-photo); }
  .loc-hero__actions .pill { flex: 1 1 100%; }
}

.why__title { text-align: center; margin-bottom: var(--space-2xl); }
.why__grid {
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.why-card {
  border: 1px solid rgb(255 255 255 / .18);
  padding: var(--space-xl); text-align: center;
}
.why-card__icon {
  width: 60px; height: 60px; margin: 0 auto var(--space-m);
  /* white on the navy ground */
  filter: brightness(0) invert(1);
}
.why-card__title { color: #fff; font-size: var(--step-2); margin-bottom: var(--space-s); }
.why-card p { color: var(--ink-inverse); font-size: var(--step-0); margin: 0; }

/* Per-city contact strip: same shape as the footer's, title left, pill right. */
.contact-strip--team .contact-strip__title { font-size: var(--step-4); }

/* ── Locations hub ──────────────────────────────────────────────────────── */
.hub-intro { text-align: center; }
.hub-intro__title { color: #fff; font-size: var(--step-6); margin-bottom: var(--space-m); }
.hub-intro__lede {
  color: var(--ink-inverse); font-size: var(--step-1);
  line-height: var(--leading-m); max-width: 70ch; margin-inline: auto;
}
.loc-hub__grid {
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.loc-card__link {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: var(--white);
  transition: border-color .15s ease;
}
.loc-card__link:hover, .loc-card__link:focus-visible { border-color: var(--blue); }
.loc-card__photo { width: 100%; height: 180px; object-fit: cover; }
.loc-card__body {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-2xs); padding: var(--space-m);
}
.loc-card__name { font-family: var(--font-display); font-size: var(--step-2); color: var(--ink); }
.loc-card__state { font-size: var(--step--1); color: var(--ink-body); letter-spacing: .06em; }

/* ── Service pages (mobile-xray, mobile-ultrasound) ─────────────────────── */
/* MEASURED off live: photo hero with copy LEFT and a white examination card
   RIGHT, then the shared stats band, then a centred CTA band. */
.svc-hero {
  background-image:
    linear-gradient(to right, rgb(26 34 52 / .88) 0%, rgb(26 34 52 / .72) 55%, rgb(26 34 52 / .5) 100%),
    var(--svc-photo);
  background-size: cover; background-position: 50% 50%;
  color: var(--ink-inverse); padding-block: var(--space-3xl);
  min-height: 600px; display: grid; align-items: center;
}
.svc-hero__inner {
  display: grid; gap: var(--space-2xl); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.svc-hero__title { color: #fff; font-size: var(--step-6); margin-bottom: var(--space-l); }
.svc-hero__lede {
  color: var(--ink-inverse); font-size: var(--step-1);
  line-height: var(--leading-m); margin-bottom: var(--space-l);
}
.svc-card {
  background: var(--white); padding: var(--space-2xl);
  color: var(--ink-body); text-align: center;
}
.svc-card__title { font-size: var(--step-2); color: var(--ink); margin-bottom: var(--space-m); }
.svc-card__list {
  margin: 0 auto; padding-left: var(--space-m); text-align: left;
  display: inline-block; list-style: disc;
}
.svc-card__list li { margin-bottom: var(--space-2xs); }

.svc-cta { text-align: center; }
.svc-cta__inner { max-width: 68ch; margin-inline: auto; }
.svc-cta__eyebrow {
  font-family: var(--font-display); font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
  margin-bottom: var(--space-s);
}
.svc-cta .lede { margin-inline: auto; margin-bottom: var(--space-l); }
@media (max-width: 767px) { .svc-hero { min-height: 0; } }

/* ── Generic page hero (How To Order and similar) ───────────────────────── */
.page-hero {
  background-image: linear-gradient(to right, rgb(26 34 52 / .78), rgb(26 34 52 / .38)), var(--page-photo);
  background-size: cover; background-position: 50% 40%;
  min-height: 520px; display: grid; align-items: center;
  padding-block: var(--space-3xl); color: var(--ink-inverse);
}
.page-hero__title { color: #fff; font-size: var(--step-6); margin-bottom: var(--space-l); }
/* Batch 2 additions to the shared hero. /how relies on the rules above, so
   these only add; nothing above is redefined. */
.page-hero--short { min-height: 0; padding-block: var(--space-2xl); }
.page-hero--short .page-hero__title { margin-bottom: 0; }
.page-hero__inner { max-width: 70ch; }
.page-hero__lede {
  font-family: var(--font-display); font-size: var(--step-2);
  color: #fff; margin-block: 0 var(--space-m);
}
.page-hero p { color: rgb(255 255 255 / .92); }
.page-hero__actions { margin-top: var(--space-l); margin-bottom: 0; }

/* ── Alternating image / copy split ─────────────────────────────────────── */
.split__inner {
  display: grid; gap: var(--space-2xl); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.split__media img { width: 100%; height: auto; }
@media (min-width: 768px) {
  .split__inner--reverse .split__media { order: 2; }
  .split__inner--reverse .split__copy  { order: 1; }
}
.split__list { margin: var(--space-s) 0 0; padding-left: var(--space-m); }
.split__list li { margin-bottom: var(--space-3xs); }

/* ── Numbered step cards over a photo ───────────────────────────────────── */
.steps-hero {
  background-image: linear-gradient(rgb(26 34 52 / .62), rgb(26 34 52 / .62)), var(--steps-photo);
  background-size: cover; background-position: 50% 50%;
  padding-block: var(--space-3xl); text-align: center;
}
.steps-hero__eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #7fb3e0; font-size: var(--step-0);
  margin-bottom: var(--space-2xs);
}
.steps-hero__title { color: #fff; font-size: var(--step-5); margin-bottom: var(--space-2xl); }
/* The steps grid is CENTRED and splits an odd count rather than stranding a
   lone card on its own row: 5 steps read 3-over-2, 6 read 3-over-3. auto-fit
   was doing neither — it packed 4 up and orphaned the 5th. Explicit counts,
   because the balance point depends on how many steps a page actually has. */
.steps-grid {
  display: grid; gap: var(--space-l);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
/* 5 steps: last two centre under the three above. Done with a 6-track grid —
   each card spans 2 — so row 2 can start on a half-step. A margin-based nudge
   was measured at 189px/411px off-centre because the margin shrinks the card
   as well as moving it. */
.steps-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.steps-grid--5 > * { grid-column: span 2; }
.steps-grid--5 > :nth-child(4) { grid-column: 2 / span 2; }
.steps-grid--5 > :nth-child(5) { grid-column: 4 / span 2; }

@media (max-width: 900px) {
  .steps-grid, .steps-grid--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps-grid > *, .steps-grid--5 > * { grid-column: span 2; }
  /* odd count on a 2-wide row: the last card centres across both tracks */
  .steps-grid--5 > :nth-child(4) { grid-column: 3 / span 2; }
  .steps-grid--5 > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 560px) {
  .steps-grid, .steps-grid--5 { grid-template-columns: 1fr; }
  .steps-grid > *, .steps-grid--5 > *,
  .steps-grid--5 > :nth-child(4), .steps-grid--5 > :nth-child(5) { grid-column: auto; }
}

.step-card {
  background: var(--white); padding: var(--space-xl); text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
/* The number is drawn ONCE, by the card. Live's icons are pictograms and
   carry no digit, so nothing is repeated. */
.step-card__num {
  display: flex; align-items: center; justify-content: center;
  width: 2.25em; height: 2.25em; border-radius: 50%;
  background: var(--blue); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-0);
  margin-bottom: var(--space-s);
}
.step-card__icon { display: block; color: var(--blue); margin-bottom: var(--space-s); }
.step-card__icon svg { width: 56px; height: 56px; display: block; }
.step-card__text { font-size: var(--step-0); margin: 0; }

/* ── Questions band ─────────────────────────────────────────────────────── */
.questions__inner {
  display: grid; gap: var(--space-2xl); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.questions__links { margin: var(--space-m) 0 0; padding-left: var(--space-m); }
.questions__links li { margin-bottom: var(--space-3xs); }
.questions__media img { width: 100%; height: auto; }

/* ── Batch 2: about / doctors / careers / groups / contact ──────────────── */

/* Long-form copy. A measure cap keeps lines readable inside the 1200 cap. */
.prose { max-width: 78ch; }
.prose--narrow { max-width: 68ch; }
.prose > * + * { margin-top: var(--space-m); }
.prose__heading { font-size: var(--step-3); margin-top: var(--space-2xl); margin-bottom: 0; }
.prose ul { padding-inline-start: 1.25em; display: grid; gap: var(--space-2xs); }

.know-strip { background: var(--mist); padding-block: var(--space-xl); }
.know-strip__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-m);
}
.know-strip__text {
  margin: 0; font-family: var(--font-display); font-size: var(--step-1);
  font-weight: 700; color: var(--navy); max-width: 60ch;
}

.directors__eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); font-size: var(--step--1);
  margin-bottom: var(--space-2xs);
}
.directors__list { display: grid; gap: var(--space-2xl); margin-top: var(--space-xl); }
.director {
  display: grid; grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-xl); align-items: start;
}
.director__photo { width: 100%; height: auto; display: block; }
.director__copy > * + * { margin-top: var(--space-s); }
.director__name { font-size: var(--step-2); margin: 0; }
.director__role {
  margin: 0; font-family: var(--font-display); font-weight: 700;
  color: var(--blue); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 760px) {
  .director { grid-template-columns: 1fr; }
  .director__photo { max-width: 240px; }
}

/* Doctors/Referrers. Live is ONE photo ground with a navy scrim and seven
   identical cards in a 2-column grid; the seventh sits alone and centred on
   the last row. The page has no separate bands. */
.ref-page {
  background-image: linear-gradient(rgb(26 34 52 / .58), rgb(26 34 52 / .58)), var(--page-photo);
  background-size: cover; background-position: 50% 40%; background-attachment: scroll;
  padding-block: var(--space-3xl);
}
.ref-page__inner { text-align: center; }
.ref-page__title { color: #fff; font-size: var(--step-6); margin: 0 0 var(--space-l); }
.ref-page__lede {
  color: rgb(255 255 255 / .94); max-width: 68ch;
  margin: 0 auto var(--space-2xl);
  /* Same size as the homepage hero lede, which is --step-1. */
  font-size: var(--step-1); line-height: var(--leading-m);
}
.ref-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-xl);
  /* 4 half-tracks so the lone 7th card can start on a half-step and centre */
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ref-grid > * { grid-column: span 2; }
.ref-grid > :last-child:nth-child(odd) { grid-column: 2 / span 2; }
.ref-card {
  background: var(--white); padding: var(--space-xl);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-xs);
}
.ref-card__icon { color: var(--blue); display: block; }
.ref-card__icon svg { width: 54px; height: 54px; display: block; }
.ref-card__title { font-size: var(--step-0); margin: 0; color: var(--ink); }
.ref-card__sub { margin: 0; font-size: var(--step-0); }
.ref-card__cta { margin-top: auto; }
@media (max-width: 700px) {
  .ref-grid { grid-template-columns: 1fr; }
  .ref-grid > *, .ref-grid > :last-child:nth-child(odd) { grid-column: auto; }
}

/* Groups. Live: photo hero, centred title with a short blue rule beneath,
   then a white card straddling the hero's bottom edge over a blue band,
   holding the programme names as two columns of blue bulleted items. */
.grp-hero {
  background-image: linear-gradient(rgb(26 34 52 / .34), rgb(26 34 52 / .34)), var(--page-photo);
  background-size: cover; background-position: 50% 35%;
  padding-block: var(--space-3xl) calc(var(--space-3xl) * 1.45);
  text-align: center;
}
.grp-hero__title { color: #fff; font-size: var(--step-5); margin: 0 0 var(--space-s); }
.grp-hero__rule { display: inline-block; width: 46px; height: 3px; background: var(--blue-live); }
.grp-band {
  background: var(--blue);
  /* Deliberately SMALLER than the card's -2.2 lift: the difference is the
     visible overlap onto the photo. Matching the lift cancels it exactly,
     which is what put the card back on the boundary. */
  padding-top: var(--space-m);
  padding-bottom: var(--space-3xl);
}
/* The card is an in-flow sibling pulled up by a negative margin, never
   absolutely positioned inside the hero. */
.grp-card {
  list-style: none; margin: 0; padding: var(--space-2xl) var(--space-3xl);
  position: relative; top: calc(var(--space-3xl) * -1.4);
  background: var(--white);
  display: grid; gap: var(--space-m) var(--space-2xl);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column; grid-template-rows: repeat(3, auto);
}
.grp-card__item {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-2);
  color: var(--blue); position: relative; padding-inline-start: 1.2em;
}
.grp-card__item::before {
  content: '•'; position: absolute; left: 0; color: var(--ink-muted, #6b7280);
  font-size: .8em; line-height: 1.6;
}
@media (max-width: 620px) {
  .grp-card {
    grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none;
    padding: var(--space-xl); top: calc(var(--space-3xl) * -0.9);
  }
}

/* Named split-band, distinct from the existing .split used elsewhere. */
.split-band__inner {
  display: grid; gap: var(--space-2xl); align-items: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.split-band__media img { width: 100%; height: auto; display: block; }
.split-band__copy > * + * { margin-top: var(--space-m); }
.split-band--reverse .split-band__media { order: 2; }
@media (max-width: 800px) {
  .split-band__inner { grid-template-columns: 1fr; }
  .split-band--reverse .split-band__media { order: 0; }
}

/* 5 cards: 3 over 2, with the second row CENTRED. Six half-tracks, each
   card spanning two, so row 2 starts on a half-step at full card width — a
   margin nudge would shift the cards but also shrink them. */
.benefits-grid {
  display: grid; gap: var(--space-l); margin-top: var(--space-xl);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.benefits-grid > * { grid-column: span 2; }
.benefits-grid > :nth-child(4) { grid-column: 2 / span 2; }
.benefits-grid > :nth-child(5) { grid-column: 4 / span 2; }
.benefit-card { background: var(--white); padding: var(--space-xl); }
.benefit-card__title { font-size: var(--step-1); margin: 0 0 var(--space-xs); color: var(--blue); }
@media (max-width: 900px) {
  .benefits-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .benefits-grid > :nth-child(4) { grid-column: span 2; }
  /* 5 cards on a 2-wide grid: rows of 2, 2, then the last one centred. */
  .benefits-grid > :nth-child(5) { grid-column: 2 / span 2; }
}
@media (max-width: 560px) {
  .benefits-grid { grid-template-columns: 1fr; }
  .benefits-grid > *, .benefits-grid > :nth-child(4), .benefits-grid > :nth-child(5) { grid-column: auto; }
}

.testimonials__grid {
  display: grid; gap: var(--space-xl); margin-top: var(--space-xl);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.testimonial { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.testimonial__photo { width: 160px; height: 160px; object-fit: cover; border-radius: 50%; margin-bottom: var(--space-m); }
.testimonial__quote { margin: 0; }
.testimonial__quote p { margin: 0; }
.testimonial__name {
  margin-top: var(--space-s); font-family: var(--font-display); font-weight: 700;
  color: var(--blue); font-size: var(--step--1);
  text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 860px) { .testimonials__grid { grid-template-columns: 1fr; } .testimonial { max-width: 60ch; margin-inline: auto; } }

.contact-grid {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
}
.contact-info > * + * { margin-top: var(--space-m); }
.contact-details { margin: 0; display: grid; gap: var(--space-2xs); }
.contact-details dt { font-family: var(--font-display); font-weight: 700; color: var(--navy); margin-top: var(--space-xs); }
.contact-details dd { margin: 0; }
.contact-form { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.field { display: grid; gap: var(--space-3xs); margin: 0; }
.field label { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); color: var(--navy); }
.field input, .field select, .field textarea {
  font: inherit; font-size: var(--step-0); color: var(--ink);
  padding: var(--space-2xs) var(--space-s);
  border: 2px solid var(--ash); border-radius: 4px;
  background: var(--ash);   /* palette off-white; --mist is only 5 points off #fff */
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { background: var(--white); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue);
}
.field textarea { resize: vertical; }
/* Honeypot — off-screen rather than display:none, which some bots detect. */
.field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__actions { margin: 0; }
.contact-form__status { margin: 0; font-size: var(--step--1); }
.contact-form__status.is-ok { color: var(--blue); font-weight: 700; }
.contact-form__status.is-error { color: #b3261e; font-weight: 700; }
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }

/* Contact hero. MEASURED on live: 607px tall. Ours was 219px because
   .page-hero--short zeroes min-height — the earlier background-position
   change moved the image inside the box without making the box any bigger.
   Scoped, because .page-hero is shared with /how. */
.page-hero--contact { min-height: 607px; background-position: 50% 42%; }
@media (max-width: 767px) { .page-hero--contact { min-height: 380px; } }

/* Careers hero is a two-column split: title and subhead left, body copy and
   the CTA right. The shared .page-hero__inner measure cap would squeeze both
   columns, so this hero opts out of it. */
.page-hero--careers .page-hero__inner { max-width: none; }
.page-hero--careers {
  align-items: start;
  background-position: 50% 22%;
  padding-block: var(--space-2xl) calc(var(--space-3xl) * 4.2);
  background-image:
    linear-gradient(to bottom,
      rgb(26 34 52 / .82) 0%,
      rgb(26 34 52 / .72) 35%,
      rgb(26 34 52 / .30) 60%,
      rgb(26 34 52 / 0) 75%),
    var(--page-photo);
}
@media (max-width: 800px) {
  .page-hero--careers { padding-block: var(--space-xl) calc(var(--space-3xl) * 2.2); }
}
.careers-hero__grid {
  display: grid; gap: var(--space-2xl);
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: start;
}
.careers-hero__grid > * > * + * { margin-top: var(--space-m); }
.careers-hero__lead { display: flex; flex-direction: column; }
.careers-hero__lead .page-hero__actions { margin-top: auto; padding-top: var(--space-l); }
.careers-hero__grid .page-hero__title { margin-bottom: var(--space-s); }
.careers-hero__grid .page-hero__lede { margin-bottom: 0; }
@media (max-width: 800px) { .careers-hero__grid { grid-template-columns: 1fr; gap: var(--space-l); } }

/* ── News, articles, booking, portal ────────────────────────────────────── */

.news-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}
.news-card { background: var(--white); }
.news-card__link { display: block; text-decoration: none; color: inherit; }
.news-card__photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; max-width: 100%; }
.news-card__title {
  font-size: var(--step-1); margin: 0; padding: var(--space-m) var(--space-l) var(--space-2xs);
  color: var(--navy);
}
.news-card__excerpt {
  margin: 0; padding: 0 var(--space-l) var(--space-l);
  color: var(--ink-body); font-size: var(--step--1); line-height: var(--leading-m);
}
.news-card__photo { transition: transform .4s ease; }
.news-card { overflow: hidden; }
.news-card__link:hover .news-card__photo { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) { .news-card__photo { transition: none; } .news-card__link:hover .news-card__photo { transform: none; } }

/* News hero: taller, with the title over a stronger bottom-weighted scrim so
   the x-ray screens in the photo stay readable behind it. */
.news-hero {
  min-height: 460px; display: grid; align-items: end;
  padding-block: var(--space-3xl);
  background-image:
    linear-gradient(to bottom, rgb(26 34 52 / .30) 0%, rgb(26 34 52 / .55) 55%, rgb(26 34 52 / .86) 100%),
    var(--page-photo);
  background-size: cover; background-position: 50% 45%;
}
.news-hero__title { color: #fff; font-size: var(--step-6); margin: 0 0 var(--space-xs); }
.news-hero__lede {
  color: rgb(255 255 255 / .94); font-size: var(--step-1);
  line-height: var(--leading-m); max-width: 60ch; margin: 0 0 var(--space-l);
}
@media (max-width: 767px) { .news-hero { min-height: 340px; } }

/* Prev/next and related articles at the foot of an article. */
.article__nav {
  display: flex; justify-content: space-between; gap: var(--space-m);
  margin-top: var(--space-2xl); padding-top: var(--space-l);
  border-top: 1px solid var(--line); font-size: var(--step--1);
}
.article__nav a { font-family: var(--font-display); font-weight: 700; }
.article__nav span { color: var(--ink-body); opacity: .5; }
.related { background: var(--mist); }
.related__title { font-size: var(--step-2); margin: 0 0 var(--space-l); }
.news-card__link:hover .news-card__title, .news-card__link:focus-visible .news-card__title { color: var(--blue); }

.article__inner { max-width: 78ch; margin-inline: auto; }
.article__back { margin: 0 0 var(--space-m); font-size: var(--step--1); }
.article__title { font-size: var(--step-4); margin: 0 0 var(--space-l); }
.article__photo { width: 100%; height: auto; display: block; margin-bottom: var(--space-xl); }
.article__body > * + * { margin-top: var(--space-m); }
.article__cta { margin-top: var(--space-2xl); }

.state-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
.state-list__link {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3xs);
  background: var(--pale); padding: var(--space-xl) var(--space-l);
  text-decoration: none; border: 2px solid transparent;
}
.state-list__link:hover, .state-list__link:focus-visible { border-color: var(--blue); background: var(--white); }
.state-list__code {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: var(--blue);
}
.state-list__name { font-size: var(--step--1); color: var(--ink); }

/* Portal hero: WHITE, centred, eyebrow over a dark heading. Live does not
   use a photo band here. */
.portal-hero { background: var(--white); padding-block: var(--space-3xl); text-align: center; }
.portal-hero__inner { max-width: 62ch; margin-inline: auto; }
.portal-hero__eyebrow {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); font-size: var(--step--1);
  margin: 0 0 var(--space-s);
}
.portal-hero__title {
  font-size: var(--step-4); color: var(--ink); margin: 0 0 var(--space-xl);
  font-weight: 400; line-height: var(--leading-s);
}
.portal-hero__actions { display: flex; gap: var(--space-m); justify-content: center; flex-wrap: wrap; margin: 0; }

/* Feature rows alternate between two greys, as live does, so each reads as
   its own block instead of one long undifferentiated run. */
.portal-features { display: grid; gap: var(--space-l); margin-top: var(--space-2xl); }
.portal-feature { background: var(--white); padding: var(--space-2xl); }
.portal-feature--tint { background: var(--pale); }
.portal-feature__inner {
  display: grid; gap: var(--space-2xl); align-items: center;
  /* Media gets the larger share — these are screenshots whose detail is the
     point, and an even split rendered them too small to read. */
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}
.portal-feature__media img { width: 100%; height: auto; display: block; }
.portal-feature__copy > * + * { margin-top: var(--space-s); }
.portal-feature__title { font-size: var(--step-2); margin: 0 0 var(--space-s); color: var(--blue); }
.portal-feature__list { padding-inline-start: 1.25em; display: grid; gap: var(--space-2xs); margin: 0; }
.portal-feature--reverse .portal-feature__media { order: 2; }
.portal-cta { background: var(--navy); }
.portal-cta .section-title { color: #fff; }
@media (max-width: 800px) {
  .portal-feature__inner { grid-template-columns: 1fr; }
  .portal-feature--reverse .portal-feature__media { order: 0; }
  .portal-feature { padding: var(--space-xl); }
}

/* Third-party form embeds (Jotform). A fixed height with its own scroll is
   the only option — a cross-origin iframe cannot report its content height.
   The background matches Jotform's own page colour, measured at
   rgb(243,243,254), so the iframe edge does not show as a seam. Widening the
   container does nothing: Jotform caps its .form-all at 752px internally. */
.form-embed {
  width: 100%; min-height: 1180px; border: 0; display: block;
  background: var(--jotform-bg);
}
/* The band around an embed carries the same colour so the whole section reads
   as one surface rather than a pale panel floating on white. */
.band--form { background: var(--jotform-bg); padding-block: var(--space-l); }
/* No hero on these pages: each Jotform draws its own logo and title, and a
   transparent hero left a white band between the menu and the tinted form
   section. The band starts straight under the header. */
.band--form:first-of-type { padding-top: var(--space-m); }
@media (max-width: 600px) { .form-embed { min-height: 1320px; } }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
/* The trigger is a real <button> so the enlarge action is keyboard reachable
   and announced; it carries no button chrome of its own. */
.lb-trigger {
  display: block; padding: 0; border: 0; background: none; width: 100%;
  cursor: zoom-in; border-radius: 0;
}
.lb-trigger:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.lb-trigger img { transition: transform .3s ease; }
.lb-trigger:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
  .lb-trigger img, .lb-trigger:hover img { transition: none; transform: none; }
}

.lb[hidden] { display: none !important; }
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgb(26 34 52 / .92);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-s); padding: var(--space-l);
}
/* Locks the page behind the dialog. */
.lb-open, .lb-open body { overflow: hidden; }
.lb__figure {
  margin: 0; max-width: min(1400px, 92vw); max-height: 88vh;
  display: flex; flex-direction: column; gap: var(--space-xs);
  /* The image itself scrolls if it is taller than the viewport. */
  overflow: auto;
}
.lb__img {
  display: block; max-width: 100%; height: auto;
  background: var(--white);
}
.lb__cap { color: rgb(255 255 255 / .86); font-size: var(--step--1); text-align: center; }
.lb__close, .lb__nav {
  flex: 0 0 auto; background: rgb(255 255 255 / .12); color: #fff;
  border: 2px solid rgb(255 255 255 / .32); border-radius: 50%;
  width: 48px; height: 48px; font-size: 1.6rem; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.lb__close:hover, .lb__nav:hover, .lb__close:focus-visible, .lb__nav:focus-visible {
  background: #fff; color: var(--navy); border-color: #fff;
}
.lb__close { position: absolute; top: var(--space-l); right: var(--space-l); }
@media (max-width: 640px) {
  .lb { padding: var(--space-s); }
  .lb__figure { max-width: 96vw; }
  .lb__close, .lb__nav { width: 40px; height: 40px; }
}

/* ── Mission/Values ─────────────────────────────────────────────────────── */
/* Full-bleed photo left, copy right — the photo runs to the viewport edge on
   live, so this sits outside .u-container and sets its own half. */
.mission-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mission-split__media { min-height: 420px; }
.mission-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mission-split__copy {
  display: grid; align-items: center; padding: var(--space-3xl) var(--space-2xl);
  background: var(--ash);
}
.mission-split__inner { max-width: 52ch; }
.mission-split__inner > * + * { margin-top: var(--space-m); }
.mission-split__title { font-size: var(--step-4); margin: 0; }
@media (max-width: 860px) {
  .mission-split { grid-template-columns: 1fr; }
  .mission-split__media { min-height: 280px; max-height: 420px; }
  .mission-split__copy { padding: var(--space-2xl) var(--space-l); }
}

/* CSR band: copy left on a tint, photo right. */
.csr-band { background: var(--white); }
.csr {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.csr__copy { background: var(--pale); padding: var(--space-2xl); text-align: center; display: grid; align-content: center; }
.csr__copy > * + * { margin-top: var(--space-m); }
.csr__title { font-size: var(--step-3); margin: 0; text-transform: uppercase; }
.csr__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) {
  .csr { grid-template-columns: 1fr; }
  .csr__copy { padding: var(--space-xl); }
}

/* ── Feedback forms ─────────────────────────────────────────────────────── */
.fb-form { max-width: none; }
.field__help { font-size: var(--step--1); color: var(--ink-body); }
.fb-form fieldset { border: 0; padding: 0; margin: 0; }
.fb-form legend {
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  color: var(--navy); padding: 0; margin-bottom: var(--space-2xs);
}

/* 1-10 scale, as radios. A range slider would give no visible value and
   screen readers would announce a bare number with no label. */
.fb-scale__row { display: flex; align-items: center; gap: var(--space-s); flex-wrap: wrap; }
.fb-scale__end { font-size: var(--step--1); color: var(--ink-body); white-space: nowrap; }
.fb-scale__opts { display: flex; gap: var(--space-3xs); flex: 1 1 auto; }
.fb-scale__opt { flex: 1 1 0; min-width: 34px; }
.fb-scale__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.fb-scale__opt span {
  display: grid; place-items: center; min-height: 40px;
  background: var(--ash); border: 2px solid transparent; border-radius: 4px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--step--1);
  cursor: pointer;
}
.fb-scale__opt input:checked + span { background: var(--blue); color: #fff; border-color: var(--blue); }
.fb-scale__opt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.fb-scale__opt span:hover { border-color: var(--blue); }

.fb-yesno { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.fb-yesno legend { flex-basis: 100%; }
.fb-yesno__opt { display: inline-flex; align-items: center; gap: var(--space-3xs); cursor: pointer; }

@media (max-width: 560px) {
  .fb-scale__opts { flex-wrap: wrap; }
  .fb-scale__opt { flex: 0 0 calc(20% - var(--space-3xs)); }
  .fb-scale__end { flex-basis: 100%; }
}