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

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

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

/* --- Service pages (Candidate implementation variants; not Active, not defaults) --- */
/* --- Service page layout --- */
.sp-inner {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: 20px;
}
.sp-section { padding-block: 64px; }
.sp-section-head {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
}
.sp-section-head h2 { margin: 0; text-wrap: balance; }
.sp-lead {
  margin: 12px 0 0;
  font-size: calc(18px * var(--fs, 1));
  text-wrap: balance;
}
.sp-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.sp-more-link, .sp-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* Balanced rows: equal widths, incomplete rows centred (SVP-SPEC-039). */
.sp-balanced {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.sp-balanced > li { flex: 0 0 100%; min-width: 0; }
@media (min-width: 768px) {
  .sp-balanced > li { flex-basis: calc((100% - (var(--sp-cols-tablet, 2) - 1) * 24px) / var(--sp-cols-tablet, 2)); }
}
@media (min-width: 1024px) {
  .sp-balanced > li { flex-basis: calc((100% - (var(--sp-cols, 3) - 1) * 24px) / var(--sp-cols, 3)); }
}

/* --- Service page breadcrumb --- */
.sp-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  font-size: calc(15px * var(--fs, 1));
  line-height: 1.4;
}
.sp-breadcrumb li { display: inline-flex; align-items: center; }
.sp-breadcrumb li + li::before { content: "/" / ""; margin-right: 8px; }
.sp-breadcrumb a { display: inline-flex; align-items: center; text-decoration: underline; }
.sp-breadcrumb-bar { padding-block: 8px; }
.sp-breadcrumb--below-header a { color: var(--color-secondary-on-light); }
.sp-breadcrumb--below-header [aria-current] { color: var(--color-neutral-dark); }
.sp-breadcrumb--inside-hero { margin-bottom: 16px; }
.sp-breadcrumb--inside-hero a,
.sp-breadcrumb--inside-hero [aria-current] { color: var(--color-contrast); }
.sp-breadcrumb--inside-hero li + li::before { color: var(--color-secondary); }
@media (max-width: 767px) {
  .sp-breadcrumb a { min-height: 44px; }
  .sp-breadcrumb--inside-hero ol { justify-content: center; }
}

/* --- Service page hero --- */
/* SVP-SEC-HERO-06: straight seam, no radius, shadow or decoration (SVP-OBS-229). */
.sp-hero--full-bleed-split-image {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-primary);
  color: var(--color-contrast);
}
.sp-hero-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}
.sp-hero-copy-inner { width: 100%; max-width: 640px; }
.sp-hero--full-bleed-split-image h1 { margin: 0 0 16px; }
.sp-hero-intro {
  font-size: calc(18px * var(--fs, 1));
  margin: 0 0 24px;
}
.sp-hero--full-bleed-split-image .sp-hero-intro { color: var(--color-contrast); }
.sp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 24px;
}
.sp-hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--color-contrast);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sp-hero-phone .icon { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-secondary); }
.sp-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--sp-fp-phone, 50% 50%);
}
/* SVP-OBS-213: emphasis in an existing brand token (contrast asserted at build). */
.sp-h1-emphasis { color: var(--color-secondary); }
@media (min-width: 768px) {
  .sp-hero--full-bleed-split-image {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    min-height: clamp(440px, 36vw, 680px);
  }
  .sp-hero-copy { text-align: left; padding: 48px 40px; }
  .sp-hero-actions { justify-content: flex-start; }
  .sp-hero-photo { position: relative; min-height: 100%; }
  .sp-hero-photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-position: var(--sp-fp-tablet, var(--sp-fp-desktop, 50% 50%));
  }
  .sp-hero--photo-with-quote-form .hero-image img.sp-has-focal {
    object-position: var(--sp-fp-tablet, var(--sp-fp-desktop, 50% 50%));
  }
}
@media (min-width: 1024px) {
  .sp-hero-photo img,
  .sp-hero--photo-with-quote-form .hero-image img.sp-has-focal {
    object-position: var(--sp-fp-desktop, var(--sp-fp-tablet, 50% 50%));
  }
}
@media (min-width: 1280px) {
  .sp-hero-photo img,
  .sp-hero--photo-with-quote-form .hero-image img.sp-has-focal {
    object-position: var(--sp-fp-ultrawide, var(--sp-fp-desktop, 50% 50%));
  }
}

