/* Generated by scripts/build-site.js from kit/tokens/modern.css, sites/andys-plumbing/tokens.css, kit/css/base.css, kit/css/choices.css, kit/css/picker.css, kit/css/diagnosis.css, kit/css/note.css, kit/themes/andys-plumbing/theme.css and the fonts in kit/fonts. Edit those files, not this one. */

/* ===== self-hosted fonts (kit/fonts, SIL OFL 1.1: see fonts/<family>/OFL.txt) ===== */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== kit/tokens/modern.css ===== */
/* Style tokens: MODERN (light, generous space, one strong accent, large photo hero, clean grid).
   Untested scaffold: no site uses it yet. Palette and fonts are set per site in sites/<slug>/tokens.css
   from the art-director brief; the grays below only keep an unconfigured build legible. */
:root {
  /* Palette scaffold (override all of these per site) */
  --color-dominant: #2B2B2B;
  --color-on-dominant: #FFFFFF;
  --color-on-dominant-soft: #E8E8E8;
  --color-accent: #4D4D4D;
  --color-accent-hover: #333333;
  --color-on-accent: #FFFFFF;
  --color-accent-on-dominant: #E8E8E8;
  --color-accent-line: var(--color-accent);
  --color-surface: #FFFFFF;
  --color-surface-alt: #F4F4F4;
  --color-ink: #161616;
  --color-muted: #595959;
  --color-rule: rgba(0, 0, 0, 0.12);
  --color-rule-on-dominant: rgba(255, 255, 255, 0.2);
  --color-chip-bg: rgba(0, 0, 0, 0.04);
  --color-chip-bg-on-dominant: rgba(255, 255, 255, 0.12);
  --color-hatch: rgba(0, 0, 0, 0.08);
  --color-panel-on-dominant: rgba(255, 255, 255, 0.08);
  --color-selection: var(--color-accent-on-dominant);
  --color-notice-bg: var(--color-ink);
  --color-notice-text: var(--color-surface-alt);

  /* Type */
  --font-heading: Arial, sans-serif;
  --font-body: Arial, sans-serif;
  --body-size: 1.0625rem;
  --body-line-height: 1.65;
  --heading-weight: 600;
  --subheading-weight: 600;
  --heading-line-height: 1.1;
  --h1-size: clamp(2.5rem, 6vw, 4.25rem);
  --h2-size: 2.1rem;
  --h3-size: 1.3rem;
  --label-tracking: 0.06em;
  --measure: 62ch;

  /* Layout and shape */
  --container: 1200px;
  --gutter: 24px;
  --section-pad: 112px;
  --section-pad-mobile: 64px;
  --radius-sm: 6px;
  --radius-img: 8px;
}

/* ===== sites/andys-plumbing/tokens.css ===== */
/* Andy's Plumbing tokens (private redesign mockup, app style). Loaded after the kit's base tokens. Yellow is for fills, bars and
   rules only: never yellow text on white; yellow text only on the deep-blue panels. */
:root {
  /* ---- kit token names (kit/css/base.css and the optional modules read these) ---- */
  --color-dominant: #1D5BA8;            /* Andy blue: links, labels, icons; white 6.7:1 */
  --color-dominant-fill: #1D5BA8;       /* Andy blue as a fill (blue buttons, chosen picker pill): same in both schemes */
  --color-dominant-deep: #123A6B;       /* Deep blue: note/closing panels, call tile; white 11.4:1, yellow 7.4:1 */
  --color-on-dominant: #FFFFFF;
  --color-on-dominant-soft: #DCE6F2;    /* body text on the deep panels, 9.2:1 on deep blue */
  --color-sky: #BFD9F2;                 /* the ring round the chosen picker pill; links on deep blue (7.8:1) */
  --color-accent: #FFC93C;              /* Nav yellow: primary buttons, highlight bars, Call */
  --color-accent-hover: #FFD25A;
  --color-on-accent: #14233A;           /* ink on yellow, 10.3:1 */
  --color-accent-on-dominant: #FFC93C;  /* yellow text only on deep blue */
  --color-accent-line: #FFC93C;
  --color-link: #1D5BA8;
  --color-surface: #FFFFFF;             /* tiles: picker, facts, services, reviews, FAQ, form, diagnosis card */
  --color-surface-alt: #EEF3F9;         /* fill: quiet buttons, fields, pills, segmented track */
  --color-surface-raised: #FFFFFF;
  --color-ink: #14233A;                 /* 15.8:1 tile, 14.9:1 page */
  --color-muted: #4F5E70;               /* 6.6:1 tile, 6.2:1 page, 5.9:1 fill */
  --color-rule: rgba(20, 35, 58, 0.08); /* hairlines */
  --color-rule-on-dominant: rgba(255, 255, 255, 0.22);
  --color-chip-bg: #EAF1FA;
  --color-chip-ink: #123A6B;            /* [CONFIRM] chips: 10.4:1 on the chip fill */
  --color-chip-bg-on-dominant: rgba(255, 201, 60, 0.08);
  --color-chip-ink-on-dominant: #FFC93C;
  --color-hatch: rgba(29, 91, 168, 0.08);
  --color-panel-on-dominant: rgba(255, 255, 255, 0.08);
  --color-selection: #FFC93C;
  --color-notice-bg: #14233A;           /* private bar, preview-form label: white 15.8:1 */
  --color-notice-text: #FFFFFF;
  --color-pick: #EAF1FA;                /* icon discs, active nav pill */
  --color-pick-hover: #E3ECF7;
  --color-pick-press: #BFD9F2;
  --color-pick-edge: #123A6B;

  /* ---- app style (theme.css) ---- */
  --app-page: #F4F7FB;                  /* page background, also behind the floating nav */
  --app-tile: #FFFFFF;
  --app-fill: #EEF3F9;
  --app-fill-hover: #E3ECF7;
  --app-summary-hover: #FAFCFE;
  --app-blue-hover: #18509A;
  --app-deep-2: #0E2E57;                /* second stop of the deep panel gradient */
  --app-field-edge: rgba(29, 91, 168, 0.18);
  --app-field-well: #EEF3F9;
  --app-focus: #1D5BA8;                 /* focus ring on the page and tiles */
  --app-focus-on-deep: #FFFFFF;
  --app-focus-glow: rgba(29, 91, 168, 0.15);
  --app-warn-bg: #FFF5D6;
  --app-warn-line: #E6B325;
  --app-warn-icon: #7A5300;
  --app-warn-text: #14233A;             /* 14.4:1 on the warn fill */
  --app-error: #B3261E;                 /* 6.5:1 on the tile */
  --app-error-bg: #FFF6F5;
  --app-highlight: rgba(255, 201, 60, 0.55);
  --app-step-ring: #FFF3CF;
  --app-photo-a: #E9F0F8;               /* photo slot gradient */
  --app-photo-b: #DDE7F3;
  --app-caption-bg: rgba(255, 255, 255, 0.95);
  --app-wash-blue: rgba(29, 91, 168, 0.13);
  --app-wash-yellow: rgba(255, 201, 60, 0.16);
  --app-wash-deep: rgba(255, 201, 60, 0.14);
  --app-glass: rgba(255, 255, 255, 0.72);
  --app-glass-solid: rgba(255, 255, 255, 0.97);
  --app-glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(20, 35, 58, 0.10);
  --app-ghost: rgba(255, 255, 255, 0.12);
  --app-ghost-edge: rgba(255, 255, 255, 0.28);
  --app-on-deep-chip-edge: #FFFFFF;
  /* Layered soft shadows, cool-tinted from deep blue (never grey) */
  --sh-1: 0 1px 1px rgba(18, 58, 107, 0.04), 0 2px 6px -2px rgba(18, 58, 107, 0.06);
  --sh-2: 0 1px 1px rgba(18, 58, 107, 0.04), 0 6px 16px -6px rgba(18, 58, 107, 0.10), 0 24px 48px -20px rgba(18, 58, 107, 0.14);
  --sh-float: 0 1px 1px rgba(18, 58, 107, 0.05), 0 8px 24px -8px rgba(18, 58, 107, 0.18), 0 28px 56px -24px rgba(18, 58, 107, 0.22);
  --sh-yellow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 4px 14px -6px rgba(176, 124, 0, 0.55);
  --sh-blue: 0 4px 14px -6px rgba(29, 91, 168, 0.6);
  --sh-pick: 0 0 0 3px #BFD9F2, 0 8px 18px -8px rgba(29, 91, 168, 0.7);
  --tile-edge: 0 0 0 0 transparent;     /* dark mode: a 1px inset edge */
  --app-warn-line-w: 1px;
  /* Section bands ("rooms") */
  --band-fog: #F4F7FB;
  --band-sky: #E2EDF9;
  --band-white: #FFFFFF;
  --band-sun: #FFF7E0;
  --room-r: 28px;
  --room-pad: 56px;
  --room-pad-b: 84px;
  --room-edge: 0 0 0 0 transparent;
  --flip-edge: rgba(20, 35, 58, 0.07);   /* card on a white band: fog fill + this hairline */
  --quiet-on-sky: #FFFFFF;
  --app-quiet: #EEF3F9;                 /* quiet button straight on a band (white on sky, see theme.css) */
  --app-quiet-hover: #E3ECF7;
  --flip-card: #F4F7FB;                 /* card on a white band */
  --flip-fill: #FFFFFF;                 /* small fills (tags, numbers, chevrons, icon discs) inside a flipped card */
  --disc-on-white: #EAF1FA;
  /* Radii */
  --r-xl: 32px;
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 14px;
  --r-pill: 999px;
  /* Motion */
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-heading: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Atkinson Hyperlegible', Verdana, Arial, sans-serif;

  /* Type scale */
  --body-size: 1.0625rem;
  --body-line-height: 1.6;
  --heading-weight: 800;
  --subheading-weight: 700;
  --heading-line-height: 1.1;
  --h1-size: clamp(2.375rem, 10.6vw, 5rem);
  --h2-size: clamp(2rem, 4.6vw, 3.5rem);
  --h3-size: 1.3rem;
  --label-tracking: 0.06em;
  --measure: 65ch;

  /* Layout and shape */
  --container: 1200px;
  --gutter: 20px;
  --section-pad: 96px;
  --section-pad-mobile: 56px;
  --radius-sm: 14px;
  --radius-img: 26px;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.18 6%, 0.58 14%, 0.92 22%, 1.08 30%, 1.12 36%, 1.06 46%, 0.99 58%, 1.01 72%, 1); }
}
@media (min-width: 768px) {
  :root { --gutter: 32px; --room-r: 40px; --room-pad: 88px; --room-pad-b: 128px; }
}

/* Dark mode follows the visitor's device setting (no toggle): night navy
   page, tiles one step lighter, blue and yellow fills unchanged, yellow stays the one accent. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --color-dominant: #7DB3F0;          /* lifted Andy blue for text, labels and icons: 8.0:1 page, 5.6:1 tile */
    --color-link: #7DB3F0;
    --color-surface: #1A3658;           /* tiles, form, sheet */
    --color-surface-alt: #122A49;       /* fill and segmented track */
    --color-surface-raised: #1A3658;
    --color-ink: #EDF2F6;               /* 15.5:1 page, 10.9:1 tile */
    --color-muted: #A8BDD4;             /* 9.1:1 page, 6.4:1 tile */
    --color-rule: rgba(191, 217, 242, 0.14);
    --color-chip-bg: rgba(191, 217, 242, 0.08);
    --color-chip-ink: #BFD9F2;
    --color-hatch: rgba(191, 217, 242, 0.06);
    --color-notice-bg: #050E1A;         /* white 19.4:1 */
    --color-pick: #234671;
    --color-pick-hover: #2B5583;
    --color-pick-press: #2B5583;
    --color-pick-edge: #7DB3F0;

    --app-page: #0B1A2E;
    --app-tile: #1A3658;
    --app-fill: #122A49;
    --app-fill-hover: #1E3F66;          /* hover fill; blue label 4.89:1 (#234671 was 4.38:1) */
    --app-summary-hover: #1F3D63;
    --app-blue-hover: #2466B8;
    --app-field-edge: #A8BDD4;          /* 9.1:1 against the well */
    --app-field-well: #0B1A2E;
    --app-focus: #7DB3F0;
    --app-focus-glow: rgba(125, 179, 240, 0.25);
    --app-warn-bg: #0F2440;             /* the sky band it sits on */
    --app-warn-line: #EDF2F6;
    --app-warn-line-w: 2px;
    --app-warn-icon: #FFC93C;
    --app-warn-text: #EDF2F6;           /* 13.8:1 */
    --app-error: #FF8A80;               /* 5.4:1 on the tile */
    --app-error-bg: #2A2433;
    --app-step-ring: rgba(255, 201, 60, 0.22);
    --app-photo-a: #16304F;
    --app-photo-b: #1A3658;
    --app-caption-bg: #1A3658;
    --app-wash-blue: rgba(125, 179, 240, 0.10);
    --app-wash-yellow: rgba(255, 201, 60, 0.08);
    --app-glass: rgba(11, 26, 46, 0.72);
    --app-glass-solid: #0B1A2E;
    --app-glass-edge: inset 0 0 0 1px rgba(191, 217, 242, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.4);
    --sh-1: 0 0 0 0 transparent;        /* cards: shadows off, the inset edge carries them */
    --sh-2: 0 0 0 0 transparent;
    --sh-float: 0 1px 0 rgba(0, 0, 0, 0.3), 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    --sh-yellow: 0 1px 0 rgba(0, 0, 0, 0.3);
    --sh-blue: 0 1px 0 rgba(0, 0, 0, 0.3);
    --sh-pick: 0 0 0 3px #7DB3F0;
    --tile-edge: inset 0 0 0 1px rgba(191, 217, 242, 0.14);
    --band-fog: #0B1A2E;
    --band-sky: #0F2440;
    --band-white: #122A49;
    --band-sun: #2A2414;              /* warm night, no yellow text on it */
    --room-edge: inset 0 1px 0 rgba(191, 217, 242, 0.18);
    --flip-edge: rgba(191, 217, 242, 0.14);
    --quiet-on-sky: #1A3658;
    --app-quiet: #1A3658;             /* quiet button on every band; label #7DB3F0 (5.6:1) */
    --app-quiet-hover: #1E3F66;       /* label 4.9:1 */
    --flip-card: #1E3F66;             /* lighter than the white band (1.36:1), never a hole */
    --flip-fill: #1A3658;             /* one step darker than the flipped card */
    --disc-on-white: #1E3F66;
  }
}

