/* ==========================================================================
   Live-in Care Direct
   Vanilla CSS -- no Bootstrap, no framework. Mobile-first.
   ========================================================================== */

/* ===== Scroll reveal ===== */
/* .reveal is added by main.js (never in markup), so a no-JS visitor -- or
   one whose browser doesn't support IntersectionObserver -- simply never
   gets this class and sees every card at full opacity from the start,
   rather than JS being a hard requirement for the page to look right. */
.reveal {
    opacity: 0; transform: translateY(22px);
    transition: opacity .6s cubic-bezier(.16,.8,.32,1), transform .6s cubic-bezier(.16,.8,.32,1);
}
.reveal.is-revealed { opacity: 1; transform: none; }

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-bottom clears the persistent .action-bar (fixed, ~74-76px
   tall once visible -- see its rules further down) for every native
   scroll-into-view: a focused form field, a failed-validation focus() call,
   an anchor jump. Without it, any control that lands in the page's last
   ~74px scrolls in flush with the viewport bottom and sits directly under
   the bar -- confirmed on the lead-form wizard's final "Get my free care
   plan" submit button, which the bar covered almost completely once
   scrolled to. 90px gives it a little more than the bar's own height so the
   control clears the bar with room to spare rather than landing flush
   against it. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-bottom: 90px; }
img, svg, iframe { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul { list-style: none; }

/* ===== Base ===== */
body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    color: var(--color-ink);
    background: var(--color-bg);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, h4 { font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--ink-900); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; }
h4 { font-size: var(--step-0); font-weight: 700; }
p  { color: var(--color-ink-muted); }
strong { color: var(--ink-700); font-weight: 700; }

.sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--color-accent); color: #fff;
    padding: var(--space-1) var(--space-2); border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--pink-400); outline-offset: 3px; border-radius: 4px; }

.container { max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2); }
@media (min-width: 768px) { .container { padding-inline: var(--space-3); } }

/* ===== Buttons ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5em;
    min-height: 52px; padding: .75rem 1.75rem;
    border-radius: var(--radius-button);
    font-weight: 700; font-size: var(--step-0); text-align: center;
    border: 2px solid transparent; cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn--primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-pink); }
.btn--primary:hover { background: var(--pink-600); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(233,85,135,.36); }
.btn--secondary { background: var(--color-secondary); color: #fff; box-shadow: 0 10px 28px rgba(41,155,104,.26); }
.btn--secondary:hover { background: var(--green-600); transform: translateY(-2px); }
.btn--outline { background: var(--surface); border-color: var(--ink-100); color: var(--ink-900); box-shadow: var(--shadow-xs); }
.btn--outline:hover { border-color: var(--color-accent); color: var(--color-accent-dark); transform: translateY(-2px); }
.btn:active { transform: scale(.96); }
.btn--block { width: 100%; }
.btn--lg { min-height: 58px; padding-inline: 2.25rem; }

/* Full-width, centred buttons read as the primary path forward on a narrow
   screen; side-by-side buttons there tend to force one label onto two lines
   instead. Excluded: the header's CTA (sits beside the nav toggle), the
   cost-calculator's Back/Next (sits beside the step counter), and the lead
   wizard's Back/Submit row -- all three are a fixed-width button next to a
   flexible sibling, and forcing width:100% onto *both* sides of a flex row
   makes them fight over the same space instead of sharing it. */
@media (max-width: 640px) {
    .btn:not(.site-header .btn):not(.cost-modal__nav .btn):not(.wiz__nav .btn) {
        width: 100%;
    }
}

/* Phone link */
.phone-link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; color: var(--ink-900); white-space: nowrap; }
.phone-link::before {
    content: ""; width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/16px no-repeat;
}
/* white-space:normal override: the hours line is already its own block line
   (display:block above), so it doesn't need the parent .phone-link's nowrap
   -- inheriting it anyway meant the longer OPENING_HOURS_FULL string (used
   on the FAQ contact card) couldn't wrap and forced its card wider than the
   viewport at 320px, blowing out the whole .faq-layout grid track. The phone
   number itself is unaffected and still stays on one line. */
.phone-link small { display: block; font-weight: 500; font-size: .75rem; color: var(--ink-500); }
/* .phone-link itself sets white-space:nowrap (above), which is the right
   default everywhere else -- short "Lines open 8am-10pm" fits on one line
   easily. The FAQ aside is the one place using OPENING_HOURS_FULL ("...,
   seven days a week"), long enough to overflow its narrow column at small
   widths, so only this specific instance needs to opt back into wrapping.
   An earlier fix made ALL .phone-link small text wrap to fix this one
   case, which then broke the header's shorter text by letting it wrap
   with room to spare -- scoping it here instead of globally fixes the FAQ
   card without touching every other instance. */
.phone-link.faq-aside__phone small { white-space: normal; }

/* ===== Header ===== */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-soft, 0 8px 24px rgba(28,27,34,.08)); }
/* A quiet brand signature rather than a plain grey rule -- ties the pink and
   green halves of the palette together on the one element that's visible on
   every single page. */
.site-header::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--green-500, var(--green-600)) 100%);
    opacity: .5;
}
.site-header__inner {
    max-width: var(--max-width); margin-inline: auto;
    padding: .5rem var(--space-2);
    display: flex; align-items: center; gap: var(--space-2);
}
.site-header__logo { flex: none; display: flex; align-items: center; transition: opacity .15s ease; }
.site-header__logo:hover { opacity: .85; }
.site-header__logo img { height: 64px; width: auto; }

.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.site-header__phone { display: none; }
.site-header .btn {
    min-height: 46px; padding-inline: 1.25rem; font-size: var(--step--1);
    /* Without this the flex row squeezes the button until "Find a Carer" breaks
       onto two lines, which stacks the label and pushes the whole header from
       ~66px to 95px tall. Header button labels are short by definition, so they
       should never wrap. */
    white-space: nowrap;
}
/* The phone block is the other item that can be squeezed; keep its number and
   opening hours on their own single lines too. */
.site-header__phone span { white-space: nowrap; }
/* Separates the quiet utility links (sign-in, phone) from the one action the
   header actually wants clicked. Only appears once the phone number itself
   does (1200px) -- below that there's nothing to divide from. */
.site-header__divider { display: none; }
@media (min-width: 1200px) {
    .site-header__divider { display: block; width: 1px; height: 26px; background: var(--color-border); flex: none; }
}

.site-nav { order: 3; }
.site-nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 46px; height: 46px; background: var(--surface); cursor: pointer;
    border: 1px solid var(--color-border); border-radius: 12px; padding: 0 12px;
}
.site-nav__toggle span {
    display: block; width: 20px; height: 2px; background: var(--ink-900);
    border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav__menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) var(--space-2) var(--space-3);
    flex-direction: column; gap: 2px;
    /* The menu is absolutely positioned against the sticky header, so it
       stays pinned in place as the page scrolls -- the page itself scrolling
       never brings a taller-than-viewport menu into view. With every
       dropdown a real inline expansion (not a flyout), opening Locations
       (14 links) on a short phone pushed the list past the bottom of the
       screen with no way to reach "Wales" onward or "View all locations":
       confirmed via Playwright, whose own scroll-into-view couldn't get a
       real click to land on it either. Capping the menu's own height and
       scrolling it internally keeps every item reachable regardless of
       viewport height or how many dropdowns are open at once. 100dvh (where
       supported) accounts for mobile browser chrome; 100vh is the fallback. */
    max-height: calc(100vh - var(--header-height, 88px));
    max-height: calc(100dvh - var(--header-height, 88px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.site-nav__menu.is-open { display: flex; }
.site-nav__menu > li > a,
.site-nav__trigger {
    display: flex; align-items: center; gap: .35rem; width: 100%;
    padding: .85rem .75rem; font-weight: 600; border-radius: 10px;
    color: var(--ink-700); background: none; border: 0; cursor: pointer;
    /* Sized up from --step-0 for the mobile menu specifically -- a large
       share of this site's visitors are older and searching this menu
       under some stress, not casually browsing, so legibility here matters
       more than usual. The desktop override further down resets this back
       to a compact --step--1, since a full-width horizontal row has far
       less room and a mouse pointer doesn't need the same size to hit. */
    font-size: var(--step-1); text-align: left;
}
.site-nav__menu > li > a:hover,
.site-nav__trigger:hover { background: var(--surface-pink); color: var(--color-accent-dark); }
/* Current-page state, distinct from :hover -- a solid tint plus bold weight
   so a visitor can always see where in the site they are, not just where
   their cursor is. */
.site-nav__menu > li > a.is-active,
.site-nav__trigger.is-active { background: var(--surface-pink); color: var(--color-accent-dark); font-weight: 800; }

.site-nav__chev {
    width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; flex: none;
}
.site-nav__trigger[aria-expanded="true"] .site-nav__chev { transform: rotate(-135deg) translate(-3px, -3px); }
.site-nav__trigger[aria-expanded="true"] { color: var(--color-accent-dark); }

/* Mobile: dropdown expands inline */
.site-nav__dropdown { display: none; padding: .25rem 1rem .5rem; }
.has-dropdown.is-open > .site-nav__dropdown { display: block; }
.site-nav__dropdown a {
    display: block; padding: .6rem .75rem; border-radius: 8px;
    /* Was --step--1 / ink-500 -- both a size and a contrast step down from
       the already-enlarged top-level items above, which made the actual
       destination links (Dementia Care, Our carers, etc.) the hardest
       things to read in the whole menu. Desktop's own dropdown styling
       (further down) is untouched. */
    font-size: var(--step-0); font-weight: 500; color: var(--ink-700);
}
.site-nav__dropdown a:hover { background: var(--surface-pink); color: var(--color-accent-dark); }
.site-nav__all {
    font-weight: 700 !important; color: var(--color-accent-dark) !important;
    border-top: 1px solid var(--color-border); margin-top: .35rem; padding-top: .6rem !important;
}

/* Locations (14 links) is long enough that a single column ran past the
   bottom of the screen -- on mobile that meant scrolling through the whole
   rest of the menu just to reach Contact underneath; on a short laptop
   viewport it ran off the bottom of the page entirely. Two columns roughly
   halves the height in both contexts, and every item here is short enough
   (longest is "East of England") to fit a mobile half-column without
   shrinking the deliberately-enlarged mobile nav font above. Row count is
   fixed (not auto-fit) so the list splits evenly rather than leaving one
   column mostly empty. "View all" stays outside the grid so it still spans
   full width underneath both columns.
   Services (9 links) gets the same treatment but desktop-only, further down
   -- "Emergency Home Care" and "Companionship Care" don't fit a mobile
   half-column at that font size, so it stays a single column there. */
.site-nav__dropdown--locations .site-nav__dropdown-grid {
    display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; column-gap: .25rem;
    grid-template-rows: repeat(7, auto);
}

/* 1200px, not the site's usual desktop step -- measured the actual header
   content (logo + full nav + phone + divider + .site-header__signin + CTA)
   and it doesn't fit below that; 1180px still clipped by ~13px. Was 1060px:
   anything under this was overflowing the page horizontally the instant
   .site-nav__menu's own overflow was allowed to show past its box (see the
   max-height/overflow-y note just below) -- that overflow used to be
   silently absorbed by a stray horizontal scrollbar inside the nav itself,
   which is worse: a scrollbar under the header on a fully desktop-width
   screen, not full-width content. Moving the whole switch-to-desktop point
   out to where it actually fits removes both problems, and closes a
   second, unrelated gap for free: .site-nav__signin (below) used to hide
   at 1060px while .site-header__signin didn't appear until 1180px, so
   nothing offered a sign-in link at all in that 120px window -- both now
   change over at the same point. */
@media (min-width: 1200px) {
    .site-nav { order: 0; margin-left: var(--space-2); }
    .site-nav__toggle { display: none; }
    .site-nav__menu {
        display: flex; position: static; flex-direction: row; gap: .1rem;
        background: none; border: none; box-shadow: none; padding: 0;
        /* Undo the mobile dropdown's max-height/overflow-y (further up this
           file) -- left in place here, overflow-y:auto with no matching
           overflow-x makes the latter auto-compute to 'auto' too per the
           CSS Overflow spec, which put a stray horizontal scrollbar under
           the desktop nav row the moment it was even a pixel tight. The
           desktop menu is a single row with no dropdown-height problem to
           solve, so it doesn't need to scroll at all. */
        max-height: none; overflow-y: visible;
    }
    .site-nav__menu > li { position: relative; }
    .site-nav__menu > li > a,
    .site-nav__trigger { padding: .5rem .7rem; font-size: var(--step--1); width: auto; white-space: nowrap; position: relative; }
    /* A thin animated underline reads as a more considered, "designed" nav
       than a flat background fill alone -- scales in from the centre rather
       than a hard on/off so it feels like motion, not a toggle. */
    .site-nav__menu > li > a::after,
    .site-nav__trigger::after {
        content: ""; position: absolute; left: .7rem; right: .7rem; bottom: 2px; height: 2px;
        background: var(--color-accent); border-radius: 2px;
        transform: scaleX(0); transition: transform .18s ease;
    }
    .site-nav__menu > li > a:hover::after,
    .site-nav__trigger:hover::after,
    .site-nav__menu > li > a.is-active::after,
    .site-nav__trigger.is-active::after { transform: scaleX(1); }

    /* Desktop: dropdown floats below its trigger */
    .site-nav__dropdown {
        position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
        min-width: 264px; padding: .75rem 1rem;
        background: var(--surface); border: 1px solid var(--color-border);
        border-radius: var(--radius-card); box-shadow: var(--shadow-md);
        display: block; opacity: 0; visibility: hidden; transform: translateY(-6px);
        transition: opacity .16s ease, transform .16s ease, visibility .16s;
        /* Locations alone has 13 region links -- on a short laptop screen
           (700-800px tall isn't unusual once browser chrome is subtracted)
           that ran off the bottom of the viewport with nothing to reveal the
           rest. Caps to the space actually below the header and scrolls
           its own content instead. */
        max-height: calc(100vh - 110px); overflow-y: auto; overflow-x: hidden;
    }
    .has-dropdown:hover > .site-nav__dropdown,
    .has-dropdown:focus-within > .site-nav__dropdown,
    .has-dropdown.is-open > .site-nav__dropdown {
        opacity: 1; visibility: visible; transform: translateY(0);
    }
    /* Keep the last menus from overflowing the right edge */
    .site-nav__menu > li:nth-last-child(-n+2) .site-nav__dropdown { left: auto; right: 0; }
    /* Wide enough for 2 real columns of link text, not just 264px stretched
       thin -- "Emergency Home Care" / "East of England" are the long items
       each list has to fit per column. Services only goes 2-column here
       (desktop has the room the mobile half-column doesn't) -- see the
       mobile-scoped comment above .site-nav__dropdown--locations. */
    .site-nav__dropdown--services,
    .site-nav__dropdown--locations { min-width: 500px; }
    .site-nav__dropdown--services .site-nav__dropdown-grid {
        display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column;
        grid-template-rows: repeat(5, auto);
    }
    .site-nav__dropdown--services .site-nav__dropdown-grid,
    .site-nav__dropdown--locations .site-nav__dropdown-grid { column-gap: 1rem; }

    .site-header__phone { display: inline-flex; }
}

/* ===== Hero ===== */
.hero {
    position: relative; padding-block: var(--space-4) var(--space-3);
    background:
        radial-gradient(1100px 460px at 88% -8%, var(--pink-100) 0%, transparent 60%),
        radial-gradient(760px 420px at 4% 8%, var(--green-50) 0%, transparent 55%);
}
.hero__inner {
    max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2);
    display: grid; gap: var(--space-4); align-items: center;
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--surface); border: 1px solid var(--pink-200);
    color: var(--color-accent-dark); font-weight: 700; font-size: var(--step--1);
    padding: .4rem 1rem; border-radius: var(--radius-button);
    box-shadow: var(--shadow-xs); margin-bottom: var(--space-2);
    /* On a narrow phone this text wraps to two lines inside the pill; since
       it's plain inline text (not separate flex children), align-items has
       no effect on that wrap -- text-align is what actually centres the
       second line under the first instead of leaving it ragged-left. */
    text-align: center;
}
.hero__content h1 { margin-bottom: var(--space-2); text-wrap: balance; }
/* 48ch, not 36ch: the old cap held the standfirst to ~455px inside a column
   nearly 200px wider, so it set in five short lines and pushed the trust row
   below the fold. Still well inside the 45-75ch comfortable measure. */
.hero__content > p { font-size: var(--step-1); color: var(--ink-500); max-width: 48ch; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); align-items: center; }
.hero__image { position: relative; }
.hero__image img {
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
    /* The HTML width/height attributes exist only to reserve space pre-load
       and set the default aspect ratio -- but with no author `height` rule,
       the height="480" attribute wins as a presentational hint regardless of
       `aspect-ratio` below, pinning every hero image to a flat 480px tall
       no matter how narrow the column is. `height: auto` hands sizing back
       to `aspect-ratio` the way it was clearly meant to work. */
    height: auto;
    aspect-ratio: 4/3; object-fit: cover; width: 100%;
}
.hero__trust {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3); padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}
.hero__trust div { display: flex; flex-direction: column; }
.hero__trust b { font-size: var(--step-2); color: var(--color-accent-dark); line-height: 1.1; }
.hero__trust span { font-size: var(--step--1); color: var(--ink-500); }

/* Below 900px .hero__inner is a single column, so image and content just
   stack in source order -- content first, image last. On a phone that puts
   the photo below several screens of text; showing it first gives an
   immediate visual anchor before anyone has to read anything. */
@media (max-width: 899px) {
    .hero__image { order: -1; }
    /* 4:3 at full phone width is a very tall photo -- most of a screen
       before anyone reaches the heading. A wider, shorter crop (~16:9) reads
       as a banner rather than a full-bleed portrait. */
    .hero__image img { aspect-ratio: 16/9; }
}

@media (min-width: 900px) {
    .hero__inner { grid-template-columns: 1fr 1fr; padding-inline: var(--space-3); }
    /* Equal thirds (the base rule) leave "Checked & vetted carers" a hair
       short and it wraps -- weighted to each column's actual content need
       (measured, not guessed) plus a tighter column-gap closes the gap
       without touching the trust-row font size, which was deliberately
       raised elsewhere for readability. */
    .hero__trust { grid-template-columns: 0.83fr 0.9fr 1.05fr; gap: var(--space-2) 1rem; }
}

