/* ===========================================================================
   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 — #5170FF sampled from the logo artwork. It only carries 3.3:1 on
     white, so it is used for large shapes and the logo, never for body text
     or button labels. --blue-ink is the accessible partner for those. */
  --blue:        #5170FF;
  --blue-ink:    #2F42D6;
  --blue-deep:   #24329F;
  --navy:        #0A1030;
  --navy-2:      #161E4A;

  /* Neutrals biased toward the brand hue rather than a flat grey. */
  --paper:       #FFFFFF;
  --wash:        #F3F5FC;
  --wash-2:      #E8EDF9;
  --ink:         #13161F;
  --ink-2:       #333A4B;
  --muted:       #565E73;
  --line:        #DBE1F0;

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

  --sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;

  --gap:   clamp(1rem, 3vw, 1.6rem);
  --bay:   clamp(2.5rem, 7vw, 4.5rem);   /* vertical rhythm between sections */
  --edge:  clamp(1.05rem, 4.5vw, 2.5rem); /* horizontal page inset */
  --radius: 6px;
}

*, *::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 > *,
.hero-inner > *, .split > *, .facts > li, .field, form.callback,
.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);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  /* 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);
}

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.4rem, 4.4vw, 2.05rem); }
h3 { font-size: clamp(1.12rem, 3vw, 1.32rem); }
h4 { font-size: 1.02rem; }

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;
}

strong { font-weight: 700; color: var(--ink); }

/* --- 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: 72rem;
  margin-inline: auto;
  padding-inline: var(--edge);
}
/* Running prose sits near 65 characters. Never a fixed pixel width. */
.prose { max-width: 36rem; }
.prose > * + * { margin-top: .95rem; }

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

