/*
  Brand tokens — pulled directly from the live crosbyphysio.com header/logo/buttons,
  not invented. Source: CP_Header_Logo.png (navy #072e53, gradient dots #5ce1e6→#38b6ff→
  #5271ff→#004aad) and the live site's Elementor button colour rgb(4,44,84) = #042c54.
*/
:root{
  --navy:#042c54;         /* primary brand navy — headings, buttons, primary structure */
  --navy-logo:#072e53;    /* the logo.png asset's own baked-in background box. Fractionally
                             darker than --navy (#042c54 vs #072e53) — close enough to look
                             identical in isolation, but a visible seam appears wherever the
                             logo sits directly against a --navy fill (scrolled mobile header,
                             footer). Use this token, not --navy, on any surface the logo
                             sits flush against, so there's no boundary line. */
  --navy-deep:#031f3d;    /* hover/pressed state for navy surfaces */
  --slate-soft:#486580;   /* muted secondary text — sampled from the logo's own antialiasing */
  --cyan:#5ce1e6;         /* brand accent — logo dot, icon-chip fills */
  --sky:#38b6ff;          /* brand accent — gradient stop */
  --indigo:#5271ff;       /* brand accent — gradient stop */
  --royal:#004aad;        /* brand accent — CTAs, links, eyebrows (AA-contrast safe on white) */
  --accent-gradient:linear-gradient(120deg, var(--cyan) 0%, var(--sky) 45%, var(--indigo) 75%, var(--royal) 100%);
  --cream:#f7f4ee;        /* warm neutral, layered against the cool brand navy/blue */
  --white:#ffffff;
  --star:#e8a33d;         /* review stars — conventional gold, not a structural brand colour */
  --focus:var(--royal);
  --radius:14px;
  /* legacy aliases so existing inline styles keep resolving to the correct brand colour */
  --slate:var(--navy);
  --sage-deep:var(--royal);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--navy);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:"Fraunces", Georgia, serif; font-weight:600; letter-spacing:-0.01em; color:var(--navy); }
h1{ font-size:clamp(2.1rem, 5vw, 3.4rem); line-height:1.1; }
h2{ font-size:clamp(1.6rem, 3.2vw, 2.3rem); line-height:1.2; margin-bottom:.6rem; }
h3{ font-size:1.15rem; margin-bottom:.35rem; }
p{ margin-bottom:1rem; }
a{ color:inherit; }
.container{ max-width:1180px; margin:0 auto; padding:0 24px; }
img, .placeholder-img{ max-width:100%; display:block; }
svg.icon-svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

/* Tap targets */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 22px; border-radius:999px;
  font-weight:600; font-size:.95rem; text-decoration:none;
  border:2px solid transparent; cursor:pointer; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn svg.icon-svg{ flex:none; }
.call-pill svg.icon-svg{ flex:none; }
.btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.btn-primary{ background:var(--accent-gradient); color:var(--white); box-shadow:0 3px 10px rgba(0,74,173,.22); }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,74,173,.28); }
.btn-navy{ background:var(--navy); color:var(--white); }
.btn-navy:hover{ background:var(--navy-deep); }
.btn-ghost{ background:transparent; border-color:rgba(255,255,255,.55); color:var(--white); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:var(--white); }
.btn-outline{ background:transparent; border-color:var(--navy); color:var(--navy); }
.btn-outline:hover{ background:rgba(4,44,84,.06); }

/* Floating nav — transparent over the hero on load, solidifies with a blurred
   navy fill once the page scrolls past the hero (see .is-scrolled, toggled by a
   small scroll listener shared across every page). Fixed rather than sticky so
   it can overlay the hero fully; .hero gets extra top padding to compensate. */
