/* ============================================================
   PEOPLE FIRST HEALTHCARE — MAIN STYLESHEET
   Colours are the official brand palette, September 2026.
   ============================================================ */

/* ── DESIGN TOKENS ─────────────────────────────────────────── */
:root {
  /* THE OFFICIAL PALETTE.
     Five values, straight off the brand sheet, and they are also the two fills
     inside the supplied logo SVG (#AF0000 and #003A6D), so the artwork and the
     interface now agree exactly rather than approximately.

       Navy blue    #003A6D   PANTONE 541 C
       Sky blue     #6DBBFF   PANTONE 284 C
       Crimson red  #AF0000   PANTONE 7621 C
       Coral red    #FF4344   PANTONE Warm Red C
       White        #FFFFFF

     Blue leads. It carries the header bar, the hero wash, the footer, the
     buttons and the headings. Red is the top strip and the alternating band,
     which keeps it present without letting it run the page. Sky blue is the
     on-dark button and the icon accent. Coral is a highlight, used sparingly.
  */
  --navy-blue:  #003A6D;
  --sky-blue:   #6DBBFF;
  --crimson:    #AF0000;
  --coral:      #FF4344;

  /* Surface tokens. Large dark areas point at these two and the page
     alternates down its length: red top strip, blue hero, red band, blue
     band, blue footer. The -deep variants are the gradient ends.

     The reds are a shade deeper than crimson on purpose. At the scale of a
     whole band #AF0000 reads as an alert, and this audience is usually
     mid-decision about a parent. */
  --brand-blue:      #003A6D;
  --brand-blue-deep: #002B52;
  --brand-red:       #8E1116;
  --brand-red-deep:  #6B0C10;

  /* Text-weight blues. --navy for headings, --blue for links. */
  --navy:      #003A6D;
  --navy-dark: #002B52;
  --blue:      #15537F;

  --white:     #FFFFFF;
  --charcoal:  #222B36;
  --slate:     #5A6573;

  /* Tinted off-whites for cards and callouts. Blue-tinted, not blush: the
     bands either side of them are mostly blue now, and a warm tint between
     two blue sections read as a stain rather than a surface. */
  --mist:      #F1F7FD;
  --mist-deep: #E2EDF9;

  /* On-dark button. Sky blue from the palette, with a deeper step for the
     pressed state. */
  --sky-strong: #6DBBFF;
  --sky:        #6DBBFF;
  --sky-deep:   #4FA5EE;

  /* The logo's own colours, for artwork and small accents. */
  --red:        #AF0000;
  --red-bright: #FF4344;

  /* Plus Jakarta Sans matches the mock-up's headings: humanist geometric,
     double-storey 'a', straight diagonal on the 'y'. Note it stops at 800 —
     there is no 900, and anything asking for one gets a synthesised fake-bold.
     Inter for body copy, which matters here because a good part of this
     audience is reading at arm's length. */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  --radius:    14px;
  --radius-lg: 20px;
  --shadow:    0 4px 24px rgba(0,43,82,.10);
  --shadow-lg: 0 12px 48px rgba(0,43,82,.16);
  --ease:      cubic-bezier(.22,1,.36,1);
}

/* ── RESET ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  overflow-x: hidden;
  line-height: 1.7;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ── LAYOUT ─────────────────────────────────────────────────── */
.container    { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.container-sm { max-width:  860px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 600px) {
  .container, .container-sm { padding: 0 20px; }
}

/* ── TYPOGRAPHY ─────────────────────────────────────────────── */
/* Looser than before: line-height 1.15 -> 1.22 and tracking -.02 -> -.014em.
   Plus Jakarta Sans has wider counters than Montserrat, so the old tight
   tracking closed it up and undid the reason for changing face. */
h1,h2,h3,h4,h5 {
  font-family: var(--font-display);
  line-height: 1.22;
  letter-spacing: -.014em;
}
h1 { font-size: clamp(1.75rem, 5vw, 2.8rem);  font-weight: 800; overflow-wrap: break-word; }
h2 { font-size: clamp(1.6rem, 2.5vw, 2.2rem);font-weight: 800; }
h3 { font-size: clamp(1.2rem, 2vw,   1.5rem);font-weight: 700; }
h4 { font-size: 1rem;   font-weight: 700; }
h5 { font-size: .85rem; font-weight: 700; }

p { line-height: 1.75; }
.lead { font-size: 1.1rem; color: var(--slate); line-height: 1.8; }

/* Narrative prose blocks on the service, location and pricing pages. The reset
   above zeroes every margin, and these sections are bare <h2>/<h3>/<p>/<table>
   with no component class of their own, so without this they render with no
   spacing at all. Same approach as .article-body in blog.css.

   Written as "* + heading" rather than "p + heading" so a heading that follows
   a table or list is spaced too — the pricing page interleaves all three.
   The two "heading + *" rules come last on purpose: they win the overlap, so
   content hugs the heading it belongs to.

   Note these are em values on the FOLLOWING element, so they resolve against
   body text (~16px), not the heading. An h2 renders up to 35px, so the first
   attempt at .65em under it was only 10px and read as crammed. */
.prose > * + *  { margin-top: 1.45em; }
.prose > * + h2 { margin-top: 2.2em; }
.prose > * + h3 { margin-top: 1.8em; }
.prose > h2 + * { margin-top: 1.05em; }
.prose > h3 + * { margin-top: .85em; }
/* .rate-wrap and .link-list both set their own margin further down the file.
   Same specificity as the rules above but later, so they won, and the pricing
   tables and service link lists sat flush against the paragraph before them.
   Two classes outranks one. */
.prose > .rate-wrap,
.prose > .link-list { margin-top: 1.45em; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-red);
  margin-bottom: 14px;
}
.eyebrow.sky  { color: var(--sky-blue); }
.eyebrow.white  { color: rgba(255,255,255,.65); }
.eyebrow.slate  { color: var(--slate); }

.accent       { color: var(--sky); }
.text-navy    { color: var(--navy); }
.text-blue    { color: var(--blue); }
.text-white   { color: #fff; }
.text-center  { text-align: center; }

/* ── SECTION HEAD ───────────────────────────────────────────── */
.section-head            { margin-bottom: 64px; }
.section-head h2         { margin-bottom: 18px; }
.section-head.center     { text-align: center; }
.section-head.center .lead { max-width: 640px; margin: 0 auto; }
@media (max-width: 640px) {
  .section-head { margin-bottom: 36px; }
}

/* ── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: -.01em;
  padding: 14px 28px;
  border-radius: 100px;
  /* A transparent 2px border on every button, not just the outline variants.
     Without it, hovering a filled button into its outlined state would add 4px
     of height and shift the row. It also fixes an inherited inconsistency
     where .btn-outline sat 4px taller than everything beside it. */
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease),
              background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease);
  white-space: nowrap;
  line-height: 1;
  /* Minimum touch target */
  min-height: 44px;
}
.btn:hover  { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.btn:active { transform: translateY(0); }

/* The arrow is its own element so it can move independently of the label.
   It is decorative and aria-hidden in the markup, so it is not announced. */
.btn-arrow {
  display: inline-block;
  transition: transform .22s var(--ease);
  will-change: transform;
}
.btn:hover .btn-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  .btn:hover  { transform: none; }
  .btn-arrow, .btn:hover .btn-arrow { transition: none; transform: none; }
}

/* Filled buttons hover to their own outline. Every filled variant keeps its
   colour on hover and drops the fill, so the hover state reads as the same
   button rather than a different one. */