section.bay { padding-block: var(--bay); }
section.bay + section.bay { border-top: 1px solid var(--line); }
section.bay.tint { background: var(--wash); border-top: 0; }
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: .7rem; 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: 1.02rem; 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: rgba(255,255,255,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.12); 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 -------------------------------------------------------------- */
.masthead { background: var(--navy); color: #fff; }
.masthead a { color: #fff; }
.masthead-in {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem;
  padding-block: .85rem;
}
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: 1 1 auto; min-width: 0; }
.brand img { width: clamp(8.5rem, 34vw, 12rem); }
.brand .strap {
  /* The logo artwork bakes in US "PERSON-CENTERED". Setting the strapline as
     real text keeps the site consistently UK-spelled. */
  display: none; font-size: .66rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #A9B6E8; max-width: 9rem; line-height: 1.35;
}
@media (min-width: 48rem) { .brand .strap { display: block; } }

.head-contact { display: flex; flex-direction: column; gap: .1rem; font-family: var(--sans); font-size: .9rem; }
.head-contact a { text-decoration: none; font-weight: 700; white-space: nowrap; }
.head-contact a:hover { text-decoration: underline; }
.head-contact .sub { color: #A9B6E8; font-size: .74rem; font-weight: 400; letter-spacing: .03em; }

/* Mobile nav is a <details> element, so it opens and closes with no JS. */
.nav { border-top: 1px solid rgba(255,255,255,.16); }
.nav summary {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 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: "▾"; font-size: .8em; transition: transform .18s ease; }
.nav[open] summary::after { transform: rotate(180deg); }
.nav ul { list-style: none; padding: 0 0 .9rem; margin: 0; display: flex; flex-direction: column; }
.nav li { border-top: 1px solid rgba(255,255,255,.12); }
.nav a { display: block; padding: .7rem .2rem; text-decoration: none; font-family: var(--sans); font-size: .98rem; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { color: #C6D0F7; }

@media (min-width: 60rem) {
  .nav summary { display: none; }
  .nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 1.5rem; padding-block: .1rem .75rem; }
  .nav li { border-top: 0; }
  .nav a { padding: .35rem 0; }
}

/* --- hero ---------------------------------------------------------------- */
/* Full-screen. `svh` not `vh`: on mobile, `vh` is measured against the browser
   chrome being hidden, so a 100vh hero is taller than the visible screen and
   pushes the buttons off it. `svh` uses the smallest viewport, which is what a
   visitor actually sees on arrival. */
.hero { background: var(--navy); color: #fff; }
.hero h1 { color: #fff; }
.hero .standfirst { font-size: clamp(1rem, 2.6vw, 1.3rem); color: #DDE3F7; max-width: 34rem; }

.hero-full {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  /* The sticky call bar overlays the bottom of the viewport on small screens,
     so subtract its height or the hero hides its own last line behind it. */
  min-height: calc(100svh - 4.5rem);
  padding-block: clamp(2rem, 7vh, 6rem) clamp(3rem, 9vh, 6rem);
  overflow: hidden;
}
/* .hero-bg carries a z-index, so it creates its own stacking context and its
   children stack INSIDE it. The scrim below therefore needs a positive z-index
   to sit above the photograph — at -1 it painted underneath, leaving white text
   on a bright kitchen. Caught by sampling the composited pixels, not by eye. */
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg picture, .hero-bg img { width: 100%; height: 100%; display: block; }
.hero-bg img { object-fit: cover; object-position: 32% 38%; position: relative; z-index: 0; }
/* Scrim. Heavier on the text side and heavier overall on narrow screens, where
   the text sits over the middle of the photo rather than beside it. Verified by
   sampling the rendered pixels behind the headline — see ops/verify.mjs. */
.hero-bg::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,16,48,.72) 0%, rgba(10,16,48,.88) 42%, rgba(10,16,48,.94) 100%);
}
@media (min-width: 56rem) {
  .hero-bg::after {
    background:
      linear-gradient(95deg, rgba(10,16,48,.96) 0%, rgba(10,16,48,.90) 34%,
                             rgba(10,16,48,.52) 60%, rgba(10,16,48,.18) 100%);
  }
}
.hero-inner { position: relative; z-index: 1; }
.hero-inner .stack-s { max-width: 40rem; gap: .9rem; }
/* Short screens: the hero must fit entirely above the sticky call bar. On a
   360x640 phone the header alone takes 169px, leaving ~406px, so the trimming
   has to be real rather than cosmetic. Measured, not guessed — see the
   "hero fills the viewport" check in ops/verify.mjs. */
@media (max-height: 56rem) and (max-width: 56rem) {
  .hero-full h1 { font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
  .hero-full .standfirst { font-size: .95rem; line-height: 1.48; }
  .hero-inner .stack-s { gap: .7rem; }
  .hero-full .btn { min-height: 2.9rem; }
  .reassure { font-size: .82rem; gap: .3rem .9rem; margin-top: .1rem; }
}
@media (max-height: 48rem) and (max-width: 56rem) {
  /* The hero deliberately runs behind the sticky call bar so it still reads as
     full-screen, but centring content inside that taller box pushes the last
     line underneath the bar. Align to the top instead. */
  .hero-full { padding-block: .7rem .6rem; align-items: start; }
  .hero-full h1 { font-size: clamp(1.55rem, 7vw, 1.95rem); }
  .hero-full .standfirst { font-size: .88rem; line-height: 1.42; }
  .hero-inner .stack-s { gap: .5rem; }
  /* No room for the scroll nudge once the hero is this tight. */
  .hero-scroll { display: none; }
  .eyebrow-light { font-size: .58rem; letter-spacing: .09em; }
  /* Dropped, not shrunk: the same three reassurances appear in the facts strip
     immediately below the hero, so nothing is lost. */
  .reassure { display: none; }
  /* The sticky call bar at the bottom of the screen already offers both
     actions, so the hero's secondary button is pure duplication here. Dropping
     it buys back ~57px, which is what makes the block fit on a 640px screen. */
  .hero-full .btn-ghost { display: none; }
  /* A smaller wordmark buys back ~20px of the header. */
  .brand-logo { width: clamp(6.5rem, 27vw, 8.5rem); }
  .masthead-in { padding-block: .55rem; }
  .nav summary { padding: .6rem 0; }
}
.hero-full .btn-row { margin-top: .6rem; }

.eyebrow-light { color: #9FB3F0; }

.hero-scroll {
  position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
  z-index: 2; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none;
  color: #fff; font-size: 1.15rem; line-height: 1;
  border: 1px solid rgba(255,255,255,.45); background: rgba(10,16,48,.45);
}
.hero-scroll:hover { background: rgba(255,255,255,.16); border-color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll span { animation: nudge 2.4s ease-in-out infinite; display: block; }
  @keyframes nudge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
}
/* No room for it on a short landscape phone. */
@media (max-height: 34rem) { .hero-scroll { display: none; } }

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

/* 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; }

/* --- image band ---------------------------------------------------------- */
.band { margin: 0; }
.band img { width: 100%; object-fit: cover; }
.band figcaption {
  font-family: var(--sans); font-size: .84rem; 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: 34rem; }

/* --- pull quote ---------------------------------------------------------- */
.pull { margin: 0; max-width: 44rem; }
.pull p {
  font-family: var(--serif); 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: .82rem; 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: 1.02rem; }
.facts span { font-family: var(--sans); font-size: .86rem; 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); } }

/* --- CQC panel ----------------------------------------------------------- */
.cqc { background: var(--wash); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 3.5vw, 1.8rem); }
.cqc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; }
.cqc dl { display: grid; grid-template-columns: 1fr; gap: .7rem 1.5rem; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); }
.cqc dt { font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cqc dd { margin: .1rem 0 0; font-family: var(--sans); font-weight: 700; font-size: .98rem; font-variant-numeric: tabular-nums; }
@media (min-width: 40rem) { .cqc dl { grid-template-columns: repeat(3, 1fr); } }
.pill {
  display: inline-block; padding: .18rem .55rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.pill-ok { background: #DCEFE4; color: var(--ok); }
.pill-neutral { background: var(--wash-2); color: var(--blue-deep); }

/* --- services grid ------------------------------------------------------- */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: .7rem; list-style: none; padding: 0; }
.svc-grid a {
  display: flex; align-items: center; min-height: 100%; gap: .55rem;
  padding: .9rem 1rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: var(--sans); font-size: .96rem; font-weight: 600;
  text-decoration: none; color: var(--ink);
  /* Labels wrap naturally instead of breaking mid-phrase in a fixed box. */
}
.svc-grid a::before { content: "›"; color: var(--blue); font-weight: 700; font-size: 1.15em; }
.svc-grid a:hover { border-color: var(--blue); background: var(--wash); }

/* --- steps --------------------------------------------------------------- */
/* Numbered because the content genuinely is a sequence. */
.steps { list-style: none; counter-reset: s; padding: 0; display: grid; gap: 1.1rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .9rem; }
.steps li::before {
  content: counter(s); grid-row: span 2;
  display: flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--blue-ink); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
}
.steps h3 { align-self: center; }
.steps p { color: var(--ink-2); }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2.2rem; } }

