/* =============================================================================
   Bay Health Solutions - site stylesheet

   Contents
   1.  Design tokens (colors, type, spacing)
   2.  Fonts
   3.  Base elements and text-size control
   4.  Utilities
   5.  Skip link, header, navigation
   6.  Buttons
   7.  Hero
   8.  Sections, cards, lists, steps, stats, bands
   9.  Page-specific blocks (partners, GUIDE offers, FAQ, regions, contact,
       documents, placeholders)
   10. Footer
   11. Print
   12. Motion and forced-colors support

   Color rules (WCAG 2.x contrast, verified):
   - Body text is navy on white or on the light green tint (13:1 or better).
   - Green buttons always use navy text (6.9:1). White text on bright green
     fails and is never used.
   - Dark green (#679630) is for icons, rules, and large text only, never
     body text (3.5:1 on white).
   ============================================================================= */

/* 1. Design tokens ---------------------------------------------------------- */
:root {
  --color-navy: #1D285A;
  --color-indigo: #314386;
  --color-green: #8EC644;
  --color-green-light: #A3D45F;
  --color-green-dark: #679630;
  --color-green-deep: #527826;
  --color-tint: #F3F9EC;
  --color-tint-strong: #E6F0D4;
  --color-white: #FFFFFF;
  --color-line: #D6DCEA;
  --color-line-green: #D9E4C9;

  --color-text: var(--color-navy);
  --color-text-muted: var(--color-indigo);
  --color-link: var(--color-indigo);

  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  --measure: 65ch;          /* longest comfortable line of body text */
  --container: 72rem;       /* content width on large screens */
  --gutter: 1rem;

  --radius-sm: 0.5rem;
  --radius: 0.75rem;
  --radius-lg: 1.5rem;
  --radius-blade: 7rem;     /* the single large curve that echoes the logo mark */

  --target: 44px;           /* minimum size for primary controls */
  --focus-width: 3px;
}

/* 2. Fonts ------------------------------------------------------------------ */
/* Atkinson Hyperlegible (Braille Institute, SIL Open Font License) is designed
   for readers with low vision. The files live in assets/fonts/. If they are
   missing, the system font stack is used instead. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../assets/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

/* Base size is 18 px. The header text-size buttons set data-text-size on the
   html element; every size on the site is in rem, so the whole page scales. */
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
  /* Keeps anchor targets and focused elements clear of the pinned header.
     The script sets --header-height to the measured height; the fallback
     covers the largest header size. */
  scroll-padding-top: var(--header-height, 7rem);
}
html[data-text-size="large"] {
  font-size: 125%;
}
html[data-text-size="x-large"] {
  font-size: 137.5%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-white);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  overflow-wrap: break-word;
}
h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.15rem; }

p, ul, ol {
  margin: 0 0 1.1em;
}
ul, ol {
  padding-left: 1.4em;
}
li {
  margin-bottom: 0.4em;
}

/* Every body link is underlined so it is never identified by color alone. */
a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 0.18em;
}


img, svg {
  max-width: 100%;
  height: auto;
}
svg {
  fill: none;
}

strong { font-weight: 700; }

address {
  font-style: normal;
}

blockquote {
  margin: 0;
  padding: 0;
}

/* Keyboard focus: a thick ring with an offset on every interactive element.
   Dark backgrounds switch the ring to white (see header, hero, band). */
:focus-visible {
  outline: var(--focus-width) solid var(--color-navy);
  outline-offset: 3px;
}

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

.prose > * {
  max-width: var(--measure);
}

.lead {
  font-size: 1.15rem;
  line-height: 1.55;
}

.text-muted {
  color: var(--color-text-muted);
}

/* Keeps a phone number on one line. */
.nowrap {
  white-space: nowrap;
}

.mt-md { margin-top: 1.75rem; }
.mt-lg { margin-top: 2.25rem; }
.max-w-md { max-width: 40rem; }

/* Hides content visually while keeping it available to screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 5. Skip link, header, navigation ------------------------------------------ */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--color-white);
  color: var(--color-navy);
  font-weight: 700;
  border: 3px solid var(--color-navy);
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  top: 1rem;
}

/* The header stays pinned to the top of the window while the page scrolls. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: 0 2px 10px rgba(29, 40, 90, 0.25);
  overflow-x: clip;
}

/* On small screens the open menu is part of the pinned header, so the header
   scrolls within the window if the menu is taller than the screen. */