.btn-primary        { background: var(--navy-blue); color: #fff; border-color: var(--navy-blue); }
.btn-primary:hover  { background: transparent; color: var(--navy-blue); }
/* On a dark band the outlined hover has to reverse out, or it disappears. */
.dark-band .btn-primary:hover,
.bg-red .btn-primary:hover,
.bg-blue .btn-primary:hover,
.page-hero .btn-primary:hover,
.site-footer .btn-primary:hover { color: #fff; border-color: #fff; }

/* The on-dark button: sky blue from the palette, hovering to a white outline. */
.btn-light        { background: var(--sky-blue); color: var(--navy-blue); border-color: var(--sky-blue); }
.btn-light:hover  { background: transparent; color: #fff; border-color: #fff; }

.btn-outline        { background: transparent; color: var(--navy-blue); border-color: var(--navy-blue); }
.btn-outline:hover  { background: var(--navy-blue); color: #fff; }
.btn-outline-white  { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-outline-white:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.btn-sm { padding: 10px 20px; font-size: .82rem; }
.btn-lg { padding: 18px 36px; font-size: 1rem; }

/* ── NAV ────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,43,82,.07);
  transition: box-shadow .3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 2px 20px rgba(0,43,82,.12); }

.topbar {
  background: var(--brand-red);
  padding: 6px 40px;
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  font-size: .75rem;
  font-family: var(--font-body);
  color: rgba(255,255,255,.7);
}
.topbar a { color: rgba(255,255,255,.7); text-decoration: none; transition: color .2s; }
.topbar a:hover { color: #fff; }
@media (max-width: 600px) { .topbar { padding: 6px 20px; } }

.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (max-width: 600px) { .nav-inner { padding: 0 20px; } }

.brand-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand-link img { height: 34px; width: auto; }

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  font-family: var(--font-body);
  font-size: .875rem;
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav-links a:hover         { background: var(--mist); color: var(--navy); }
.nav-links a.active,
.nav-links a[aria-current] { color: var(--navy); font-weight: 600; }

.nav-cta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.nav-phone {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .875rem;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -.01em;
}

/* Mobile nav */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--navy);
  /* Ensure touch target is at least 44px */
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.nav-toggle span { display: block; width: 24px; height: 2px; background: currentColor; transition: .2s; }
/* 1200px, not 840px. Measured: brand 188 + links 752 + CTA 132 + two 24px
   flex gaps = 1120px, against a content box of exactly 1120px (.nav-inner
   is max-width 1200 with 40px padding each side). So the horizontal nav
   only fits at 1200px and above, with nothing to spare.

   Below that it used to stay horizontal and silently clip, because body
   has overflow-x hidden: the "Get started" button was cut off the right
   edge rather than wrapping, at every width down to 840px.

   Two things to keep in mind when editing the nav:
   - This value and the .sticky-cta breakpoint must stay in step. Between
     them they decide whether a CTA is on screen at all.
   - There is 0px of headroom. Adding an item, or lengthening a label,
     puts it back over the cap. Re-measure if you change either. */
@media (max-width: 1200px) {
  .nav-links        { display: none; }
  .nav-toggle       { display: flex; margin-left: auto; }
  /* Hide the nav CTA button here — the sticky bottom bar takes over, and
     it now shares this exact breakpoint so there is no gap between them. */
  .nav-cta .btn     { display: none; }
  /* Slightly smaller logo to keep header compact */
  .brand-link img   { height: 28px; }
  /* Tighter nav inner gap */
  .nav-inner        { gap: 12px; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 104px; left: 0; right: 0;
    background: #fff;
    padding: 16px 24px calc(24px + env(safe-area-inset-bottom));
    border-bottom: 1px solid #eee;
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
    z-index: 800;
    /* Prevent links overflowing viewport width */
    overflow-x: hidden;
  }
  .nav-links.open a { padding: 14px 16px; font-size: 1rem; border-radius: 8px; }
  .nav-links.open a:hover { background: var(--mist); }
}

/* ── HERO ───────────────────────────────────────────────────── */
/* Every page header is the same height, set by the tallest case: the homepage,
   whose hero has to hold the enquiry form. 88vh covers normal windows; the
   620px floor covers short ones, where 88vh would be less than the form needs
   and the homepage would grow past its siblings again. max() keeps the two in
   step at every viewport instead of only at one. */
.hero {
  position: relative;
  min-height: max(88vh, 620px);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 104px;
}
@media (max-width: 840px) {
  .hero { min-height: auto; padding-top: 80px; padding-bottom: 48px; }
}
@media (max-width: 600px) {
  .hero { padding-bottom: 56px; }
}
/* .hero-sm used to set min-height:62vh, which is why sub-page headers were
   shorter than the homepage. That override is gone, so .hero-sm now inherits
   .hero and all 28 headers match. The class stays in the markup rather than
   being stripped from 27 files: it still marks which pages are sub-pages.

   No mobile rule needed here. The 840px query above already drops .hero to
   min-height:auto, and that is the same breakpoint where .hero-grid collapses
   to one column, so the header goes content-driven exactly when the homepage
   form stacks underneath the copy. */

.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center top;
  z-index: 0;
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,
    rgba(0,43,82,.92) 0%,
    rgba(0,43,82,.60) 50%,
    rgba(0,43,82,.14) 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  /* 40px, not 80px. .hero reserves 104px up top for the fixed header, so on a
     609px-tall window the grid only gets ~505px to play with and the enquiry
     form alone is close to that. Every 10px here is 10px of form pushed under
     the fold. */
  padding-block: 24px 40px;
  min-width: 0;
}
.hero-grid > * { min-width: 0; }
@media (max-width: 840px) {
  .hero-grid { grid-template-columns: 1fr; padding-block: 48px; gap: 32px; }
}
@media (max-width: 480px) {
  .hero-grid { padding-block: 32px; gap: 24px; }
}

/* position/z-index are load-bearing. .hero-bg is absolutely positioned with
   z-index 0, so it paints in a higher layer than ordinary in-flow text. Most
   heroes escape that because .hero-grid sets position:relative;z-index:2, but
   support-at-home puts .hero-copy straight inside .container. There it was
   only visible because .reveal's translateY created a stacking context; the
   moment the reveal finished and transform went to none, the heading slid up
   and vanished behind the gradient. Stacking should not depend on an
   animation, so it is declared here. */
.hero-copy { color: #fff; min-width: 0; position: relative; z-index: 2; }
.hero-copy h1 { color: #fff; margin-bottom: 20px; overflow-wrap: break-word; }
.hero-copy .lead { color: rgba(255,255,255,.85); margin-bottom: 24px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* text-align on the parent does nothing to a flex container's own items, so on
   every .page-hero (which is centred) the buttons were sitting hard left under
   a centred heading. The homepage .hero is left-aligned and must stay that way,
   hence scoping this rather than centring .hero-actions everywhere. */
.page-hero .hero-actions { justify-content: center; }

/* ── HOMEPAGE HERO FORM ───────────────────────────────────────
   The homepage takes 46% of all sessions and previously had no form
   on it at all: the only way to convert was to click through to
   another page. Three fields.

   The form is its own hero-grid column, not nested inside .hero-copy.
   It was nested originally, which left three inputs and a fixed-width
   Turnstile widget sharing about 490px, so every field was too narrow
   to read. On a phone the grid is one column and the form still sits
   directly under the headline, which is 85% of this site's traffic. */
.hero-form-wrap {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-lg);
  padding: 18px 18px 14px;
  backdrop-filter: blur(6px);
  max-width: 560px;
}
.hero-form-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  margin: 0 0 14px;
}
.hero-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
/* Name takes the full width; phone and postcode share the row beneath it.
   Three across does not fit a half-width hero column legibly. */
.hero-form-row .form-group:first-child { grid-column: 1 / -1; }
.hero-form .form-actions { margin-top: 10px; }
/* The 20px min-height on .form-status reserves space so the layout doesn't jump
   when a message appears. In the hero that 20px is 20px of form pushed under the
   fold, and the jump happens once, on submit, while the user is looking at it. */
.hero-form .form-status { min-height: 0; }
.hero-form .form-reassure { margin-top: 8px; }
.hero-alt {
  font-size: .86rem;
  color: rgba(255,255,255,.72);
  margin: 14px 0 0;
}
.hero-alt a { color: var(--sky); font-weight: 600; text-decoration: none; }
.hero-alt a:hover { text-decoration: underline; }

/* The one secondary path out of the hero: the B2B audience. Kept
   deliberately quiet so it does not compete with the enquiry form. */
.hero-partner-line {
  font-size: .86rem;
  color: rgba(255,255,255,.6);
  margin: 20px 0 0;
}
.hero-partner-line a { color: rgba(255,255,255,.9); text-decoration: underline; }

@media (max-width: 840px) {
  .hero-form-wrap { max-width: none; padding: 18px 16px 16px; }
}
@media (max-width: 480px) {
  .hero-form-row { grid-template-columns: 1fr; }
  .hero-form .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; }
}

/* Squiggle SVG decoration */
.squiggle { position: absolute; pointer-events: none; z-index: 1; }

/* ── LIVE BUDGET CARD ───────────────────────────────────────── */
.budget-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,43,82,.25);
  padding: 28px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  /* Prevent card from overflowing narrow containers */
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
@media (max-width: 480px) {
  .budget-card {
    padding: 18px 16px;
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0,43,82,.18);
  }
  .bc-amount { font-size: 1.75rem; }
}
.bc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--slate);
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* .live-badge removed. It put a green "● LIVE" pill on the budget card
   headers. The cards are illustrative mockups, so a LIVE tag implied a real
   feed. The .status-pill styles below are still in use for the PAID /
   SCHEDULED / CONFIRMED row labels inside the same cards. */
