/* =============================================================
   Inspired Health Services: Design System
   Tokens sourced from DESIGN.md ("Serene Care Narrative")
   ============================================================= */

:root {
  /* Surfaces */
  --surface: #f9f9ff;
  --surface-dim: #cfdaf1;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f0f3ff;
  --surface-container: #e7eeff;
  --surface-container-high: #dee8ff;
  --surface-container-highest: #d8e3fa;

  /* Text */
  --on-surface: #111c2c;
  --on-surface-variant: #424751;
  --outline: #727783;
  --outline-variant: #c2c6d3;

  /* Primary (Professional Blue) */
  --primary: #004484;
  --on-primary: #ffffff;
  --primary-container: #0d5cab;
  --on-primary-container: #bfd6ff;
  --primary-fixed: #d5e3ff;
  /* Hero scrim. Channels only, so opacity can vary per gradient stop.
     A darkened derivative of --primary (#004484), kept in the palette. */
  --hero-scrim-rgb: 4, 26, 51;

  /* Secondary (Brand Green). The client's green, taken from the panel on
     their flyer. It is a mid-dark green, which makes it the easy kind to
     build on: it clears AA both as green text on white (5.0:1) and under
     white text (5.0:1), so one value covers fills and text alike and no
     separate on-light shade is needed.

     The one place it cannot go is on top of the hero photograph, where the
     scrim leaves a mid-slate ground: the headline measured 1.56:1 there,
     which is not far off invisible. Hence --secondary-on-dark below. */
  --secondary: #14820f;
  --on-secondary: #ffffff; /* on a green fill, 5.0:1 */
  /* The same hue (117 degrees on both), lightened for green text and icons
     sitting on the navy or on the hero scrim. Measured against the composited
     hero, worst glyph pixel: 3.2:1 on mobile, 3.8:1 on desktop, and 7.9:1 on
     the footer. Large text needs 3:1, so mobile is the binding constraint and
     it has little room to spare: a shade darker than this (#46c841) lands
     exactly on 3.00 and #3fc23a fails at 2.8. Reach for this whenever green
     meets a dark ground, and for nothing else. */
  --secondary-on-dark: #4ccd47;
  --secondary-container: #e2f2df; /* pale green, for tinted backgrounds */
  --on-secondary-container: #0f6b0b; /* on that tint, 5.8:1 */
  /* Channels only, for the tinted chip and icon-well backgrounds. */
  --secondary-rgb: 20, 130, 15;

  /* Tertiary / dark */
  --footer-bg: #111c2c;
  --footer-text: #cbd7e0;

  --error: #ba1a1a;

  /* Radius */
  --r-sm: 0.25rem;
  --r: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-xl: 1.5rem;
  --r-full: 9999px;

  /* Spacing */
  --container-max: 1280px;
  --gutter: 24px;
  --margin-desktop: 80px;
  --margin-mobile: 20px;
  --section-padding: 80px;
  --stack-sm: 8px;
  --stack-md: 16px;
  --stack-lg: 32px;

  /* Elevation */
  --soft-shadow: 0 10px 25px -5px rgba(13, 92, 171, 0.08);
  --soft-shadow-hover: 0 18px 40px -8px rgba(13, 92, 171, 0.16);
  --shadow-sm: 0 1px 2px rgba(17, 28, 44, 0.06), 0 1px 3px rgba(17, 28, 44, 0.05);

  /* Type */
  --font-head: "Manrope", system-ui, -apple-system, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
p { margin: 0; }

::selection { background: var(--primary-container); color: var(--on-primary-container); }

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ------------------------------ Layout ------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-mobile);
}

.section { padding-block: 56px; }

@media (min-width: 768px) {
  .container { padding-inline: var(--margin-desktop); }
  .section { padding-block: var(--section-padding); }
}

.section--tint { background: var(--surface-container-low); }
.section--white { background: var(--surface-container-lowest); }

/* Offset in-page anchor jumps so a section's eyebrow label lands just below the
   sticky header. The section's own top padding (56px mobile / 80px desktop) sits
   behind the header, so scroll-margin only needs to add a small gap. */
#about, #services, #why-us, #how-it-works, #faq, #request-care, #roles, #apply {
  scroll-margin-top: 30px;
}
@media (min-width: 768px) {
  #about, #services, #why-us, #how-it-works, #faq, #request-care, #roles, #apply {
    scroll-margin-top: 10px;
  }
}