/* ===== Benefit strip ===== */
.benefits { padding-block: var(--space-5); background: var(--surface); }
.benefits__grid {
    max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2);
    display: grid; gap: var(--space-3); grid-template-columns: 1fr;
}
.benefit-card {
    background: var(--surface-soft); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    transition: transform .2s ease, box-shadow .2s ease;
}
.benefit-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.benefit-card__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.benefit-card__icon {
    flex: none; width: 44px; height: 44px;
    border-radius: 14px; background: var(--pink-100);
    display: grid; place-items: center;
    color: var(--color-accent-dark);
}
.benefit-card__icon svg { width: 22px; height: 22px; }
.benefit-card:nth-child(2n) .benefit-card__icon { background: var(--green-100); color: var(--green-600); }
.benefit-card h3 { margin-bottom: 0; font-size: var(--step-0); }
.benefit-card p { font-size: var(--step--1); }
@media (min-width: 640px)  { .benefits__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .benefits__grid { grid-template-columns: repeat(4, 1fr); padding-inline: var(--space-3); } }

/* ===== Sections ===== */
.section { padding-block: var(--space-5); }
.section--tint { background: var(--surface-pink); }
.section--mint { background: var(--surface-mint); }
.section--surface { background: var(--surface); }
.section__header { max-width: var(--max-width-narrow); margin-bottom: var(--space-4); }
.section__header--center { margin-inline: auto; text-align: center; }
.section__eyebrow {
    text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
    font-weight: 800; color: var(--color-secondary); margin-bottom: .5rem;
}
.section__header p { font-size: var(--step-1); margin-top: var(--space-1); }

/* Rich text (migrated body content) */
.prose { max-width: 72ch; }
.prose h2 { margin: var(--space-4) 0 var(--space-2); font-size: var(--step-2); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: var(--space-3) 0 var(--space-1); }
.prose p { margin-bottom: var(--space-2); }
.prose ul { margin: 0 0 var(--space-2) 0; display: grid; gap: .6rem; }
.prose ul li { position: relative; padding-left: 1.9rem; color: var(--ink-500); }
.prose ul li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.prose a { color: var(--color-accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.prose img {
    width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover;
    border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
    margin-block: var(--space-3);
}
.prose > *:last-child { margin-bottom: 0; }

/* ===== Card grid ===== */
.card-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.service-card {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-xs);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card[href],
.service-card[href]:visited {
    color: inherit;
    text-decoration: none;
}
.service-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.service-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
/* height:auto hands sizing to aspect-ratio -- without it, the HTML
   height="250" attribute (a low-priority presentational hint, not
   overridden by any other author `height` rule here) wins outright and
   pins every card image to a flat 250px regardless of the card's actual
   rendered width. Same root cause as the homepage hero image fix above;
   this one only shows up once a real image fails to load (e.g. a provider
   photo not yet migrated to /assets/images/site_images/), which is why it
   wasn't visible on service-card's other, always-populated use sites. */
.service-card img { height: auto; aspect-ratio: 16/10; object-fit: cover; width: 100%; transition: transform .4s ease; }
.service-card:hover img { transform: scale(1.06); }
.service-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: .5rem; flex: 1; }
/* Any heading level, not just h3: card titles are card titles whatever the
   document outline needs them to be, and an unstyled h2 in here inherited the
   page heading scale and rendered at ~41px. Balanced so long article titles
   break into even lines rather than one orphaned word. */
.service-card__body :is(h2, h3, h4) {
    font-size: var(--step-1); line-height: 1.25; text-wrap: balance;
}
.service-card__body p { font-size: var(--step--1); flex: 1; }
.service-card__link { font-weight: 700; color: var(--color-accent-dark); margin-top: auto; font-size: var(--step--1); }
.service-card:hover .service-card__link { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Advice hub: category cards (/advice/) ===== */
.category-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .category-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }
.category-card {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: 1.25rem;
    box-shadow: var(--shadow-xs);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.category-card:hover {
    transform: translateY(-3px); box-shadow: var(--shadow-md);
    border-color: var(--pink-200); text-decoration: none;
}
.category-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.category-card__icon {
    width: 44px; height: 44px; flex: none; border-radius: 12px;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center;
    transition: background .16s ease, color .16s ease;
}
.category-card__icon svg { width: 22px; height: 22px; }
.category-card:nth-child(2n) .category-card__icon { background: var(--green-100); color: var(--green-600); }
.category-card:hover .category-card__icon { background: var(--color-accent); color: #fff; }
.category-card:nth-child(2n):hover .category-card__icon { background: var(--color-secondary); }
.category-card__body { display: grid; gap: .3rem; min-width: 0; flex: 1; }
.category-card__body b { font-size: var(--step-0); font-weight: 700; color: var(--ink-900); }
.category-card__body p { font-size: var(--step--1); color: var(--ink-500); margin: 0; }
.category-card__body small { font-size: .78rem; color: var(--ink-300); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.category-card__cue { color: var(--ink-300); font-weight: 800; flex: none; align-self: center; transition: transform .16s ease, color .16s ease; }
.category-card:hover .category-card__cue { color: var(--color-accent); transform: translateX(3px); }

/* "See all" footer beneath a truncated card grid */
.section__more {
    display: flex; flex-direction: column; align-items: center;
    gap: .75rem; margin-top: var(--space-4); text-align: center;
}
.section__more p {
    font-size: var(--step--1); color: var(--ink-500);
    max-width: 46ch; margin: 0;
}

/* ===== Why choose us ===== */
.why-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
/* Normal flow rather than absolute positioning -- the absolutely positioned
   badge overlapped the heading, since its box extended past the card's
   padding-top. */
.why-card {
    background: var(--surface-soft);
    border: 1px solid var(--color-border); border-radius: var(--radius-card);
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: .5rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.why-card__num {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center; font-weight: 800; font-size: .9rem;
}
/* Same alternation as .benefit-card: the logo carries both brand colours,
   and a run of same-tinted numbered circles reads flatter than the two
   working together does. */
.why-card:nth-child(2n) .why-card__num { background: var(--green-100); color: var(--green-600); }
.why-card h3 { font-size: var(--step-0); }
.why-card p { font-size: var(--step--1); margin: 0; }

/* ===== Pricing teaser ===== */
.price-teaser { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 800px) { .price-teaser { grid-template-columns: repeat(3, 1fr); } }
.price-teaser__card {
    position: relative; background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-xs);
    display: grid; gap: .5rem; align-content: start;
}
.price-teaser__card.is-featured { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.price-teaser__badge {
    position: absolute; top: -12px; left: var(--space-3);
    background: var(--color-accent); color: #fff; font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .07em; padding: .3rem .8rem;
    border-radius: var(--radius-button);
}
.price-teaser__price strong { font-size: var(--step-3); color: var(--ink-900); letter-spacing: -.03em; display: block; line-height: 1.05; }
.price-teaser__price span { font-size: var(--step--1); color: var(--ink-500); }
.price-teaser__for { font-size: var(--step--1); }
.price-teaser__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); justify-content: center; }

/* ===== Carer vetting ===== */
.vetting { display: grid; gap: var(--space-4); align-items: center; }
@media (min-width: 900px) { .vetting { grid-template-columns: 1.4fr 1fr; } }
.vetting__content h2 { margin-bottom: var(--space-2); }
.vetting__list { display: grid; gap: .7rem; margin-block: var(--space-3); }
.vetting__list li {
    position: relative; padding-left: 2rem; font-weight: 600;
    color: var(--ink-700); font-size: var(--step--1);
}
.vetting__list li::before {
    content: ""; position: absolute; left: 0; top: .1em;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.vetting__media { display: grid; gap: var(--space-3); }

.vetting__photo { position: relative; margin: 0; }
.vetting__photo img {
    width: 100%; height: auto; display: block;
    border-radius: var(--radius-lg); object-fit: cover;
    box-shadow: var(--shadow-lg, 0 18px 48px -24px rgba(28,27,34,.45));
}
/* Overlapping stamp: ties the claim to the photo instead of leaving the
   credential floating in its own empty panel. */
.vetting__stamp {
    position: absolute; left: var(--space-2); bottom: calc(-1 * var(--space-2));
    display: flex; align-items: center; gap: .7rem;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: .7rem .95rem;
    box-shadow: var(--shadow-md); max-width: calc(100% - var(--space-4));
}
.vetting__stamp-icon {
    width: 34px; height: 34px; flex: none; border-radius: 10px;
    background: var(--green-100); color: var(--green-500);
    display: grid; place-items: center;
}
.vetting__stamp-icon svg { width: 18px; height: 18px; }
.vetting__stamp span b { display: block; font-size: var(--step--1); color: var(--ink-900); line-height: 1.25; }
.vetting__stamp span { font-size: .78rem; color: var(--ink-500); line-height: 1.35; }

.vetting__badges {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
    justify-content: center; padding-top: var(--space-3);
}
.vetting__badges img { height: 52px; width: auto; object-fit: contain; }

/* ===== Breadcrumbs ===== */
.breadcrumbs {
    padding-block: var(--space-2); font-size: var(--step--1); color: var(--ink-300);
    display: flex; flex-wrap: wrap; gap: .35rem; align-items: center;
}
.breadcrumbs a { color: var(--ink-500); }
.breadcrumbs a:hover { color: var(--color-accent-dark); text-decoration: underline; }
.breadcrumbs a:last-child { color: var(--ink-900); font-weight: 600; }

/* ===== How it works ===== */
.steps { display: grid; gap: var(--space-3); counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
    position: relative; background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-4) var(--space-3) var(--space-3);
    box-shadow: var(--shadow-xs);
}
.step::before {
    counter-increment: step; content: counter(step);
    position: absolute; top: calc(-1 * var(--space-2)); left: var(--space-3);
    width: 48px; height: 48px; border-radius: 16px;
    background: var(--color-accent); color: #fff;
    display: grid; place-items: center; font-weight: 800; font-size: var(--step-1);
    box-shadow: var(--shadow-pink);
}
.step h3 { margin-bottom: .4rem; }
.step p { font-size: var(--step--1); }

/* ===== FAQ accordion ===== */
/* Two-column FAQ: the accordion alone left a wide dead column, but running it
   full width pushes answers past a readable measure. Splitting solves both. */
.faq-layout { display: grid; gap: var(--space-4); align-items: start; }
/* Grid items default to min-width:auto (their min-content size), so on the
   single-column mobile layout a wide unbreakable child can blow the track
   past the viewport instead of shrinking to fit -- min-width:0 lets it wrap
   normally like a regular block. */
.faq-layout__intro, .faq-list { min-width: 0; }
@media (min-width: 920px) {
    .faq-layout { grid-template-columns: minmax(280px, 1fr) 1.55fr; gap: var(--space-5); }
    .faq-layout__intro { position: sticky; top: calc(var(--header-height, 88px) + var(--space-3)); }
}
.faq-layout .section__header { margin-bottom: var(--space-3); }

.faq-aside {
    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    /* Roomier than the default card padding: this sits in a wide column of
       its own next to the heading, so at --space-3 the text crowded the
       edges and the whole panel read as cramped against its neighbours. */
    padding: var(--space-4) var(--space-3);
    box-shadow: var(--shadow-soft);
    display: grid;
    gap: .9rem;
    justify-items: start;
}
.faq-aside__lead { font-weight: 800; color: var(--ink-900); margin: 0; font-size: var(--step-1); }
.faq-aside p { font-size: var(--step-0); color: var(--ink-700); margin: 0; }
.faq-aside__phone { margin-top: .35rem; }
/* Sized to its label rather than stretched across the card -- full-width it
   outweighed the phone number above it, which is the action we actually want. */
.faq-aside .btn { align-self: start; }

/* One connected panel rather than floating cards: separate rounded boxes with
   large gaps read as unrelated items and waste vertical space. A single
   surface with hairline dividers scans as a list, which is what it is. */
.faq-list {
    background: var(--surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    /* The row's height is set by whichever column is taller, and the intro
       column (heading + standfirst + contact card) usually wins once answers
       are collapsed -- measured at 171px of overhang with all five shut. The
       grid's align-items:start left the panel floating short of it, so the
       section ended on a ragged edge. Stretching the panel keeps both columns
       flush whatever is open; the slack lands inside the border, where it
       reads as padding. */
    align-self: stretch;
}
.faq-item + .faq-item { border-top: 1px solid var(--color-border); }

.faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    font-weight: 700;
    font-size: var(--step-0);
    line-height: 1.4;
    color: var(--ink-900);
    transition: background .15s ease, color .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--surface-soft); color: var(--color-accent-dark); }
.faq-item summary:focus-visible {
    outline: 2px solid var(--color-accent); outline-offset: -2px;
}

/* The toggle leads rather than floats far right -- at wide widths a
   right-aligned icon ends up detached from the question it belongs to. */
.faq-item summary span {
    order: -1;
    flex: none;
    width: 26px; height: 26px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--pink-100);
    color: var(--color-accent-dark);
    display: grid; place-items: center;
    font-weight: 800; font-size: 1rem; line-height: 1;
    transition: transform .22s ease, background .15s ease, color .15s ease;
}
.faq-item summary:hover span { background: var(--color-accent); color: #fff; }
.faq-item[open] summary { color: var(--color-accent-dark); }
.faq-item[open] summary span {
    transform: rotate(45deg);
    background: var(--color-accent); color: #fff;
}

/* An open item gets a tinted ground so the answer reads as one block with its
   question, rather than as loose text sitting under a bar. */
.faq-item[open] { background: var(--surface-soft); }
.faq-item[open] summary:hover { background: transparent; }

.faq-item p {
    margin: 0;
    padding: 0 var(--space-3) var(--space-3) calc(var(--space-3) + 26px + var(--space-3));
    font-size: var(--step--1);
    color: var(--ink-700);
    max-width: 68ch;
}
@media (max-width: 560px) {
    .faq-item summary { padding: var(--space-2); gap: var(--space-2); }
    .faq-item p { padding: 0 var(--space-2) var(--space-2) calc(var(--space-2) + 26px + var(--space-2)); }
}

/* ===== Related / internal link chips ===== */
.related-links { display: flex; flex-wrap: wrap; gap: .6rem; }
.related-links li a {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-button); padding: .55rem 1.1rem;
    font-size: var(--step--1); font-weight: 600; color: var(--ink-700);
    box-shadow: var(--shadow-xs); transition: all .18s ease;
}
.related-links li a::before {
    content: ""; width: 14px; height: 14px; flex: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}
.related-links li a:hover {
    border-color: var(--color-accent); color: var(--color-accent-dark);
    transform: translateY(-2px); box-shadow: var(--shadow-soft);
}
.related-links li a.is-major-city { font-weight: 800; color: var(--ink-900); }
.related-links--services li a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e95587' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}

/* Care-type chips on a provider page -- informational, not links, so no
   hover/focus treatment borrowed from .related-links or .city-pill. */
.provider-tags { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; }
.provider-tag {
    background: var(--surface-pink); color: var(--color-accent-dark);
    font-weight: 700; font-size: var(--step--1);
    padding: .5rem 1rem; border-radius: var(--radius-button);
    border: 1px solid var(--pink-200);
}
.provider-tag:nth-child(2n) {
    background: var(--surface-mint); color: var(--green-700); border-color: var(--green-100);
}

/* Overall regulator rating badge, in the hero. Fixed vocabulary (CQC/Care
   Inspectorate/CIW/RQIA all use variants of good/requires-improvement),
   mapped to the site's existing green (good) and page-notice amber
   (concern) tones rather than introducing a new red into the palette. */
.provider-rating-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: var(--step--1);
    padding: .5rem 1rem; border-radius: var(--radius-button);
    margin-bottom: var(--space-2); border: 1px solid;
}
.provider-rating-badge--good { background: var(--surface-mint); color: var(--green-700); border-color: var(--green-100); }
.provider-rating-badge--concern { background: #fff8ec; color: #8a5a12; border-color: #f0d9a8; }
.provider-rating-badge--neutral { background: var(--surface); color: var(--ink-700); border-color: var(--color-border); }

/* CQC/regulator sub-domain ratings (Safe, Caring, Effective, etc.) */
.provider-subratings {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2); list-style: none; padding: 0; margin: 0;
}
.provider-subratings__item {
    display: flex; flex-direction: column; gap: .3rem;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-2);
    border-left: 4px solid var(--color-border);
}
.provider-subratings__item--good { border-left-color: var(--green-500); }
.provider-subratings__item--concern { border-left-color: #d99a2b; }
.provider-subratings__label { font-size: var(--step--1); color: var(--ink-500); font-weight: 600; }
.provider-subratings__value { font-weight: 800; color: var(--ink-900); }

/* Support/specialism detail groups below the description */
.provider-detail-groups { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .provider-detail-groups { grid-template-columns: repeat(2, 1fr); } }
.provider-detail-group h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }

/* Region block on the locations index */
.region-block {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    margin-bottom: var(--space-3); box-shadow: var(--shadow-xs);
}
.region-block h2 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.region-block .related-links { margin-bottom: var(--space-2); }
.region-block__more { font-weight: 700; color: var(--color-accent-dark); font-size: var(--step--1); }
.region-block__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Page status notice =====
   Used where a page's current state changes what the reader should do -- the
   carer careers page announcing that applications are closed. Amber rather
   than the brand pink: this is information to absorb, not an action. */
