/* 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% -> #F1F2F4
   --color-secondary-on-light derived from #b99a66 -> #82683C (#ffffff 5.26:1, #F1F2F4 4.69:1)
   --color-muted derived from #1c1c1c at 35% -> #6B6B6B (#ffffff 5.33:1, #F1F2F4 4.76:1)
   --color-shadow derived from #1c1c1c at 10% alpha -> rgba(28, 28, 28, 0.1)
   --color-focus derived from #b99a66 -> #A5844C: neither secondary nor secondary-on-light reaches 3.0:1 on every light and dark surface (#ffffff 3.50:1, #F1F2F4 3.12:1, #0e2b4c 4.09:1, #1c1c1c 4.87:1)
   --color-rating from the reference gold #F5B301 -> #B38301 (#ffffff 3.41:1, #F1F2F4 3.04:1)
*/
:root {
  --color-primary: #0e2b4c;
  --color-secondary: #b99a66;
  --surface-default: #ffffff;
  --surface-accent: #F1F2F4;
  --color-accent: var(--surface-accent);
  --color-secondary-on-light: #82683C;
  --color-neutral-dark: #1c1c1c;
  --color-neutral-light: var(--surface-default);
  --color-contrast: #ffffff;
  --color-border-subtle: rgba(28, 28, 28, 0.12);
  --color-muted: #6B6B6B;
  --color-shadow: rgba(28, 28, 28, 0.1);
  --color-shadow-strong: rgba(28, 28, 28, 0.28);
  --color-focus: #A5844C;
  --color-rating: #B38301;
  --font-heading: "Archivo", "Arial Narrow", Arial, sans-serif;
  --font-body: "Archivo", Arial, 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: system mobile chrome, menu and action bar (mobile at 1180px and below, client-scoped variant) --- */

.header-inner { display: none; }
.mobile-chrome { display: flex; }

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

.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: 1180px) {
  .mobile-chrome .logo-mobile { min-height: 44px; }
  .announcement-banner a { padding-block: 11px; margin-block: -11px; }
}

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

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

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

/* brand.logo.mobile_height: 56px; ceiling 56px. */
.site-header .logo-mobile img { max-height: min(calc(56px * var(--fs, 1)), 56px); }
@media (max-width: 479px) {
  .mobile-chrome .logo-mobile img { max-height: 48px; }
}

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

/* --- 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: 1180px) {
  .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: 1180px) {
  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: 1180px) {
  /* 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: 1180px) 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; }

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

:root { --fluid-max: 1920px; --fluid-gutter: max(20px, min(clamp(24px, 4.5vw, 104px), calc((100vw - 1000px) / 2))); }

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

/* --- Client-scoped variant prime_stone_2026_10_13 --- */

/* Client-scoped variant prime_stone_2026_10_13 (classification: client_scoped_variant; client:
   Prime Stone and Tile; default: false; reusable: false; catalogue: none). Authorized by Kevin,
   2026-10-13 (governance/decisions/2026-10-13_prime_stone_client_variant.md).

   The approved Prime Stone pages' stylesheet (05 - Approvals/prime-stone-approved-pages-2026-10-13),
   ported unchanged in its normal-mode values, with three mechanical integrations so the system's
   accessibility layer reaches it:
     - every selector is .pst- scoped (this file is loaded by the three Prime Stone pages only);
     - every font size is calc(<approved value> * var(--fs, 1)) and every font shorthand is written
       as longhands with the values the shorthand resolved to (line-height normal where it set none);
     - the approved colours are the system tokens where they are the same colour (navy
       --color-primary, gold --color-secondary, white --color-contrast, ink --color-neutral-dark,
       page white --surface-default), and --pst-* properties otherwise, which the high-contrast
       mode below resolves to the same high-contrast values the widget gives the system tokens.
   Authorized adjustments and corrections are marked AUTHORIZED with their basis. */

:root {
  --pst-navy-deep: #0a213d;
  --pst-navy-card: #0c2443;
  --pst-gold-dark: #a3854f;
  --pst-body: #3b3b3b;
  --pst-copy: #2b2b2b;
  --pst-line: #d9d9d9;
  --pst-mist: #f4f4f4;
  --pst-grey-band: #f5f5f5;
  --pst-ice: #f5f8fb;
  --pst-star: #f39b1f;
  --pst-fb: #1877f2;
  --pst-on-dark: #f2f4f7;
  --pst-on-dark-soft: #e9edf2;
  --pst-crumb: #cfd8e3;
  --pst-rev-date: #aab6c6;
  --pst-rev-text: #b9c3cf;
  --pst-rec: #8fb3ff;
  --pst-rev-bg: #12345a;
  --pst-rev-glow-a: #1d4470;
  --pst-rev-glow-b: #18385d;
  --pst-avatar: #2c4a6e;
  --pst-g-blue: #4285f4;
  --pst-dot: #8d9aab;
  --pst-rv-dot: #a9b6c6;
  --pst-field-border: #8f8f8f;
  --pst-drop-border: #cfcfcf;
  --pst-drop-ink: #333;
  --pst-drop-head: #222;
  /* ACCESSIBILITY CORRECTION (text-contrast confirmed 4.20:1 and 3.54:1 < 4.5): the smallest darkening
     that passes: contact lead #777 -> #727272 (4.51:1 on #f5f8fb), upload helper #888 -> #767676 (4.54:1). */
  --pst-lead: #727272;
  --pst-helper: #767676;
  --pst-cta-a: #7f8b98;
  --pst-cta-b: #9aa5b1;
  --pst-cta-c: #87929f;
  --pst-cta-d: #a6afb9;
  --pst-display: var(--font-heading);
  --pst-text: var(--font-body);
  --pst-review: "DM Sans", Arial, sans-serif;
  --pst-wrap-max: 1420px;
  --pst-gutter: clamp(16px, 6vw, 99px);
}

/* The existing high-contrast mode (html[data-a11y-contrast="high"]) resolves the variant's own
   colours to the values the widget gives the system tokens: black, white and its yellow accent. */
html[data-a11y-contrast="high"] {
  --pst-navy-deep: #000000; --pst-navy-card: #000000; --pst-gold-dark: #FFD100; --pst-body: #000000;
  --pst-copy: #000000; --pst-line: #000000; --pst-mist: #FFFFFF; --pst-grey-band: #FFFFFF; --pst-ice: #FFFFFF;
  --pst-star: #FFD100; --pst-fb: #000000; --pst-on-dark: #FFFFFF; --pst-on-dark-soft: #FFFFFF; --pst-crumb: #FFFFFF;
  --pst-rev-date: #FFFFFF; --pst-rev-text: #FFFFFF; --pst-rec: #FFD100; --pst-rev-bg: #000000;
  --pst-rev-glow-a: #000000; --pst-rev-glow-b: #000000; --pst-avatar: #000000; --pst-g-blue: #000000;
  --pst-dot: #000000; --pst-rv-dot: #FFFFFF; --pst-field-border: #000000; --pst-drop-border: #000000;
  --pst-drop-ink: #000000; --pst-drop-head: #000000; --pst-lead: #000000; --pst-helper: #000000;
  --pst-cta-a: #000000; --pst-cta-b: #000000; --pst-cta-c: #000000; --pst-cta-d: #000000;
}
/* The existing readable-font mode swaps --font-heading and --font-body; the review font follows. */
html[data-a11y-font="readable"] { --pst-review: var(--font-body); }

