/* BCS generated stylesheet. Tokens and cross-cutting layer only.
   Generated by generator/cross_cutting.py. Do not hand-edit. */

/* Derived values:
   --surface-accent derived from primary at 6% -> #E7E8EB
   --color-muted derived from #04183A at 35% -> #59657C (#F6F5F6 5.40:1, #E7E8EB 4.79:1)
   --color-shadow derived from #04183A at 10% alpha -> rgba(4, 24, 58, 0.1)
   --color-rating from the reference gold #F5B301 -> #A97B01 (#F6F5F6 3.50:1, #E7E8EB 3.10:1)
*/
:root {
  --color-primary: #04183A;
  --color-secondary: #EF4244;
  --surface-default: #F6F5F6;
  --surface-accent: #E7E8EB;
  --color-accent: var(--surface-accent);
  --color-secondary-on-light: #C41113;
  --color-neutral-dark: #04183A;
  --color-neutral-light: var(--surface-default);
  --color-contrast: #FFFFFF;
  --color-border-subtle: rgba(4, 24, 58, 0.12);
  --color-muted: #59657C;
  --color-shadow: rgba(4, 24, 58, 0.1);
  --color-shadow-strong: rgba(4, 24, 58, 0.28);
  --color-focus: #EF4244;
  --color-rating: #A97B01;
  --font-heading: Montserrat, Arial, Helvetica, sans-serif;
  --font-body: Montserrat, Arial, Helvetica, sans-serif;
  --site-width: 1140px;
  --input-radius: 0;
}
html { --fs: 1; }

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

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

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

/* --- Typography --- */
body {
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  line-height: 1.7;
  font-weight: 400;
  color: var(--color-neutral-dark);
  background: var(--surface-default);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  margin: 0 0 0.5em;
}

h1 {
  font-size: calc(clamp(32px, 4vw, 48px) * var(--fs, 1));
  font-weight: 800;
  line-height: 1.25;
}

h2 {
  font-size: calc(32px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.25;
}

h3 {
  font-size: calc(24px * var(--fs, 1));
  font-weight: 600;
  line-height: 1.33;
}

h4 {
  font-size: calc(20px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.4;
}

h5 {
  font-size: calc(18px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.4;
}

h6 {
  font-size: calc(16px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.4;
}

/* --- Surfaces --- */
.surface-announcement-banner {
  background: var(--surface-accent);
}

.surface-body-placeholder {
  background: var(--surface-default);
}

.surface-community {
  background: var(--surface-default);
}

.surface-contact-section {
  background: var(--surface-accent);
}

.surface-page-body {
  background: var(--surface-default);
}

.surface-service-area {
  background: var(--surface-default);
}

.surface-services-type-a {
  background: var(--surface-default);
}

.surface-services-type-b {
  background: var(--surface-accent);
}

.surface-services-type-c {
  background: var(--surface-default);
}

.surface-trust-bar-container {
  background: var(--surface-default);
}

.surface-trust-bar-review-card {
  background: var(--surface-accent);
}

/* --- Buttons and focus --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  border-radius: 4px;
  border: 2px solid transparent;
  font-family: var(--font-heading);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  font-size: calc(16px * var(--fs, 1));
  transition: background-color 120ms linear, color 120ms linear,
    border-color 120ms linear;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-contrast);
  border-color: var(--color-primary);
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
  border-color: var(--color-secondary);
}

/* On dark chrome the same class flips to a light fill. The chrome
   classes are .site-header and .site-footer, which is what the
   accessibility class contract names; .header and .footer matched
   nothing and were corrected in Increment 3 (ruling D-7). */
.site-header .btn-secondary:hover,
.hero .btn-secondary:hover,
.site-footer .btn-secondary:hover {
  background: var(--color-contrast);
  color: var(--color-neutral-dark);
  border-color: var(--color-contrast);
}

/* XCUT-SPEC-024 (candidate BTN-KEVIN-HOV-001): a secondary button in a light container
   hovers to primary fill with secondary text, so it never flips
   to white-on-white. It comes AFTER the dark-chrome rule on purpose:
   .hero .btn-secondary:hover and .hero-form .btn-secondary:hover tie
   on specificity, so source order decides the hero form's submit.
   Before Increment 4 the dark rule came last and won. */
.hero-form .btn-secondary:hover,
.contact-form .btn-secondary:hover,
.surface-services-type-b .btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-secondary);
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-contrast);
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
}

/* ADA-SPEC-001 / ADA-WCAG-KEY-002: 3px solid --color-focus at a 3px offset,
   the Accessibility Skill base's own ring. This rule outranks the verbatim
   :focus-visible, so it has to carry the same offset (Stage 4, D-1). */
.btn:focus-visible, a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

/* --- Links --- */
/* Text on light surfaces uses secondary-on-light, never raw secondary. */
.surface-default a, .surface-accent a, main a {
  color: var(--color-secondary-on-light);
  text-decoration: underline;
}

.on-dark a {
  color: var(--color-secondary);
  text-decoration: underline;
}

a:hover { text-decoration: underline; }

/* --- Form inputs --- */
input, select, textarea {
  font-family: var(--font-body);
  font-size: calc(16px * var(--fs, 1));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--input-radius);
  padding: 12px 14px;
  width: 100%;
}

/* --- Breakpoints --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Header and navigation --- */
/* --- Breakpoint visibility --- */
.header-inner { display: none; }
.mobile-chrome { display: flex; }

@media (min-width: 1024px) {
  .header-inner { display: flex; }
  .mobile-chrome { display: none; }
  .mobile-menu-overlay { display: none; }
}

/* --- Announcement banner --- */
.announcement-banner {
  background: var(--surface-accent);
  color: var(--color-neutral-dark);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  min-height: 48px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: calc(14px * var(--fs, 1));
  font-weight: 400;
}

/* Part 6: link colour primary. ADA-WCAG-LNK-004: underlined on a light surface. */
.announcement-banner a {
  color: var(--color-primary);
  text-decoration: underline;
  font-weight: 700;
}

@media (min-width: 1024px) {
  .announcement-banner {
    min-height: 40px;
  }
}

/* --- Desktop header --- */
.site-header {
  background: var(--color-primary);
  color: var(--color-contrast);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
}

.header-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: 20px;
  align-items: center;
  gap: 16px;
  min-height: 100px;
}

.site-header .logo,
.site-header .logo-mobile {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

/* Kevin ruling K-9 (2026-09-19), the Header-logo correction. The logo
   used to be a fixed 44px (48px in the chrome) while the widget grew all
   the navigation and button text around it, so at 150-175% it read as
   disproportionately small: at 1440px the header grew from 140px to
   439.6px tall and the logo never moved off 118 x 44.

   It now scales with the text setting, responsively: full 1:1 on the
   desktop row, capped in the mobile chrome, and not at all below 480px
   where K-7 owns the space (see LOGO_MOBILE_SCALED_CAP above). This is
   a BCS usability and visual-consistency rule, not a WCAG requirement:
   no success criterion asks a logo to track text size.

   max-height on the real element, so the layout box grows with it: never
   transform: scale(), which would leave the link box behind and paint the
   logo over its neighbours. width stays auto, so the intrinsic aspect
   ratio is preserved and nothing is cropped, stretched or filtered.
   At --fs 1 the calc is exactly the approved value, so 100% text is
   byte-identical.

   Measured at 17 widths x all five steps. The desktop row takes the
   full 1:1 once the dropdown panels are clamped (render_nav_css /
   fitDropdowns); the mobile chrome could not, and its measured caps are
   on LOGO_MOBILE_SCALED_CAP above. See
   docs/STATUS_pre_stage5_footer_logo_checkpoint.md. */
.site-header .logo img { max-height: calc(44px * var(--fs, 1)); width: auto; }
.site-header .logo-mobile img { max-height: min(calc(48px * var(--fs, 1)), 56px); width: auto; }

/* Stage 4 ruling R-4 (ADA-SPEC-041): every mobile tap target is at least
   44px tall. The two that were not grow their hit area, not their
   look. The logo link becomes a 44px-tall box around the unchanged,
   centred image. The banner link takes 10px of padding above and below and
   gives it back as negative margin, so the banner's height, the header's
   and every approved measurement stay exactly as they were. */
@media (max-width: 1023px) {
  .mobile-chrome .logo-mobile { min-height: 44px; }
  .announcement-banner a { padding-block: 11px; margin-block: -11px; }
}

/* --- Desktop nav --- */
.main-nav {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-item > a {
  display: inline-block;
  padding: 12px 0;
  color: var(--color-contrast);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-size: calc(20px * var(--fs, 1));
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 6px solid transparent;
}

/* NAV-SPEC-035: 6px underline in the contrast colour on the current page, and
   the same underline on a dropdown parent under hover or focus, signalling
   that the panel will open (Part 8). */
.nav-item.active > a,
.nav-item.has-dropdown:hover > a,
.nav-item.has-dropdown:focus-within > a {
  border-bottom-color: var(--color-contrast);
}

/* NAV-SPEC-010 Notes: the 20px Desktop value "scales down at narrower
   viewports before nav-collapse". 1024-1279 is that band -- the row cannot
   hold four 20px items plus the CTA group inside the site width there. The
   Desktop value above is emitted unchanged; this is the Spec's own step. */
@media (max-width: 1279px) {
  .nav-item > a {
    font-size: calc(16px * var(--fs, 1));
  }
}

@media (min-width: 1280px) {
  .main-nav > ul {
    gap: 24px;
  }
}

/* --- Desktop dropdown panels --- */
.dropdown {
  position: absolute;
  top: 100%;
  /* Ruling R-3 is 'desktop dropdowns stay inside the viewport'; only the
     vertical half was implemented. A panel is 300px wide and anchored to
     its own nav item, so a nav item far enough right pushed its panel off
     screen. K-9's larger logo moves the nav right and made that reachable
     at 1024-1100px and 175% text, where the panel had 6.4px of slack. The
     shift is measured by fitDropdowns(), never assumed, and is 0 whenever
     the panel already fits. */
  left: var(--dropdown-shift, 0px);
  width: 300px;
  background: var(--color-neutral-light);
  border-top: 3px solid var(--color-primary);
  box-shadow: 0 4px 12px var(--color-shadow);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms linear, visibility 120ms linear;
  z-index: 110;
}

.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
}

.dropdown ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown a {
  display: block;
  padding: 7px 20px;
  color: var(--color-neutral-dark);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: calc(20px * var(--fs, 1));
  font-weight: 700;
}

/* Stage 5 (K5-03): a grouped dropdown's group label. Small caps in the
   muted text colour, above its own list; never a link. */
.dropdown-group > ul { list-style: none; margin: 0; padding: 0; }
.dropdown-group + .dropdown-group { margin-top: 6px; }
.dropdown-group-label {
  display: block;
  padding: 8px 20px 2px;
  font-family: var(--font-heading);
  font-size: calc(13px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Part 5 / COL-KEVIN-AA-001: secondary-on-light for dropdown hover text. */
.dropdown a:hover,
.dropdown a:focus-visible {
  color: var(--color-secondary-on-light);
  background: var(--color-neutral-light);
}

/* Stage 4 ruling R-3. Under enlarged text the sticky header grows, and an
   open panel could run past the bottom of the screen where no scroll could
   reach it (the panel belongs to the sticky header). The header script caps
   such a panel at the room between its top and the viewport's bottom
   (--dropdown-max) and marks it; it then scrolls inside itself. The inset
   and the scroll margin keep every item's whole focus ring inside it (the
   widest ring, high contrast's 6px halo, plus 2px). A panel that fits is
   never marked and keeps its approved box exactly. */
.dropdown.is-constrained {
  max-height: var(--dropdown-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
}
.dropdown.is-constrained a { scroll-margin-block: 8px; }

/* --- Header CTAs --- */
.header-ctas {
  display: flex;
  align-items: stretch;
  align-self: center;
  flex: 0 0 auto;
  gap: 12px;
  margin-left: auto;
}

/* NAV-SPEC-112: both CTAs render at the same height, sized by their
   own content plus the shared minimum, not by the header row. The
   nowrap is the base that Part 5.1's scaled-text override
   (.header-ctas .btn{white-space:normal}) exists to lift. */
.header-ctas > .btn {
  min-height: 54px;
  border-radius: 4px;
  line-height: 1.2;
  padding-block: 9px;
  font-size: calc(14px * var(--fs, 1));
  white-space: nowrap;
}

.btn-phone {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-transform: none;
}

.btn-phone .phone-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

/* Part 10: operating hours on a second line, 10-12px, no uppercase. */
.hours-line {
  display: block;
  font-size: calc(11px * var(--fs, 1));
  font-weight: 400;
  text-transform: none;
  max-width: 200px;
}

.header-ctas .icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Mobile chrome --- */
.mobile-chrome {
  background: var(--color-primary);
  color: var(--color-contrast);
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: 16px;
  min-height: 100px;
}

.mobile-chrome .btn-compact {
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
  border-color: var(--color-secondary);
  margin-left: auto;
  padding: 14px 16px;
  font-size: calc(13px * var(--fs, 1));
  min-height: 48px;
  max-width: 160px;
  white-space: nowrap;
}

/* Part 5, tablet: shrink horizontal padding before growing vertically. */
@media (max-width: 767px) {
  .mobile-chrome .btn-compact { padding-inline: 12px; }
}

/* Narrow mobile, below 480px (finding H-1; corrected at browser review
   2026-09-18). Normal text keeps ONE row, in markup order: logo, quote,
   phone, hamburger, as the approved wider chrome does. The logo gives
   way first (it shrinks to the space left); gaps and inline padding
   tighten; the quote button stays content-width with its full wording
   and is never stretched. Phone and hamburger keep 44x44. */
@media (max-width: 479px) {
  .mobile-chrome {
    gap: 8px;
    padding-inline: 12px;
  }
  /* K-9 follow-up: the link must not grow past its image, or the
     empty part of it navigates home invisibly (5.2px at 430px, 54.2px
     at 479px). flex-grow drops to 0; the shrink stays, because below
     ~430px the logo is what gives way. Nothing moves: the row's free
     space is simply taken by the quote button's existing
     `margin-left: auto` instead, a layout margin that was already
     there and is not interactive. Measured at 320, 360, 390, 430 and
     479px x all five text steps, menu open and closed: the chrome,
     the image, the quote, the phone, the hamburger, the header and
     the banner all keep identical boxes. */
  .mobile-chrome .logo-mobile {
    flex: 0 1 auto;
    min-width: 0;
  }
  .mobile-chrome .logo-mobile img {
    max-width: 100%;
    height: auto;
    /* K-9: below 480px the logo keeps its approved 48px and does not
       scale. K-7 has already reclaimed every spare pixel here for the
       open menu, and a taller logo takes that band back 1:1: measured
       142px -> 107px at full 1:1, which clips the 124.8px menu item's
       focus ring at 320px and 175%. It would also make the logo change
       size when the menu opens, which K-7 forbids. */
    max-height: 48px;
  }
  .mobile-chrome .btn-compact {
    flex: 0 0 auto;
    padding-inline: 10px;
    line-height: 1.2;
    text-align: center;
  }
}

/* Below 375px the one-line label would leave the logo too little room,
   so the full wording wraps compactly inside the button (GET INSTANT /
   QUOTE). The cap is in em, so it follows the label's own size. */
@media (max-width: 374px) {
  .mobile-chrome .btn-compact {
    white-space: normal;
    max-width: 9.5em;
    padding-block: 8px;
  }
  /* K-7 final pass: at the smallest phones, under enlarged text, while the
     menu is open, the top-level items' vertical padding tightens so the
     tallest two-line item and its whole focus ring fit the reclaimed
     menu area (142px at 320px and 175%). Text size and line-height are
     unchanged; every item keeps well over 44px. */
  html[data-a11y-text="scaled"] body.menu-open .mobile-menu-label {
    padding-block: 12px;
  }
  html[data-a11y-text="scaled"] .mobile-menu-label { overflow-wrap: anywhere; }
}

/* Scaled text in the one-row range (finding H-7): the 160px cap and nowrap
   made the full CTA wording spill out of the button from the first text
   step. Under the widget's scaled state only, the button grows to fit
   its label where the row has room and wraps where it does not. Normal
   text keeps the approved compact button. */
html[data-a11y-text="scaled"] .mobile-chrome .btn-compact {
  max-width: none;
  min-width: 0;
  white-space: normal;
  text-align: center;
}

/* Boundary defect found in the K-9 width sweep, and older than K-9: the
   banner link's hit area and the quote button overlapped by 2.2px at 150%
   and 3px at 175%, at every width from 480 to 580px.

   Measured cause. R-4 gives the banner link padding-block 11px with a
   matching negative margin, so its 44px hit box overhangs the banner's
   painted bottom by 3px. From 480px the chrome is one row again, and at
   150% and above the quote button's label wraps to three or four lines:
   98.3px at 150%, 148px at 175%. That is taller than the row's 100px
   minimum, so align-items: center has no slack left and the button's top
   lands exactly on the chrome's top edge, inside the banner link's
   overhang. Below 480px the two-row fallback already pads the chrome and
   the button sits 64px clear; from 600px the button is 70.7px, shorter
   than the row, and centring leaves 14.7px.

   The correction is the same device the two-row fallback uses, scoped to
   the one-row range and to the widget's scaled state, so the approved
   100% chrome is untouched: the row keeps its own padding, so a button
   taller than the row can never reach the chrome's edge. border-box
   means the 100px minimum absorbs the padding, so every state where the
   button already fits is unchanged. */
@media (min-width: 480px) {
  html[data-a11y-text="scaled"] .mobile-chrome {
    padding-block: 8px;
  }
}

/* Enlarged-text fallback, below 480px only: at 150% and above a single
   row cannot stay readable and collision-free, so under the widget's
   scaled state the chrome takes two controlled rows. Row 1 is the logo
   and the hamburger; row 2 is the quote and the phone, centred, the
   quote wrapping inside its button beside the phone. `order` is visual
   only; the markup and the focus order are unchanged. Normal text never
   uses this. */
@media (max-width: 479px) {
  html[data-a11y-text="scaled"] .mobile-chrome {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 12px;
    row-gap: 8px;
    padding-block: 8px;
  }
  /* K-9: the link sizes to the logo, and K-7's own spacer below takes
     the rest of row 1. It used to flex across the whole row, so at 390px
     and 150% the link was 310px wide around a 128.8px image: 181px of
     invisible clickable space that navigated home.

     An auto margin was tried first and measured wrong: the large
     flex-basis was not only filling the row, it was what forced the wrap
     into two rows at all. With the logo content-sized the margin only
     ever won 4px of its own line, and the hamburger left the right edge
     at 412 and 479px. The spacer carries the basis, so the row structure
     is exactly K-7's. */
  html[data-a11y-text="scaled"] .mobile-chrome .logo-mobile {
    order: 1;
    flex: 0 0 auto;
  }
  html[data-a11y-text="scaled"] .mobile-chrome .hamburger { order: 2; }
  html[data-a11y-text="scaled"] .mobile-chrome .btn-compact {
    order: 3;
    flex: 0 1 auto;
    margin-left: 0;
    max-width: calc(100% - 44px - 12px);
  }
  html[data-a11y-text="scaled"] .mobile-chrome > a.icon-btn { order: 4; }
  /* Ruling K-1 (pre-Stage-4 checkpoint): in this same state the
     announcement banner scrolls away and the chrome, with both action
     buttons, stays sticky. At 320px and 175% the whole header was 420px
     of a 568px screen; the chrome alone is 147px. The banner is still
     first at the top of the page. --banner-height is measured by the
     header script; without it (no JavaScript, so no widget either) the
     whole header sticks as before. 100% text never uses this. */
  html[data-a11y-text="scaled"] .site-header {
    top: calc(-1 * var(--banner-height, 0px));
  }
  /* Ruling K-7 (pre-Stage-4 checkpoint), in this same state and only
     while the menu is open: the widget launcher moves into the chrome's
     top row so the menu gets back the 88px band below it. At 320px and
     175% that band left 54px for 94px items and clipped their focus
     rings. The logo link, which filled the row, sizes to its image; an
     empty spacer (never interactive) takes the freed width, so the close
     button stays right and the quote and call keep row 2. The spacer's
     width comes from the measured logo width (--logo-width), and the
     launcher's position from the measured logo image and close button
     (--launcher-x, --launcher-y): no fixed offsets. Closing the menu,
     100% text or a viewport over 479px drops every rule at once. */
  html[data-a11y-text="scaled"] body.menu-open .mobile-chrome .logo-mobile {
    flex: 0 0 auto;
  }
  /* K-7's spacer. K-9 applies it throughout the scaled state, not only
     while the menu is open: it is what carries the row-filling basis, so
     the two-row structure and the hamburger's right edge are identical
     open and closed, with the logo link sized to its image in both. */
  html[data-a11y-text="scaled"] .mobile-chrome::after {
    content: "";
    order: 1;
    flex: 1 1 calc(100% - var(--logo-width, 0px) - 44px - 2 * 12px);
    pointer-events: none;
  }
  html[data-a11y-text="scaled"] body.menu-open #a11y-widget {
    left: var(--launcher-x, 12px);
    top: var(--launcher-y, 12px);
    bottom: auto;
  }
  html[data-a11y-text="scaled"] body.menu-open .mobile-menu-content {
    margin-bottom: 0;
  }
  /* At the top of the viewport the launcher's outward ring (and high
     contrast's 6px halo) ran ~2px off the screen. In this state only, the
     ring is drawn inward, between the contrast border and the dark face, in
     the secondary colour (9:1 on the face; high contrast's bright yellow on
     black there). The target stays 56x56 and does not move. */
  html[data-a11y-text="scaled"] body.menu-open .a11y-toggle:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: -6px;
    box-shadow: 0 6px 18px var(--color-shadow-strong);
  }
}

/* ADA-WCAG-LNK-003 / Part 17: 22px glyph inside a 44x44 tap target. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  color: var(--color-contrast);
  cursor: pointer;
}

.icon-btn .icon { width: 22px; height: 22px; }

/* Accessibility Skill Part 3.9: the glyph toggles must honour [hidden]
   so author CSS can never override the attribute. */
.icon-btn [hidden] { display: none; }

/* --- Mobile menu overlay --- */
/* The overlay starts below the WHOLE sticky header: announcement banner
   plus mobile chrome, not the chrome alone. Both wrap at narrow widths, so
   render_mobile_menu_script() measures .site-header on open and on resize
   and writes --header-offset. The fallback is the two pinned heights added
   together, for the moment before the first measurement. */
.mobile-menu-overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--header-offset, 148px);
  background: var(--color-neutral-light);
  color: var(--color-neutral-dark);
  display: flex;
  flex-direction: column;
  z-index: 90;
  transform: translateY(-8px);
  opacity: 0;
  transition: transform 250ms ease, opacity 250ms ease;
}