@media (max-width: 63.99em) {
  .site-header {
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
  }
}
.site-header :focus-visible {
  outline-color: var(--color-white);
}

/* The bottom padding is the thin navy line that shows beneath the capsule. */
.site-header__inner {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 0.5rem 0.2rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* White capsule holding the logo mark, name, and tagline. Anchored to the
   top-left corner of the header; the ::before extends its white background
   to the left edge of the window on wide screens. */
.brand {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  background: var(--color-white);
  color: var(--color-navy);
  text-decoration: none;
  border-radius: 0 0 1.75rem 0;
  min-height: var(--target);
  flex-shrink: 0;
}
.brand::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 50vw;
  background: var(--color-white);
}
.brand:hover .brand__name {
  text-decoration: underline;
}
.brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}
.brand__name {
  display: block;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  max-width: 6.5em;   /* wraps the name to two lines on small screens */
}
.brand__tagline {
  display: none;
  font-size: 0.85rem;
  line-height: 1.2;
  margin-top: 0.2rem;
  color: var(--color-indigo);
}

/* Very narrow phones: a slightly smaller capsule keeps the phone button and
   Menu on the same row as the brand. */
@media (max-width: 23.99em) {
  .brand {
    padding-right: 0.75rem;
  }
  .brand__mark {
    width: 2rem;
    height: 2rem;
  }
  .brand__name {
    font-size: 0.9rem;
  }
}

/* Small-screen phone button: visible in the header row so a call is always
   one tap away, even before the menu is opened. */
.header-phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  border-radius: 50%;
  background: var(--color-green);
  color: var(--color-navy);
}
.header-phone svg {
  width: 1.4rem;
  height: 1.4rem;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--target);
  padding: 0.4rem 0.6rem;
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.menu-toggle svg {
  width: 1.4rem;
  height: 1.4rem;
}
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-menu { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* The menu panel holds the navigation and the tools (phone, text size,
   language, Get Help). On small screens it drops below the header row and is
   hidden until the Menu button opens it. Without JavaScript it stays open. */
.site-menu {
  flex-basis: 100%;
  padding: 0.5rem 0 0.75rem var(--gutter);
}
.js .site-menu:not(.is-open) {
  display: none;
}

.site-nav__list,
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__list li {
  margin: 0;
}
.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--target);
  padding: 0.6rem 0.75rem;
  color: var(--color-white);
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.site-nav__list a:hover {
  background: var(--color-indigo);
  text-decoration: underline;
}
.site-nav__list a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--color-green);
  text-underline-offset: 0.35em;
}

.has-submenu {
  position: relative;
}
.has-submenu__row {
  display: flex;
  align-items: center;
}
.has-submenu__row > a {
  flex: 1 1 auto;
}
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  background: transparent;
  color: var(--color-white);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.submenu-toggle svg {
  width: 1.1rem;
  height: 1.1rem;
}
.submenu-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.submenu {
  display: none;
  padding-left: 1.25rem;
}
.has-submenu.is-open > .submenu,
.no-js .submenu {
  display: block;
}

.site-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/* Single text-size button: each press steps the page through three sizes. */
.text-size {
  min-width: var(--target);
  min-height: var(--target);
  padding: 0 0.6rem;
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.text-size:hover {
  background: var(--color-indigo);
}

/* Large-screen header. The brand capsule stands on the left; the navigation
   (including the language link) and the two tools sit on the right. From
   64em the tools sit in a row above the navigation; from 80em everything is
   on one row. The breakpoints are fixed, so the header is the same in both
   languages at any given width. Services opens as a dropdown. */
@media (min-width: 64em) {
  .site-header__inner {
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
    padding-right: var(--gutter);
  }
  .header-phone,
  .menu-toggle {
    display: none;
  }
  .brand {
    align-self: stretch;
    gap: 0.8rem;
    padding: 0.6rem 1.25rem 0.6rem 1rem;
  }
  .brand__mark {
    width: 3.25rem;
    height: 3.25rem;
  }
  .brand__name {
    font-size: 1.25rem;
    max-width: none;
  }
  .site-menu,
  .js .site-menu:not(.is-open) {
    display: grid;
    flex: 1 1 auto;
    justify-items: end;
    align-content: center;
    row-gap: 0.4rem;
    padding: 0;
  }
  .site-tools {
    order: 1;
    flex-wrap: nowrap;
    margin: 0;
    padding: 0;
    border: 0;
    gap: 0.6rem;
  }
  .site-nav {
    order: 2;
  }
  .site-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.25rem;
  }
  .site-nav__list a {
    padding: 0.6rem 0.65rem;
  }
  .submenu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 30;
    min-width: 17rem;
    padding: 0.5rem;
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(29, 40, 90, 0.3);
  }
  .no-js .submenu {
    position: static;
    box-shadow: none;
    background: transparent;
    padding: 0;
  }
  .no-js .submenu li {
    display: inline-block;
  }
  .submenu a {
    color: var(--color-navy);
  }
  .submenu a:hover {
    background: var(--color-tint);
    color: var(--color-navy);
  }
  .submenu :focus-visible {
    outline-color: var(--color-navy);
  }
}