/* --- Page base (approved body, headings and link colour) --- */
body { margin: 0; background: var(--surface-default); color: var(--pst-body); font-family: var(--pst-text);
  font-size: calc(16px * var(--fs, 1)); line-height: 1.6; font-weight: 400; font-stretch: 96%; }
.pst-page img { max-width: 100%; display: block; }
main a, .pst-page a { color: inherit; }
/* Supplied headings inherit the body's 1.6 line-height unless a section sets its own; the system
   base type scale's heading line-heights are restated so they do not apply here. */
.pst-page h1, .pst-page h2, .pst-page h3 { font-family: var(--pst-display); font-stretch: 88%; color: var(--color-neutral-dark);
  margin: 0; text-wrap: balance; line-height: 1.6; }
.pst-wrap { max-width: var(--pst-wrap-max); margin: 0 auto; padding-inline: var(--pst-gutter); }
.pst-page h2.pst-sec { font-size: calc(clamp(30px, 3.3vw, 52px) * var(--fs, 1)); font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: -.005em; }

/* --- Buttons (the markup also carries the system .btn hook; these values restore the approved look) --- */
.pst-page .pst-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 34px;
  font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(16px * var(--fs, 1)); line-height: normal;
  font-family: var(--pst-display); font-stretch: 90%; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; border-radius: 0; cursor: pointer; letter-spacing: .01em; white-space: nowrap; transition: none; }
.pst-page .pst-btn-gold { background: var(--color-secondary); color: var(--color-primary); }
/* ACCESSIBILITY CORRECTION (text-contrast confirmed white on #b99a66 2.67:1; ui-contrast confirmed the hover
   white on #a3854f 3.49:1): the gold backgrounds are kept; the label is the supplied navy (5.36:1), and on
   the darker hover gold, where navy measures 4.10:1, the supplied ink (#1c1c1c, 4.89:1). */
.pst-page .pst-btn-gold:hover { background: var(--pst-gold-dark); color: var(--color-neutral-dark); border-color: transparent; }
.pst-page .pst-btn-ghost { border-color: var(--color-contrast); color: var(--color-contrast); background: transparent; }
.pst-page .pst-btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.pst-page .pst-btn-navy-ghost { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-contrast); }
.pst-page .pst-btn-navy-ghost:hover { background: var(--pst-ice); }

/* --- Header: the approved desktop row inside the system's .site-header --- */
.pst-header-row { display: none; align-items: center; gap: 28px; min-height: 142px; }
.pst-logo { flex: 0 0 auto; }
.pst-logo img { height: 118px; width: auto; max-height: none; }
/* AUTHORIZED (Kevin, 2026-10-14 round 3, item 2): the horizontal white logo (1443x645, the footer's format)
   at its own proportions, 62px tall (139px wide) inside the unchanged 142px row; with FAQ out of the
   navigation the row keeps room for the links, quote button and call block from 1181px (measured). */
.pst-logo img.pst-logo-h { height: 62px; }
.pst-nav { display: flex; flex: 0 1 auto; gap: clamp(16px, 2.1vw, 34px); margin-left: auto; font-style: normal; font-variant: normal;
  font-weight: 600; font-size: calc(16px * var(--fs, 1)); line-height: normal; font-family: var(--pst-display);
  font-stretch: 92%; text-transform: uppercase; }
.pst-nav a { text-decoration: none; white-space: nowrap; color: inherit; }
.pst-nav a:hover { color: var(--color-secondary); }
/* AUTHORIZED (Kevin, 2026-10-14, item 2): AV's desktop arrangement: the quote button, then the system's
   pulse call (generator.header render_pulse_call and its CSS: gold circle, rings, static under reduced
   motion) with the number and the compact hours line beneath, in Prime Stone's type and colours. */
.pst-ctas { display: flex; align-items: center; flex: 0 0 auto; }
.pst-header-row .header-call { font-family: var(--pst-display); font-stretch: 92%; }
.pst-header-row .header-call .phone-number { color: var(--color-secondary); font-weight: 700; }
.pst-header-row .header-call .hours-line { color: var(--color-contrast); font-weight: 500; }
/* AUTHORIZED (Kevin, 2026-10-14, item 3): the header and hero take AV's fluid container on the desktop
   row (cross_cutting FLUID_MAX 1920px and FLUID_GUTTER); at 1180px and below they keep the approved
   page gutter, aligned with the approved mobile chrome. Body sections keep .pst-wrap (1420px). */
.pst-fluid { max-width: var(--pst-wrap-max); margin: 0 auto; padding-inline: var(--pst-gutter); }
@media (min-width: 1181px) {
  .pst-fluid { max-width: var(--fluid-max); padding-inline: var(--fluid-gutter); }
}
/* AUTHORIZED (Kevin, 2026-10-14, item 3: the header fits at its transition without smaller text, fewer
   links or clipping): from 1181px to 1365px the row's spacing tightens (navigation gaps 16px, row gaps
   18px, the quote button's side padding 22px), so it stays inside the content edges; the text sizes,
   links and the call block are unchanged, and from 1366px the spacing is as before. */
@media (min-width: 1181px) and (max-width: 1365px) {
  .pst-header-row { gap: 18px; }
  .pst-header-row .pst-nav { gap: 16px; }
  .pst-header-row .pst-ctas { gap: 20px; }
  .pst-header-row .pst-ctas .pst-btn { padding-inline: 22px; }
}
.pst-dd { position: relative; }
/* Kevin, 2026-10-14 round 3, item 3: Countertops is a link (Home's services section); the dropdown still
   opens on hover and on keyboard focus within it. */
.pst-dd > .pst-dd-link { display: inline-flex; gap: 6px; align-items: center; }
.pst-dd > .pst-dd-link::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); }
.pst-dd-menu { position: absolute; top: calc(100% + 18px); left: -18px; background: var(--color-contrast); min-width: 230px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 8px 0; display: none; z-index: 10; }
.pst-dd-menu a { display: block; color: var(--color-neutral-dark); padding: 12px 20px; text-transform: none; font-weight: 600; }
.pst-dd-menu a:hover, .pst-dd-menu a[aria-current="page"] { background: var(--pst-ice); color: var(--color-primary); }
.pst-dd:hover .pst-dd-menu, .pst-dd:focus-within .pst-dd-menu, .pst-dd.pst-open .pst-dd-menu { display: block; }
.pst-dd::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 20px; }
/* AUTHORIZED (build instruction 7, header breakpoint): the approved desktop row from 1181px, the
   system mobile chrome at 1180px and below (header collapse_px 1181; the supplied max-width 1180px), so no width is without a working header. */