/* --- Service page cards and takeaway --- */
.sp-card {
  background: var(--surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--color-shadow);
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
}
.sp-card h3 {
  margin: 0;
  font-size: calc(20px * var(--fs, 1));
}
.sp-card p { margin: 0; }
.sp-card-icon { display: block; width: 56px; }
.sp-card-icon svg { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .sp-card--has-icon {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
  }
  .sp-card--has-icon .sp-card-icon { width: 40px; }
  .sp-card--has-icon p { grid-column: 1 / -1; }
}

/* SVP-SPEC-040: a plain paragraph on a high-contrast surface, as wide as the cards. */
.sp-takeaway {
  margin: 32px 0 0;
  padding: 20px 24px;
  background: var(--color-primary);
  color: var(--color-contrast);
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  text-align: center;
  font-weight: 600;
  font-size: calc(18px * var(--fs, 1));
}

/* --- Service page explanation --- */
.sp-explanation-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.sp-explanation-copy { max-width: 820px; }
.sp-explanation-inner:not(.sp-has-image) .sp-explanation-copy { margin-inline: auto; }
.sp-explanation-copy h2 { margin: 0 0 16px; }
.sp-explanation-body { margin: 0; }
.sp-explanation-photo img, .sp-related-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
/* SVP-OBS-227: a real list; the markers are decorative. */
.sp-checklist {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.sp-checklist li { display: flex; align-items: flex-start; gap: 12px; }
.sp-check {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sp-check svg { width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .sp-explanation-inner.sp-has-image {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* --- Service page process --- */
.sp-steps { list-style: none; margin: 0; padding: 0; }
.sp-step-num {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: calc(20px * var(--fs, 1));
  line-height: 1;
}
.sp-step h3 {
  margin: 0 0 6px;
  font-size: calc(20px * var(--fs, 1));
}
.sp-step p { margin: 0; }
.sp-steps--numbered .sp-step { display: flex; gap: 16px; padding-block: 20px; }
.sp-steps--numbered .sp-step:first-child { padding-top: 0; }
.sp-steps--numbered .sp-step:last-child { padding-bottom: 0; }
.sp-steps--numbered .sp-step + .sp-step { border-top: 1px solid var(--color-border-subtle); }
.sp-process-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}
.sp-process-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
@media (min-width: 1024px) {
  .sp-process-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }
  .sp-process-photo { position: relative; min-height: 320px; }
  .sp-process-photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
    object-position: var(--sp-fp, 50% 50%);
  }
}
@media (max-width: 767px) {
  .sp-cta-row .btn { width: 100%; }
}

/* --- Service page reviews and pull quote --- */
.sp-review {
  background: var(--surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  min-width: 0;
}
.sp-review--featured { border-left: 4px solid var(--color-secondary); }
.sp-review-label {
  margin: 0;
  font-size: calc(15px * var(--fs, 1));
  font-weight: 700;
  color: var(--color-secondary-on-light);
}
.sp-review .review-rating { display: flex; align-items: center; gap: 8px; }
.sp-review-quote { margin: 0; }
.sp-review-quote p { margin: 0; font-weight: 400; }
.sp-review--featured .sp-review-quote p { font-size: calc(20px * var(--fs, 1)); line-height: 1.6; }
.sp-review-quote cite, .sp-pull-quote-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-weight: 700;
  font-size: calc(15px * var(--fs, 1));
}
.sp-review-source {
  margin: 0;
  font-size: calc(14px * var(--fs, 1));
  color: var(--color-muted);
}
.sp-reviews-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.sp-review-stack { display: grid; gap: 24px; }
.sp-reviews .trust-bar-ratings { margin-bottom: 32px; }
@media (min-width: 1024px) {
  .sp-reviews-featured { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* SVP-OBS-246: the pull quote's placement; its marks follow TRUST-KEVIN-PQ-001. */
.sp-pull-quote { padding-block: 40px; }
.sp-pull-quote-quote {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}
.sp-pull-quote-quote .review-rating { justify-content: center; display: flex; gap: 8px; }
.sp-pull-quote-quote p {
  margin: 0;
  font-size: calc(20px * var(--fs, 1));
  font-weight: 500;
  line-height: 1.5;
}
/* The source line is a paragraph too; it keeps its own small size. */
.sp-pull-quote-quote .sp-review-source {
  margin-top: 4px;
  font-size: calc(14px * var(--fs, 1));
  font-weight: 400;
}

/* --- Service page related service --- */
.sp-related-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.sp-related-copy h2 { margin: 0 0 12px; }
.sp-related-copy p { margin: 0 0 20px; }
@media (min-width: 768px) {
  .sp-related-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

/* --- Service page FAQ --- */
.sp-faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.sp-faq-item {
  background: var(--surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
}
.sp-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: calc(18px * var(--fs, 1));
  line-height: 1.4;
}
/* G-6: a long word in a question wraps inside the summary under enlarged text instead of
   overflowing it; nothing is hidden and no text is made smaller. */
.sp-faq-q { min-width: 0; overflow-wrap: anywhere; }
.sp-faq-item summary::-webkit-details-marker { display: none; }
.sp-faq-item summary:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}
.sp-faq-icon { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.sp-faq-icon::before, .sp-faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--color-neutral-dark);
}
.sp-faq-icon::after { transform: rotate(90deg); transition: transform 120ms linear; }
.sp-faq-item[open] .sp-faq-icon::after { transform: rotate(0deg); }
.sp-faq-answer { padding: 0 20px 16px; }
.sp-faq-answer p { margin: 0; }

/* --- Service page phones --- */
@media (max-width: 767px) {
  .sp-section { padding-block: 48px; }
  .sp-intro, .sp-explanation-copy h2, .sp-hero h1 { text-align: center; }
  .sp-card, .sp-step, .sp-review, .sp-faq-list, .sp-explanation-body, .sp-checklist,
  .sp-hero .hero-form { text-align: left; }
}

/* --- 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); }
/* layout.page_hero_extra_height: taller desktop photo heroes on service and city pages. */
@media (min-width: 1024px) {
  .hfb--page { --hfb-extra: clamp(60px, calc(60px + (100vw - 1024px) / 4), 100px); }
  .hfb--page .hfb-inner { padding-top: calc(48px + var(--hfb-extra) / 2); padding-bottom: calc(104px + var(--hfb-extra) / 2); }
}

/* --- Service page treatments (Package B; optional, selected by page input) --- */
/* --- Service page treatments: hero points and phone alignment --- */
.hfo-points {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  row-gap: 10px;
}
.hfo-points li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  font-size: calc(18px * var(--fs, 1));
  line-height: 1.4;
}
.hfo-points svg { width: 22px; height: 22px; margin-top: 2px; display: block; }
@media (max-width: 767px) {
  .hfo--mobile-copy-centered .hfo-copy h1 { text-align: center; }
  .hfo--mobile-copy-centered .hfo-copy .hfo-intro { text-align: center; }
  .hfo--mobile-copy-centered .hfo-points { width: fit-content; max-width: 100%; margin-inline: auto; }
  .hfo--mobile-breadcrumb-centered .sp-breadcrumb ol { justify-content: center; }
}

/* --- Service page treatments: grouped option cards --- */
.sp-card-groups .sp-card-group + .sp-card-group { margin-top: 40px; }
.sp-card-group-label {
  margin: 0 0 20px;
  font-family: var(--font-heading);
  font-size: calc(26px * var(--fs, 1));
  line-height: 1.25;
  font-weight: 800;
  color: var(--color-primary);
  text-align: center;
}
.sp-card-group-label::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 10px auto 0;
  background: var(--color-secondary);
}
.sp-card-groups .sp-card { border-top: 4px solid var(--color-secondary); }
.sp-card h4 {
  margin: 0;
  font-size: calc(20px * var(--fs, 1));
}