/* ===== kit/css/base.css ===== */
/* Site kit base styles. Every color, font and size comes from tokens (kit/tokens/<style>.css,
   then sites/<slug>/tokens.css). Theme extras live in kit/themes/<theme>/theme.css. */

@media (max-width: 767px) {
  :root {
    --section-pad: var(--section-pad-mobile);
  }
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  -webkit-font-smoothing: antialiased;
}

body.has-bottom-bar {
  padding-bottom: 0;
}
@media (max-width: 767px) {
  body.has-bottom-bar {
    padding-bottom: 56px;
  }
}

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

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  color: var(--color-ink);
  line-height: var(--heading-line-height);
  margin: 0 0 0.5em;
}

h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); font-weight: var(--subheading-weight); }

p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; }
a:hover { color: var(--color-ink); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

::selection {
  background: var(--color-selection);
  color: var(--color-ink);
}

button { font: inherit; cursor: pointer; }
/* Bold body text uses a loaded weight (body fonts ship 400 + 600 or 400 + 700; 600 resolves to the nearest bold). */
b, strong { font-weight: 600; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Honeypot: fully off-screen (not just clipped in place), so it can never be seen or tapped at any width. */
.form-trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: 0;
  transform: translateY(-150%);
  background: var(--color-dominant);
  color: var(--color-on-dominant);
  padding: 0.75em 1em;
  z-index: 200;
  transition: transform 0.15s ease;
}
.skip-link:focus {
  transform: translateY(8px);
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}
.skip-link:hover { color: var(--color-on-dominant); }

/* ---------- Sample / private notice bar ---------- */
.sample-bar {
  background: var(--color-notice-bg);
  color: var(--color-notice-text);
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.5em var(--gutter);
}

/* ---------- Header ---------- */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 768px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 64px;
  }
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .header-inner { height: 64px; padding: 0 var(--gutter); }
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  text-decoration: none;
  color: var(--color-ink);
}
.wordmark svg { color: var(--color-accent); width: 28px; height: 28px; flex-shrink: 0; }
.wordmark-text { display: flex; flex-direction: column; line-height: 1; gap: 0.15rem; }
@media (max-width: 767.98px) {
  .wordmark, .wordmark-text { min-width: 0; } /* phones only (Menu button range): the wordmark gives way to the button */
}
.wordmark-text .name {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.3rem;
}
.wordmark-text .label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: var(--label-tracking);
  color: var(--color-accent);
}

.main-nav { display: none; }
@media (min-width: 768px) {
  .main-nav {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    margin: 0; padding: 0;
  }
  .main-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px; /* short labels ("Home", "About") still get a 44px target */
    color: var(--color-ink);
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
  }
  .main-nav a[aria-current="page"] { color: var(--color-accent); }
  .main-nav a:hover { color: var(--color-accent); }
}

.nav-toggle {
  display: inline-flex;
  flex-shrink: 0; /* never squeezed by a long wordmark at 320px */
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  min-width: 44px;
  background: none;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.5em 0.9em;
  font-weight: 600;
  color: var(--color-ink);
}
@media (min-width: 768px) {
  .nav-toggle { display: none; }
}
/* Without JavaScript the Menu button can't open anything: a <noscript> style in kit/partials/head.html hides it and
   shows the menu list instead (the scripting media query is not reliable in Chrome). */

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0; padding: 0.5rem var(--gutter) 1rem;
  border-top: 1px solid var(--color-rule);
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  display: block;
  padding: 0.75em 0;
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid var(--color-rule);
}
.mobile-nav a[aria-current="page"] { color: var(--color-accent); }
@media (min-width: 768px) {
  .mobile-nav { display: none !important; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.65em 1.3em;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  max-width: 100%;
  text-align: center;
  overflow-wrap: anywhere; /* with large text settings a long label wraps inside the button instead of scrolling the page */
}
.site-header .btn { white-space: nowrap; } /* header buttons stay one line; the header sweep checks they fit */
.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn-primary:disabled { opacity: 0.7; cursor: progress; }
.btn-secondary {
  background: transparent;
  color: var(--color-dominant);
  border-color: var(--color-dominant);
}
.btn-secondary:hover { background: var(--color-dominant); color: var(--color-on-dominant); }
.btn-on-dominant {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.btn-on-dominant:hover { background: var(--color-accent-on-dominant); color: var(--color-ink); }

.header-call {
  display: none;
}
@media (min-width: 768px) {
  .header-call { display: inline-flex; }
}

/* ---------- Mobile bottom bar ---------- */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: var(--color-dominant);
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 150;
}
@media (min-width: 768px) {
  .bottom-bar { display: none; }
}
.bottom-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-dominant);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  gap: 0.4em;
}
.bottom-bar a:hover { color: var(--color-on-dominant); }
.bottom-bar a:first-child { border-right: 1px solid var(--color-accent-line); }
.bottom-bar a:focus-visible { outline-offset: -3px; }

/* ---------- Sections & bands ---------- */
section { padding: var(--section-pad) 0; }
.page-head { padding-top: var(--section-pad-mobile); }
.band-light { background: var(--color-surface); }
.band-alt { background: var(--color-surface-alt); }
.band-dominant { background: var(--color-dominant); color: var(--color-on-dominant-soft); }
.band-dominant h2, .band-dominant h3 { color: var(--color-on-dominant); }
.band-dominant a:not(.btn) { color: var(--color-accent-on-dominant); }
.band-dominant a:not(.btn):hover,
.site-footer a:hover { color: var(--color-on-dominant); }
.band-dominant p { color: var(--color-on-dominant-soft); }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.75em;
}
.band-dominant .eyebrow { color: var(--color-accent-on-dominant); }

.muted { color: var(--color-muted); }
.band-alt .muted { color: var(--color-ink); }

/* ---------- Placeholder chips (samples and private mockups; public client builds refuse them) ---------- */
.confirm {
  display: inline;
  border: 1px dashed var(--color-accent);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.5em;
  font-size: 0.92em;
  color: var(--color-chip-ink, var(--color-accent));
  background: var(--color-chip-bg);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.band-dominant .confirm,
.trust-panel .confirm,
.site-footer .confirm {
  border-color: var(--color-accent-on-dominant);
  color: var(--color-chip-ink-on-dominant, var(--color-accent-on-dominant));
  background: var(--color-chip-bg-on-dominant);
}
.confirm-block {
  display: block;
  padding: 1rem;
  margin-top: 1rem;
}

/* ---------- Hero ---------- */
.hero {
  padding-top: calc(var(--section-pad) * 0.9);
}
.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.3fr 1fr;
  }
}
.hero-copy .lede { font-size: 1.15rem; color: var(--color-muted); }
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
}
.license-line {
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* ---------- Trust panel (credentials beside the first CTA) ---------- */
.trust-panel {
  position: relative;
  background: var(--color-dominant);
  border-radius: var(--radius-sm);
  padding: 1.75rem 1.5rem;
  color: var(--color-on-dominant-soft);
}
.trust-field { margin-bottom: 1rem; }
.trust-field:last-child { margin-bottom: 0; }
.trust-field .label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-accent-on-dominant);
  margin-bottom: 0.25em;
}
.trust-field .value { font-weight: 600; color: var(--color-on-dominant); }

/* ---------- Service rows ---------- */
.service-row {
  display: grid;
  gap: 2rem;
  padding: 2.5rem 0;
}
.service-row + .service-row { border-top: 1px solid var(--color-rule); }
@media (min-width: 900px) {
  .service-row {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  /* Odd rows put the image first, so rows alternate sides. */
  .service-row.flip > .service-media,
  .service-row.flip > .service-slot,
  .service-row.flip > .diagnosis-card { order: -1; justify-self: start; }
}
.service-media {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-img);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3;
}
.band-alt .service-media { background: var(--color-surface); }
.service-slot { width: 100%; max-width: 400px; }
@media (min-width: 900px) {
  .service-row > .service-media,
  .service-row > .service-slot { justify-self: end; }
}
.service-media svg { width: 100%; height: 100%; color: var(--color-dominant); }
.service-media svg .accent { stroke: var(--color-accent); }
.service-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-img); }

/* Standalone text links get a full 44px tap target. */
.link-tap,
.jump-links a,
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.link-tap { max-width: 100%; overflow-wrap: anywhere; } /* a long email address wraps instead of scrolling the page at large text sizes */
/* Links inside a sentence: grow the hit area without moving the line. */
.link-inline {
  display: inline-block;
  padding: 10px 0;
  margin: -10px 0;
}

/* ---------- Jump links (services sub-nav) ---------- */
.jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  list-style: none;
  margin: 0; padding: 1.5rem 0 0;
  border-top: 1px solid var(--color-rule);
}
@media (max-width: 767px) {
  .jump-links { flex-direction: column; gap: 0; }
}
.jump-links a {
  font-weight: 600;
  text-decoration: none;
  gap: 0.5rem;
}

/* ---------- Local notes (houses) block ---------- */
.houses-grid {
  display: grid;
  gap: 2rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .houses-grid { grid-template-columns: repeat(3, 1fr); }
}
.house-card h3 { margin-bottom: 0.4em; }

/* ---------- Photos and marked photo slots ---------- */
.photo-slot {
  aspect-ratio: 4 / 3;
  background-color: var(--color-surface-alt);
  background-image: repeating-linear-gradient(
    45deg,
    var(--color-hatch) 0,
    var(--color-hatch) 2px,
    transparent 2px,
    transparent 14px
  );
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-img);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
}
.photo-slot span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-muted);
  background: var(--color-surface);
  padding: 0.3em 0.6em;
  border-radius: var(--radius-sm);
}
.photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-img);
}

.projects-grid {
  display: grid;
  gap: 1.5rem;
  margin-top: 2rem;
}
@media (min-width: 768px) {
  .projects-grid { grid-template-columns: repeat(3, 1fr); }
}
.project-caption { margin-top: 0.75rem; font-weight: 600; }
.after-grid { margin-top: 1.5rem; }

/* ---------- Reviews ---------- */
.reviews-frame {
  border: 2px dashed var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: var(--color-muted);
  font-weight: 600;
  margin-top: 2.5rem;
}
.reviews-list {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.review blockquote { margin: 0; }
.review blockquote p { font-size: 1.1rem; }
.review-source { color: var(--color-muted); font-weight: 600; }

/* ---------- Quote form ---------- */
.quote-form {
  max-width: 560px;
  margin-top: 1.5rem;
}
.demo-label {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--color-notice-bg);
  color: var(--color-notice-text);
  padding: 0.3em 0.6em;
  border-radius: var(--radius-sm);
  margin-bottom: 1.25rem;
}
.form-field {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field label {
  font-weight: 600;
  font-size: 0.95rem;
}
.form-field .hint {
  font-size: 0.85rem;
  color: var(--color-muted);
}
.optional {
  font-weight: 400;
  color: var(--color-muted);
}
/* Tabbing through a form on a phone: keep the focused field clear of the sticky bottom bar. */
.form-field input,
.form-field textarea,
.quote-form button,
.booking-form button { scroll-margin-bottom: 72px; }
.form-promise { font-weight: 600; margin: 0.25rem 0 1rem; }
.form-field input,
.form-field textarea {
  font: inherit;
  padding: 0.7em 0.8em;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
}
.form-field [aria-invalid="true"] {
  border: 2px solid var(--color-accent);
}
.field-error {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-accent);
}
.field-error:empty { display: none; }
.form-confirmation,
.form-failure {
  display: none;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-dominant);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin-top: 1rem;
  color: var(--color-ink);
  font-weight: 600;
  scroll-margin-bottom: 72px; /* clear the 56px phone bottom bar when focused */
}
.form-failure { border-color: var(--color-accent); }
.form-confirmation.visible,
.form-failure.visible { display: block; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 2rem; }
.faq-item {
  border-bottom: 1px solid var(--color-rule);
}
.faq-item summary {
  font-family: var(--font-heading);
  font-weight: var(--subheading-weight);
  font-size: 1.1rem;
  padding: 1.1rem 0 1.1rem 1.5rem; /* hanging indent: wrapped lines start under the text, not the arrow */
  position: relative;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: calc(1.1rem + var(--body-line-height) * 0.5em - 0.3rem);
  border-style: solid;
  border-width: 0.3rem 0 0.3rem 0.5rem;
  border-color: transparent transparent transparent currentColor;
  border-left-color: var(--color-accent);
  transition: transform 0.15s ease;
}
.band-dominant .faq-item summary::before { border-left-color: var(--color-accent-on-dominant); }
.faq-item[open] summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::before { transition: none; }
}
.faq-item p { padding-bottom: 1.1rem; }

/* ---------- Emergency band ---------- */
.emergency-signs {
  margin: 1.5rem 0;
  padding-left: 1.2rem;
}
.emergency-signs li { margin-bottom: 0.5em; }
.emergency-step {
  background: var(--color-panel-on-dominant);
  border: 1px solid var(--color-rule-on-dominant);
  border-radius: var(--radius-sm);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.emergency-availability { font-weight: 600; margin-bottom: 1.5rem; }

/* ---------- Closing CTA band ---------- */
.closing-band { text-align: left; }
.closing-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* ---------- Contact page ---------- */
.contact-phone {
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 0.25rem;
}
.contact-phone a { color: var(--color-accent); text-decoration: none; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dominant);
  color: var(--color-on-dominant-soft);
  padding: 3rem 0 0;
  border-top: 1px solid var(--color-rule-on-dominant);
}
.site-footer p { color: var(--color-on-dominant-soft); }
.footer-grid {
  display: grid;
  gap: 2rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid:has(> :nth-child(2):last-child) { grid-template-columns: 1.4fr 1fr; } /* two columns (no services list) */
  .footer-nav { flex-direction: column; } /* one link per line once the footer has columns */
}
.site-footer h2 { color: var(--color-on-dominant); font-size: 1.2rem; }
.site-footer a { color: var(--color-accent-on-dominant); }
.footer-nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
}
.footer-nav a { text-decoration: none; }
.footer-bottom {
  border-top: 1px solid var(--color-rule-on-dominant);
  padding: 1rem var(--gutter);
  text-align: center;
  font-size: 0.85rem;
}