/* The #contact alias is a zero-height span sitting INSIDE the Request Care
   section's top padding, not at its border box, so it needs that padding
   added to its offset. Without this, anyone following an old #contact link
   (including the header's own Contact nav item) lands with the heading
   hidden behind the sticky header.
   30px base + 56px mobile section padding; 10px + 80px on desktop. */
#contact { scroll-margin-top: 86px; }
@media (min-width: 768px) {
  #contact { scroll-margin-top: 90px; }
}

/* Eyebrow + heading rhythm */
.eyebrow {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 12px;
  display: inline-flex;
  align-items: center;
}

.section-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 16px;
}

.section-head { max-width: 640px; }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-lead { font-size: 18px; color: var(--on-surface-variant); line-height: 1.6; }


/* ------------------------------ Icons ------------------------------ */
.icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 30px; height: 30px; }

/* ------------------------------ Buttons ------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--r-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--primary-container); box-shadow: var(--soft-shadow); }

.btn--ghost { background: var(--surface-container-lowest); color: var(--primary); border-color: var(--outline-variant); }
.btn--ghost:hover { border-color: var(--primary); background: var(--surface-container); }

.btn--white { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); }
.btn--white:hover { background: var(--surface-container); }

.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--block { width: 100%; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14px;
  color: var(--primary);
  transition: gap 0.2s var(--ease), color 0.2s var(--ease);
}
.link-arrow:hover { gap: 12px; color: var(--primary-container); }

/* ------------------------------ Chips ------------------------------ */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-full);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  background: rgba(var(--secondary-rgb), 0.16);
  color: var(--on-secondary-container);
  border: 1px solid rgba(var(--secondary-rgb), 0.35);
}
.chip .icon { color: var(--secondary); }

.tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--surface-container);
  color: var(--on-surface);
  font-size: 13px;
  font-weight: 500;
}

/* ============================================================
   Header / Navigation
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(249, 249, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(194, 198, 211, 0.4);
  transition: box-shadow 0.3s var(--ease);
}
.site-header.scrolled { box-shadow: 0 4px 20px -6px rgba(13, 92, 171, 0.12); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  padding-block: 12px;
}
/* flex-shrink must stay off. As a flex item the brand is otherwise squeezed by
   the links and actions, and because the width is auto the image is squashed
   horizontally rather than scaled, which distorts the logo. */
.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  /* Both halves of the lockup are hung off this one value so they cannot
     drift apart. The supplied logo-compact.png baked the mark in at 2.2x the
     height of the wordmark, which is why the badge used to tower over the
     name; the two are now separate crops of that same artwork, set to a
     matched height. Change this, not the individual images. */
  --brand-h: 44px;
}
.nav__brand-mark,
.nav__brand-word { height: var(--brand-h); width: auto; }

.nav__links { display: none; align-items: center; gap: 28px; }
.nav__link {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  /* The brand lockup is the widest fixed item in the row and a two-word link
     is the first thing to break onto a second line. Keep every label on one
     line. */
  white-space: nowrap;
  color: var(--on-surface-variant);
  padding: 6px 2px;
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 2px;
  background: var(--primary);
  border-radius: var(--r-full);
  transition: width 0.25s var(--ease);
}
.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--primary); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { width: 100%; }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Click-to-call. Icon-only until there is room for the number. */
.nav__phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  padding: 10px;
  border-radius: var(--r-full);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__phone:hover { background: var(--surface-container); }
.nav__phone-text { display: none; }

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -8px;
  border: none;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  border-radius: var(--r-full);
}
.nav__toggle .icon { width: 28px; height: 28px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* Mobile menu panel: absolute dropdown so opening it does NOT push page
   content down (which would throw off in-page anchor scrolling). */
.mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
  background: var(--surface-container-lowest);
  border-bottom: 1px solid var(--outline-variant);
  box-shadow: 0 14px 26px -10px rgba(13, 92, 171, 0.18);
}
.mobile-menu[data-open="true"] { grid-template-rows: 1fr; }
.mobile-menu__inner { overflow: hidden; }
.mobile-menu__inner > * { padding-inline: var(--margin-mobile); }
.mobile-menu a {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--on-surface);
  padding-block: 14px;
  border-bottom: 1px solid var(--surface-container);
}
.mobile-menu a:last-child { border-bottom: none; }
/* Compounded onto .mobile-menu a so it wins on specificity (0,2,1 vs 0,1,1)
   without needing !important, which would force every later rule to escalate. */
.mobile-menu a.mobile-menu__phone {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--primary);
  font-weight: 700;
}
.mobile-menu .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block: 16px;
  color: var(--on-primary);
  border-bottom: none;
}