/* --- Service page treatments: installation track and phone step cards --- */
/* A vertical timeline below 1024px (fixed marker column, the line through every marker);
   a horizontal four-stage track from 1024px. One subtle band; not cards. */
.sp-track-band {
  background: var(--surface-accent);
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  padding: 28px 20px;
  max-width: 1120px;
  margin: 0 auto;
}
.sp-track {
  --sp-track-marker: 22px;
  --sp-track-marker-top: calc((1.25 * 20px * var(--fs, 1) - var(--sp-track-marker)) / 2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.sp-track-stage {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  padding-bottom: 28px;
}
.sp-track-stage:last-child { padding-bottom: 0; }
.sp-track-marker {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: var(--sp-track-marker);
  height: var(--sp-track-marker);
  margin-top: var(--sp-track-marker-top);
  justify-self: center;
  border-radius: 50%;
  background: var(--color-secondary);
  border: 4px solid var(--color-primary);
}
/* The line segment from this marker's centre to the next marker's centre. */
.sp-track-stage::before {
  content: "";
  position: absolute;
  left: 15px;
  top: calc(var(--sp-track-marker-top) + var(--sp-track-marker) / 2);
  height: 100%;
  width: 2px;
  background: var(--color-primary);
}
.sp-track-stage:last-child::before { display: none; }
.sp-track-stage h3 {
  margin: 0 0 6px;
  font-size: calc(20px * var(--fs, 1));
  line-height: 1.25;
}
.sp-track-stage p { margin: 0; }
@media (min-width: 1024px) {
  .sp-track-band { padding: 36px 32px; }
  .sp-track {
    display: grid;
    grid-template-columns: repeat(var(--sp-track-stages, 4), minmax(0, 1fr));
    column-gap: 32px;
  }
  .sp-track-stage {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: start;
    text-align: center;
    row-gap: 16px;
    padding-bottom: 0;
  }
  .sp-track-marker { margin-top: 0; }
  /* The horizontal segment from this marker's centre to the next (one column plus the gap). */
  .sp-track-stage::before {
    left: 50%;
    top: calc(var(--sp-track-marker) / 2 - 1px);
    width: calc(100% + 32px);
    height: 2px;
  }
  .sp-track-copy { max-width: 240px; }
}
@media (max-width: 767px) {
  .sp-steps--number-row .sp-step {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
  }
  .sp-steps--number-row .sp-step h3 { margin: 0; }
  .sp-steps--number-row .sp-step p { grid-column: 1 / -1; }
}

/* --- Service page treatments: service options --- */
.sp-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 10px;
}
.sp-check-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  line-height: 1.45;
}
.sp-check-list svg { width: 22px; height: 22px; margin-top: 1px; display: block; }
.sp-option {
  background: var(--surface-default);
  border: 1px solid var(--color-border-subtle);
  border-top: 4px solid var(--color-secondary);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--color-shadow);
  padding: 24px;
  display: grid;
  align-content: start;
  row-gap: 14px;
}
.sp-option-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
}
.sp-option-icon svg { display: block; width: 56px; height: auto; }
.sp-option h3 { margin: 0; font-size: calc(22px * var(--fs, 1)); line-height: 1.25; }
.sp-option-purpose {
  margin: 0;
  font-size: calc(18px * var(--fs, 1));
  line-height: 1.5;
  font-weight: 600;
}
.sp-option-cue-label {
  margin: 4px 0 0;
  font-weight: 700;
  color: var(--color-primary);
}
.sp-option-note {
  margin: 4px 0 0;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-accent);
  border: 1px solid var(--color-border-subtle);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
  line-height: 1.45;
}
.sp-option-note svg { width: 22px; height: 22px; margin-top: 1px; display: block; }
.sp-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .sp-options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
.sp-next-step {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  font-size: calc(18px * var(--fs, 1));
  line-height: 1.5;
  text-wrap: balance;
}
.sp-next-step a { font-weight: 700; }