header.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:transparent; border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Solid, fully opaque fill only — no translucency/backdrop-filter. A blurred
   translucent version (rgba(7,46,83,.86) + backdrop-filter) was here before,
   but it let whatever sits behind the fixed header (the hero photo/gradient,
   especially now the homepage hero shows a photo on mobile too) bleed through
   and lighten the header a shade away from the logo's opaque background box.
   Solid var(--navy-logo) guarantees an exact, consistent match to the logo
   regardless of what scrolls underneath. */
header.site-nav.is-scrolled{
  background:var(--navy-logo); border-bottom-color:rgba(255,255,255,.08);
  box-shadow:0 4px 18px rgba(0,0,0,.18);
}
.nav-row{ display:flex; align-items:center; justify-content:space-between; padding:10px 24px; gap:16px; }
.logo{ display:inline-flex; align-items:center; text-decoration:none; }
.logo-img{ height:44px; width:auto; border-radius:6px; display:block; }
nav.primary-links{ display:none; gap:26px; font-family:"Fraunces",serif; font-size:.95rem; font-weight:600; color:rgba(255,255,255,.92); }
nav.primary-links a{ text-decoration:none; }
nav.primary-links a:hover{ color:var(--cyan); }
.nav-cta-group{ display:flex; align-items:center; gap:10px; }
/* On mobile the sticky bottom bar already covers Call + Book, so the header keeps
   only the logo and the hamburger — avoids three competing CTAs in a 390px header. */
@media (max-width:899px){ .nav-cta-group .call-pill, .nav-cta-group > a.btn-primary{ display:none; } }
.call-pill{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); font-weight:600; text-decoration:none; color:var(--white); font-size:.88rem; }
.call-pill:hover{ background:rgba(255,255,255,.16); }
@media (min-width:900px){ nav.primary-links{ display:flex; } }

/* Hero — static, no slider. Nav now floats transparent on top (see header.site-nav),
   so the hero itself pulls all the way up under it; extra top padding keeps the
   headline clear of the floating nav on every viewport. A diagonal accent shape
   bleeds in from the right on wide screens (hidden on mobile, where there's no
   room for it without crowding the copy). */
.hero{
  position:relative; color:var(--white);
  background:var(--navy);
  padding:128px 0 84px;
  overflow:hidden;
}
.hero::after{
  content:""; position:absolute; top:0; right:0; bottom:0; width:38%;
  background:linear-gradient(155deg, rgba(92,225,230,.22) 0%, rgba(56,182,255,.18) 45%, rgba(0,74,173,.28) 100%);
  clip-path:polygon(30% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events:none;
}
@media (max-width:899px){ .hero::after{ display:none; } }
.hero .container{ position:relative; z-index:1; display:flex; flex-direction:column; gap:22px; max-width:760px; }
/* Bug fix: base typography rule (h1,h2,h3{color:var(--navy)}) is an explicit rule on the
   element, so it always wins over the section's inherited white — inheritance loses to
   any explicit match regardless of specificity. Without this override every hero h1 on
   every page renders navy-on-navy. Confirmed live on staging: headline was unreadable. */
.hero h1{ color:var(--white); }
.hero p.lede{ font-size:1.1rem; color:rgba(255,255,255,.85); max-width:56ch; }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }

/* Hero with real photography — same diagonal-bleed shape as every other hero, but
   filled with a real photo instead of a plain gradient. Each page sets its own
   image via an inline custom property (--hero-photo, optionally --hero-photo-pos)
   on the .hero.has-photo section, so no new CSS rule is needed per page — falls
   back to hero-runners.jpg if a page forgets to set one. Solid navy everywhere
   else in the hero for guaranteed AA contrast; photo is dropped entirely on
   mobile rather than cramming a diagonal crop into 390px. */
.hero.has-photo{ background:var(--navy); }
.hero.has-photo::after{
  background:
    linear-gradient(155deg, rgba(4,44,84,.15), rgba(4,44,84,.35)),
    var(--hero-photo, url('/assets/img/hero-runners.jpg')) center var(--hero-photo-pos, 35%) / cover no-repeat;
}