.page-notice {
    display: flex; gap: var(--space-2); align-items: flex-start;
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: #fff8ec; border: 1px solid #f0d9a8;
    border-left: 4px solid #d99a2b;
    border-radius: var(--radius-card);
}
.page-notice__icon { flex: none; color: #b8760f; display: grid; place-items: center; }
.page-notice__icon svg { width: 22px; height: 22px; }
.page-notice__heading { font-weight: 800; color: var(--ink-900); margin: 0 0 .3rem; font-size: var(--step-0); }
.page-notice p { margin: 0; color: var(--ink-700); font-size: var(--step--1); }

/* ===== Page head (plain static pages) ===== */
.page-head {
    padding-block: var(--space-4) var(--space-3);
    background: radial-gradient(900px 380px at 80% -20%, var(--pink-100) 0%, transparent 65%);
    border-bottom: 1px solid var(--color-border);
}
.page-head__intro { font-size: var(--step-1); max-width: 60ch; margin-top: var(--space-2); }
.article-byline { font-size: var(--step--1); color: var(--ink-500); margin-top: var(--space-2); }
.article-byline__date { white-space: nowrap; }

/* ===== Pricing plans ===== */
.plan-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-2);
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-3) var(--space-3);
    box-shadow: var(--shadow-xs); height: 100%;
}
.plan-card--featured {
    border-color: var(--color-accent); box-shadow: var(--shadow-md);
    background: linear-gradient(180deg, var(--pink-50) 0%, var(--surface) 22%);
}
.plan-card__badge {
    position: absolute; top: -14px; left: var(--space-3);
    background: var(--color-accent); color: #fff; font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    padding: .35rem .9rem; border-radius: var(--radius-button); box-shadow: var(--shadow-pink);
}
.plan-card__price { display: flex; flex-direction: column; }
.plan-card__price strong { font-size: var(--step-3); color: var(--ink-900); line-height: 1.05; letter-spacing: -.03em; }
.plan-card__price span { font-size: var(--step--1); color: var(--ink-500); }
.plan-card__for { font-size: var(--step--1); color: var(--ink-500); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
.plan-card__features { display: grid; gap: .6rem; flex: 1; }
.plan-card__features li { position: relative; padding-left: 1.8rem; font-size: var(--step--1); color: var(--ink-700); }
.plan-card__features li::before {
    content: ""; position: absolute; left: 0; top: .3em; width: 19px; height: 19px; border-radius: 50%;
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.plan-card__note { font-size: .8rem; color: var(--ink-300); font-style: italic; }

/* ===== Team grid ===== */
.team-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3); text-align: center;
    box-shadow: var(--shadow-xs); transition: transform .2s ease, box-shadow .2s ease;
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.team-card img {
    width: 116px; height: 116px; border-radius: 50%; object-fit: cover;
    margin: 0 auto var(--space-2); border: 4px solid var(--pink-100);
    transition: border-color .2s ease;
}
.team-card:hover img { border-color: var(--color-accent); }
.team-card h3 { font-size: var(--step-0); margin-bottom: .15rem; }
.team-card__role { color: var(--color-accent-dark); font-weight: 700; font-size: var(--step--1); margin-bottom: .6rem; }
.team-card p { font-size: var(--step--1); }

/* ===== Review grid ===== */
.review-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .review-grid { grid-template-columns: repeat(2, 1fr); } }
.review-card {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column; gap: .6rem;
}
.review-card blockquote { color: var(--ink-700); font-size: var(--step-0); }
.review-card blockquote::before { content: "\201C"; color: var(--pink-200); font-size: 2.4rem; line-height: 0; vertical-align: -.35em; margin-right: .1em; }
.review-card cite { font-style: normal; font-weight: 700; font-size: var(--step--1); color: var(--ink-900); }

/* ===== Testimonials: continuously scrolling single row ===== */
.testimonial-marquee {
    position: relative; overflow: hidden;
    /* fade the cards out at both edges rather than cutting them dead */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testimonial-marquee__track {
    display: flex; gap: var(--space-3); width: max-content;
    padding-block: var(--space-1) var(--space-3);
    animation: marquee 46s linear infinite;
}
.testimonial-marquee:hover .testimonial-marquee__track,
.testimonial-marquee:focus-within .testimonial-marquee__track { animation-play-state: paused; }
@keyframes marquee {
    from { transform: translateX(0); }
    /* the track holds two copies of the list, so -50% is one seamless loop */
    to   { transform: translateX(-50%); }
}

.testimonial-card {
    flex: 0 0 300px;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column; gap: .5rem;
}
@media (min-width: 768px) { .testimonial-card { flex-basis: 360px; } }
.testimonial-card__stars { color: #f5a623; letter-spacing: 2px; }
.testimonial-card blockquote { color: var(--ink-700); font-size: var(--step--1); flex: 1; }
.testimonial-card cite { font-style: normal; font-weight: 700; font-size: var(--step--1); }
.testimonial-card__source { font-size: .75rem; color: var(--ink-300); }

/* Motion-sensitive users get a normal swipeable row instead of animation. */
@media (prefers-reduced-motion: reduce) {
    .testimonial-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
    .testimonial-marquee__track { animation: none; width: auto; }
}

/* ===== Lead form ===== */
.lead-form {
    background: radial-gradient(900px 400px at 10% 0%, var(--pink-100) 0%, transparent 60%), var(--surface-mint);
    padding-block: var(--space-5); scroll-margin-top: 90px;
}
.lead-form__inner {
    max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2);
    display: grid; gap: var(--space-4); align-items: start;
}
.lead-form__eyebrow {
    text-transform: uppercase; letter-spacing: .1em; font-size: .78rem;
    font-weight: 800; color: var(--color-secondary); margin-bottom: .5rem;
}
.lead-form__intro h2 { margin-bottom: var(--space-2); }
.lead-form__reassurance { display: grid; gap: .65rem; margin-block: var(--space-3); }
.lead-form__reassurance li {
    position: relative; padding-left: 2rem; font-weight: 600;
    color: var(--ink-700); font-size: var(--step--1);
}
.lead-form__reassurance li::before {
    content: ""; position: absolute; left: 0; top: .1em;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.lead-form__phone { font-weight: 600; color: var(--ink-700); }
.lead-form__phone a {
    display: block; font-size: var(--step-2); font-weight: 800;
    color: var(--color-accent-dark); letter-spacing: -.02em;
}
.lead-form__phone span { display: block; font-size: var(--step--1); color: var(--ink-500); font-weight: 500; }

.lead-form__panel {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-lg); padding: var(--space-3); box-shadow: var(--shadow-lg);
}
.lead-form__form { display: grid; gap: var(--space-2); }
.field-row { display: grid; gap: var(--space-2); }
.field { display: flex; flex-direction: column; min-width: 0; }
.field label { font-weight: 700; font-size: var(--step--1); margin-bottom: .35rem; color: var(--ink-700); }
.field input, .field select {
    width: 100%; min-height: 48px; padding: 0 .9rem;
    border: 1.5px solid var(--color-border); border-radius: 12px;
    background: var(--surface-soft); transition: border-color .15s ease, box-shadow .15s ease;
}
.field select {
    appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23635f70' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem;
}
.field input:focus, .field select:focus {
    outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 4px var(--pink-100); background: var(--surface);
}
.lead-form__submit { margin-top: var(--space-1); }
.lead-form__privacy { font-size: .78rem; color: var(--ink-300); text-align: center; }
.lead-form__privacy a { color: var(--ink-500); text-decoration: underline; }
.lead-form__success {
    background: var(--green-50); border: 1px solid var(--green-100);
    border-radius: var(--radius-card); padding: var(--space-3); text-align: center;
}
.lead-form__success h3 { color: var(--green-700); margin-bottom: .5rem; }

@media (min-width: 900px) {
    .lead-form__inner { grid-template-columns: 1fr 1.05fr; gap: var(--space-5); padding-inline: var(--space-3); }
    .lead-form__panel { padding: var(--space-4); }
    .field-row { grid-template-columns: 1fr 1fr; }
    /* Equal halves wrap "Postcode where care will take place" onto 2 lines --
       the age field's own content needs far less room, so weight the split
       to match instead of shrinking either label. */
    .field-row--age-zip { grid-template-columns: 0.3fr 0.7fr; }
}

/* ===== Location map ===== */
.location-map { max-width: var(--max-width); margin: var(--space-5) auto; padding-inline: var(--space-2); }
.location-map__frame {
    aspect-ratio: 16/9; border-radius: var(--radius-card); overflow: hidden;
    box-shadow: var(--shadow-soft); background: var(--surface-pink);
    display: grid; place-items: center; margin-bottom: var(--space-2);
    border: 1px solid var(--color-border);
}
.location-map__frame iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) {
    .location-map { padding-inline: var(--space-3); }
    .location-map__frame { aspect-ratio: 21/9; }
}

/* ===== Review widgets ===== */
/* Compact strip -- site-wide. Given a tinted band and real weight so it reads
   as a trust signal rather than disappearing into the page. */
.review-strip {
    background: linear-gradient(180deg, var(--surface-mint) 0%, var(--surface) 100%);
    border-block: 1px solid var(--green-100);
    padding-block: var(--space-3);
}
.review-strip__inner {
    max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2);
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
    align-items: center; justify-content: center; text-align: center;
}
/* Fixed 300px, matching the action bar's Trustpilot slot: the widget sizes
   itself to its container, so a range (220-300px) let it render narrow enough
   to drop back to a bare logo. */
.review-strip__tp { width: 300px; flex: none; }
.review-strip__divider { display: none; width: 1px; height: 28px; background: var(--green-100); }
@media (min-width: 720px) { .review-strip__divider { display: block; } }
.review-strip__link {
    display: inline-flex; align-items: center; gap: .45rem;
    color: var(--color-accent-dark); font-weight: 800; font-size: var(--step-0);
}
.review-strip__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Hero trust badge -- the most-seen position on the page. */
/* Phone number and Google rating side by side. The row itself is no longer a
   pill: the badge brings its own, and a pill inside a pill read as a box in a
   box. The old rule also restyled every link inside, which flattened the phone
   number -- both are their own components now. */
.hero__reviews {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-3);
}
/* Wraps the live Elfsight widget + its static fallback badge (see
   includes/google-reviews-widget.php) -- display:contents removes the
   wrapper from layout entirely so .hero__reviews' flex rules still apply
   directly to whichever of the two is actually visible, same as before
   this wrapper existed. */
.g-reviews-widget { display: contents; }

/* Full review wall -- /reviews/ only. */
.tp-badge {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    box-shadow: var(--shadow-xs); max-width: 420px; margin: 0 auto var(--space-4);
}
.tp-badge .trustpilot-widget { width: 100%; }

/* ===== Trustpilot block (score panel + scrolling review cards) ===== */
.tp-block { padding-block: var(--space-4); }
.tp-block__inner {
    max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2);
    display: grid; gap: var(--space-3); align-items: center;
}
@media (min-width: 900px) { .tp-block__inner { grid-template-columns: 230px 1fr; gap: var(--space-4); align-items: start; } }

.tp-block__score { text-align: center; display: grid; gap: var(--space-1); justify-items: center; }
/* Only once the two columns sit side by side -- stacked on mobile they should
   not be pushed apart. */
@media (min-width: 900px) {
    .tp-block__score { padding-top: calc(.78rem * 1.25 + var(--space-2)); }
    .tp-block__reviews { padding-top: calc(.78rem * 1.25 + var(--space-2)); }
}
.tp-block__score .trustpilot-widget { width: 100%; }
.tp-block__links { display: grid; gap: .5rem; justify-items: center; width: 100%; margin-top: .5rem; }
.tp-block__all {
    font-weight: 700; font-size: var(--step--1);
    color: var(--tp-green, #00B67A);
    display: inline-flex; align-items: center; gap: .3rem;
}
.tp-block__all:hover { color: #00996a; text-decoration: underline; text-underline-offset: 3px; }
.tp-block__write-intro { font-size: .78rem; color: var(--ink-300); margin-top: .4rem; }
.tp-block__write { width: 100%; min-height: 42px; font-size: .82rem; padding-inline: .75rem; }
.tp-block__all:hover { text-decoration: underline; text-underline-offset: 3px; }

.tp-block__reviews { min-width: 0; display: grid; gap: var(--space-2); }
.tp-block__reviews .trustpilot-widget { width: 100%; min-height: 240px; }
.tp-block__cards-label {
    --tp-label-size: .78rem;
    --tp-label-lh: 1.25;
    font-size: var(--tp-label-size); font-weight: 800; text-transform: uppercase;
    letter-spacing: .08em; line-height: var(--tp-label-lh);
    color: var(--ink-300); margin: 0;
}
.tp-block__cards { position: relative; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.tp-track {
    display: flex; gap: var(--space-3); overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; padding: .5rem .25rem;
    scrollbar-width: none; -ms-overflow-style: none; flex: 1; min-width: 0;
    scroll-padding-inline: .25rem;
}
.tp-track::-webkit-scrollbar { display: none; }

.tp-block__platforms { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.platform-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-button); padding: .4rem .8rem;
    font-size: .8rem; font-weight: 700; color: var(--ink-700);
    box-shadow: var(--shadow-xs); transition: all .15s ease;
}
.platform-badge:hover { border-color: var(--color-accent); transform: translateY(-1px); }

.tp-review {
    flex: 0 0 268px; scroll-snap-align: start; display: grid; gap: .5rem; align-content: start;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3); box-shadow: var(--shadow-xs);
}
@media (min-width: 640px) { .tp-review { flex-basis: 300px; } }

.tp-review__head { display: flex; align-items: center; gap: .7rem; }
.tp-avatar {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; color: #fff;
    font-weight: 800; font-size: 1.15rem; line-height: 1;
}
.tp-review__name { font-weight: 800; color: var(--ink-900); font-size: var(--step--1); margin-bottom: .25rem; }
.tp-review__label { font-weight: 700; font-size: var(--step--1); color: var(--ink-900); }

/* Trustpilot-style green star blocks */
.tp-stars { display: flex; gap: 3px; }
.tp-stars span {
    width: 22px; height: 22px; background: #00b67a; border-radius: 2px;
    display: inline-block; position: relative; overflow: hidden;
}
.tp-stars span::after {
    content: "★"; position: absolute; inset: 0; color: #fff;
    font-size: 15px; line-height: 22px; text-align: center;
}
.tp-stars span.is-empty { background: #dcdce6; }
.tp-stars span.is-half { background: linear-gradient(90deg, #00b67a 50%, #dcdce6 50%); }

/* Score panel (Excellent / stars / based on N reviews / logo) */
.tp-stars--lg { justify-content: center; gap: 4px; }
.tp-stars--lg span { width: 34px; height: 34px; border-radius: 3px; }
.tp-stars--lg span::after { font-size: 23px; line-height: 34px; }

.tp-score { display: grid; gap: .6rem; justify-items: center; text-align: center; }
.tp-score__word { font-size: var(--step-2); font-weight: 700; color: var(--ink-900); line-height: 1; }
.tp-score__count { font-size: var(--step--1); color: var(--ink-500); }
.tp-score__count a { color: var(--ink-700); text-decoration: underline; text-underline-offset: 3px; }
.tp-score__count a:hover { color: var(--color-accent-dark); }
.tp-score__logo {
    display: inline-flex; align-items: center; gap: .35rem;
    font-weight: 800; color: var(--ink-900); font-size: 1.05rem;
    transition: opacity .15s ease;
}
.tp-score__logo::before {
    content: "";
}
.tp-score__logo svg {
    display: block; flex: none;
}
.tp-score__logo--fallback {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: 0;
}
.tp-score__stars-fallback {
    display: inline-flex; flex-direction: row; align-items: center; gap: 2px;
    line-height: 1;
}
.tp-score__stars-fallback svg {
    display: block; width: 18px; height: 18px; flex: none;
}
.tp-score__logo:hover { opacity: .7; text-decoration: none; }
.tp-review__meta { font-size: var(--step--1); color: var(--ink-500); }
.tp-review__meta strong { color: var(--ink-900); }
.tp-review__body {
    font-size: var(--step--1); color: var(--ink-700);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

.tp-nav {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid var(--color-border); background: var(--surface);
    color: var(--ink-500); font-size: 1.3rem; line-height: 1; cursor: pointer;
    display: none; place-items: center; transition: all .15s ease;
}
@media (min-width: 640px) { .tp-nav { display: grid; } }
.tp-nav:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }

.tp-block__note {
    max-width: var(--max-width); margin: var(--space-2) auto 0; padding-inline: var(--space-2);
    font-size: .78rem; color: var(--ink-300); text-align: center;
}
.tp-block__note a { color: var(--ink-500); text-decoration: underline; }

/* Trustpilot Review Carousel needs room -- it renders a TrustScore block plus
   review cards. Anything under ~220px clips it into looking broken. */
.tp-carousel {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3) var(--space-2);
    box-shadow: var(--shadow-xs); margin-bottom: var(--space-4);
    min-height: 240px;
}
.tp-carousel .trustpilot-widget { width: 100%; }

.reviews-google {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    box-shadow: var(--shadow-xs); overflow: hidden;
}
.reviews-google__head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-bottom: var(--space-3);
    padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border);
}
.reviews-google__head h3 { font-size: var(--step-1); }
.reviews-google__head a { color: var(--color-accent-dark); font-weight: 700; font-size: var(--step--1); }
.reviews-google__head a:hover { text-decoration: underline; text-underline-offset: 3px; }
.reviews-google [class^="elfsight-app-"] { width: 100%; }

/* ===== Cost calculator modal ===== */
/* `.btn { display:inline-flex }` beats the UA `[hidden]` rule on specificity,
   which made the hidden Back button visible on step 1 -- force it back. */
[hidden] { display: none !important; }

.cost-modal {
    border: none; border-radius: var(--radius-lg); padding: 0;
    max-width: 620px; width: calc(100% - 2rem);
    max-height: calc(100vh - 2rem);
    margin: auto;                 /* centres in both axes for showModal() */
    box-shadow: var(--shadow-lg); background: var(--surface); color: var(--color-ink);
    /* Scrolling lives on __inner, not here -- a scrollbar on this element
       would cut straight through the rounded corners above (overflow:auto
       ignores border-radius), which is exactly the "scrollbar overlapping
       the corner" look this avoids. */
    overflow: hidden;
}
/* An author rule always beats the browser's own dialog:not([open]){display:none}
   default, regardless of specificity -- so `display` must only be set here
   while [open] is present, or the dialog would stay visible (in normal page
   flow) even when closed. */
.cost-modal[open] { display: flex; }
.cost-modal::backdrop { background: rgba(28, 27, 34, .55); backdrop-filter: blur(3px); }
.cost-modal__inner {
    padding: var(--space-3);
    overflow-y: auto; min-height: 0; flex: 1;
}
.cost-modal__close-wrap { position: absolute; top: .75rem; right: .75rem; margin: 0; }
.cost-modal__close {
    width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border);
    background: var(--surface); font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--ink-500);
}
.cost-modal__close:hover { background: var(--surface-pink); color: var(--color-accent-dark); }
.cost-modal__eyebrow {
    text-transform: uppercase; letter-spacing: .1em; font-size: .74rem;
    font-weight: 800; color: var(--color-secondary); margin-bottom: .4rem;
}
.cost-modal h2 { font-size: var(--step-2); margin-bottom: var(--space-2); }
.cost-modal__progress { display: flex; gap: 6px; margin-bottom: var(--space-2); }
.cost-modal__progress span {
    height: 5px; flex: 1; border-radius: 3px; background: var(--ink-100); transition: background .25s ease;
}
.cost-modal__progress span.is-active { background: var(--color-accent); }