.mobile-menu-overlay[hidden] { display: none; }

.mobile-menu-overlay[aria-hidden="false"] {
  transform: translateY(0);
  opacity: 1;
}

/* Ruling K-5: the lifted widget launcher (its approved position, above
   the strip; see the menu-open rule below) sat over menu items, at 320px
   over SERVICE AREAS on first paint. The scroll area now ends a fixed
   band above the strip that is exactly the launcher's footprint, so no
   item is ever under it, before or after focus. The top spacer keeps the
   first item's focus ring inside the scroll area, which clipped its top
   edge, and the bottom one does the same for the last item (K-7 browser
   pass). Both are scrolled content, not padding, so they never push the
   strip off the screen. Pre-Stage-4 checkpoint. */
.mobile-menu-content {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 88px;
}

.mobile-menu-content::before,
.mobile-menu-content::after {
  content: "";
  display: block;
  height: 8px;
}

/* A focused item is scrolled just into view; the margin keeps its ring
   (which sits outside the item) inside the scroll area too. */
.mobile-menu-content a,
.mobile-menu-content button {
  scroll-margin-block: 8px;
}

.mobile-menu-items,
.mobile-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Part 18: 1px divider in border-subtle. See the module docstring on
   NAV-SPEC-003 and its literal hex. */
.mobile-menu-item {
  border-bottom: 1px solid var(--color-border-subtle);
}

.mobile-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 24px;
}

.mobile-menu-label {
  flex: 1 1 auto;
  /* Stage 5 (R-6, F-12): a flex item's default min-width is its content,
     so one long word (RESOURCES at 320px and 175%) pushed the chevron
     off screen. The label may shrink; under scaled text it may break
     the word (ADA-ABC-TXT-002), never at 100%. */
  min-width: 0;
  padding: 22px 0;
  color: var(--color-neutral-dark);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-size: calc(24px * var(--fs, 1));
  font-weight: 800;
  line-height: 1.2;
}

/* An item with no chevron ran its link to the screen edge, cutting off
   the right side of its focus ring (REVIEWS, K-7 browser pass). It keeps
   the chevron's own 16px inset instead. */
.mobile-menu-row > .mobile-menu-label:last-child { margin-right: 16px; }

/* Part 18: the current page's label turns primary, top level and sub.
   NAV-SPEC-007: so does a hovered one (Stage 4, D-3). */
.mobile-menu-item.active > .mobile-menu-row > .mobile-menu-label,
.mobile-submenu li.active > a,
.mobile-menu-label:hover,
.mobile-submenu a:hover {
  color: var(--color-primary);
}

.chevron-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  margin-right: 16px;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  color: var(--color-neutral-dark);
  cursor: pointer;
}

.chevron-btn .icon {
  width: 23px;
  height: 12px;
  transition: transform 150ms ease;
}

.chevron-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.chevron-btn[aria-expanded="true"] { color: var(--color-primary); }

.mobile-submenu[hidden] { display: none; }

/* Stage 5 (K5-03): submenu group labels, indented with the sub-items. */
.mobile-submenu-group > ul { list-style: none; margin: 0; padding: 0; }
.mobile-submenu-group-label {
  display: block;
  padding: 14px 24px 2px 44px;
  font-family: var(--font-heading);
  font-size: calc(12px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.mobile-submenu a {
  display: block;
  padding: 16px 24px 16px 44px;
  color: var(--color-neutral-dark);
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: calc(13px * var(--fs, 1));
  font-weight: 700;
}

/* Part 18: sticky floating CTA strip, two buttons only. */
.mobile-menu-floating-ctas {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px;
  background: var(--color-neutral-light);
  border-top: 1px solid var(--color-border-subtle);
}

/* Pre-Stage-4 checkpoint, strip shape. `flex: 1 1 0` forced two equal
   halves at every width, so below ~444px each label wrapped inside a
   near-square box and the phone number broke after its hyphen. Each
   button now sizes to its one-line label: the two share a row where both
   fit (Part 18, side by side) and each takes the full row where they do
   not. The number never breaks; labels are centred. */
.mobile-menu-floating-ctas .btn {
  flex: 1 1 auto;
  min-height: 56px;
  padding-inline: 16px;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}

.mobile-menu-floating-ctas .btn-secondary > span { white-space: nowrap; }

/* Stage 5 (K5-11, RULE-7): the strip's two buttons are the brand's own
   hierarchy, quote in primary and call in secondary, on the light strip.
   A third fill (neutral-dark) read as an unrelated black button on a navy
   and grey brand. The call button takes a primary edge and primary text
   so it reads on the light strip (ADA-WCAG-COL-003) and hovers to
   primary fill with secondary text, the light-container rule
   (BTN-KEVIN-HOV-001). */
.mobile-menu-floating-ctas .btn-secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
  gap: 8px;
}
.mobile-menu-floating-ctas .btn-secondary:hover {
  background: var(--color-primary);
  color: var(--color-secondary);
  border-color: var(--color-primary);
}

/* Enlarged text: the quote label may wrap, centred, rather than overflow
   the strip. The phone number above still never breaks. */
html[data-a11y-text="scaled"] .mobile-menu-floating-ctas .btn {
  white-space: normal;
  min-width: 0;
}

/* Part 18 gives ~10-11px here. Kevin's pre-Stage-4 ruling raised it to a
   comfortably readable size: 14px, the footer's hours line and the
   banner's size. */
.mobile-menu-floating-ctas .hours-line {
  flex: 1 0 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: calc(14px * var(--fs, 1));
  font-weight: 700;
  color: var(--color-neutral-dark);
  max-width: none;
}

.mobile-menu-floating-ctas .icon { width: 18px; height: 18px; }

/* ADA-WCAG-NAV-003: body scroll is locked while the overlay is open. */
body.menu-open { overflow: hidden; }

/* Accessibility Skill Part 5.1 fixes the widget bottom-left at z-index 1200,
   which puts it on top of the floating CTA strip while the menu is open. The
   stored asset is byte-for-byte untouched; this header-layer rule outranks it
   on specificity (id + class + element beats the asset's single class) and
   lifts the widget clear of the strip. It stops applying the moment the
   menu-open class comes off, so the widget returns to its own position. */
body.menu-open #a11y-widget {
  bottom: calc(var(--menu-cta-strip-height, 132px) + 16px);
}

/* --- Sticky row focus scrolling --- */
.header-inner > .logo,
.main-nav > ul > li > a,
.header-ctas a,
.mobile-chrome a,
.mobile-chrome button { scroll-margin-top: -100vh; }

/* --- Dropdown-only menu parents (menu.items[].dropdown_only) --- */
.nav-item > .nav-disclosure {
  display: inline-block;
  margin: 0;
  padding: 12px 0;
  background: none;
  border: 0;
  border-bottom: 6px solid transparent;
  color: var(--color-contrast);
  text-transform: uppercase;
  font-family: var(--font-heading);
  font-size: calc(20px * var(--fs, 1));
  font-weight: 700;
  line-height: inherit;
  white-space: nowrap;
  cursor: pointer;
  scroll-margin-top: -100vh;
}
.nav-item.has-dropdown:hover > .nav-disclosure,
.nav-item.has-dropdown:focus-within > .nav-disclosure,
.nav-item.is-open > .nav-disclosure { border-bottom-color: var(--color-contrast); }
.nav-item.is-open > .dropdown { opacity: 1; visibility: visible; }
/* Closed by its button or Escape while hovered or focused. */
.nav-item.is-collapsed > .dropdown { opacity: 0; visibility: hidden; }
.nav-item.is-collapsed > .nav-disclosure { border-bottom-color: transparent; }
@media (max-width: 1279px) {
  .nav-item > .nav-disclosure { font-size: calc(16px * var(--fs, 1)); }
}
.mobile-menu-toggle {
  margin: 0;
  background: none;
  border: 0;
  text-align: left;
  font-weight: 700;
  cursor: pointer;
}
/* --- Header call with pulse rings (layout.header_call: pulse) --- */
.header-ctas--pulse { align-items: center; gap: 28px; }
.header-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--color-contrast);
  text-decoration: none;
  white-space: nowrap;
  border-radius: 4px;
}
.header-call-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 50%;
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
}
.header-call-icon .icon { position: relative; z-index: 1; width: 22px; height: 22px; }
.header-call-icon::before,
.header-call-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: header-call-pulse 2.4s ease-out infinite;
}
.header-call-icon::after { animation-delay: 1.2s; }
@keyframes header-call-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.7); opacity: 0; }
}
.header-call-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.header-call .phone-number { font-size: calc(18px * var(--fs, 1)); font-weight: 800; letter-spacing: 0.01em; }
.header-call .hours-line { font-size: calc(12px * var(--fs, 1)); max-width: none; }
.header-call:hover .phone-number { text-decoration: underline; text-underline-offset: 3px; }
.header-call:focus-visible { outline: 3px solid var(--color-contrast); outline-offset: 6px; }
@media (max-width: 1279px) {
  .header-ctas--pulse { gap: 24px; }
  .header-call .phone-number { font-size: calc(16px * var(--fs, 1)); }
  .header-call .hours-line { font-size: calc(11px * var(--fs, 1)); }
}
/* Static under reduced motion: the OS preference or the widget's motion control. */
@media (prefers-reduced-motion: reduce) {
  .header-call-icon::before, .header-call-icon::after { animation: none; opacity: 0; }
  .header-call-icon::before { opacity: 0.45; transform: scale(1.3); }
}
html[data-a11y-motion="reduce"] .header-call-icon::before, html[data-a11y-motion="reduce"] .header-call-icon::after { animation: none; opacity: 0; }
html[data-a11y-motion="reduce"] .header-call-icon::before { opacity: 0.45; transform: scale(1.3); }
/* --- Mobile chrome: logo and MENU; bottom action bar (layout.mobile_header: action_bar) --- */
/* Kevin's final pass: a compact navy MENU button with a thin white border, white text and
   slim lines. Closed and open share one box (the X replaces the lines at the same size). */
.mobile-chrome .menu-box {
  flex-direction: column;
  gap: 2px;
  min-width: 48px;
  width: auto;
  height: 44px;
  margin-left: auto;
  padding: 3px 5px;
  background: var(--color-primary);
  border: 1px solid var(--color-contrast);
  border-radius: 4px;
  color: var(--color-contrast);
}
.mobile-chrome .menu-box .menu-word {
  font-family: var(--font-heading);
  font-size: calc(10px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}
.mobile-chrome .menu-box .icon { width: 36px; height: 16px; }
.mobile-chrome { min-height: 76px; }
@media (hover: hover) {
  .mobile-chrome .menu-box:hover { background: var(--color-contrast); color: var(--color-primary); }
}
.mobile-chrome .menu-box:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }

/* The bottom bar (Kevin's final reference): navy, a thin red top edge; on the left a navy
   circle with a thin red outline and a white outline handset, CALL US beside it; on the
   right the red quote button. Only the circle's rings move (the desktop pulse's timing). */
.mobile-action-bar { display: none; }
@media (max-width: 1023px) {
  .mobile-action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--color-primary);
    border-top: 3px solid var(--color-secondary);
    box-shadow: 0 -6px 18px var(--color-shadow-strong);
  }
  .mab-call {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding-right: 4px;
    color: var(--color-contrast);
    text-decoration: none;
    border-radius: 4px;
  }
  .mab-call-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    box-sizing: border-box;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-contrast);
  }
  .mab-call-circle .icon { position: relative; z-index: 1; width: 22px; height: 22px; }
  .mab-call-circle::before,
  .mab-call-circle::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--color-secondary);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    animation: mab-call-pulse 2.4s ease-out infinite;
  }
  .mab-call-circle::after { animation-delay: 1.2s; }
  .mab-call-label {
    font-family: var(--font-heading);
    font-size: calc(15px * var(--fs, 1));
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .mab-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 8px 12px;
    background: var(--color-secondary);
    border: 2px solid var(--color-secondary);
    border-radius: 4px;
    color: var(--color-neutral-dark);
    font-family: var(--font-heading);
    font-size: calc(16px * var(--fs, 1));
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
  }
  .mab-call:focus-visible, .mab-quote:focus-visible { outline: 3px solid var(--color-contrast); outline-offset: 3px; }
  /* The open menu's strip, in the bar's colours (Kevin's final pass): the quote red with
     navy text, the phone navy with white text and icon. Order, size and destinations unchanged. */
  .mobile-menu-floating-ctas .btn-primary,
  .mobile-menu-floating-ctas .btn-primary:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-neutral-dark); }
  .mobile-menu-floating-ctas .btn-secondary,
  .mobile-menu-floating-ctas .btn-secondary:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-contrast); }
  .mobile-menu-floating-ctas .btn-secondary .icon { color: var(--color-contrast); }
  /* The phone number at the mobile Contact page's call-button size (19px); the icon and the
     56px button are unchanged. */
  .mobile-menu-floating-ctas .btn-secondary { font-size: calc(19px * var(--fs, 1)); line-height: 19.2px; }
}
/* Where the phone and quote share a row, they keep the widths the 16px number gave them: the
   quote 24px wider than the phone, sharing the row. Below 466px the larger number needs more
   room than those widths allow, so there the two size to their text. Enlarged text keeps its
   own wrapping. */