/* ---------- About: how-we-work steps ---------- */
.steps-list {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.step-num {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  color: var(--color-accent);
  font-size: 1.1rem;
  margin-bottom: 0.3em;
}

/* ---------- Gallery ---------- */
.gallery-scroll {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 0.5rem 0 1rem;
  margin-top: 2rem;
}
.gallery-scroll:focus-visible { outline-offset: 4px; }
.gallery-pair {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(80vw, 420px);
}
@media (min-width: 900px) {
  .gallery-pair { width: 520px; }
}
.pair-photos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.5rem;
}
.pair-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0.3em;
}
.pair-caption { margin-top: 0.6rem; font-weight: 600; }

@media (max-width: 599px) {
  .gallery-scroll {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: visible;
    gap: 2rem;
  }
  .gallery-pair { width: 100%; min-width: 0; }
  .gallery-hint { display: none; }
}

/* ---------- About: owner photo ---------- */
.owner-photo {
  margin-top: 1.5rem;
  max-width: 420px;
}

/* ---------- Privacy page ---------- */
.privacy-copy { max-width: 70ch; }

/* ---------- Header: phone link plus a request button (ui.headerRequest or booking.primary), from 1024px ---------- */
.header-request { display: none; }
@media (min-width: 1024px) {
  .header-request { display: inline-flex; }
  /* Keep the call and request buttons side by side; the nav stays centered in the space left. */
  .header-inner:has(.header-request) { justify-content: flex-start; }
  .header-inner:has(.header-request) nav { margin: 0 auto; }
  .header-inner:has(.header-request) .header-call {
    background: transparent;
    border-color: transparent;
    color: var(--color-ink);
    padding-inline: 0.4em;
  }
  .header-inner:has(.header-request) .header-call:hover { color: var(--color-accent); text-decoration: underline; }
}

/* ---------- Footer: second link column (service pages) ---------- */
.footer-grid > div { min-width: 0; }

/* ---------- Home hero extras: promise lines, photo beside the picker ---------- */
.hero-promises {
  list-style: none;
  margin: 0 0 0.5rem;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  max-width: var(--measure);
}
.hero-promises li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 1.1rem;
}
.hero-promises li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.9rem;
  height: 3px;
  background: var(--color-accent-line);
}
.hero-lower {
  display: grid;
  gap: 2rem;
  margin-top: 2.5rem;
}
@media (min-width: 900px) {
  .hero-lower:has(> .hero-photo) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}
.hero-photo { width: 100%; }

/* ---------- Home services as a compact two-column list (pages.home.servicesCompact) ---------- */
.services-compact .service-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-rule);
}
.services-compact .service-row h3 { margin-bottom: 0.35em; }
.services-compact .service-row p { margin-bottom: 0.25rem; }
@media (min-width: 768px) {
  .services-compact {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
  }
  .services-compact > .section-heading,
  .services-compact > .line-deco { grid-column: 1 / -1; }
}
.service-symptom {
  font-weight: 600;
  color: var(--color-ink);
}

/* ---------- Reviews section ---------- */
.reviews-summary { font-weight: 600; color: var(--color-muted); }
.band-alt .reviews-summary { color: var(--color-ink); }
.review strong { font-weight: 600; color: var(--color-ink); }
.reviews-note { margin-top: 1.25rem; font-size: 0.9375rem; color: var(--color-muted); }
.review-source a { font-weight: 600; }
@media (min-width: 900px) {
  .reviews-list:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}
.review { min-width: 0; }
.review-single { max-width: 44rem; margin: 2.5rem 0 0; }
.gallery-item { margin: 0; }

/* ---------- Illustrations in place of photos (theme drawings on samples) ----------
   Same frame and ratio as a photo, so a real photo can replace it later. A drawing's "problem" layer shows only on
   the before side of a before/after pair and its "fix" layer only on the after side; elsewhere neither shows. */
.art {
  aspect-ratio: 4 / 3;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-img);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  color: var(--color-dominant);
  min-width: 0;
}
.band-alt .art { background: var(--color-surface); }
.art svg { width: 100%; height: 100%; }
.art svg .accent { stroke: var(--color-accent); }
svg .problem,
svg .fix { display: none; }
.art-before .problem,
.art-after .fix { display: inline; }
.owner-photo.art { max-width: 420px; }

/* ---------- Service pages ---------- */
.breadcrumb ol {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  font-size: 0.9rem;
}
.breadcrumb li + li::before { content: "/" / ""; margin-right: 0.5rem; color: var(--color-muted); }
.breadcrumb a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.breadcrumb [aria-current="page"] { color: var(--color-muted); }
.service-hero {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "media" "copy";
}
.service-hero-title { grid-area: title; }
.service-hero-title h1 { margin-bottom: 0; }
.service-hero > .service-media,
.service-hero > .service-slot,
.service-hero > .diagnosis-card { grid-area: media; }
.service-hero-copy { grid-area: copy; min-width: 0; }
@media (min-width: 1024px) {
  .service-hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    grid-template-areas: "title media" "copy media";
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    align-items: start;
  }
  .service-hero > .service-media,
  .service-hero > .service-slot,
  .service-hero > .diagnosis-card { justify-self: end; }
}
.service-hero .hero-actions { margin-bottom: 0; }
.offerings-list { margin: 1rem 0 1.5rem; padding-left: 1.2rem; }
.offerings-list li { margin-bottom: 0.4em; }
.other-services {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
}
.other-services a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- Gallery: single-photo grid (pages.gallery.mode "grid"), 3/2/1 columns ---------- */
.gallery-grid {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- About: "who comes to your house" list ---------- */
.vetting-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
  max-width: var(--measure);
}
.vetting-list li {
  position: relative;
  padding-left: 1.6rem;
}
.vetting-list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.4em;
  width: 0.45rem;
  height: 0.8rem;
  border: solid var(--color-accent-line);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* ---------- Plan page: two visit checklists side by side ---------- */
.plan-columns {
  display: grid;
  gap: 2rem 3rem;
  margin-top: 1rem;
}
@media (min-width: 768px) {
  .plan-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.plan-columns ul { padding-left: 1.2rem; margin: 0; }
.plan-columns li { margin-bottom: 0.45em; }

/* ---------- Service area page ---------- */
.area-line { font-size: 1.25rem; font-weight: 600; }

/* ---------- Contact: text link ---------- */
.contact-text { margin-top: -0.25rem; }

/* A " · " separator that travels with the item after it (footer contact and license lines). */
.sep-item { display: inline-block; max-width: 100%; }
/* Footer: one item per line, no separators. The first footer column is narrow at every width (measured 320-1280 on
   all three sites), so inline items kept starting lines with a dot, which reads as a stray mark. */
.site-footer .sep-item { display: block; }
.site-footer .sep-item > [aria-hidden="true"] { display: none; }
/* Skip-link target: main takes focus (tabindex="-1") so the next Tab starts inside it; no ring around the whole page. */
main:focus { outline: none; }
.bar-icon { width: 1.15em; height: 1.15em; flex: none; }
.plan-columns h2 { font-size: var(--h3-size); }
.plan-note { margin-top: 1.5rem; max-width: 40rem; }

/* ===== kit/css/choices.css ===== */
/* ---------- Radio "pick" grids ----------
   Added when booking.enabled (day and time-window choices) or form.fields.bestTime (quote form "best time to reach you").
   48px tap targets; the radio itself stays visible and keyboard-native (arrow keys move inside a group). Colors only via tokens. */
.pick-group {
  border: 0;
  padding: 0;
  margin: 0 0 1.5rem;
  min-width: 0; /* fieldsets default to min-content width, which lets a grid push the page sideways */
}
.pick-group legend {
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
  margin-bottom: 0.6rem;
}
.pick-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  margin-bottom: 0.4rem;
}
.pick-windows { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.pick {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.5em 0.7em;
  border: 1px solid var(--color-muted);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}
.pick input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--color-accent);
  scroll-margin-bottom: 72px; /* clear the phone bottom bar when focused */
}
.pick:hover { border-color: var(--color-ink); }
.pick:has(input:checked) {
  border-color: var(--color-accent);
  box-shadow: inset 0 0 0 1px var(--color-accent);
  background: var(--color-chip-bg);
}
.pick:has(input:focus-visible) { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.pick-face {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.pick-main { font-weight: 600; }
.pick-sub {
  font-size: 0.85rem;
  color: var(--color-muted);
}
/* An unanswered required group: aria-invalid sits on each radio (a fieldset/group can't carry it). */
.pick:has(input[aria-invalid="true"]) { border-color: var(--color-accent); border-width: 2px; }
/* Quote form "best time": wider cells so "Afternoon" never clips. */
.quote-form .pick-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }

/* ===== kit/css/picker.css ===== */
/* ---------- Home "What's wrong?" picker (site.json picker) ----------
   Chips are links to the service pages without JS; kit/js/main.js turns them into toggle buttons that open a short
   card (what you'll notice / what you probably don't need) with "Full explanation" and "Ask about this" (fills the
   form's "What's wrong?" field). Phones: a 2-column grid of 48px targets; the card stacks below. Colors via tokens. */
.picker { min-width: 0; }
.picker .picker-heading {
  font-size: var(--h3-size);
  font-weight: var(--subheading-weight);
  margin-bottom: 0.75rem;
}
.picker-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
@media (min-width: 600px) {
  .picker-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.picker-chip {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0.5em 0.85em;
  border: 1px solid var(--color-dominant);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
}
.picker-chip:hover { background: var(--color-surface-alt); color: var(--color-ink); }
.picker-chip[aria-expanded="true"],
.picker-chip[aria-expanded="true"]:hover {
  background: var(--color-dominant);
  border-color: var(--color-dominant);
  color: var(--color-on-dominant);
}
.picker-card {
  margin-top: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-left: 6px solid var(--color-dominant);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem 1.25rem;
}
.picker-card[hidden] { display: none; }
.band-light .picker-card { background: var(--color-surface-alt); }
.picker-card h3 { margin-bottom: 0.5rem; }
.picker-rows { margin: 0; }
.picker-rows > div { padding: 0.5rem 0; }
.picker-rows > div + div { border-top: 1px solid var(--color-rule); }
.picker-rows dt { font-weight: 600; color: var(--color-ink); }
.picker-rows dd { margin: 0.15rem 0 0; }
.picker-rows .mark dt {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.15em;
  text-decoration-skip-ink: none;
}
.picker-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}
@media (prefers-reduced-motion: no-preference) {
  .picker-card:not([hidden]) { animation: picker-in 0.18s ease-out; }
}
@keyframes picker-in {
  from { opacity: 0; transform: translateY(4px); }
}
/* Phones and tablets: the picker comes before the hero photo (it is the thing to do; the photo is context). */
@media (max-width: 899px) {
  .hero-lower > .picker { order: -1; }
}

/* ===== kit/css/diagnosis.css ===== */
/* Optional diagnosis card (kit/partials/diagnosis-card.html). Added to styles.css only when some service in
   site.json has a diagnosis. Colors only via tokens. */
.diagnosis-card {
  width: 100%;
  max-width: 480px;
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-left: 6px solid var(--color-dominant);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.25rem 0.5rem;
  min-width: 0;
}
.band-light .diagnosis-card { background: var(--color-surface-alt); }
@media (min-width: 900px) {
  .service-row .diagnosis-card { justify-self: end; }
}
.diagnosis-title {
  font-family: var(--font-heading);
  font-weight: var(--subheading-weight);
  font-size: var(--h3-size);
  line-height: var(--heading-line-height);
  color: var(--color-ink);
  margin: 0 0 0.6rem;
}
.diagnosis-meta {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  border-bottom: 1px solid var(--color-rule);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--color-muted);
}
.diagnosis-rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.diagnosis-rows li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.75rem 0;
}
.diagnosis-rows li + li { border-top: 1px solid var(--color-rule); }
.diagnosis-num {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-dominant);
}
.diagnosis-label {
  font-weight: 600;
  margin: 0 0 0.2rem;
  color: var(--color-ink);
}
.diagnosis-rows p:last-child { margin-bottom: 0; }
/* mark: true (e.g. "what you probably don't need"): an accent bar under the ink label, never accent-colored text. */
.diagnosis-rows li.mark .diagnosis-label {
  text-decoration-line: underline;
  text-decoration-color: var(--color-accent-line);
  text-decoration-thickness: 0.4em;
  text-underline-offset: -0.15em;
  text-decoration-skip-ink: none;
}

/* ===== kit/css/note.css ===== */
/* Optional owner note (kit/partials/owner-note.html). Added to styles.css only when note.home or note.about is true.
   Colors only via tokens. */
.owner-note {
  max-width: 44rem;
  border-left: 4px solid var(--color-accent-line);
  padding-left: 1.5rem;
}
.owner-note p { font-size: 1.125rem; }
.note-signoff {
  font-weight: 600;
  color: var(--color-ink);
  margin-top: 1.5rem;
}
/* About hero with a note: portrait and note stacked; from 1024px the note sits beside the portrait. */
.about-intro { display: grid; gap: 2rem; margin-top: 2rem; }
.about-intro .owner-photo { margin: 0; }
@media (min-width: 1024px) {
  .about-intro { grid-template-columns: 320px minmax(0, 1fr); gap: 3rem; align-items: start; }
}