.cost-step { display: none; border: none; }
.cost-step.is-active { display: flex; flex-direction: column; gap: .75rem; }
.cost-step legend { font-weight: 800; font-size: var(--step-1); margin-bottom: var(--space-2); color: var(--ink-900); }
.cost-options { display: grid; gap: .6rem; margin-bottom: var(--space-2); }
.cost-option {
    display: flex; flex-direction: column; gap: .2rem; text-align: left;
    background: var(--surface-soft); border: 1.5px solid var(--color-border);
    border-radius: 14px; padding: .9rem 1.1rem; cursor: pointer; font-weight: 600;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.cost-option:hover { border-color: var(--color-accent); background: var(--pink-50); transform: translateY(-2px); }
.cost-option span { font-weight: 500; font-size: var(--step--1); color: var(--ink-500); }

/* Inline validation */
.field input.is-invalid, .field select.is-invalid {
    border-color: #d93a5c; background: #fdf3f5;
}
.field input.is-invalid:focus, .field select.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(217, 58, 92, .14);
}
.field__error {
    display: none; color: #c0304f; font-size: .8rem; font-weight: 600; margin-top: .3rem;
}
.field__error.is-shown { display: block; }

.cost-estimate {
    background: var(--green-50); border: 1px solid var(--green-100);
    border-radius: var(--radius-card); padding: var(--space-2); text-align: center;
}
.cost-estimate__label { text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; font-weight: 800; color: var(--green-700); }
.cost-estimate__value { font-size: var(--step-3); font-weight: 800; color: var(--ink-900); line-height: 1.1; letter-spacing: -.02em; }
.cost-estimate__note { font-size: .8rem; color: var(--ink-500); margin-top: .4rem; }

.cost-modal__success {
    background: var(--green-50); border: 1px solid var(--green-100);
    border-radius: var(--radius-card); padding: var(--space-3); text-align: center;
}
.cost-modal__success h3 { color: var(--green-700); margin-bottom: .5rem; }
.cost-modal__success-phone { margin: var(--space-2) auto 0; }
.cost-modal__success-close { margin-top: var(--space-3); }
.cost-modal__nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-top: .75rem;
    padding-top: var(--space-1); border-top: 1px solid var(--color-border);
}
.cost-modal__nav .btn { min-height: 42px; padding-inline: 1.1rem; font-size: var(--step--1); }
.cost-modal__step-label { font-size: .8rem; color: var(--ink-300); margin-left: auto; }

/* Short/laptop-height viewports (e.g. a 15.6" laptop with browser chrome
   eating into ~650-700px of vertical space): trim further so step 4 -- the
   tallest step, estimate box + 3 fields + button + nav -- fits without the
   dialog needing to scroll internally. */
@media (max-height: 720px) {
    .cost-modal__inner { padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .cost-modal h2 { margin-bottom: var(--space-1); }
    .cost-modal__progress { margin-bottom: var(--space-1); }
    .cost-estimate { padding: .65rem var(--space-2); }
    .cost-estimate__value { font-size: var(--step-2); }
    .cost-step.is-active { gap: .6rem; }
}

/* ===== Article hero ===== */
.article-hero {
    width: 100%; aspect-ratio: 21/9; object-fit: cover;
    border-radius: var(--radius-card); box-shadow: var(--shadow-soft);
    margin-top: var(--space-3);
}

/* ===== Contact cards ===== */
.contact-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    box-shadow: var(--shadow-xs); display: grid; gap: .4rem; align-content: start;
    transition: transform .2s ease, box-shadow .2s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-card h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-secondary); }
.contact-card__value { font-size: var(--step-1); font-weight: 800; color: var(--ink-900); line-height: 1.25; }
.contact-card__value:hover { color: var(--color-accent-dark); }
.contact-card p { font-size: var(--step--1); }

/* ===== Brochure download ===== */
.brochure {
    display: grid; gap: var(--space-3); align-items: center;
    background: linear-gradient(180deg, var(--pink-50), var(--surface));
    border: 1px solid var(--pink-200); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3);
}
@media (min-width: 760px) { .brochure { grid-template-columns: auto 1fr auto; padding: var(--space-4); } }
.brochure__icon {
    width: 60px; height: 60px; border-radius: 16px; background: var(--surface);
    border: 1px solid var(--pink-200); display: grid; place-items: center; color: var(--color-accent-dark);
}
.brochure__icon svg { width: 28px; height: 28px; }
.brochure h2 { font-size: var(--step-1); margin-bottom: .25rem; }
.brochure p { font-size: var(--step--1); }

/* ===== TikTok feed (About Us only) ===== */
.tiktok-feed { min-height: 420px; }

/* ===== Media testimonials (audio / video) ===== */
.media-subhead { font-size: var(--step-1); margin: var(--space-4) 0 var(--space-2); }
.media-feature { max-width: 820px; margin-inline: auto; }

.yt-facade {
    position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: pointer;
    border-radius: var(--radius-card); overflow: hidden; background: var(--ink-900);
    box-shadow: var(--shadow-md);
}
.yt-facade img { width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .85; transition: opacity .2s ease, transform .3s ease; }
.yt-facade:hover img { opacity: 1; transform: scale(1.02); }
.yt-facade__play {
    position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
    border-radius: 50%; background: var(--color-accent); box-shadow: var(--shadow-pink);
}
.yt-facade__play::after {
    content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
    border-style: solid; border-width: 13px 0 13px 21px;
    border-color: transparent transparent transparent #fff; transform: translateX(3px);
}
.yt-facade__label {
    position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-2);
    color: #fff; font-weight: 700; font-size: var(--step--1); text-align: left;
    background: linear-gradient(180deg, transparent, rgba(0,0,0,.65));
}
.yt-facade iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

.media-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 680px)  { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .media-grid { grid-template-columns: repeat(3, 1fr); } }

.media-card {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-xs);
    display: flex; flex-direction: column;
}
.media-card video { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--ink-900); }
.media-card figcaption { padding: var(--space-2) var(--space-3) var(--space-3); display: grid; gap: .25rem; }
.media-card figcaption strong { font-weight: 800; }
.media-card figcaption span { font-size: var(--step--1); color: var(--ink-500); }

.media-card--audio { padding: var(--space-3); gap: var(--space-2); }
.media-card--audio figcaption { padding: 0; }
.media-card--audio audio { width: 100%; }
.media-grid--audio { grid-template-columns: 1fr; }
@media (min-width: 760px) { .media-grid--audio { grid-template-columns: repeat(3, 1fr); } }

/* ===== Trust bar ===== */
.trust-bar { background: var(--surface); border-block: 1px solid var(--color-border); padding-block: var(--space-3); }
.trust-bar__inner {
    max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2);
    display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4);
    align-items: center; justify-content: center;
}
.trust-bar__item { display: flex; align-items: center; gap: .6rem; font-size: var(--step--1); font-weight: 600; color: var(--ink-700); }
.trust-bar__item::before {
    content: ""; width: 26px; height: 26px; flex: none; border-radius: 50%;
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/15px no-repeat;
}
.trust-bar img { height: 40px; width: auto; }

/* ===== Footer ===== */
.site-footer { background: var(--ink-900); color: #e8e5ef; padding-block: var(--space-5) var(--space-3); }
.site-footer__inner {
    max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-2);
    display: grid; gap: var(--space-4); grid-template-columns: 1fr;
}
.site-footer h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #fff; margin-bottom: var(--space-2); }
.site-footer__col nav + nav { margin-top: var(--space-3); }
/* Two columns rather than one long stack: on mobile this section alone
   used to be 13+ links tall (services), then another 14+ (locations) --
   a lot of scrolling for a footer. Each .site-footer__col already gets
   its own full section width at this size (site-footer__inner is still
   one column below the 760px breakpoint), so there's room to split the
   link list itself in two without it fighting the section layout above. */