@media (min-width: 466px) and (max-width: 1023px) {
  html:not([data-a11y-text="scaled"]) .mobile-menu-floating-ctas .btn-secondary { flex: 0 0 calc(50% - 18px); }
  html:not([data-a11y-text="scaled"]) .mobile-menu-floating-ctas .btn-primary { flex: 0 0 calc(50% + 6px); }
}
@media (max-width: 1023px) {
  /* Never two bars: the open menu carries its own call and quote strip. While a typing
     field has focus the bar steps aside for the field and the keyboard. */
  body.menu-open .mobile-action-bar { display: none; }
  body.form-focus .mobile-action-bar { visibility: hidden; transform: translateY(110%); }
  body.form-focus #a11y-widget { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  /* Page-end clearance: the footer's last row stays above the bar and the launcher.
     Specific enough to follow the footer layer's own rules. */
  html body .site-footer .footer-legal { padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px)); }
  html body .site-footer a, html body main a, html body main button, html body main input, html body main select, html body main textarea { scroll-margin-bottom: calc(calc(68px + 3px + env(safe-area-inset-bottom, 0px)) + 16px); }
  /* The launcher rides above the bar. */
  #a11y-widget { bottom: calc(calc(68px + 3px + env(safe-area-inset-bottom, 0px)) + 12px); }
}
@keyframes mab-call-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
@media (max-width: 1023px) and (hover: hover) {
  .mab-call:hover .mab-call-label { text-decoration: underline; text-underline-offset: 3px; }
  .mab-quote:hover { background: var(--color-contrast); border-color: var(--color-contrast); }
}
/* Static under reduced motion: the OS preference or the widget's motion control. */
@media (prefers-reduced-motion: reduce) {
  .mab-call-circle::before, .mab-call-circle::after { animation: none; opacity: 0; }
  .mab-call-circle::before { opacity: 0.45; transform: scale(1.25); }
}
html[data-a11y-motion="reduce"] .mab-call-circle::before, html[data-a11y-motion="reduce"] .mab-call-circle::after { animation: none; opacity: 0; }
html[data-a11y-motion="reduce"] .mab-call-circle::before { opacity: 0.45; transform: scale(1.25); }
@media (max-width: 767px) {
  #a11y-widget .a11y-panel { bottom: calc(calc(68px + 3px + env(safe-area-inset-bottom, 0px)) + 80px); max-height: calc(100vh - calc(68px + 3px + env(safe-area-inset-bottom, 0px)) - 200px); }
}
/* The smallest phones: both actions stay on one line and fully tappable. */
@media (max-width: 374px) {
  .mobile-action-bar { column-gap: 12px; padding-inline: 14px; }
  .mab-call { gap: 8px; }
  .mab-call-label { font-size: calc(14px * var(--fs, 1)); }
  .mab-quote { padding-inline: 8px; font-size: calc(14px * var(--fs, 1)); }
}
@media (max-width: 339px) {
  .mab-quote { font-size: calc(13px * var(--fs, 1)); }
}
/* --- Mobile submenus, large (layout.mobile_submenus: large) --- */
.mobile-submenu a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 24px 10px 40px;
  font-size: calc(20px * var(--fs, 1));
  line-height: 1.25;
}
.mobile-submenu { padding-bottom: 12px; }
.mobile-submenu-group-label { padding: 16px 24px 4px 40px; font-size: calc(13px * var(--fs, 1)); }
.mobile-menu-overlay .chevron-btn {
  width: 44px;
  height: 44px;
  border: 0;
  position: relative;
}
.mobile-menu-overlay .chevron-btn::before {
  content: "";
  position: absolute;
  width: 40px;
  height: 40px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.mobile-menu-overlay .chevron-btn .icon { position: relative; width: 17px; height: 9px; margin-top: 2px; }
.mobile-menu-overlay .chevron-btn[aria-expanded="true"] { color: var(--color-contrast); }
.mobile-menu-overlay .chevron-btn[aria-expanded="true"]::before { background: var(--color-primary); border-color: var(--color-primary); }
.mobile-menu-overlay .chevron-btn[aria-expanded="true"] .icon { margin-top: -2px; }
/* A toggle row: the label button fills the row up to the chevron, so the whole row opens it. */
.mobile-menu-row > .mobile-menu-toggle { align-self: stretch; padding-block: 22px; }
.mobile-menu-row > .mobile-menu-toggle[aria-expanded="true"] { color: var(--color-primary); }
/* --- Accessibility launcher on the right edge (layout.a11y_launcher: right) --- */
#a11y-widget { left: auto; right: 18px; }
#a11y-widget .a11y-panel { left: auto; right: 0; }
@media (max-width: 767px) {
  #a11y-widget { left: auto; right: 12px; }
  #a11y-widget .a11y-panel { left: 12px; right: 12px; }
}
/* The open menu: the launcher floats on the right above the call strip. The menu's
   scroll area runs down to the strip (no reserved full-width band, which hid expanded
   links and caught taps across the whole row); its own bottom padding lets the last item
   scroll clear of the launcher. */
body.menu-open #a11y-widget { left: auto; right: 12px; }
.mobile-menu-content { margin-bottom: 0; }
.mobile-menu-items { padding-bottom: 88px; }
/* --- Page-hero buttons hidden below the desktop breakpoint (layout.mobile_hero_actions: hidden) ---
   The bottom action bar carries Call Us and the quote; hiding the container drops its own margin
   and its flex gap, so the hero closes up and the next section rises. Desktop keeps the buttons. */
@media (max-width: 1023px) {
  html body section.hfb div.hfb-actions,
  html body section.sx-hero p.sx-hero-actions { display: none; }
}
/* --- Fluid page container (layout.container: fluid) --- */
:root { --fluid-max: 1920px; --fluid-gutter: max(20px, min(clamp(24px, 4.5vw, 104px), calc((100vw - 1000px) / 2))); }
@media (min-width: 1024px) {
  .header-inner { max-width: var(--fluid-max); padding-inline: var(--fluid-gutter); }
  .header-inner > .main-nav { margin-inline: auto; }
  .header-inner > .header-ctas { margin-left: 0; }
}

/* --- Hero --- */
/* --- Hero visibility --- */
.hero-desktop { display: none; }
.hero-mobile { display: block; }

@media (min-width: 768px) {
  .hero-desktop { display: block; }
  .hero-mobile { display: none; }
}

/* --- Hero section --- */
.hero {
  background: var(--color-primary);
  color: var(--color-contrast);
}

.hero .hero-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
}

.hero-desktop .hero-inner {
  padding: 48px 20px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 40px;
  align-items: center;
}

.hero-content { min-width: 0; }

/* HERO-SPEC-004 / 009: the H1 is the contrast colour. */
.hero h1 {
  color: var(--color-contrast);
  margin: 0 0 16px;
}

/* --- Hero taglines --- */
.hero .tagline-1,
.hero .tagline-2 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: calc(20px * var(--fs, 1));
  margin: 0 0 8px;
}

/* HERO-SPEC-005 / 010: tagline 1 breaks from the H1 in secondary. */
.hero .tagline-1 { color: var(--color-secondary); }

/* HERO-SPEC-006 / 011: tagline 2 returns to the H1 colour. */
.hero .tagline-2 {
  color: var(--color-contrast);
  margin-bottom: 24px;
}

@media (max-width: 767px) {
  .hero .tagline-1 {
    font-size: calc(18px * var(--fs, 1));
    margin-bottom: 16px;
  }
}

/* --- Hero image --- */
.hero-desktop { container-type: inline-size; }
.hero-image { min-width: 0; }
.hero-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.hero-desktop .hero-inner {
  grid-template-columns: minmax(0, 1fr) clamp(calc((100% - 40px) * 0.4), calc(377.6px + (100cqw - 1024px) * 122.4 / 116), 500px);
  padding-block: 31px;
}
.hero-desktop .hero-image {
  position: relative;
  align-self: stretch;
}
.hero-desktop .hero-image img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: 52% 50%;
}

/* --- Hero form --- */
.hero-form {
  background: var(--color-neutral-light);
  color: var(--color-primary);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin: 0;
}

/* Desktop: two field columns where the form is wide enough, one where
   it is not. Keeps the four-field ABC form out of a single tall stack
   (Part 11: the hero must not consume the whole viewport). */
@media (min-width: 768px) {
  .hero-desktop .hero-form {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }
}

.hero-form label:has(textarea),
.hero-form label:has(input[type="file"]),
.hero-form .hero-form-heading,
.hero-form .hero-form-copy,
.hero-form .btn,
.hero-form .hero-form-callback {
  grid-column: 1 / -1;
}

/* Stage 5 (K5-06): the form's own heading line and its supporting copy.
   Heading-font, bold, primary; not an H-level. The copy takes the label's
   size. The heading's margin closes the grid gap above the first field. */
.hero-form-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(22px * var(--fs, 1));
  font-weight: 800;
  line-height: 1.25;
  color: var(--color-primary);
}
.hero-form-copy {
  margin: -8px 0 0;
  font-family: var(--font-body);
  font-size: calc(15px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-primary);
}

/* Part 15: labels above fields. ADA-WCAG-FRM-001: visible and wrapping. */
.hero-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.hero-form label > span:first-child {
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: calc(15px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
}

/* ADA-WCAG-FRM-002 asterisk. Part 5 names required-field markers as
   secondary text on a light surface: secondary-on-light. */
.hero-form label > span:first-child > [aria-hidden="true"] {
  color: var(--color-secondary-on-light);
  margin-left: 2px;
}

/* HERO-SPEC-012: fields are white so they detach from their background. */
.hero-form input,
.hero-form select,
.hero-form textarea {
  background: var(--color-contrast);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  min-height: 44px;
  width: 100%;
  min-width: 0;
}

.hero-form textarea { resize: vertical; }

/* Stage 5 (K5-05): the file chooser is a real input; it keeps the field
   box, and its native button inherits the field's colours. */
.hero-form input[type="file"] {
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: calc(15px * var(--fs, 1));
  cursor: pointer;
}
.hero-form input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 6px 12px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: var(--color-neutral-light);
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.hero-form ::placeholder {
  color: var(--color-primary);
  opacity: 0.7;
}

.hero-form .btn {
  width: 100%;
  min-height: 44px;
}

/* HERO-SPEC-013: desktop submit fill is secondary (.btn-secondary). Text
   and edge are primary: HERO-SPEC-003 roles, ADA-WCAG-COL-003 edge. */
.hero-form .btn-secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* HERO-SPEC-028: mobile submit fill is primary (.btn-primary). Inside the
   white form it hovers to a filled secondary state, never to white. */
.hero-form .btn-primary {
  background: var(--color-primary);
  color: var(--color-contrast);
  border-color: var(--color-primary);
}

.hero-form .btn-primary:hover {
  background: var(--color-secondary);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* HERO-SPEC-024: the mobile form is centred with equal side margins
   (Part 19). */
.hero-mobile .hero-form {
  width: 100%;
  margin-inline: auto;
}

/* --- Hero callback --- */
.hero .link-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero .link-secondary .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--color-secondary);
}

.hero-form .hero-form-callback {
  justify-self: center;
  color: var(--color-secondary-on-light);
}

/* Part 5: every text CTA has a visible hover response. */
.hero-form .hero-form-callback:hover { color: var(--color-primary); }

.hero-ctas .link-secondary,
.hero-mobile-ctas .link-secondary {
  color: var(--color-secondary);
}

.hero-ctas .link-secondary:hover,
.hero-mobile-ctas .link-secondary:hover { color: var(--color-contrast); }

/* --- Hero CTAs without a form --- */
.hero-ctas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero-mobile-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.hero .btn-lg { padding: 18px 22px; }
.hero .btn-full { width: 100%; }

.hero-ctas .btn-secondary { color: var(--color-primary); }
.hero .hero-ctas .btn-secondary:hover {
  background: var(--color-contrast);
  color: var(--color-primary);
  border-color: var(--color-contrast);
}

.hero-mobile-ctas .btn-primary { border-color: var(--color-contrast); }
.hero .hero-mobile-ctas .btn-primary:hover {
  background: var(--color-contrast);
  color: var(--color-primary);
  border-color: var(--color-contrast);
}

/* --- Mobile hero --- */
.hero-mobile .hero-inner {
  padding: 24px 16px;
}

/* --- Hero: full_bleed_overlay (Candidate) --- */
/* Candidate implementation of hero.layout full_bleed_overlay (UD-074, UD-090); not Active, not a default, not generator-enforced. */
/* --- full_bleed_overlay: shared --- */
/* The section is the size container every geometry expression below reads (cqw). */
.hfo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
}
.hfo-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  padding: 24px 16px 32px;
}
.hfo-copy { min-width: 0; }
.hfo h1 { text-wrap: balance; }
/* UD-075 / SVP-SPEC-047: one contiguous phrase in a governed brand token (contrast asserted
   at build). Kept together at 100% text; under enlarged text it may wrap, never overflow. */
.hfo .hfo-h1-emphasis { color: var(--color-secondary); }
html:not([data-a11y-text]) .hfo .hfo-h1-emphasis { white-space: nowrap; }
.hfo .tagline-1 { text-wrap: balance; }
.hfo .tagline-2 { text-wrap: pretty; margin-bottom: 20px; }
.hfo-intro {
  margin: 0 0 20px;
  font-family: var(--font-body);
  font-size: calc(18px * var(--fs, 1));
  line-height: 1.55;
  color: var(--color-contrast);
  text-wrap: pretty;
}

/* UD-092: the governed call action, one tel: link. */
.hfo a.hfo-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(20px * var(--fs, 1));
  line-height: 1.25;
  color: var(--color-contrast);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hfo a.hfo-call:hover { color: var(--color-secondary); }
.hfo-call .icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-secondary); }
.hfo .hfo-call-label { color: var(--color-secondary); }
/* call_action: emergency: the governed number is one unbreakable unit at every width. */
.hfo .hfo-call-number { white-space: nowrap; }

/* UD-084: governed proof. The stars are aria-hidden; the figures are the text. */
.hfo-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
  margin: 0;
  font-family: var(--font-body);
  font-size: calc(16px * var(--fs, 1));
  line-height: 1.4;
  color: var(--color-contrast);
}
.hfo-proof strong { font-weight: 700; }
.hfo-proof .stars-empty svg, .hfo-proof .stars-fill svg { width: 18px; height: 18px; margin-right: 3px; }

/* SVP-SPEC-044: the action stack. Phones: full-width button, the phone link centred beneath. */
.hfo-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.hfo .hfo-primary-action { min-height: 52px; }
.hero .hfo-primary-action:hover {
  background: var(--color-contrast);
  color: var(--color-primary);
  border-color: var(--color-contrast);
}
.hfo a.hfo-call--stack {
  justify-content: center;
  margin-bottom: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: calc(17px * var(--fs, 1));
  text-underline-offset: 3px;
}
.hfo-call--stack .icon { width: 18px; height: 18px; }

/* The governed quote form as a card. Fields, labels, buttons and behaviour are the component's. */
.hfo .hero-form {
  border-radius: 12px;
  padding: 20px;
  gap: 12px;
  box-shadow: 0 16px 40px var(--color-shadow-strong);
}
.hfo .hero-form input:not([type="file"]), .hfo .hero-form select {
  min-height: 48px;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: calc(16px * var(--fs, 1));
}
.hfo .hero-form textarea {
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: calc(16px * var(--fs, 1));
}
.hfo .hero-form .btn { min-height: 52px; }
.hfo .hero-form-heading { font-size: calc(23px * var(--fs, 1)); }

/* SVP-SPEC-046 (UD-076): below the collapse the content sits on solid brand colour and the
   photograph follows as a full-width band; nothing is placed over it. It keeps its own shape,
   never taller than a 4:3 landscape frame of the band or the tablet cap. */
.hfo-media { position: relative; }
.hfo-img {
  display: block;
  width: 100%;
  height: min(calc(100cqw * var(--hfo-img-h) / var(--hfo-img-w)), 75cqw, 480px);
  max-width: none;
  object-fit: cover;
  object-position: var(--hfo-fp-phone, 50% 50%);
}
/* UD-081: mirroring is explicit input and CSS only; the asset and its alt text are unchanged. */
.hfo-img--mirrored { transform: scaleX(-1); }