/* ===== kit/themes/andys-plumbing/theme.css ===== */
/* Theme: andys-plumbing, app style. Styles the kit's own
   markup and class names (plus the theme partials in ./partials). Colors only via tokens (sites/andys-plumbing/tokens.css).
   Only sites that set design.theme = "andys-plumbing" get this file.
   Order: base type and controls, header and menu sheet, phone bar, then page sections (Home, About, Services, Project
   photos, Contact), motion, dark-mode states, and last the SECTION RHYTHM block (page background, section surfaces and
   spacing), kept apart so the alternating-background round can change it in one place. */

/* ====================================================================================================================
   Base type, links, chips, buttons
   ==================================================================================================================== */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
h1, h2, h3 { font-optical-sizing: auto; text-wrap: balance; }
h1 { font-weight: 800; line-height: 0.98; letter-spacing: -0.04em; margin: 0; }
h2, h3 { margin: 0; }
.section-heading { font-weight: 800; font-size: var(--h2-size); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 28px; }
::selection { background: var(--color-selection); color: var(--color-on-accent); }
b, strong { font-weight: 700; }

a { color: var(--color-link); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--color-link); text-decoration-thickness: 2.5px; }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
textarea:focus-visible,
input:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 3px; border-radius: 8px; }

/* [CONFIRM] placeholder chips */
.confirm {
  display: inline;
  border: 1px dashed var(--color-dominant);
  border-radius: 8px;
  padding: 0.05em 0.5em;
  font: 700 0.8125rem/1.5 var(--font-body);
  letter-spacing: 0;
  color: var(--color-chip-ink);
  background: var(--color-chip-bg);
  white-space: normal;
}
h1 .confirm {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25em;
  transform: translateY(-0.3em);
}
/* Short chips stay on one line; a chip that opens a muted note keeps a little space before the sentence. */
.offerings-list .confirm,
.diagnosis-meta .confirm,
.form-promise .confirm,
.form-confirmation .confirm { white-space: nowrap; }
p.muted > .confirm:first-child { display: inline-block; margin: 0 0.5rem 0.5rem 0; }

/* Buttons: compact pills with a spring press */
.btn {
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-pill);
  font: 700 1rem/1.15 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--sh-yellow); }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn-blue { background: var(--color-dominant-fill); color: var(--color-on-dominant); box-shadow: var(--sh-blue); }
.btn-blue:hover { background: var(--app-blue-hover); color: var(--color-on-dominant); }
.btn-secondary,
.btn-quiet { background: var(--app-fill); color: var(--color-link); border: 0; }
.btn-secondary:hover,
.btn-quiet:hover { background: var(--app-fill-hover); color: var(--color-link); }
.btn-ghost { background: var(--app-ghost); color: var(--color-on-dominant); box-shadow: inset 0 0 0 1px var(--app-ghost-edge); }
.btn-ghost:hover { background: var(--app-ghost); color: var(--color-on-dominant); box-shadow: inset 0 0 0 2px var(--app-ghost-edge); }
.btn .btn-icon,
.menu-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Phone icon on Call buttons that have no icon in the markup (hero, FAQ, menu sheet) */
.hero-actions .btn[href^="tel:"]::before,
.faq-call::before,
.menu-acts .btn[href^="tel:"]::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon-phone) center / contain no-repeat;
  mask: var(--icon-phone) center / contain no-repeat;
}

/* Icons: Lucide-style line art as masks, painted with token colors (no colors inside the data URIs). */
:root {
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-check-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
  --icon-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 3.9L1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E");
  --icon-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 18v-5.2C4 8.6 6.4 6 10 5.4l.6 1.9C8.6 8 7.6 9.4 7.5 11H10v7H4zm10 0v-5.2c0-4.2 2.4-6.8 6-7.4l.6 1.9c-2 .7-3 2.1-3.1 3.7H20v7h-6z'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.5 7l8.5 6 8.5-6'/%3E%3C/svg%3E");
  --icon-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
  --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  /* Service icons (same set on Home rows, the picker, the Services jump pills and section heads) */
  --icon-toilets-faucets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9h10a5 5 0 0 1 5 5v1'/%3E%3Cpath d='M8 9V5M5 5h6'/%3E%3Cpath d='M18 19v2'/%3E%3C/svg%3E");
  --icon-water-heaters: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5a6.5 6.5 0 0 0 6.5-6.5c0-1.9-1-3.6-2.8-5.1S13 6.3 12 2.5c-1 3.8-3.5 6-5.7 7.4C4.5 11.4 5.5 13.1 5.5 15a6.5 6.5 0 0 0 6.5 6.5z'/%3E%3C/svg%3E");
  --icon-no-hot-water: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.5a6.5 6.5 0 0 0 6.5-6.5c0-1.9-1-3.6-2.8-5.1S13 6.3 12 2.5c-1 3.8-3.5 6-5.7 7.4C4.5 11.4 5.5 13.1 5.5 15a6.5 6.5 0 0 0 6.5 6.5z'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E");
  --icon-drain-cleaning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M7.5 12h9M8.8 8.4h6.4M8.8 15.6h6.4'/%3E%3C/svg%3E");
  --icon-gas-piping: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.4-.5-2-1-3-1.1-2.1-.2-4.1 2-6 .5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.2.4-2.3 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
  --icon-sewer-repair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5h8.5a5.5 5.5 0 0 1 5.5 5.5v8'/%3E%3Cpath d='M3 4v7M13.5 21h7'/%3E%3C/svg%3E");
  --icon-remodels: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3l8 8-3 3-8-8z'/%3E%3Cpath d='M11.5 9.5L3.5 17.5l3 3 8-8'/%3E%3C/svg%3E");
}
/* Which service icon a row, pill or section uses (keyed on the service id in its link or section id) */
.service-row > div:has(> a[href$="#toilets-faucets"]), [data-pane="pick-toilets-faucets"], a[href="#toilets-faucets"], #toilets-faucets .service-row { --svc-icon: var(--icon-toilets-faucets); }
.service-row > div:has(> a[href$="#water-heaters"]), a[href="#water-heaters"], #water-heaters .service-row { --svc-icon: var(--icon-water-heaters); }
[data-pane="pick-water-heaters"] { --svc-icon: var(--icon-no-hot-water); }
.service-row > div:has(> a[href$="#drain-cleaning"]), [data-pane="pick-drain-cleaning"], a[href="#drain-cleaning"], #drain-cleaning .service-row { --svc-icon: var(--icon-drain-cleaning); }
.service-row > div:has(> a[href$="#gas-piping"]), [data-pane="pick-gas-piping"], a[href="#gas-piping"], #gas-piping .service-row { --svc-icon: var(--icon-gas-piping); }
.service-row > div:has(> a[href$="#sewer-repair"]), [data-pane="pick-sewer-repair"], a[href="#sewer-repair"], #sewer-repair .service-row { --svc-icon: var(--icon-sewer-repair); }
.service-row > div:has(> a[href$="#remodels"]), [data-pane="pick-remodels"], a[href="#remodels"], #remodels .service-row { --svc-icon: var(--icon-remodels); }

/* Icon disc (44px, pale blue) drawn with ::before, its icon with ::after (both placed in the first grid cell, or
   absolutely in a flex heading). Used on Home service rows, Services section heads, the About license tile, the
   Contact tiles and the review quote. */

/* Tile: the one container; never nested */
.picker,
.trust-panel,
#services-home .service-row,
.reviews-list .review,
.faq-list,
#quote .quote-form,
.credentials-panel,
.steps-list,
.review-single,
.diagnosis-card,
.jump-links a,
.reach-mail,
.area-hours-panel {
  background: var(--app-tile);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2), var(--tile-edge);
}

/* ====================================================================================================================
   Private bar, skip link
   ==================================================================================================================== */
.sample-bar { font: 700 0.8125rem/1.45 var(--font-body); letter-spacing: 0; padding: 9px var(--gutter); }
.skip-link { background: var(--color-notice-bg); color: var(--color-notice-text); border-radius: var(--r-pill); font-weight: 700; text-decoration: none; padding: 12px 18px; left: 12px; }
.skip-link:hover { color: var(--color-notice-text); }

/* ====================================================================================================================
   Header: floating pill nav (glass here and on the phone bar only)
   ==================================================================================================================== */
.site-header {
  position: sticky;
  top: 12px;
  z-index: 100;
  height: auto;
  margin-top: 12px;
  padding: 0 var(--gutter);
  background: transparent;
  border: 0;
}
.header-inner {
  max-width: var(--container);
  height: 64px;
  margin: 0 auto;
  padding: 0 10px;
  gap: 12px;
  justify-content: flex-start;
  border-radius: var(--r-pill);
  background: var(--app-glass-solid);
  box-shadow: var(--sh-float), var(--app-glass-edge);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-inner { background: var(--app-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.wordmark { gap: 10px; min-height: 44px; min-width: 0; padding-right: 6px; color: var(--color-ink); }
.wordmark:hover { color: var(--color-ink); }
.logo-slot {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px dashed var(--color-dominant);
  background: var(--color-pick);
  font: 700 0.625rem/1 var(--font-body);
  color: var(--color-dominant);
}
@media (prefers-color-scheme: dark) {
  .logo-slot { color: var(--color-chip-ink); } /* #BFD9F2 on #234671: 6.7:1 (the lifted blue was 4.38:1) */
}
.wordmark-text { min-width: 0; overflow: hidden; gap: 2px; line-height: 1.1; }
.wordmark-text .name { font: 800 1.0625rem/1.1 var(--font-heading); letter-spacing: -0.01em; white-space: nowrap; color: var(--color-ink); }
.wordmark-text .label { font: 700 0.75rem/1.3 var(--font-body); letter-spacing: 0; color: var(--color-muted); white-space: nowrap; }
.site-header nav { min-width: 0; }
.site-header .main-nav { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.site-header .btn { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; white-space: nowrap; }
.site-header .header-actions .header-call,
.site-header .header-actions .header-request { display: none; }
.site-header .header-call-icon { width: 44px; padding: 0; }
.nav-toggle {
  min-height: 44px;
  padding: 0 16px;
  gap: 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--app-fill);
  color: var(--color-ink);
  font-weight: 700;
}
.nav-toggle .menu-icon { display: none; width: 20px; height: 20px; stroke-width: 2.2; }
/* Menu stays a button below 1024px (kit hides it from 768px). The noscript rule in the page head still hides it. */
@media (max-width: 1023.98px) {
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 419.98px) {
  .site-header { padding: 0 12px; }
  .header-inner { gap: 6px; padding: 0 6px 0 8px; }
  .wordmark { gap: 8px; padding-right: 0; }
  .logo-slot { width: 36px; height: 36px; font-size: 0.5625rem; }
  .wordmark-text .label { display: none; }
  .wordmark-text .name { font-size: 0.9375rem; }
  .nav-toggle { width: 44px; padding: 0; }
  .nav-toggle .menu-text { display: none; }
  .nav-toggle .menu-icon { display: block; }
  .header-actions { gap: 6px; }
}
@media (max-width: 339.98px) {
  .logo-slot { display: none; }
  .header-inner { padding-left: 14px; }
}
@media (min-width: 1024px) {
  .header-inner { padding: 0 10px 0 12px; }
  .site-header nav { margin: 0 auto; }
  .header-actions { margin-left: 0; }
  .site-header .main-nav { display: flex; gap: 8px; margin: 0; } /* gate: tap targets 8px apart */
  .site-header .main-nav a {
    min-height: 44px;
    padding: 0 11px;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
  }
  .site-header .main-nav a:hover { background: var(--app-fill); color: var(--color-ink); }
  .site-header .main-nav a[aria-current="page"] { background: var(--app-nav-active, var(--color-pick)); color: var(--color-link); }
  .nav-toggle { display: none; }
  .site-header .header-actions .header-request { display: inline-flex; }
  .site-header .header-call-icon { background: var(--app-fill); color: var(--color-link); box-shadow: none; }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  .site-header .main-nav a { padding: 0 8px; }
}
@media (min-width: 1180px) {
  .site-header .header-actions .header-call { display: inline-flex; }
  /* The kit makes the Call link plain text beside the request button; keep it a fill pill with blue text */
  .site-header .header-inner:has(.header-request) .header-call { background: var(--app-fill); color: var(--color-link); padding-inline: 18px; }
  .site-header .header-inner:has(.header-request) .header-call:hover { background: var(--app-fill-hover); color: var(--color-link); text-decoration: none; }
  .site-header .header-call-icon { display: none; }
}

/* Menu sheet below 1024px: drops from the pill (opened by kit/js/main.js; theme.js closes it on an outside or link tap) */
.site-header .mobile-nav {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: var(--gutter);
  right: var(--gutter);
  max-width: 420px;
  max-height: calc(100dvh - 110px);
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0 0 0 auto;
  padding: 8px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--app-tile);
  box-shadow: var(--sh-float), var(--app-glass-edge);
  transform-origin: top right;
}
@media (max-width: 419.98px) { .site-header .mobile-nav { left: 12px; right: 12px; } }
@media (max-width: 1023.98px) { .site-header .mobile-nav.open { display: block !important; } }
/* Without JavaScript (scripting: none), below 1024px: the Menu button would do nothing, so it is hidden and the page list
   and the two actions show open under the pill as a plain block that scrolls away with the page (the header is not sticky
   then). Theme-only; the kit's noscript rule in the head is unchanged. */
@media (scripting: none) and (max-width: 1023.98px) {
  .site-header { position: relative; top: auto; }
  .site-header .nav-toggle { display: none !important; }
  .site-header .mobile-nav { display: block !important; position: static; max-width: none; max-height: none; margin: 8px 0 0; box-shadow: var(--sh-1), var(--app-glass-edge); }
}
.menu-pages { list-style: none; margin: 0; padding: 0; }
.menu-pages li + li { border-top: 1px solid var(--color-rule); }
.menu-pages li:has(a[aria-current]),
.menu-pages li:has(a[aria-current]) + li { border-top-color: transparent; }
.mobile-nav .menu-pages a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: none;
}
.mobile-nav .menu-pages a:hover { background: var(--app-fill); color: var(--color-ink); }
.mobile-nav .menu-pages a[aria-current="page"] { background: var(--app-nav-active, var(--color-pick)); color: var(--color-link); }
.menu-pages svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.menu-acts { display: grid; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-rule); }
.menu-acts .btn { width: 100%; }
/* The kit's `.mobile-nav a` (block, padding, ink, hairline) must not reach the two action pills */
.mobile-nav .menu-acts .btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 0; font-weight: 700; }
.mobile-nav .menu-acts .btn-primary { color: var(--color-on-accent); }
.mobile-nav .menu-acts .btn-blue { color: var(--color-on-dominant); }