/* Six links plus the phone and the CTA need 833px of content, which the 80px
   container padding does not leave until about 1008px of viewport. Below this
   the row is genuinely overloaded, so the menu stays behind the toggle. */
@media (min-width: 1060px) {
  .nav__links { display: flex; gap: 20px; }
  .nav__cta { display: inline-flex; }
  .nav__toggle { display: none; }
  .mobile-menu { display: none; }
}

/* The header row is a fixed budget: logo + links + phone + CTA. The largest
   logo, the roomier link spacing and the spelled-out phone number are the
   three things that spend it, so they all wait for the same width rather than
   landing at staggered breakpoints and colliding in the band between. */
@media (min-width: 1280px) {
  .nav__brand { --brand-h: 52px; }
  .nav__links { gap: 28px; }
  .nav__phone-text { display: inline; }
  .nav__phone { padding: 10px 14px; }
}

/* ============================================================
   Hero
   ============================================================ */
/* One arrangement at every width: the copy sits on the photograph, over a
   scrim. What changes on mobile is how much of the photograph is shown and
   which way the scrim runs.

   In hero-bg.jpg the caregiver occupies x 810-975 and her client x 1187-1425
   of 1536: the pair spans 615px, 40% of the frame, with a metre of empty wall
   to the left of them. Shown whole in a phone-width window their heads come
   out 14-22% of the screen, too small to read as people. So mobile shows only
   that 40%: a 0.6-aspect window over source x 810-1425 by y 0-1024, which is
   the pair plus the ceiling above them and nothing else.

   The box below is that window. At 390px wide it is 651px tall, cover scales
   the source by 0.635, and the caregiver's head lands 105px across: 27% of
   the screen rather than 14%. The 80% horizontal offset is what picks the
   window out of the 586px of slack cover leaves; at 0% it would sit on the
   empty wall.

   The zoom is also what makes the top edge work. It keeps 82px of ceiling
   above the caregiver's hair, and that is where the mask dissolves the
   photograph into the navy, so the picture ends in a fade rather than a seam
   across the headline.

   From 768px up the window is wide enough to hold the whole frame beside the
   copy, so the box goes back to filling the section and the scrim turns from
   a top-to-bottom fade into a left-to-right one. */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Above the photograph's top edge on mobile, and behind it everywhere, so
     the hero is brand navy rather than a white flash before the image
     arrives. */
  background: var(--footer-bg);
}
.hero__bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  /* 167vw is the 0.6 aspect of the window described above. The cap stops the
     box running past 760px in the 600-767 band, where 167vw would be 1000px
     and the section would be nothing but photograph; cover holds the same
     framing there because the pair only needs 40% of the width. */
  height: min(167vw, 760px);
  background-image: url("images/hero-bg.jpg");
  background-size: cover;
  background-position: 80% top;
  /* 13% of 651px is 85px, the ceiling measured above. */
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 13%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 13%);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Top to bottom on mobile, because that is how the copy and the picture are
     stacked here, and it cannot let go until the copy has finished.

     The trust row is what sets the floor. It is the smallest text in the hero
     at 13.5px, so it needs 4.5:1, and it lands three quarters of the way down
     the section, which on a phone is the seated woman's near-white shirt and
     the caregiver's white sleeve: photograph pixels at or close to 255. So
     the scrim is still at 0.56 by 84%, which is below the last line of that
     row at every phone width, and only falls away after it, over the hands
     and the ottoman where nothing is written.

     Measured against the composited hero, worst pixel behind each block:

                     360    390    430    600    767
       chip         17.3   17.3   17.3   17.0   17.0
       headline     17.3   12.9   12.2   12.4   10.9
       lead         10.6   10.8    9.7   12.0   10.0
       buttons       7.5    7.8    7.5   10.0    8.4
       trust row     5.2    6.1    6.1    8.7    7.4

     Re-run those if any of the five numbers in the gradient move. */
  background: linear-gradient(
    180deg,
    rgba(var(--hero-scrim-rgb), 0.88) 0%,
    rgba(var(--hero-scrim-rgb), 0.85) 30%,
    rgba(var(--hero-scrim-rgb), 0.76) 52%,
    rgba(var(--hero-scrim-rgb), 0.68) 70%,
    rgba(var(--hero-scrim-rgb), 0.56) 84%,
    rgba(var(--hero-scrim-rgb), 0.22) 100%
  );
}
.hero__inner {
  position: relative;
  display: flex;
  /* The copy goes to the top of the section on mobile and the photograph gets
     everything under it. The bottom padding is what buys that: without it the
     copy would end where the section does and the picture would be all
     backdrop. */
  align-items: flex-start;
  padding-block: 36px 230px;
  /* The copy sets the height of the section on a phone, where it wraps to
     nine or ten lines and runs past the photograph's box on its own. It stops
     doing that between 520 and 767, where the wrapping loosens and the copy
     comes out shorter than the box: the box would then be taller than the
     section holding it, and overflow:hidden would cut the top off the
     photograph mid-fade, chopping the caregiver's head. This floor is the box
     plus enough navy above it for the fade to finish in. */
  min-height: calc(min(167vw, 760px) + 60px);
}
.hero__copy { max-width: 560px; }
.hero__title {
  font-size: clamp(34px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  color: #ffffff;
  margin-block: 16px 14px;
}
/* The green from the logo's mark, at the tint the hero's icons already use,
   so the phrase the client wants to carry the eye is the one warm-coloured
   thing in a field of white and navy. */
.hero__title .accent { color: var(--secondary-on-dark); display: block; }
.hero__lead {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  /* Matched to the headline's longest line (462px at the 56px size), not to
     the 560px column. At 34rem the paragraph overhung every line of the
     headline by ~75px and the two blocks read as unrelated. On mobile this
     never binds: the copy is on navy with the full width to itself. */
  max-width: 29rem;
}
/* Stacked on phones, and stretched to a common width rather than left at
   their own: side by side they clear a 390px screen by 35px, which reads as
   two buttons that failed to line up rather than a pair. The 520px break is
   where the pair fits a line with room to spare either side. */
.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: 260px;
  gap: 12px;
  margin-top: 22px;
}
@media (min-width: 520px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    max-width: none;
  }
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  /* Solid white, not the 0.82 it used to be. This row is the smallest text
     on the photograph at 13.5px, so it needs 4.5:1, and it sits at the foot
     of the hero, which on mobile is the seated woman's near-white shirt.
     Solid white over the worst pixel there measures 5.2:1 (the table on
     .hero__overlay holds the rest); at 0.82 the same pixel computes to 4.1
     and fails. */
  color: #ffffff;
}
.hero__trust-item .icon { color: var(--secondary-on-dark); }