/* --- full_bleed_overlay: phone and tablet --- */
@media (max-width: 1023px) {
  .hfo--quote-form a.hfo-call:not(.hfo-call--stack) {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 56px;
    padding: 10px 16px;
    margin-bottom: 14px;
    border: 2px solid var(--color-contrast);
    border-radius: 4px;
    text-decoration: none;
    font-size: calc(19px * var(--fs, 1));
  }
  .hfo--quote-form a.hfo-call:not(.hfo-call--stack):hover {
    background: var(--color-contrast);
    color: var(--color-primary);
  }
  .hfo--quote-form a.hfo-call:not(.hfo-call--stack):hover .icon,
  .hfo--quote-form a.hfo-call:not(.hfo-call--stack):hover .hfo-call-label { color: var(--color-primary); }
  .hfo--quote-form .hfo-proof { justify-content: center; margin-bottom: 24px; }
  .hfo-proof .stars-empty svg, .hfo-proof .stars-fill svg { width: 16px; height: 16px; margin-right: 2px; }
  .hfo--quote-form .hfo-copy:not(:has(.hfo-proof)) { margin-bottom: 24px; }
}
@media (max-width: 767px) {
  /* call_action: emergency on phones: the bordered call button sets the governed label and
     the number as two intentional lines beside the icon, never a wrap inside the number.
     The label line is 16px so it stays one line in a 320px button (measured: 203px of 220px
     beside the icon; 241px at 19px). The button may wrap, so under enlarged text the text
     block moves below the icon rather than letting the unbreakable number overrun it. */
  .hfo--quote-form a.hfo-call:not(.hfo-call--stack):has(.hfo-call-text) {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .hfo--quote-form a.hfo-call:not(.hfo-call--stack) .hfo-call-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 2px;
    text-align: left;
  }
  .hfo--quote-form a.hfo-call:not(.hfo-call--stack) .hfo-call-label { font-size: calc(16px * var(--fs, 1)); }
  /* SVP-SPEC-041: the action stack's phone content is centred; the quote card's is not. */
  .hfo--action-stack .hfo-copy { text-align: center; }
  .hfo--quote-form .sp-breadcrumb--inside-hero ol { justify-content: flex-start; }
  .hfo--service .sp-breadcrumb--inside-hero { margin: -10px 0 6px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hfo-inner { padding: 32px 20px 36px; }
  .hfo .hero-form { padding: 24px; }
  .hfo-img { object-position: var(--hfo-fp-tablet, var(--hfo-fp-desktop, 50% 50%)); }
}
@media (min-width: 768px) {
  .hfo-actions { align-items: flex-start; gap: 16px; }
  .hfo a.hfo-call--stack { justify-content: flex-start; }
}

/* --- full_bleed_overlay: desktop composition and SH-11 height --- */
@media (min-width: 1024px) {
  .hfo:not(.hfo--mobile-twin) {
    --hfo-text-w: 520px;
    --hfo-form-w: 360px;
    --hfo-fx: var(--hfo-fx-desktop, 0.5);
    /* The page shell's content edges (the header's), from the site width. */
    --hfo-shell-left: max(20px, 50cqw - var(--site-width) / 2 + 20px);
    --hfo-shell-right: min(100cqw - 20px, 50cqw + var(--site-width) / 2 - 20px);
    --hfo-text-end: calc(var(--hfo-shell-left) + var(--hfo-text-w));
    --hfo-form-left: calc(var(--hfo-shell-right) - var(--hfo-form-w));
    /* The photo box: the focal x lands on the anchor; its left edge stays under solid colour. */
    --hfo-photo-left: clamp(0px, (var(--hfo-anchor) - var(--hfo-fx) * 100cqw) / (1 - var(--hfo-fx)), var(--hfo-text-end));
  }
  .hfo:not(.hfo--mobile-twin).hfo--quote-form { --hfo-anchor: calc((var(--hfo-text-end) + var(--hfo-form-left)) / 2); }
  .hfo:not(.hfo--mobile-twin).hfo--action-stack { --hfo-anchor: calc((var(--hfo-text-end) + 100cqw) / 2); }
  .hfo:not(.hfo--mobile-twin) .hfo-media {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  .hfo:not(.hfo--mobile-twin) .hfo-img {
    position: absolute;
    top: 0;
    right: 0;
    left: var(--hfo-photo-left);
    width: calc(100cqw - var(--hfo-photo-left));
    height: 100%;
    object-position: var(--hfo-fp-desktop, 50% 50%);
  }
  /* SH-2 / SH-3: solid brand colour under every line of copy, then the fade. */
  .hfo:not(.hfo--mobile-twin) .hfo-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .hfo:not(.hfo--mobile-twin).hfo--quote-form .hfo-media::after {
    background: linear-gradient(90deg,
      var(--color-primary) 0,
      var(--color-primary) var(--hfo-text-end),
      color-mix(in srgb, var(--color-primary) 86%, transparent) calc(var(--hfo-text-end) + 40px),
      color-mix(in srgb, var(--color-primary) 42%, transparent) calc(var(--hfo-form-left) - 30px),
      color-mix(in srgb, var(--color-primary) 22%, transparent) var(--hfo-form-left),
      color-mix(in srgb, var(--color-primary) 16%, transparent) 100%);
  }
  .hfo:not(.hfo--mobile-twin).hfo--action-stack .hfo-media::after {
    background: linear-gradient(90deg,
      var(--color-primary) 0,
      var(--color-primary) var(--hfo-text-end),
      color-mix(in srgb, var(--color-primary) 80%, transparent) calc(var(--hfo-text-end) + 30px),
      color-mix(in srgb, var(--color-primary) 22%, transparent) calc(var(--hfo-text-end) + 140px),
      color-mix(in srgb, var(--color-primary) 8%, transparent) calc(var(--hfo-text-end) + 260px),
      color-mix(in srgb, var(--color-primary) 6%, transparent) 100%);
  }
  /* SH-10: the copy column aligns with the page shell. SH-11: a minimum height that the
     content sets and the open photo region raises; capped by the photograph itself. */
  .hfo:not(.hfo--mobile-twin) .hfo-inner {
    max-width: var(--site-width);
    padding: 48px 20px 56px;
    display: grid;
    align-items: center;
    align-content: center;
    column-gap: 48px;
    min-height: min(
      calc((100cqw - var(--hfo-text-end)) / 1.4),
      calc((100cqw - var(--hfo-photo-left)) * var(--hfo-img-h) / var(--hfo-img-w)),
      calc(var(--hfo-img-h) * 1px));
  }
  .hfo:not(.hfo--mobile-twin).hfo--quote-form .hfo-inner {
    grid-template-columns: minmax(0, var(--hfo-text-w)) var(--hfo-form-w);
    justify-content: space-between;
  }
  .hfo:not(.hfo--mobile-twin).hfo--action-stack .hfo-inner {
    grid-template-columns: minmax(0, var(--hfo-text-w));
    justify-content: start;
  }
  .hfo:not(.hfo--mobile-twin) h1 { margin: 0 0 20px; }
  .hfo:not(.hfo--mobile-twin) .hfo-intro { font-size: calc(20px * var(--fs, 1)); max-width: 30em; }
  .hfo:not(.hfo--mobile-twin) .tagline-1, .hfo:not(.hfo--mobile-twin) .tagline-2 { max-width: 30em; }
  .hfo:not(.hfo--mobile-twin) .hero-form { padding: 28px; gap: 14px; }
  .hfo:not(.hfo--mobile-twin) .hero-form-heading { font-size: calc(26px * var(--fs, 1)); }
  .hfo:not(.hfo--mobile-twin) .sp-breadcrumb--inside-hero { margin-bottom: 22px; }
  /* High contrast: the photograph and its gradient drop out behind the desktop copy. */
  html[data-a11y-contrast="high"] .hfo:not(.hfo--mobile-twin) .hfo-media { display: none; }
}
@media (min-width: 1280px) {
  .hfo:not(.hfo--mobile-twin) {
    --hfo-text-w: 560px;
    --hfo-form-w: 380px;
    --hfo-fx: var(--hfo-fx-ultrawide, var(--hfo-fx-desktop, 0.5));
  }
  .hfo:not(.hfo--mobile-twin) .hfo-img { object-position: var(--hfo-fp-ultrawide, var(--hfo-fp-desktop, 50% 50%)); }
}

/* Home hero compact quote form (hero.desktop.form.layout: compact): placeholders in place of
   visible text-field labels (the labels stay, visually hidden), Phone and Email side by side
   where the form is wide enough, tighter spacing and a short message box. Home hero only;
   emitted only when the homepage form asks for it. */
.hfo--homepage .hero-form.hero-form--compact { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.hfo--homepage .hero-form--compact > label { grid-column: 1 / -1; gap: 4px; }
.hfo--homepage .hero-form--compact .hero-form-heading { margin-bottom: 2px; }
.hfo--homepage .hero-form--compact textarea { min-height: 76px; }
.hfo--homepage .hero-form--compact .btn { margin-top: 4px; }
@media (min-width: 480px) {
  .hfo--homepage .hero-form.hero-form--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hfo--homepage .hero-form--compact > label.hero-field--half { grid-column: auto; }
}
.hfo--homepage.hfo--mobile-twin .hfo-copy { text-align: center; }

/* --- Hero: horizontal form band (hero.composition: form_band) --- */
/* hero.composition: form_band (Kevin's homepage concept, 2026-10-07). */
.hfb { position: relative; overflow: hidden; background: var(--color-primary); color: var(--color-contrast); }
.hfb, .hfb-quote { --hfb-gutter: var(--fluid-gutter, clamp(24px, 4.5vw, 104px)); --hfb-max: var(--fluid-max, 1920px); }
.hfb-media { position: absolute; top: 0; right: 0; bottom: 0; background: var(--color-primary); left: min(40%, calc(max(0px, (100% - var(--hfb-max)) / 2) + var(--hfb-gutter) + var(--hfb-copy) - 40px)); }
.hfb-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hfb-fp-desktop, 60% 55%); }
.hfb-media::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 27%; z-index: 1; background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 8%, color-mix(in srgb, var(--color-primary) 60%, transparent) 50%, transparent 100%); }
.hfb-media::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.hfb-inner { position: relative; z-index: 2; width: 100%; max-width: var(--hfb-max); margin-inline: auto; padding: 64px var(--hfb-gutter) 104px; display: flex; flex-direction: column; gap: 44px; }
.hfb { --hfb-copy: 500px; }
.hfb--page { --hfb-copy: 560px; }
.hfb-copy { max-width: var(--hfb-copy); display: flex; flex-direction: column; gap: 18px; }
.hfb--page .hfb-inner { padding-top: 48px; }
.hfb--page .sp-breadcrumb--inside-hero { margin: 0 0 2px; }
.hfb-brand { margin: 0; display: flex; align-items: center; gap: 14px; font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.02em; line-height: 1.3; color: var(--color-contrast); font-size: calc(17px * var(--fs, 1)); }
.hfb-mark { display: block; height: 58px; width: auto; flex: none; }
.hfb h1 { margin: 0; font-family: var(--font-heading); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; color: var(--color-contrast); text-wrap: balance; font-size: calc(46px * var(--fs, 1)); }
.hfb h1 .hfo-h1-emphasis { color: var(--color-secondary); }
.hfb-tagline { margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--color-secondary); font-size: calc(20px * var(--fs, 1)); }
.hfb-sub { margin: 0; font-weight: 500; line-height: 1.5; color: var(--color-contrast); font-size: calc(17px * var(--fs, 1)); }
.hfb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.hfb-actions .btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; }
.hfb-call { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; box-sizing: border-box; border: 2px solid var(--color-contrast); border-radius: 4px; color: var(--color-contrast); font-family: var(--font-heading); font-weight: 700; text-decoration: none; font-size: calc(17px * var(--fs, 1)); }
.hfb-call .icon { width: 20px; height: 20px; flex: none; color: var(--color-secondary); }
.hfb-call:hover { background: var(--color-contrast); color: var(--color-primary); }
.hfb-call:hover .icon { color: var(--color-primary); }
.hfb-trust { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hfb-trust li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px; background: var(--color-contrast); border-radius: 6px; border-top: 4px solid var(--color-secondary); color: var(--color-primary); font-family: var(--font-heading); font-weight: 800; line-height: 1.25; letter-spacing: 0.02em; text-transform: uppercase; font-size: calc(15px * var(--fs, 1)); }
.hfb-icon { width: 34px; height: 34px; flex: none; color: var(--color-secondary); }
.hfb-trust li.hfb-trust-linked { padding: 0; }
.hfb-card-link { display: flex; align-items: center; gap: inherit; width: 100%; height: 100%; padding: 18px; box-sizing: border-box; border-radius: 0 0 6px 6px; color: var(--color-primary); text-decoration: none; transition: background-color 150ms ease; }
.hfb-card-arrow { width: 18px; height: 18px; flex: none; margin-left: auto; color: var(--color-secondary); transition: transform 150ms ease; }
.hfb-card-link:hover { background: color-mix(in srgb, var(--color-secondary) 10%, var(--color-contrast)); }
.hfb-card-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.hfb-card-link:hover .hfb-card-arrow { transform: translateX(3px); }
.hfb-card-link:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hfb-card-link, .hfb-card-arrow { transition: none; } }
.hfb-quote { position: relative; z-index: 3; width: 100%; max-width: var(--hfb-max); margin: -72px auto 0; padding: 0 var(--hfb-gutter); }
.hfb-quote-card { background: var(--color-contrast); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 16%, transparent); border-radius: 8px; box-shadow: 0 10px 28px var(--color-shadow-strong); padding: 28px 32px 32px; }
.hfb-quote-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 20px; }
.hfb-quote-head h2 { margin: 0; font-family: var(--font-heading); font-weight: 800; line-height: 1.2; color: var(--color-primary); font-size: calc(26px * var(--fs, 1)); }
.hfb-quote-note { margin: 0; font-weight: 500; color: var(--color-primary); font-size: calc(14px * var(--fs, 1)); }
.hero-form.hfb-form { background: transparent; padding: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 20px; align-items: end; }
.hfb-form input, .hfb-form select { min-height: 52px; }
.hero-form.hfb-form .btn { grid-column: auto; width: 100%; min-height: 52px; height: 52px; padding-block: 0; margin: 0; }
.hfb-brand span { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .hfb-trust li { gap: 10px; padding: 14px 12px; letter-spacing: 0; font-size: calc(13px * var(--fs, 1)); }
  .hfb-card-link { padding: 14px 12px; }
  .hfb-icon { width: 26px; height: 26px; }
}
@media (max-width: 1023px) {
  .hfb, .hfb-quote { --hfb-gutter: 24px; }
  .hfb-media { position: relative; left: 0; width: 100%; height: clamp(250px, 44vw, 420px); }
  .hfb-img { object-position: var(--hfb-fp-tablet, var(--hfb-fp-desktop, 50% 55%)); }
  .hfb-media::before { top: auto; bottom: 0; width: 100%; height: 34%; left: 0; background: linear-gradient(0deg, var(--color-primary) 0%, transparent 100%); }
  .hfb-inner { padding: 0 var(--hfb-gutter) 96px; gap: 28px; margin-top: -8px; }
  .hfb--page .hfb-inner { padding-top: 0; }
  .hfb-copy { max-width: 640px; }
  .hfb-br { display: none; }
  .hfb-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hero-form.hfb-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .hfb-media { height: 236px; overflow: hidden; }
  .hfb-img { object-position: var(--hfb-fp-phone, var(--hfb-fp-tablet, 50% 55%)); transform: scale(1.2); transform-origin: var(--hfb-fp-phone, 50% 55%); }
  .hfb, .hfb-quote { --hfb-gutter: 16px; }
  .hfb-inner { padding: 0 var(--hfb-gutter) 72px; gap: 20px; }
  .hfb-copy { align-items: center; text-align: center; gap: 10px; margin-inline: auto; }
  .hfb-brand { flex-wrap: wrap; justify-content: center; gap: 6px 10px; font-size: calc(15px * var(--fs, 1)); }
  .hfb-mark { height: 32px; }
  .hfb h1 { font-size: calc(32px * var(--fs, 1)); line-height: 1.12; }
  .hfb-tagline { font-size: calc(17px * var(--fs, 1)); }
  .hfb-sub { font-size: calc(15px * var(--fs, 1)); }
  .hfb-actions { flex-direction: column; align-self: stretch; gap: 10px; margin-top: 4px; }
  .hfb-actions .btn, .hfb-call { width: 100%; }
  .hfb-trust { gap: 8px; }
  .hfb-trust li { gap: 8px; padding: 10px; border-top-width: 3px; letter-spacing: 0; font-size: calc(12px * var(--fs, 1)); }
  .hfb-card-link { padding: 10px; }
  .hfb-card-arrow { width: 14px; height: 14px; }
  .hfb-icon { width: 22px; height: 22px; }
  .hfb-quote { margin-top: -52px; }
  .hfb-quote-card { padding: 20px 16px; }
  .hfb-quote-head { margin-bottom: 14px; }
  .hfb-quote-head h2 { font-size: calc(22px * var(--fs, 1)); }
  .hero-form.hfb-form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hfb-form input, .hfb-form select, .hero-form.hfb-form .btn { min-height: 48px; }
  .hero-form.hfb-form .btn { height: auto; padding-block: 12px; }
}
@media (max-width: 359px) {
  .hfb h1 { font-size: calc(28px * var(--fs, 1)); }
  .hfb-trust { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .hfb-trust li { padding: 9px 12px; }
  .hfb-card-link { padding: 9px 12px; }
}
html[data-a11y-text="scaled"] .hfb-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html[data-a11y-text="scaled"] .hero-form.hfb-form { grid-template-columns: minmax(0, 1fr); }

/* --- Trust bar --- */
/* --- Trust bar section --- */
.trust-bar {
  background: var(--surface-default);
  color: var(--color-neutral-dark);
  font-family: var(--font-body);
}

.trust-bar-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding: 56px 20px;
}