/* ====================================================================================================================
   Phone action bar: floating glass capsule (Call yellow, estimate blue); hidden while the menu sheet is open
   ==================================================================================================================== */
.bottom-bar {
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  height: auto;
  grid-template-columns: 1fr 1.4fr;
  gap: 6px;
  padding: 6px;
  border-radius: var(--r-pill);
  background: var(--app-glass-solid);
  box-shadow: var(--sh-float), var(--app-glass-edge);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-bar { background: var(--app-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
}
.bottom-bar a {
  min-height: 52px;
  padding: 0 12px;
  gap: 8px;
  border: 0;
  border-radius: var(--r-pill);
  font: 700 1rem/1.15 var(--font-body);
  text-align: center;
  background: var(--color-dominant-fill);
  color: var(--color-on-dominant);
  box-shadow: var(--sh-blue);
}
.bottom-bar a:first-child { border: 0; background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--sh-yellow); }
.bottom-bar a:hover { color: var(--color-on-dominant); }
.bottom-bar a:first-child:hover { color: var(--color-on-accent); }
.bottom-bar a:focus-visible { outline: 3px solid var(--app-focus); outline-offset: 2px; }
.bottom-bar .bar-icon { width: 18px; height: 18px; }
@media (max-width: 767px) {
  body.has-bottom-bar { padding-bottom: 96px; }
}
@media (max-width: 359.98px) { .bottom-bar a { font-size: 0.9375rem; padding: 0 8px; } }
.menu-open .bottom-bar { display: none; }
.form-confirmation,
.form-failure,
.form-field input,
.form-field textarea,
.quote-form button { scroll-margin-bottom: 104px; }

/* ====================================================================================================================
   Page heads (Home hero and inner pages): big heading left, lede right at 1024+, a faint wash behind
   ==================================================================================================================== */
/* The wash starts under the private bar (an in-flow block that paints over it), so the strip behind the floating nav
   is the same page fog + wash as the head below it. */
.hero,
.page-head { position: relative; }
.hero::before,
.page-head::before {
  content: "";
  position: absolute;
  inset: -200px 0 auto 0;
  height: calc(100% + 200px);
  max-height: 880px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 70% at 18% 20%, var(--app-wash-blue), transparent 70%), radial-gradient(40% 50% at 92% 8%, var(--app-wash-yellow), transparent 70%);
}
.lede { font-size: 1.25rem; line-height: 1.45; color: var(--color-ink); text-wrap: pretty; margin: 0; }
.page-head h1 { font-size: var(--h1-size); }
.page-head .container { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.page-head .lede { max-width: 34ch; }
@media (min-width: 1024px) {
  .page-head .container { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; align-items: end; }
  .page-head .container > h1 { grid-column: 1 / span 7; }
  .page-head .container > .lede { grid-column: 8 / span 5; padding-bottom: 8px; }
  .page-head .container > :not(h1):not(.lede) { grid-column: 1 / -1; }
}

/* ---------- Home hero: h1 left, lede + actions + license right; bento of picker, photo and facts ---------- */
.hero .container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 16px;
}
.hero-grid,
.hero-copy,
.hero-lower { display: contents; }
.hero h1 { grid-column: 1 / -1; font-size: clamp(2.125rem, 10.6vw, 6rem); max-width: none; }
.hero .lede,
.hero .hero-actions,
.hero .license-line { grid-column: 1 / -1; }
.hero .lede { margin-top: 22px; max-width: 30ch; font-size: 1.25rem; color: var(--color-ink); } /* 20px ink on phones */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0; }
.hero-actions .btn { flex: 1 1 auto; }
.hero .license-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  font-size: 0.9375rem;
  color: var(--color-muted);
  white-space: nowrap;
}
.hero .license-line::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: var(--color-dominant);
  -webkit-mask: var(--icon-shield) center / contain no-repeat;
  mask: var(--icon-shield) center / contain no-repeat;
}
@media (max-width: 359.98px) { .hero .license-line { font-size: 0.875rem; } }
.hero .picker { grid-column: 1 / -1; grid-row: 5; margin-top: 32px; }
.hero .trust-panel { grid-column: 1 / -1; grid-row: 6; margin-top: 16px; }
.hero .hero-photo { grid-column: 1 / -1; grid-row: 7; margin-top: 16px; aspect-ratio: 16 / 9; }
@media (min-width: 768px) {
  .hero .hero-photo { grid-column: 1 / span 5; grid-row: 6; aspect-ratio: auto; min-height: 0; }
  .hero .trust-panel { grid-column: 6 / span 7; grid-row: 6; }
}
@media (min-width: 1024px) {
  .hero .container { grid-template-rows: auto auto auto 1fr auto auto; }
  .hero h1 { grid-column: 1 / span 8; grid-row: 1 / span 4; font-size: 5.5rem; align-self: start; }
  .hero .lede { grid-column: 9 / span 4; grid-row: 1; margin-top: 0; font-size: 1.1875rem; }
  .hero .hero-actions { grid-column: 9 / span 4; grid-row: 2; }
  .hero .hero-actions .btn { flex: 1 1 100%; }
  .hero .license-line { grid-column: 9 / span 4; grid-row: 3; padding-bottom: 6px; }
  .hero .picker { grid-row: 5; margin-top: 44px; }
}
@media (min-width: 1180px) {
  .hero .picker { grid-column: 1 / span 8; }
  .hero .hero-photo { grid-column: 9 / span 4; grid-row: 5; margin-top: 44px; }
  .hero .trust-panel { grid-column: 1 / -1; grid-row: 6; }
}

/* Photo slots: a soft fill with the placeholder words (no hatching, no border) */
.photo-slot {
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--app-photo-a), var(--app-photo-b));
  box-shadow: var(--sh-2), var(--tile-edge);
  padding: 20px;
}
.photo-slot span { background: none; padding: 0; font-size: 0.9375rem; font-weight: 700; color: var(--color-muted); }

/* ---------- Picker tile: flat pills, yellow check, one shared answer cell (tile height never changes) ---------- */
.picker { display: grid; gap: 20px; padding: 22px 16px 18px; min-width: 0; }
.picker .picker-heading { margin: 0; font: 800 1.75rem/1.05 var(--font-heading); letter-spacing: -0.02em; }
.picker-hint { margin: 4px 0 0; font-size: 0.9375rem; color: var(--color-muted); }
.picker-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-top: 4px; margin: 0; }
.picker-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  min-height: 72px;
  padding: 10px 8px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--app-fill);
  color: var(--color-ink);
  font: 700 0.9375rem/1.2 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.picker-chip::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  background-color: var(--color-dominant);
  -webkit-mask: var(--svc-icon) center / contain no-repeat;
  mask: var(--svc-icon) center / contain no-repeat;
}
.picker-chip:hover { background: var(--app-fill); color: var(--color-ink); }
@media (hover: hover) { .picker-chip:hover { background: var(--app-fill-hover); } }
.picker-chip[aria-checked="true"],
.picker-chip.is-on,
.picker-chip[aria-checked="true"]:hover,
.picker-chip.is-on:hover { background: var(--color-dominant-fill); color: var(--color-on-dominant); box-shadow: var(--sh-pick); }
.picker-chip[aria-checked="true"]::before,
.picker-chip.is-on::before { background-color: var(--color-on-dominant); }
.chip-badge {
  position: absolute;
  top: -7px;
  right: -4px;
  width: 22px;
  height: 22px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 2px var(--app-tile);
}
.chip-badge::after {
  content: "";
  width: 13.5px;
  height: 13.5px;
  background-color: var(--color-on-accent);
  -webkit-mask: var(--icon-check-bold) center / contain no-repeat;
  mask: var(--icon-check-bold) center / contain no-repeat;
}
.picker-chip[aria-checked="true"] .chip-badge { display: grid; }
@media (max-width: 359.98px) { .picker-chip { font-size: 0.875rem; } }
.picker-panes { display: grid; border-top: 1px solid var(--color-rule); padding-top: 20px; min-width: 0; }
.picker-card,
.band-light .picker-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  animation: none;
}
.picker-card.is-off { visibility: hidden; }
.picker-card h3 { margin: 0; font: 800 1.5rem/1.1 var(--font-heading); letter-spacing: -0.02em; }
.picker-rows { display: grid; gap: 14px; margin: 14px 0 0; }
.picker-rows > div { padding: 0; }
.picker-rows > div + div { border-top: 0; }
.picker-rows dt { font: 700 0.75rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: var(--label-tracking); color: var(--color-muted); }
.picker-rows dd { margin: 3px 0 0; }
.picker-rows .mark dt {
  display: inline;
  padding: 0 2px;
  color: var(--color-ink);
  text-decoration: none;
  background: linear-gradient(transparent 55%, var(--color-accent-line) 55%);
}
.picker-rows .mark dd { margin-top: 6px; }
.picker-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 20px; }
.picker-actions .btn { flex: 1 1 auto; }
@media (min-width: 768px) {
  .picker { padding: 28px; }
  .picker-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker-chip { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 52px; padding: 6px 14px 6px 12px; border-radius: var(--r-pill); gap: 10px; }
}
@media (min-width: 1024px) {
  .picker { padding: 32px; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 20px 32px; }
  .picker-head { grid-column: 1 / -1; }
  .picker-chips { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .picker-panes { grid-column: 2; grid-row: 2; border-top: 0; border-left: 1px solid var(--color-rule); padding: 2px 0 0 32px; }
  .picker-actions .btn { flex: 1 1 0; }
}

/* ---------- Facts tile: an iOS-style list below 1180px (label left, value right), six columns at 1180+ ---------- */
.trust-panel { padding: 4px 20px; color: var(--color-ink); min-width: 0; }
.facts { margin: 0; }
.trust-field {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  padding: 13px 0;
  min-width: 0;
}
.trust-field + .trust-field { border-top: 1px solid var(--color-rule); }
.trust-field .label {
  flex: none;
  margin: 0;
  font: 700 0.75rem/1.3 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--color-muted);
}
.trust-field .value { margin: 0; font-weight: 700; line-height: 1.35; text-align: right; white-space: nowrap; color: var(--color-ink); }
.trust-field:has(.confirm) .value { white-space: normal; }
/* The Hours chip sits on its own line under the hours */
.trust-panel .confirm {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 6px 0 0 auto;
  border-color: var(--color-dominant);
  color: var(--color-chip-ink);
  background: var(--color-chip-bg);
}
@media (max-width: 359.98px) { .trust-field:first-child .value { white-space: normal; } }
@media (min-width: 1180px) {
  .trust-panel { padding: 8px 12px; }
  .facts { display: grid; grid-template-columns: repeat(6, auto); justify-content: space-between; }
  .trust-field { display: block; padding: 16px 18px; }
  .trust-field + .trust-field { border-top: 0; border-left: 1px solid var(--color-rule); }
  .trust-field .value { text-align: left; margin-top: 4px; display: block; }
  .trust-field:has(.confirm) .value { white-space: nowrap; }
  .trust-panel .confirm { margin-left: 0; }
}

/* ====================================================================================================================
   Home: services as six uniform rows (label | symptom + body | "More on" pill)
   ==================================================================================================================== */