@media (min-width: 1181px) {
  .pst-header-row { display: flex; }
}
/* AUTHORIZED (build instruction 7, header alignment): the system mobile chrome's content takes the
   approved page gutter (.wrap) instead of its own 16px/12px inset; the MENU box is unchanged. */
.site-header .mobile-chrome, .site-header .mobile-chrome.mobile-only { max-width: var(--pst-wrap-max); padding-inline: var(--pst-gutter); }
@media (max-width: 479px) {
  .site-header .mobile-chrome, .site-header .mobile-chrome.mobile-only { padding-inline: var(--pst-gutter); }
}

/* --- Hero (the approved full-width background; content on the header's container, .pst-fluid) --- */
/* The hero's base colour (the supplied overlay's navy) under the cover image: not visible while the image
   is shown; it keeps the white hero text readable before or without the image, and gives the contrast
   checks the hero's colour instead of the page white. Stated in audit FIDELITY_ADJUSTED. */
.pst-hero { position: relative; background-color: var(--color-primary); background-position: center; background-size: cover;
  background-repeat: no-repeat; color: var(--color-contrast); }
.pst-hero-in { padding-block: clamp(56px, 7vw, 100px) clamp(48px, 6vw, 90px); }
/* AUTHORIZED (Kevin, 2026-10-14, item 4): on phones the Home photograph is positioned to show the
   countertops rather than the range (the hero record's mobile_image_position; same photograph). */
@media (max-width: 900px) {
  .pst-hero { background-position: var(--pst-hero-pos-m, center); }
}
.pst-hero.pst-page h1 { color: var(--color-contrast); font-size: calc(clamp(44px, 5.6vw, 88px) * var(--fs, 1)); font-weight: 700;
  line-height: 1.08; text-transform: uppercase; font-stretch: 86%; }
.pst-hero p { max-width: 640px; font-size: calc(17px * var(--fs, 1)); margin: 18px 0 0; line-height: 1.5; color: var(--pst-on-dark); }
.pst-hero .pst-acts { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 30px; }
.pst-trust { list-style: none; margin: clamp(36px, 4.5vw, 64px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pst-trust li { display: flex; align-items: center; gap: 14px; min-height: 76px; background: var(--pst-navy-deep);
  border-top: 4px solid var(--color-secondary); padding: 16px 24px; }
.pst-trust svg { flex: 0 0 auto; width: 30px; height: 30px; color: var(--color-secondary); }
.pst-trust li > span { font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(17px * var(--fs, 1)); line-height: 1.25;
  font-family: var(--pst-display); font-stretch: 92%; color: var(--color-contrast); text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 900px) { .pst-trust { grid-template-columns: 1fr; gap: 10px; } .pst-trust li { min-height: 60px; } }
.pst-sub-hero .pst-hero-in { padding-block: clamp(48px, 6vw, 84px) clamp(48px, 6vw, 84px); }
.pst-crumbs { display: flex; gap: 10px; align-items: center; font-size: calc(14px * var(--fs, 1)); color: var(--pst-crumb); margin-bottom: 18px; }
.pst-crumbs a { color: var(--color-contrast); text-decoration: none; }
.pst-crumbs a:hover { text-decoration: underline; }
.pst-crumbs ol { display: contents; list-style: none; margin: 0; padding: 0; }
.pst-crumbs li { display: contents; }
/* AUTHORIZED (build instruction 7 and 9, service-page hero controls): below the 1180px collapse the
   fixed bar carries Call Us and the quote, so the Quartz and Granite hero buttons are hidden there (1180px and below). */
@media (max-width: 1180px) {
  .pst-hero .pst-acts.pst-mobile-hidden { display: none; }
  /* AUTHORIZED (Kevin, 2026-10-14, item 11): the Quartz and Granite project sections' Quote and Call
     buttons too (gallery mobile_actions: hidden); Home keeps its buttons. */
  .pst-gal-h .pst-acts.pst-mobile-hidden { display: none; }
}

/* AUTHORIZED (Kevin, 2026-10-14 round 3 additions, item 2): one customer's review in full under Home's hero,
   centred on white at a readable width, five gold stars beside the attribution. */
.pst-quote { background: var(--surface-default); padding-block: clamp(48px, 5.5vw, 80px) clamp(8px, 1.5vw, 24px); }
.pst-quote-fig { margin: 0 auto; max-width: 860px; text-align: center; }
.pst-quote blockquote { margin: 0; }
.pst-quote blockquote p { margin: 0; font-style: normal; font-variant: normal; font-weight: 500; font-size: calc(clamp(19px, 1.9vw, 25px) * var(--fs, 1));
  line-height: 1.55; font-family: var(--pst-review); color: var(--color-neutral-dark); }
.pst-quote figcaption { margin-top: 22px; display: flex; justify-content: center; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.pst-quote-stars { display: inline-flex; gap: 3px; color: var(--color-secondary); }
.pst-quote-stars svg { width: 20px; height: 20px; }
.pst-quote-by { font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(16px * var(--fs, 1)); line-height: normal;
  font-family: var(--pst-display); font-stretch: 92%; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary); }

/* --- About / split --- */
.pst-about { padding-block: clamp(56px, 6vw, 90px); }
.pst-about-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pst-page .pst-about h2 { font-size: calc(clamp(32px, 3.4vw, 50px) * var(--fs, 1)); font-weight: 700; line-height: 1.5; text-transform: uppercase; }
.pst-about p { margin: 0 0 22px; font-size: calc(17px * var(--fs, 1)); max-width: 62ch; color: var(--pst-copy); }
.pst-about p b { color: var(--color-neutral-dark); }
.pst-about .pst-btn { margin-top: 16px; }
.pst-comp { position: relative; display: grid; grid-template-columns: 38% 62%; align-items: start; }
.pst-yrs { padding-top: 9%; text-align: center; }
.pst-yrs-n { font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(clamp(70px, 8vw, 128px) * var(--fs, 1)); line-height: 1;
  font-family: var(--pst-display); font-stretch: 85%; color: var(--color-secondary); }
.pst-yrs-l { font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(clamp(14px, 1.3vw, 20px) * var(--fs, 1)); line-height: normal;
  font-family: var(--pst-display); text-transform: uppercase; color: var(--color-neutral-dark); margin-top: 10px; }
.pst-page .pst-mark { width: 100%; height: auto; aspect-ratio: 408/486; object-fit: cover; }
.pst-page .pst-stones { position: absolute; left: 0; bottom: 4.2%; width: 63.5%; height: auto; box-shadow: 0 2px 0 rgba(0, 0, 0, .02); }
.pst-photo-frame img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
.pst-blueprint { background: var(--pst-grey-band); }

/* --- Cards (service cards and the four "included" cards) --- */
.pst-sol { background: var(--pst-grey-band); padding-block: clamp(56px, 6vw, 84px); }
.pst-sol h2 { text-align: center; }
.pst-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 60px; }
.pst-card { background: var(--color-contrast); box-shadow: 0 4px 18px rgba(0, 0, 0, .07); display: flex; flex-direction: column; min-width: 0; }
/* The supplied service-card images take their 259px height from their height attribute (no CSS
   height); the system base layer's img { height: auto } would replace it, so it is stated here. */
.pst-page .pst-card img { width: 100%; height: 259px; aspect-ratio: 452/259; object-fit: cover; }
.pst-card-b { padding: 30px 24px 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.pst-page .pst-card h3 { font-size: calc(clamp(24px, 2vw, 32px) * var(--fs, 1)); font-weight: 600; font-stretch: 92%; }
.pst-card p { margin: 0; font-size: calc(16.5px * var(--fs, 1)); line-height: 1.5; color: var(--pst-copy); }
.pst-page .pst-card a { margin-top: auto; color: var(--color-primary); /* ACCESSIBILITY CORRECTION (text-contrast
  confirmed gold #b99a66 on white 2.67:1): the supplied navy (14.4:1). */ font-style: normal; font-variant: normal; font-weight: 600;
  font-size: calc(16px * var(--fs, 1)); line-height: normal; font-family: var(--pst-display); text-transform: uppercase;
  text-decoration: none; font-stretch: 92%; }
.pst-page .pst-card a:hover { text-decoration: underline; }
.pst-cards.pst-cards-four { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; }
.pst-page .pst-cards-four .pst-card img { height: auto; aspect-ratio: 4/3; }
.pst-page .pst-cards-four .pst-card h3 { font-size: calc(clamp(21px, 1.6vw, 25px) * var(--fs, 1)); }
.pst-cards-four .pst-card-b { padding: 24px 22px 28px; }
.pst-incl { background: var(--pst-grey-band); }

/* --- Values over the kitchen photo --- */
.pst-vals { position: relative; background: var(--color-primary); color: var(--color-contrast); overflow: hidden; }
.pst-vals-bg { position: absolute; inset: 0 0 0 auto; width: 62%; background-position: center; background-size: cover; background-repeat: no-repeat; }
.pst-vals-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--color-primary) 0%, rgba(14, 43, 76, .7) 30%, rgba(14, 43, 76, .25) 100%); }
.pst-vals-in { position: relative; padding-block: clamp(56px, 6vw, 96px); }
.pst-page .pst-vals h2 { color: var(--color-contrast); max-width: 26ch; }
.pst-vlist { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 30px; max-width: 600px; }
/* AUTHORIZED (Kevin, 2026-10-14, item 6): the same icon artwork shown larger (40px box and 22px glyph to
   52px and 28px) and centred against the heading and quote together (it spans both rows). */