/* --- Trust bar heading --- */
.trust-bar h2 {
  font-family: var(--font-heading);
  font-size: calc(32px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-neutral-dark);
  margin: 0 0 20px;
  text-align: center;
}

.trust-bar-subheading {
  font-size: calc(17px * var(--fs, 1));
  font-weight: 400;
  color: var(--color-neutral-dark);
  text-align: center;
  margin: -8px 0 0;
}

/* --- Trust bar rating row --- */
/* Equal-width cells, one per platform (the markup sets --rating-cols),
   so the separators fall evenly and no tile looks offset. */
.trust-bar-ratings {
  display: grid;
  grid-template-columns: repeat(var(--rating-cols, 3), minmax(0, 240px));
  justify-content: center;
  padding: 20px 0;
  margin: 16px 0 24px;
}

/* Each tile centres its badge-and-information group in its cell, and
   the platform name, score, stars and count centre on one axis. The
   same rules for every platform. */
.rating-tile {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "icon name" "icon value" "icon stars" "icon count";
  justify-content: center;
  justify-items: center;
  column-gap: 12px;
  align-items: center;
  padding: 4px 16px;
  min-width: 0;
  text-align: center;
}

.rating-tile + .rating-tile { border-left: 1px solid var(--color-border-subtle); }

.platform-icon {
  grid-area: icon;
  width: 32px;
  height: 32px;
  max-width: none;  /* the global svg{max-width:100%} squeezed it to 18px */
  font-family: var(--font-heading);
}

/* The visible platform name is the primary identification; the
   lettered badge beside it is a generic mark. */
.rating-platform {
  grid-area: name;
  font-family: var(--font-heading);
  font-size: calc(15px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-dark);
}

.rating-value {
  grid-area: value;
  font-family: var(--font-heading);
  font-size: calc(28px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-neutral-dark);
}

.rating-tile .rating-stars { grid-area: stars; }

.rating-count {
  grid-area: count;
  font-size: calc(15px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-neutral-dark);
}

/* ADA-WCAG-IMG-003 star groups. The filled row is clipped to the rating;
   stars are graphics in --color-rating (Stage 5, RULE-2: a gold measured
   to 3:1 on the light surfaces, never a grey that reads as empty), and
   always sit next to the rating number (ADA-WCAG-COL-004). */
.rating-stars,
.review-stars {
  position: relative;
  display: inline-block;
  line-height: 0;
  white-space: nowrap;
}

.stars-empty svg,
.stars-fill svg {
  width: 16px;
  height: 16px;
  margin-right: 2px;
}

.stars-empty svg path {
  fill: none;
  stroke: var(--color-rating);
  stroke-width: 1.6;
}

.stars-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--fill, 100%);
  overflow: hidden;
}

.stars-fill svg path { fill: var(--color-rating); }

@media (max-width: 767px) {
  .trust-bar-ratings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 16px;
  }
  .trust-bar-ratings.ratings-many { grid-template-columns: minmax(0, 1fr); }
  .rating-tile { padding: 4px 8px; }
  .rating-tile + .rating-tile { border-left: 0; }
  /* A lone final tile (3 platforms) spans the row and centres beneath
     the pair above it, instead of sitting in the left column. */
  .trust-bar-ratings:not(.ratings-many) > .rating-tile:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Below 375px a two-column cell is ~140px, and the badge beside the
   stack needs ~138px of content: the grid squeezed the badge and
   clipped the star row. There the badge sits above the same centred
   stack. */
@media (max-width: 374px) {
  .rating-tile {
    grid-template-columns: auto;
    grid-template-areas: "icon" "name" "value" "stars" "count";
    row-gap: 2px;
  }
}

/* Scaled text on mobile: two columns cannot hold a platform name at 150%
   and above at 320-360px ("Facebook" outgrows its ~136px column and the
   tiles collide), so the row stacks to one centred column. Normal text
   keeps the two-column layout above. */
@media (max-width: 767px) {
  html[data-a11y-text="scaled"] .trust-bar-ratings { grid-template-columns: minmax(0, 1fr); }
}

/* --- Trust bar pull-quote --- */
.trust-bar-pullquote {
  max-width: 820px;
  margin: 0 auto 32px;
  text-align: center;
}

.trust-bar-pullquote p {
  font-family: var(--font-body);
  font-size: calc(22px * var(--fs, 1));
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-neutral-dark);
  margin: 0;
}

.trust-bar-pullquote strong { font-weight: 700; }

.trust-bar cite {
  display: block;
  font-style: normal;
  font-size: calc(15px * var(--fs, 1));
  font-weight: 400;
  color: var(--color-neutral-dark);
  opacity: 0.8;
}

.trust-bar-pullquote cite { margin-top: 12px; }

@media (max-width: 767px) {
  .trust-bar-pullquote p {
    font-size: calc(20px * var(--fs, 1));
  }
}

/* --- Trust bar review cards --- */
.review-card {
  background: var(--surface-accent);
  border-radius: 4px;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.review-card > * {
  padding-inline: 15px;
  margin: 0;
}

/* The star row's filled layer is absolutely positioned against the padding
   box, so the row takes its 15px inset as margin, not padding; otherwise the
   fill sits 15px off the outline row. */
.review-card > .review-stars {
  padding-inline: 0;
  margin-inline: 15px;
  align-self: flex-start;
}

/* Stage 5 (register R-5, ADA-WCAG-COL-004): a card's stars sit beside their
   number, as the rating tiles' do, so the score is never colour and shape
   alone. The row is one flex line; the number is body-sized and bold. */
.review-card > .review-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 0;
  margin-inline: 15px;
}
.review-rating .review-stars { margin: 0; }
.review-rating-value {
  font-family: var(--font-heading);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 700;
  line-height: 1;
  color: var(--color-neutral-dark);
}

/* TRUST-SPEC-020 to 026: the card body. */
.review-text {
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-neutral-dark);
  background: transparent;
  padding-inline: 15px;
  flex: 1 1 auto;
}

/* Part 26: the first sentence in bold for scannability. */
.review-text strong { font-weight: 700; }

.review-card cite { margin-top: auto; }

/* --- Trust bar carousel --- */
.trust-bar-carousel { position: relative; }

.carousel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  position: relative;
}

.carousel-track::-webkit-scrollbar { display: none; }

.carousel-track > .review-card {
  flex: 0 0 calc((100% - 2 * 24px) / 3);
  scroll-snap-align: start;
}

@media (max-width: 767px) {
  .carousel-track > .review-card { flex-basis: 100%; }
}

/* Scaled text on tablet (768-1023px): three cards leave ~196px of text
   column, and at 150% and above a long word no longer fits it. Two per
   view there; desktop keeps Part 26's three. The script measures cards
   per view, so positions and dots follow. */
@media (min-width: 768px) and (max-width: 1023px) {
  html[data-a11y-text="scaled"] .carousel-track > .review-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

/* ADA-ABC-TXT-002: under scaled text only, a word longer than the line may
   break rather than clip. At 100% the brand rule against broken words holds. */
html[data-a11y-text="scaled"] .review-text { overflow-wrap: break-word; }

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

/* ADA-WCAG-LNK-003: controls are real targets; the dot is a 10px mark
   inside a 24px button. */
.carousel-pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--color-neutral-dark);
  border-radius: 50%;
  background: transparent;
  color: var(--color-neutral-dark);
  cursor: pointer;
}

.carousel-pause:hover { background: var(--color-secondary); }
.carousel-pause .icon { width: 18px; height: 18px; }
.carousel-pause [hidden] { display: none; }

.carousel-dots { display: flex; flex-wrap: wrap; justify-content: center; }

.carousel-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Inactive dots are outlined, the active one filled: state is shape as
   well as aria-current, never colour alone (ADA-WCAG-COL-004). */
.carousel-dot::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-neutral-dark);
  box-sizing: border-box;
}

.carousel-dot[aria-current="true"]::before { background: var(--color-neutral-dark); }

/* --- Trust bar awards --- */
.awards-track {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  /* The column count is the number of awards (capped at four), not
     auto-fit, which wrapped four awards to 3+1 at 1023px. */
  grid-template-columns: repeat(var(--award-cols, 4), minmax(0, 220px));
  justify-content: center;
  gap: 32px;
}

.award { min-width: 0; }

.trust-bar .award a {
  display: block;
  min-height: 44px;
}

.award img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 26 / 11;
  object-fit: contain;
}

@media (max-width: 767px) {
  .awards-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .awards-track > .award:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 16px) / 2);
  }
}

/* --- Trust bar CTAs --- */
.trust-bar-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.trust-bar .link-see-more,
.trust-bar .btn-review-write {
  background: transparent;
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
  text-decoration: none;
  gap: 8px;
  min-height: 44px;
  line-height: 1.2;
}

.trust-bar .link-see-more:hover,
.trust-bar .btn-review-write:hover {
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
}

.trust-bar .link-see-more .icon { width: 18px; height: 18px; }

/* --- Services --- */
/* --- Services section --- */
.services-section {
  color: var(--color-neutral-dark);
  font-family: var(--font-body);
}

.services-type-a { background: var(--surface-default); }
.services-type-b { background: var(--surface-accent); }
.services-type-c { background: var(--surface-default); }

.services-section-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding: 72px 20px;
}

/* --- Services heading --- */
.services-section h2 {
  font-family: var(--font-heading);
  font-size: calc(48px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-neutral-dark);
  margin: 0 0 24px;
}

/* Part 29: Type A's header is centred, as the trust bar's is. Types B
   and C align to their text column. */
.type-a .services-header { text-align: center; }

/* --- Services supporting copy --- */
.services-supporting-copy,
.type-b-paragraph {
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-neutral-dark);
  margin: 0;
}

/* --- Services Type A --- */
.type-a .services-header { margin-bottom: 48px; }

/* --- Services grid --- */
.services-grid {
  display: grid;
  column-gap: 4%;
  row-gap: 48px;
}

.grid-count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-count-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Five cards: two in row 1, three in row 2, on six equal tracks. */
.grid-count-5 > .service-card { grid-column: span 2; }
.grid-count-5 > .service-card:nth-child(-n + 2) { grid-column: span 3; }

/* Tablet: every grid at two columns, a lone final card centred beneath the
   pair above. Three columns leave ~167px of text at 768px, too narrow for a
   12-letter H3 at 32px, and Part 32 forbids breaking it. */
@media (min-width: 768px) and (max-width: 1023px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* :nth-child(n) lifts this reset over the five-card span rules (0,3,0);
     without it five cards kept three implicit columns at 768px. */
  .services-grid > .service-card:nth-child(n) { grid-column: auto; }
  .services-grid > .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 4%) / 2);
  }
}

/* Scaled text (widget): tablet grids go to one column; desktop grids of
   three tracks go to two. Normal text keeps the Part 28 layouts. */
@media (min-width: 768px) and (max-width: 1023px) {
  html[data-a11y-text="scaled"] .services-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-a11y-text="scaled"] .services-grid > .service-card:last-child:nth-child(odd) {
    grid-column: auto;
    width: auto;
  }
}

@media (min-width: 1024px) {
  html[data-a11y-text="scaled"] .grid-count-3,
  html[data-a11y-text="scaled"] .grid-count-5,
  html[data-a11y-text="scaled"] .grid-count-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-a11y-text="scaled"] .grid-count-5 > .service-card { grid-column: auto; }
  html[data-a11y-text="scaled"] .grid-count-3 > .service-card:last-child:nth-child(odd),
  html[data-a11y-text="scaled"] .grid-count-5 > .service-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 4%) / 2);
  }
}

/* --- Services cards --- */
.service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  background: var(--color-neutral-light);
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--color-shadow);
  text-align: left;
}

/* --- Services card icon --- */
.service-icon {
  width: 100%;
  height: 105px;
  margin-bottom: 20px;
}

.service-icon svg {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
}

/* --- Services card heading --- */
.service-card h3 {
  font-family: var(--font-heading);
  font-size: calc(32px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-neutral-dark);
  margin: 0 0 20px;
  text-transform: none;
}

/* --- Services card description --- */
.service-description {
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-neutral-dark);
  margin: 0 0 20px;
}

/* --- Services Learn More --- */
.services-section .learn-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding: 4px 0;
  font-family: var(--font-heading);
  font-size: calc(16px * var(--fs, 1));
  font-weight: 800;
  line-height: 1;
  color: var(--color-primary);
  text-decoration: none;
  cursor: pointer;
}

.services-section .learn-more:hover {
  color: var(--color-secondary-on-light);
  text-decoration: underline;
}

.services-section .learn-more .icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 120ms linear;
}

.services-section .learn-more:hover .icon { transform: translateX(3px); }

/* --- Services See All --- */
.services-see-all {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

.services-section .see-all-services {
  background: transparent;
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
  text-decoration: none;
  gap: 8px;
  min-height: 44px;
  line-height: 1.2;
  text-align: center;
}

.services-section .see-all-services:hover {
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
}

.services-section .see-all-services .icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Services photo split (Types B and C) --- */
.type-b,
.services-header-hybrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 56px;
  align-items: center;
}

.services-header-hybrid { margin-bottom: 48px; }

/* The photo is at least 4:3 of its column and stretches taller when the
   text is. Not aspect-ratio: on a stretched item, aspect-ratio derives
   the width from the stretched height and pushed the photo across the
   text column (measured at 1440px, browser pass 1). */
.type-b-photo,
.services-header-photo {
  position: relative;
  align-self: stretch;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
}

.type-b-photo::before,
.services-header-photo::before {
  content: "";
  display: block;
  padding-top: 75%;
}

.type-b-photo img,
.services-header-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.type-b-content,
.services-header-text { min-width: 0; }

.type-b-paragraph { margin-bottom: 32px; }

/* Part 30: primary fill, contrast text, the site's button convention. */
/* text-decoration: the cross-cutting a:hover (0,1,1) outranks .btn
   (0,1,0) and underlined the button label on hover (browser pass). */