.bc-amount {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 4px;
}
.bc-sub { font-size: .82rem; color: var(--slate); margin-bottom: 16px; }
.bc-bar {
  height: 6px;
  background: #eee;
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 20px;
}
.bc-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--blue), var(--sky));
  width: 49%;
  transition: width 1.2s var(--ease);
}
.bc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-top: 1px solid #f0f0f0;
  font-size: .84rem;
  color: var(--charcoal);
  gap: 8px;
}
.bc-row > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.status-pill {
  font-size: .7rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 100px;
}
.pill-paid      { background: var(--mist-deep);   color: #2d7a0a; }
.pill-scheduled { background: #FFF3CD;        color: #856404; }
.pill-ready     { background: var(--mist);    color: var(--navy); }
.bc-badge {
  margin-top: 14px;
  background: var(--mist-deep);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  overflow-wrap: break-word;
  word-break: break-word;
}
.badge-dot {
  width: 10px; height: 10px;
  background: var(--sky);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── STAT BAND ──────────────────────────────────────────────── */
/* The padding was always symmetrical; the band only looked bottom-heavy because
   its .reveal children were stuck 28px low (see .reveal.visible). Slimmed from
   60px now that they sit where they should. */
.stat-band { background: var(--brand-blue); padding: 40px 0; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
  text-align: center;
}
@media (max-width: 700px) { .stat-grid { grid-template-columns: repeat(2,1fr); gap: 16px; } }
@media (max-width: 360px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.4rem, 5vw, 2.8rem);
  color: #fff;
  line-height: 1.1;
  margin-bottom: 8px;
  overflow-wrap: break-word;
}
.stat-label { font-size: .82rem; color: rgba(255,255,255,.75); }

/* ── USP CARDS ──────────────────────────────────────────────── */
.usp-section { padding: 96px 0; }
.usp-section.bg-mist { background: var(--mist); }
.usp-section.bg-white { background: var(--white); }
@media (max-width: 640px) {
  .usp-section { padding: 56px 0; }
}

.usp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 24px;
}
@media (max-width: 480px) {
  .usp-grid { gap: 16px; }
  .usp-card { padding: 24px 20px; }
}

.usp-card {
  background: #fff;
  border: 1.5px solid rgba(0,43,82,.08);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  overflow: hidden;
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
}
.usp-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.usp-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: transparent; }
.usp-card:hover::before { transform: scaleX(1); }

.usp-icon {
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin-bottom: 20px;
  /* icons have transparent bg — display cleanly on any bg */
}
.usp-card h3 { color: var(--navy); margin-bottom: 10px; font-size: 1.05rem; }
.usp-card p  { font-size: .9rem; color: var(--slate); line-height: 1.65; }

/* ── PARTIES / FOUR PARTIES SECTION ────────────────────────── */
.parties-section { background: var(--brand-blue); padding: 96px 0; }
.parties-section .section-head h2  { color: #fff; }
.parties-section .section-head .lead { color: rgba(255,255,255,.75); }
@media (max-width: 640px) {
  .parties-section { padding: 56px 0; }
}

.parties-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 20px;
}
@media (max-width: 900px) { .parties-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .parties-grid { grid-template-columns: 1fr; } }

.party-card {
  position: relative;
  background: var(--mist);
  border: 1px solid rgba(0,43,82,.10);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  transition: background .25s, transform .25s var(--ease);
}
.party-card:hover { background: #fff; transform: translateY(-4px); }
.party-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  color: rgba(0,43,82,.12);
  position: absolute;
  top: 16px; right: 20px;
  line-height: 1;
}
.party-icon {
  width: 64px; height: 64px;
  object-fit: contain;
  margin-bottom: 16px;
}
.party-card h3 { color: var(--navy); font-size: 1rem; margin-bottom: 10px; }
.party-card p  { color: var(--slate); font-size: .86rem; line-height: 1.6; }

.thesis-banner {
  margin-top: 48px;
  background: rgba(126,211,72,.12);
  border: 1px solid rgba(126,211,72,.3);
  border-radius: var(--radius-lg);
  padding: 28px 36px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: #fff;
  text-align: center;
  line-height: 1.6;
}
.thesis-banner .accent { color: var(--sky); }
@media (max-width: 480px) {
  .thesis-banner { padding: 20px; font-size: .95rem; }
}