/* Light-on-dark variants, scoped to the hero so these components are
   unchanged everywhere else on the page. */
.hero .chip {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.28);
}
.hero .chip .icon { color: var(--secondary-on-dark); }

.hero .btn--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.45);
}
.hero .btn--ghost:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
}

/* From 768px up the hero is wide enough to put the copy beside the two women
   rather than over them, so the box fills the section, the zoom comes off and
   the whole frame is shown. */
@media (min-width: 768px) {
  .hero__bg {
    inset: 0;
    height: auto;
    background-position: center right;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__inner {
    align-items: center;
    min-height: 640px;
    padding-block: 72px 104px;
  }
  .hero__title { margin-block: 20px 18px; }
  .hero__actions { gap: 14px; margin-top: 28px; }
  .hero__trust { gap: 22px; margin-top: 30px; padding-top: 24px; }
}

/* A left-to-right fade needs spare width on the right to fade INTO, and how
   much spare width exists depends entirely on how far the copy reaches.
   .hero__copy sits after 80px of container padding, so its right edge is
   fixed while the hero width varies. At the default 560px cap that edge
   lands at 640px, which as a proportion of hero width is:

       768px viewport  ->  85%   text covers almost the whole hero
      1024px viewport  ->  62%
      1440px viewport  ->  50%   (the container centres past 1280px, so the
                                  edge measures 712px here, not 640px)

   At 768px that leaves nothing to reveal, so the copy is capped tighter
   through the tablet band below, pulling its edge back to roughly 62% and
   giving the fade somewhere to go. Do not remove that cap and leave the
   fade in place: the gradient would then run underneath the text. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .hero__copy { max-width: 400px; }
  /* 46px over a 400px measure wraps the headline awkwardly. Stepping it down
     keeps the same four lines with room to breathe. */
  .hero__title { font-size: 38px; }
}

/* Where the copy's right edge lands, as a fraction of hero width, decides
   how early the scrim is allowed to start fading:

       768px  ->  62%    1024px  ->  62%
      1023px  ->  47%    1280px  ->  50%    1440px  ->  50%

   (The two bands both start at 62% and shrink: 768-1023 caps the copy at
   400px, then 1024 hands it back the full 560px.) So there are two cases,
   not one, and the 1280px break below is where the copy finally clears the
   caregiver rather than an arbitrary breakpoint. */