/* --- 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: .9rem; 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: 1rem; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.region-note { max-width: 36rem; }
.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: 1.02rem;
}
.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: .68rem; 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: 1rem; overflow-wrap: anywhere; }
.call-card .note { font-size: .9rem; 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: .88rem; font-weight: 700; }
.field .hint { font-family: var(--sans); font-size: .8rem; color: var(--muted); }
.field .req { color: var(--flag); }
input, select, textarea {
  font: inherit; font-family: var(--sans); font-size: 1rem;
  width: 100%; min-height: 3rem; padding: .65rem .75rem;
  background: var(--paper); color: var(--ink);
  border: 1px solid #B9C2DC; 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: .88rem; }
.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: .95rem; padding: .8rem 1rem; border-radius: var(--radius); }
.form-msg[data-state="ok"]   { background: #DCEFE4; color: var(--ok); }
.form-msg[data-state="err"]  { background: #FBE4DF; 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: #D6DDF5; max-width: 34rem; }

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

/* --- footer -------------------------------------------------------------- */
footer.foot { background: var(--navy); color: #C6D0F7; margin-top: var(--bay); font-size: .92rem; }
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: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8E9DD6; 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 rgba(255,255,255,.14); padding-block: 1.1rem 1.4rem; display: grid; gap: .35rem; font-size: .82rem; color: #8E9DD6; }
footer.foot .legal a { color: #C6D0F7; }

/* --- 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: rgba(10,16,48,.97); border-top: 1px solid rgba(255,255,255,.18);
}
/* 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: .95rem; }
.callbar + * { }
body.has-callbar { padding-bottom: 4.5rem; }
@media (min-width: 60rem) {
  .callbar { display: none; }
  body.has-callbar { padding-bottom: 0; }
  .hero-full { min-height: 100svh; }   /* no call bar to allow for */
}

/* --- 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. */
.brand-logo  { width: clamp(8.5rem, 34vw, 12rem); height: auto; }
.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; }