.pst-vlist li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 16px; }
.pst-vic { width: 52px; height: 52px; background: var(--color-secondary); display: grid; place-items: center;
  grid-row: 1 / span 2; align-self: center; }
.pst-vic svg { width: 28px; height: 28px; color: var(--color-contrast); }
.pst-page .pst-vlist h3 { grid-column: 2; color: var(--color-contrast); font-size: calc(clamp(22px, 1.8vw, 28px) * var(--fs, 1)); font-weight: 600; font-stretch: 92%; align-self: end; }
.pst-vlist p { grid-column: 2; margin: 0; color: var(--pst-on-dark-soft); font-size: calc(16.5px * var(--fs, 1)); line-height: 1.5; }

/* --- Process steps --- */
.pst-proc { padding-block: clamp(56px, 7vw, 100px); }
.pst-proc h2 { text-align: center; }
.pst-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 70px; }
.pst-step { background: var(--color-contrast); box-shadow: 0 4px 18px rgba(0, 0, 0, .08); padding: 52px 40px 54px; text-align: center;
  display: grid; justify-items: center; gap: 14px; align-content: start; }
.pst-num { width: 90px; height: 90px; background: var(--color-primary); color: var(--color-contrast); display: grid; place-items: center;
  font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(46px * var(--fs, 1)); line-height: normal;
  font-family: var(--pst-display); font-stretch: 88%; }
.pst-page .pst-step h3 { font-size: calc(clamp(22px, 1.9vw, 28px) * var(--fs, 1)); font-weight: 600; font-stretch: 92%; margin-top: 14px; }
.pst-step p { margin: 0; font-size: calc(16.5px * var(--fs, 1)); line-height: 1.5; color: var(--pst-copy); max-width: 34ch; }

/* --- Project strip --- */
.pst-gal { background: var(--pst-mist); padding-block: clamp(56px, 6vw, 90px) 70px; }
.pst-gal-h { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.pst-gal-h h2 { max-width: 22ch; }
.pst-gal-h .pst-acts { display: flex; gap: 22px; flex-wrap: wrap; }
.pst-strip { display: flex; gap: 17px; overflow-x: auto; scroll-snap-type: x mandatory; margin-top: 56px; padding-inline: var(--pst-gutter); scrollbar-width: none; }
.pst-strip::-webkit-scrollbar { display: none; }
.pst-page .pst-strip img { flex: 0 0 auto; height: clamp(240px, 25vw, 398px); width: auto; aspect-ratio: 4/3; object-fit: cover; scroll-snap-align: start; }
/* AUTHORIZED (Kevin, 2026-10-14, item 7): Previous and Next under the strip in the review arrows' style
   (a 2px ring, drawn navy on this light band) at a 36px circle inside a 44px target; on the desktop
   row they replace the dots, and at 1180px and below the dots stay above them, centred, as the
   progress indicator. aria-disabled marks the ends (the control keeps focus). */
.pst-gal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; margin-top: 32px; }
.pst-gal-arrow { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; color: var(--color-primary); }
.pst-gal-arrow-c { width: 36px; height: 36px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.pst-gal-arrow svg { width: 16px; height: 16px; }
.pst-gal-arrow:hover .pst-gal-arrow-c { background: var(--color-primary); color: var(--color-contrast); }
.pst-gal-arrow[aria-disabled="true"] { cursor: default; opacity: .35; }
.pst-gal-arrow[aria-disabled="true"]:hover .pst-gal-arrow-c { background: none; color: inherit; }
.pst-dots { display: flex; align-items: center; justify-content: center; }
/* AUTHORIZED (build instruction 8, interactive targets): each dot button is a 24px target (the
   system's carousel-dot minimum). Kevin, 2026-10-14: drawn larger and darker so the position reads
   on a phone (10x8px, current 40x8px navy; the others the band's navy at 60%, 3.9:1 on the band). */
.pst-dots button { position: relative; width: 24px; height: 24px; border: 0; padding: 0; background: none; cursor: pointer; flex: 0 0 auto; }
.pst-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 8px; transform: translate(-50%, -50%);
  background: var(--color-primary); opacity: .6; }
.pst-dots button[aria-current="true"] { width: 44px; }
.pst-dots button[aria-current="true"]::before { width: 40px; opacity: 1; }
@media (min-width: 1181px) {
  .pst-dots { display: none; }
}
/* Below the desktop row the progress takes its own centred row above the two arrows. */
@media (max-width: 1180px) {
  .pst-dots { order: -1; flex: 1 0 100%; margin-bottom: 4px; }
}