@media (min-width: 768px) {
  .hero__overlay {
    /* Copy runs to 62% here, so the scrim has to cover that far. The
       brightest thing under it is the seated woman's shirt; 0.66 over that
       measures 6.1:1 against white, and anything lighter fails AA for the
       18px lead. This is as far as the caregiver can be brought out at
       these widths: she stands behind the headline, not beside it. */
    background: linear-gradient(
      90deg,
      rgba(var(--hero-scrim-rgb), 0.74) 0%,
      rgba(var(--hero-scrim-rgb), 0.72) 40%,
      rgba(var(--hero-scrim-rgb), 0.66) 62%,
      rgba(var(--hero-scrim-rgb), 0.34) 78%,
      rgba(var(--hero-scrim-rgb), 0.16) 100%
    );
  }
}

@media (min-width: 1280px) {
  .hero__overlay {
    /* The caregiver stands at 51-64% of the hero width (she occupies
       x 790-985 of the 1536px source, and at these widths the photo is
       scaled to width, so source fractions and hero fractions are the
       same). The old scrim held 0.82 all the way to 64%, which put its
       darkest hold squarely over her and flattened her out of the picture.

       Copy stops at 50% here, so the fade can start the moment the text
       stops needing cover and be all but gone by the time it reaches her.
       Monotonic: never darkens again after lightening. */
    background: linear-gradient(
      90deg,
      rgba(var(--hero-scrim-rgb), 0.74) 0%,
      rgba(var(--hero-scrim-rgb), 0.70) 38%,
      rgba(var(--hero-scrim-rgb), 0.58) 55%,
      rgba(var(--hero-scrim-rgb), 0.28) 74%,
      rgba(var(--hero-scrim-rgb), 0.10) 100%
    );
  }
}

/* ============================================================
   Quick action cards (overlap hero)
   ============================================================ */
.actions {
  position: relative;
  z-index: 5;
  margin-top: 0;
  padding-block: 56px 8px;
}
.actions__grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
}
.action-card {
  position: relative;
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-top: 4px solid var(--secondary);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  text-align: center;
  box-shadow: var(--soft-shadow);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.action-card:hover { transform: translateY(-4px); box-shadow: var(--soft-shadow-hover); }
.action-card:nth-child(2) { border-top-color: var(--primary); }
.action-card:nth-child(3) { border-top-color: var(--tertiary, #3b464d); }
.action-card__icon {
  display: grid; place-items: center;
  width: 60px; height: 60px;
  border-radius: var(--r-full);
  background: var(--surface-container-low);
  color: var(--primary);
  margin-bottom: 18px;
  transition: transform 0.25s var(--ease);
}
.action-card:hover .action-card__icon { transform: scale(1.08); }
.action-card h3 {
  font-size: 21px;
  font-weight: 700;
  margin-bottom: 8px;
  min-height: 48px;            /* two lines at 21px / 1.15 = 48.3px */
  display: flex;
  align-items: center;
}
.action-card p { color: var(--on-surface-variant); font-size: 15px; margin-bottom: 20px; flex-grow: 1; }

@media (min-width: 768px) {
  .actions__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Story (two column)
   ============================================================ */
.story__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}
.story__media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--soft-shadow); aspect-ratio: 4 / 3; }
.story__media img { width: 100%; height: 100%; object-fit: cover; }
.story__media::after {
  content: "";
  position: absolute;
  left: -30px; bottom: -30px;
  width: 120px; height: 120px;
  background: var(--secondary);
  border-radius: var(--r-full);
  filter: blur(30px);
  opacity: 0.6;
}
.story__list { display: flex; flex-direction: column; gap: 14px; margin-top: 26px; }
.story__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; }
.story__list .icon { color: var(--secondary); margin-top: 1px; }
.story p + p { margin-top: 16px; }
.story__lead { font-size: 18px; line-height: 1.6; color: var(--on-surface-variant); }
.story__body { color: var(--on-surface-variant); }

@media (min-width: 900px) {
  .story__grid { grid-template-columns: 1fr 1fr; gap: var(--margin-desktop); }
  .story__media { order: -1; }
}

/* ============================================================
   Services
   ============================================================ */
