/* --- typefaces ----------------------------------------------------------
   Self-hosted, Latin subset only. Manrope and Source Sans 3 are both under the
   SIL Open Font License 1.1, which permits self-hosting and commercial use;
   provenance is in assets/fonts/PROVENANCE.json. Served from our own origin, so
   the CSP needs no external font host and there is no third-party request.

   System fonts were the honest reason this site read as a document rather than
   a brand. 172 KB total, `swap` so text paints immediately.
   ---------------------------------------------------------------------- */
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/sourcesans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/sourcesans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/sourcesans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

/* ===========================================================================
   Right Choice Living — stylesheet
   Mobile-first. Deliberately light-only: this is a care provider's brochure
   site, and a single well-executed theme beats two half-tested ones.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Brand — sampled from new_logo.jpeg. The house is #46641E, the hands, arc
     and wordmark are #001432.
     The green carries 6.77:1 against white, so unlike a lemon green it can take
     white text and serve as a link colour on its own. No compromise partner
     needed: the logo's own two colours do the whole job. */
  --brand:       #6B9130;   /* lighter green, large shapes and icons only */
  --blue:        #6B9130;   /* legacy alias, same value */
  --blue-ink:    #46641E;   /* the logo green: buttons, links, icon glyphs */
  --blue-deep:   #354C16;   /* hover */
  --navy:        #001432;   /* the logo navy */
  --navy-2:      #0C2148;

  /* Neutrals biased toward the brand green rather than a flat grey. */
  --paper:       #FFFFFF;
  --wash:        #F5F8EF;
  --wash-2:      #E7EFDA;
  --ink:         #12171A;
  --ink-2:       #333C33;
  --muted:       #56604F;
  --line:        #DEE6D3;

  --ok:          #1F6B4A;
  --flag:        #B4341C;

  --sans: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  --gap:   clamp(1.2rem, 3vw, 2rem);
  --bay:   clamp(3rem, 6.5vw, 5rem);     /* vertical rhythm between sections */
  --edge:  clamp(1.05rem, 4.5vw, 2.5rem); /* horizontal page inset */
  --radius: 14px;
  --sheet: clamp(20px, 3.5vw, 42px);  /* the curve on the header band */
  --on-green:    #A9C86E;   /* brand green lightened to read on navy */

  /* One type scale. Eleven ad-hoc sizes is what made the pages read as
     unconsidered; these are the only small sizes any rule may use. */
  --fs-label: .75rem;   /* uppercase labels, eyebrows */
  --fs-small: .875rem;  /* captions, hints, notes, meta */
  --fs-body:  1.0625rem;

  /* ---- DERIVED FROM THE BRAND, not independent choices --------------------
     Everything below is a tint of the brand hue or the dark ground. They exist
     as tokens so a rebrand is a single edit here rather than a hunt through the
     stylesheet — 37 hardcoded colours used to live outside this block, which
     would have left half the site on the old palette.

     TO REBRAND: set --brand, --brand-ink, --brand-deep and --dark, then run
     `node ops/verify.mjs`. The contrast sweep checks every text node against
     its real background and will fail if a colour cannot carry its text.
     --------------------------------------------------------------------- */
  --on-dark:       #DCE3EF;   /* body text on the dark ground */
  --on-dark-soft:  #C3CEE2;   /* secondary text on dark */
  --on-dark-mute:  #A3B0C6;   /* labels and captions on dark */
  --on-dark-faint: #8C99AE;   /* legal text in the footer */
  --on-dark-bright:#E8EEDF;   /* text on the saturated accent band */
  --on-dark-em:    #C8D3E4;   /* the reassurance ticks */
  --eyebrow-dark:  #A9C86E;   /* eyebrow over the dark hero */

  --hairline-light:  rgba(255,255,255,.14);  /* borders on dark */
  --hairline-lighter:rgba(255,255,255,.12);
  --hairline-strong: rgba(255,255,255,.16);
  --wash-hover:      rgba(255,255,255,.10);
  --wash-badge:      rgba(255,255,255,.28);
  --ghost-border:    rgba(255,255,255,.55);
  --ghost-hover:     rgba(255,255,255,.12);

  --shadow-1: 0 1px 2px rgba(0,20,50,.03);
  --shadow-2: 0 1px 2px rgba(0,20,50,.03), 0 6px 16px rgba(0,20,50,.04);
  --shadow-3: 0 2px 4px rgba(0,20,50,.04), 0 16px 34px rgba(0,20,50,.11);
  --shadow-menu: 0 14px 34px rgba(0,10,25,.45);
  --bar-bg: rgba(0,20,50,.97);

  --field-border: #BCC6B4;
  --ok-bg:   #DCEFE4;
  --err-bg:  #FBE4DF;
  --todo-bg: #FFF3B0;
  --todo-ink:#6B4A00;
  --todo-rule:#C79A00;
}

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

/* Grid and flex items default to `min-width: auto`, so a child with a wide
   min-content — a <select> with a long option, a long email address, a wide
   image — expands its track past the container and pushes the page sideways.
   That is precisely the class of bug that clipped text off the Wix pages, so
   it is disarmed globally here rather than patched per component. */
.stack > *, .stack-s > *, .two-up > *, .contact-grid > *, .calls > *,
.svc-grid > *, .steps > li, .btn-row > *, .cqc dl > *, .masthead-in > *,
.footer-cols > *, footer.foot .cols > * { min-width: 0; }