/* --- Reviews --- */
.pst-rev { position: relative; background: radial-gradient(1200px 500px at 20% 10%, var(--pst-rev-glow-a) 0%, transparent 60%),
  radial-gradient(900px 400px at 85% 90%, var(--pst-rev-glow-b) 0%, transparent 60%), var(--pst-rev-bg);
  color: var(--color-contrast); padding-block: clamp(56px, 6vw, 90px) 60px; overflow: hidden; }
.pst-rev::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, transparent 0 120px, rgba(255, 255, 255, .035) 120px 122px, transparent 122px 260px),
  repeating-linear-gradient(35deg, transparent 0 180px, rgba(255, 255, 255, .03) 180px 181px, transparent 181px 330px); pointer-events: none; }
.pst-page .pst-rev h2 { color: var(--color-contrast); text-align: center; max-width: 20ch; margin-inline: auto; position: relative; }
.pst-rv-row { position: relative; margin-top: 56px; display: flex; align-items: center; gap: 12px; }
.pst-rv-track { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; flex: 1; min-width: 0; }
.pst-rv-track::-webkit-scrollbar { display: none; }
.pst-rv { flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start; background: var(--pst-navy-card); border-radius: 10px; padding: 40px 32px 44px;
  font-family: var(--pst-review); min-width: 0; }
.pst-rv-top { display: grid; grid-template-columns: 94px minmax(0, 1fr) 48px; gap: 22px; align-items: center; }
.pst-page .pst-av { width: 94px; height: 94px; border-radius: 50%; object-fit: cover; background: var(--pst-avatar); display: grid; place-items: center;
  font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(32px * var(--fs, 1)); line-height: normal; font-family: var(--pst-review); color: var(--color-contrast); }
.pst-rv-n { font-style: normal; font-variant: normal; font-weight: 500; font-size: calc(21px * var(--fs, 1)); line-height: normal; font-family: var(--pst-review); color: var(--color-contrast); }
.pst-rv-d { font-size: calc(16px * var(--fs, 1)); color: var(--pst-rev-date); }
.pst-fb { width: 48px; height: 48px; border-radius: 50%; background: var(--pst-fb); display: grid; place-items: center; }
.pst-fb svg { width: 24px; height: 24px; color: var(--color-contrast); }
.pst-stars { color: var(--pst-star); font-size: calc(28px * var(--fs, 1)); letter-spacing: 2px; margin: 18px 0 10px; }
.pst-rec { margin: 20px 0 12px; font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(13px * var(--fs, 1)); line-height: normal;
  font-family: var(--pst-review); letter-spacing: .12em; text-transform: uppercase; color: var(--pst-rec); }
.pst-gg { width: 48px; height: 48px; border-radius: 50%; background: var(--color-contrast); display: grid; place-items: center;
  font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(24px * var(--fs, 1)); line-height: normal; font-family: var(--pst-review); color: var(--pst-g-blue); }
.pst-rv p { margin: 0; color: var(--pst-rev-text); font-size: calc(16px * var(--fs, 1)); line-height: 1.4; }
/* AUTHORIZED (Kevin, 2026-10-14 round 3 additions, item 3): the supplied four-line clamp applies once the page
   script runs (without it the whole review shows); "Read more" opens each review in place, "Read less" closes
   it, and the card grows with the text (the track has no fixed height). */
.pst-rv-track.pst-clamp .pst-rv:not(.pst-rv-open) .pst-rv-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pst-rv-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--color-contrast); font-style: normal; font-variant: normal; font-weight: 600; font-size: calc(15px * var(--fs, 1)); line-height: normal;
  font-family: var(--pst-review); text-decoration: underline; text-underline-offset: 3px; }
.pst-rv-more[hidden] { display: none; }
.pst-arrow { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--color-contrast); background: none;
  color: var(--color-contrast); display: grid; place-items: center; cursor: pointer; }
.pst-arrow svg { width: 16px; height: 16px; }
.pst-rv-dots { display: flex; gap: 10px; justify-content: center; margin-top: 36px; position: relative; }
.pst-rv-dots span { width: 6px; height: 6px; background: var(--pst-rv-dot); }
.pst-rv-dots span.pst-on { width: 56px; background: var(--color-contrast); }
/* AUTHORIZED (Kevin, 2026-10-14, item 8): the marks follow the track (one per reachable position, drawn
   by the page script); on phones they are larger and closer to white so the position reads. */
@media (max-width: 520px) {
  .pst-rv-dots { gap: 8px; margin-top: 28px; }
  .pst-rv-dots span { width: 10px; height: 8px; background: var(--pst-on-dark-soft); opacity: .55; }
  .pst-rv-dots span.pst-on { width: 40px; opacity: 1; background: var(--color-contrast); }
}
.pst-spot-card { position: relative; max-width: 880px; margin: 48px auto 0; background: var(--pst-navy-card); border-radius: 10px;
  padding: clamp(28px, 4vw, 48px); text-align: center; }
.pst-spot-card .pst-rec { margin-top: 0; }
.pst-spot-card blockquote { margin: 0; font-style: normal; font-variant: normal; font-weight: 500; font-size: calc(clamp(19px, 2vw, 26px) * var(--fs, 1));
  line-height: 1.5; font-family: var(--pst-review); color: var(--color-contrast); }
.pst-spot-card figcaption { margin-top: 20px; color: var(--pst-rev-date); font-style: normal; font-variant: normal; font-weight: 400;
  font-size: calc(16px * var(--fs, 1)); line-height: normal; font-family: var(--pst-review); }
.pst-spot-more { position: relative; text-align: center; margin: 26px 0 0; }
.pst-page .pst-spot-more a { color: var(--color-contrast); font-weight: 600; }

/* --- Brands band --- */
.pst-brands-band { background: var(--color-primary); color: var(--color-contrast); padding-block: clamp(48px, 5vw, 72px); }
.pst-brands-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(24px, 4vw, 64px); align-items: center; }
.pst-page .pst-brands-band h2 { color: var(--color-contrast); }
.pst-brands-band p { color: var(--pst-on-dark-soft); max-width: 60ch; margin: 14px 0 0; font-size: calc(17px * var(--fs, 1)); }
.pst-page .pst-brands { margin-top: 18px; width: min(605px, 100%); height: auto; }
.pst-brands-in.pst-has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.pst-page .pst-band-photo { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
/* AUTHORIZED (Kevin, 2026-10-14, item 10): Granite's photo band (Kitchens, Bathrooms and Repairs) takes the
   split section's columns and gap above it (Natural Stone, One of a Kind), so the photograph has the same
   width and 4:3 proportions; the navy background, photograph and copy are unchanged. */
.pst-brands-in.pst-has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, .98fr); gap: clamp(32px, 5vw, 80px); }