.services__grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  margin-top: 48px;
}
.service {
  background: var(--surface-container-lowest);
  border: 1px solid rgba(194, 198, 211, 0.4);
  border-radius: var(--r-lg);
  padding: 26px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.service:hover { transform: translateY(-3px); box-shadow: var(--soft-shadow); border-color: rgba(0, 68, 132, 0.3); }
/* No min-height added: measured at 768px and 1440px, maxSpread was 0 at
   both widths (tallestHead 48px). The 48px icon already sets the floor
   for this row, so a reservation here would be dead weight. */
.service__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.service__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  background: rgba(0, 68, 132, 0.1);
  color: var(--primary);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.service:hover .service__icon { background: var(--primary); color: var(--on-primary); }
.service h4 { font-size: 18px; font-weight: 700; }
.service p { color: var(--on-surface-variant); font-size: 15px; }

.service--wide { }
.service__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Custom-plan CTA card */
.plan-card {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-lg);
  padding: 30px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--soft-shadow);
}
.plan-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: var(--r-full);
  filter: blur(10px);
}
.plan-card h4 { font-size: 22px; font-weight: 700; margin-bottom: 10px; position: relative; }
.plan-card p { color: rgba(255, 255, 255, 0.85); margin-bottom: 22px; position: relative; }
.plan-card .btn { position: relative; align-self: flex-start; }

@media (min-width: 768px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .services__grid { grid-template-columns: repeat(3, 1fr); }
  .service--wide { grid-column: span 2; }
}

/* ============================================================
   Why choose us
   ============================================================ */
.reasons__grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  margin-top: 48px;
}
.reason {
  background: var(--surface-container-lowest);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  border: 1px solid rgba(194, 198, 211, 0.35);
  text-align: center;
}
.reason__icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  border-radius: var(--r-full);
  background: rgba(var(--secondary-rgb), 0.16);
  color: var(--secondary);
}
.reason h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  min-height: 42px;            /* two lines at 18px / 1.15 = 41.4px */
  display: flex;
  align-items: center;
  justify-content: center;
}
.reason p { color: var(--on-surface-variant); font-size: 15px; }

@media (min-width: 560px) { .reasons__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .reasons__grid { grid-template-columns: repeat(4, 1fr); } }

/* ============================================================
   How it works
   ============================================================ */
.how__grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: 1fr;
  margin: 48px 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}
.how__step {
  position: relative;
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-lg);
  padding: 28px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.how__num {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--r-full);
  background: var(--secondary);
  color: var(--on-secondary);
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 16px;
  position: relative;
  z-index: 1;
}
.how__step h4 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  min-height: 42px;
  display: flex;
  align-items: center;
}
.how__step p { color: var(--on-surface-variant); font-size: 15px; }
.how__cta { display: flex; justify-content: center; margin-top: 40px; }

@media (min-width: 640px) {
  .how__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  .how__grid { grid-template-columns: repeat(4, 1fr); }
  /* A rule spanning the row. The step cards have opaque backgrounds and
     paint over most of it, so what actually renders is short connecting
     dashes visible in the gutters between cards. */
  .how__grid::before {
    content: "";
    position: absolute;
    top: 52px;
    left: 12.5%;
    right: 12.5%;
    height: 2px;
    background: var(--outline-variant);
    z-index: 0;
  }
}

/* ============================================================
   CTA band
   ============================================================ */
/* The band runs on the lime now, so its text runs dark rather than white.
   White on this green measures 2.2:1, which is the one thing the brand
   colour cannot be asked to do. The dot texture flips with it. */
.cta-band {
  background: var(--secondary);
  color: var(--on-secondary);
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  opacity: 0.5;
}
.cta-band__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
  padding-block: 44px;
}
.cta-band h2 { font-size: clamp(24px, 3.5vw, 32px); font-weight: 700; margin-bottom: 6px; }
.cta-band p { color: rgba(255, 255, 255, 0.92); font-size: 18px; }

@media (min-width: 768px) {
  .cta-band__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 780px; margin-inline: auto; }