input, select, textarea { min-width: 0; max-width: 100%; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.72;
  /* Belt and braces against the defect that broke the Wix build: nothing may
     ever push the page sideways. */
  overflow-x: hidden;
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

/* Long words, URLs and email addresses must wrap rather than overflow. */
h1, h2, h3, h4, p, li, dd, dt, a, td, th, figcaption, label, summary {
  overflow-wrap: break-word;
}

h1, h2, h3, h4, .btn, .eyebrow, nav, .stat, th, label, .pill, footer {
  font-family: var(--sans);
}

h2 + p, h2 + ul, h2 + ol, h2 + dl, h3 + p, h3 + ul, h3 + ol { margin-top: .85rem; }
.split-text h2 + p, .duo-main h2 + p { margin-top: .9rem; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.022em; text-wrap: balance; font-weight: 700; }
h1 { font-size: clamp(1.85rem, 6.2vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 5vw, 2.9rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.15rem, 2.6vw, 1.4rem); }
h4 { font-size: var(--fs-body); }

p, ul, ol { margin: 0; }

a { color: var(--blue-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--blue-ink);
  outline-offset: 2px;
  border-radius: 2px;
}

/* No colour here. It is redundant on body copy — which is already --ink — and
   it silently repainted <strong> near-black wherever it sat on a dark ground:
   the trust bar at 2.47:1 and the footer phone number at 1.03:1. Let it
   inherit. */
strong { font-weight: 700; }

/* --- skip link ----------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .8rem 1.1rem;
  font-family: var(--sans); font-weight: 700; text-decoration: none;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- layout primitives --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--edge);
}
/* Running prose sits near 65 characters. Never a fixed pixel width. */
.prose { max-width: 48rem; }
.prose > * + * { margin-top: 1.15rem; }

.stack   { display: flex; flex-direction: column; gap: var(--gap); }
.stack-s { display: flex; flex-direction: column; gap: .75rem; }

section.bay { padding-block: var(--bay); }
/* Landing on an anchored section should not jam its heading against the very
   top of the window. */
section.bay[id] { scroll-margin-top: 1.5rem; }
section.bay + section.bay { border-top: 1px solid var(--line); }
/* Alternating grounds so each section reads as its own block: white, then a
   very pale blue, then white. Both reviews asked for this rhythm. */
section.bay.tint { background: var(--wash); border-top: 0; }
section.bay + section.bay { border-top: 0; }
main > section.bay:not(.tint) + section.bay:not(.tint) { border-top: 1px solid var(--line); }
section.bay.tint + section.bay { border-top: 0; }
/* Consecutive tinted sections share one background, so their facing paddings
   double up into a dead gap. Collapse the join. */
section.bay.tint + section.bay.tint { padding-top: 0; }

.eyebrow {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-ink); margin: 0;
}

/* --- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; min-height: 3rem; padding: .7rem 1.3rem;
  border: 2px solid transparent; border-radius: var(--radius);
  font-size: var(--fs-body); font-weight: 700; line-height: 1.2;
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--blue-ink); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: transparent; color: #fff; border-color: var(--ghost-border); }
.btn-ghost:hover { background: var(--hairline-lighter); border-color: #fff; }
.btn-ghost-dark { background: transparent; color: var(--blue-ink); border-color: var(--blue-ink); }
.btn-ghost-dark:hover { background: var(--wash-2); }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }
.btn-row .btn { flex: 1 1 auto; min-width: min(100%, 15rem); }
@media (min-width: 34rem) { .btn-row .btn { flex: 0 0 auto; } }

/* --- header -------------------------------------------------------------- */
/* Light, not navy. The new logo is navy-and-green artwork drawn for a light
   ground: on the old navy bar its hands, arc and wordmark disappeared into the
   background entirely. The hero below keeps the dark panel, so the page still
   opens with contrast. */
/* --- masthead ------------------------------------------------------------
   The band is navy. A white plate sweeps in from the left edge to hold the
   logo, which is navy-and-green artwork and needs a light ground; a full white
   bar washed out the top of the page. The two grounds meet on a curve.

   The plate is the .brand element ITSELF, not a ::before. That matters: the
   contrast harness composites background colours up the ancestor chain, so a
   pseudo-element plate is invisible to it and reported the wordmark as 1.00:1.
   Painting the real ancestor makes the guarantee checkable — and means the ink
   and its ground can never drift apart, because they are one box.

   Full-bleed rather than a centred column, so the plate genuinely starts at the
   left edge of the screen. */