.type-b-content .btn {
  padding: 16px 32px;
  min-height: 44px;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

/* Tablet adaptation of Part 30 / Part 31 (ruling 2026-09-18). At
   768-1023px a ~336px text column made the stretched photo a narrow
   portrait crop that lost the subject (the truck at 768px). Here the
   split stacks, photo above the content, at a fixed 3:2 landscape
   crop that no longer follows the text height. 1024px and up keep
   the side-by-side split; 767px and below keep the mobile stack. */
@media (min-width: 768px) and (max-width: 1023px) {
  .type-b,
  .services-header-hybrid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
  .type-b-photo,
  .services-header-photo { align-self: auto; }
  .type-b-photo::before,
  .services-header-photo::before { padding-top: 66.6667%; }
  .services-header-photo { order: -1; }
}

/* --- Services accordion --- */
.services-accordion {
  border-top: 1px solid var(--color-border-subtle);
}

.accordion-item {
  background: var(--color-neutral-light);
  border-bottom: 1px solid var(--color-border-subtle);
}

.accordion-heading {
  margin: 0;
  font-family: var(--font-heading);
  font-size: calc(20px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.33;
  color: var(--color-neutral-dark);
}

.accordion-header {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 14px 4px;
  border: 0;
  background: transparent;
  color: var(--color-neutral-dark);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  flex: 0 0 auto;
  display: flex;
}

.accordion-icon svg {
  display: block;
  height: 40px;
  width: auto;
  max-width: none;
}

.accordion-label {
  flex: 1 1 auto;
  min-width: 0;
}

.accordion-chevron {
  flex: 0 0 auto;
  display: flex;
  transition: transform 200ms ease;
}

.accordion-chevron .icon { width: 24px; height: 24px; }

/* Before the script runs (or with JavaScript off) the header is a plain
   heading label over an open panel: no chevron, no pointer. */
.services-accordion:not(.is-enhanced) .accordion-chevron { display: none; }
.services-accordion:not(.is-enhanced) .accordion-header { cursor: default; }

/* Part 33: the chevron turns 180 degrees when the item opens. The
   cross-cutting reduced-motion rule and the widget's motion mode
   remove the transition, never the state. */
.accordion-header[aria-expanded="true"] .accordion-chevron { transform: rotate(180deg); }

.accordion-panel {
  padding: 0 4px 20px;
}

.accordion-panel[hidden] { display: none; }

/* Scaled text on mobile: the icon moves above the label, so the label
   keeps the full row beside the chevron. */
@media (max-width: 767px) {
  html[data-a11y-text="scaled"] .accordion-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "icon chevron" "label chevron";
    row-gap: 8px;
  }
  html[data-a11y-text="scaled"] .accordion-icon { grid-area: icon; }
  html[data-a11y-text="scaled"] .accordion-label { grid-area: label; }
  html[data-a11y-text="scaled"] .accordion-chevron { grid-area: chevron; }
}

/* --- Services mobile --- */
.mobile-services-only { display: none; }

@media (max-width: 767px) {
  .desktop-services-only { display: none; }
  .mobile-services-only { display: block; }

  .services-section-inner {
    padding: 40px 20px;
  }

  .services-section h2 {
    font-size: calc(32px * var(--fs, 1));
  }

  .type-a .services-header { margin-bottom: 24px; }

  /* Type B: photo (full width), H2, paragraph, full-width CTA; left-aligned. */
  .type-b,
  .services-header-hybrid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .type-b-content { text-align: left; }
  .type-b-photo,
  .services-header-photo { align-self: auto; }
  .type-b-paragraph { margin-bottom: 24px; }
  .type-b-content .btn {
    display: flex;
    width: 100%;
  }

  /* Type C: the header row stacks photo first, then H2 and tagline. */
  .services-header-photo { order: -1; }
  .services-header-hybrid { margin-bottom: 24px; }

  .services-see-all { margin-top: 24px; }
}

/* --- Why choose --- */
.why-choose { background: var(--surface-default); color: var(--color-neutral-dark); }
.why-choose-inner { width: 100%; max-width: var(--site-width); margin-inline: auto; padding: 72px 24px 56px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: 24px 48px; align-items: start; }
.why-reasons h2 { margin: 0 0 22px; font-family: var(--font-heading); font-weight: 800; line-height: 1.15; color: var(--color-primary); font-size: calc(36px * var(--fs, 1)); }
.why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.why-list li { display: flex; gap: 16px; align-items: flex-start; }
.why-num { flex: none; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-contrast); font-family: var(--font-heading); font-weight: 800; font-size: calc(17px * var(--fs, 1)); }
.why-list h3 { margin: 0 0 4px; font-family: var(--font-heading); font-weight: 800; line-height: 1.3; color: var(--color-primary); font-size: calc(19px * var(--fs, 1)); }
.why-list p { margin: 0; font-weight: 500; line-height: 1.55; color: var(--color-neutral-dark); font-size: calc(16px * var(--fs, 1)); }
.why-work-h { margin: 0 0 14px; font-family: var(--font-heading); font-weight: 800; line-height: 1.3; color: var(--color-primary); font-size: calc(19px * var(--fs, 1)); }
.why-photo { margin: 0; min-width: 0; }
.why-photo img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 14px var(--color-shadow); }
.why-more { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1023px) {
  .why-choose-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 767px) {
  .why-choose-inner { padding: 40px 16px; gap: 28px; }
  .why-reasons h2 { margin-bottom: 18px; font-size: calc(28px * var(--fs, 1)); }
  .why-list { gap: 16px; }
  .why-more { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* --- Service area --- */
/* --- Service area section --- */
.service-area {
  color: var(--color-neutral-dark);
  font-family: var(--font-body);
}

.service-area { background: var(--surface-default); }

.service-area-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding: 72px 24px;
}

.service-area-content { min-width: 0; }

/* --- Service area layout --- */
@media (min-width: 1024px) {
  .service-area-layout-two-column .service-area-inner {
    display: grid;
    grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    column-gap: 48px;
    align-items: center;
  }
}

/* Scaled text (widget) at 1024-1279px: the 46% content column cannot
   hold two columns of city names at 175% without breaking a word. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html[data-a11y-text="scaled"] .service-area-city-list[data-columns] { columns: 1; }
}

/* Below 1024px the map follows the content, and never outgrows it
   (Part 37, SA-KEVIN-RESP-002). */
@media (max-width: 1023px) {
  .service-area-visual {
    max-width: 560px;
    margin: 48px auto 0;
  }
}

/* visual.type none: centred heading block, list below, CTA centred. */
.service-area-layout-single-column .service-area-content { text-align: center; }
.service-area-layout-single-column .service-area-city-list {
  display: inline-block;
  text-align: left;
}

/* --- Service area heading and copy --- */
.service-area h2 {
  font-family: var(--font-heading);
  font-size: calc(48px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-neutral-dark);
  margin: 0 0 16px;
}

.service-area-tagline,
.service-area-intro,
.service-area-list-label {
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-neutral-dark);
  margin: 0 0 20px;
}

.service-area-list-label { font-weight: 500; }

/* Stage 5 (K5-03): group labels, H3 at the list label's size, above each
   group's list; groups stack with the block gap between them. */
.service-area-group + .service-area-group { margin-top: 4px; }
.service-area-group-label {
  font-family: var(--font-heading);
  font-size: calc(15px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 4px;
}

/* --- Service area city list --- */
.service-area-city-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  column-gap: 28px;
}

.service-area-city-list[data-columns="1"] { columns: 1; }
.service-area-city-list[data-columns="2"] { columns: 2; }
.service-area-city-list[data-columns="3"] { columns: 3; }

.city-entry {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  break-inside: avoid;
  margin-bottom: 4px;
}

/* The marker sits on the name's first line at every text size: the link
   pads its text 10px down, and the marker is one line box tall. */
.city-entry .marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(18px * var(--fs, 1));
  height: calc(17px * 1.4 * var(--fs, 1));
  margin-top: 10px;
  font-size: calc(17px * var(--fs, 1));
  color: var(--color-primary);
  font-weight: 800;
  line-height: 1;
}

.city-entry .marker svg { width: 100%; height: 100%; }

.service-area .city-link {
  display: block;
  min-width: 0;
  min-height: 44px;
  padding: 10px 0;
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-neutral-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  overflow-wrap: break-word;
}

.service-area .city-link:hover {
  color: var(--color-secondary-on-light);
  text-decoration-thickness: 2px;
}

/* --- Service area CTA --- */
.service-area-cta-row { margin: 0; }

.service-area .service-area-cta {
  background: transparent;
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
  text-decoration: none;
  gap: 8px;
  min-height: 44px;
  line-height: 1.2;
  text-align: center;
}

.service-area .service-area-cta:hover {
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
  text-decoration: none;
}

.service-area .service-area-cta .icon { width: 18px; height: 18px; flex: 0 0 auto; }

/* --- Service area map --- */
.service-area-visual { min-width: 0; }

.service-area-visual a {
  display: block;
  border-radius: 4px;
}

.service-area-map-image {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  box-shadow: 0 12px 28px var(--color-shadow-strong);
}

/* --- Service area mobile --- */
@media (max-width: 767px) {
  .service-area-inner {
    padding: 40px 24px;
  }

  .service-area h2 {
    font-size: calc(32px * var(--fs, 1));
  }

  .service-area-city-list { column-gap: 20px; }
  .service-area-city-list[data-columns="3"] { columns: 2; }
  html[data-a11y-text="scaled"] .service-area-city-list[data-columns] { columns: 1; }

  .service-area .service-area-cta {
    display: flex;
    width: 100%;
  }

  .service-area-layout-single-column .service-area-city-list { display: block; }
}

/* --- Service area long city names (Stage 5, F-14) --- */
/* Below 380px a two-column list cannot hold a city name whose longest word
   is 10 letters or more without breaking it mid-word, which
   ADA-ABC-TXT-002 forbids at 100%. One column there. Last in the layer, so
   it outranks the column rules above by order. */
@media (max-width: 379px) {
  .service-area-city-list[data-columns="2"] { columns: 1; }
}

/* --- Service area county columns (service_area.layout: county_columns) --- */
@media (min-width: 1024px) {
  .service-area--counties.service-area-layout-two-column .service-area-inner {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: 56px;
  }
}
.service-area--counties h2 { font-size: calc(36px * var(--fs, 1)); margin-bottom: 12px; }
.service-area--counties .service-area-tagline { margin-bottom: 8px; }
.service-area--counties .service-area-list-label { margin: 16px 0 0; }
.sa-county-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 20px 0 0; }
.sa-county-cols ul { list-style: none; margin: 0; padding: 0; }
.sa-county-label {
  margin: 0 0 4px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-secondary);
  font-family: var(--font-heading);
  font-size: calc(13px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-dark);
}
.sa-area-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.sa-area-link:hover { color: var(--color-secondary-on-light); text-decoration-thickness: 2px; }
.sa-pin { width: 18px; height: 18px; flex: none; color: var(--color-secondary-on-light); }
.sa-more-row { margin: 14px 0 0; }
.sa-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-body);
  font-size: calc(17px * var(--fs, 1));
  font-weight: 700;
  color: var(--color-secondary-on-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sa-more:hover { color: var(--color-primary); }
.sa-more .icon { width: 18px; height: 18px; flex: none; }
.service-area--counties .service-area-map-image {
  border: 0;
  border-radius: 10px;
  box-shadow: 0 4px 14px var(--color-shadow-strong);
}
@media (max-width: 767px) {
  .service-area--counties h2 { font-size: calc(28px * var(--fs, 1)); }
  .sa-county-cols { gap: 16px; }
}
html[data-a11y-text="scaled"] .sa-county-cols { grid-template-columns: minmax(0, 1fr); }

/* --- Body placeholder (Part 44; R-13 need-driven height) --- */
#body-placeholder {
  min-height: 0;
  background: var(--surface-default);
}

/* --- Contact --- */
/* --- Contact section --- */
.contact {
  color: var(--color-neutral-dark);
  font-family: var(--font-body);
}

.contact { background: var(--surface-accent); }

.contact-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding: 72px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 40px;
}

.contact-info-column,
.contact-form-column { min-width: 0; }

/* --- Contact layout --- */
@media (min-width: 1024px) {
  .contact-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
  }
}

/* 768-1023px: stacked, info first, and contained (CONTACT-KEVIN-LAY-007). */
@media (min-width: 768px) and (max-width: 1023px) {
  .contact-inner {
    max-width: calc(720px + 2 * 24px);
  }
}

/* --- Contact info column --- */
.contact h2 {
  font-family: var(--font-heading);
  font-size: calc(48px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-neutral-dark);
  margin: 0 0 16px;
  overflow-wrap: break-word;
}

.contact-subheading {
  font-size: calc(18px * var(--fs, 1));
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-neutral-dark);
  margin: 0 0 20px;
}

.contact-info-paragraph,
.contact-response-time {
  font-size: calc(17px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-neutral-dark);
  margin: 0 0 20px;
}

.contact-response-time { font-weight: 600; }

.contact-info-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-subtle);
}

/* Each line: a decorative icon one line box tall, then the value. */
.contact-line {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 0;
  margin: 0;
  font-size: calc(17px * var(--fs, 1));
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-neutral-dark);
}

.contact-line .icon {
  flex: 0 0 auto;
  width: calc(20px * var(--fs, 1));
  height: calc(17px * 1.5 * var(--fs, 1));
  color: var(--color-primary);
}

.contact-line > span { min-width: 0; }

/* Phone and email are links: underlined and bold on the cream surface
   (ADA-WCAG-COL-004), 44px targets, tel: and mailto: (CONTACT-KEVIN-CTA-006). */
.contact .contact-phone,
.contact .contact-email {
  color: var(--color-neutral-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.contact .contact-phone { font-size: calc(20px * var(--fs, 1)); }
.contact .contact-phone .icon {
  height: calc(20px * 1.5 * var(--fs, 1));
}

/* Stage 5 (R-7, F-14): the address never breaks mid-word at 100% text. A
   long address carries a <wbr> after its @, so a narrow column breaks it
   there and nowhere else; under scaled text it may break anywhere
   (ADA-ABC-TXT-002). */
html[data-a11y-text="scaled"] .contact .contact-email > span { overflow-wrap: anywhere; }

.contact .contact-phone:hover,
.contact .contact-email:hover {
  color: var(--color-secondary-on-light);
  text-decoration-thickness: 2px;
}

/* --- Contact form --- */
.contact-form {
  background: var(--color-neutral-light);
  color: var(--color-neutral-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--color-shadow);
  padding: 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  margin: 0;
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px 16px;
  align-items: end;
}

/* Part 40 / CONTACT-KEVIN-FLD-007: related pairs share a row above 767px. */
@media (min-width: 768px) {
  .contact-form .form-row-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.contact-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* ADA-WCAG-FRM-001: a visible label above every field, wrapping. */
.contact-form label {
  font-family: var(--font-body);
  font-size: calc(15px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-dark);
  overflow-wrap: break-word;
}

/* ADA-WCAG-FRM-002 asterisk, secondary-on-light as on the hero form. */
.contact-form .required-marker {
  color: var(--color-secondary-on-light);
  margin-left: 2px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--color-neutral-light);
  color: var(--color-neutral-dark);
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  min-height: 44px;
  width: 100%;
  min-width: 0;
}

.contact-form textarea { resize: vertical; }

/* Stage 5 (K5-05): the file chooser keeps the field box; its native
   button inherits the field's colours. */
.contact-form input[type="file"] {
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: calc(15px * var(--fs, 1));
  cursor: pointer;
}
.contact-form input[type="file"]::file-selector-button {
  margin-inline-end: 12px;
  padding: 6px 12px;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: var(--color-neutral-light);
  color: var(--color-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.contact-form ::placeholder {
  color: var(--color-muted);
  font-size: calc(14px * var(--fs, 1));
  opacity: 1;
}

.contact-form .contact-submit {
  width: 100%;
  min-height: 44px;
  color: var(--color-neutral-dark);
  border-color: var(--color-primary);
  line-height: 1.2;
  text-align: center;
}

/* CONTACT-KEVIN-STY-003: fine print, much smaller, muted. */
.contact-compliance-fine-print {
  font-size: calc(12px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-muted);
  margin: 0;
}

/* --- Contact mobile --- */
@media (max-width: 767px) {
  .contact-inner {
    padding: 48px 24px;
  }

  .contact h2 {
    font-size: calc(32px * var(--fs, 1));
  }

  .contact-form {
    padding: 20px;
  }
}

/* --- Contact: fluid container (layout.container: fluid) --- */
.sp-closing .contact-inner { padding-block: 0; }
@media (min-width: 1024px) {
  .contact-pattern-a .contact-inner { max-width: var(--fluid-max); padding-inline: var(--fluid-gutter);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: center; }
  .contact-pattern-a .contact-info-column { max-width: 600px; }
  .contact-pattern-a .contact-form-column { width: 100%; max-width: 880px; justify-self: end; }
  .contact-pattern-a .contact-form textarea { height: 96px; min-height: 96px; }
  main .contact-pattern-a.sp-closing h2 { max-width: none; text-wrap: balance; }
  /* The homepage's closing section (not a page closing): the normal centred page width, aligned
     with the sections above it and the footer (revision 2026-10-08). */
  .contact-pattern-a:not(.sp-closing) .contact-inner { max-width: var(--site-width); padding-inline: 24px; }
}

/* --- Footer --- */
/* --- Footer section --- */
.site-footer {
  background: var(--color-neutral-dark);
  color: var(--color-contrast);
  font-family: var(--font-body);
  border-top: 4px solid var(--color-secondary);
}

.footer-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding: 56px 24px 0;
}

/* Part 46: one equal column per link group. */
.footer-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  row-gap: 32px;
}

.footer-column { min-width: 0; }

/* The footer's own ring: secondary on the dark surface. High contrast
   mode keeps its own ring (the widget rule is more specific and later). */
.site-footer a:focus-visible { outline-color: var(--color-secondary); }

/* A link reached by Tab is scrolled clear of the fixed accessibility
   toggle over the bottom-left corner (WCAG 2.4.11). */
.site-footer a { scroll-margin-bottom: 80px; }

/* Links everywhere in the footer: primary links carry the accent (Part 51). */
.site-footer a { color: var(--color-secondary); }
.site-footer a:hover { color: var(--color-contrast); }

/* --- Footer column headers --- */
.footer-heading {
  font-family: var(--font-heading);
  font-size: calc(18px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-secondary);
  margin: 0 0 8px;
  overflow-wrap: break-word;
}

/* --- Footer links --- */
.footer-column ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-column a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  font-size: calc(16px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-secondary);
  text-decoration: none;
  overflow-wrap: break-word;
}

.footer-column a:hover {
  color: var(--color-contrast);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Part 51: the See all link is underlined, carries an arrow, and is last.
   It flows as text, so the arrow stays beside the label when it wraps. */
.footer-column .see-all a {
  display: inline-block;
  padding: 11px 0;
  vertical-align: top;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-column .see-all-tail { white-space: nowrap; }

/* Stage 5 (K5-03): group labels inside a service-area column: small caps
   in the contrast colour at 75%, the legal row's tone, above their list. */
.footer-link-group > ul { list-style: none; margin: 0; padding: 0; }
.footer-link-group + .footer-link-group { margin-top: 10px; }
.footer-group-label {
  display: block;
  padding: 6px 0 2px;
  font-family: var(--font-heading);
  font-size: calc(12px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-contrast);
}

.footer-column .see-all .icon {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
  width: calc(16px * var(--fs, 1));
  height: calc(16px * var(--fs, 1));
}

/* --- Footer contact block --- */
.footer-middle {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px 40px;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--color-muted);
}

/* From 768px the contact lines sit in a grid under the name, filled in
   source order, so reading order, tab order and position agree: two
   columns at 768-1023, three from 1024 (address, main phone, emergency
   phone, then the email under the address). */
.footer-contact {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: start;
  align-items: start;
  column-gap: 40px;
  row-gap: 4px;
}

@media (min-width: 1024px) {
  .footer-contact { grid-template-columns: repeat(3, minmax(0, max-content)); }
  .footer-phone-group { grid-row: span 2; }
}

/* Under scaled text (ADA-ABC-TXT-002) the social row moves under the
   contact block and the grid keeps two columns, so the email and the
   phone numbers keep whole words from 1024px. */
html[data-a11y-text="scaled"] .footer-middle { flex-direction: column; }
html[data-a11y-text="scaled"] .footer-contact {
  grid-template-columns: repeat(2, minmax(0, max-content));
}
html[data-a11y-text="scaled"] .footer-phone-group { grid-row: auto; }

/* Part 47 / K-8: the client's logo anchors the contact column.
   justify-self keeps the link the size of the logo: a grid item
   stretches to its area by default, which made the link 838px wide
   at 1440px, so a click anywhere across the empty row went home. */
.footer-logo {
  grid-column: 1 / -1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  max-width: 100%;
  margin: 0 0 8px;
}

/* width:auto + height:auto + both maximums lets the replaced-element
   sizing algorithm shrink the logo proportionally, so it cannot be
   stretched; object-fit: contain letterboxes rather than distorts if a
   box is ever wrong. The width/height attributes carry the intrinsic
   size, so the box is reserved before the image loads. No filter, ever
   (K-8): BCS never inverts or recolours a client's logo. */
.footer-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(56px * var(--fs, 1));
  object-fit: contain;
  filter: none;
}

.footer-vertical {
  grid-column: 1 / -1;
  font-size: calc(16px * var(--fs, 1));
  font-weight: 700;
  text-transform: capitalize;
  color: var(--color-contrast);
  margin: 0;
}

.footer-phone-group { min-width: 0; }

.footer-contact-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  min-width: 0;
  font-size: calc(16px * var(--fs, 1));
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-contrast);
}