/* --- Service page treatments: credential proof --- */
.sp-credential-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px;
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--color-shadow);
  background: var(--surface-default);
}
.sp-credential-photo img { display: block; width: 100%; height: auto; border-radius: 10px; }
.sp-credential-copy { display: grid; align-content: center; row-gap: 16px; }
.sp-credential-copy h2 { margin: 0; }
.sp-credential {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 8px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--color-primary);
  color: var(--color-contrast);
}
.sp-credential-icon svg { display: block; width: 44px; height: 44px; }
.sp-credential-text {
  margin: 0;
  font-size: calc(19px * var(--fs, 1));
  line-height: 1.35;
  font-weight: 700;
}
.sp-credential-tag {
  grid-column: 2;
  justify-self: start;
  padding: 2px 10px;
  border: 1px dashed var(--color-secondary);
  border-radius: 4px;
  color: var(--color-secondary);
  font-size: calc(13px * var(--fs, 1));
  font-weight: 700;
  line-height: 1.5;
}
.sp-credential-reason { margin: 0; font-size: calc(18px * var(--fs, 1)); line-height: 1.5; }
.sp-credential-list-heading { margin: 4px 0 0; font-size: calc(20px * var(--fs, 1)); line-height: 1.3; }
@media (max-width: 767px) {
  .sp-credential-panel { padding: 16px; }
  .sp-credential-copy h2 { text-align: center; }
  .sp-credential { grid-template-columns: 36px minmax(0, 1fr); padding: 14px; }
  .sp-credential-icon svg { width: 36px; height: 36px; }
}
@media (min-width: 1024px) {
  .sp-credential-panel {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 40px;
    padding: 28px;
    align-items: center;
  }
}