.faq__list { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.faq__item {
  border: 1px solid rgba(194, 198, 211, 0.5);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.faq__item[data-open="true"] { border-color: rgba(0, 68, 132, 0.35); box-shadow: var(--soft-shadow); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 20px 22px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--on-surface);
}
.faq__q .icon { color: var(--outline); transition: transform 0.3s var(--ease), color 0.2s var(--ease); }
.faq__item[data-open="true"] .faq__q .icon { transform: rotate(180deg); color: var(--primary); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a p { padding: 0 22px 20px; color: var(--on-surface-variant); }
.faq__foot { text-align: center; margin-top: 32px; }
.faq__foot p { color: var(--on-surface-variant); margin-bottom: 10px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer__top {
  display: grid;
  gap: 40px;
  padding-block: 56px;
  grid-template-columns: 1fr;
}
.footer-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.footer-brand__mark {
  display: grid; place-items: center;
  width: 46px; height: 46px;
}
.footer-brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.footer-brand__name { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: #fff; line-height: 1.2; }
.site-footer p.footer-tagline { color: rgba(203, 215, 224, 0.8); max-width: 30rem; margin-bottom: 22px; }

.footer-contact { display: flex; flex-direction: column; gap: 12px; }
.footer-contact a, .footer-contact div {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(203, 215, 224, 0.92);
  font-size: 15px;
  width: fit-content;
  transition: color 0.2s var(--ease);
}
.footer-contact a:hover { color: var(--secondary-on-dark); }
.footer-contact .icon { color: var(--secondary-on-dark); margin-top: 2px; }

.footer-col h5 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 16px;
}
.footer-col nav { display: flex; flex-direction: column; gap: 12px; }
.footer-col nav a { color: rgba(203, 215, 224, 0.85); font-size: 15px; transition: color 0.2s var(--ease); width: fit-content; }
.footer-col nav a:hover { color: var(--secondary-on-dark); }

.site-footer__bottom {
  border-top: 1px solid rgba(203, 215, 224, 0.15);
  padding-block: 22px;
}
.site-footer__bottom p { font-size: 13px; color: rgba(203, 215, 224, 0.6); text-align: center; }

@media (min-width: 720px) {
  .site-footer__top { grid-template-columns: 1.6fr 1fr 1fr; }
}

/* ============================================================
   Careers page specifics
   ============================================================ */
.page-hero {
  background:
    radial-gradient(110% 120% at 100% 0%, var(--surface-container-high) 0%, transparent 50%),
    var(--surface-container-low);
  padding-block: 56px 64px;
}
.page-hero .container { max-width: 780px; text-align: center; }
.page-hero h1 { font-size: clamp(32px, 5.5vw, 50px); font-weight: 800; margin-block: 18px 16px; }
.page-hero p { font-size: 18px; color: var(--on-surface-variant); line-height: 1.6; }
/* justify-content centres the row from 520px up; below that the buttons are a
   stacked column 260px wide, and it is the block itself that has to be
   centred in this middle-aligned copy. */
.page-hero .hero__actions { justify-content: center; margin-inline: auto; }

.perk { display: flex; gap: 16px; align-items: flex-start; }
.perk__icon {
  display: grid; place-items: center;
  width: 48px; height: 48px; flex: none;
  border-radius: var(--r-md);
  background: rgba(0, 68, 132, 0.1);
  color: var(--primary);
}
.perk h4 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.perk p { color: var(--on-surface-variant); font-size: 15px; }
.perks__grid { display: grid; gap: 28px var(--gutter); grid-template-columns: 1fr; margin-top: 48px; }
@media (min-width: 680px) { .perks__grid { grid-template-columns: 1fr 1fr; } }

.roles__grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; margin-top: 48px; }
.role {
  background: var(--surface-container-lowest);
  border: 1px solid rgba(194, 198, 211, 0.4);
  border-left: 4px solid var(--secondary);
  border-radius: var(--r-lg);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.role h4 { font-size: 19px; font-weight: 700; }
.role p { color: var(--on-surface-variant); font-size: 15px; }
.role .link-arrow { margin-top: 8px; }
@media (min-width: 720px) { .roles__grid { grid-template-columns: 1fr 1fr; } }

.apply-card {
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-xl);
  padding: 44px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--soft-shadow);
}
.apply-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.4;
}
.apply-card > * { position: relative; }
.apply-card h2 { font-size: clamp(26px, 4vw, 36px); font-weight: 700; margin-bottom: 12px; }
.apply-card p { color: rgba(255, 255, 255, 0.9); font-size: 18px; max-width: 40rem; margin: 0 auto 12px; }
.apply-card .note { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-bottom: 26px; }