.masthead { background: var(--navy); color: #fff; }
.masthead > .wrap { max-width: none; }
.masthead a { color: #fff; }

.masthead-in {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 0 2.5rem;
}
.masthead a.brand {
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; flex: 0 0 auto;
  background: var(--paper); color: var(--navy);
  /* Bleed through the wrap gutter to the screen edge, then curve into navy. */
  margin-inline-start: calc(-1 * var(--edge));
  padding-inline: var(--edge) clamp(1.4rem, 4vw, 3rem);
  padding-block: .7rem;
  /* The quarter-width the brief asked for, but never narrower than the mark. */
  min-width: clamp(16rem, 25%, 30rem);
  border-radius: 0 var(--sheet) var(--sheet) 0;
}
/* Height-driven, never width — a stale width rule further down the file used
   to win the cascade and blow the logo up to 186px, which pushed the hero and
   the trust bar off the fold. */
.brand-logo { width: auto; height: clamp(2.9rem, 4vw, 3.6rem); }
/* The mark carries "RCLL", not the full name, so the company name is real text. */
.brand .strap {
  display: none; font-family: var(--sans); font-weight: 800;
  font-size: clamp(1rem, 2.2vw, 1.2rem); letter-spacing: -.02em;
  color: var(--navy); line-height: 1.15; max-width: 9rem; text-transform: none;
}
@media (min-width: 40rem) { .brand .strap { display: block; } }

/* --- navigation ---------------------------------------------------------- */
/* Flex only to centre the bar vertically against the taller logo plate. The
   `.nav` child must be told to GROW: as a default flex item it shrank to its
   content and collapsed the links into one another. */
.nav-wrap { flex: 1 1 100%; display: flex; align-items: center; }
.nav { flex: 1 1 auto; min-width: 0; }
.nav summary {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem 0; font-family: var(--sans); font-weight: 700;
  font-size: .95rem; cursor: pointer; list-style: none;
}
.nav summary::-webkit-details-marker { display: none; }
.nav summary::after { content: "\25BE"; font-size: .8em; transition: transform .18s ease; }
.nav[open] summary::after { transform: rotate(180deg); }
.nav ul { list-style: none; padding: 0 0 .5rem; margin: 0; display: flex; flex-direction: column; }
.nav li { border-top: 1px solid var(--line); }
.nav a { display: block; padding: .7rem .2rem; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: .98rem; color: #fff; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--on-green); text-decoration: underline; text-decoration-thickness: 2px; }

@media (max-width: 57.99rem) {
  /* ONE ROW: logo left, Menu hard right. The Menu used to sit on its own line
     beneath the logo, so a phone met a full band of empty white before the page
     began. `color` as well as background, because the Menu button is a
     <summary>, not an <a> — recolouring only the anchors once left it white on
     the white band, an invisible navigation on every phone. */
  /* The band stays navy here too, exactly as on desktop: white is only the small
     plate the logo needs, not a strip across the phone. */
  .masthead { position: relative; }

  /* Logo and Menu share ONE grid cell — logo left, Menu right — rather than
     sitting in a flex row.
     
     The reason is the dropped panel. It is an absolutely positioned <ul> inside
     a <details>, and current Chrome wraps details content in a ::details-content
     box that carries layout containment. That box, not .masthead, then becomes
     the containing block, so `left: 0; right: 0` resolved to the width of the
     word "Menu" and the links rendered one letter per line on a real phone. The
     engine here does not apply that containment, so it looked perfect locally.
     
     Overlapping in one cell lets .nav span the full width whichever box wins:
     the panel is then full width under either behaviour instead of depending on
     a browser detail. Only the summary is clickable, and the brand is lifted
     above the nav box so the logo stays a working link. */
  .masthead-in { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .masthead a.brand { grid-area: 1 / 1; justify-self: start; position: relative; z-index: 2; }
  .nav-wrap { grid-area: 1 / 1; justify-self: stretch; z-index: 1; }
  /* position: relative PINS the containing block to .nav in every engine, so the
     panel cannot land on .masthead in one browser and a UA-generated details box
     in another. .nav spans the header's content width; the panel then bleeds out
     by exactly the page gutter to reach both screen edges. */
  .nav { width: 100%; position: relative; }
  .nav summary { width: max-content; margin-inline-start: auto; }
  /* Sized to the mark, not to a share of the width — a quarter of a phone is
     narrower than the logo. */
  .masthead a.brand {
    min-width: 0; padding-block: .4rem; padding-inline-end: 1rem;
    border-radius: 0 var(--sheet) var(--sheet) 0;
  }
  .brand-logo { height: 2.5rem; }
  /* The Menu button sits on navy and inherits white from .masthead. */

  /* The dropped panel is light, so its links take the dark ink and the dark
     green — the lightened green is for navy and reads 1.88:1 on white. */
  .nav > ul a { color: var(--navy); }
  .nav > ul a:hover, .nav > ul a[aria-current="page"] { color: var(--blue-ink); }

  .nav summary { border-top: 0; min-height: 44px; padding: .5rem 0; }

  /* The open list drops OVER the page rather than pushing it down, so opening
     the menu costs no layout shift and the closed header stays one row tall.
     `.nav > ul`, not `.nav ul`: the services submenu is nested inside this list
     and must stay in flow, indented, where it is. */
  .nav > ul {
    position: absolute; top: 100%; z-index: 50;
    left: calc(-1 * var(--edge)); right: calc(-1 * var(--edge));
    padding: .25rem var(--edge) .9rem;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 16px 34px rgba(0, 10, 25, .18);
  }
}

@media (min-width: 58rem) {
  .nav-wrap { flex: 1 1 auto; min-width: 0; }
  .nav summary { display: none; }
  .nav ul {
    flex-direction: row; padding: 0;
    /* Spread evenly across whatever width is left beside the logo. */
    justify-content: space-between; width: 100%;
  }
  .nav li { border-top: 0; }
  .nav a { padding: .35rem 0; white-space: nowrap; }
}

/* --- services submenu ---------------------------------------------------- */
.caret { font-size: .7em; margin-left: .3rem; display: inline-block; }
/* Qualified as `.nav ul.subnav` so it outranks `.nav ul` (0,1,1). Written as a
   bare `.subnav` it lost the cascade, inherited the top level's full-width
   horizontal layout, and `display: none` silently did nothing — which put a
   284px horizontal scroll on every page at 1024px. */
.nav ul.subnav { list-style: none; margin: 0; padding: 0 0 0 1rem; display: flex; flex-direction: column; width: auto; }
.nav ul.subnav a { font-size: .92rem; color: var(--ink-2); }

@media (min-width: 58rem) {
  .has-sub { position: relative; }
  /* `display: none` when closed, NOT visibility:hidden. A hidden-but-laid-out
     absolutely positioned panel still contributes to document width, and this
     one pushed the page 284px sideways. Losing the fade is a fair trade. */
  .nav ul.subnav {
    display: none;
    position: absolute; top: 100%; left: -1rem; z-index: 40;
    min-width: 17rem; max-width: min(22rem, calc(100vw - 2rem)); padding: .5rem 0;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: 0 14px 34px rgba(0,10,25,.45);
    flex-direction: column;
  }
  /* focus-within as well as hover, so it opens from the keyboard without JS. */
  .has-sub:hover ul.subnav, .has-sub:focus-within ul.subnav { display: flex; }
  .nav ul.subnav a { display: block; padding: .55rem 1.1rem; white-space: nowrap; color: var(--ink-2); font-size: .92rem; }
  .nav ul.subnav a:hover, .nav ul.subnav a:focus-visible { background: var(--wash); color: var(--blue-ink); text-decoration: none; }
}

/* --- hero ---------------------------------------------------------------- */
/* Full height, text beside the photograph. `svh` not `vh`: on mobile `vh` is
   measured against hidden browser chrome, so a 100vh hero overflows the screen
   and pushes the buttons off it. */
.hero { background: var(--navy); color: #fff; }
.hero h1 { color: #fff; }
.hero .standfirst { font-size: clamp(1.02rem, 2.4vw, 1.28rem); color: var(--on-dark); max-width: 36rem; }

.hero-split { display: grid; }
.hero-copy {
  background: var(--navy);
  display: grid; align-items: center;
  padding-block: clamp(2rem, 5vw, 3.4rem);
  padding-inline: var(--edge);
}
.hero-copy .wrap-inner { max-width: 34rem; margin-inline: auto; width: 100%; gap: 1.1rem; }
/* The global .btn-row rule forces a 15rem minimum so buttons are comfortable
   on their own line on mobile. In the hero's narrower column two of them came
   to 491px inside 488px and wrapped — three pixels. Here they size to content. */
.hero-copy .btn-row .btn { flex: 0 0 auto; min-width: 0; }

/* The photograph must not be enlarged past its own pixels — a 1043px close-crop
   blown up to 960px in a 1000px-tall column is why the hero read as two
   enormous faces. Capping the hero height keeps the photo inside its native
   resolution and stops the section becoming a full-viewport slab. */
.hero-photo { margin: 0; min-height: 0; position: relative; }
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; display: block; }
.hero-photo img { aspect-ratio: 5 / 4; }

@media (min-width: 62rem) {
  .hero-split {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    min-height: min(82svh, 44rem);
  }
  .hero-copy .wrap-inner { margin-inline: 0 auto; padding-right: 1.5rem; }
  .hero-photo picture { position: absolute; inset: 0; }
  .hero-photo img { aspect-ratio: auto; }
}
/* On very wide screens the band stays edge-to-edge navy and only the COPY is
   constrained. Capping the whole section left white gutters either side, which
   read as a mistake rather than as a margin. */
@media (min-width: 100rem) {
  .hero-copy { padding-inline: calc((100vw - 100rem) / 2 + var(--edge)) var(--edge); }
}

.eyebrow-light { color: var(--eyebrow-dark); }
.valueprop {
  font-family: var(--sans); font-weight: 600; font-size: var(--fs-small);
  color: #fff; max-width: 32rem;
  padding-left: .9rem; border-left: 3px solid var(--blue);
}

.reassure {
  display: flex; flex-wrap: wrap; gap: .45rem 1.2rem; list-style: none;
  padding: 0; margin-top: .3rem; font-family: var(--sans); font-size: var(--fs-small); color: var(--on-dark-em);
}
.reassure li { display: flex; align-items: center; gap: .4rem; }
.reassure li::before { content: "\2713"; color: var(--blue); font-weight: 700; }

/* Short screens: the copy block must fit above the sticky call bar. On a
   360x640 phone the header takes 169px and the bar 65px, so the type and the
   gaps have to give. Measured, not guessed — see ops/verify.mjs. */
@media (max-height: 48rem) and (max-width: 62rem) {
  .hero-copy { padding-block: .8rem 1rem; align-items: start; }
  .hero-copy .wrap-inner { gap: .55rem; }
  .hero-split h1 { font-size: clamp(1.55rem, 7vw, 1.95rem); }
  .hero-split .standfirst { font-size: var(--fs-small); line-height: 1.42; }
  .eyebrow-light { font-size: .58rem; letter-spacing: .09em; }
  /* The sticky bar below already offers both actions. */
  .hero-split .btn-ghost { display: none; }
  /* The same three points appear in the facts strip just below the hero. */
  .reassure { display: none; }
  .brand-logo { height: 2.6rem; }
  .masthead-in { padding-block: .55rem; }
  .nav-wrap { position: relative; z-index: 1; }
.nav summary { padding: .6rem 0; }
  .hero-photo img { aspect-ratio: 16 / 10; }
}

/* Interior pages: a compact navy band, no photograph. */
.hero-plain-wrap { background: var(--navy); }
.hero-plain { padding-block: clamp(1.9rem, 5.5vw, 3.2rem); }
.hero-plain .standfirst { margin-top: .2rem; }


/* --- scroll reveal ------------------------------------------------------- */
/* Gated behind .js-reveal, which only site.js adds. Without JavaScript nothing
   is hidden, so content can never be lost to a failed script. */
.js-reveal main > section.bay,
.js-reveal .svc-cards li {
  opacity: 0; transform: translateY(12px);
  transition: opacity .45s ease, transform .45s ease;
}
.js-reveal main > section.bay.is-in,
.js-reveal .svc-cards li.is-in { opacity: 1; transform: none; }
.js-reveal .svc-cards li:nth-child(2) { transition-delay: .06s; }
.js-reveal .svc-cards li:nth-child(3) { transition-delay: .12s; }
.js-reveal .svc-cards li:nth-child(4) { transition-delay: .18s; }
.js-reveal .svc-cards li:nth-child(5) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal main > section.bay,
  .js-reveal .svc-cards li { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- inline nudge ------------------------------------------------------- */
.nudge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; padding: clamp(1.4rem, 3.5vw, 2rem);
  background: var(--wash-2); border-radius: var(--radius);
}
.nudge h3 { font-size: 1.2rem; }
.nudge p { color: var(--ink-2); font-size: var(--fs-small); margin-top: .6rem; max-width: 40rem; }
.nudge-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 34rem) { .nudge-actions .btn { flex: 1 1 100%; } }

/* --- credits table ------------------------------------------------------- */
.scroll-x { overflow-x: auto; }
table.credits { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: var(--fs-small); min-width: 30rem; }
table.credits th, table.credits td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.credits th { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }

/* --- task cards ---------------------------------------------------------- */
/* Individual tasks as icon cards. A tick list of tasks reads like a Word
   document; these can be scanned in a couple of seconds. */
.task-grid, .benefit-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 34rem) { .task-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .task-grid { grid-template-columns: repeat(3, 1fr); } }
.task-grid li {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .5rem;
  box-shadow: var(--shadow-1);
}
.task-grid h3 { font-size: 1.05rem; }
.task-grid p { font-size: var(--fs-small); color: var(--muted); margin: 0; line-height: 1.6; }
.task-grid .ico-wrap, .benefit-grid .ico-wrap {
  width: 2.6rem; height: 2.6rem; border-radius: 11px;
  background: var(--wash-2); color: var(--blue-ink);
  display: grid; place-items: center; flex: 0 0 auto;
}
.task-grid .ico, .benefit-grid .ico { width: 1.35rem; height: 1.35rem; }

/* --- benefit rows -------------------------------------------------------- */
@media (min-width: 46rem) { .benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.4rem; } }
.benefit-grid li { display: flex; gap: 1rem; align-items: flex-start; }
.benefit-grid h3 { font-size: 1.05rem; }
.benefit-grid p { font-size: var(--fs-small); color: var(--muted); margin-top: .55rem; line-height: 1.6; }

/* --- trust bar ---------------------------------------------------------- */
/* A saturated band directly under the hero. Four things a worried relative
   wants to know before they read anything else. */
.trustbar { background: var(--blue-ink); color: #fff; }
.trustbar ul {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.5rem 2rem; grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 3.5vw, 2.2rem);
}
@media (min-width: 34rem) { .trustbar ul { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .trustbar ul { grid-template-columns: repeat(4, 1fr); } }
.trustbar li { display: flex; flex-direction: column; gap: .2rem; }
/* `color` is declared explicitly because the global `strong { color: var(--ink) }`
   rule otherwise wins here — it repainted these labels near-black on the blue
   band at 2.47:1, well under the 4.5:1 minimum. That is why the band read as
   "hidden". A blanket contrast sweep now runs over every text node. */
.trustbar strong { font-family: var(--sans); font-weight: 700; font-size: 1.08rem; color: #fff; }
.trustbar span { font-size: var(--fs-small); color: var(--on-dark-bright); }
.trustbar li::before {
  content: "\2713"; font-weight: 700; color: #fff;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--wash-badge);
  display: grid; place-items: center; font-size: .8rem; margin-bottom: .45rem;
}

/* --- justified running prose -------------------------------------------
   Justification only works with hyphenation. Without `hyphens: auto` the
   browser stretches word spacing to fill each line and you get "rivers" of
   white running down the paragraph — the classic sign of justified text on the
   web, and genuinely harder to read.

   Applied to running prose only — never to headings, lists, cards or the FAQ —
   and only above 48rem. On a phone the measure is far too short to justify:
   you get three words stretched across the screen. WCAG 1.4.8 (AAA) advises
   against justified text; this site targets AA, so it is a legitimate choice,
   but it is deliberately confined to where it looks intentional. */
@media (min-width: 48rem) {
  .block-body > p,
  .prose > p,
  .split-text > p,
  .duo-main > p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: pretty;
  }
}

/* --- content blocks ---------------------------------------------------- */
/* Heading above its own body, in one column with a deliberate measure. The
   page container is narrower than before so a 60-character line reads as a
   choice rather than as text lost in a wide empty field. */
.block { display: flex; flex-direction: column; }
.block h2 + .block-body { margin-top: 1.4rem; }
/* Widened from 38rem. At 38rem an intro paragraph sat at about 60% of the
   container and looked cramped under a 46px heading. 48rem is roughly 90
   characters — still inside the readable range, and it now reads as a
   deliberate column rather than a narrow strip. */
.block-body { max-width: 48rem; }
.block-body > * + * { margin-top: 1.25rem; }

@media (min-width: 46rem) {
  .ticks.two-col { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; }
}

/* --- service cards ------------------------------------------------------- */
/* Flex rather than grid so the final short row centres instead of leaving a
   hole on the right. Cards carry a coloured rule, real weight and a hover
   lift — bordered white rectangles read as a directory listing. */
.svc-cards {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem;
}
/* `flex: 0 1` not `1 1`: allowing the cards to grow made the two in the final
   row wider than the three above them, since flex shares leftover space per
   row. A fixed basis keeps every card the same width. */
.svc-cards li { flex: 0 1 18.5rem; display: flex; }
.svc-cards a {
  display: flex; flex-direction: column; gap: .55rem; width: 100%;
  padding: 1.9rem 1.7rem 1.8rem;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-2);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-cards .ico-wrap {
  width: 2.9rem; height: 2.9rem; border-radius: 12px;
  background: var(--wash-2); color: var(--blue-ink);
  display: grid; place-items: center; margin-bottom: .5rem;
  transition: background .2s ease, color .2s ease;
}
.svc-cards .ico { width: 1.5rem; height: 1.5rem; }
.svc-cards a:hover .ico-wrap { background: var(--blue-ink); color: #fff; }
@media (prefers-reduced-motion: reduce) { .svc-cards a { transition: none; } }
.svc-cards a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-3);
  border-color: var(--blue);
}
.svc-cards h3 { font-size: 1.12rem; line-height: 1.25; }
.svc-cards p { font-size: var(--fs-small); color: var(--muted); flex: 1; margin: 0; line-height: 1.6; }
.svc-cards .more {
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 700;
  color: var(--blue-ink); display: inline-flex; align-items: center; gap: .35rem;
}
.svc-cards .more::after { content: "\2192"; transition: transform .16s ease; }
.svc-cards a:hover .more::after { transform: translateX(3px); }
/* The tail services were a run-on line that read as a footnote. As a tick grid
   they scan in a glance and look intentional. */
.also { display: flex; flex-direction: column; gap: .9rem; }
.also h3 { font-size: 1.05rem; }
.also-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .55rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.also-grid li { display: flex; align-items: baseline; gap: .5rem; }
.also-grid li::before { content: "\2713"; color: var(--blue-ink); font-weight: 700; font-family: var(--sans); }
.also-grid a { font-family: var(--sans); font-size: var(--fs-small); color: var(--ink-2); text-decoration: none; }
.also-grid a:hover { color: var(--blue-ink); text-decoration: underline; }

/* --- a call to action where people finish reading the services ---------- */
.svc-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.2rem 2rem; margin-top: .6rem;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  background: var(--wash-2); border-radius: var(--radius);
}
.svc-cta h3 { font-size: 1.2rem; }
.svc-cta p { color: var(--ink-2); font-size: var(--fs-small); margin-top: .6rem; max-width: 40rem; }
.svc-cta .btn { flex: 0 0 auto; }

/* --- CQC definition list, inline in the editorial body ------------------- */
/* A bordered card with a tick badge, so this reads as a trust signal rather
   than as three more facts in a paragraph. */
.cqc-dl {
  display: grid; grid-template-columns: 1fr; gap: .9rem 1.5rem;
  margin: 0; padding: 1.2rem 1.3rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.cqc-dl dt { font-family: var(--sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cqc-dl dd { margin: .1rem 0 0; font-family: var(--sans); font-weight: 700; font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
@media (min-width: 34rem) { .cqc-dl { grid-template-columns: repeat(3, 1fr); } }

/* --- regions side by side ----------------------------------------------- */
.regions { display: grid; gap: 1.6rem; }
@media (min-width: 46rem) { .regions { grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); } }
.region { display: flex; flex-direction: column; gap: .55rem; }
.region h3 { font-size: var(--fs-body); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.region-note { max-width: 44rem; }

/* --- four steps across --------------------------------------------------- */
@media (min-width: 64rem) {
  .steps.four { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
  .steps.four li { grid-template-columns: 1fr; gap: .5rem; }
  .steps.four li::before { grid-row: auto; }
}

/* --- crops ---------------------------------------------------------------
   An explicit aspect-ratio, not width/height attributes: those resolve to
   `aspect-ratio: auto W/H`, and `auto` hands control back to the image's
   natural ratio the moment it loads, so nothing crops. */
.crop { width: 100%; height: auto; object-fit: cover; }
.crop-22 { aspect-ratio: 2.2; }
.crop-24 { aspect-ratio: 2.4; }
.crop-26 { aspect-ratio: 2.6; }
.crop-32 { aspect-ratio: 3.2; }
.crop-36 { aspect-ratio: 3.6; }
/* A 3.6 strip is 108px tall on a phone — a letterbox slit. Bands go squarer
   on narrow screens. */
@media (max-width: 46rem) {
  .band .crop { aspect-ratio: 1.7; }
}
.band figcaption {
  font-family: var(--sans); font-size: var(--fs-small); color: var(--muted);
  padding: .6rem var(--edge) 0; max-width: 46rem; margin-inline: auto;
}
section.bay.flush { padding-block: 0; }

/* --- split: prose beside a photograph ----------------------------------- */
.split { display: grid; gap: var(--gap); }
.split-img { margin: 0; }
.split-img img { width: 100%; border-radius: var(--radius); object-fit: cover; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 4rem); }
  .split.flip .split-text { order: 2; }
  .split.flip .split-img  { order: 1; }
}
.split-text { max-width: 40rem; }
.split-text > * + * { margin-top: 1.05rem; }

/* --- duo: prose beside a pull quote ------------------------------------- */
.duo { display: grid; gap: 1.4rem; }
@media (min-width: 62rem) {
  .duo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
  .duo-quote { border-left: 2px solid var(--blue); padding-left: 1.4rem; }
}
.duo-main { max-width: 46rem; }
.duo-quote p { font-size: clamp(1.15rem, 2.6vw, 1.5rem); }

/* --- pull quote ---------------------------------------------------------- */
.pull { margin: 0; max-width: 44rem; }
.pull p {
  font-family: var(--body); font-size: clamp(1.25rem, 3.6vw, 1.85rem);
  line-height: 1.35; letter-spacing: -0.015em; color: var(--ink);
  text-wrap: balance;
}
.pull p::before { content: "\201C"; color: var(--blue); }
.pull p::after  { content: "\201D"; color: var(--blue); }
.pull cite {
  display: block; margin-top: .8rem; font-family: var(--sans); font-style: normal;
  font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* --- facts strip --------------------------------------------------------- */
.facts {
  list-style: none; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.facts li { background: var(--paper); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .1rem; }
.facts strong { font-family: var(--sans); font-size: var(--fs-body); }
.facts span { font-family: var(--sans); font-size: var(--fs-small); color: var(--muted); }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .facts { grid-template-columns: repeat(4, 1fr); } }

/* --- steps: how it works ------------------------------------------------- */
/* Numbered because the content genuinely is a sequence.
   Each step is a fixed three-row stack — badge, heading, body — with the
   heading reserving two lines. Without that, headings of different lengths
   pushed each column's paragraph to a different height and the row read as
   ragged, which is what the client saw. */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1.6rem; }
.steps li {
  counter-increment: s;
  display: grid; grid-template-rows: auto auto 1fr; gap: .55rem;
  padding-top: 1rem; border-top: 1px solid var(--line);
}
.steps li::before {
  content: counter(s);
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--blue-ink); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
}
.steps h3 { font-size: 1.05rem; line-height: 1.3; }
.steps p { color: var(--ink-2); font-size: var(--fs-small); margin: 0; }
@media (min-width: 40rem) { .steps { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 2.2rem; } }
@media (min-width: 64rem) {
  .steps.four { grid-template-columns: repeat(4, 1fr); gap: 0 1.8rem; }
  /* Reserve two lines for every heading so all four paragraphs start level. */
  .steps.four h3 { min-height: calc(2 * 1.3 * 1.05rem); }
}

/* --- lists --------------------------------------------------------------- */
.ticks { list-style: none; padding: 0; display: grid; gap: .6rem; }
.ticks li { display: grid; grid-template-columns: 1.35rem 1fr; gap: .55rem; }
.ticks li::before { content: "✓"; color: var(--blue-ink); font-weight: 700; font-family: var(--sans); }

.areas { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; }
.areas li { font-family: var(--sans); font-size: var(--fs-small); background: var(--wash-2); color: var(--blue-deep); padding: .3rem .7rem; border-radius: 999px; }

/* --- regions ------------------------------------------------------------- */
.region { display: flex; flex-direction: column; gap: .55rem; }
.region + .region { margin-top: 1.2rem; }
.region h3 { font-size: var(--fs-body); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.region-note { max-width: 44rem; }
.region-img { display: block; }
.region-img img { width: 100%; max-width: 22rem; border-radius: var(--radius); object-fit: cover; }

/* --- FAQ ----------------------------------------------------------------- */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 0; cursor: pointer; list-style: none;
  font-family: var(--sans); font-weight: 700; font-size: var(--fs-body);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue-ink); font-size: 1.35rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding-bottom: 1.1rem; max-width: 36rem; }
.faq details > div > * + * { margin-top: .8rem; }

/* --- contact ------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--gap); }
@media (min-width: 52rem) { .contact-grid { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); } }

.calls { display: grid; gap: .8rem; }
.call-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .15rem; }
.call-card .lbl { font-family: var(--sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.call-card a { font-family: var(--sans); font-size: clamp(1.15rem, 4vw, 1.4rem); font-weight: 700; text-decoration: none; }
.call-card a:hover { text-decoration: underline; }
/* An email address is one long unbreakable token. Set it smaller so it fits a
   narrow card whole, rather than breaking after "co.u". */
.call-card.is-email a { font-size: var(--fs-body); overflow-wrap: anywhere; }
.call-card .note { font-size: var(--fs-small); color: var(--muted); }

/* --- forms --------------------------------------------------------------- */
form.callback { display: grid; gap: 1rem; background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 3.5vw, 1.7rem); }
.field { display: grid; gap: .3rem; }
.field label { font-family: var(--sans); font-size: var(--fs-small); font-weight: 700; }
.field .hint { font-family: var(--sans); font-size: var(--fs-small); color: var(--muted); }
.field .req { color: var(--flag); }
input, select, textarea {
  font: inherit; font-family: var(--sans); font-size: var(--fs-body);
  width: 100%; min-height: 3rem; padding: .65rem .75rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--field-border); border-radius: var(--radius);
}
textarea { min-height: 7rem; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--blue-ink); }
.two-up { display: grid; gap: 1rem; }
@media (min-width: 34rem) { .two-up { grid-template-columns: 1fr 1fr; } }
.consent { display: grid; grid-template-columns: 1.5rem 1fr; gap: .6rem; align-items: start; font-family: var(--sans); font-size: var(--fs-small); }
.consent input { width: 1.2rem; min-height: 1.2rem; margin-top: .18rem; }
.hpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-family: var(--sans); font-size: var(--fs-body); padding: .8rem 1rem; border-radius: var(--radius); }
.form-msg[data-state="ok"]   { background: var(--ok-bg); color: var(--ok); }
.form-msg[data-state="err"]  { background: var(--err-bg); color: var(--flag); }
.form-msg[hidden] { display: none; }