/* Homepage hero only (#home-hero): bring the photo back on mobile as a subtle
   full-bleed texture, rather than the diagonal desktop crop (there's no room
   for that shape at 390px — same reasoning as the sitewide drop above). Scoped
   to the homepage specifically so the other 13 has-photo interior pages keep
   their existing photo-dropped-on-mobile behaviour unchanged.
   Two performance notes, since a CSS background-image this large counts as an
   LCP candidate same as an <img>:
   1. Uses hero-runners-mobile.jpg — a dedicated 780px-wide, quality-45 export
      (~33KB) instead of the 1680px desktop source (~198KB), since the mobile
      crop is small on-screen and heavily obscured by the scrim regardless.
   2. The gradient stays at .82-.93 navy alpha (barely lighter than solid
      --navy) so the photo reads as a faint tint, not a competing visual, and
      the white h1/lede keep the same AA contrast margin as the solid-navy
      mobile hero on every other page. */
@media (max-width:899px){
  #home-hero::after{
    display:block;
    width:100%;
    clip-path:none;
    background:
      linear-gradient(175deg, rgba(4,44,84,.82) 0%, rgba(4,44,84,.93) 100%),
      url('/assets/img/hero-runners-mobile.jpg') center 30% / cover no-repeat;
  }
}

.trust-strip{ background:var(--white); border-bottom:1px solid rgba(4,44,84,.08); }
.trust-strip ul{ list-style:none; display:flex; flex-wrap:wrap; gap:14px 28px; padding:18px 0; font-size:.85rem; font-weight:600; color:var(--slate-soft); }
.trust-strip li{ display:flex; align-items:center; gap:8px; }
.trust-strip .dot{ width:7px; height:7px; border-radius:50%; background:var(--royal); flex:none; }

section{ padding:64px 0; }
.section-head{ max-width:640px; margin-bottom:36px; }
.section-head .eyebrow{ text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; color:var(--royal); margin-bottom:8px; display:block; }

/* Bento grid */
.bento{ display:grid; grid-template-columns:1fr; gap:16px; }
.bento .tile{ background:var(--white); border-radius:var(--radius); padding:26px; border:1px solid rgba(4,44,84,.08); text-decoration:none; color:var(--navy); display:flex; flex-direction:column; gap:8px; transition:transform .15s ease, box-shadow .15s ease; }
.bento .tile:hover{ transform:translateY(-3px); box-shadow:0 12px 26px rgba(4,44,84,.12); }
.bento .tile .icon{ width:46px; height:46px; border-radius:10px; background:linear-gradient(135deg, var(--cyan), var(--sky)); color:var(--navy); display:flex; align-items:center; justify-content:center; }
.bento .tile.large{ grid-column:1 / -1; background:var(--navy); color:var(--white); }
.bento .tile.large h3{ color:var(--white); }
.bento .tile.large .icon{ background:rgba(255,255,255,.15); color:var(--white); }
.bento .tile .learn{ margin-top:auto; font-weight:700; font-size:.88rem; color:var(--royal); }
.bento .tile.large .learn{ color:var(--cyan); }
@media (min-width:720px){
  .bento{ grid-template-columns:repeat(3,1fr); }
  .bento .tile.large{ grid-column:span 3; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:20px; }
}

/* Claim / evidence */
.claims{ display:grid; gap:16px; }
.claim{ background:var(--white); border-left:4px solid var(--royal); border-radius:8px; padding:20px 22px; }
.claim .label{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--royal); }
@media (min-width:820px){ .claims{ grid-template-columns:repeat(2,1fr); } }

/* Team */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:20px; }
.team-card{ background:var(--white); border-radius:var(--radius); overflow:hidden; border:1px solid rgba(4,44,84,.08); }
.team-card .photo{ aspect-ratio:4/5; background:linear-gradient(160deg,var(--navy),var(--royal)); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.75); font-size:.78rem; text-align:center; padding:12px; }
.team-card .info{ padding:16px; }
.team-card .hcpc{ font-size:.78rem; color:var(--slate-soft); }