/* Wide screens: navigation and tools share one row. */
@media (min-width: 80em) {
  .site-menu,
  .js .site-menu:not(.is-open) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.25rem;
  }
  .site-tools,
  .site-nav {
    order: 0;
  }
  .site-nav__list li + li {
    margin-left: 0.15rem;
  }
}

/* The tagline returns once there is room for it beside the single row. */
@media (min-width: 84em) {
  .brand__tagline {
    display: block;
  }
}

/* 6. Buttons ---------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--target);
  min-width: var(--target);
  max-width: 100%;
  padding: 0.7rem clamp(0.75rem, 4vw, 1.4rem);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.button svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
}

/* Primary: bright green with navy text (6.9:1). Used for Get Help and the
   main action in each section. */
.button--primary {
  background: var(--color-green);
  color: var(--color-navy);
  border-color: var(--color-green);
}
.button--primary:hover {
  background: var(--color-green-light);
  border-color: var(--color-green-light);
  text-decoration: underline;
}

/* Ghost: white outline for use on navy backgrounds. */
.button--ghost {
  background: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}
.button--ghost:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

/* Outline: navy outline for use on white or tinted backgrounds. */
.button--outline {
  background: transparent;
  color: var(--color-navy);
  border-color: var(--color-navy);
}
.button--outline:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

/* Solid navy for use on white or tinted backgrounds. */
.button--navy {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}
.button--navy:hover {
  background: var(--color-indigo);
  border-color: var(--color-indigo);
  text-decoration: underline;
}

/* 7. Hero ------------------------------------------------------------------- */
.hero {
  background: var(--color-navy);
  color: var(--color-white);
  overflow: hidden;
}
.hero :focus-visible {
  outline-color: var(--color-white);
}
.hero__inner {
  display: grid;
  gap: 2rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.hero__inner > *,
.band__inner > *,
.contact-grid > *,
.card-grid > * {
  min-width: 0;
}
.hero__title {
  font-size: clamp(2.2rem, 4.8vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  max-width: 16ch;
}
.hero__lead {
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.5;
  margin: 0;
  max-width: 42ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 1.75rem;
}
.hero__note {
  margin: 1.25rem 0 0;
  font-size: 1.05rem;
}
.hero__note a {
  color: var(--color-white);
  font-weight: 700;
}

/* The photo is decorative. It is hidden on small screens and takes the
   blade-shaped corner that echoes the logo mark on larger ones. */
.hero__media {
  display: none;
}
.hero__media img {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin-left: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-blade);
}
@media (min-width: 48em) {
  .hero__media {
    display: block;
  }
  .hero--with-media .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: center;
  }
}

/* 8. Sections, cards, lists, steps, stats, bands ---------------------------- */
.section {
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.section--tint {
  background: var(--color-tint);
}
.section--tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}
.section__title {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 0.75rem;
  max-width: 26ch;
}
.section__title:not(:first-child) {
  margin-top: 2.25rem;
}
.section__intro {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: var(--measure);
  margin: 0;
}
.section__intro + .card-grid,
.section__intro + .steps,
.section__intro + .partners,
.section__intro + .offers {
  margin-top: 2.25rem;
}
.section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin-top: 2rem;
}

.card-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-top: 2rem;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.75rem;
  background: var(--color-tint);
  border-radius: var(--radius);
}
.section--tint .card,
.card--white {
  background: var(--color-white);
  border: 1px solid var(--color-line-green);
}
.card__icon {
  width: 3rem;
  height: 3rem;
  color: var(--color-green-dark);
}
.card__title {
  font-size: 1.4rem;
  line-height: 1.2;
  margin: 0;
}
.card__text {
  margin: 0;
}
.card .check-list {
  margin: 0;
}
.card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-weight: 700;
}