/* --- Service page treatments: comparison --- */
.sp-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 24px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.sp-compare-column {
  border: 1px solid var(--color-border-subtle);
  border-radius: 12px;
  box-shadow: 0 1px 3px var(--color-shadow);
  background: var(--surface-default);
  overflow: hidden;
  display: grid;
  align-content: start;
}
.sp-compare-head {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 14px;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface-accent);
  border-bottom: 4px solid var(--color-secondary);
}
.sp-compare-head svg { display: block; width: 56px; height: auto; border-radius: 6px; }
.sp-compare-head h3 { margin: 0; font-size: calc(22px * var(--fs, 1)); line-height: 1.25; }
.sp-compare-rows { margin: 0; display: grid; align-content: start; }
.sp-compare-row {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border-subtle);
  display: grid;
  row-gap: 8px;
  align-content: start;
}
.sp-compare-row:first-child { border-top: 0; }
.sp-compare-row dt {
  font-weight: 700;
  color: var(--color-primary);
  font-size: calc(16px * var(--fs, 1));
  line-height: 1.4;
}
.sp-compare-row dd { margin: 0; line-height: 1.5; }
.sp-compare-row--next dd a { font-weight: 700; }
/* A next-step link stands alone in its row: a 24px target (WCAG 2.5.8) without moving the text. */
.sp-compare-row--next dd a { display: inline-block; padding-block: 2px; margin-block: -2px; }
@media (min-width: 768px) {
  .sp-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--sp-compare-span), auto);
    column-gap: 24px;
    row-gap: 0;
  }
  .sp-compare-column { grid-row: span var(--sp-compare-span); grid-template-rows: subgrid; }
  .sp-compare-rows { grid-row: span var(--sp-compare-rows); grid-template-rows: subgrid; }
}

/* --- Industry service-page layer (governed_designs.yaml industries) --- */
/* Balanced card rows: equal widths, incomplete rows centred. */
.jr-balanced, .jr-groups { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  justify-content: center; gap: 20px; }
.jr-balanced > li, .jr-groups > .jr-group { flex: 0 0 100%; min-width: 0; }
@media (min-width: 768px) {
  .jr-balanced > li, .jr-groups > .jr-group { flex-basis: calc((100% - (var(--jr-cols-tablet, 2) - 1) * 20px) / var(--jr-cols-tablet, 2)); }
}
@media (min-width: 1180px) {
  .jr-balanced > li, .jr-groups > .jr-group { flex-basis: calc((100% - (var(--jr-cols, 3) - 1) * 20px) / var(--jr-cols, 3)); }
}