/* Credential chip row — used on About in place of named/photographed staff cards
   until real headshots + HCPC numbers are supplied. */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.chip-row .chip{ font-size:.8rem; font-weight:600; padding:6px 13px; border-radius:999px; background:rgba(255,255,255,.14); color:var(--white); }
.bento .tile:not(.large) .chip-row .chip{ background:rgba(4,44,84,.07); color:var(--navy); }

/* Insurer strip — static, not a carousel. Each logo sits in a matched-height card
   so wildly different logo proportions (a wordmark vs. a crest) still read as one row. */
.insurer-strip{ background:var(--white); }
.insurer-row{ display:flex; flex-wrap:wrap; align-items:stretch; gap:16px; }
.insurer-row img{ height:32px; width:auto; max-width:100%; }
.insurer-row span, .insurer-row .insurer-card{
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(4,44,84,.12); border-radius:10px; padding:14px 20px;
  background:var(--white); min-width:120px; min-height:64px;
}

/* Insurer marquee — continuous scroll. Two identical groups placed back-to-back;
   the track animates left by exactly one group's width (-50%) so the loop is seamless.
   Second group is aria-hidden (decorative duplicate) so screen readers only hear the
   logos once. Pauses on hover/focus, and drops to a static wrapped row entirely for
   prefers-reduced-motion so nothing moves for users who've asked it not to. */
.marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track{ display:flex; width:max-content; animation:marquee-scroll 28s linear infinite; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; align-items:center; gap:40px; padding:6px 20px; flex:none; }
.marquee-group img{ height:32px; width:auto; flex:none; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .marquee-track{ animation:none; flex-wrap:wrap; width:100%; }
  .marquee-group[aria-hidden]{ display:none; }
}

/* Testimonials */
.review-grid{ display:grid; gap:18px; }
.review{ background:var(--white); border-radius:var(--radius); padding:22px; border:1px solid rgba(4,44,84,.08); }
.stars{ color:var(--star); font-weight:700; margin-bottom:10px; letter-spacing:.1em; }
.review .who{ font-weight:700; margin-top:10px; font-size:.9rem; color:var(--navy); }
@media (min-width:820px){ .review-grid{ grid-template-columns:repeat(3,1fr); } }

/* Guides preview */
.guides-grid{ display:grid; gap:16px; }
.guide-card{ background:var(--white); border-radius:var(--radius); padding:20px; border:1px solid rgba(4,44,84,.08); text-decoration:none; color:var(--navy); }
@media (min-width:820px){ .guides-grid{ grid-template-columns:repeat(3,1fr); } }

/* Local block */
/* Bug fix (found in mobile audit, 2026-07-04): grid-template-columns was unset on
   mobile, so the implicit auto-sized track grew to the map embed's content-driven
   min-width (aspect-ratio:16/9 + the inline min-height:280px imply a ~498px minimum
   width) instead of shrinking to the 390px viewport — blew the whole homepage out
   132px wider than the screen, with a permanent horizontal scrollbar. minmax(0,1fr)
   lets the track shrink below that intrinsic content size, which plain 1fr does not. */
.local{ display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.map-embed{ background:repeating-linear-gradient(45deg, rgba(4,44,84,.06), rgba(4,44,84,.06) 10px, transparent 10px, transparent 20px); border-radius:var(--radius); aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; color:var(--slate-soft); font-size:.85rem; border:1px dashed rgba(4,44,84,.25); }
@media (min-width:900px){ .local{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; } }

/* Final CTA band — the logo's own accent gradient, given a moment to lead */
.final-cta{ background:var(--accent-gradient); color:var(--white); text-align:center; }
.final-cta h2{ color:var(--white); }
.final-cta .cta-row{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:18px; }

footer{ background:var(--navy-logo); color:rgba(255,255,255,.85); padding:56px 0 28px; font-size:.9rem; }
footer .logo-img{ margin-bottom:14px; }
footer h3{ color:var(--white); font-family:"Fraunces",serif; font-weight:600; margin-bottom:12px; font-size:1rem; }
.footer-grid{ display:grid; gap:32px; grid-template-columns:1fr; margin-bottom:36px; }
.footer-grid ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-grid a{ text-decoration:none; color:rgba(255,255,255,.75); }
.footer-grid a:hover{ color:var(--cyan); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.15); padding-top:20px; font-size:.8rem; color:rgba(255,255,255,.55); }
@media (min-width:820px){ .footer-grid{ grid-template-columns:repeat(4,1fr); } }