/* ── COMPARISON TABLE ───────────────────────────────────────── */
.compare-section { padding: 96px 0; background: var(--mist); }
@media (max-width: 640px) {
  .compare-section { padding: 56px 0; }
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
@media (max-width: 860px) { .compare-grid { grid-template-columns: 1fr; } }

.compare-col       { background: #fff; padding: 36px; border-right: 1px solid #eee; }
.compare-col:last-child { border-right: none; }
.compare-col.us    { background: var(--brand-blue); }
@media (max-width: 860px) {
  .compare-col { padding: 28px 24px; border-right: none; border-bottom: 1px solid #eee; }
  .compare-col:last-child { border-bottom: none; }
}
.compare-col .cml  {
  display: block;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 10px;
}
.compare-col.us .cml { color: rgba(255,255,255,.5); }
.compare-col h3 { color: var(--navy); margin-bottom: 20px; font-size: 1.05rem; }
.compare-col.us h3 { color: #fff; }
.compare-col ul  { list-style: none; }
/* The three columns are separate <ul>s, so nothing makes row 3 of one line up
   with row 3 of the next: a two-line item in one column shunts every row below
   it out of step with its neighbours. Reserving two lines on every row keeps
   them aligned even when one item wraps and its counterparts do not. Copy is
   written to fit two lines; a third would break the alignment again. */
.compare-col li  {
  padding: 11px 0;
  min-height: calc(3.1em + 22px);
  border-bottom: 1px solid #f0f0f0;
  font-size: .88rem;
  color: var(--charcoal);
  display: flex; gap: 10px; align-items: flex-start;
  line-height: 1.55;
}
/* Stacked on mobile the columns sit one above another, so cross-column
   alignment is meaningless and the reserved space is just dead air. */
@media (max-width: 860px) { .compare-col li { min-height: 0; } }
.compare-col.us li { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.12); }
.compare-col li::before     { content: '→'; color: var(--slate); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.compare-col.us li::before  { content: '✓'; color: var(--sky); }

/* ── SPLIT SECTIONS ─────────────────────────────────────────── */
.split-section { padding: 96px 0; }
.split-section.bg-mist { background: var(--mist); }
.split-section.bg-mist-deep { background: var(--mist-deep); }
.split-section.bg-sky { background: var(--sky); }
.split-section.bg-blue  { background: var(--brand-blue); }
.split-section.bg-red   { background: var(--brand-red); }
@media (max-width: 640px) {
  .split-section { padding: 56px 0; }
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-grid.reversed .split-img { order: -1; }
@media (max-width: 800px) {
  .split-grid, .split-grid.reversed { grid-template-columns: 1fr; gap: 32px; }
  .split-grid.reversed .split-img { order: 0; }
}
@media (max-width: 480px) {
  .split-grid { gap: 24px; }
}

.split-img { position: relative; }
.split-img img {
  width: 100%;
  border-radius: var(--radius-lg);
  object-fit: cover;
  height: 460px;
}
@media (max-width: 800px) {
  .split-img img { height: 300px; }
}
@media (max-width: 480px) {
  .split-img img { height: 220px; border-radius: var(--radius); }
}
/* .img-badge removed. It floated a white caption over the bottom-left of each
   split photo ("No audit sitting on your desk.", "Every fee shown up front.").
   The captions did not relate to what was in the picture, so they read as
   stickers rather than context. Both the four elements and these rules are
   gone; don't reintroduce without copy that describes the actual photo. */

.split-copy h2 { margin-bottom: 16px; }
.split-copy p  { margin-bottom: 14px; color: var(--slate); }
.split-copy .lead { color: var(--slate); margin-bottom: 16px; }

.highlight-bar {
  margin-top: 20px;
  background: var(--mist);
  border-left: 4px solid var(--brand-red);
  padding: 16px 20px;
  border-radius: 0 10px 10px 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  font-size: .95rem;
  line-height: 1.5;
}

/* ── CHECKLIST ──────────────────────────────────────────────── */
.checklist { list-style: none; margin-top: 24px; }
.checklist li {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: .92rem;
  line-height: 1.55;
  align-items: flex-start;
}
.checklist li:last-child { border-bottom: none; }
.check-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--mist-deep);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 800;
  color: var(--navy);
  margin-top: 1px;
}
.check-icon.blue { background: var(--mist); color: var(--brand-blue); }
.checklist li strong { color: var(--navy); }
.checklist li span  { color: var(--slate); font-size: .87rem; display: block; margin-top: 3px; }

/* ── CARD ───────────────────────────────────────────────────── */
.card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow);
  border: 1.5px solid rgba(0,43,82,.07);
}
.card.dark {
  background: var(--brand-blue);
  border-color: transparent;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 24px;
}

/* ── CTA BANNER ─────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--mist) 0%, var(--mist-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 800px) { .cta-banner { grid-template-columns: 1fr; padding: 40px 32px; gap: 28px; } }
@media (max-width: 480px) { .cta-banner { padding: 28px 20px; border-radius: var(--radius); } }
.cta-banner h2 { font-size: clamp(1.8rem,3.5vw,2.4rem); color: var(--brand-blue); margin-bottom: 12px; }
.cta-banner p  { color: rgba(0,43,82,.8); font-size: 1rem; }
.cta-banner-actions { display: flex; flex-direction: column; gap: 14px; }

/* Secondary partner prompt for service and location pages. Deliberately a thin
   strip rather than a second .cta-banner: these pages already end in a client
   enquiry form, and two full-height banners competing at the foot of the page
   reads as a wall of asks. This one is for the other audience — a provider who
   landed on the page because they deliver the service or work in the region. */
.partner-prompt {
  padding: 26px 0;
  background: var(--mist-deep);
  border-top: 1px solid rgba(0,43,82,.08);
  border-bottom: 1px solid rgba(0,43,82,.08);
}
.partner-prompt p {
  color: var(--navy);
  font-size: .95rem;
  line-height: 1.6;
}
.partner-prompt strong { font-family: var(--font-display); font-weight: 700; }
.partner-prompt a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.partner-prompt a:hover { color: var(--blue); }

/* ── QUOTE SECTION ──────────────────────────────────────────── */
.quote-section { padding: 96px 0; background: var(--mist-deep); }
@media (max-width: 640px) { .quote-section { padding: 56px 0; } }
.quote-block   { max-width: 720px; margin: 0 auto; text-align: center; }
.quote-mark    { font-family: var(--font-display); font-size: 5rem; color: var(--sky); line-height: .5; display: inline-block; margin-bottom: 20px; }
.quote-block blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem,3vw,2rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 24px;
}
.quote-block cite {
  font-style: normal;
  font-size: .9rem;
  color: var(--slate);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── FAQ ────────────────────────────────────────────────────── */
.faq-section { padding: 96px 0; }
@media (max-width: 640px) { .faq-section { padding: 56px 0; } }
.faq-list    { max-width: 760px; margin: 0 auto; }
/* Inside .container-sm the 780px content box is narrower than this 760px cap,
   so "margin: 0 auto" resolved to "0 10px" and pushed every <summary> 10px
   right of the h2, h3 and .link-list beside it. Those pages are left-aligned
   prose, so the list should simply fill the column. The centred layouts
   (homepage, support-at-home) sit in .container and keep the rule above. */
.container-sm .faq-list { max-width: none; margin: 0; }
details.faq  { border-bottom: 1px solid rgba(0,43,82,.1); }
details.faq summary {
  padding: 22px 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transition: color .2s;
  user-select: none;
}
details.faq summary:hover { color: var(--blue); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--blue);
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform .25s var(--ease);
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq p {
  padding: 0 0 22px;
  font-size: .92rem;
  color: var(--slate);
  line-height: 1.75;
}

/* ── FORM ───────────────────────────────────────────────────── */
.form-section { padding: 96px 0; background: var(--brand-blue); }
.form-section h2   { color: #fff; margin-bottom: 12px; }
.form-section .lead { color: rgba(255,255,255,.72); margin-bottom: 48px; }
@media (max-width: 640px) {
  .form-section { padding: 56px 0; }
  .form-section .lead { margin-bottom: 32px; }
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
/* min-width:0 matters. A grid/flex item defaults to min-width:auto, so it
   refuses to shrink below its content's intrinsic width. An <input> reports
   an intrinsic width from its default size attribute (~20 characters), which
   came to 489px against a 471px track: the field overflowed its column and
   sat 23px from the left edge but only 4px from the right. Chrome and Firefox
   size that intrinsic width differently, which is why it looked wrong in
   both but not identically wrong. */
.form-group       { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.form-group.full  { grid-column: 1 / -1; }

.form-group label {
  font-size: .78rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.form-group.light label { color: var(--slate); }

.form-group input,
.form-group select,
.form-group textarea {
  /* Pair with min-width:0 on .form-group above. Without both, the field
     keeps its intrinsic size-attribute width and overflows its column. */
  width: 100%;
  min-width: 0;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 10px;
  padding: 12px 16px;
  color: #fff;
  font-size: .95rem;
  font-family: var(--font-body);
  transition: border-color .2s, background .2s;
  outline: none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: rgba(255,255,255,.3); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--sky);
  background: rgba(255,255,255,.15);
}
.form-group select option { color: var(--charcoal); background: #fff; }

/* Light form variant (contact page) */
.form-group.light input,
.form-group.light select,
.form-group.light textarea {
  background: var(--mist);
  border-color: rgba(0,43,82,.15);
  color: var(--charcoal);
}
.form-group.light input::placeholder,
.form-group.light textarea::placeholder { color: var(--slate); }
.form-group.light input:focus,
.form-group.light select:focus,
.form-group.light textarea:focus {
  border-color: var(--blue);
  background: #fff;
}

/* ── CODED FORM: validation, status, turnstile ─────────────── */
.pfh-form { text-align: left; }
.pfh-form .form-grid { margin-bottom: 4px; }

/* Inline field errors */
.field-error {
  display: block;
  min-height: 15px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: #ffb4a8;
}
.form-group.light .field-error { color: #c0392b; }

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #ff6b57;
  background: rgba(255,107,87,.12);
}
.form-group.light.has-error input,
.form-group.light.has-error select,
.form-group.light.has-error textarea {
  border-color: #c0392b;
  background: #fdecea;
}

/* Honeypot — visually and programmatically hidden from humans */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Submit + status */
.pfh-form .form-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}
.pfh-form .btn[disabled] { opacity: .6; cursor: not-allowed; }

.form-status {
  font-size: .9rem;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  min-height: 20px;
}
.form-status.error { color: #ffb4a8; }
.form-group.light ~ .form-actions .form-status,
.pfh-form.light .form-status { color: var(--charcoal); }
.pfh-form.light .form-status.error { color: #c0392b; }

/* Turnstile runs in Invisible widget mode (set per sitekey in Cloudflare), so
   this container renders at zero height and there is no checkbox to space away
   from the button. It still has to exist and stay in the layout: the widget
   needs a render target, and it is what injects the cf-turnstile-response input
   that forms.js reads. Do not display:none it. If the widget mode is ever
   switched back to Managed, restore a top margin and the data-theme attribute
   so the visible checkbox is not jammed against the submit button. */
.cf-turnstile { margin: 0; }

.form-privacy {
  font-size: .78rem;
  line-height: 1.5;
  color: rgba(255,255,255,.55);
  margin-top: 6px;
}
.pfh-form.light .form-privacy { color: var(--slate); }
.form-privacy a { color: inherit; text-decoration: underline; }

/* Optional-field marker. The short enquiry forms require only name, phone
   and postcode; everything else is explicitly marked optional so nobody
   abandons the form thinking they must supply it. */
.form-group .opt {
  font-weight: 400;
  opacity: .6;
  font-size: .85em;
}

/* Sits directly above the privacy line: answers the obvious question of why
   we are not asking where they live. */
.form-reassure {
  font-size: .82rem;
  line-height: 1.5;
  color: rgba(255,255,255,.7);
  margin-top: 10px;
}
.pfh-form.light .form-reassure { color: var(--slate); }

/* ── BREADCRUMB ───────────────────────────────────────────────
   Was previously only in blog.css, so it was unstyled on any page
   that does not load that file. Moved here so the service and
   location pages get it too. */
.breadcrumb {
  font-size: .82rem;
  color: rgba(255,255,255,.65);
  margin-bottom: 22px;
}
.breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── LINK LIST ────────────────────────────────────────────────
   Plain list of internal links, used for "read more" and sibling
   navigation at the foot of service and location pages. */
.link-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(0,43,82,.1);
}
.link-list li { border-bottom: 1px solid rgba(0,43,82,.1); }
.link-list a {
  display: block;
  padding: 14px 0;
  color: var(--navy);
  font-weight: 600;
  font-size: .94rem;
  text-decoration: none;
  transition: color .2s;
}
.link-list a:hover { color: var(--blue); }
.link-list a::after { content: ' →'; color: var(--brand-red); }

/* Cards that are themselves links (service hub grid). */
a.card { transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
a.card h4 { color: var(--navy); }
a.card p  { color: var(--slate); }

/* Visible placeholder for a fact the business still needs to supply. Loud on
   purpose: these pages are live, and a missing fee percentage should look
   obviously missing rather than quietly absent. Remove the rule once every
   [TO CONFIRM] has been filled in. */
mark.tc {
  background: #FFF3CD;
  color: #7A5B00;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid #E6C86B;
}

/* Working default inserted pending business ratification. Distinct from
   [TO CONFIRM] so the two states are not confused: TC means nothing is there,
   SO means something plausible is there but nobody has signed it off. */
/* mark.so removed. It styled the [AWAITING SIGN-OFF] flags on /complaints/,
   which were ratified in August 2026 — the commitments (2 business days,
   28 calendar days, care governance team, internal review) are now stated
   plainly. mark.tc above stays: /privacy/ and /terms/ still carry
   [TO CONFIRM] markers. */

/* ── RATE TABLES ──────────────────────────────────────────────
   The indicative price guide, rendered as real tables rather than an
   embedded PDF so it is readable on a phone and crawlable. Scrolls
   horizontally on narrow screens rather than shrinking the text. */
.rate-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 32px;
  border: 1px solid rgba(0,43,82,.12);
  border-radius: var(--radius);
}
table.rates {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: .88rem;
}
table.rates thead th {
  background: var(--brand-blue);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: right;
  padding: 12px 14px;
  white-space: nowrap;
}
table.rates thead th:first-child { text-align: left; }
table.rates tbody th {
  text-align: left;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--navy);
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,43,82,.08);
  vertical-align: top;
}
table.rates tbody td {
  text-align: right;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,43,82,.08);
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.rates tbody tr:last-child th,
table.rates tbody tr:last-child td { border-bottom: 0; }
table.rates tbody tr:hover th,
table.rates tbody tr:hover td { background: var(--mist); }
table.rates td.span { text-align: left; color: var(--slate); font-style: italic; }
.rt-detail {
  display: block;
  font-weight: 400;
  font-size: .78rem;
  color: var(--slate);
  margin-top: 3px;
  white-space: normal;
}
.rate-note {
  font-size: .82rem;
  color: var(--slate);
  border-top: 1px solid rgba(0,43,82,.1);
  padding-top: 14px;
}

/* ── /my-care/ SERVICE CARD LINKS ─────────────────────────────
   The 21 named services previously linked nowhere. Each heading now
   goes to its service page, and seven cards carry a second link to the
   matching "can Support at Home pay for X" post. */
.svc-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s, color .2s;
}
.svc-link:hover { color: var(--blue); border-bottom-color: var(--blue); }
.svc-more {
  display: inline-block;
  margin-top: 4px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  white-space: nowrap;
}
.svc-more:hover { text-decoration: underline; }
.svc-more::after { content: ' →'; }

/* ── PRICING TABLE ──────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin-top: 36px; }
.pricing-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pricing-table th {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--navy);
  text-align: left;
  padding: 14px 20px;
  background: var(--mist);
  border-bottom: 2px solid rgba(0,43,82,.12);
}
.pricing-table td {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,43,82,.07);
  color: var(--charcoal);
  vertical-align: top;
  line-height: 1.6;
}
.pricing-table tr:last-child td { border-bottom: none; }
.pricing-table tr:hover td { background: var(--mist); }
.pricing-table td strong { color: var(--navy); }
.pricing-table td .sub { font-size: .82rem; color: var(--slate); display: block; margin-top: 3px; }

/* ── TIMELINE ───────────────────────────────────────────────── */
.timeline { margin-top: 48px; max-width: 640px; margin-inline: auto; }
.timeline-item { display: flex; gap: 24px; margin-bottom: 36px; }
.timeline-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.timeline-body h4 { color: var(--navy); margin-bottom: 6px; }
.timeline-body p  { font-size: .9rem; color: var(--slate); line-height: 1.7; }

/* ── FOOTER ─────────────────────────────────────────────────── */
/* Navy, not charcoal: the mock-up carries the brand colour all the way to the
   bottom of the page, and a neutral dark footer under a navy CTA band read as
   two different dark greys stacked on each other. */
.site-footer { background: var(--brand-blue); padding: 72px 0 32px; }
@media (max-width: 500px) {
  .site-footer { padding: 48px 0 calc(32px + env(safe-area-inset-bottom)); }
}
/* Four groups: brand and phone, the two offices, services, then everything
   else. The first column is wider because it carries the logo. */
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px 32px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 32px;
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-logo { height: 30px; width: auto; margin-bottom: 20px; }
.footer-tagline { font-size: .88rem; color: rgba(255,255,255,.5); line-height: 1.8; }

.site-footer h4 {
  font-family: var(--font-display);
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 18px;
}
.site-footer ul { list-style: none; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer ul li a,
.site-footer ul li span {
  font-size: .875rem;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color .2s;
}
.site-footer ul li a:hover { color: #fff; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: .78rem;
  color: rgba(255,255,255,.32);
}

/* ── STICKY MOBILE BAR ──────────────────────────────────────── */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--brand-red);
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 800;
  text-align: center;
}
/* Must match the nav breakpoint above. These were 640px and 840px, which
   left 641-840px with no CTA anywhere: the nav button was already hidden
   but this bar had not appeared yet. */
@media (max-width: 1200px) { .sticky-cta { display: block; } }
.sticky-cta a {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ── PROMISE HERO (interior pages) ─────────────────────────── */
/* The imageless navy headers. Same min-height as .hero so a page with a photo
   and a page without are the same height — see the note on .hero for why the
   620px floor sits alongside 88vh. Flex centring rather than fixed padding,
   because these pages have between one and three lines of copy and padding
   alone would leave them sitting high in the taller box. */
.page-hero {
  /* 104px top and nothing at the bottom, same as .hero. The fixed header covers
     the top 101px, so this offset is what makes flex centring land in the middle
     of the *visible* area rather than the middle of the box. The old
     "136px 0 80px" left the copy sitting high once min-height was added. */
  padding: 104px 0 0;
  background: var(--brand-blue);
  text-align: center;
  min-height: max(88vh, 620px);
  display: flex;
  align-items: center;
  /* relative + overflow so a .hero-bg child can be absolutely positioned
     inside it. The navy above stays as the fallback behind the photo. */
  position: relative;
  overflow: hidden;
}
/* width:100% because the .container is a flex item and would otherwise shrink
   to its content, breaking the centred max-width layout. z-index because
   .hero-bg is positioned and therefore paints above plain in-flow content —
   the same trap that hid the support-at-home heading. */
.page-hero > .container,
.page-hero > .container-sm { width: 100%; position: relative; z-index: 2; }

/* No overlay override here on purpose: .page-hero and .blog-hero inherit the
   same 105deg gradient as .hero so every header looks identical. See the note
   on .hero-bg::after about the right-hand end being nearly clear. */
@media (max-width: 840px) {
  .page-hero { min-height: auto; }
}
@media (max-width: 640px) {
  .page-hero { padding: 96px 0 56px; }
}
.page-hero h1     { color: #fff; margin-bottom: 16px; }
.page-hero .lead  { color: rgba(255,255,255,.75); max-width: 580px; margin: 0 auto; }

/* ── REVEAL ANIMATIONS ──────────────────────────────────────── */
/* Gated behind .js, which an inline script in <head> adds before first paint.
   Without that gate a visitor with JavaScript off gets opacity:0 on most of
   the page and never gets it back, because only the IntersectionObserver ever
   adds .visible. The content is all in the HTML either way, so crawlers were
   fine, but a human with JS blocked saw a hero and nothing else.

   Scoping to .js rather than using a <noscript> override keeps it to one rule
   and means the default state of the markup is visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
/* Anyone who has asked their OS to reduce motion gets the content with no
   movement and no fade, rather than a shorter version of the same animation. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}
/* transform:none matters as much as the opacity. Without it the element keeps
   the 28px offset forever: the transition above animates transform, but nothing
   ever changed it back. Everything shifted together so it read as normal, until
   a .reveal element sat next to one without the class — the enquiry forms are
   .reveal and the "Or call" line after them is not, so the two overlapped by
   10px on every page carrying that form. */
.js .reveal.visible { opacity: 1; transform: none; }
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .20s; }
.delay-3 { transition-delay: .30s; }
.delay-4 { transition-delay: .40s; }

/* ── UTILITY ────────────────────────────────────────────────── */
.mt-0  { margin-top:  0;    }
.mt-16 { margin-top: 16px;  }
.mt-24 { margin-top: 24px;  }
.mt-32 { margin-top: 32px;  }
.mt-48 { margin-top: 48px;  }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.mb-32 { margin-bottom: 32px; }
.gap-row { display: flex; gap: 16px; flex-wrap: wrap; }
.gap-row.center { justify-content: center; }

/* ── CIRCLE PHOTO ───────────────────────────────────────────── */
.circle-photo {
  border-radius: 50%;
  width: 380px; height: 380px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}
@media (max-width: 560px) { .circle-photo { width: 260px; height: 260px; } }

/* ── NOTEBOOK / CALLOUT ─────────────────────────────────────── */
.callout {
  background: var(--mist);
  border-left: 4px solid var(--blue);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  font-size: .92rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.5;
}
.callout.sky { background: var(--mist-deep); border-color: var(--sky); }

/* ── DARK BAND ──────────────────────────────────────────────── */
.dark-band {
  background: var(--brand-red);
  padding: 96px 0;
  text-align: center;
}
@media (max-width: 640px) { .dark-band { padding: 56px 0; } }
.dark-band h2   { color: #fff; max-width: 840px; margin: 0 auto 16px; }
.dark-band .lead { color: rgba(255,255,255,.7); max-width: 560px; margin: 0 auto 40px; }

/* ── CONTACT PAGE SPECIFIC ──────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 48px;
  align-items: start;
}
@media (max-width: 800px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-info-card { margin-bottom: 20px; }
.contact-info-card h4 { color: var(--navy); margin-bottom: 10px; }
.contact-info-card p  { font-size: .88rem; color: var(--slate); line-height: 1.7; }
.contact-info-card a  { color: var(--blue); text-decoration: none; }
.contact-info-card a:hover { text-decoration: underline; }

/* Service card icons (my-care service list).
   These are Phosphor Icons, regular weight, MIT licensed (phosphoricons.com).
   Attribution is not required by the licence. Each file is the upstream SVG
   with three changes: fill pinned to the brand blue instead of currentColor,
   width/height 64 added, and aria-hidden restored. They keep the 256 viewBox,
   so to swap one, take the same-named file from @phosphor-icons/core
   assets/regular and apply those three edits. */
.svc-icon {
  width: 32px; height: 32px;
  display: block;
  margin-bottom: 10px;
  opacity: .9;
}

/* Small inline icons in the footer contact block */
.inline-icon {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  opacity: .75;
}
.site-footer ul li { display: flex; align-items: flex-start; gap: 0; }
.site-footer ul li .inline-icon { flex: 0 0 16px; margin-top: 3px; }

.col-icon {
  width: 20px; height: 20px;
  display: inline-block;
  vertical-align: -4px;
  margin-right: 8px;
}

/* ---------------------------------------------------------------------------
   Illustration slots.
   The unDraw artwork is landscape (roughly 4:3), not square, so these size by
   HEIGHT and let width follow. That keeps every card in a row visually level.
   --------------------------------------------------------------------------- */
.usp-illo {
  height: 140px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 0 20px;
}

/* The four-parties cards sit on --brand. Several of these illustrations use
   unDraw's near-black structural colours (#3F3D56, #2F2E41, #090814) which fall
   below 2:1 contrast on a dark surface and effectively vanish. Rather than
   repaint artwork, the illustration sits on a light panel inside the card.

   Inherited from the sister site's framework and not used on any PFH page yet.
   Kept because the pattern is sound and the contrast note is the kind of thing
   that gets rediscovered the hard way. */
.party-illo {
  height: 116px;
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 0 16px;
}

@media (max-width: 640px) {
  .usp-illo { height: 112px; }
  .party-illo { height: 96px; }
}

/* ============================================================
   PFH ADDITIONS
   Components in the approved mock-up that the shared framework
   did not already cover.
   ============================================================ */

/* ── STAT BAND, LIGHT ───────────────────────────────────────── */
/* The mock-up runs the stats on white with a strapline beside them, rather
   than the reversed-out band the sister site uses. The strapline sits in the
   first column behind a navy rule; the numbers take the rest. Below 860px the
   two stack and the rule moves to the top of the strapline. */
.stat-band.light { background: var(--white); padding: 72px 0; }
.stat-band.light .stat-num   { color: var(--navy); }
.stat-band.light .stat-label { color: var(--slate); }

.stat-split {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 2fr;
  gap: 56px;
  align-items: center;
}
.stat-strapline {
  border-left: 4px solid var(--navy);
  padding-left: 24px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--navy);
}
@media (max-width: 860px) {
  .stat-split { grid-template-columns: 1fr; gap: 36px; }
  .stat-band.light { padding: 48px 0; }
}

.stat-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .stat-grid-3 { grid-template-columns: 1fr; gap: 28px; } }

/* ── PHOTO CARDS ────────────────────────────────────────────── */
/* Service tiles: a photo with the name reversed out over the bottom edge.
   The gradient is on a pseudo-element rather than baked into the image so the
   same photo can be reused elsewhere without it. Text sits above the gradient
   via z-index, and the whole tile is one link, so the label needs
   pointer-events left alone and no nested anchor. */
.photo-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px;
}
.photo-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  aspect-ratio: 1 / 1.03;
  box-shadow: var(--shadow);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.photo-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.photo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,43,82,.9) 0%, rgba(0,43,82,.48) 38%, rgba(0,43,82,0) 68%);
}
.photo-card-label {
  position: absolute;
  z-index: 1;
  left: 20px; right: 20px; bottom: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.08rem;
  line-height: 1.25;
  color: #fff;
}
.photo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.photo-card:hover img { transform: scale(1.05); }
.photo-card:focus-visible { outline: 3px solid var(--sky-strong); outline-offset: 3px; }