/* Grouped item checklist (master 6.2; L1, L2). */
.jr-group { background: var(--color-contrast); border: 1px solid var(--color-border-subtle);
  border-top: 4px solid var(--color-secondary); border-radius: 10px; padding: 20px 18px 22px;
  box-shadow: 0 2px 10px var(--color-shadow); }
.jr-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.jr-group summary::-webkit-details-marker { display: none; }
.jr-group h3 { margin: 0; font-size: calc(18px * var(--fs, 1)); }
.jr-toggle { display: none; width: 22px; height: 22px; color: var(--color-primary); flex: none; }
.jr-checks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 9px; }
.jr-checks li { display: flex; align-items: flex-start; gap: 9px; font-size: calc(15.5px * var(--fs, 1)); line-height: 1.45; }
.jr-chk { width: 18px; height: 18px; margin-top: 2px; flex: none; color: var(--color-secondary-on-light); }
.jr-item-link { display: inline-flex; align-items: center; min-height: 24px; color: var(--color-secondary-on-light); font-weight: 700; }
.jr-cant { margin-top: 22px; background: var(--color-contrast); border: 1px solid var(--color-border-subtle);
  border-radius: 10px; padding: 22px 20px; display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 18px 44px; align-items: center; }
.jr-cant h3 { margin: 0; }
.jr-cant-head p { margin: 6px 0 0; }
.jr-cant-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 32px; }
.jr-cant-list li { position: relative; padding-left: 24px; font-size: calc(15.5px * var(--fs, 1)); line-height: 1.45; }
.jr-cant-list li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 12px; height: 3px;
  background: var(--color-secondary-on-light); border-radius: 2px; }
.jr-ask { margin-top: 22px; background: var(--color-primary); border-left: 6px solid var(--color-secondary);
  border-radius: 10px; padding: 24px 22px; display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
.jr-ask h3 { margin: 0; color: var(--color-contrast); font-size: calc(24px * var(--fs, 1)); line-height: 1.25; }
.jr-ask p { margin: 6px 0 0; color: var(--color-contrast); font-size: calc(17px * var(--fs, 1)); line-height: 1.5; }
.jr-ask-actions { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.jr-ask-actions .btn { text-align: center; }
.jr-ask-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  color: var(--color-contrast); font-weight: 700; font-size: calc(16px * var(--fs, 1)); text-decoration: underline;
  text-underline-offset: 3px; }
.jr-ask .jr-tel, .jr-ask .jr-tel:hover { color: var(--color-contrast); }
/* Enlarged text: "Or call" and the number may wrap onto two lines inside the card. */
.jr-ask .jr-ask-call { white-space: normal; flex-wrap: wrap; text-align: center; }
.jr-tel { color: var(--color-secondary-on-light); font-weight: 700; text-decoration: underline;
  text-underline-offset: 2px; white-space: nowrap; }
@media (min-width: 768px) {
  .jr-cant { padding: 26px 28px; }
  .jr-cant-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-ask { padding: 28px 32px; }
}
@media (min-width: 1024px) {
  .jr-cant { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
  .jr-ask { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px 40px; }
  .jr-ask-actions { flex-direction: row; align-items: center; gap: 22px; flex: none; }
}
@media (max-width: 767px) {
  .jr-groups { gap: 10px; }
  [data-jr-accordion="phone"] .jr-group { padding: 0; border-top-width: 1px; }
  [data-jr-accordion="phone"] .jr-group summary { padding: 16px 18px; min-height: 56px; cursor: pointer; }
  [data-jr-accordion="phone"] .jr-toggle { display: block; }
  [data-jr-accordion="phone"] .jr-group[open] .jr-toggle { transform: rotate(45deg); }
  [data-jr-accordion="phone"] .jr-checks { margin: 0; padding: 0 18px 18px; }
}

/* Numbered process cards (master 6.4). */
.jr-step { background: var(--color-contrast); border: 1px solid var(--color-border-subtle);
  border-radius: 10px; padding: 24px 22px 26px; box-shadow: 0 2px 10px var(--color-shadow); }
.jr-step-n { display: block; font-family: var(--font-heading); font-weight: 800; font-size: calc(44px * var(--fs, 1));
  line-height: 1; color: var(--color-secondary-on-light); }
.jr-step h3 { margin: 14px 0 0; font-size: calc(19px * var(--fs, 1)); }
.jr-step p { margin: 8px 0 0; font-size: calc(16px * var(--fs, 1)); line-height: 1.6; }
@media (max-width: 767px) {
  .jr-step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .jr-step-n { font-size: calc(36px * var(--fs, 1)); }
  .jr-step h3 { margin: 0; }
  .jr-step p { grid-column: 1 / -1; }
  .sp-cta-row .jr-quote { width: 100%; }
}

/* Cost split (master 6.5). */
.jr-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.jr-split-media img, .jr-split-media svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.jr-split-body h2 { margin: 0; }
.jr-split-lead { margin: 12px 0 0; font-size: calc(18px * var(--fs, 1)); }
.jr-factors { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--color-border-subtle); }
.jr-factor { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--color-border-subtle); }
.jr-factor-icon { width: 32px; flex: none; margin-top: 2px; }
.jr-factor-icon svg { display: block; width: 100%; height: auto; }
.jr-factor h3 { margin: 0; font-size: calc(18px * var(--fs, 1)); }
.jr-factor p { margin: 3px 0 0; font-size: calc(16px * var(--fs, 1)); line-height: 1.55; }
.jr-cost-close { margin: 20px 0; font-weight: 600; }
@media (min-width: 1024px) {
  .jr-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; }
}
@media (max-width: 767px) {
  .jr-split-body h2, .jr-split-lead { text-align: center; }
  .jr-split-body .jr-quote { width: 100%; }
}