/* --- Contact --- */
/* AUTHORIZED (Kevin, 2026-10-14 round 3, item 1): the contact panel sits in the body sections' container
   (.pst-wrap: 1420px and the page gutter), centred, with white space above it like the sections around it. */
.pst-ct-sec { padding-top: clamp(40px, 5vw, 80px); }
/* AUTHORIZED (Kevin, 2026-10-14 final adjustments, item 2): Contact and Get a Free Quote (#contact) land by this
   section's own scroll margin against the page's 212px scroll padding (generator.build_page): below the desktop
   row, the "Get a Free Countertop Quote" heading 16px under the 76px header (section padding, then the form's
   top padding, above it); on the desktop row, the panel 24px under the 142px header, so the reviews above are
   out of view. */
#contact.pst-ct-sec { scroll-margin-top: calc(76px + 16px - 212px - clamp(40px, 5vw, 80px) - clamp(40px, 4vw, 64px)); }
@media (min-width: 901px) and (max-width: 1180px) {
  #contact.pst-ct-sec { scroll-margin-top: calc(76px + 16px - 212px - clamp(40px, 5vw, 80px) - clamp(32px, 3vw, 48px)); }
}
@media (min-width: 1181px) {
  #contact.pst-ct-sec { scroll-margin-top: calc(142px + 24px - 212px - clamp(40px, 5vw, 80px)); }
}
.pst-ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--pst-ice); }
/* AUTHORIZED (Kevin, 2026-10-14, item 9): the map is an image at its own proportions. Phones keep the
   approved strip (the same centre crop the background gave, object-fit: cover at 320px); from 901px it is
   a contained image in its column, never stretched to the form's height, with the photo frames' shadow
   and the review cards' 10px radius. */
.pst-page .pst-map img { width: 100%; height: 320px; object-fit: cover; object-position: center; }
/* AUTHORIZED (Kevin, 2026-10-14 round 3 additions, item 1): phone, email, address and hours under the map, in
   its column, labelled, in the page's body type and colours; no card, heading or decoration. On phones each
   row is a 44px target and the address breaks after the street (the footer's rule). */
.pst-map-info { margin: 0; padding: 0 clamp(16px, 4vw, 32px) 20px; display: grid; gap: 0; font-size: calc(16px * var(--fs, 1)); line-height: 1.5; color: var(--pst-copy); }
.pst-map-info > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 44px; }
.pst-map-info dt { font-weight: 600; color: var(--color-neutral-dark); }
.pst-map-info dd { margin: 0; }
.pst-page .pst-map-info a { display: inline-block; padding-block: 10px; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.pst-form-side { padding: clamp(40px, 4vw, 64px) clamp(16px, 4vw, 80px) clamp(40px, 4vw, 64px); display: grid; justify-items: center; }
.pst-page .pst-form-side h2 { font-size: calc(clamp(28px, 2.6vw, 40px) * var(--fs, 1)); font-weight: 700; text-transform: uppercase; text-align: center; }
.pst-form-side .pst-lead { margin: 8px 0 22px; color: var(--pst-lead); font-size: calc(20px * var(--fs, 1)); text-align: center; }
.pst-form { width: min(510px, 100%); display: grid; gap: 16px; }
.pst-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pst-page .pst-f input, .pst-page .pst-f textarea { width: 100%; border: 1px solid var(--pst-field-border); background: var(--color-contrast); padding: 18px 12px;
  font-style: normal; font-variant: normal; font-weight: 400; font-size: calc(15px * var(--fs, 1)); line-height: normal; font-family: var(--pst-text);
  color: var(--color-neutral-dark); border-radius: 0; }
.pst-page .pst-f textarea { min-height: 130px; resize: vertical; }
/* AUTHORIZED (build instruction 8, form labels): the approved labels, previously moved off-screen,
   are shown above their fields in the page's own body type; field order, widths and placeholders
   are unchanged. */
.pst-f label { display: block; margin: 0 0 6px; font-size: calc(15px * var(--fs, 1)); line-height: 1.4; font-weight: 600; color: var(--color-neutral-dark); text-align: left; }
.pst-drop { border: 2px dashed var(--pst-drop-border); padding: 30px 16px; display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--color-contrast); }
.pst-drop svg { width: 26px; height: 26px; color: var(--pst-drop-ink); }
.pst-drop b { font-weight: 500; color: var(--pst-drop-head); font-size: calc(16px * var(--fs, 1)); }
.pst-drop small { color: var(--pst-helper); font-size: calc(13.5px * var(--fs, 1)); }
.pst-drop label.pst-bf { margin-top: 8px; border: 1px solid var(--pst-drop-border); border-radius: 6px; padding: 7px 24px; cursor: pointer; color: var(--pst-drop-ink);
  font-size: calc(16px * var(--fs, 1)); }
/* ACCESSIBILITY CORRECTION (keyboard-walk, reflow; WCAG 2.4.7, 1.4.10): the supplied page moved the file
   input 9999px off-screen, so keyboard focus landed where no one could see it and the page gained an
   off-screen element. The input is now visually hidden inside the upload area, and "Browse File" shows
   the system focus ring while the input has keyboard focus. Nothing changes until it is focused. */
.pst-drop { position: relative; }
.pst-drop input { position: absolute; left: 50%; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pst-drop:has(input:focus-visible) .pst-bf { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.pst-drop .pst-picked { color: var(--color-primary); font-size: calc(14px * var(--fs, 1)); }
.pst-form .pst-btn { width: 100%; min-height: 58px; }
.pst-sent { color: var(--color-primary); text-align: center; font-weight: 600; }
/* AUTHORIZED (Kevin, 2026-10-14, item 9): a more compact desktop form: tighter Add photos area, the
   project details at about three lines (rows="3"), smaller field and section padding. Phones unchanged. */
@media (min-width: 901px) {
  /* Kevin, 2026-10-14 (final adjustments): the form comes first in the page; on desktop the side column (the map
     above the contact details) keeps the left, the form the right, exactly as before. */
  .pst-ct-aside { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 20px; padding: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 56px); }
  .pst-form-side { grid-column: 2; grid-row: 1; }
  .pst-ct-aside .pst-map { order: -1; width: 100%; max-width: 600px; }
  .pst-page .pst-map img { height: auto; max-width: 600px; object-fit: contain; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, .12); }
  .pst-map-info { width: 100%; max-width: 600px; padding: 0; gap: 6px; }
  .pst-map-info > div { min-height: 0; align-items: baseline; }
  .pst-page .pst-map-info a { display: inline; padding-block: 0; }
  .pst-form-side { padding-block: clamp(32px, 3vw, 48px); }
  .pst-form-side .pst-lead { margin: 6px 0 16px; }
  .pst-form { gap: 12px; }
  .pst-page .pst-f input, .pst-page .pst-f textarea { padding: 13px 12px; }
  .pst-page .pst-f textarea { min-height: 0; }
  .pst-drop { padding: 12px 16px; gap: 2px; }
  .pst-drop svg { width: 22px; height: 22px; }
  .pst-drop label.pst-bf { margin-top: 4px; padding: 4px 20px; }
  .pst-form .pst-btn { min-height: 54px; }
}