/* Sticky mobile CTA bar */
.mobile-cta-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:60;
  display:flex; gap:10px; padding:10px 14px; background:var(--white);
  border-top:1px solid rgba(4,44,84,.12); box-shadow:0 -6px 18px rgba(4,44,84,.1);
}
.mobile-cta-bar .btn{ flex:1; }
@media (min-width:900px){ .mobile-cta-bar{ display:none; } }
body{ padding-bottom:76px; }
@media (min-width:900px){ body{ padding-bottom:0; } }

/* --- Accessibility & UX layer --- */

/* Skip-to-content link (WCAG 2.2) — visually hidden until focused */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--white); color:var(--navy); padding:10px 18px; border-radius:8px;
  font-weight:700; text-decoration:none; transition:top .15s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.skip-link:focus{ top:12px; }

/* Visible focus rings on every interactive card/link, not just buttons */
a:focus-visible, .bento .tile:focus-visible, .guide-card:focus-visible,
.team-card:focus-visible, .review:focus-visible, summary:focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:4px;
}

/* Current-page indicator in nav */
nav.primary-links a[aria-current="page"]{ color:var(--cyan); position:relative; }
nav.primary-links a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background:var(--cyan);
}

/* Mobile hamburger menu */
.menu-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.28); color:var(--white); cursor:pointer;
}
.menu-toggle svg{ width:22px; height:22px; }
@media (min-width:900px){ .menu-toggle{ display:none; } }

.mobile-drawer{
  display:none; position:fixed; inset:0; z-index:70;
  background:var(--navy-logo); color:var(--white);
  padding:20px 24px 32px; overflow-y:auto;
}
.mobile-drawer.open{ display:block; }
.mobile-drawer .drawer-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; }
.mobile-drawer .drawer-close{ width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.28); color:var(--white); display:flex; align-items:center; justify-content:center; }
.mobile-drawer nav{ display:flex; flex-direction:column; gap:4px; }
.mobile-drawer nav a{
  display:block; padding:14px 6px; font-size:1.15rem; font-family:"Fraunces",serif; font-weight:600;
  color:var(--white); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.1);
}
.mobile-drawer nav a[aria-current="page"]{ color:var(--cyan); }
.mobile-drawer .drawer-cta{ margin-top:28px; display:flex; flex-direction:column; gap:12px; }
@media (min-width:900px){ .mobile-drawer{ display:none !important; } }

/* Back-to-top */
.back-to-top{
  position:fixed; right:18px; bottom:92px; z-index:55;
  width:46px; height:46px; border-radius:50%; background:var(--navy); color:var(--white);
  display:none; align-items:center; justify-content:center; border:none; cursor:pointer;
  box-shadow:0 8px 20px rgba(4,44,84,.3);
}
.back-to-top.visible{ display:flex; }
@media (min-width:900px){ .back-to-top{ bottom:28px; } }