/* Identity band (master 6.6). */
.jr-owner { background: var(--color-primary); border-radius: 14px; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: center; padding: 28px 22px; }
.jr-owner-media { max-width: 170px; margin: 0 auto; width: 100%; }
.jr-owner-media img, .jr-owner-media svg { display: block; width: 100%; height: auto; border-radius: 10px; }
.jr-owner h2 { margin: 0; color: var(--color-contrast); text-align: center; }
.jr-owner p { margin: 12px 0 0; color: var(--color-contrast); }
.jr-owner-tag { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-weight: 700; font-size: calc(19px * var(--fs, 1)); }
.jr-star { width: 20px; height: 20px; flex: none; color: var(--color-secondary); }
.jr-call-icon { width: 18px; height: 18px; flex: none; }
.jr-owner-links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.jr-owner-links a, .jr-owner-links .jr-plain { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--color-contrast); font-weight: 700; }
.jr-owner-links svg { width: 18px; height: 18px; color: var(--color-secondary); }
@media (min-width: 768px) {
  .jr-owner { grid-template-columns: 230px minmax(0, 1fr); gap: 40px; padding: 36px 44px; }
  .jr-owner-media { max-width: none; margin: 0; }
  .jr-owner h2 { text-align: left; }
}

/* Cards: hassle and related services (master 6.3, 6.7). */
.jr-card { background: var(--color-contrast); border: 1px solid var(--color-border-subtle);
  border-radius: 10px; padding: 26px 24px; box-shadow: 0 2px 10px var(--color-shadow); display: flex; flex-direction: column; }