/* Lists with a green check mark instead of a bullet. */
.check-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}
.check-list li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.6rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--color-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D285A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center / 62% no-repeat;
}

/* Numbered steps. The list is an ordered list, so the numbers are read
   by screen readers even though the browser markers are hidden. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.steps__item {
  counter-increment: step;
  position: relative;
  padding-left: 3.9rem;
  margin: 0;
}
.steps__item::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.15rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 1.4rem;
  font-weight: 700;
}
.steps__title {
  font-size: 1.25rem;
  margin: 0 0 0.35rem;
}
.steps__item p {
  margin: 0;
}

.stats {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.stat {
  margin: 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--color-green);
}
.stat__number {
  display: block;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-navy);
}
.stat__label {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.05rem;
  color: var(--color-text-muted);
}

/* Full-width navy band with one message and its actions. */
.band {
  background: var(--color-navy);
  color: var(--color-white);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.band :focus-visible {
  outline-color: var(--color-white);
}
.band__inner {
  display: grid;
  gap: 1.5rem;
}
.band__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.5rem;
}
.band__text {
  margin: 0;
  font-size: 1.1rem;
  max-width: 52ch;
}
.band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
}
.band a:not(.button) {
  color: var(--color-white);
}
.band blockquote p {
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  line-height: 1.4;
  margin: 0;
  max-width: 40ch;
}
@media (min-width: 48em) {
  .band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

/* 9. Page-specific blocks --------------------------------------------------- */

/* Partner agency cards (About page). */
.partners {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  margin-top: 2rem;
}
.partner {
  padding: 1.75rem;
  background: var(--color-white);
  border: 1px solid var(--color-line-green);
  border-radius: var(--radius);
}
.partner__logo {
  display: block;
  width: 100%;
  max-width: 15rem;
  height: auto;
  margin-bottom: 1.25rem;
}
.partner h3 {
  margin-bottom: 0.4rem;
}
.partner__place {
  margin: 0 0 1rem;
  color: var(--color-text-muted);
}

/* GUIDE "what you receive" row: icon in a navy circle plus a short label. */
.offers {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}
.offer {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 0;
}
.offer__icon {
  width: 3.25rem;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
}
.offer__icon svg {
  width: 1.7rem;
  height: 1.7rem;
}
.offer__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}
.offer__text {
  margin: 0;
}

/* Common questions: native details/summary so no script is needed. */
.faq-list {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-line);
}
.faq {
  border-bottom: 1px solid var(--color-line);
}
.faq summary {
  position: relative;
  min-height: var(--target);
  padding: 1rem 3rem 1rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  width: 0.7em;
  height: 0.7em;
  border-right: 3px solid var(--color-green-dark);
  border-bottom: 3px solid var(--color-green-dark);
  transform: translateY(-70%) rotate(45deg);
}
.faq[open] summary::after {
  transform: translateY(-30%) rotate(-135deg);
}
.faq summary:hover {
  text-decoration: underline;
}
.faq__body {
  padding: 0 0 1.25rem;
  max-width: var(--measure);
}
.faq__body > :last-child {
  margin-bottom: 0;
}

/* Service area: one short list per region. */
.regions {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-top: 1.75rem;
}
.regions h3 {
  font-size: 1.2rem;
  margin: 0 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 3px solid var(--color-green);
  display: inline-block;
}
.regions ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* Contact page. */
.contact-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 64em) {
  .contact-grid {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: start;
  }
}
.contact-card {
  padding: 1.75rem;
  background: var(--color-tint);
  border-radius: var(--radius);
}
.contact-card h2 {
  margin-top: 0;
}
.contact-card > :last-child {
  margin-bottom: 0;
}
.phone-big {
  display: inline-block;
  font-size: clamp(1.25rem, 5.5vw, 1.9rem);
  font-weight: 700;
  color: var(--color-navy);
  margin: 0.25rem 0 0.5rem;
}
.office {
  margin-bottom: 1.5rem;
}
.office h3 {
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}
.office p {
  margin-bottom: 0.4rem;
}