/* --- CTA band ------------------------------------------------------------ */
.cta-band { background: var(--navy-2); color: #fff; border-radius: var(--radius); padding: clamp(1.3rem, 4vw, 2.2rem); display: grid; gap: 1rem; }
.cta-band h2 { color: #fff; }
.cta-band p { color: var(--on-dark); max-width: 44rem; }
.cta-note { font-size: var(--fs-small); color: var(--on-dark-mute); }
.cta-note a { color: #fff; }

/* --- unconfirmed-claim marker ------------------------------------------- */
/* Loud on purpose. A production build refuses to ship while any remain. */
.todo {
  background: var(--todo-bg); color: var(--todo-ink); font-family: var(--sans);
  font-size: .92em; font-weight: 700; padding: .05em .35em;
  border-bottom: 2px solid var(--todo-rule);
}

/* --- footer -------------------------------------------------------------- */
footer.foot { background: var(--navy); color: var(--on-dark-soft); margin-top: var(--bay); font-size: var(--fs-small); }
footer.foot a { color: #fff; }
footer.foot .cols { display: grid; gap: 1.6rem; padding-block: clamp(2rem, 5vw, 3rem); }
@media (min-width: 46rem) { footer.foot .cols { grid-template-columns: 1.3fr 1fr 1fr; gap: 2.5rem; } }
footer.foot h2 { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark-faint); font-weight: 700; }
footer.foot ul { list-style: none; padding: 0; display: grid; gap: .45rem; margin-top: .7rem; }
footer.foot .legal { border-top: 1px solid var(--hairline-light); padding-block: 1.1rem 1.4rem; display: grid; gap: .35rem; font-size: var(--fs-small); color: var(--on-dark-faint); }
footer.foot .legal a { color: var(--on-dark-soft); }

/* --- sticky mobile call bar --------------------------------------------- */
/* The single highest-yield element on a care site. Hidden once there is room
   for the header number to be permanently visible. */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; gap: .5rem; padding: .55rem .7rem;
  padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  background: var(--bar-bg); border-top: 1px solid var(--hairline-strong);
}
/* The number gets the wider share so it never wraps inside its own button. */
.callbar .btn { min-width: 0; min-height: 2.9rem; padding-inline: .6rem; white-space: nowrap; }
.callbar .btn:first-child { flex: 1.75 1 0; font-size: clamp(.82rem, 3.6vw, .97rem); }
.callbar .btn:last-child  { flex: 1 1 0; font-size: var(--fs-body); }
.callbar + * { }
body.has-callbar { padding-bottom: 4.5rem; }
@media (min-width: 60rem) {
  .callbar { display: none; }
  body.has-callbar { padding-bottom: 0; }
}

/* --- print --------------------------------------------------------------- */
@media print {
  .callbar, .nav, .skip { display: none !important; }
  body { background: #fff; }
  .hero, .masthead, footer.foot { background: #fff !important; color: #000 !important; }
  .hero h1, .hero .standfirst, footer.foot a { color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* --- utility classes replacing inline styles -----------------------------
   These exist because the production CSP sets `style-src 'self'`, which blocks
   style attributes. Inline styles fail silently in the browser console while
   the page still *looks* almost right, so they must not come back. Do not add
   a style="..." attribute anywhere; add a class here instead. */
.ui-strong   { font-family: var(--sans); font-weight: 700; }
.ui          { font-family: var(--sans); }
.hero-plain  { padding-block: clamp(1.8rem, 5vw, 3rem); }
.mt-1        { margin-top: 1rem; }
.mt-h        { margin-top: .7rem; }
.narrow      { max-width: 24rem; }