.jr-card-top { display: flex; flex-direction: column; gap: 14px; }
.jr-card-icon { display: block; width: 40px; }
.jr-card-icon svg { display: block; width: 100%; height: auto; }
.jr-card h3 { margin: 0; font-size: calc(19px * var(--fs, 1)); }
.jr-card p { margin: 10px 0 0; font-size: calc(16px * var(--fs, 1)); line-height: 1.6; }
.jr-rel h3 { margin-top: 14px; }
.jr-more { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--color-secondary-on-light); }
.jr-rel .jr-plain { margin-top: auto; padding-top: 16px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.jr-more svg, .jr-rel .jr-plain svg { width: 18px; height: 18px; }
.jr-callout { margin: 22px 0 0; background: var(--color-primary); color: var(--color-contrast);
  border: 1px solid var(--color-secondary); border-radius: 12px; padding: 20px; text-align: center;
  font-family: var(--font-heading); font-weight: 600; font-size: calc(17.5px * var(--fs, 1)); line-height: 1.45; }
@media (min-width: 768px) {
  .jr-callout { padding: 22px 28px; font-size: calc(19px * var(--fs, 1)); }
}
@media (max-width: 767px) {
  .jr-card-top { flex-direction: row; align-items: center; gap: 12px; }
  .jr-card-icon { width: 30px; }
  .jr-rel { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .jr-rel h3 { margin-top: 0; }
  .jr-rel p, .jr-rel .jr-more, .jr-rel .jr-plain { grid-column: 1 / -1; }
}

/* Coverage inside the closing info column (master 6.9). */
.jr-serve { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--color-border-subtle); }
.jr-serve-h { margin: 0; font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); font-size: calc(18px * var(--fs, 1)); }
/* Two columns of areas while the names fit; one column when enlarged text needs the room. */
.jr-serve-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5em), 1fr)); gap: 20px; margin-top: 12px; }
.jr-serve-cols li > * { min-width: 0; overflow-wrap: anywhere; }
.jr-serve-group { margin: 0; font-size: calc(13px * var(--fs, 1)); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-muted); }
.jr-serve-cols ul { list-style: none; margin: 6px 0 0; padding: 0; }
.jr-serve-cols li { display: flex; align-items: center; min-height: 36px; font-weight: 600; }
.jr-serve-cols a { color: var(--color-primary); }

/* Reviewed body composition, scoped to industry pages (.jr-main): section rhythm, section
   heads, the FAQ card treatment and the closing heading. Theme tokens, buttons, the shared
   contact form, the header, hero and footer are the engine's and are not restyled here. */
.jr-main > .sp-section { padding-block: 76px; }
.jr-main > .sp-section + .sp-section:not(.sp-closing) { padding-top: 8px; }
.jr-main > .sp-closing { padding-block: 84px; }
.jr-main .sp-section-head { max-width: 760px; margin-bottom: 40px; }
.jr-main .jr-group h3 { font-weight: 700; }
.jr-main .jr-cost-close { font-size: calc(18px * var(--fs, 1)); }
.jr-main .jr-split-media > * { display: block; width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.jr-main .jr-owner-media > * { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.jr-main .sp-faq-list { max-width: 796px; }
.jr-main .sp-faq-item { background: var(--color-contrast); border-radius: 10px; }
.jr-main .sp-faq-item summary { padding: 18px 22px; min-height: 60px; font-size: calc(17.5px * var(--fs, 1)); line-height: 1.33; }
.jr-main .sp-faq-answer { padding: 0 22px 20px; }
.jr-main .sp-faq-answer p { font-size: calc(16.5px * var(--fs, 1)); line-height: 1.7; }
.jr-main .sp-closing h2 { font-size: calc(clamp(30px, 3.4vw, 40px) * var(--fs, 1)); line-height: 1.25; max-width: 13ch; }
.jr-main .jr-serve-group { font-weight: 600; line-height: 1.33; }
@media (min-width: 1024px) {
  .jr-main .jr-split-media > * { min-height: 400px; }
}
@media (max-width: 767px) {
  .jr-main > .sp-section { padding-block: 48px; }
  .jr-main > .sp-section + .sp-section:not(.sp-closing) { padding-top: 8px; }
  .jr-main > .sp-closing { padding-block: 52px; }
  .jr-main .sp-section-head { margin-bottom: 26px; }
  .jr-main .sp-closing h2 { max-width: none; text-align: center; }
  .jr-main .sp-section-head h2, .jr-main .jr-split-body h2, .jr-main .jr-owner h2 { font-size: calc(27px * var(--fs, 1)); }
}
/* No portrait supplied: one balanced, centred text column (added only when a page uses it). */
.jr-owner--text { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.jr-owner--text .jr-owner-body { max-width: 760px; }
.jr-owner.jr-owner--text h2 { text-align: center; }
.jr-owner--text .jr-owner-tag, .jr-owner--text .jr-owner-links { justify-content: center; }

/* Links inside authored copy (added only when a page uses them). */
.jr-text-link { color: var(--color-secondary-on-light); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.jr-text-link:hover { color: var(--color-primary); }

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

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