#services-home .services-compact { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; gap: 12px; }
#services-home .services-compact > .section-heading { margin-bottom: 16px; }
#services-home .service-row,
#services-home .service-row + .service-row { display: grid; align-content: center; padding: 22px 20px; border: 0; gap: 0; }
#services-home .service-row > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
#services-home .service-row h3 {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-left: 56px;
  margin: 0;
  font: 700 0.8125rem/1.3 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
  color: var(--color-dominant);
}
#services-home .service-row h3::before,
.service-row > div > .section-heading::before,
.credentials-heading::before,
.reach-call::before,
.reach-mail::before,
.area-hours-panel::before,
.review-single::before {
  content: "";
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--color-pick);
}
#services-home .service-row h3::before { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
#services-home .service-row h3::after,
.service-row > div > .section-heading::after,
.credentials-heading::after,
.reach-call::after,
.reach-mail::after,
.area-hours-panel::after,
.review-single::after {
  content: "";
  width: 22px;
  height: 22px;
  background-color: var(--color-dominant);
  -webkit-mask: var(--svc-icon) center / contain no-repeat;
  mask: var(--svc-icon) center / contain no-repeat;
}
#services-home .service-row h3::after,
.service-row > div > .section-heading::after,
.credentials-heading::after { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); }
/* In a grid tile: disc and icon share the first cell */
.reach-call::before,
.reach-mail::before,
.area-hours-panel::before,
.review-single::before { grid-row: 1; grid-column: 1; }
.reach-call::after,
.reach-mail::after,
.area-hours-panel::after,
.review-single::after { grid-row: 1; grid-column: 1; align-self: start; justify-self: start; margin: 11px 0 0 11px; }
#services-home .service-symptom { margin: 6px 0 0; font: 800 1.375rem/1.15 var(--font-heading); letter-spacing: -0.02em; color: var(--color-ink); }
#services-home .service-symptom + p { margin: 0; color: var(--color-muted); max-width: 62ch; }
#services-home .service-row .link-tap {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 6px 0 0;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--app-fill);
  font-weight: 700;
  line-height: 24px;
  text-decoration: none;
}
#services-home .service-row .link-tap:hover { background: var(--app-fill-hover); }
#services-home .service-row .link-tap::after,
#projects .after-grid .link-tap::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
}
@media (max-width: 419.98px) { #services-home .service-row .link-tap { border-radius: var(--r-md); } }
@media (min-width: 768px) {
  #services-home .services-compact { grid-auto-rows: 1fr; column-gap: 0; }
  #services-home .service-row,
  #services-home .service-row + .service-row { padding: 24px 28px; }
  #services-home .service-row > div { grid-template-columns: 12.5rem minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 32px; row-gap: 6px; align-content: center; }
  #services-home .service-row h3 { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  #services-home .service-symptom,
  #services-home .service-symptom + p { grid-column: 2; margin-top: 0; }
  #services-home .service-row .link-tap { grid-column: 2; width: 18.5rem; max-width: 100%; }
}
@media (min-width: 1024px) {
  #services-home .service-row,
  #services-home .service-row + .service-row { padding: 26px 32px; }
  #services-home .service-row > div { grid-template-columns: 14rem minmax(0, 1fr) 18.5rem; grid-template-rows: auto auto; column-gap: 40px; }
  #services-home .service-symptom { grid-row: 1; align-self: end; font-size: 1.5rem; }
  #services-home .service-symptom + p { grid-row: 2; align-self: start; }
  #services-home .service-row .link-tap { grid-column: 3; grid-row: 1 / -1; align-self: center; justify-self: stretch; width: auto; margin: 0; white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1179.98px) {
  #services-home .service-row > div { grid-template-columns: 12rem minmax(0, 1fr) 18.5rem; column-gap: 28px; }
}

/* ====================================================================================================================
   A note from Blaine: one committed blue panel (Home section; About beside the portrait)
   ==================================================================================================================== */
.owner-note {
  position: relative;
  max-width: none;
  margin: 0;
  padding: 32px 24px;
  border: 0;
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, var(--color-dominant-fill) 0%, var(--color-dominant-deep) 70%);
  color: var(--color-on-dominant);
  box-shadow: var(--sh-2), var(--tile-edge);
  overflow: hidden;
  min-width: 0;
}
.owner-note .section-heading { color: var(--color-on-dominant); margin: 0; }
.note-body { display: grid; gap: 16px; margin-top: 20px; font-size: 1.1875rem; line-height: 1.55; }
.note-body p { margin: 0; color: var(--color-on-dominant); font-size: inherit; }
.note-body p:first-child { font: 700 clamp(1.375rem, 2.2vw, 1.75rem)/1.35 var(--font-heading); letter-spacing: -0.01em; }
.owner-note .confirm { border-color: var(--app-on-deep-chip-edge); color: var(--color-on-dominant); background: var(--color-panel-on-dominant); }
.note-body .note-signoff { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-weight: 700; box-shadow: none; }
.note-body .note-signoff::before { content: ""; width: 28px; height: 3px; flex: none; border-radius: 2px; background: var(--color-accent); }
.owner-note a:focus-visible { outline-color: var(--app-focus-on-deep); }
@media (min-width: 1024px) {
  .note-section .owner-note { padding: 64px; }
  .note-section .note-body { margin-top: 28px; grid-template-columns: 1fr 1fr; gap: 20px 48px; }
  .note-section .note-body p:first-child { grid-column: 1 / -1; font-size: 2.25rem; }
  .note-section .note-body p:nth-child(2) { grid-column: 1; grid-row: 2 / span 2; }
  .note-section .note-body p:nth-child(3) { grid-column: 2; grid-row: 2; }
  .note-section .note-body .note-signoff { grid-column: 2; grid-row: 3; margin-top: 0; align-self: end; }
}

/* ====================================================================================================================
   Home: project photos (scroller on phones, three columns at 768+), link beside the heading
   ==================================================================================================================== */
#projects .container { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; column-gap: 32px; }
#projects .section-heading { grid-column: 1; grid-row: 1; margin-bottom: 0; }
#projects .after-grid { grid-column: 1; grid-row: 2; margin: 4px 0 0; }
#projects .after-grid .link-tap { display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; min-height: 44px; font-weight: 700; text-decoration: none; }
#projects .projects-grid {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 82%;
  grid-template-columns: none;
  gap: 14px;
  margin: 20px calc(-1 * var(--gutter)) 0;
  padding: 4px var(--gutter) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
#projects .projects-grid::-webkit-scrollbar { display: none; }
#projects .projects-grid > div { scroll-snap-align: start; min-width: 0; }
#projects .projects-grid:focus-visible { outline: 2px solid var(--app-focus); outline-offset: -2px; border-radius: var(--r-md); }
.project-caption,
#projects .project-caption { margin: 10px 0 0; font-size: 0.9375rem; font-weight: 700; color: var(--color-muted); }
@media (min-width: 600px) {
  #projects .container { grid-template-columns: minmax(0, 1fr) auto; }
  #projects .after-grid { grid-column: 2; grid-row: 1; margin: 0; }
}
@media (min-width: 768px) {
  #projects .projects-grid { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 28px 0 0; padding: 0; gap: 16px; }
}

/* ====================================================================================================================
   Reviews: tiles in two equal-height columns at 900+, the key phrase highlighted, the rating line as a pill
   ==================================================================================================================== */
#reviews .container { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; align-items: end; }
#reviews .section-heading { margin: 0; }
.reviews-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0 0; color: var(--color-ink); font-weight: 700; }
.reviews-summary .link-inline {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--app-tile);
  box-shadow: var(--sh-1), var(--tile-edge);
  font-weight: 700;
  text-decoration: none;
}
.reviews-list { grid-column: 1 / -1; margin: 28px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.reviews-list .review { display: flex; flex-direction: column; gap: 18px; padding: 28px 24px; border: 0; min-width: 0; }
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--color-ink); }
.review strong { font-weight: 700; color: var(--color-ink); text-decoration: none; padding: 0 1px; background: linear-gradient(transparent 62%, var(--app-highlight) 62%); }
.review .review-source { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--color-rule); font-size: 0.875rem; font-weight: 700; color: var(--color-muted); }
.reviews-note { grid-column: 1 / -1; margin: 18px 0 0; }
@media (min-width: 900px) {
  #reviews .container { grid-template-columns: minmax(0, 1fr) auto; }
  .reviews-summary { margin: 0; justify-content: flex-end; }
  /* Two equal-height rows (Matthew + Gin, Monica + J M), so both columns end level */
  .reviews-list,
  .reviews-list:has(> :nth-child(2)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .reviews-list .review { padding: 32px; }
  .reviews-note { margin-top: 2px; }
}

/* ====================================================================================================================
   FAQ (Home, Contact): one grouped list, round chevrons; heading (and Call) sticky beside the list at 1024+
   ==================================================================================================================== */
#faq .container { display: grid; gap: 24px; }
.faq-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 32px; }
#faq .section-heading { margin: 0; }
.faq-list { margin: 0; overflow: hidden; }
.faq-item { border: 0; }
.faq-item + .faq-item { border-top: 1px solid var(--color-rule); }
.faq-item summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 24px;
  font: 700 1.125rem/1.3 var(--font-heading);
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
.faq-item summary:hover { background: var(--app-summary-hover); }
.faq-item summary:focus-visible { outline-offset: -3px; border-radius: 0; }
.faq-item summary::after { content: ""; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--app-fill); }
.faq-item summary::before {
  content: "";
  position: absolute;
  left: auto;
  right: 32px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 0;
  background-color: var(--color-dominant);
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  transform: translateY(-50%);
  z-index: 1;
}
.faq-item[open] summary::before { transform: translateY(-50%) rotate(180deg); }
.faq-item[open] summary::after { background: var(--color-pick); }
.faq-item p { margin: 0; padding: 0 24px 22px; max-width: 62ch; color: var(--color-ink); }
@media (min-width: 1024px) {
  #faq .container { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
  .faq-head { flex-direction: column; gap: 24px; position: sticky; top: 100px; }
}

/* ====================================================================================================================
   Estimate form (Home, Contact): heading + intro, gas warning box above the form, the form in one tile
   ==================================================================================================================== */
#quote .container { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; }
#quote .section-heading { margin: 0; }
#quote .container > p:not(.form-promise) { margin: 12px 0 0; font-size: 1rem; color: var(--color-muted); }
.quote-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 28px 0 16px;
  padding: 18px 20px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--app-warn-bg);
  box-shadow: inset 0 0 0 var(--app-warn-line-w) var(--app-warn-line);
  max-width: none;
}
.quote-callout::before {
  content: "";
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 1px;
  background-color: var(--app-warn-icon);
  -webkit-mask: var(--icon-warn) center / contain no-repeat;
  mask: var(--icon-warn) center / contain no-repeat;
}
.quote-callout p { margin: 0; font-weight: 700; color: var(--app-warn-text); max-width: 90ch; }
@media (min-width: 768px) {
  #quote .container { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  #quote .container > .section-heading { grid-column: 1; grid-row: 1; }
  #quote .container > p:not(.form-promise) { grid-column: 2; grid-row: 1; margin: 0; }
  #quote .container > .quote-callout,
  #quote .container > .quote-form { grid-column: 1 / -1; }
}
#quote .quote-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: none; margin: 0; padding: 24px; border: 0; }
.quote-form .demo-label {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin: 0 0 2px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--color-notice-bg);
  color: var(--color-notice-text);
  font: 700 0.75rem/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: var(--label-tracking);
}
.quote-form > noscript,
.quote-form > .form-confirmation,
.quote-form > .form-failure { grid-column: 1 / -1; }
.form-field { margin: 0; gap: 0; min-width: 0; }
.form-field label,
.pick-group legend { display: block; margin: 0 0 6px; padding: 0; font-size: 1rem; font-weight: 700; color: var(--color-ink); }
.form-field .hint { display: block; margin: -2px 0 8px; font-size: 0.9375rem; color: var(--color-muted); }
.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  font: inherit;
  color: var(--color-ink);
  background: var(--app-field-well);
  border: 1px solid var(--app-field-edge);
  border-radius: var(--r-sm);
}
.form-field input:hover,
.form-field textarea:hover { background: var(--app-fill-hover); }
.form-field input:focus,
.form-field textarea:focus { outline: none; background: var(--app-tile); border-color: var(--app-focus); box-shadow: 0 0 0 4px var(--app-focus-glow); }
.form-field input:focus-visible,
.form-field textarea:focus-visible { outline: 2px solid var(--app-focus); outline-offset: 2px; }
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input[type="tel"] { max-width: 16rem; }
.form-field [aria-invalid="true"] { border: 1px solid var(--app-error); background: var(--app-error-bg); }
.field-error { margin: 6px 0 0; padding: 0; border: 0; font-size: 0.9375rem; font-weight: 700; color: var(--app-error); }
/* Best time: a segmented control, nothing pre-selected */
.pick-group { margin: 0; min-width: 0; }
.quote-form .pick-grid,
#quote .quote-form .pick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-width: none;
  margin: 0;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--app-fill);
}
.pick {
  position: relative;
  justify-content: center;
  min-height: 48px;
  padding: 0 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--color-ink);
  font-weight: 700;
  text-align: center;
}
.pick:hover { border-color: transparent; background: var(--app-fill-hover); }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick-main { font-weight: 700; }
.pick:has(input:checked),
.pick:has(input:checked):hover { background: var(--app-tile); color: var(--color-link); box-shadow: var(--sh-1), 0 0 0 1.5px var(--color-dominant); }
.pick:has(input:focus-visible) { outline: 3px solid var(--app-focus); outline-offset: 2px; }
.pick:has(input[aria-invalid="true"]) { border: 0; }
.pick-group:has(input[aria-invalid="true"]) .pick-grid { box-shadow: inset 0 0 0 1.5px var(--app-error); }
.form-promise { margin: 6px 0 0; padding-top: 20px; border-top: 1px solid var(--color-rule); font-weight: 700; }
.quote-form > button[type="submit"] { width: 100%; }
.form-confirmation,
.form-failure { margin: 2px 0 0; padding: 16px 18px; border: 0; border-radius: var(--r-md); background: var(--color-pick); color: var(--color-ink); font-weight: 700; }
.form-failure { box-shadow: inset 0 0 0 1px var(--app-error); }
@media (min-width: 600px) {
  .quote-form .pick-grid,
  #quote .quote-form .pick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 600px) and (max-width: 1023.98px) {
  .quote-form > button[type="submit"] { width: auto; min-width: 15rem; justify-self: start; }
}
@media (min-width: 1024px) {
  #quote .quote-form { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 24px; padding: 40px; }
  .quote-form > .demo-label { grid-column: 1 / -1; }
  .quote-form > .form-field:nth-of-type(1) { grid-column: 1 / span 7; }
  .quote-form > .form-field:nth-of-type(2) { grid-column: 8 / span 5; }
  .quote-form > .form-field:nth-of-type(3) { grid-column: 1 / -1; }
  .quote-form > .pick-group { grid-column: 1 / span 7; grid-row: span 2; }
  .quote-form > .form-promise { grid-column: 8 / span 5; margin: 0; padding: 0; border: 0; align-self: end; }
  .quote-form > button[type="submit"] { grid-column: 8 / span 5; align-self: end; }
  .form-field input[type="tel"] { max-width: none; }
}

/* ====================================================================================================================
   Closing panel (every page): deep gradient, huge yellow number, Call hidden at 1024+, ghost estimate button
   ==================================================================================================================== */
.closing-panel,
.pricing-cta .container {
  border-radius: var(--r-xl);
  overflow: hidden;
  padding: 36px 20px;
  background: radial-gradient(80% 120% at 85% 0%, var(--app-wash-deep), transparent 60%), linear-gradient(160deg, var(--color-dominant-deep), var(--app-deep-2));
  color: var(--color-on-dominant);
  box-shadow: var(--sh-2), var(--tile-edge);
}
.closing-panel .section-heading,
.pricing-cta .section-heading { margin: 0; color: var(--color-on-dominant); }
.closing-phone { margin: 10px 0 0; max-width: none; }
.closing-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font: 800 clamp(1.75rem, 9.5vw, 6rem)/1 var(--font-heading);
  letter-spacing: -0.04em;
  color: var(--color-accent-on-dominant);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.closing-phone a:hover { color: var(--color-accent-on-dominant); text-decoration: underline; text-decoration-thickness: 4px; }