/* ── CHECKLIST ──────────────────────────────────────────────── */
/* .checklist li span (0,1,2) outranks .check-icon (0,1,0), so the tick was
   being given display:block, slate text and a 3px top margin meant for the
   copy beside it. That killed the flex centring and pushed the tick off the
   middle of its circle. Same selector depth, declared later, so it wins. */
.checklist li .check-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  color: var(--navy);
  margin-top: 1px;
}

/* The base .checklist divider is #f0f0f0, which disappears on navy. */
.checklist-light li {
  color: rgba(255,255,255,.92);
  border-bottom-color: rgba(255,255,255,.16);
  font-size: .98rem;
  padding: 16px 0;
}
.checklist-light li strong { color: #fff; }
.checklist-light li span   { color: rgba(255,255,255,.65); }

/* ── RADIO GROUP ────────────────────────────────────────────── */
/* Used for the "where are you up to" question on the enquiry form. It is a
   fieldset, so the browser default border and padding are cleared first.
   Each option is a full-width label so the whole row is a tap target, which
   matters on a form this audience often fills in on a phone. */
.radio-group { border: none; padding: 0; margin: 0; }
.radio-group legend {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 12px;
  padding: 0;
}
.radio-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  margin-bottom: 8px;
  border: 1.5px solid rgba(0,43,82,.14);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1.45;
  transition: border-color .18s, background .18s;
  min-height: 44px;
}
.radio-option:hover { border-color: var(--sky-strong); background: var(--mist); }
/* .form-group input sets width:100% and .form-group.light input repaints the
   background, both of which land on these radios and stretched each one to the
   full width of the fieldset, shunting its label into a narrow column beside
   it. Three classes and an element beats both, and the type selector keeps it
   off any text input that ends up inside a radio group later. */