/* --- FAQ --- */
.pst-faq { padding-block: clamp(56px, 7vw, 110px); }
.pst-faq h2 { text-align: center; }
.pst-faq-l { max-width: 1160px; margin: 70px auto 0; }
.pst-faq details { border-bottom: 1px solid var(--pst-line); }
.pst-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 34px 0; cursor: pointer;
  font-size: calc(clamp(17px, 1.4vw, 20px) * var(--fs, 1)); color: var(--color-neutral-dark); font-weight: 500; }
.pst-faq summary::-webkit-details-marker { display: none; }
.pst-faq summary::after { content: "+"; font-style: normal; font-variant: normal; font-weight: 600; font-size: calc(34px * var(--fs, 1)); line-height: 1;
  font-family: var(--pst-display); color: var(--color-secondary); transition: transform .2s; }
.pst-faq details[open] summary::after { transform: rotate(45deg); }
/* Kevin, 2026-10-14 round 3, item 5: answers use the row's full width (the 80ch limit removed, FAQ only). */
.pst-faq details p { margin: -12px 0 30px; color: var(--pst-body); }
.pst-page .pst-faq details p a { color: var(--color-primary); font-weight: 600; }

/* --- Closing band and footer --- */
.pst-cta-band { background: linear-gradient(to bottom, var(--surface-default) 0 47%, var(--color-primary) 47% 100%); }
.pst-cta { position: relative; background: linear-gradient(115deg, var(--pst-cta-a) 0%, var(--pst-cta-b) 35%, var(--pst-cta-c) 60%, var(--pst-cta-d) 100%);
  color: var(--color-contrast); text-align: center; padding: clamp(40px, 5vw, 64px) 24px; overflow: hidden; }
.pst-cta::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(160deg, transparent 0 40px, rgba(255, 255, 255, .08) 40px 44px, transparent 44px 110px),
  repeating-linear-gradient(20deg, transparent 0 70px, rgba(60, 70, 85, .08) 70px 74px, transparent 74px 160px); pointer-events: none; }
.pst-cta > * { position: relative; }
.pst-page .pst-cta h2 { color: var(--color-contrast); font-size: calc(clamp(28px, 3.4vw, 48px) * var(--fs, 1)); font-weight: 700; line-height: 1.4;
  text-transform: uppercase; max-width: 24ch; margin-inline: auto; }
.pst-cta p { margin: 14px auto 0; max-width: 64ch; font-size: calc(clamp(17px, 1.5vw, 23px) * var(--fs, 1)); line-height: 1.45; }
.pst-cta .pst-btn { margin-top: 22px; min-width: min(354px, 100%); }
footer.site-footer.pst-page { background: var(--color-primary); color: var(--color-contrast); }
/* AUTHORIZED (Kevin, 2026-10-14, item 13): AV's footer layout and spacing (governance/references
   american_valor_mockup_approved_2026-10-08: a wider brand column and equal link columns 48px apart,
   56px above, 18px headings 12px above their links, 44px link and contact rows, a slim closing row),
   with Prime Stone's content, logo, tagline, colours and type. */
.pst-foot { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); column-gap: 48px; row-gap: 32px;
  padding-block: 56px 44px; align-items: start; }
.pst-tag { font-style: normal; font-variant: normal; font-weight: 700; font-size: calc(clamp(26px, 2.4vw, 36px) * var(--fs, 1)); line-height: 1.4;
  font-family: var(--pst-display); font-stretch: 88%; text-transform: uppercase; margin: 20px 0 14px; }
/* AUTHORIZED (Kevin, 2026-10-14 round 3, item 7): a regular paragraph under the logo replaces the tagline. */
.pst-brand-p { margin: 18px 0 0; max-width: 34ch; font-size: calc(15.5px * var(--fs, 1)); line-height: 1.6; font-weight: 400; color: var(--pst-on-dark-soft); }
.pst-soc { display: flex; align-items: center; }
/* The Google and Facebook icons sit under the contact details; on desktop the first circle lines up with the
   contact text (20px icon + 10px gap), not with the detail icons. */
.pst-contact-col .pst-soc { margin: 8px 0 0 30px; }
.pst-page .pst-contact-col .pst-soc a:first-child { margin-left: -8px; }
/* AUTHORIZED (build instruction 8, interactive targets): each social link is a 44px target (the
   system's mobile minimum) around the unchanged 28px gold circle, so the circles sit 16px apart
   (44px centres) instead of 12px; the row's left edge stays on the column. */
.pst-page .pst-soc a { position: relative; width: 44px; height: 44px; display: grid; place-items: center; color: var(--color-primary); }
.pst-page .pst-soc a:first-child { margin-left: -8px; }
.pst-soc a::before { content: ""; position: absolute; left: 8px; top: 8px; width: 28px; height: 28px; border-radius: 50%; background: var(--color-secondary); }
.pst-soc svg { position: relative; width: 16px; height: 16px; }
.pst-page .pst-fh { font-style: normal; font-variant: normal; font-weight: 600; font-size: calc(18px * var(--fs, 1)); line-height: 1.3;
  font-family: var(--pst-display); font-stretch: 92%; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 12px; }
.pst-fl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: calc(15.5px * var(--fs, 1)); }
.pst-page .pst-fl a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: inherit; }
.pst-page .pst-fl a:hover { color: var(--color-secondary); }
.pst-fc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: calc(15.5px * var(--fs, 1)); }
.pst-fc li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; }
.pst-fc svg { width: 20px; height: 20px; color: var(--color-secondary); }
.pst-page .pst-fc a { display: inline-flex; align-items: center; min-height: 44px; }
.pst-page .pst-fc a { color: inherit; text-decoration: none; }
/* Kevin, 2026-10-14 round 3, item 6: the whole address is one link; desktop reads it on one line (wrapping
   as before in the column); phones break it after the street. */
.pst-page .pst-fc a.pst-addr { display: inline-block; padding-block: 11px; }
.pst-page .pst-fc a.pst-addr:hover, .pst-page .pst-fc a:hover { color: var(--color-secondary); }
/* Kevin, 2026-10-14 round 3 additions, item 4: the closing row's background is the footer's own (--color-primary). */
.pst-bar { background: var(--color-primary); color: var(--color-contrast); font-style: normal; font-variant: normal; font-weight: 400;
  font-size: calc(14.5px * var(--fs, 1)); line-height: normal; font-family: var(--pst-display); text-transform: uppercase; }
/* AUTHORIZED (Kevin, 2026-10-14 round 3, item 8): copyright and credit centred together with a modest gap,
   regular weight; only "Blue Crocus Solutions" is a link. */
.pst-bar .pst-wrap { display: flex; justify-content: center; align-items: center; gap: 8px 32px; flex-wrap: wrap; padding-block: 14px; }
.pst-page .pst-bar a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pst-legal-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* The action bar's page-end clearance (generator.header) moves from the gold closing row to the navy
   footer beneath it, so the row stays compact and still ends above the fixed bar and the launcher. */