/* ------------------------------ Motion ------------------------------ */
/* Progressive enhancement: hidden only when JS is active, so no-JS users see everything */
.reveal { transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.js .reveal { opacity: 0; transform: translateY(24px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Request Care
   ============================================================ */
.anchor-alias { display: block; height: 0; overflow: hidden; }

.request__grid {
  display: grid;
  gap: 40px;
  margin-top: 48px;
  align-items: start;
}

.request__form-wrap {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--r-xl);
  padding: 28px 22px;
  box-shadow: var(--soft-shadow);
}

.request-form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-row { display: grid; gap: 18px; grid-template-columns: 1fr; }

/* The browser's own rule for the hidden attribute is `[hidden] { display: none }`
   in the user-agent stylesheet. Author styles beat the user-agent stylesheet
   whatever their specificity, so any element that sets its own display value
   silently ignores the attribute. Both of these are display:flex above AND are
   toggled through .hidden by main.js, so without this rule the form would never
   disappear and the success panel would be permanently visible.
   Compounding the attribute onto the class gives (0,2,0), which beats the bare
   class at (0,1,0), so no !important is needed. */
.request-form[hidden],
.request-success[hidden] { display: none; }

.field label {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--on-surface);
}
.field .req { color: var(--secondary); }

.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 16px;              /* 16px stops iOS Safari zooming on focus */
  color: var(--on-surface);
  background: var(--surface-container-lowest);
  border: 1.5px solid var(--outline-variant);
  border-radius: var(--r-md);
  padding: 13px 14px;
  width: 100%;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field textarea { resize: none; min-height: 104px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 68, 132, 0.14);
}
.field input[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: #b3261e;
  background: #fff6f5;
}
.field__err {
  font-size: 13.5px;
  font-weight: 600;
  color: #b3261e;
}

/* Honeypot. Hidden from people without display:none, which some bots
   detect and skip. Kept out of the tab order and off screen instead. */
.request-form__botcheck {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.request-form__alert {
  background: #fff6f5;
  border: 1px solid #f2b8b5;
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 14.5px;
  color: #7f1d17;
}
.request-form__alert a { color: #7f1d17; text-decoration: underline; font-weight: 700; }

.request-form__note { font-size: 13px; color: var(--on-surface-variant); }

/* On submit main.js focuses this panel, which scrolls it into view. Unlike the
   section anchors above it has no top padding of its own to hide behind the
   sticky header, so the offset has to clear the whole header: 69px, rising to
   77px once the larger logo lands at 1280px, plus a 15px breathing gap. Keep
   these in step with --brand-h if the logo height changes. */
.request-success {
  scroll-margin-top: 84px;
  text-align: center;
  padding: 20px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
@media (min-width: 1280px) {
  .request-success { scroll-margin-top: 92px; }
}
.request-success:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; }
.request-success__icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}
.request-success h3 { font-size: 24px; font-weight: 700; }
.request-success p { color: var(--on-surface-variant); max-width: 32rem; }
.request-success p.request-success__urgent { font-weight: 700; color: var(--on-surface); margin-top: 6px; }

.request__aside-title { font-size: 20px; font-weight: 700; margin-bottom: 18px; }
.request__contacts { display: flex; flex-direction: column; gap: 14px; }
.request__contacts a,
.request__address {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  color: var(--on-surface);
  transition: color 0.2s var(--ease);
}
.request__contacts a:hover { color: var(--primary); }
.request__contacts .icon { color: var(--secondary); flex: 0 0 auto; }

.request__assurances {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--outline-variant);
}
.request__assurances li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--on-surface-variant);
}
.request__assurances .icon { color: var(--secondary); }

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .request__form-wrap { padding: 36px 34px; }
}
@media (min-width: 1024px) {
  .request__grid { grid-template-columns: 58fr 42fr; gap: 56px; }
  .request__aside { padding-top: 8px; }
}

/* ============================================================
   Error pages (404, 500)
   ============================================================ */
.errorpage {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 58vh;
}
.errorpage__inner { max-width: 44rem; }

/* Large but deliberately quiet: the numeral orients, the heading informs.
   Rendering it as a watermark keeps it from shouting over the message. */
.errorpage__code {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(84px, 20vw, 168px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--surface-dim);
  margin-bottom: 8px;
  user-select: none;
}
.errorpage__title {
  font-family: var(--font-head);
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 700;
  color: var(--on-surface);
  margin-bottom: 14px;
}
.errorpage__lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--on-surface-variant);
  margin-inline: auto;
  max-width: 34rem;
}
.errorpage__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 30px;
}

.errorpage__help {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid var(--outline-variant);
}
.errorpage__help-title {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin-bottom: 18px;
}
.errorpage__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}
.errorpage__links a {
  display: inline-block;
  padding: 9px 16px;
  border-radius: var(--r-full);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--primary);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.errorpage__links a:hover { background: var(--surface-container); border-color: var(--primary); }

/* Someone looking for care should never hit a dead end, so the phone
   number gets its own block rather than sitting among the other links. */
.errorpage__urgent {
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--outline-variant);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.errorpage__urgent-label {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--on-surface);
}