.radio-group .radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 2px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  accent-color: var(--navy);
  flex-shrink: 0;
}
.radio-option:has(input:checked) { border-color: var(--navy); background: var(--mist); }
.radio-option:focus-within { outline: 2px solid var(--sky-strong); outline-offset: 2px; }

/* ── FORM SECTION, LIGHT ────────────────────────────────────── */
/* The mock-up puts the enquiry form on white with pill fields, rather than the
   reversed-out navy panel the base .form-section gives. Fields keep visible
   labels above them instead of the mock-up's placeholder-as-label: this
   audience is largely older adults, and a label that disappears the moment you
   start typing is the wrong trade for a form that is the site's main
   conversion point. The pill shape, fill and navy submit all carry over. */
.form-section.light { background: var(--white); }
.form-section.light h2    { color: var(--navy); }
.form-section.light .lead { color: var(--slate); }

.form-section.light .form-group input,
.form-section.light .form-group select {
  border-radius: 100px;
  padding: 14px 22px;
}
.form-section.light .form-group textarea {
  border-radius: var(--radius-lg);
  padding: 16px 22px;
}
/* The pill radius has to come off the radios again, which are square-ish
   circles handled by their own rule above, not text fields. */
.form-section.light .radio-group .radio-option input[type="radio"] {
  border-radius: 50%;
  padding: 0;
}