/* Short notes that need attention, such as the emergency reminder. */
.note {
  margin: 1rem 0 1.5rem;
  padding: 1rem 1.25rem;
  background: var(--color-white);
  border-left: 5px solid var(--color-green-dark);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.section--tint .note,
.contact-card .note {
  background: var(--color-white);
}
.note > :last-child {
  margin-bottom: 0;
}

/* Embedded Microsoft Form. */
.form-embed {
  margin-top: 1rem;
}
.form-embed iframe {
  display: block;
  width: 100%;
  min-height: 52rem;
  border: 0;
  border-radius: var(--radius-sm);
}

/* Document download links (Notice of Privacy Practices). */
.doc-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}
.doc-links li {
  margin: 0;
}

/* Long legal text (Notice of Privacy Practices). */
.notice h2 {
  font-size: 1.6rem;
  margin-top: 2.5rem;
}
.notice h3 {
  font-size: 1.25rem;
  margin-top: 1.75rem;
}
.notice h4 {
  font-size: 1.1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}
.notice__meta {
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

/* Placeholder blocks mark content the site owner still needs to insert
   (form embed, notice text). They are styled so they cannot be mistaken
   for finished content. */
.placeholder {
  padding: 1.25rem 1.5rem;
  background: var(--color-white);
  border: 2px dashed var(--color-green-dark);
  border-radius: var(--radius-sm);
}
.placeholder > :last-child {
  margin-bottom: 0;
}
.placeholder--inline {
  display: inline-block;
  padding: 0.2rem 0.7rem;
}

/* Language reminder shown at the top of pages that have an alternate
   language version, so the switch is visible even before the menu opens. */
.lang-note {
  margin: 0;
  padding: 0.75rem 0;
  font-size: 1rem;
  border-bottom: 1px solid var(--color-line);
}

/* 10. Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--color-white);
  color: var(--color-navy);
  border-top: 6px solid var(--color-green);
  padding-block: 3rem 1.5rem;
}
.site-footer__grid {
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.site-footer__brand {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.site-footer__brand .brand__mark {
  width: 3rem;
  height: 3rem;
}
.site-footer__brand .brand__name {
  font-size: 1.2rem;
}
.site-footer__brand .brand__tagline {
  display: block;
}
.site-footer__brand p {
  margin: 0.75rem 0 0;
}
.site-footer__heading {
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer li {
  margin: 0;
}
.site-footer a {
  color: var(--color-navy);
}
.site-footer li a {
  display: inline-block;
  padding: 0.3rem 0;
}
.site-footer p {
  margin-bottom: 0.6rem;
}
.site-footer__legal {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: 0.95rem;
  color: var(--color-text-muted);
}
.site-footer__legal p {
  margin: 0;
}

/* 11. Print ----------------------------------------------------------------- */
@media print {
  .skip-link,
  .header-phone,
  .menu-toggle,
  .site-menu,
  .band,
  .hero__media,
  .form-embed {
    display: none !important;
  }
  .site-header,
  .hero {
    position: static;
    background: none;
    color: var(--color-navy);
    box-shadow: none;
  }
  .brand {
    padding-left: 0;
  }
  .brand::before {
    display: none;
  }
  .hero__note a,
  .band a {
    color: var(--color-navy);
  }
  details {
    display: block;
  }
  details > summary::after {
    display: none;
  }
  details:not([open]) > *:not(summary) {
    display: block;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}

/* 12. Motion and forced-colors support -------------------------------------- */
/* The site has no animation. The only transitions are on button and link
   colors, and they are switched off for people who prefer reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .button,
  .site-nav__list a,
  .text-size button {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  html {
    scroll-behavior: smooth;
  }
}

/* Windows High Contrast / forced-colors mode: keep control boundaries and
   list markers visible when background colors and images are removed. */
@media (forced-colors: active) {
  .site-header {
    border-bottom: 1px solid CanvasText;
  }
  .button,
  .menu-toggle,
  .text-size button,
  .submenu-toggle,
  .header-phone {
    border: 2px solid ButtonText;
    forced-color-adjust: none;
    background: ButtonFace;
    color: ButtonText;
  }
  .button--primary {
    background: Highlight;
    color: HighlightText;
  }
  .check-list li::before {
    background: none;
    border: 2px solid CanvasText;
  }
  .steps__item::before,
  .offer__icon {
    border: 2px solid CanvasText;
  }
  .card,
  .partner,
  .contact-card,
  .stat {
    border: 1px solid CanvasText;
  }
  .site-nav__list a[aria-current="page"] {
    text-decoration-color: LinkText;
  }
}