@media (max-width: 1180px) {
  html body footer.site-footer .pst-bar.footer-legal { padding-bottom: 0; }
  html body footer.site-footer.pst-page { padding-bottom: calc(152px + env(safe-area-inset-bottom, 0px)); }
}
/* Phones: one centred column, as AV's footer (logo, tagline, social, headings, links, contact details and
   the closing row), with AV's 28px between groups. */
@media (max-width: 767px) {
  footer.site-footer .pst-foot { grid-template-columns: 1fr; row-gap: 28px; padding-block: 48px 36px; text-align: center; justify-items: center; }
  .pst-foot img { margin-inline: auto; }
  .pst-soc { justify-content: center; }
  .pst-page .pst-soc a:first-child { margin-left: 0; }
  .pst-fl { justify-items: center; }
  .pst-fc { justify-items: center; }
  .pst-fc li { grid-template-columns: 20px auto; justify-content: center; text-align: left; }
  .pst-contact-col .pst-soc { margin: 8px 0 0; }
  .pst-page .pst-contact-col .pst-soc a:first-child { margin-left: 0; }
  .pst-brand-p { margin-inline: auto; }
  .pst-addr-l { display: block; }
  .pst-addr-sep { display: none; }
  /* Kevin, 2026-10-14 (final adjustments, item 3): 12px fine print at a 1.4 line height, the copyright and the
     credit as two centred blocks 16px apart (the gap between the blocks, not between their wrapped lines). */
  .pst-bar { font-size: calc(12px * var(--fs, 1)); line-height: 1.4; }
  .pst-bar .pst-wrap { flex-direction: column; justify-content: center; gap: 16px; padding-block: 12px; text-align: center; }
}

/* --- Approved breakpoints --- */
@media (max-width: 900px) {
  .pst-about-in, .pst-ct { grid-template-columns: 1fr; }
  .pst-cards, .pst-steps { grid-template-columns: 1fr; }
  .pst-vals-bg { width: 100%; opacity: .35; }
  .pst-rv { flex-basis: 100%; }
  .pst-foot { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .pst-row2 { grid-template-columns: 1fr; }
  .pst-rv-top { grid-template-columns: 64px minmax(0, 1fr) 40px; gap: 14px; }
  .pst-page .pst-av { width: 64px; height: 64px; }
  .pst-arrow { display: none; }
  .pst-page .pst-btn { padding: 0 22px; }
}
@media (max-width: 1100px) { .pst-cards.pst-cards-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .pst-brands-in, .pst-brands-in.pst-has-photo { grid-template-columns: 1fr; } .pst-blueprint .pst-photo-frame { order: 2; } }
@media (max-width: 520px) { .pst-cards.pst-cards-four { grid-template-columns: 1fr; } }
/* AUTHORIZED (Kevin, 2026-10-14, item 12): on phones and narrow tablets, where the columns stack, each
   section's introduction is centred: the headings that were left-aligned (owner story, splits, values,
   projects, brand bands), the projects' buttons beside their heading, and the brand band's single
   introductory paragraph. Cards, lists, form, FAQ answers, review text and body paragraphs keep their
   alignment; the desktop layout is unchanged. */
@media (max-width: 900px) {
  .pst-page .pst-about h2, .pst-page .pst-vals h2, .pst-page .pst-brands-band h2, .pst-brands-band p { text-align: center; margin-inline: auto; }
  .pst-gal-h { justify-content: center; text-align: center; }
  .pst-gal-h h2 { margin-inline: auto; }
  .pst-gal-h .pst-acts { justify-content: center; }
}

/* The existing grayscale mode covers the system regions (.site-header, .hero, main, .site-footer);
   the closing band sits between </main> and the footer, so it is named here. */
html[data-a11y-mono="1"] .pst-cta-band { filter: grayscale(1); }
/* The existing scaled-text mode: the approved desktop row and the nav may wrap instead of overflow. */
html[data-a11y-text="scaled"] .pst-header-row { flex-wrap: wrap; row-gap: 12px; padding-block: 12px; }
html[data-a11y-text="scaled"] .pst-nav { flex-wrap: wrap; }
html[data-a11y-text="scaled"] .pst-nav a, html[data-a11y-text="scaled"] .pst-page .pst-btn { white-space: normal; }

/* Decorative images (empty alt) sit in an aria-hidden wrapper that takes no box, so the supplied
   grid and absolute positioning are unchanged. */
.pst-deco { display: contents; }

/* ACCESSIBILITY CORRECTION (reflow at 150% and 175% text; WCAG 1.4.4, 1.4.10): with the system's text
   scaling the footer's email address, one long word, ran past narrow columns. Under enlarged text it may
   now wrap; at 100% text it renders exactly as supplied. */
html[data-a11y-text="scaled"] .pst-fc span, html[data-a11y-text="scaled"] .pst-fc a { overflow-wrap: anywhere; }
/* The same for the contact details under the map (round 3 additions): the email is one long word. */
html[data-a11y-text="scaled"] .pst-map-info dd, html[data-a11y-text="scaled"] .pst-map-info a { max-width: 100%; overflow-wrap: anywhere; }
/* The same correction at 320px and 175% text: the trust strip's uppercase labels ("STONEWORK") and the
   footer tagline ("COUNTERTOPS") were single words wider than the column (page 348px and 338px wide). */
html[data-a11y-text="scaled"] .pst-trust li > span, html[data-a11y-text="scaled"] .pst-tag { min-width: 0; overflow-wrap: anywhere; }
/* The existing high-contrast mode turns the gold token yellow; the gold "10+" takes the mode's dark text there
   (normal mode unchanged). The closing row is on the footer's background since round 3, so it keeps its text. */
html[data-a11y-contrast="high"] .pst-yrs-n { color: var(--color-neutral-dark); }

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

/* Port: form error state */
.pst-form-error{color:#b91c1c;font-size:.9rem;margin:.5rem 0 0;}
/* Kitchen Countertops page (added 2026-10-15) */
.kc-intro{padding-block:clamp(48px,5vw,72px) clamp(8px,2vw,20px)}
.kc-lead{max-width:880px;margin:0 auto;text-align:center;font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:#2b2b2b}
.kc-lead b{color:#1c1c1c}
.kc-sec-p{max-width:760px;margin:18px auto 0;text-align:center;font-size:17px;color:#2b2b2b}
.kc-sec-p.kc-after{margin-top:44px}
.kc-mats{background:#fff}
.kc-mats .pst-cards{margin-top:44px}
.kc-process .pst-cards.pst-cards-four .pst-card h3{font-size:clamp(19px,1.4vw,22px);line-height:1.3}
.kc-band p+p{margin-top:16px}
.kc-band b{color:#fff}
/* Inline links inside card text (added 2026-10-15) */
.pst-page .pst-card p a{font-family:inherit;font-size:inherit;font-stretch:inherit;line-height:inherit;font-weight:400;text-transform:none;text-decoration:underline;color:inherit}