/* ── ACKNOWLEDGEMENT OF COUNTRY ─────────────────────────────── */
.acknowledgement {
  font-size: .82rem;
  line-height: 1.75;
  color: rgba(255,255,255,.55);
  max-width: 780px;
  margin: 0 0 32px;
}

/* ============================================================
   SEPTEMBER 2026 FEEDBACK ROUND
   Iconography, hero carousel, and the infographic components.
   ============================================================ */

/* ── ICONS ──────────────────────────────────────────────────── */
/* The sprite is inlined once per page rather than referenced as an external
   file. External use href="sprite.svg#id" does render, but currentColor does
   NOT cross the document boundary in any current browser, so every icon came
   out black. Inlining keeps currentColor and the dual-tone accent working with
   no JavaScript and no flash of missing icons. */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}
.icon-lg { width: 2.25rem; height: 2.25rem; }
.icon-xl { width: 2.75rem; height: 2.75rem; }

/* The accent stroke defaults to sky blue. On a light surface that is too pale
   against white, so light contexts push it to a mid blue instead. */
:root { --icon-accent: #6DBBFF; }
.bg-white, .bg-mist, .form-section.light { --icon-accent: #2E86C8; }
.dark-band, .bg-blue, .bg-red, .page-hero, .site-footer, .hero { --icon-accent: #6DBBFF; }

/* A circular plate behind an icon, used in the reason lists and grids. */
.icon-plate {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--mist);
  color: var(--navy-blue);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.dark-band .icon-plate,
.bg-blue .icon-plate,
.bg-red .icon-plate { background: rgba(255,255,255,.14); color: #fff; }

/* ── HOME HERO CAROUSEL ─────────────────────────────────────── */
/* Crossfade, 3s a slide. Slides stack in the same box and only opacity
   animates, which keeps it off the main thread. The first slide carries
   is-active in the markup so it paints correctly before the script runs, and
   stays visible if the script never runs at all. */
.hero-slides { position: absolute; inset: 0; z-index: 0; }

/* The scrim. This used to live on .hero-bg::after, and when the static hero
   became a carousel the gradient went with it, leaving white text sitting
   directly on photography. Measured across the five slides, the left third
   ranged from 0.195 to 0.528 luminance, so white text scored between 4.29:1
   and 1.82:1 against the raw photo. The guitar slide was the worst and was
   genuinely hard to read.

   Sized for the brightest slide rather than the average, because the carousel
   rotates and the copy has to hold on all five. At 45% across, where the
   headline ends, this lands around 6.5:1 on the worst case. The right-hand end
   stays light so the photograph is still doing something. */
.hero-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(0,43,82,.90) 0%,
    rgba(0,43,82,.64) 50%,
    rgba(0,43,82,.22) 100%);
}
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 42%;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ── THREE-UP CATEGORY BOXES ────────────────────────────────── */
/* The three Support at Home funding categories, side by side with an icon. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 20px;
}
.cat-card {
  background: #fff;
  border: 1.5px solid rgba(0,43,82,.10);
  border-top: 4px solid var(--navy-blue);
  border-radius: var(--radius);
  padding: 28px 24px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.cat-card:nth-child(2) { border-top-color: var(--sky-blue); }
.cat-card:nth-child(3) { border-top-color: var(--crimson); }
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cat-card .icon-plate { margin-bottom: 18px; }
.cat-card h3 { color: var(--navy-blue); margin-bottom: 10px; }
.cat-card p  { font-size: .92rem; color: var(--slate); line-height: 1.65; }
.cat-tag {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--mist);
  color: var(--navy-blue);
}
.cat-tag.free { background: #E6F4EA; color: #1B5E32; }

/* ── ICON + TEXT REASON LIST ────────────────────────────────── */
.reason-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 28px 32px;
}
.reason {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.reason h3 { font-size: 1rem; margin-bottom: 6px; }
.reason p  { font-size: .92rem; line-height: 1.65; }
.dark-band .reason h3, .bg-blue .reason h3, .bg-red .reason h3 { color: #fff; }
.dark-band .reason p,  .bg-blue .reason p,  .bg-red .reason p  { color: rgba(255,255,255,.82); }

/* ── AUTO-SCROLLING SERVICE CAROUSEL ───────────────────────── */
/* The track is duplicated in the markup and translated by -50%, so the loop is
   seamless without cloning nodes in JS. Pausing on hover and honouring
   reduced-motion both matter here: this audience may need time to read a
   label, and an unstoppable conveyor is hostile to that. */
.svc-marquee {
  overflow: hidden;
  position: relative;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.svc-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: svc-scroll 46s linear infinite;
}
.svc-marquee:hover .svc-track,
.svc-marquee:focus-within .svc-track { animation-play-state: paused; }
@keyframes svc-scroll { to { transform: translateX(-50%); } }

.svc-chip {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 20px 13px 14px;
  border-radius: 100px;
  background: #fff;
  border: 1.5px solid rgba(0,43,82,.12);
  color: var(--navy-blue);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .9rem;
  white-space: nowrap;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.svc-chip .icon { width: 1.375rem; height: 1.375rem; }
.svc-chip:hover { border-color: var(--sky-blue); transform: translateY(-2px); box-shadow: var(--shadow); }
.svc-chip:focus-visible { outline: 3px solid var(--sky-blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  /* Motion off, so the conveyor becomes a normal scrollable row. */
  .svc-marquee { overflow-x: auto; }
  .svc-track { animation: none; }
}

/* ── TIMELINE ───────────────────────────────────────────────── */
/* About page. Stacked on mobile, four columns from 800px. */
.timeline-rail { display: grid; gap: 28px; }
@media (min-width: 800px) {
  .timeline-rail { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}
.tl-step { position: relative; padding-top: 30px; }
.tl-step::before {
  content: '';
  position: absolute;
  top: 11px; left: 0; right: 0;
  height: 2px;
  background: var(--mist-deep);
}
.tl-step::after {
  content: '';
  position: absolute;
  top: 5px; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--navy-blue);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--mist-deep);
}
.tl-step:last-child::after { background: var(--crimson); }
.tl-year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy-blue);
  line-height: 1;
  margin-bottom: 8px;
}
.tl-step h3 { font-size: 1rem; margin-bottom: 6px; }
.tl-step p  { font-size: .9rem; color: var(--slate); line-height: 1.6; }
.tl-step img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 14px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ── TEAM GALLERY ───────────────────────────────────────────── */
/* Careers. Same duplicated-track approach as the service marquee, slower. */
.gallery-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.gallery-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: svc-scroll 70s linear infinite;
}
.gallery-marquee:hover .gallery-track { animation-play-state: paused; }
.gallery-track img {
  height: 260px;
  width: auto;
  border-radius: var(--radius);
  object-fit: cover;
  flex-shrink: 0;
}
@media (max-width: 600px) { .gallery-track img { height: 190px; } }
@media (prefers-reduced-motion: reduce) {
  .gallery-marquee { overflow-x: auto; }
  .gallery-track { animation: none; }
}

/* ── OFFICE CARDS AND COVERAGE ──────────────────────────────── */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 20px;
}
.office-card {
  background: #fff;
  border: 1.5px solid rgba(0,43,82,.10);
  border-radius: var(--radius);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.office-card h3 { color: var(--navy-blue); font-size: 1.02rem; }
.office-card address {
  font-style: normal;
  font-size: .92rem;
  line-height: 1.7;
  color: var(--slate);
}
.office-role {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crimson);
}