.footer-contact-line > span,
.footer-contact-line a > span { min-width: 0; overflow-wrap: anywhere; }

.footer-contact .icon {
  flex: 0 0 auto;
  width: calc(20px * var(--fs, 1));
  height: calc(20px * var(--fs, 1));
  color: var(--color-secondary);
}

.footer-contact-line a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  min-width: 0;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-contact .footer-phone,
.footer-contact .footer-phone-emergency {
  font-size: calc(18px * var(--fs, 1));
}

.footer-contact .footer-phone,
.footer-contact .footer-email { color: var(--color-secondary); }

/* FOOTER-SPEC-019: the emergency number keeps the body-text colour. */
.footer-contact .footer-phone-emergency { color: var(--color-contrast); }

.footer-contact .footer-phone:hover,
.footer-contact .footer-email:hover {
  color: var(--color-contrast);
  text-decoration-thickness: 2px;
}

.footer-contact .footer-phone-emergency:hover {
  color: var(--color-secondary);
  text-decoration-thickness: 2px;
}

/* Part 47: the hours or label line sits directly under its own number,
   aligned with the number rather than the icon. */
.footer-hours-label {
  font-size: calc(14px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-contrast);
  margin: 4px 0 0 calc(20px * var(--fs, 1) + 10px);
}

/* --- Footer social --- */
.footer-social {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-secondary);
  border-radius: 4px;
  color: var(--color-secondary);
}

.footer-social a:hover {
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
}

.footer-social .icon {
  width: 22px;
  height: 22px;
}

/* --- Footer legal row --- */
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  column-gap: 24px;
  /* room for a focus ring (offset 3px + 3px) between wrapped lines */
  row-gap: 8px;
  margin-top: 32px;
  padding: 8px 0 20px;
  border-top: 1px solid var(--color-muted);
  font-size: calc(13px * var(--fs, 1));
  font-weight: 400;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-contrast) 75%, var(--color-neutral-dark));
  text-align: center;
}

.footer-legal p { margin: 0; overflow-wrap: break-word; min-width: 0; }

.legal-pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 16px;
}

/* Part 50: legal links muted, never the primary accent; underlined,
   because they sit beside text of the same colour (WCAG 1.4.1). */
.footer-legal .legal-pages a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-contrast) 75%, var(--color-neutral-dark));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal .legal-pages a:hover { color: var(--color-contrast); }

/* The accessibility toggle is fixed over the bottom-left corner. Where the
   legal row can reach that corner (below 1024px, or under scaled text), the
   page ends with room for it, so the toggle never covers the last line. */
@media (max-width: 1023px) {
  .footer-legal { padding-bottom: 80px; }
}

html[data-a11y-text="scaled"] .footer-legal { padding-bottom: 80px; }

/* --- Footer responsive --- */
@media (min-width: 768px) and (max-width: 1023px) {
  .footer-columns { column-gap: 32px; }
}

@media (max-width: 767px) {
  .footer-inner {
    padding: 48px 20px 0;
  }

  .footer-columns {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    text-align: center;
  }

  .footer-column ul {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .footer-column a { justify-content: center; }

  .footer-middle {
    flex-direction: column;
    align-items: center;
    margin-top: 28px;
    padding-top: 28px;
    text-align: center;
  }

  .footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  /* Part 56 / K-8: the logo centres with the rest of the stack. */
  .footer-logo { align-self: center; justify-content: center; }

  .footer-phone-group {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Centred lines flow as text, so an icon stays beside its words when
     the address, the email or a See all label wraps (a flex row would
     leave the icon at the far edge of the wrapped block). */
  .footer-column a,
  .footer-contact-line a {
    display: inline-block;
    padding: 11px 0;
    text-align: center;
    vertical-align: top;
  }

  .footer-contact-line {
    display: block;
    text-align: center;
  }

  .footer-address { padding: 11px 0; }

  .footer-contact .icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
  }
  .footer-hours-label { margin: 4px 0 0; }
  .footer-social { justify-content: center; }

  .footer-legal {
    flex-direction: column;
    margin-top: 28px;
  }
}

/* --- Footer brand column (footer.layout: brand_column) --- */
.footer--brand .footer-columns { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
.footer--brand .footer-heading { color: var(--color-contrast); margin-bottom: 12px; }
.footer-contact--brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.footer-contact--brand .footer-logo { margin: 0 0 14px; }
.footer-contact--brand .footer-hours-line { font-weight: 500; }
.footer-contact--brand .footer-hours-line .icon { color: var(--color-secondary); }
.footer-profile {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 700;
  color: var(--color-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  white-space: nowrap;
}
a.footer-profile:hover { color: var(--color-contrast); text-decoration-thickness: 2px; }
.footer-social--brand { margin-top: 12px; gap: 10px; align-self: center; }
.footer-social--brand .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; box-sizing: border-box; border: 1px solid var(--color-secondary); border-radius: 4px; color: var(--color-secondary); }
.footer-social--brand .footer-social-link .icon { width: 22px; height: 22px; margin: 0; }
.footer-social--brand a.footer-social-link:hover { background: var(--color-secondary); color: var(--color-neutral-dark); }
.footer-social--brand a.footer-social-link:hover .icon { color: var(--color-neutral-dark); }
.footer--brand .footer-legal { justify-content: space-between; text-align: left; margin-top: 44px; padding-top: 14px; border-top-color: color-mix(in srgb, var(--color-contrast) 40%, var(--color-neutral-dark)); }
.footer--brand .legal-pages { column-gap: 28px; }
@media (min-width: 768px) and (max-width: 1023px) {
  .footer--brand .footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
}
@media (max-width: 767px) {
  .footer--brand .footer-columns { grid-template-columns: minmax(0, 1fr); }
  .footer-contact--brand { align-items: center; text-align: center; }
  .footer-contact--brand .footer-logo { align-self: center; }
  .footer-social--brand { justify-content: center; }
  .footer-contact--brand .footer-profile .icon { margin-right: 0; }
  /* The fine print wraps cleanly: the copyright, then the three links centred on their own rows. */
  .footer--brand .footer-legal { flex-direction: column; justify-content: center; text-align: center; margin-top: 36px; row-gap: 4px; }
  .footer--brand .legal-pages { justify-content: center; column-gap: 20px; row-gap: 0; }
}

/* --- Page integration (Increment 9, D-1; measured at the pre-Stage-4 checkpoint) --- */
html { scroll-padding-top: max(212px, min(calc(var(--header-offset, 0px) + 16px), 50svh)); }
/* A desktop dropdown belongs to the sticky header: focus in it needs no page clearance (Service Page Increment 3.2). */
html:has(.main-nav .dropdown :focus) { scroll-padding-top: 0; }

/* --- Accessibility base (BCS Accessibility Skill v1, Part 2, verbatim) --- */
html{scroll-behavior:smooth;--fs:1}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;z-index:10000;top:10px;left:10px;padding:12px 16px;background:var(--color-neutral-light);color:var(--color-primary);font-weight:800}

/* --- Accessibility supplemental --- */
/* ADA-SPEC-015: contact and footer contact columns reflow.
   Supplemental to the Accessibility Skill, not part of any verbatim block.
   Class names pinned 2026-09-17; the Contact and Footer modules must match. */
.contact-details,
.footer-contact-details {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Accessibility widget (BCS Accessibility Skill v1, Part 5.1, verbatim) --- */
/* ===== ADA / accessibility widget (self-contained, no third-party script) ===== */
.a11y-widget{position:fixed;left:18px;bottom:18px;z-index:1200;font-family:var(--font-body)}
.a11y-toggle{width:56px;height:56px;border-radius:50%;border:3px solid var(--color-contrast);background:var(--color-primary);color:var(--color-secondary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 18px var(--color-shadow-strong);padding:0}
.a11y-toggle:hover{background:var(--color-secondary);color:var(--color-primary);border-color:var(--color-primary)}
.a11y-toggle svg{width:30px;height:30px}
.a11y-panel{position:absolute;left:0;bottom:68px;width:min(360px,calc(100vw - 36px));max-height:min(78vh,640px);overflow:auto;background:var(--surface-default);color:var(--color-neutral-dark);border:2px solid var(--color-primary);border-radius:8px;box-shadow:0 14px 40px var(--color-shadow-strong)}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;background:var(--color-primary);color:var(--color-contrast);border-bottom:3px solid var(--color-secondary)}
.a11y-title{font-family:var(--font-heading);font-weight:800;font-size:calc(17px * var(--fs,1));margin:0}
.a11y-close{width:40px;height:40px;border:2px solid var(--color-contrast);border-radius:4px;background:transparent;color:var(--color-contrast);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.a11y-close:hover{background:var(--color-contrast);color:var(--color-primary)}
.a11y-body{padding:14px 16px 16px}
.a11y-section-label{font-size:calc(13px * var(--fs,1));font-weight:800;margin:0 0 8px;color:var(--color-muted)}
.a11y-text-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;padding:10px 12px;border:1px solid var(--color-border-subtle);border-radius:6px}
.a11y-text-row span{font-weight:700;font-size:calc(15px * var(--fs,1))}
.a11y-stepper{display:inline-flex;align-items:center;gap:6px}
.a11y-stepper button{min-width:44px;height:44px;border:2px solid var(--color-primary);border-radius:4px;background:var(--surface-default);color:var(--color-primary);font-weight:800;cursor:pointer;font-size:calc(15px * var(--fs,1))}
.a11y-stepper button:hover{background:var(--color-primary);color:var(--color-secondary)}
.a11y-stepper button:disabled{opacity:.35;cursor:not-allowed}
.a11y-stepper output{min-width:52px;text-align:center;font-weight:800;font-size:calc(14px * var(--fs,1))}
.a11y-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.a11y-opt{min-height:64px;padding:10px 8px;border:2px solid var(--color-border-subtle);border-radius:6px;background:var(--surface-default);color:var(--color-neutral-dark);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-weight:700;font-size:calc(13px * var(--fs,1));line-height:1.2;text-align:center}
.a11y-opt svg{width:24px;height:24px;flex:0 0 auto}
.a11y-opt:hover{border-color:var(--color-primary)}
.a11y-opt[aria-pressed="true"]{background:var(--color-primary);color:var(--color-secondary);border-color:var(--color-primary)}
.a11y-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--color-border-subtle);font-size:calc(13px * var(--fs,1))}
.a11y-reset{min-height:44px;padding:8px 14px;border:2px solid var(--color-primary);border-radius:4px;background:transparent;color:var(--color-primary);font-weight:800;cursor:pointer}
.a11y-reset:hover{background:var(--color-primary);color:var(--color-secondary)}
.a11y-foot a{color:var(--color-neutral-dark);font-weight:700}
@media (max-width:767px){.a11y-widget{left:12px;bottom:12px}.a11y-panel{position:fixed;left:12px;right:12px;bottom:80px;width:auto;max-height:72vh}}
/* --- modes set by the widget on <html> --- */
html[data-a11y-contrast="high"]{--color-primary:#000000;--color-secondary:#FFD100;--color-secondary-on-light:#5A4600;--color-neutral-dark:#000000;--color-contrast:#FFFFFF;--surface-accent:#FFFFFF;--color-border-subtle:#000000;--color-muted:#1A1A1A;--color-shadow:rgba(0,0,0,0);--color-shadow-strong:rgba(0,0,0,0);--color-overlay:rgba(0,0,0,.9)}
html[data-a11y-contrast="high"] a{text-decoration:underline}
html[data-a11y-contrast="high"] .btn{border-width:2px;border-color:currentColor}
html[data-a11y-contrast="high"] .service-card,html[data-a11y-contrast="high"] .review-card,html[data-a11y-contrast="high"] .hero-form,html[data-a11y-contrast="high"] .contact-form,html[data-a11y-contrast="high"] .accordion-item{border:2px solid #000}
html[data-a11y-contrast="high"] .footer-hours-label,html[data-a11y-contrast="high"] .rating-count,html[data-a11y-contrast="high"] .review-source{opacity:1;color:inherit}
html[data-a11y-contrast="high"] :focus-visible{outline:3px solid #FFFFFF;outline-offset:2px;box-shadow:0 0 0 6px #000000}
html[data-a11y-mono="1"] :is(.announcement-banner,.site-header,.mobile-chrome,.mobile-menu-overlay,.hero,main,.site-footer){filter:grayscale(1)}
html[data-a11y-links="1"] a:not(.btn):not(.a11y-foot a){text-decoration:underline!important;text-decoration-thickness:2px;text-underline-offset:3px;outline:2px dashed currentColor;outline-offset:2px}
html[data-a11y-font="readable"]{--font-heading:Arial,Helvetica,sans-serif;--font-body:Verdana,Arial,sans-serif}
html[data-a11y-font="readable"] body{letter-spacing:.02em;word-spacing:.06em}
html[data-a11y-spacing="1"] body{line-height:2}
html[data-a11y-spacing="1"] p,html[data-a11y-spacing="1"] li,html[data-a11y-spacing="1"] label{line-height:2}
html[data-a11y-spacing="1"] p{margin-bottom:1.4em}
html[data-a11y-text="scaled"] h1,html[data-a11y-text="scaled"] h2,html[data-a11y-text="scaled"] h3{overflow-wrap:anywhere}
html[data-a11y-text="scaled"] .header-inner{flex-wrap:wrap;row-gap:8px;padding-top:12px;padding-bottom:12px}
html[data-a11y-text="scaled"] .main-nav{flex:1 1 320px}
html[data-a11y-text="scaled"] .main-nav>ul{flex-wrap:wrap;justify-content:flex-start;row-gap:0}
html[data-a11y-text="scaled"] .nav-item>a{white-space:normal}
html[data-a11y-text="scaled"] .header-ctas{flex-wrap:wrap;margin-left:auto}
html[data-a11y-text="scaled"] .header-ctas .btn{white-space:normal}
html[data-a11y-text="scaled"] .btn-phone .hours-line{max-width:none}
html[data-a11y-motion="reduce"]{scroll-behavior:auto}
html[data-a11y-motion="reduce"] *,html[data-a11y-motion="reduce"] *::before,html[data-a11y-motion="reduce"] *::after{transition:none!important;animation:none!important}
html[data-a11y-cursor="big"],html[data-a11y-cursor="big"] *{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M6 4 L6 40 L16 30 L22 44 L30 41 L24 27 L38 27 Z' fill='%23000' stroke='%23fff' stroke-width='3' stroke-linejoin='round'/></svg>") 6 4,auto!important}

/* --- Contact page (Contact Page Implementation Increment; approved preview v0.10; .cp- scoped) --- */
/* Contact page layer (Contact Page Implementation Increment, 2026-10-02).
   Ported from Kevin's approved static preview v0.10 (contact-page.css,
   SHA-256 07eef9bb116e3f849b94673ba2c3844d032938b40ba9101240beb5fb6d847a27).
   Appended after the shared homepage stylesheet, the cascade the approved
   reference used. Every selector is .cp- scoped, so the shared header, menu,
   banner, footer, form component and accessibility widget keep their rules;
   the shared contact form is restyled only inside .cp-form-panel.
   Three changes from the approved file. Two for the --fs text-resize
   invariant (cross_cutting.find_bare_font_sizes): the step numeral's 18px is
   calc(18px * var(--fs, 1)) and the FAQ marker's 1.4em is calc(1.4em). One
   reflow fix: links in an FAQ answer may wrap anywhere, so an open answer's
   email address no longer widens the page at 320px with enlarged text (found
   in implementation verification; the approved file scrolled sideways there).
   Identical at 100% text. Not a default for any other page type. */

/* --- Scaffolding --------------------------------------------------------- */
.cp-wrap {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: 24px;
}
.cp-main h2 { overflow-wrap: break-word; }
.cp-icon { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* --- Compact buttons (about 48px tall, 16px text) ------------------------ */
.cp-main a.cp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid transparent;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: calc(16px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.cp-main a.cp-btn--gold {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-primary);
}
.cp-main a.cp-btn--gold:hover { background: var(--color-contrast); border-color: var(--color-contrast); }
.cp-main a.cp-btn--outline {
  background: transparent;
  border-color: var(--color-contrast);
  color: var(--color-contrast);
}
.cp-main a.cp-btn--outline:hover { background: var(--color-contrast); color: var(--color-primary); }
.cp-main a.cp-btn--on-light { border-color: var(--color-primary); }
.cp-main a.cp-btn--on-light:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-secondary); }

/* --- Opening (black, white form) ----------------------------------------- */
.cp-opening {
  background: var(--color-primary);
  color: var(--color-contrast);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding: 56px 0 64px;
}
.cp-opening a:focus-visible { outline-color: var(--color-secondary); }
.cp-opening-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
}
/* One left group: H1, welcome, rating, lines and email. */
.cp-info { min-width: 0; }
.cp-form-col { min-width: 0; }

.cp-intro h1 {
  font-size: calc(clamp(34px, 3.6vw, 48px) * var(--fs, 1));
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--color-contrast);
}
.cp-lead {
  margin: 0;
  max-width: 30em;
  font-size: calc(18px * var(--fs, 1));
  line-height: 1.6;
  color: var(--color-contrast);
}

.cp-lines {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 20px 32px;
  margin-top: 28px;
}
.cp-line { min-width: 0; }
.cp-line--email { grid-column: 1 / -1; }
.cp-line-label {
  margin: 0;
  color: var(--color-secondary);
  font-size: calc(13px * var(--fs, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.cp-line-hours {
  margin: 2px 0 10px;
  font-size: calc(15px * var(--fs, 1));
  line-height: 1.4;
  color: var(--color-contrast);
}
.cp-main .cp-opening a.cp-email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-contrast);
  font-weight: 700;
  font-size: calc(17px * var(--fs, 1));
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}
.cp-main .cp-opening a.cp-email:hover { color: var(--color-secondary); }
/* One compact, secondary address line under the email (no label, no link). */
.cp-main .cp-address-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 0;
  font-size: calc(15px * var(--fs, 1));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.cp-address-line .cp-icon {
  width: calc(17px * var(--fs, 1));
  height: calc(17px * var(--fs, 1));
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.82);
}
.cp-address-line > span { min-width: 0; overflow-wrap: anywhere; }
/* Phones show the address after the form so the form stays early; only one
   copy is ever displayed (display: none also hides the other from assistive tech). */
.cp-main .cp-address-line--phone { display: none; }
@media (max-width: 767px) {
  .cp-main .cp-address-line--wide { display: none; }
  .cp-main .cp-address-line--phone { display: flex; margin: 0; }
}

/* The homepage hero's rating proof (approved .hfo-proof rules from base.css),
   placed under the introduction, visually secondary to the contact actions. */
.cp-proof { margin-top: 14px; }
.cp-proof .hfo-proof { font-size: calc(15px * var(--fs, 1)); }

/* The white form panel. The approved form keeps its own fields, rows,
   labels and colours; its card chrome moves to the panel so the heading
   sits inside the same white surface. */
.cp-form-panel {
  background: var(--color-neutral-light);
  color: var(--color-neutral-dark);
  border-top: 4px solid var(--color-secondary);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.cp-form-heading {
  font-size: calc(22px * var(--fs, 1));
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 14px;
  color: var(--color-neutral-dark);
}
.cp-form-panel .contact-form {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  gap: 16px;
}
.cp-form-panel .contact-form .form-row { gap: 16px; }
/* About four visible rows (the markup keeps rows="5"); still resizable. */
.cp-form-panel .contact-form textarea {
  line-height: 1.3;
  height: calc(4 * 1.3em + 26px);
  resize: vertical;
}
.cp-form-panel .contact-form .contact-submit {
  width: auto;
  justify-self: start;
  min-height: 48px;
  padding: 0 28px;
  font-size: calc(16px * var(--fs, 1));
}

@media (min-width: 768px) and (max-width: 1023px) {
  .cp-opening-grid { max-width: calc(720px + 2 * 24px); }
}
@media (min-width: 1024px) {
  .cp-opening { padding: 64px 0 72px; }
  .cp-opening-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    column-gap: 72px;
    align-items: center;   /* the left group sits at the form's vertical centre */
  }
}
@media (max-width: 767px) {
  .cp-opening { padding: 28px 0 36px; }
  .cp-opening-grid { row-gap: 20px; }
  .cp-proof { margin-top: 12px; }
  .cp-intro h1 { font-size: calc(32px * var(--fs, 1)); margin-bottom: 12px; }
  .cp-lead { font-size: calc(16px * var(--fs, 1)); line-height: 1.55; }
  /* Phones: both lines side by side, each button filling its column. */
  .cp-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; margin-top: 20px; }
  .cp-line-label { font-size: calc(12px * var(--fs, 1)); }
  .cp-line-hours { font-size: calc(13px * var(--fs, 1)); margin-bottom: 8px; }
  .cp-lines .cp-btn { width: 100%; padding: 0 10px; }
  .cp-main .cp-opening a.cp-email { font-size: calc(16px * var(--fs, 1)); min-height: 44px; }
  .cp-form-panel { padding: 20px; }
  .cp-form-heading { font-size: calc(20px * var(--fs, 1)); margin-bottom: 12px; }
  /* Mobile introduction centred; the phone lines keep their own alignment. */
  .cp-intro { text-align: center; }
  .cp-lead { margin-inline: auto; }
  .cp-proof .hfo-proof { justify-content: center; }
  .cp-line--email { text-align: center; }
  /* The pin sits inline with the centred text, so a wrapped line stays centred. */
  .cp-main .cp-address-line.cp-address-line--phone { display: block; text-align: center; text-wrap: balance; }
  .cp-address-line--phone .cp-icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }
  .cp-form-panel .contact-form .contact-submit { width: 100%; }
}
@media (max-width: 359px) {
  .cp-lines { grid-template-columns: minmax(0, 1fr); }
}