/* FAQ accordion — <details>/<summary>, schema content unchanged */
.faq-item{ background:var(--white); border-radius:10px; border:1px solid rgba(4,44,84,.08); margin-bottom:12px; overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:18px 20px; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary .chev{ flex:none; transition:transform .2s ease; }
.faq-item[open] summary .chev{ transform:rotate(180deg); }
.faq-item .faq-answer{ padding:0 20px 18px; color:var(--slate-soft); }

/* Trust-bar repeat — used on the Book Appointment page next to the form */
.trust-mini{ display:flex; flex-wrap:wrap; gap:12px 22px; font-size:.82rem; font-weight:600; color:var(--slate-soft); margin-top:18px; padding-top:18px; border-top:1px solid rgba(4,44,84,.08); }
.trust-mini li{ list-style:none; display:flex; align-items:center; gap:7px; }
.trust-mini .dot{ width:6px; height:6px; border-radius:50%; background:var(--royal); flex:none; }

/* In-page jump nav for long condition lists */
.jump-nav{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.jump-nav a{ font-size:.82rem; font-weight:600; padding:7px 14px; border-radius:999px; background:var(--white); border:1px solid rgba(4,44,84,.15); text-decoration:none; color:var(--navy); }
.jump-nav a:hover{ background:rgba(4,44,84,.06); }

/* Self-Help article pages — deliberately not a "blog" layout: no sidebar, no
   author-avatar-and-tags clutter, no comments box. A quiet reading column with a
   real full-bleed image, generous line-height, and a single contextual booking CTA. */
.article-hero{ background:var(--navy); color:var(--white); padding:104px 0 30px; }
.article-hero .container{ max-width:760px; }
.article-hero .eyebrow{ color:var(--cyan); }
.article-hero h1{ color:var(--white); margin-bottom:12px; }
.article-meta{ display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.85rem; color:rgba(255,255,255,.72); list-style:none; }
.article-shell{ max-width:760px; margin:0 auto; padding:0 24px; }
/* Bug fix: this used to sit directly under the hero and pull up over it with a
   negative margin. A breadcrumb bar now sits between the hero and this figure, so
   the negative margin was instead pulling the image up over the breadcrumb text,
   covering it. Confirmed live on staging. Normal top margin, no overlap. */
.article-figure{ margin:28px 0 8px; border-radius:var(--radius); overflow:hidden; box-shadow:0 14px 28px rgba(4,44,84,.12); }
.article-figure img{ width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover; }
.article-body{ font-size:1.05rem; line-height:1.75; color:#33475b; padding:36px 0 8px; }
.article-body h2{ margin-top:2.1em; color:var(--navy); }
.article-body h2:first-child{ margin-top:0; }
.article-body h3{ margin-top:1.7em; font-size:1.12rem; color:var(--navy); }
.article-body h4{ margin-top:1.4em; font-size:1rem; color:var(--navy); }
.article-body p{ margin-bottom:1.2em; }
.article-body strong{ color:var(--navy); }
.article-body a{ color:var(--royal); text-decoration:underline; text-underline-offset:2px; }
.article-body ul, .article-body ol{ margin:0 0 1.2em 1.3em; padding:0; }
.article-body li{ margin-bottom:.5em; }
.article-further-reading{ font-size:.95rem; padding:14px 18px; background:var(--cream); border-radius:10px; border:1px solid rgba(4,44,84,.08); margin-bottom:1.2em; }
.article-cta{ background:var(--white); border:1px solid rgba(4,44,84,.1); border-radius:var(--radius); padding:26px; margin:8px 0 44px; box-shadow:0 8px 20px rgba(4,44,84,.06); }
.article-cta .cta-row{ margin-top:14px; display:flex; flex-wrap:wrap; gap:12px; }
.related-heading{ font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--royal); margin-bottom:14px; display:block; }

/* Guide cards with a thumbnail image — used on the /self-help/ hub for the 18
   region guides, kept visually distinct from the 5 plain-text "general advice" cards */
.guide-card.with-thumb{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.guide-card.with-thumb img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
.guide-card.with-thumb .gc-body{ padding:16px 18px; }
.guides-grid.wide{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:640px){ .guides-grid.wide{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .guides-grid.wide{ grid-template-columns:repeat(3,1fr); } }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .bento .tile:hover{ transform:none; }
}