.site-footer__col ul { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem var(--space-2); }
@media (min-width: 760px) {
    .site-footer__col ul { grid-template-columns: 1fr; }
}
.site-footer a { color: #b8b4c6; font-size: var(--step--1); }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer a.site-footer__more { color: var(--pink-400); font-weight: 700; }

/* Brand column */
.site-footer__brand img { height: 74px; width: auto; margin-bottom: var(--space-2); }
.site-footer__address {
    font-style: normal; color: #a9a5b8; font-size: var(--step--1);
    line-height: 1.7; margin-bottom: var(--space-2);
}
.site-footer a.site-footer__directions { display: block; margin-top: .4rem; color: var(--pink-400); font-weight: 700; }
.site-footer__phone { margin-bottom: var(--space-2); }
.site-footer .site-footer__phone a { color: #fff; font-weight: 800; font-size: var(--step-1); }
.site-footer__phone span { display: block; color: #837f92; font-size: .78rem; }
.site-footer__contacts { display: grid; gap: .15rem; font-size: var(--step--1); }
.site-footer__contacts dt { color: #837f92; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-top: .5rem; }
.site-footer__contacts dd { margin: 0; }

/* Newsletter + awards band */
.site-footer__mid {
    max-width: var(--max-width); margin: var(--space-5) auto 0; padding-inline: var(--space-2);
    display: grid; gap: var(--space-4); align-items: start;
    border-top: 1px solid #322f3d; padding-top: var(--space-4);
}
@media (min-width: 860px) { .site-footer__mid { grid-template-columns: 1.4fr 1fr; } }
.site-footer__newsletter h2 { font-size: var(--step-1); text-transform: none; letter-spacing: -.01em; }
.site-footer__newsletter p { color: #a9a5b8; font-size: var(--step--1); margin-bottom: var(--space-2); }
.newsletter-form { display: flex; flex-wrap: wrap; gap: .6rem; }
.newsletter-form input {
    flex: 1 1 220px; min-height: 50px; padding: 0 1rem;
    border: 1.5px solid #3a3746; border-radius: 12px;
    background: #26242f; color: #fff;
}
.newsletter-form input::placeholder { color: #837f92; }
.newsletter-form input:focus { outline: none; border-color: var(--color-accent); background: #2c2936; }
.newsletter-form .btn { min-height: 50px; }
.site-footer__awards-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.site-footer__awards-row img {
    height: 54px; width: auto; border-radius: 10px;
    background: #fff; padding: 7px 10px; object-fit: contain;
}

/* Award ceremony photos (About page) */
.award-gallery { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px)  { .award-gallery { grid-template-columns: repeat(3, 1fr); } }
.award-gallery figure {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-xs);
}
.award-gallery img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.award-gallery figcaption {
    padding: var(--space-2); font-size: var(--step--1); font-weight: 700; text-align: center; color: var(--ink-700);
}

/* Accreditation badge row */
.accreditation-row {
    display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: center;
    margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border);
}
.accreditation-row img { height: 58px; width: auto; object-fit: contain; }

/* Regulatory disclosure */
.site-footer__legal-note {
    max-width: var(--max-width); margin: var(--space-4) auto 0; padding-inline: var(--space-2);
}
.site-footer__legal-note p {
    font-size: .8rem; line-height: 1.7; color: #837f92;
    background: #26242f; border-radius: var(--radius-card); padding: var(--space-3);
}
.site-footer__legal-note a { color: #b8b4c6; text-decoration: underline; }

.site-footer__bottom {
    max-width: var(--max-width); margin: var(--space-3) auto 0; padding-inline: var(--space-2);
    display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between;
    align-items: flex-start; border-top: 1px solid #322f3d; padding-top: var(--space-3);
    font-size: .8rem; color: #837f92;
}
.site-footer__legal p { color: #837f92; font-size: .8rem; margin-bottom: .4rem; }
/* Pipe separators rather than bare gaps -- a row of links with only
   whitespace between them reads as one broken sentence. */
.site-footer__policies {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: .35rem .85rem; margin-top: .85rem; list-style: none; padding: 0;
}
.site-footer__policies li { display: flex; align-items: center; gap: .85rem; }
.site-footer__policies li:not(:last-child)::after {
    content: ""; width: 1px; height: 11px; background: #4a4553; display: block;
}
.site-footer__policies a { font-size: .78rem; }
/* Icon buttons, not a stacked text list. */
.site-footer__connect { display: grid; gap: .7rem; justify-items: start; }
@media (min-width: 900px) { .site-footer__connect { justify-items: end; } }
.site-footer__connect-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
    font-weight: 700; color: #837f92; margin: 0;
}
.site-footer__social {
    display: flex; flex-wrap: wrap; gap: .6rem;
    list-style: none; margin: 0; padding: 0;
}
.site-footer__social li { display: block; }
.site-footer__social a {
    width: 48px; height: 48px; border-radius: 50%;
    display: grid; place-items: center;
    background: #26242f; border: 1px solid #322f3d; color: #b8b4c6;
    transition: background .16s ease, color .16s ease, border-color .16s ease, transform .16s ease;
}
/* Brand colour on the glyph for recognition. TikTok and X are black-based
   brands, so their marks stay white -- true brand colour would disappear on a
   dark footer. On hover the circle fills with the brand colour instead. */
.site-footer__social a:hover { transform: translateY(-2px); text-decoration: none; }
.site-footer__social a.s--fb { color: #1877F2; }
.site-footer__social a.s--yt { color: #FF0000; }
.site-footer__social a.s--tt,
.site-footer__social a.s--x  { color: #ffffff; }

.site-footer__social a.s--fb:hover { background: #1877F2; border-color: #1877F2; color: #fff; }
.site-footer__social a.s--yt:hover { background: #FF0000; border-color: #FF0000; color: #fff; }
.site-footer__social a.s--tt:hover { background: #000; border-color: #25F4EE; color: #fff; }
.site-footer__social a.s--x:hover  { background: #000; border-color: #6b6675; color: #fff; }
.site-footer__social a.s--ig:hover {
    background: linear-gradient(45deg, #FEDA75, #FA7E1E 35%, #D62976 65%, #962FBF);
    border-color: transparent;
}
.site-footer__social a.s--ig:hover svg { stroke: #fff; }
.site-footer__social a.s--ig:hover svg circle[fill] { fill: #fff; }
.site-footer__social a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.site-footer__social svg { width: 22px; height: 22px; }

/* The registered-company line is legally required but should not shout. */
.site-footer__legal p:first-child { color: #b8b4c6; font-weight: 600; }
.site-footer__legal p { max-width: 78ch; line-height: 1.65; }

@media (min-width: 760px) { .site-footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-inline: var(--space-3); } }

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

/* ============================================================
   Service page content blocks
   ============================================================ */

/* Benefits: no icons here on purpose -- the homepage benefit cards already
   use them, and repeating the device makes the two sections look identical. */
.benefit-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .benefit-grid { grid-template-columns: repeat(3, 1fr); } }
.benefit-tile {
    background: var(--surface); border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-card); padding: var(--space-3);
    transition: transform .18s ease, box-shadow .18s ease;
}
.benefit-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.benefit-tile h3 { font-size: var(--step-0); margin-bottom: .4rem; }
.benefit-tile p { font-size: var(--step--1); margin: 0; }

/* Scenarios */
.scenario-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 760px)  { .scenario-grid { grid-template-columns: repeat(2, 1fr); } }
.scenario {
    background: var(--surface); border-radius: var(--radius-card);
    padding: var(--space-3); border: 1px solid var(--color-border);
    display: grid; gap: .4rem; align-content: start;
}
.scenario h3 {
    font-size: var(--step-0); line-height: 1.3; padding-left: 1.9rem; position: relative;
}
.scenario h3::before {
    content: ""; position: absolute; left: 0; top: .15em;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--pink-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c2185b' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/12px no-repeat;
}
.scenario p { font-size: var(--step--1); margin: 0; padding-left: 1.9rem; }

/* Day in the life -- a vertical timeline, because a day is a sequence */
.daytime { list-style: none; padding: 0; margin: 0; max-width: 62rem; }
.daytime__item {
    position: relative; padding: 0 0 var(--space-4) var(--space-5);
    border-left: 2px solid var(--color-border);
}
.daytime__item:last-child { border-left-color: transparent; padding-bottom: 0; }
.daytime__item::before {
    content: ""; position: absolute; left: -7px; top: .35rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--color-accent); box-shadow: 0 0 0 4px var(--surface);
}
.daytime__when {
    display: block; font-weight: 800; color: var(--ink-900);
    font-size: var(--step--1); text-transform: uppercase; letter-spacing: .06em;
    margin-bottom: .3rem;
}
.daytime p { margin: 0; max-width: 62ch; }

/* Included / not included */
.included { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 860px) { .included { grid-template-columns: 1.25fr 1fr; gap: var(--space-4); } }
.included__col {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
}
.included__col h3 { font-size: var(--step-0); margin-bottom: var(--space-2); }
.included__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.included__col li {
    position: relative; padding-left: 1.85rem;
    font-size: var(--step--1); color: var(--ink-700);
}
.included__col li::before {
    content: ""; position: absolute; left: 0; top: .15em;
    width: 20px; height: 20px; border-radius: 50%;
}
.included__col--yes li::before {
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
/* --surface-alt was never defined. An undefined custom property with no
   fallback invalidates the whole shorthand at computed-value time, so this
   entire background -- icon included -- was being dropped and the "not
   included" list rendered with no markers at all beside a ticked list. */
.included__col--no li::before {
    background: var(--ink-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23635f70' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* The two columns are a promise and a boundary, so they should not look
   identical. The included list gets the brand tint and a heavier border; the
   exclusions sit quieter, which is also the honest hierarchy. */
.included__col--yes {
    background: var(--surface); border-color: var(--green-100);
    box-shadow: var(--shadow-xs);
}
.included__col--no { background: var(--surface-soft); }
.included__col h3 {
    display: flex; align-items: center; gap: .5rem;
    padding-bottom: .7rem; margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}
.included__col h3::before {
    content: ''; width: 26px; height: 26px; border-radius: 8px; flex: none;
    background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23299b68' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/15px no-repeat;
}
.included__col--no h3::before {
    background: var(--ink-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23635f70' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") center/15px no-repeat;
}
.included__col--no li { color: var(--ink-500); }
.included__col li { line-height: 1.5; }

/* Comparison table */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
    width: 100%; border-collapse: collapse; min-width: 640px;
    background: var(--surface); border-radius: var(--radius-card); overflow: hidden;
    box-shadow: var(--shadow-xs);
}
.compare th, .compare td {
    text-align: left; padding: .85rem 1rem; font-size: var(--step--1);
    border-bottom: 1px solid var(--color-border); vertical-align: top;
}
.compare thead th {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .07em;
    color: var(--ink-500); background: var(--surface-soft); font-weight: 800;
}
.compare tbody th { font-weight: 700; color: var(--ink-900); width: 30%; }
.compare .is-ours { background: var(--pink-50, #fdf2f6); }
.compare thead .is-ours { color: var(--color-accent-dark); }
.compare tbody td.is-ours { font-weight: 700; color: var(--ink-900); }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: none; }
.compare__note {
    font-size: .82rem; color: var(--ink-500); margin-top: var(--space-2); max-width: 72ch;
}

/* Carer facts row */
.fact-row { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, 1fr); margin-block: var(--space-3); }
@media (min-width: 720px) { .fact-row { grid-template-columns: repeat(4, 1fr); } }
.fact {
    background: var(--surface-soft); border-radius: var(--radius-card);
    padding: var(--space-2); display: grid; gap: .25rem;
}
.fact b { font-size: var(--step-0); color: var(--color-accent-dark); line-height: 1.15; }
.fact span { font-size: .78rem; color: var(--ink-700); line-height: 1.4; }

/* Four areas of support */
.support-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 620px)  { .support-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .support-grid { grid-template-columns: repeat(4, 1fr); } }
.support-card {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    display: grid; gap: .6rem; align-content: start;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.support-card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-200);
}
.support-card__icon {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center;
}
.support-card:nth-child(2n) .support-card__icon { background: var(--green-100); color: var(--green-600); }
.support-card__icon svg { width: 22px; height: 22px; }
.support-card h3 { font-size: var(--step-0); line-height: 1.25; }
.support-card p { font-size: var(--step--1); margin: 0; }

/* Article: prose held to a readable measure, image alongside not inside */
.article { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 940px) {
    .article--with-figure { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: var(--space-5); }
}
.article__figure { margin: 0; }
.article__figure img {
    width: 100%; height: auto; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md); object-fit: cover;
}
.article__figure figcaption {
    margin-top: .7rem; font-size: .85rem; color: var(--ink-500);
    line-height: 1.5; border-left: 2px solid var(--color-accent); padding-left: .75rem;
}
@media (min-width: 940px) { .article__figure { position: sticky; top: 7rem; } }

/* Prose typography: the previous block ran small and full-bleed, which is the
   main reason it read as an undifferentiated wall. */
.prose { max-width: 68ch; }
.prose h2 {
    font-size: var(--step-2); line-height: 1.2; margin-top: var(--space-4);
    margin-bottom: var(--space-2); text-wrap: balance;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--step-1); margin-top: var(--space-3); margin-bottom: .5rem; }
.prose p { margin-bottom: var(--space-2); line-height: 1.72; color: var(--ink-700); }
.prose p:first-of-type { font-size: var(--step-1); color: var(--ink-900); line-height: 1.6; }
.prose ul, .prose ol { margin: 0 0 var(--space-2) 1.15rem; display: grid; gap: .45rem; }
.prose li { line-height: 1.65; color: var(--ink-700); }
.prose a { color: var(--color-accent-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Comparison-style tables (e.g. cost-vs-care-home). The wrapper -- not the
   table -- owns the horizontal scroll, so a table wider than its column
   never pushes the page itself sideways on mobile. */
.prose__table-scroll { overflow-x: auto; margin-bottom: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.prose table {
    width: 100%; min-width: 460px; border-collapse: collapse; font-size: var(--step--1);
}
.prose th, .prose td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--color-border); }
.prose thead th {
    background: var(--surface-soft); font-weight: 700; color: var(--ink-900);
    font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
.prose tbody tr:last-child th, .prose tbody tr:last-child td { border-bottom: none; }
.prose tbody th { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.prose td { color: var(--ink-700); font-variant-numeric: tabular-nums; }
.prose tr.prose-table__us { background: var(--surface-pink); }
.prose tr.prose-table__us th, .prose tr.prose-table__us td { color: var(--color-accent-dark); font-weight: 700; }
.prose table caption {
    text-align: left; padding: .9rem 1.1rem; font-size: .78rem; color: var(--ink-500);
    border-bottom: 1px solid var(--color-border); caption-side: top;
}

/* ============================================================
   Types of care carousel
   ============================================================ */
.types { position: relative; }
.types__inner { position: relative; display: flex; align-items: center; gap: .5rem; }
.types__track {
    display: flex; gap: var(--space-3); flex: 1; min-width: 0;
    overflow-x: auto; scroll-behavior: smooth;
    scroll-snap-type: x mandatory; scroll-padding-inline: .25rem;
    padding: .5rem .25rem var(--space-2);
    scrollbar-width: none; -ms-overflow-style: none;
}
.types__track::-webkit-scrollbar { display: none; }
.type-card {
    flex: 0 0 clamp(250px, 78vw, 320px);
    scroll-snap-align: start;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.type-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.type-card__media { display: block; aspect-ratio: 16/10; overflow: hidden; }
.type-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.type-card__body { padding: var(--space-3); display: grid; gap: .5rem; align-content: start; flex: 1; }
.type-card h3 { font-size: var(--step-0); line-height: 1.25; margin: 0; }
.type-card h3 a { color: var(--ink-900); }
.type-card:hover h3 a { color: var(--color-accent-dark); }
.type-card p { font-size: var(--step--1); margin: 0; }
.type-card__cue {
    margin-top: auto; font-size: var(--step--1); font-weight: 700;
    color: var(--color-accent-dark);
}
.types__nav {
    flex: none; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--color-border); background: var(--surface);
    color: var(--ink-700); font-size: 1.3rem; line-height: 1; cursor: pointer;
    display: none; place-items: center; box-shadow: var(--shadow-xs);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.types__nav:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }
.types__nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 900px) { .types__nav { display: grid; } }

/* ============================================================
   Persistent action bar
   ============================================================ */
.action-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -6px 24px rgba(28,27,34,.10);
    /* Held off-screen over the hero so it doesn't compete with the hero's own
       CTA; main.js adds .is-visible once the page scrolls past the sticky
       header. visibility keeps it out of the tab order while hidden. */
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.22,.61,.36,1), visibility .28s;
}
.action-bar.is-visible { transform: translateY(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) {
    .action-bar { transition: none; }
}
.action-bar__inner {
    /* Same cap as the rest of the site so the bar's ends line up with the
       header and footer columns. Its content needs ~1150px, so a wider cap
       (1600px was tried) only turned the surplus into a dead gap in the
       middle -- space-between spreads whatever slack it is given. */
    max-width: var(--max-width); margin-inline: auto;
    padding: .6rem var(--space-2);
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.action-bar__stats {
    display: none; list-style: none; margin: 0; padding: 0;
    align-items: center; gap: var(--space-2);
    /* nowrap, not wrap: this strip is fixed-height, so a wrapped second line
       is never the right outcome -- every width below is budgeted to fit on
       one line instead. */
    flex-wrap: nowrap;
    font-size: .85rem; font-weight: 600; color: var(--ink-700);
}
/* Only at the very bottom of the bar's range (1060-1179px) is it still ~13px
   short after the icon chips go -- the "112 reviews" count is what gives way
   there; the 4.9 and its stars still carry the claim. */
@media (max-width: 1179px) {
    .action-bar__google .g-badge__count { display: none; }
}
.action-bar__stats li { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.action-bar__icon {
    width: 28px; height: 28px; flex: none; border-radius: 8px;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center;
}
.action-bar__icon svg { width: 15px; height: 15px; }
.action-bar__icon--green { background: var(--green-100); color: var(--green-500); }
/* Wide enough for "See our N reviews on <logo>" to sit on one line. At
   190px it wrapped and the fixed-height widget box clipped the logo,
   leaving the sentence ending on the word "on". */
/* Pinned to an exact width, not min-width: Trustpilot swaps this div for an
   iframe that sizes itself to its container, so a content-sized box let the
   real widget come out ~300px in the browser while the local text fallback
   measured 260px -- the row then wrapped in production but tested clean
   locally. A fixed width makes both cases identical and measurable. */
.action-bar__rating { width: 300px; flex: none; }
/* Shown only until Trustpilot's own script replaces this div with its
   widget (or if that script fails to load) -- a plain "Trustpilot reviews"
   link with no rating attached read as unfinished, so it gets Trustpilot's
   brand-green star. No score/count is invented here: we have no live
   Trustpilot figure to render server-side, only their client-side widget. */
.tp-fallback { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-700); font-weight: 600; }
.tp-fallback__star { width: 16px; height: 16px; flex: none; }
.action-bar__cta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; flex: 1; }
/* Tighter than the site-wide .btn padding (1.75rem): these two sit at the end
   of a fixed one-line strip, and the width they give back is what lets the
   Trustpilot widget stay on the same row as the other items. */
.action-bar__cta .btn { min-height: 46px; font-size: var(--step--1); box-shadow: none; white-space: nowrap; padding-inline: 1.1rem; }
.action-bar__callfull { display: none; }
.action-bar__callshort { display: inline; }

body { padding-bottom: 74px; }

@media (min-width: 1060px) {
    .action-bar__stats { display: flex; }
    .action-bar__cta { flex: none; grid-template-columns: auto auto; }
    .action-bar__callfull { display: inline; }
    .action-bar__callshort { display: none; }
    body { padding-bottom: 76px; }
}
/* 1060-1279px is the tightest slice: below 1060 the stats row is hidden
   entirely, and from 1280px the bar has room for everything. Here the icon
   chips, some type size and most of the gaps go -- every word of the stats
   and both rating widgets stay, on one line. */
@media (min-width: 1060px) and (max-width: 1279px) {
    .action-bar__inner { gap: var(--space-2); }
    .action-bar__stats { gap: .8rem; font-size: .8rem; }
    .action-bar__cta { gap: .35rem; }
    .action-bar__cta .btn { padding-inline: .85rem; }
    .action-bar__icon { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .types__track { scroll-behavior: auto; }
    .type-card, .types__nav { transition: none; }
}

/* ============================================================
   Google rating badge
   Replaces the plain "Reviews from Google" line. The rating and
   count come live from the Places API, never hardcoded.
   ============================================================ */
.g-badge {
    display: inline-flex; align-items: center; gap: .6rem;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: 999px; padding: .5rem 1.1rem .5rem .75rem;
    box-shadow: var(--shadow-xs);
    font-size: var(--step--1); color: var(--ink-900);
    transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.g-badge:hover {
    box-shadow: var(--shadow-md); border-color: var(--pink-200);
    transform: translateY(-1px); text-decoration: none;
}
.g-badge:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.g-badge__logo { display: grid; place-items: center; flex: none; }
.g-badge__score {
    font-weight: 800; font-size: var(--step-1); line-height: 1;
    color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.g-badge__stars { display: inline-flex; gap: 1px; }
.g-badge__count {
    color: var(--ink-500); font-weight: 600;
    padding-left: .55rem; border-left: 1px solid var(--color-border);
}
.g-badge__cue { color: var(--color-accent-dark); font-weight: 800; }
.g-badge--sm {
    padding: .3rem .7rem .3rem .5rem; gap: .4rem; font-size: .8rem;
    box-shadow: none; border-color: var(--color-border);
}
.g-badge--sm .g-badge__logo svg { width: 15px; height: 15px; }
.g-badge--sm .g-badge__score { font-size: .9rem; }
.g-badge--sm .g-badge__stars svg { width: 11px; height: 11px; }
.g-badge--sm .g-badge__count { padding-left: .4rem; }
.g-badge--sm .g-badge__cue { display: none; }
/* In the action bar the Google rating is the strongest piece of evidence on
   the strip, so it gets to outweigh the plain-text stats beside it: bigger
   score, a pink-tinted pill and a hover lift. Sized to still leave the row
   on one line at 1060px -- see the breakpoint notes above. */
.action-bar__google .g-badge {
    padding: .4rem .8rem .4rem .55rem; gap: .5rem; font-size: .84rem;
    background: linear-gradient(180deg, #fff 0%, var(--surface-pink) 100%);
    border: 1.5px solid var(--pink-200);
    box-shadow: var(--shadow-xs);
}
.action-bar__google .g-badge:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-soft);
}
.action-bar__google .g-badge__logo svg { width: 19px; height: 19px; }
.action-bar__google .g-badge__score { font-size: 1.15rem; }
.action-bar__google .g-badge__stars svg { width: 14px; height: 14px; }
.action-bar__google .g-badge__count { color: var(--ink-700); white-space: nowrap; }
.action-bar__google .g-badge__score { white-space: nowrap; }
@media (max-width: 520px) {
    .g-badge { flex-wrap: wrap; justify-content: center; border-radius: var(--radius-card); }
    .g-badge__count { border-left: none; padding-left: 0; width: 100%; text-align: center; }
}

/* ============================================================
   Coverage map -- a real (traced, not hand-drawn) UK & Ireland
   coastline -- see includes/coverage-map.php for the source -- with
   a labelled pin per region, paired with a flagship-city pill below,
   plus a handful of secondary city pins for extra detail. Every pin is
   a real, keyboard-focusable link (own URL, visible focus ring) --
   the map isn't just decoration, so it isn't aria-hidden. Land
   fill/stroke and pin/label sizes are tuned in SVG user units to
   match the map's own real-coordinate viewBox (see coverage-map.php),
   not CSS pixels, so they scale correctly at any display size.
   ============================================================ */
.coverage {
    display: grid; gap: var(--space-4); align-items: center;
    grid-template-columns: 1fr;
}
@media (min-width: 860px) {
    .coverage { grid-template-columns: minmax(320px, 500px) 1fr; gap: var(--space-5); }
}
.coverage__panel { min-width: 0; }
.coverage__map {
    display: flex; justify-content: center; padding: var(--space-4);
    background: linear-gradient(180deg, var(--green-50), var(--surface) 70%);
    border: 1px solid var(--green-100); border-radius: var(--radius-card, 16px);
    box-shadow: 0 1px 2px rgba(20, 40, 30, .04), 0 12px 28px -16px rgba(20, 60, 40, .25);
    /* This SVG is a real traced coastline (see coverage-map.php) -- hundreds
       of precise path points, ~100KB of markup. content-visibility skips
       layout/paint/style work for it entirely until it's about to scroll
       into view, which is most of the time on first load since it sits well
       below the hero. contain-intrinsic-height reserves its rendered height
       up front so nothing jumps once it un-skips. The markup itself still
       ships in the HTML (so the pin links stay crawlable) -- only the
       client-side rendering cost is deferred.
       Height only, not the `contain-intrinsic-size` shorthand: that shorthand
       reserves BOTH axes from a single "auto 480px" value, which pins this
       box to a fixed 480px width too while it's skipped -- on mobile (this
       section sits below the fold, so it's still skipped at first paint)
       that 480px placeholder was wider than the viewport and blew out the
       parent grid track, causing real horizontal page overflow on load. */
    content-visibility: auto;
    contain-intrinsic-height: auto 480px;
}
.coverage__map svg {
    width: 100%; max-width: 500px; height: auto;
    filter: drop-shadow(0 6px 14px rgba(16, 60, 40, .12));
}
.coverage__land { fill: var(--green-100); stroke: var(--green-500); stroke-width: 0.15; stroke-linejoin: round; }
.coverage__border { fill: none; stroke: var(--green-500); stroke-width: 0.08; opacity: .45; }
.coverage__region { fill: transparent; stroke: none; transition: fill .15s ease; }
.coverage__pin { fill: var(--color-accent); stroke: var(--surface); stroke-width: 0.15; }
.coverage__pin-label {
    font-family: var(--font-body); font-size: 1.05px; font-weight: 700;
    fill: var(--ink-900); paint-order: stroke;
    stroke: var(--surface); stroke-width: 0.24px; stroke-linejoin: round;
}
.coverage__leader { stroke: var(--color-accent); stroke-width: 0.07; opacity: .55; }

/* Secondary cities: smaller, muted pins so the 14 regional flagships keep
   visual priority, but still real links with their own focus state. */
.coverage__pin--secondary { fill: var(--green-600); stroke: var(--surface); stroke-width: 0.12; }
.coverage__pin-label--secondary {
    font-size: 0.82px; font-weight: 600; fill: var(--ink-700);
    stroke-width: 0.2px;
}
.coverage__leader--secondary { stroke: var(--green-600); }

/* Pins (and, for the 10 regions with real boundary data, the whole region
   shape) are clickable and keyboard-focusable. Hovering or focusing
   anywhere in a region's shape (not just its small pin) highlights that
   region's fill and thickens its border. */
.coverage__pin-link { cursor: pointer; }
.coverage__pin-link:focus { outline: none; }
.coverage__pin-hit { fill: transparent; }
.coverage__pin-link .coverage__pin { transition: r .15s ease, filter .15s ease; }
.coverage__pin-link .coverage__pin-label { transition: fill .12s ease; }
.coverage__pin-link:hover .coverage__pin,
.coverage__pin-link:focus-visible .coverage__pin { r: 0.5; }
.coverage__pin-link:hover .coverage__pin--secondary,
.coverage__pin-link:focus-visible .coverage__pin--secondary { r: 0.36; }
.coverage__pin-link:hover .coverage__pin-label,
.coverage__pin-link:focus-visible .coverage__pin-label { fill: var(--color-accent-dark); }
.coverage__pin-link:hover .coverage__region,
.coverage__pin-link:focus-visible .coverage__region { fill: var(--pink-200); fill-opacity: .55; }
.coverage__pin-link:focus-visible .coverage__pin,
.coverage__pin-link:focus-visible .coverage__pin--secondary {
    stroke: var(--color-accent-dark); stroke-width: 0.28;
    filter: drop-shadow(0 0 0.55px var(--color-accent-dark)) drop-shadow(0 0 1.6px var(--color-accent));
}

.coverage__stats { display: flex; gap: var(--space-4); margin-bottom: var(--space-3); }
.advice-stats { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-4); }
.advice-stats div { display: flex; flex-direction: column; }
.advice-stats b { font-size: var(--step-3); font-weight: 800; color: var(--color-accent-dark); line-height: 1.1; }
.advice-stats span { font-size: var(--step--1); color: var(--ink-500); }
.coverage__stats div { display: flex; flex-direction: column; }
.coverage__stats b { font-size: var(--step-3); font-weight: 800; color: var(--color-accent-dark); line-height: 1.1; }
.coverage__stats span { font-size: var(--step--1); color: var(--ink-500); }

.city-pills { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--space-3); }
.city-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    background: var(--green-50); border: 1px solid var(--green-100);
    color: var(--green-700); font-weight: 700; font-size: var(--step--1);
    padding: .5rem 1rem; border-radius: var(--radius-button);
    transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
}
.city-pill::before {
    content: ""; width: 14px; height: 14px; flex: none; background: var(--color-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: background-color .16s ease;
}
.city-pill:hover, .city-pill:focus-visible {
    background: var(--color-secondary); border-color: var(--color-secondary); color: #fff;
    transform: translateY(-2px); text-decoration: none;
}
.city-pill:hover::before, .city-pill:focus-visible::before {
    background: #fff;
}
.city-pill:focus-visible { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }

/* ============================================================
   Locations index -- coverage strip, town finder, rich region
   cards and the full A-Z index
   ============================================================ */

/* Trust/coverage row under the hero */
.loc-trust {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    padding: var(--space-2) 0 0;
}
.loc-trust__stat {
    display: flex; align-items: center; gap: .55rem;
    font-size: var(--step--1); font-weight: 700; color: var(--ink-700);
}
.loc-trust__stat svg { width: 17px; height: 17px; color: var(--color-secondary); flex: none; }

/* --- Town finder ------------------------------------------------------- */
.finder {
    background: linear-gradient(135deg, var(--pink-500), var(--pink-600));
    padding-block: var(--space-4);
}
.finder__inner { max-width: 760px; margin-inline: auto; text-align: center; color: #fff; }
.finder__inner h2 { color: #fff; font-size: var(--step-2); margin-bottom: .35rem; }
.finder__inner > p { color: rgba(255,255,255,.92); font-size: var(--step--1); margin-bottom: var(--space-2); }
.finder__field { position: relative; display: block; }
.finder__field svg {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; color: var(--ink-300); pointer-events: none;
}
.finder__field input {
    width: 100%; min-height: 60px; border: 0; border-radius: 999px;
    padding: 0 1.4rem 0 3.1rem; font: inherit; font-size: var(--step-0);
    color: var(--ink-900); background: #fff;
    box-shadow: 0 14px 34px rgba(28,27,34,.18);
}
.finder__field input::placeholder { color: var(--ink-300); }
.finder__field input:focus-visible { outline: 3px solid var(--pink-200); outline-offset: 2px; }
.finder__count {
    margin-top: .8rem; font-size: var(--step--1); font-weight: 700;
    color: rgba(255,255,255,.95); font-variant-numeric: tabular-nums;
}

/* --- Rich region cards ------------------------------------------------- */
.rgn-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 720px)  { .rgn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rgn-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rgn {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.rgn:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.rgn__media { position: relative; aspect-ratio: 16 / 9; background: var(--pink-50); }
.rgn__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.rgn__count {
    position: absolute; left: .8rem; bottom: .8rem;
    background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
    border-radius: 999px; padding: .3rem .75rem;
    font-size: .78rem; font-weight: 800; color: var(--ink-900);
    font-variant-numeric: tabular-nums; box-shadow: var(--shadow-xs);
}
.rgn__body { padding: var(--space-2) var(--space-2) var(--space-3); display: flex; flex-direction: column; flex: 1; }
.rgn__body h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.rgn__body h3 a { color: var(--ink-900); }
.rgn__body h3 a:hover { color: var(--color-accent-dark); text-decoration: none; }
.rgn__desc { font-size: var(--step--1); color: var(--ink-500); margin-bottom: .9rem; }
.rgn__towns {
    list-style: none; margin: 0 0 1rem; padding: 0;
    display: flex; flex-wrap: wrap; gap: .4rem;
}
.rgn__towns a {
    display: inline-block; padding: .3rem .7rem; border-radius: 999px;
    background: var(--surface-soft); border: 1px solid var(--color-border);
    font-size: .8rem; font-weight: 600; color: var(--ink-700);
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rgn__towns a:hover {
    background: var(--color-accent); border-color: var(--color-accent);
    color: #fff; text-decoration: none;
}
.rgn__more {
    margin-top: auto; font-weight: 700; font-size: var(--step--1);
    color: var(--color-accent-dark);
}
.rgn__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.rgn__reg {
    display: block; margin-top: .5rem; font-size: .76rem; color: var(--ink-300);
}

/* --- A-Z town index ---------------------------------------------------- */
.town-index { margin-top: var(--space-3); }
.town-index__group { margin-bottom: var(--space-3); }
.town-index__letter {
    font-size: var(--step-1); font-weight: 800; color: var(--color-accent);
    border-bottom: 2px solid var(--pink-100);
    padding-bottom: .3rem; margin-bottom: .8rem;
}
.town-index__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .15rem .9rem;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.town-index__item a {
    display: block; padding: .28rem 0; font-size: var(--step--1); color: var(--ink-700);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.town-index__item a:hover { color: var(--color-accent-dark); }
.town-index__item small { color: var(--ink-300); font-size: .74rem; }
.town-index__empty {
    text-align: center; padding: var(--space-4) 0; color: var(--ink-500);
}

/* Collapsed by default -- 733 links is a lot of page to scroll past. */
.town-index-wrap > summary {
    cursor: pointer; list-style: none;
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; color: var(--color-accent-dark);
    padding: .8rem 1.4rem; border-radius: 999px;
    border: 1px solid var(--pink-200); background: var(--pink-50);
}
.town-index-wrap > summary::-webkit-details-marker { display: none; }
.town-index-wrap > summary:hover { background: var(--pink-100); }
.town-index-wrap > summary::after { content: '\25BE'; transition: transform .2s ease; }
.town-index-wrap[open] > summary::after { transform: rotate(180deg); }

/* --- Nation / regulator strip ------------------------------------------ */
.nations { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .nations { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .nations { grid-template-columns: repeat(4, 1fr); } }
.nation {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-2);
    box-shadow: var(--shadow-xs);
}
.nation b { display: block; font-size: var(--step-0); margin-bottom: .25rem; }
.nation span { font-size: .82rem; color: var(--ink-500); }

/* ============================================================
   Lead-form wizard
   Sized for the actual audience: people in their 60s-80s, often
   on a phone, often upset. Targets are >=64px tall, labels are
   full-size body text rather than the usual small-print, and the
   focus ring is deliberately heavy.
   ============================================================ */
.wiz__progress { margin-bottom: var(--space-3); }
.wiz__bar {
    height: 8px; border-radius: 999px;
    background: var(--pink-100); overflow: hidden;
}
.wiz__bar span {
    display: block; height: 100%; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pink-500), var(--green-500));
    transition: width .38s cubic-bezier(.22,.61,.36,1);
}
.wiz__step-count {
    margin: .5rem 0 0; font-size: var(--step--1);
    font-weight: 700; color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}

.wiz__step { border: 0; padding: 0; margin: 0; min-width: 0; }
.wiz__legend {
    padding: 0; margin-bottom: .3rem;
    font-size: var(--step-1); font-weight: 800; line-height: 1.3;
    color: var(--ink-900);
}
.wiz__help {
    margin: 0 0 var(--space-2);
    font-size: var(--step--1); color: var(--ink-500);
}

/* Two across where there's room -- a single column of six pushes the
   submit button below the fold on a laptop. */
.wiz__options { display: grid; gap: .6rem; }
@media (min-width: 520px) { .wiz__options { grid-template-columns: 1fr 1fr; } }

.wiz__opt {
    position: relative;
    display: flex; align-items: center; gap: .8rem;
    min-height: 64px; padding: .85rem 1rem;
    border: 2px solid var(--color-border); border-radius: var(--radius-card);
    background: var(--surface); cursor: pointer;
    transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.wiz__opt:hover { border-color: var(--pink-200); background: var(--pink-50); transform: translateY(-2px); }
/* The radio itself is the accessible control -- kept in the layout and
   made invisible rather than display:none, so it still takes focus. */
.wiz__opt input {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.wiz__opt-icon {
    flex: none; width: 40px; height: 40px; border-radius: 12px;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center;
    transition: background .16s ease, color .16s ease;
}
.wiz__opt-icon svg { width: 21px; height: 21px; }
.wiz__opt-label {
    font-size: var(--step-0); font-weight: 700; color: var(--ink-900);
    line-height: 1.3;
}
.wiz__opt-tick {
    margin-left: auto; flex: none;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--green-500); color: #fff;
    display: grid; place-items: center;
    opacity: 0; transform: scale(.5);
    transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.wiz__opt-tick svg { width: 14px; height: 14px; }

.wiz__opt:has(input:checked) {
    border-color: var(--color-secondary); background: var(--surface-mint);
}
.wiz__opt:has(input:checked) .wiz__opt-icon { background: var(--green-500); color: #fff; }
.wiz__opt:has(input:checked) .wiz__opt-tick { opacity: 1; transform: scale(1); }
/* Heavy, high-contrast focus ring -- a hairline outline is no use to
   someone with reduced vision navigating by keyboard. */
.wiz__opt:has(input:focus-visible) {
    outline: 3px solid var(--color-accent); outline-offset: 2px;
}

/* Step transitions. Short and horizontal so the movement reads as
   "next question", not as the page reloading. */
@keyframes wizInR { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes wizInL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.wiz__step.is-in-r { animation: wizInR .3s cubic-bezier(.22,.61,.36,1) both; }
.wiz__step.is-in-l { animation: wizInL .3s cubic-bezier(.22,.61,.36,1) both; }

.wiz__nav { display: flex; gap: .6rem; align-items: center; margin-top: var(--space-3); }
.wiz__nav .wiz__back { flex: none; min-height: 56px; }
.wiz__nav .lead-form__submit { flex: 1; min-height: 56px; }
/* Below 640px "Get my free care plan" has too little width beside Back to
   fit on one line even at flex:1 -- btn--lg's padding alone eats ~72px, and
   the pill's own border-radius turns a tall wrapped label into a blob. Give
   the submit button its own full-width row above Back instead of fighting
   it for horizontal space. */
@media (max-width: 640px) {
    .wiz__nav { flex-wrap: wrap; }
    .wiz__nav .lead-form__submit { flex: 1 1 100%; order: -1; }
    .wiz__nav .wiz__back { flex: 1 1 100%; }
}

/* Success tick */
.wiz__done {
    width: 56px; height: 56px; border-radius: 50%; margin: 0 auto var(--space-2);
    background: var(--green-100); color: var(--green-600);
    display: grid; place-items: center;
    /* display:grid makes this a block-level box, and text-align:center on
       the parent (.lead-form__success) only centres inline content -- a
       fixed-width block still needs its own auto margins to centre, which
       this was missing, leaving the circle pinned to the left edge while
       the heading/paragraph below it (plain text) centred correctly. */
}
.wiz__done svg { width: 28px; height: 28px; }

/* Success phone number: bold, with a small inline phone icon, so the one
   actionable thing in this message ("call now if it's urgent") reads as
   more than a plain text link buried mid-sentence. */
.lead-form__success-phone {
    display: inline-flex; align-items: center; gap: .3rem;
    font-weight: 800; color: var(--green-700); vertical-align: middle;
}
.lead-form__success-phone svg { width: 16px; height: 16px; flex: none; }

@media (prefers-reduced-motion: reduce) {
    .wiz__step.is-in-r, .wiz__step.is-in-l { animation: none; }
    .wiz__bar span { transition: none; }
    .wiz__opt { transition: none; }
    .wiz__opt:hover { transform: none; }
}

/* :has() is unsupported on older Safari/Firefox ESR -- without it the
   selected state simply never paints. This fallback keeps the tick and
   the green border working there via a JS-applied class. */
.wiz__opt.is-picked { border-color: var(--color-secondary); background: var(--surface-mint); }
.wiz__opt.is-picked .wiz__opt-icon { background: var(--green-500); color: #fff; }
.wiz__opt.is-picked .wiz__opt-tick { opacity: 1; transform: scale(1); }

/* Invalid field on the final step. Colour alone is not enough -- the border
   weight changes too, so it reads for colour-blind users. */
.field.has-error input {
    border-color: #d92d20; border-width: 2px;
    background: #fef3f2;
}
.field.has-error label { color: #b42318; }

/* Region/county entries in the A-Z index. Someone searching "Essex" wants the
   whole county, so these are listed alongside towns and marked as the wider
   area rather than looking like just another town. */
.town-index__item.is-region a { font-weight: 800; color: var(--color-accent-dark); }
.town-index__item.is-region small {
    display: inline-block; margin-left: .35rem; padding: .05rem .4rem;
    border-radius: 999px; background: var(--pink-100); color: var(--color-accent-dark);
    font-weight: 700;
}

/* Existing-customer sign-in. Deliberately understated -- it serves people who
   are already customers, so it must not pull attention from "Find a Carer". */
/* Mobile-menu copy of .site-header__signin (see header.php): visible only
   while the hamburger menu is the only nav on screen, so it never duplicates
   the header's own version once that appears at 1200px. */
@media (min-width: 1200px) { .site-nav__signin { display: none; } }
/* Every other item in this list is plain text (or text + chevron); this is
   the only one with a leading icon, and .site-nav__menu > li > a's flex
   layout has nothing else constraining an inline SVG's size, so without
   this it renders at the browser's unsized-SVG default (~300x150). */
.site-nav__signin svg { width: 17px; height: 17px; flex: none; }
/* Styled as its own highlighted action, not another link in the list --
   existing customers are looking for a button, not scanning prose. Tinted
   rather than solid pink so it doesn't compete with Find a Carer for
   attention; the divider above separates it from the marketing links. */
.site-nav__signin {
    margin-top: .6rem; padding-top: .85rem;
    border-top: 1px solid var(--color-border);
}
/* .site-nav__menu > li > a (base rule above) sets background/color at
   higher specificity (0,1,2) than a plain ".site-nav__signin a" (0,1,1)
   would reach -- qualifying by both the list and the item, as below,
   beats it cleanly instead of reaching for !important. */
.site-nav__menu > li.site-nav__signin > a {
    justify-content: center; background: var(--surface-pink);
    border: 1.5px solid var(--pink-200); border-radius: 999px;
    color: var(--color-accent-dark); font-weight: 700;
}
.site-nav__menu > li.site-nav__signin > a:hover { background: var(--pink-100); border-color: var(--color-accent); }

.site-header__signin {
    display: none; align-items: center; gap: .4rem;
    font-size: var(--step--1); font-weight: 700; color: var(--ink-500);
    padding: .5rem .7rem; border-radius: 999px;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.site-header__signin svg { width: 17px; height: 17px; }
.site-header__signin:hover {
    color: var(--color-accent-dark); background: var(--pink-50); text-decoration: none;
}
@media (min-width: 1200px) { .site-header__signin { display: inline-flex; } }

/* ============================================================
   Request-a-callback block
   The low-commitment counterpart to the five-step wizard: three
   fields, no email, and a phone number always visible beside it
   for anyone who would rather just ring.
   ============================================================ */
.callback { padding-block: var(--space-5); }
.callback--mint { background: var(--surface-mint); }
.callback--pink { background: var(--surface-pink); }

.callback__inner { display: grid; gap: var(--space-3); align-items: center; }
@media (min-width: 900px) {
    .callback__inner { grid-template-columns: 1fr minmax(360px, 420px); gap: var(--space-5); }
}

.callback__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0 0 .5rem; padding: .3rem .8rem;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--color-border);
    font-size: .78rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
    color: var(--color-secondary);
}
.callback__eyebrow svg { width: 14px; height: 14px; }
.callback__copy h2 { font-size: var(--step-2); margin-bottom: .4rem; }
.callback__intro { color: var(--ink-500); max-width: 46ch; margin: 0 0 var(--space-2); }
.callback__or { margin: 0; font-size: var(--step--1); color: var(--ink-700); }
.callback__or a {
    display: block; font-size: var(--step-1); font-weight: 800;
    color: var(--color-accent-dark); margin-top: .1rem;
}
.callback__or span { display: block; font-size: .8rem; color: var(--ink-300); }

.callback__panel {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    box-shadow: var(--shadow-md);
}
.callback__form { display: grid; gap: .85rem; }
.callback__form .field { display: grid; gap: .3rem; }
.callback__form label { font-weight: 700; font-size: var(--step--1); }
.callback__form input[type=text],
.callback__form input[type=tel] { min-height: 52px; }

.callback__when { border: 0; padding: 0; margin: 0; min-width: 0; }
.callback__when legend {
    padding: 0; margin-bottom: .4rem;
    font-weight: 700; font-size: var(--step--1); color: var(--ink-900);
}
.callback__chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.callback__chip { position: relative; }
.callback__chip input {
    position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.callback__chip span {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: .4rem .95rem;
    border: 2px solid var(--color-border); border-radius: 999px;
    background: var(--surface); cursor: pointer;
    font-size: var(--step--1); font-weight: 700; color: var(--ink-700);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.callback__chip:hover span { border-color: var(--pink-200); background: var(--pink-50); }
.callback__chip input:checked + span {
    border-color: var(--color-secondary); background: var(--green-500); color: #fff;
}
.callback__chip input:focus-visible + span {
    outline: 3px solid var(--color-accent); outline-offset: 2px;
}

.callback__submit { min-height: 54px; margin-top: .2rem; }
.callback__privacy {
    margin: 0; font-size: .78rem; color: var(--ink-300); text-align: center;
}
.callback__privacy a { color: var(--ink-500); text-decoration: underline; }

.callback__success { text-align: center; padding: var(--space-2) 0; }
.callback__success p { margin: 0 0 .3rem; }
.callback__success-phone { margin: var(--space-1) auto 0; }
.callback__tick {
    width: 52px; height: 52px; border-radius: 50%; margin: 0 auto var(--space-2);
    background: var(--green-100); color: var(--green-600);
    display: grid; place-items: center;
}
.callback__tick svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
    .callback__chip span { transition: none; }
}

/* ============================================================
   Conditions we care for
   ============================================================ */
.conditions {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .9rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.conditions a {
    position: relative; display: flex; align-items: center; gap: .8rem;
    min-height: 72px; padding: 1rem 1.1rem 1rem 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(243,248,245,.96));
    border: 1px solid rgba(29, 120, 89, 0.16);
    border-radius: 18px; box-shadow: 0 4px 12px rgba(28,27,34,.04);
    font-size: var(--step--1); font-weight: 700; color: var(--ink-900);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.conditions a::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 18px 0 0 18px;
    background: linear-gradient(180deg, var(--color-secondary), var(--color-secondary-strong));
    opacity: 0;
    transition: opacity .18s ease;
}
.conditions a:hover {
    border-color: rgba(29, 120, 89, 0.28);
    transform: translateY(-3px);
    box-shadow: 0 14px 26px rgba(31, 93, 72, 0.12);
    text-decoration: none; color: var(--color-accent-dark);
    background: linear-gradient(180deg, #fff, #edf9f2);
}
.conditions a:hover::before { opacity: 1; }
.conditions__dot {
    position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; flex: none;
    background: radial-gradient(circle at 35% 35%, #9fe4bd, var(--color-secondary));
    box-shadow: 0 0 0 5px rgba(41, 155, 104, 0.1);
}
.conditions__cue {
    margin-left: auto; position: relative; z-index: 1;
    color: var(--ink-300); font-weight: 800; font-size: 1.15rem;
    transition: transform .18s ease, color .18s ease;
}
.conditions a:hover .conditions__cue {
    color: var(--color-accent); transform: translateX(2px);
}
.conditions__more {
    margin-top: var(--space-4); text-align: center;
    font-size: var(--step--1); color: var(--ink-500);
    line-height: 1.7;
}
.conditions__more a { font-weight: 700; }

/* ============================================================
   Our carers strip
   ============================================================ */
.ocarers { padding-block: clamp(4rem, 6vw, 6.5rem); }
.ocarers--soft { background: linear-gradient(180deg, var(--surface-pink) 0%, #f8f1f4 100%); }
.ocarers--surface { background: var(--surface); }
.ocarers__inner {
    display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
@media (min-width: 900px) { .ocarers__inner { grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 4vw, 4.5rem); } }
.ocarers__copy {
    align-self: center;
}
.ocarers__copy h2 {
    font-size: clamp(2.3rem, 3.2vw, 3.5rem);
    line-height: .96; letter-spacing: -0.06em; margin-bottom: 1rem;
    max-width: 690px;
}
.ocarers__copy > p {
    color: var(--ink-500); margin-bottom: var(--space-2);
    font-size: clamp(1.05rem, 1.4vw, 1.4rem); line-height: 1.5;
    max-width: 620px;
}
.ocarers__facts {
    list-style: none; margin: 0 0 var(--space-4); padding: 0;
    display: grid; gap: .9rem; max-width: 620px;
}
.ocarers__facts li {
    position: relative; padding-left: 2rem;
    font-size: clamp(1.05rem, 1.2vw, 1.3rem); font-weight: 600; color: var(--ink-700);
    line-height: 1.5;
}
.ocarers__facts li::before {
    content: '✓'; position: absolute; left: 0; top: 0;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--green-100); color: var(--green-600);
    display: grid; place-items: center; font-size: .72rem; font-weight: 900;
}
.ocarers__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 1.3rem 1rem; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}
@media (max-width: 460px) { .ocarers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ocarer {
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
}
.ocarer img {
    width: 100%; max-width: 150px; aspect-ratio: 1; border-radius: 50%;
    object-fit: cover; margin: 0 auto .85rem; display: block;
    border: 4px solid rgba(255,255,255,.82); box-shadow: 0 14px 28px rgba(28,27,34,.08);
}
.ocarer__name {
    display: block; font-weight: 800; font-size: clamp(1.05rem, 1.15vw, 1.35rem);
    color: var(--ink-900); line-height: 1.3;
}
.ocarer__role {
    display: block; margin-top: .15rem; font-size: .85rem; color: var(--ink-500);
    letter-spacing: .01em;
}

/* ============================================================
   Floating actions (WhatsApp + back to top)
   ============================================================ */
.fab {
    position: fixed; right: var(--space-2); z-index: 95;
    /* Clear the persistent action bar rather than sitting on top of it. */
    bottom: calc(74px + var(--space-2));
    display: grid; gap: .6rem;
}
@media (min-width: 1060px) { .fab { bottom: calc(76px + var(--space-2)); } }
.fab__btn {
    width: 52px; height: 52px; border-radius: 50%; border: 0;
    display: grid; place-items: center; cursor: pointer;
    box-shadow: 0 8px 24px rgba(28,27,34,.22);
    transition: transform .16s ease, box-shadow .16s ease, opacity .22s ease, visibility .22s;
}
.fab__btn:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(28,27,34,.3); }
.fab__btn:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.fab__btn svg { width: 26px; height: 26px; }
.fab__btn--wa { background: #25d366; color: #fff; }
.fab__btn--wa:hover { background: #1eb855; }
.fab__btn--top {
    background: var(--surface); color: var(--ink-900);
    border: 1px solid var(--color-border);
    /* Hidden at the top of the page -- nothing to scroll back to yet. */
    opacity: 0; visibility: hidden;
}
.fab__btn--top svg { width: 22px; height: 22px; }
.fab__btn--top.is-visible { opacity: 1; visibility: visible; }
.fab__btn--top:hover { background: var(--pink-50); color: var(--color-accent-dark); }

@media (prefers-reduced-motion: reduce) {
    .fab__btn { transition: opacity .01s, visibility .01s; }
    .fab__btn:hover { transform: none; }
    .award, .conditions a { transition: none; }
    .award:hover, .conditions a:hover { transform: none; }
}

/* LinkedIn -- brand colour, matching the other per-platform social icons. */
.site-footer__social .s--li:hover { background: #0a66c2; border-color: #0a66c2; color: #fff; }

/* ============================================================
   Lead wizard as a modal
   Opened by every "Find a Carer" CTA. The form panel is moved
   in by main.js rather than duplicated, so this is a shell.
   ============================================================ */
.lead-modal {
    border: 0; border-radius: var(--radius-lg); padding: 0;
    width: calc(100% - 2rem); max-width: 620px;
    max-height: calc(100vh - 2rem);
    margin: auto;                 /* centres in both axes for showModal() */
    background: var(--surface); color: var(--color-ink);
    box-shadow: var(--shadow-lg);
    overflow: auto;
}
.lead-modal::backdrop { background: rgba(28,27,34,.55); backdrop-filter: blur(3px); }

.lead-modal__head {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3) var(--space-3) 0;
}
.lead-modal__eyebrow {
    margin: 0 0 .15rem; font-size: .74rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-secondary);
}
.lead-modal__head h2 { font-size: var(--step-1); margin: 0; }
.lead-modal__close {
    margin-left: auto; flex: none;
    width: 44px; height: 44px; border-radius: 50%;
    border: 1px solid var(--color-border); background: var(--surface);
    font-size: 1.5rem; line-height: 1; color: var(--ink-500); cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lead-modal__close:hover { background: var(--pink-50); color: var(--color-accent-dark); }
.lead-modal__close:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

.lead-modal__body { padding: var(--space-2) var(--space-3) var(--space-3); }
/* Inside the dialog the panel is the dialog -- drop its own card chrome so it
   doesn't read as a box within a box. */
.lead-modal__body .lead-form__panel {
    background: none; border: 0; box-shadow: none; padding: 0;
}

/* Full-height on phones: a short centred dialog with the page visible around it
   is easy to lose your place in, and this form is five steps long. */
@media (max-width: 560px) {
    .lead-modal {
        width: 100%; max-width: none; max-height: 100vh; height: 100vh;
        border-radius: 0;
    }
}

/* ============================================================
   Awards & recognition
   Two rows, because the content is two things: certificates
   (artwork with text -- must be contained, never cropped) and
   press photography (fills its frame). One grid served neither.
   ============================================================ */
.awards { padding-block: var(--space-5); }
.awards--soft { background: var(--surface-soft); }
.awards--surface { background: var(--surface); }

/* --- Awards row (4 across) --- */
.aw-row {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-2);
    grid-template-columns: 1fr;
    /* Equal-height rows: ragged card bottoms were the main thing making this
       section look unfinished. */
    grid-auto-rows: 1fr;
}
@media (min-width: 560px)  { .aw-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .aw-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.aw-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.aw-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.aw-card__art {
    aspect-ratio: 3 / 2; display: grid; place-items: center;
    border-bottom: 1px solid var(--color-border);
}
.aw-card__art img { width: 100%; height: 100%; display: block; }
/* Certificates and logos: contained on a tinted ground so the letterboxing
   reads as a deliberate mount rather than as a broken crop. */
.aw-card__art--contain { background: var(--surface-soft); padding: .9rem; }
.aw-card__art--contain img { object-fit: contain; }
.aw-card__art--cover img { object-fit: cover; }

.aw-card__body { padding: var(--space-2); display: flex; flex-direction: column; flex: 1; }
.aw-card__meta { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; }
.aw-card__pill {
    padding: .2rem .55rem; border-radius: 999px;
    font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    background: var(--ink-900); color: #fff;
}
.aw-card__pill--winner { background: var(--green-500); }
.aw-card__pill--finalist { background: var(--color-accent); }
.aw-card__pill--shortlisted { background: var(--pink-400); }
.aw-card__year {
    margin: 0; font-size: .78rem; font-weight: 800;
    color: var(--ink-300); font-variant-numeric: tabular-nums;
}
.aw-card h3 { font-size: var(--step-0); line-height: 1.3; margin: 0 0 .3rem; }
.aw-card__desc { font-size: var(--step--1); color: var(--ink-500); margin: 0; }
.aw-card__link {
    margin-top: auto; padding-top: .7rem;
    font-size: var(--step--1); font-weight: 700; color: var(--color-accent-dark);
}
.aw-card__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* --- Divider between the two rows --- */
.aw-divider {
    position: relative; text-align: center;
    margin: var(--space-4) 0 var(--space-3);
    font-size: var(--step--1); color: var(--ink-500);
}
.aw-divider::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    border-top: 1px solid var(--color-border);
}
.aw-divider span {
    position: relative; padding: 0 1rem;
    background: var(--surface-soft);
}
.awards--surface .aw-divider span { background: var(--surface); }
.aw-divider strong { color: var(--ink-900); }

/* --- Press row (3 across) --- */
.aw-press {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-3); grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
}
@media (min-width: 700px)  { .aw-press { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.aw-story {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.aw-story:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
.aw-story__art { position: relative; aspect-ratio: 16 / 10; background: var(--pink-50); }
.aw-story__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-story__body { padding: var(--space-2); display: flex; flex-direction: column; flex: 1; }
.aw-story h3 { font-size: var(--step-0); line-height: 1.35; margin: .2rem 0 .3rem; }

@media (prefers-reduced-motion: reduce) {
    .aw-card, .aw-story { transition: none; }
    .aw-card:hover, .aw-story:hover { transform: none; }
}

/* Google score panel -- the primary review proof (112 reviews at 4.9 against
   Trustpilot's 37), so it leads the block and Trustpilot sits beneath it. */
.g-score {
    display: grid; justify-items: center; gap: .3rem;
    padding: var(--space-2); margin-bottom: .9rem;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    transition: border-color .16s ease, box-shadow .16s ease;
}
.g-score:hover { border-color: var(--pink-200); box-shadow: var(--shadow-md); text-decoration: none; }
.g-score__head { display: flex; align-items: center; gap: .4rem; }
.g-score__head b { font-size: var(--step--1); font-weight: 800; color: var(--ink-900); }
.g-score__rating {
    font-size: var(--step-3); font-weight: 800; line-height: 1;
    color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.g-score__stars { display: flex; gap: 1px; }
.g-score__count { font-size: .95rem; color: var(--ink-500); }
.tp-block__also {
    margin: 0 0 .5rem; text-align: center;
    font-size: .92rem; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: var(--ink-300);
}

/* ============================================================
   Short-viewport hero
   A 15.6" laptop gives roughly 1536x724 CSS pixels once browser
   chrome is taken off, and 1366x640 is still common. At the full
   hero size that pushed the Trustpilot row and the trust stats
   under the fold -- and at 640px even the "Find a Carer" button
   went with them, which is the one thing that must never happen.
   Height-based, not width-based: the constraint is vertical, and
   a wide-but-short laptop needs this exactly as much as a small
   one. Tall screens keep the generous original spacing.
   ============================================================ */
@media (max-height: 960px) and (min-width: 900px) {
    .hero { padding-block: var(--space-3) var(--space-3); }
    .hero__inner { gap: var(--space-3); }
    /* 54px over three lines is the single biggest consumer of height here;
       at ~44px the same heading sets in two. */
    .hero__content h1 {
        font-size: clamp(2rem, 1.4rem + 1.7vw, 2.75rem);
        margin-bottom: .85rem;
    }
    .hero__eyebrow { margin-bottom: .9rem; }
    /* The 36ch cap held the standfirst to ~455px inside a ~600px column, so
       naming all five nations pushed it to five lines. Letting it use the width
       it already has brings that back without touching the wording. */
    .hero__content > p { font-size: var(--step-0); max-width: 54ch; }
    .hero__cta-row { margin-top: var(--space-2); gap: .75rem; }
    /* Compressed, but not squeezed: measuring showed ~90px of headroom left at
       1536x724, so the contact row and trust strip get some of it back. */
    .hero__reviews { margin-top: 1.4rem; }
    .hero__trust { margin-top: 1.9rem; padding-top: 1.4rem; }
    .hero__trust b { font-size: var(--step-1); }
}

/* Shorter still (1366x640 and laptop landscape): trim further so the
   call-to-action and the phone number always clear the fold. */
@media (max-height: 700px) and (min-width: 900px) {
    .hero { padding-block: var(--space-2) var(--space-2); }
    .hero__content h1 { font-size: clamp(1.7rem, 1.2rem + 1.3vw, 2.2rem); margin-bottom: .7rem; }
    .hero__eyebrow { margin-bottom: .7rem; font-size: .82rem; }
    .hero__content > p { font-size: var(--step--1); }
    .hero__cta-row { margin-top: .9rem; }
    .hero__reviews { margin-top: 1.1rem; }
    .hero__trust { margin-top: 1.4rem; padding-top: 1.1rem; }
    .hero__image img { max-height: 62vh; object-fit: cover; }
}

/* ============================================================
   Reviews block -- compact sidebar
   The column was ~600px tall beside a ~300px row of cards, and
   most of that height was the same two links repeated. It is now
   one card: Google score, Trustpilot score, review-us actions.
   ============================================================ */
@media (min-width: 900px) {
    /* Top-align the two columns and let the card row set the height. */
    .tp-block__inner { grid-template-columns: 260px 1fr; align-items: start; }
    /* The old rule pushed this column down to clear the cards label; the label
       now sits above both columns, so the offset is no longer wanted. */
    .tp-block__score { padding-top: 0; }
}
.tp-block__score {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    padding: var(--space-2); gap: .35rem;
}
/* The Google panel is inside the card now, so it drops its own frame. */
.tp-block__score .g-score {
    border: 0; box-shadow: none; padding: 0; margin-bottom: .2rem; background: none;
}
.tp-block__score .g-score:hover { box-shadow: none; }
.tp-block__also {
    width: 100%; margin: .7rem 0 .5rem; padding-top: .7rem;
    border-top: 1px solid var(--color-border);
}
.tp-block__links {
    width: 100%; margin-top: .8rem; padding-top: .8rem;
    border-top: 1px solid var(--color-border);
    display: grid; gap: .5rem; justify-items: center;
}
.tp-block__write-intro { margin: 0; font-size: .92rem; color: var(--ink-300); }
/* Two compact buttons side by side rather than two full-width stacked ones --
   they are the same action on two platforms, so they should read as a pair. */
.tp-block__write-row { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; width: 100%; }
.tp-block__write {
    /* This card is a fixed 260px wide sidebar panel, so two side-by-side
       buttons only get ~110px each -- .92rem (matching the intro line
       above) wrapped "Review us" onto two lines at that width. Trimmed
       gap/padding back to reclaim room and settled on .85rem: still a
       real jump from the original .78rem/40px, just one that stays on
       one line here. */
    width: 100%; min-height: 46px; font-size: .85rem;
    padding-inline: .35rem; gap: .3rem; white-space: nowrap;
}

/* The review track scrolls, but a card sliced dead flat at the container edge
   reads as a rendering fault rather than as "there is more". A fade on the
   right edge makes the overflow legible; it is masked, not painted, so it works
   on any section background and never covers a card that is fully in view. */
@media (min-width: 700px) {
    .tp-block__cards { position: relative; }
    .tp-block__cards::after {
        content: ''; position: absolute; top: 0; bottom: 0; right: 0;
        width: 72px; pointer-events: none; z-index: 1;
        background: linear-gradient(to right, transparent, var(--surface, #fff) 82%);
    }
    /* The next/prev arrows sit above the fade. */
    .tp-block__cards .tp-nav, .tp-block__cards [class*="__nav"] { position: relative; z-index: 2; }
}
/* The reviews block sits on a white section, so the fade colour matches; if the
   section tint changes, update this one value with it. */
.section--surface .tp-block__cards::after,
.tp-block .tp-block__cards::after { --surface: #fff; }

/* Reassurance points in the callback column. */
.callback__points {
    list-style: none; margin: 0 0 var(--space-3); padding: 0;
    display: grid; gap: .7rem; max-width: 46ch;
}
.callback__points li {
    display: flex; align-items: flex-start; gap: .65rem;
    font-size: var(--step--1); color: var(--ink-700); line-height: 1.5;
}
.callback__points svg {
    flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 3px;
    border-radius: 50%; background: var(--green-100); color: var(--green-600);
}
.callback__points b { color: var(--ink-900); font-weight: 800; }

/* Four time slots in an even 2x2 rather than three-then-one: "Any time" sitting
   alone on a second row made the group look like a mistake. */
.callback__chips { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.callback__chip span { width: 100%; }
/* Measured (Playwright, real font metrics): a 4-column row only has room
   for "Any time" -- the longest label -- on one line from ~540px of panel
   width up. Between 420-539px (large phones like the 428px-wide iPhone
   Pro Max class) it wrapped to two lines, and with border-radius:999px on
   a now-roughly-square box that rendered as a near-circle instead of a
   pill, sitting oddly next to the other three single-line chips. */
@media (min-width: 540px) and (max-width: 899px) {
    .callback__chips { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   Postcode / town search
   ============================================================ */
/* Was a full-bleed wash with the content floating in the middle of it, which
   read as an empty band. A contained panel gives the search a frame, cuts the
   dead space, and lets the tint carry the brand without swamping the page. */
.pcs { padding-block: var(--space-4); background: var(--surface); }
.pcs--plain { background: var(--surface); }
.pcs__inner {
    max-width: 860px; margin-inline: auto; text-align: center;
    padding: var(--space-4) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    background:
        radial-gradient(560px 220px at 12% 0%, var(--pink-50) 0%, transparent 62%),
        radial-gradient(560px 220px at 88% 100%, var(--surface-mint) 0%, transparent 62%),
        var(--surface);
    box-shadow: var(--shadow-md);
}
.pcs__eyebrow {
    display: inline-flex; align-items: center; gap: .45rem;
    margin: 0 0 .6rem; padding: .3rem .85rem;
    border-radius: 999px; background: var(--surface); border: 1px solid var(--color-border);
    font-size: .76rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-accent-dark); box-shadow: var(--shadow-xs);
}
.pcs__eyebrow svg { width: 14px; height: 14px; }
.pcs__inner h2 { font-size: var(--step-2); margin-bottom: .4rem; }
.pcs__intro { color: var(--ink-500); margin: 0 auto var(--space-3); max-width: 52ch; }

/* Field and button read as one control rather than two floating pills -- the
   button tucks inside the field's rounded end on anything above phone width. */
.pcs__form {
    display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center;
    max-width: 640px; margin-inline: auto;
}
@media (min-width: 620px) {
    .pcs__form {
        gap: 0; background: var(--surface);
        border: 2px solid var(--color-border); border-radius: 999px;
        padding: 5px 5px 5px 0; box-shadow: var(--shadow-xs);
        transition: border-color .15s ease, box-shadow .15s ease;
    }
    .pcs__form:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
    .pcs__form .pcs__field input { border: 0; box-shadow: none; min-height: 52px; background: transparent; }
    .pcs__form .pcs__field input:focus-visible { outline: none; }
    .pcs__go { min-height: 52px; }
}
.pcs__field { position: relative; flex: 1 1 320px; min-width: 0; }
.pcs__field svg {
    position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%);
    width: 20px; height: 20px; color: var(--ink-300); pointer-events: none;
}
.pcs__field input {
    width: 100%; min-height: 60px;
    border: 2px solid var(--color-border); border-radius: 999px;
    padding: 0 1.3rem 0 3.1rem; font: inherit; font-size: var(--step-0);
    color: var(--ink-900); background: var(--surface);
    box-shadow: var(--shadow-xs);
    /* Postcodes read better uppercased, but don't fight town names. */
    text-transform: none;
}
.pcs__field input::placeholder { color: var(--ink-300); }
.pcs__field input:focus-visible {
    outline: 3px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-accent);
}
.pcs__go { min-height: 60px; padding-inline: 2rem; flex: none; }
.pcs__hint {
    margin: .9rem 0 0; min-height: 1.4em;
    font-size: var(--step--1); font-weight: 600; color: var(--ink-500);
}

/* Autocomplete dropdown for the postcode/town search. */
.pcs__field { position: relative; }
.pcs__list {
    position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 40;
    margin: 0; padding: .3rem; list-style: none; text-align: left;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-lg);
    max-height: 320px; overflow-y: auto;
}
.pcs__list [role="option"] {
    display: flex; align-items: baseline; gap: .6rem; justify-content: space-between;
    padding: .6rem .8rem; border-radius: 10px; cursor: pointer;
    font-size: var(--step--1);
}
.pcs__list [role="option"]:hover,
.pcs__list [role="option"].is-active { background: var(--pink-50); }
.pcs__opt-name { font-weight: 700; color: var(--ink-900); }
.pcs__opt-name b { color: var(--color-accent-dark); }
.pcs__opt-meta { font-size: .76rem; color: var(--ink-300); white-space: nowrap; flex: none; }
.pcs__none { padding: .8rem; font-size: var(--step--1); color: var(--ink-500); }

/* Hero variant of the phone link: number only, no opening-hours line. */
.phone-link--plain small { display: none; }
.phone-link--plain span { font-size: var(--step-1); font-weight: 800; line-height: 1.1; }

/* A bordered card, matching the buttons above it, so the phone number and
   the rating read as two more items in that same row rather than bare text
   and an unstyled embed beside styled buttons. Unconditional now (was
   mobile-only) -- the side-by-side desktop layout looks just as inconsistent
   with one plain-text item next to a bordered CTA row, just less obviously
   than the stacked mobile one did. */
.phone-link--plain {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: 999px; padding: .6rem 1.2rem .6rem .75rem;
    box-shadow: var(--shadow-xs);
}
/* The Elfsight Google-reviews embed (see templates/homepage.php) has no
   border of its own -- it's a bare third-party mount point, styled only by
   whatever Elfsight renders inside it. Give it the same card treatment. */
.hero__google-reviews {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    padding: .5rem .75rem;
}

@media (max-width: 899px) {
    /* Below 900px the hero stacks into one column, so both cards go full
       width to match the buttons directly above them, and centre their own
       content rather than sitting left-aligned in that wider box. */
    .phone-link--plain { width: 100%; justify-content: center; }
    .hero__google-reviews {
        width: 100%; display: flex; justify-content: center;
        margin-inline: auto; text-align: center;
    }
}

/* Compact badge for the hero row: drops the word "Google" from the count, since
   the logo is right beside it. Full label ("112 Google reviews") made the badge
   358px wide, which tipped it past the 582px content column and wrapped it under
   the phone number instead of sitting beside it. */
.g-badge--compact .g-badge__gword { display: none; }
.hero__reviews { gap: var(--space-2); }

/* Contact row: a clear gap between the phone number and the rating so they read
   as two separate reassurances rather than one run-on strip. */
.hero__reviews { gap: var(--space-2) var(--space-3); }
.hero__reviews .phone-link { margin-right: .25rem; }
/* Even columns for the trust strip live on the base rule now (always a
   3-col grid, not just from 560px up) -- see .hero__trust near the top
   of the file. Below 560px the labels just wrap onto more lines. */


/* ============================================================
   Services index
   ============================================================ */

/* --- Situation chooser --- */
.chooser { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 780px) { .chooser { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.chooser__card {
    display: flex; flex-direction: column; gap: .45rem;
    padding: var(--space-3);
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.chooser__card:hover {
    transform: translateY(-4px); box-shadow: var(--shadow-md);
    border-color: var(--pink-200); text-decoration: none;
}
.chooser__icon {
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: .3rem;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center;
    transition: background .18s ease, color .18s ease;
}
.chooser__card:hover .chooser__icon { background: var(--color-accent); color: #fff; }
.chooser__icon svg { width: 23px; height: 23px; }
.chooser__card b { font-size: var(--step-0); color: var(--ink-900); line-height: 1.35; }
.chooser__txt { font-size: var(--step--1); color: var(--ink-500); }
.chooser__cue {
    margin-top: auto; padding-top: .5rem;
    font-size: var(--step--1); font-weight: 800; color: var(--color-accent-dark);
}

/* --- Service cards --- */
.svc-grid {
    display: grid; gap: var(--space-2); grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
}
@media (min-width: 560px)  { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.svc {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.svc:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--pink-200); }
/* The image is positioned out of flow so the container's aspect-ratio
   actually governs. Left in flow with height:100%%, the height is
   circular and the image's own intrinsic ratio wins -- which is why a
   3:2 source rendered 179px tall next to a 16:9 source at 161px in the
   same row of supposedly identical cards. */
.svc__media { position: relative; aspect-ratio: 5 / 3; background: var(--pink-50); }
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.svc__body { padding: var(--space-2); display: flex; flex-direction: column; flex: 1; }
.svc__body h3 { font-size: var(--step-0); line-height: 1.3; margin-bottom: .35rem; }
.svc__body h3 a { color: var(--ink-900); }
/* Stretched link: the whole card is the hit area, but the anchor stays on the
   heading so the accessible name is the service, not the card's whole text. */
.svc__body h3 a::after { content: ''; position: absolute; inset: 0; }
.svc { position: relative; }
.svc__body h3 a:hover { color: var(--color-accent-dark); text-decoration: none; }
.svc__body p {
    font-size: var(--step--1); color: var(--ink-500); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.svc__cue {
    margin-top: auto; padding-top: .7rem;
    font-size: var(--step--1); font-weight: 700; color: var(--color-accent-dark);
}

/* --- Comparison table --- */
.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
    width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0;
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); overflow: hidden;
}
.cmp th, .cmp td {
    padding: .85rem 1rem; text-align: left; font-size: var(--step--1);
    border-bottom: 1px solid var(--color-border);
}
.cmp thead th {
    background: var(--surface-soft); font-weight: 800; color: var(--ink-900);
    font-size: var(--step--1); white-space: nowrap;
}
.cmp tbody th { font-weight: 700; color: var(--ink-700); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }
/* Our column, highlighted -- but the other two still say what they really do. */
.cmp .cmp__hi { background: var(--surface-mint); }
.cmp thead .cmp__hi { background: var(--green-100); color: var(--green-700); }
.cmp__yes, .cmp__no { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.cmp__yes { color: var(--green-600); }
.cmp__yes::before { content: '✓'; font-weight: 900; }
.cmp__no { color: var(--ink-500); }
.cmp__no::before { content: '–'; font-weight: 900; }
.cmp__note {
    margin-top: var(--space-2); text-align: center;
    font-size: var(--step--1); color: var(--ink-500);
}

/* --- Pricing strip --- */
.svc-plans { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 640px) { .svc-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svc-plan {
    text-align: center; padding: var(--space-3) var(--space-2);
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
}
.svc-plan__name {
    margin: 0 0 .3rem; font-size: .78rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase; color: var(--color-secondary);
}
.svc-plan__price {
    margin: 0; font-size: var(--step-3); font-weight: 800; line-height: 1;
    color: var(--ink-900); font-variant-numeric: tabular-nums;
}
.svc-plan__unit { margin: .35rem 0 0; font-size: var(--step--1); color: var(--ink-500); }

@media (prefers-reduced-motion: reduce) {
    .chooser__card, .svc { transition: none; }
    .chooser__card:hover, .svc:hover { transform: none; }
}





/* Quick picks under the search: somewhere to go for people who are browsing
   rather than typing, and links to the biggest city pages. */
.pcs__quick {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .4rem; margin-top: var(--space-2);
}
.pcs__quick-label {
    font-size: .74rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-300); margin-right: .2rem;
}
.pcs__quick a {
    padding: .32rem .8rem; border-radius: 999px;
    border: 1px solid var(--color-border); background: var(--surface);
    font-size: var(--step--1); font-weight: 600; color: var(--ink-700);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pcs__quick a:hover {
    border-color: var(--color-accent); background: var(--color-accent);
    color: #fff; text-decoration: none;
}
.pcs__quick-all { border-style: dashed !important; font-weight: 800 !important; color: var(--color-accent-dark) !important; }
.pcs__quick-all:hover { border-style: solid !important; color: #fff !important; }
.pcs__foot {
    margin: var(--space-2) 0 0; font-size: .8rem; color: var(--ink-300);
}
/* Hint only occupies space once it has something to say. */
.pcs__hint { margin: .7rem 0 0; min-height: 0; }
.pcs__hint:empty { margin: 0; }

/* ============================================================
   Service page: "Where we work" coverage
   Typographic, not photographic -- the photo cards belong to
   /locations/, and 15 of them here would be ~925KB on every one
   of 37 service pages. Towns are chips: a stacked column of bare
   links reads as a sitemap dump and nobody scans it.
   ============================================================ */
.sl-facts {
    list-style: none; margin: 0 auto var(--space-4); padding: 0;
    display: grid; gap: var(--space-2); grid-template-columns: 1fr;
    max-width: var(--max-width-narrow);
}
@media (min-width: 860px) {
    .sl-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: var(--space-3); }
}
.sl-facts li {
    display: flex; align-items: flex-start; gap: .6rem;
    font-size: var(--step--1); color: var(--ink-500); line-height: 1.55;
}
.sl-facts svg {
    flex: none; width: 20px; height: 20px; margin-top: 2px; padding: 3px;
    border-radius: 50%; background: var(--green-100); color: var(--green-600);
}
.sl-facts b { color: var(--ink-900); font-weight: 800; }

/* CSS columns, not a grid. A grid ties every item in a row to the tallest one,
   so a short region left a visible hole beneath it and the block looked ragged.
   Columns let each region take exactly its own height and flow on. */
.sl-grid { column-gap: var(--space-5); }
@media (min-width: 900px)  { .sl-grid { column-count: 2; } }
@media (min-width: 1300px) { .sl-grid { column-count: 3; } }
.sl-region {
    /* Without this a region can be split across a column boundary. */
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
}

/* A hairline rule rather than a card: fifteen bordered boxes is heavy, and the
   region name provides the grouping. */
.sl-region { padding: var(--space-3) 0 var(--space-2); border-top: 1px solid var(--color-border); }

/* The heading has to win against the block of town names underneath it, so it
   steps up a size, takes the brand colour on the pin, and gets a count badge
   rather than a grey whisper. At the previous size it sat only one step above
   the body text and the eye slid straight past it. */
.sl-region__head {
    display: flex; align-items: center; gap: .55rem;
    font-size: var(--step-1); line-height: 1.25; margin: 0 0 .8rem;
    letter-spacing: -.01em;
}
.sl-region__pin {
    flex: none; width: 32px; height: 32px; border-radius: 10px;
    background: var(--color-accent); color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(233,85,135,.28);
    transition: transform .16s ease;
}
.sl-region__pin svg { width: 17px; height: 17px; }
.sl-region:hover .sl-region__pin { transform: scale(1.06); }
.sl-region__head a { color: var(--ink-900); font-weight: 800; }
.sl-region__head a:hover { color: var(--color-accent-dark); text-decoration: none; }
/* White, not pink-50: this block sits on a pink-tinted section, so a pale pink
   pill disappeared into the background and the count read as loose text. */
.sl-region__count {
    margin-left: auto; flex: none;
    padding: .2rem .6rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--pink-200);
    color: var(--color-accent-dark);
    font-size: .72rem; font-weight: 800;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Flowing text rather than pills. A hundred-odd outlined chips of unequal width
   put a ragged edge on every line and stranded each "+N more" on a line of its
   own -- the buzz was the mess. As inline links separated by a middot the names
   justify like a sentence and the block reads calm. */
.sl-towns {
    margin: 0; font-size: var(--step--1); line-height: 1.85; color: var(--ink-500);
}
.sl-towns a {
    color: var(--ink-700);
    text-decoration-color: var(--ink-100);
    text-underline-offset: 3px;
}
.sl-towns a:hover { color: var(--color-accent-dark); text-decoration-color: currentColor; }
/* Padding only -- the surrounding spaces come from the markup, so the line has
   real break opportunities. A separator with padding but no whitespace made the
   whole run one unbreakable word and it overflowed the column. */
.sl-sep { color: var(--ink-300); }
/* Belt and braces inside a multicol container. */
.sl-towns { overflow-wrap: anywhere; }
.sl-towns__all { font-weight: 700; color: var(--color-accent-dark) !important; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
    .sl-region__pin, .sl-towns a { transition: none; }
}


/* ============================================================
   Location pages: at-a-glance, funding/regulation, steps
   ============================================================ */

/* --- At-a-glance strip, straight under the hero --- */
.lfacts { background: var(--surface); border-bottom: 1px solid var(--color-border); padding-block: var(--space-3); }
.lfacts__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--space-2); grid-template-columns: 1fr;
}
@media (min-width: 620px)  { .lfacts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lfacts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lfact { display: flex; align-items: flex-start; gap: .7rem; min-width: 0; }
.lfact__icon {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center;
}
.lfact__icon svg { width: 19px; height: 19px; }
.lfact:nth-child(2n) .lfact__icon { background: var(--green-100); color: var(--green-600); }
.lfact__body { display: grid; gap: .1rem; min-width: 0; }
.lfact__body b {
    font-size: var(--step--1); font-weight: 800; color: var(--ink-900); line-height: 1.3;
}
.lfact__body span { font-size: .8rem; color: var(--ink-500); line-height: 1.4; }

/* --- Funding & regulation --- */
/* Intro above, cards below -- not side by side. As a two-column grid the short
   intro left a tall empty column beside the cards, and the third card was
   stranded on its own row. Stacked, the three facts read as one even row. */
.fr { display: grid; gap: var(--space-3); }
.fr__intro { max-width: 62ch; }
.fr__intro h2 { font-size: var(--step-2); margin-bottom: .5rem; }
.fr__intro p { color: var(--ink-500); margin-bottom: var(--space-3); }
.fr__cards { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
@media (min-width: 700px) { .fr__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .fr__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } }
.fr__card {
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); padding: var(--space-3);
    box-shadow: var(--shadow-xs);
}
/* The agency-status note is the one people most often get wrong, so it is given
   its own emphasis rather than sitting as a third identical card. */
.fr__card--note { background: var(--surface-mint); border-color: var(--green-100); }
/* Spans only in the two-column band, where it would otherwise sit alone in a
   half-width row. At three columns it is simply the third card. */
@media (min-width: 700px) and (max-width: 939px) { .fr__card--note { grid-column: 1 / -1; } }
.fr__icon {
    width: 36px; height: 36px; border-radius: 10px; margin-bottom: .7rem;
    background: var(--pink-100); color: var(--color-accent-dark);
    display: grid; place-items: center;
}
.fr__card--note .fr__icon { background: var(--green-100); color: var(--green-600); }
.fr__icon svg { width: 19px; height: 19px; }
.fr__card h3 { font-size: var(--step-0); margin-bottom: .35rem; }
.fr__card p { font-size: var(--step--1); color: var(--ink-500); margin: 0; }
.fr__card strong { color: var(--ink-900); }

/* --- Three steps --- */
.ce-steps {
    list-style: none; margin: 0; padding: 0; counter-reset: step;
    display: grid; gap: var(--space-3); grid-template-columns: 1fr;
}
@media (min-width: 780px) { .ce-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ce-step {
    position: relative; padding: var(--space-3);
    background: var(--surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-card); box-shadow: var(--shadow-xs);
}
.ce-step__num {
    display: grid; place-items: center;
    width: 40px; height: 40px; border-radius: 12px; margin-bottom: .8rem;
    background: var(--color-accent); color: #fff;
    font-size: var(--step-0); font-weight: 800;
    box-shadow: 0 6px 16px rgba(233,85,135,.28);
}
.ce-step h3 { font-size: var(--step-0); margin-bottom: .35rem; }
.ce-step p { font-size: var(--step--1); color: var(--ink-500); margin: 0; }

/* Location prose can use a little more measure than a narrow article column. */
.prose--wide { max-width: 74ch; }