.closing-say,
.pricing-cta .container > p { margin: 16px 0 0; font-size: 1.1875rem; color: var(--color-on-dominant-soft); max-width: 60ch; text-wrap: pretty; }
.closing-panel .closing-actions,
.pricing-cta .closing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.closing-panel a:focus-visible,
.pricing-cta a:focus-visible { outline-color: var(--app-focus-on-deep); }
.closing-panel .btn-primary:focus-visible,
.pricing-cta .btn-primary:focus-visible { outline-color: var(--app-focus-on-deep); }
.pricing-cta .btn-secondary { background: var(--app-ghost); color: var(--color-on-dominant); box-shadow: inset 0 0 0 1px var(--app-ghost-edge); }
.pricing-cta .btn-secondary:hover { background: var(--app-ghost); color: var(--color-on-dominant); box-shadow: inset 0 0 0 2px var(--app-ghost-edge); }
.pricing-cta .confirm,
.reach-call .confirm { border-color: var(--color-accent-on-dominant); color: var(--color-chip-ink-on-dominant); background: var(--color-chip-bg-on-dominant); }
.pricing-cta .container { margin-inline: var(--gutter); max-width: none; }
@media (min-width: 1200px) {
  .pricing-cta .container { max-width: calc(var(--container) - 2 * 32px); margin-inline: auto; }
}
@media (min-width: 1024px) {
  .closing-panel,
  .pricing-cta .container { padding: 64px; }
  .closing-panel .closing-actions,
  .pricing-cta .closing-actions { margin-top: 32px; }
  .closing-panel .closing-call,
  .pricing-cta .closing-actions .btn-primary { display: none; }
}

/* ====================================================================================================================
   Footer: on the page, a hairline above, separators travel with the next item
   ==================================================================================================================== */
.site-footer { padding: 48px 0 32px; background: transparent; border: 0; color: var(--color-ink); font-size: 0.9375rem; }
.site-footer .footer-grid {
  gap: 28px;
  padding-top: 36px; /* top only: the side padding is the .container gutter */
  background: linear-gradient(var(--color-rule), var(--color-rule)) top center / calc(100% - 2 * var(--gutter)) 1px no-repeat;
}
.site-footer h2 { margin: 0 0 10px; font: 800 1.125rem/1.2 var(--font-heading); color: var(--color-ink); }
.site-footer p { margin: 6px 0 0; color: var(--color-muted); }
.site-footer a { color: var(--color-link); font-weight: 700; }
.site-footer a:hover { color: var(--color-link); }
.site-footer a:focus-visible { outline-color: var(--app-focus); }
.site-footer .link-tap { display: inline-flex; min-height: 44px; align-items: center; overflow-wrap: anywhere; }
.site-footer .sep-item { display: inline-block; max-width: 100%; }
.site-footer .sep-item > [aria-hidden="true"] { display: inline; }
.site-footer .sep-item .link-inline { display: inline; }
@media (max-width: 959.98px) {
  /* Below 960px: one item per line, so the "·" separators (which only join items on one line) are dropped */
  .site-footer .sep-item { display: block; }
  .site-footer .sep-item > [aria-hidden="true"] { display: none; }
}
.footer-nav li a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.site-footer .footer-nav { flex-direction: column; gap: 0; } /* one page per line at every width */
@media (min-width: 768px) {
  .site-footer .footer-grid,
  .footer-grid:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
}

/* ====================================================================================================================
   About: portrait + note in one bento row; License tile beside the story; steps in one tile; the review as a big quote
   ==================================================================================================================== */
.about-intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.about-intro .owner-photo,
.owner-photo.photo-slot { max-width: none; margin: 0; aspect-ratio: 4 / 3; }
.about-intro .note-body p:first-child { font-size: clamp(1.375rem, 2.2vw, 1.875rem); }
@media (min-width: 768px) {
  .about-intro { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .about-intro .owner-photo { grid-column: 1 / span 5; aspect-ratio: auto; min-height: 420px; }
  .about-intro .owner-note { grid-column: 6 / span 7; padding: 44px; }
}
@media (min-width: 1024px) {
  .about-intro { margin-top: 44px; }
  .about-intro .owner-note { padding: 56px; }
  .about-intro .owner-photo { aspect-ratio: auto; height: 100%; align-self: stretch; } /* the portrait fills the note's height */
}
.story-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.credentials-panel { display: grid; gap: 12px; align-content: start; padding: 24px; color: var(--color-ink); min-width: 0; }
.credentials-heading {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 800 1.5rem/1.1 var(--font-heading);
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--color-ink);
}
.credentials-heading { --svc-icon: var(--icon-shield); }
.credentials-panel p { margin: 0; max-width: 52ch; color: var(--color-ink); overflow-wrap: anywhere; }
.credentials-panel .link-inline { display: inline; }
.story-body { display: grid; gap: 16px; align-content: start; padding: 4px 0; min-width: 0; }
.story-body .section-heading { margin: 0; }
.story-body p { margin: 0; font-size: 1.1875rem; line-height: 1.6; max-width: 58ch; }
@media (min-width: 768px) { .credentials-panel { padding: 32px; } }
@media (min-width: 1024px) {
  .story-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .story-split .credentials-panel { grid-column: 8 / span 5; grid-row: 1; }
  .story-split .story-body { grid-column: 1 / span 6; grid-row: 1; }
}
/* How a visit goes: one tile, four stops (list on phones, 2 x 2 at 768, one row at 1024+), step 3 yellow */
.steps-list { display: block; margin: 0; padding: 8px 24px; }
.steps-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; align-content: start; padding: 20px 0; border: 0; }
.steps-list li + li { border-top: 1px solid var(--color-rule); }
.steps-list .step-num {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  background: var(--color-dominant-fill);
  color: var(--color-on-dominant);
  font: 800 1.25rem/1 var(--font-heading);
  box-shadow: 0 0 0 5px var(--color-pick);
}
.steps-list li:nth-child(3) .step-num { background: var(--color-accent); color: var(--color-on-accent); box-shadow: 0 0 0 5px var(--app-step-ring); }
.steps-list h3 { margin: 0; padding-top: 9px; font: 800 1.3125rem/1.15 var(--font-heading); letter-spacing: -0.015em; align-self: start; }
.steps-list p { margin: 0; color: var(--color-muted); }
@media (min-width: 768px) {
  .steps-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; padding: 12px 32px; }
  .steps-list li:nth-child(2) { border-top: 0; }
}
@media (min-width: 1024px) {
  .steps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; padding: 36px 12px 32px; }
  .steps-list li { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 24px; border-top: 0; }
  .steps-list li + li { border-top: 0; border-left: 1px solid var(--color-rule); }
  .steps-list .step-num { grid-row: auto; margin-bottom: 18px; }
  .steps-list h3 { padding-top: 0; margin-bottom: 8px; }
}
/* One review, given room */
.review-single,
main > section > .container > .review-single {
  position: relative;
  display: grid;
  gap: 22px;
  max-width: none;
  margin: 0;
  padding: 32px 24px;
  border: 0;
}
.review-single { --svc-icon: var(--icon-quote); }
.review-single blockquote p { margin: 0; max-width: 46ch; font: 700 clamp(1.25rem, 2.1vw, 1.75rem)/1.4 var(--font-heading); letter-spacing: -0.01em; text-wrap: pretty; color: var(--color-ink); }
.review-single strong { font-weight: 800; background: linear-gradient(transparent 64%, var(--app-highlight) 64%); box-shadow: none; }
.review-single .review-source { margin: 0; padding-top: 16px; border-top: 1px solid var(--color-rule); font-size: 0.9375rem; font-weight: 700; color: var(--color-muted); }
@media (min-width: 1024px) {
  .review-single,
  main > section > .container > .review-single { grid-template-columns: 72px minmax(0, 1fr); gap: 24px 32px; padding: 56px 64px; }
  .review-single .review-source { grid-column: 2; }
}

/* ====================================================================================================================
   Services: jump pills; text + "What Blaine does" in one column, the diagnosis card in the other, alternating at 1024+
   ==================================================================================================================== */
.jump-links,
.page-head .jump-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0 0; padding: 0; border: 0; list-style: none; }
.jump-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px 8px 12px;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1), var(--tile-edge);
  color: var(--color-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}
.jump-links a::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  background-color: var(--color-dominant);
  -webkit-mask: var(--svc-icon) center / contain no-repeat;
  mask: var(--svc-icon) center / contain no-repeat;
}
.jump-links a:hover { color: var(--color-ink); box-shadow: var(--sh-2), var(--tile-edge); }
@media (max-width: 359.98px) { .jump-links a { font-size: 0.875rem; gap: 8px; padding: 8px 10px; } }
@media (min-width: 768px) {
  .jump-links,
  .page-head .jump-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .jump-links a { border-radius: var(--r-pill); min-height: 52px; }
}
@media (min-width: 1180px) {
  .jump-links,
  .page-head .jump-links { grid-template-columns: repeat(6, auto); justify-content: start; }
}
/* One service: kit markup .service-row (text, card), h3, list, actions; the row's children join the container grid. */
.container:has(> .service-row + h3) { display: grid; grid-template-columns: minmax(0, 1fr); }
.container:has(> .service-row + h3) > .service-row { display: contents; }
.service-row > div { position: relative; display: grid; gap: 14px; align-content: start; min-width: 0; }
/* Service header: icon disc + service name on one line (the h2 is the kit's; the disc is drawn on it) */
.service-row > div > .section-heading { margin: 0 0 4px; font-size: clamp(2rem, 4vw, 3rem); }
.service-row > div > .section-heading { position: relative; display: flex; align-items: center; gap: 14px; }
.service-row > div > .section-heading::before { background: var(--disc-bg, var(--color-pick)); box-shadow: var(--disc-shadow, none); }
@media (min-width: 1024px) {
  .service-row > div > .section-heading { gap: 18px; }
  .service-row > div > .section-heading::before { width: 56px; height: 56px; }
  .service-row > div > .section-heading::after { left: 14px; width: 28px; height: 28px; }
}
.service-row > div > p { margin: 0; max-width: 60ch; }
.service-row > div > p .confirm { white-space: normal; }
.offerings-list li .confirm { white-space: nowrap; } /* short chips: kept whole, they drop to the next line instead */
.service-row > .diagnosis-card { margin-top: 24px; }
.container:has(> .service-row + h3) > h3 { margin: 24px 0 0; font: 800 1.25rem/1.2 var(--font-heading); letter-spacing: -0.01em; }
.offerings-list { display: grid; gap: 2px; margin: 12px 0 0; padding: 0; list-style: none; }
/* Block li with the tick pinned left, so a [CONFIRM] chip stays inline after the text (a grid li would put the chip in
   the 22px tick column) */
.offerings-list li { position: relative; margin: 0; padding: 6px 0 6px 32px; }
.offerings-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  background-color: var(--color-dominant);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.container:has(> .service-row + h3) > .closing-actions { margin-top: 20px; }
@media (max-width: 599.98px) {
  .container:has(> .service-row + h3) > .closing-actions .btn { flex: 1 1 100%; }
}
@media (min-width: 1024px) {
  .container:has(> .service-row + h3) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto 1fr; /* a taller card adds its height under the button, not between rows */
    column-gap: 16px;
    align-items: start;
  }
  .container:has(> .service-row + h3) > .service-row > div { grid-column: 1 / span 6; grid-row: 1; }
  .container:has(> .service-row + h3) > h3 { grid-column: 1 / span 6; grid-row: 2; margin-top: 32px; }
  .container:has(> .service-row + h3) > .offerings-list { grid-column: 1 / span 6; grid-row: 3; }
  .container:has(> .service-row + h3) > .closing-actions { grid-column: 1 / span 6; grid-row: 4; }
  .container:has(> .service-row + h3) > .service-row > .diagnosis-card { grid-column: 8 / span 5; grid-row: 1 / -1; margin: 0; align-self: start; justify-self: stretch; order: 0; }
  /* Every second service (.flip): card on the left, text on the right. Visual only; DOM and tab order unchanged. */
  .container:has(> .service-row.flip + h3) > .service-row > div,
  .container:has(> .service-row.flip + h3) > h3,
  .container:has(> .service-row.flip + h3) > .offerings-list,
  .container:has(> .service-row.flip + h3) > .closing-actions { grid-column: 7 / span 6; }
  .container:has(> .service-row.flip + h3) > .service-row > .diagnosis-card { grid-column: 1 / span 5; }
}
/* Diagnosis card: one white tile, flat meta pills, numbered rail, row 4 yellow */
.diagnosis-card,
.band-light .diagnosis-card { width: auto; max-width: none; padding: 24px 20px; border: 0; min-width: 0; }
.diagnosis-title { margin: 0; font: 800 1.375rem/1.1 var(--font-heading); letter-spacing: -0.02em; color: var(--color-ink); }
.diagnosis-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; border: 0; list-style: none; text-transform: none; letter-spacing: 0; }
.diagnosis-meta li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 12px; border-radius: var(--r-pill); background: var(--app-fill); font: 700 0.8125rem/1.3 var(--font-body); color: var(--color-ink); }
.diagnosis-meta li .confirm { font-size: 0.75rem; }
.diagnosis-rows { margin: 18px 0 0; padding: 0; list-style: none; }
.diagnosis-rows li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 14px 0; }
.diagnosis-rows li + li { border-top: 1px solid var(--color-rule); }
.diagnosis-rows p { margin: 0; }
.diagnosis-rows li p + p { margin-top: 4px; }
.diagnosis-num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--app-fill); color: var(--color-link); font: 800 0.9375rem/1 var(--font-heading); }
.diagnosis-label { margin: 0; padding-top: 2px; font: 700 0.75rem/1.3 var(--font-body); text-transform: uppercase; letter-spacing: var(--label-tracking); color: var(--color-muted); }
.diagnosis-rows li.mark .diagnosis-num { background: var(--color-accent); color: var(--color-on-accent); }
.diagnosis-rows li.mark .diagnosis-label { display: inline; padding: 0 2px; color: var(--color-ink); text-decoration: none; background: linear-gradient(transparent 55%, var(--color-accent-line) 55%); }
.diagnosis-rows li.mark .diagnosis-label + p { margin-top: 6px; }
@media (min-width: 768px) { .diagnosis-card, .band-light .diagnosis-card { padding: 32px; } }