/* --- Trust card (white card in the page container, after the opening) ---- */
.cp-strip { background: var(--surface-default); padding: 40px 0 0; }
.cp-trust-card {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--color-neutral-light);
  border: 1px solid var(--color-border-subtle);
  border-top: 3px solid var(--color-secondary);
  border-radius: 10px;
  box-shadow: 0 4px 16px var(--color-shadow);
}
.cp-trust-card li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 22px 24px;
}
/* Thin light-grey vertical rules between the four desktop columns. */
.cp-trust-card li + li { border-left: 1px solid var(--color-border-subtle); }
.cp-trust-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--color-rating);   /* the approved accessible gold for graphics on white */
}
.cp-trust-icon .cp-icon { width: calc(30px * var(--fs, 1)); height: calc(30px * var(--fs, 1)); stroke-width: 1.8; }
.cp-trust-text { display: flex; flex-direction: column; min-width: 0; }
.cp-trust-text strong {
  font-family: var(--font-heading);
  font-size: calc(16px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-neutral-dark);
}
.cp-trust-text span {
  font-size: calc(14px * var(--fs, 1));
  line-height: 1.4;
  color: var(--color-muted);
}
/* Two by two: tablets, and desktop under enlarged text. */
@media (min-width: 768px) and (max-width: 1023px) {
  .cp-trust-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-trust-card li + li { border-left: 0; }
  .cp-trust-card li:nth-child(2n) { border-left: 1px solid var(--color-border-subtle); }
  .cp-trust-card li:nth-child(n + 3) { border-top: 1px solid var(--color-border-subtle); }
}
@media (min-width: 1024px) {
  html[data-a11y-text="scaled"] .cp-trust-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-a11y-text="scaled"] .cp-trust-card li + li { border-left: 0; }
  html[data-a11y-text="scaled"] .cp-trust-card li:nth-child(2n) { border-left: 1px solid var(--color-border-subtle); }
  html[data-a11y-text="scaled"] .cp-trust-card li:nth-child(n + 3) { border-top: 1px solid var(--color-border-subtle); }
}
/* Phones: one column of four compact rows with horizontal separators. */
@media (max-width: 767px) {
  .cp-strip { padding-top: 28px; }
  .cp-trust-card { grid-template-columns: minmax(0, 1fr); }
  .cp-trust-card li { padding: 14px 18px; gap: 12px; }
  .cp-trust-card li + li { border-left: 0; border-top: 1px solid var(--color-border-subtle); }
  .cp-trust-icon .cp-icon { width: calc(26px * var(--fs, 1)); height: calc(26px * var(--fs, 1)); }
}

/* --- What happens when you call ------------------------------------------ */
.cp-call { background: var(--surface-default); padding: 80px 0 72px; }
.cp-strip + .cp-call { padding-top: 64px; }
.cp-call-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.cp-call h2 { margin-bottom: 10px; }
.cp-call-intro { margin: 0 0 28px; font-size: calc(17px * var(--fs, 1)); line-height: 1.6; }
.cp-main .cp-call-intro a { color: var(--color-neutral-dark); font-weight: 700; }
.cp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.cp-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; }
.cp-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: calc(18px * var(--fs, 1));
}
.cp-steps h3 { margin: 6px 0 4px; font-size: calc(19px * var(--fs, 1)); line-height: 1.3; }
.cp-steps p { margin: 0; font-size: calc(16px * var(--fs, 1)); line-height: 1.6; }
.cp-call-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 55% 45%;
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--color-shadow);
}
@media (min-width: 1024px) {
  .cp-call-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: center; }
}
@media (max-width: 767px) {
  .cp-call { padding: 48px 0; }
  .cp-strip + .cp-call { padding-top: 44px; }
  .cp-call-photo img { aspect-ratio: 3 / 2; object-position: 58% 40%; }
}

/* --- Coverage ----------------------------------------------------------- */
.cp-coverage {
  background: var(--surface-default);
  border-top: 1px solid var(--color-border-subtle);
  padding: 72px 0;
}
.cp-coverage-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cp-coverage h2 { margin-bottom: 12px; }
.cp-coverage-copy > p { margin: 0 0 12px; }
.cp-area-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
}
.cp-main .cp-area-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-neutral-dark);
  font-weight: 700;
  text-underline-offset: 3px;
}
.cp-check { width: calc(18px * var(--fs, 1)); height: calc(18px * var(--fs, 1)); flex: 0 0 auto; }
.cp-main .cp-coverage-prompt {
  margin: 0 0 20px;
  padding: 12px 16px;
  border-left: 4px solid var(--color-secondary);
  background: var(--surface-accent);
  font-size: calc(16px * var(--fs, 1));
  line-height: 1.55;
}
/* The callout's phone number: bold, still linked and underlined, kept on one line. */
.cp-main .cp-coverage-prompt a.cp-prompt-phone { font-weight: 700; white-space: nowrap; }
html[data-a11y-text="scaled"] .cp-main .cp-coverage-prompt a.cp-prompt-phone { white-space: normal; }
.cp-main .cp-address {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-size: calc(16px * var(--fs, 1));
  line-height: 1.55;
}
.cp-address .cp-icon { width: calc(20px * var(--fs, 1)); height: calc(20px * var(--fs, 1)); margin-top: 2px; }
.cp-address > span { min-width: 0; overflow-wrap: anywhere; }
.cp-address strong {
  display: block;
  font-size: calc(13px * var(--fs, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cp-map { margin: 0; }
.cp-map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 4px 18px var(--color-shadow);
}
@media (min-width: 1024px) {
  .cp-coverage-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 56px; align-items: center; }
}
@media (max-width: 767px) {
  .cp-coverage { padding: 48px 0; }
}
@media (max-width: 359px) {
  .cp-area-list { grid-template-columns: minmax(0, 1fr); }
}

/* --- Review (beige accent) ------------------------------------------------ */
.cp-trust { background: var(--surface-accent); padding: 72px 0; }
.cp-review-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.cp-review h2 { margin-bottom: 20px; }
.cp-review-card {
  margin: 0 0 24px;
  padding: 32px 32px 28px;
  background: var(--color-neutral-light);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--color-shadow);
}
.cp-quote-mark { display: block; width: 44px; height: 33px; margin-bottom: 14px; }
.cp-review-card blockquote { margin: 0; }
.cp-review-card blockquote p {
  margin: 0;
  font-size: calc(19px * var(--fs, 1));
  line-height: 1.65;
  color: var(--color-neutral-dark);
}
.cp-review-card figcaption { margin-top: 18px; }
.cp-review-card cite {
  font-style: normal;
  font-weight: 700;
  font-size: calc(15px * var(--fs, 1));
  color: var(--color-neutral-dark);
}
.cp-review-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 60% 50%;
  border-radius: 12px;
  box-shadow: 0 4px 18px var(--color-shadow);
}
/* The homepage trust bar's "See More Reviews" link, same values as the
   approved .trust-bar .link-see-more rules, applied in this scope. */
.cp-main .cp-review .link-see-more {
  background: transparent;
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
  text-decoration: none;
  gap: 8px;
  min-height: 44px;
  line-height: 1.2;
}
.cp-main .cp-review .link-see-more:hover {
  background: var(--color-secondary);
  color: var(--color-neutral-dark);
  border-color: var(--color-neutral-dark);
}
.cp-review .link-see-more .icon { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .cp-review-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 56px; align-items: center; }
}
@media (max-width: 767px) {
  .cp-trust { padding: 48px 0; }
  .cp-review-card { padding: 24px 20px 20px; }
  .cp-review-card blockquote p { font-size: calc(17px * var(--fs, 1)); }
  .cp-review-photo img { aspect-ratio: 3 / 2; object-position: 64% 55%; }
}

/* --- FAQ ---------------------------------------------------------------- */
.cp-faq { background: var(--surface-default); padding: 72px 0; }
.cp-faq-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.cp-faq h2 { margin: 0; }
.cp-faq-list { display: grid; gap: 10px; }
.cp-faq-item {
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  background: var(--color-neutral-light);
}
.cp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 18px;
  cursor: pointer;
  font-weight: 700;
  font-size: calc(17px * var(--fs, 1));
  line-height: 1.4;
  list-style: none;
  overflow-wrap: anywhere;
}
.cp-faq-item summary::-webkit-details-marker { display: none; }
.cp-faq-item summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: calc(1.4em);
  line-height: 1;
  color: var(--color-secondary-on-light);
}
.cp-faq-item[open] summary::after { content: "\2212"; }
.cp-faq-item summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.cp-faq-a { padding: 0 18px 16px; }
.cp-faq-a p { margin: 0; line-height: 1.65; }
.cp-faq-a a { overflow-wrap: anywhere; }
@media (min-width: 1024px) {
  .cp-faq-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 64px; align-items: start; }
}
@media (max-width: 767px) {
  .cp-faq { padding: 48px 0; }
}

/* --- Final emergency route (beige, centred group) ------------------------ */
.cp-emergency { background: var(--surface-accent); padding: 40px 0; }
.cp-emergency-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 32px;
}
.cp-emergency-text { text-align: left; }
.cp-emergency h2 { font-size: calc(24px * var(--fs, 1)); margin: 0 0 2px; }
.cp-emergency p { margin: 0; font-size: calc(16px * var(--fs, 1)); }
@media (max-width: 767px) {
  .cp-emergency { padding: 32px 0 36px; }
  .cp-emergency-inner { flex-direction: column; gap: 14px; }
  .cp-emergency-text { text-align: center; }
}

/* --- Enlarged text (widget): stack and let long items wrap ---------------- */
html[data-a11y-text="scaled"] .cp-lines { grid-template-columns: minmax(0, 1fr); }
html[data-a11y-text="scaled"] .cp-main a.cp-btn { white-space: normal; text-align: center; padding-block: 8px; }
html[data-a11y-text="scaled"] .cp-area-list { grid-template-columns: minmax(0, 1fr); }

/* layout.container: fluid. The opening takes the header's and hero's outer edges; the copy keeps a
   readable width beside a wider, more compact form; the section padding follows the content. */
@media (min-width: 1024px) {
  .cp-opening { padding: 56px 0 64px; }
  .cp-opening-grid { max-width: var(--fluid-max); padding-inline: var(--fluid-gutter);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); }
  .cp-info { max-width: 600px; }
  .cp-form-col { width: 100%; max-width: 880px; justify-self: end; }
  .cp-form-panel .contact-form textarea { height: 96px; min-height: 96px; }
}
/* contact_page.opening.phone_style: call_link. The homepage hero's call action, value for value
   (hero_overlay .hfo a.hfo-call; a bordered full-width button where the hero stacks). */
.cp-main .cp-opening a.cp-call-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(20px * var(--fs, 1));
  line-height: 1.25;
  color: var(--color-contrast);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.cp-main .cp-opening a.cp-call-link:hover { color: var(--color-secondary); }
.cp-call-link .icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--color-secondary); }
@media (max-width: 1023px) {
  .cp-main .cp-opening a.cp-call-link {
    display: flex;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
    padding: 10px 16px;
    border: 2px solid var(--color-contrast);
    border-radius: 4px;
    text-decoration: none;
    font-size: calc(19px * var(--fs, 1));
  }
  .cp-main .cp-opening a.cp-call-link:hover { background: var(--color-contrast); color: var(--color-primary); }
  .cp-main .cp-opening a.cp-call-link:hover .icon { color: var(--color-primary); }
}
/* contact_page.opening.mobile_align: center. Phones: the phone and hours lines, their icons,
   labels and text centred under the centred introduction; desktop unchanged. */
@media (max-width: 767px) {
  .cp-lines { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .cp-line { width: 100%; max-width: 360px; text-align: center; }
  .cp-main .cp-lines a.cp-btn { width: auto; min-width: 220px; padding: 0 22px; }
  .cp-line-label, .cp-line-hours { text-align: center; }
  .cp-main .cp-opening a.cp-email { justify-content: center; }
  /* Revision 2026-10-08: the hours at the email's size; PHONE and EMAIL larger, still secondary. */
  .cp-main .cp-opening .cp-line-hours { font-size: calc(16px * var(--fs, 1)); }
  .cp-main .cp-opening .cp-line-label { font-size: calc(14px * var(--fs, 1)); }
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}