/* A coverage strip, standing in for a map without loading one. A real embedded
   map costs a third-party script, a cookie banner conversation and a layout
   shift, for information that is eight words long. */
.coverage-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
.coverage-pill {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
  padding: 8px 16px;
  border-radius: 100px;
  background: var(--mist);
  color: var(--navy-blue);
  border: 1.5px solid rgba(0,43,82,.10);
}
.coverage-pill.hq { background: var(--navy-blue); color: #fff; border-color: var(--navy-blue); }

/* ── FIGURE CALLOUTS ────────────────────────────────────────── */
.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 18px;
}
.figure-card {
  background: var(--mist);
  border-radius: var(--radius);
  padding: 24px 22px;
  border-left: 4px solid var(--sky-blue);
}
.fig-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.85rem;
  color: var(--navy-blue);
  line-height: 1.1;
}
.fig-label { font-size: .86rem; color: var(--slate); margin-top: 6px; line-height: 1.55; }

/* ── RATE TABLE, GROUPED ────────────────────────────────────── */
/* The V2.1 price guide groups rows under a service type. A row that opens a
   group gets a heavier top rule so the grouping survives on a narrow screen
   where the merged first column of the printed guide cannot. */
tr.rate-group > * { border-top: 2px solid rgba(0,43,82,.16) !important; }
td.rate-note-cell {
  font-size: .84rem;
  line-height: 1.55;
  color: var(--slate);
  background: var(--mist);
}
.rate-cat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 14px;
}
.rate-cat-head h3 { margin: 0; color: var(--navy-blue); }
.rate-cat-head .icon-plate { width: 40px; height: 40px; }

/* The phone line under the enquiry intro. Navy and bold, on its own line,
   per the feedback. It sits in a light section, which is the only place navy
   text works now that the footer has gone blue. */
.lead-cta {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--navy-blue);
}
.lead-cta a { color: var(--navy-blue); text-decoration: none; }
.lead-cta a:hover { text-decoration: underline; }

/* ── DOCUMENT LIST ──────────────────────────────────────────── */
/* /documents/. Generated by tools/build-documents.py, so the markup here is
   fixed: an icon plate, then a body block with title, meta, audience, summary
   and a button. */
.doc-list {
  list-style: none;
  padding: 0;
  margin: 1.45em 0 0;
}
.doc-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 26px 0;
  border-top: 1px solid rgba(0,43,82,.12);
}
.doc-item:last-child { border-bottom: 1px solid rgba(0,43,82,.12); }
.doc-body { min-width: 0; }
.doc-item h3 { margin: 0 0 6px; font-size: 1.08rem; }
.doc-item h3 a { color: var(--navy-blue); text-decoration: none; }
.doc-item h3 a:hover { text-decoration: underline; }

/* Type, page count and file size. Deliberately prominent: on a phone, knowing
   something is 2MB before tapping it is the difference between a download and
   an abandoned one. */
.doc-meta {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--slate);
  margin: 0 0 4px;
}
.doc-audience {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy-blue);
  background: var(--mist);
  padding: 4px 11px;
  border-radius: 100px;
  margin: 0 0 10px;
}
.doc-item .doc-body > p { font-size: .93rem; line-height: 1.65; margin: 0 0 12px; }
.doc-share { margin: 0 !important; }

@media (max-width: 520px) {
  /* The plate costs 66px of a 335px column, which is too much next to a
     three-line summary. Stack it instead. */
  .doc-item { flex-direction: column; gap: 12px; }
}