/* ====================================================================================================================
   Project photos page: photo-app grid (1 / 2 / 3 columns; items 1 and 8 large at 1024+), caption on a white label
   ==================================================================================================================== */
.gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; }
.gallery-grid > li,
.gallery-item { height: 100%; }
.gallery-item { position: relative; margin: 0; }
.gallery-item .photo-slot { aspect-ratio: 4 / 3; height: 100%; padding: 20px 20px 64px; }
.gallery-item .project-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--app-caption-bg);
  box-shadow: var(--sh-1), var(--tile-edge);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-ink);
}
@media (min-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1024px) {
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; }
  .gallery-grid > li:nth-child(1),
  .gallery-grid > li:nth-child(8) { grid-column: span 2; grid-row: span 2; }
  .gallery-grid > li:nth-child(8) { grid-column: 2 / span 2; }
  .gallery-grid > li:nth-child(1) .photo-slot,
  .gallery-grid > li:nth-child(8) .photo-slot { aspect-ratio: auto; }
  .gallery-grid > li:nth-child(1) .project-caption,
  .gallery-grid > li:nth-child(8) .project-caption { left: 16px; bottom: 16px; padding: 10px 14px; font-size: 0.9375rem; }
}

/* ====================================================================================================================
   Contact: dark call tile (huge number, its chip under it) + white email tile; Area and Hours tiles
   ==================================================================================================================== */
.reach-tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 14px; }
.reach-call {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: space-between;
  padding: 28px 24px;
  border-radius: var(--r-xl);
  background: radial-gradient(80% 120% at 85% 0%, var(--app-wash-deep), transparent 60%), linear-gradient(160deg, var(--color-dominant-deep), var(--app-deep-2));
  color: var(--color-on-dominant);
  box-shadow: var(--sh-2), var(--tile-edge);
  container-type: inline-size;
  min-width: 0;
}
.reach-call { --svc-icon: var(--icon-phone); }
.reach-call::before { background: var(--app-ghost); }
.reach-call::after { background-color: var(--color-accent-on-dominant); }
.reach-call .contact-phone { margin: 0; max-width: none; }
.reach-call .contact-phone a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 0;
  font: 800 clamp(1.75rem, 10vw, 4.5rem)/1 var(--font-heading);
  letter-spacing: -0.04em;
  color: var(--color-accent-on-dominant);
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@supports (font-size: 1cqi) { .reach-call .contact-phone a { font-size: clamp(1.5rem, 12.5cqi, 4.5rem); } }
.reach-call .contact-phone a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
.reach-call a:focus-visible { outline-color: var(--app-focus-on-deep); }
.reach-call .contact-note { margin: 0; }
.reach-mail { position: relative; display: grid; gap: 14px; align-content: space-between; padding: 28px 24px; min-width: 0; }
.reach-mail { --svc-icon: var(--icon-mail); }
.reach-mail p { margin: 0; }
.reach-mail .link-tap { font-weight: 700; font-size: 1.0625rem; overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .reach-tiles { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .reach-call { grid-column: 1 / span 7; padding: 40px; }
  .reach-mail { grid-column: 8 / span 5; padding: 40px; align-content: center; justify-items: center; text-align: center; }
  .reach-mail::after { justify-self: center; margin: 11px 0 0; }
}
@media (min-width: 1024px) {
  .reach-tiles { margin-top: 44px; }
  .reach-mail .link-tap { font-size: 1.25rem; }
}
.area-hours { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.area-hours-panel { position: relative; display: grid; gap: 10px; align-content: start; padding: 28px 24px; border: 0; min-width: 0; }
.area-hours-panel:first-child { --svc-icon: var(--icon-pin); }
.area-hours-panel:last-child { --svc-icon: var(--icon-clock); }
.area-hours-panel .section-heading { margin: 0; font: 800 1.5rem/1.1 var(--font-heading); letter-spacing: -0.02em; }
.area-hours-panel .panel-lead { margin: 6px 0 0; font: 800 clamp(1.375rem, 2.4vw, 1.75rem)/1.2 var(--font-heading); letter-spacing: -0.015em; color: var(--color-ink); }
.area-hours-panel .panel-lead .confirm { display: block; width: fit-content; max-width: 100%; margin-top: 8px; font-size: 0.8125rem; letter-spacing: 0; }
.area-hours-panel p { margin: 0; }
.area-hours-panel .muted { color: var(--color-muted); }
@media (min-width: 768px) {
  .area-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-hours-panel { padding: 36px; }
}

/* ====================================================================================================================
   Motion: spring press, tile lift (mouse only), badge pop, answer rise, menu sheet slide. All off under reduced motion.
   ==================================================================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .btn,
  .bottom-bar a { transition: transform 0.45s var(--spring), box-shadow 0.25s var(--ease-out), background-color 0.2s var(--ease-out); }
  .btn:active,
  .bottom-bar a:active { transform: scale(0.96); transition-duration: 0.12s; }
  .picker-chip { transition: background-color 0.2s var(--ease-out), transform 0.45s var(--spring), box-shadow 0.2s var(--ease-out); }
  .picker-chip:active { transform: scale(0.97); }
  .pick span { transition: transform 0.45s var(--spring); }
  .pick:active span { transform: scale(0.97); }
  .picker-chip[aria-checked="true"] .chip-badge { animation: andys-pop 0.42s var(--spring) both; }
  .picker-card:not(.is-off) { animation: andys-rise 0.5s var(--ease-out) both; }
  .site-header .mobile-nav.open { animation: andys-sheet 0.38s var(--ease-out) both; }
  .faq-item summary::before { transition: transform 0.5s var(--spring); }
  #services-home .service-row .link-tap::after { transition: transform 0.45s var(--spring); }
  #services-home .service-row:hover .link-tap::after { transform: translateX(4px); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #services-home .service-row { transition: transform 0.5s var(--spring), box-shadow 0.35s var(--ease-out); }
  #services-home .service-row:hover { transform: translateY(-3px); box-shadow: var(--sh-float), var(--tile-edge); }
}
@keyframes andys-pop { from { transform: scale(0) rotate(-25deg); } }
@keyframes andys-rise { from { opacity: 0.001; transform: translateY(8px); } }
@keyframes andys-sheet { from { opacity: 0.001; transform: translateY(-6px) scale(0.97); } }
@media (prefers-reduced-motion: reduce) {
  .btn, .bottom-bar a, .picker-chip, .pick span, .faq-item summary::before, .site-header .mobile-nav, .picker-card, .chip-badge { transition: none; animation: none; }
}
@media (forced-colors: active) {
  .chip-badge { forced-color-adjust: none; background: Highlight; }
  .header-inner, .bottom-bar, .picker, .trust-panel, .faq-list, .quote-form, .diagnosis-card, .reviews-list .review, .site-header .mobile-nav { border: 1px solid CanvasText; }
  .picker-chip[aria-checked="true"], .picker-chip.is-on { outline: 3px solid Highlight; }
}

/* ====================================================================================================================
   Dark mode (follows the device setting; tokens do most of it). The states a token swap alone would break.
   ==================================================================================================================== */
@media (prefers-color-scheme: dark) {
  :root { --app-nav-active: var(--app-fill); }
  /* Highlight bars become a yellow underline below the glyphs, so fog text never sits on yellow. */
  .review strong,
  .review-single strong,
  .picker-rows .mark dt,
  .diagnosis-rows li.mark .diagnosis-label {
    background: none;
    text-decoration: underline 0.14em var(--color-accent-line);
    text-underline-offset: 0.2em;
    text-decoration-skip-ink: auto;
  }
  /* The ring on yellow buttons stays dark (a light ring would vanish against the yellow edge). */
  .btn-primary:focus-visible,
  .header-call-icon:focus-visible { outline-color: var(--color-dominant); }
  .bottom-bar a:first-child:focus-visible { outline-color: var(--color-on-accent); outline-offset: -5px; } /* ink ring inside the yellow half (#14233A on #FFC93C, 10.3:1) */
  .closing-panel .btn-primary:focus-visible,
  .pricing-cta .btn-primary:focus-visible { outline-color: var(--app-focus-on-deep); }
  /* Chosen best time: tile face, light-blue label and edge */
  .pick:has(input:checked),
  .pick:has(input:checked):hover { background: var(--app-tile); color: var(--color-link); }
  /* Note and closing panels keep their gradients, plus the inset edge */
  .owner-note,
  .closing-panel,
  .pricing-cta .container,
  .reach-call { box-shadow: var(--sh-2), inset 0 0 0 1px rgba(191, 217, 242, 0.12); }
  .chip-badge { box-shadow: 0 0 0 2px var(--app-tile); }
}

/* ====================================================================================================================
   SECTION RHYTHM: page background, section surfaces and spacing. Kept in one block so the alternating-background
   round changes only this. The area behind the floating nav is the page background.
   ==================================================================================================================== */
html { background: var(--app-page); }
body { background: transparent; }
/* Every section after the page head is a full-width band ("room") with rounded top corners that overlaps the band
   before it. Bands rotate fog / pale blue / white / pale yellow (band order per page below); cards flip to fog on
   white bands. The deep-blue panels (note, closing, Contact call tile) stay the only dark surfaces. */
main > section:not(.hero):not(.page-head) {
  position: relative;
  margin-top: calc(-1 * var(--room-r));
  padding: var(--room-pad) 0 var(--room-pad-b);
  border-radius: var(--room-r) var(--room-r) 0 0;
  background: var(--room-bg, var(--band-fog));
  box-shadow: var(--room-edge);
}
main > section:not(.hero):not(.page-head):last-child { padding-bottom: 40px; }
main > .hero { padding: 40px 0 calc(40px + var(--room-r)); }
main > .hero,
main > .page-head { background: transparent; }
main > .page-head { padding: 40px 0 calc(32px + var(--room-r)); }
@media (min-width: 1024px) {
  main > .hero { padding: 64px 0 calc(72px + var(--room-r)); }
  main > .page-head { padding: 64px 0 calc(48px + var(--room-r)); }
}
/* Band order. Home: services sky, note white, photos fog, reviews sun, FAQ white, estimate sky, closing fog.
   About: story white, steps sky, review sun, closing fog. Services: the six services sky / white alternating, "What it
   costs" fog. Project photos: Recent work sky, closing fog. Contact: estimate sky, area + hours white, FAQ sun,
   closing fog. The gas warning box only ever sits on sky. */
#services-home,
#quote,
main > section:has(> .container > .steps-list),
main > section:has(> .container > .gallery-grid),
main > section:not(#services-home):has(> .container > .service-row:not(.flip)) { --room-bg: var(--band-sky); --disc-bg: var(--app-tile); --disc-shadow: var(--sh-1), var(--tile-edge); --quiet-bg: var(--quiet-on-sky); --quiet-shadow: var(--sh-1); }
.note-section,
main:has(> .hero) > #faq,
main > section:has(> .container.story-split),
main > section:has(> .container.area-hours),
main > section:not(#services-home):has(> .container > .service-row.flip) { --room-bg: var(--band-white); --tile-bg: var(--flip-card); --small-fill: var(--flip-fill); --tile-shadow: inset 0 0 0 1px var(--flip-edge); --disc-bg: var(--disc-on-white); }
#reviews,
main > section:has(> .container > .review-single),
main:not(:has(> .hero)) > #faq { --room-bg: var(--band-sun); }
#projects,
.closing-band,
.pricing-cta { --room-bg: var(--band-fog); }
/* Cards take the band's card surface (white, or fog on a white band) */
.picker,
.trust-panel,
#services-home .service-row,
.reviews-list .review,
.faq-list,
#quote .quote-form,
.credentials-panel,
.steps-list,
.review-single,
.diagnosis-card,
.band-light .diagnosis-card,
.reach-mail,
.area-hours-panel { background: var(--tile-bg, var(--app-tile)); box-shadow: var(--tile-shadow, var(--sh-2)), var(--tile-edge); }
main:has(> .hero) > #faq .faq-item summary:hover { background: var(--app-fill); }
/* Quiet buttons straight on a band (light: fill, white on sky; dark: #1A3658 on every band) */
main > .hero .hero-actions .btn-secondary,
.faq-head .faq-call,
section:not(.pricing-cta) > .container > .closing-actions .btn-secondary { background: var(--quiet-bg, var(--app-quiet)); box-shadow: var(--quiet-shadow, none); }
main > .hero .hero-actions .btn-secondary:hover,
.faq-head .faq-call:hover,
section:not(.pricing-cta) > .container > .closing-actions .btn-secondary:hover { background: var(--app-quiet-hover); }
@media (prefers-color-scheme: dark) {
  main > .hero .hero-actions .btn-secondary,
  .faq-head .faq-call,
  section:not(.pricing-cta) > .container > .closing-actions .btn-secondary { box-shadow: none; }
}
/* Inside a card flipped onto a white band, the small fills turn white (light) / one step darker (dark) so they keep an
   edge; row 4's number stays yellow. */
.diagnosis-meta li { background: var(--small-fill, var(--app-fill)); }
.diagnosis-rows li:not(.mark) .diagnosis-num { background: var(--small-fill, var(--app-fill)); } /* dark: #7DB3F0 on #122A49 6.59:1 (was #234671, 4.38:1) */
.faq-item summary::after { background: var(--small-fill, var(--app-fill)); }
.faq-item[open] summary::after { background: var(--small-fill, var(--color-pick)); }
.credentials-heading::before,
.area-hours-panel::before { background: var(--small-fill, var(--color-pick)); }

/* Services: one service per band, no hairline */
main > section:not(#services-home):has(> .container > .service-row) > .container { background: none; }
@media (forced-colors: active) { main > section:not(.hero):not(.page-head) { border-top: 1px solid CanvasText; } }