/* ============================================================================
   DESIGN TOKENS — the complete :root from index.html.
   Every page must have these. chrome.css and gallery.css were written
   against them and NINETEEN were undefined outside the homepage, which is
   why the shared header did not match: --r-pill left the gallery tag square,
   --z-nav left the header with no stacking order so images scrolled OVER it,
   and the radius/shadow tokens fell back to nothing. A var() that resolves to
   nothing does not error — it just renders wrong, quietly.
   ============================================================================ */
:root {
  /* Brand palette */
  --brand-blue:        #0b7db3;
  --brand-blue-600:    #0968a0;
  --brand-blue-700:    #07527f;
  --brand-blue-ink:    #053b5d;
  --brand-teal:        #52cbbe;
  --brand-teal-600:    #3bb4a6;
  --brand-dark:        #3a5b7d;
  --brand-dark-900:    #1f3550;
  --brand-gold:        #f3b21d;
  --brand-gold-600:    #d69a0d;
  --brand-gold-ink:    #3a2900;
  --brand-green:       #52b662;
  --brand-green-600:   #3d9c4c;
  --brand-red:         #c1272d;

  /* Neutrals */
  --ink:               #0a1424;
  --ink-soft:          #334054;
  --ink-muted:         #6b7890;
  --ink-faint:         #9aa4b8;
  --surface:           #ffffff;
  --surface-raised:    #ffffff;
  --surface-sunken:    #f4f6fb;
  --surface-tinted:    #eef4fa;
  --hairline:          rgba(10, 20, 36, 0.08);
  --hairline-strong:   rgba(10, 20, 36, 0.14);

  /* Shadows */
  --shadow-sm:  0 2px 8px rgba(10, 20, 36, 0.06), 0 1px 2px rgba(10, 20, 36, 0.04);
  --shadow-md:  0 8px 24px rgba(10, 20, 36, 0.08), 0 2px 6px rgba(10, 20, 36, 0.05);
  --shadow-lg:  0 24px 48px rgba(10, 20, 36, 0.12), 0 6px 12px rgba(10, 20, 36, 0.06);
  --shadow-xl:  0 40px 80px rgba(10, 20, 36, 0.18), 0 10px 24px rgba(10, 20, 36, 0.08);
  --shadow-brand: 0 20px 40px rgba(11, 125, 179, 0.28);

  /* Radii */
  --r-sm:  8px;
  --r-md:  14px;
  --r-btn: 15px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* Motion */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-swift:  cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container: 1200px;
  --container-wide: 1320px;
  --gutter: clamp(18px, 4vw, 48px);

  /* Z-index scale */
  --z-base: 1;
  --z-nav: 100;
  --z-dropdown: 200;
  --z-modal: 300;

  /* Type scale */
  --fs-xs:   clamp(12px, 0.8vw + 10px, 13px);
  --fs-sm:   clamp(13px, 0.8vw + 11px, 15px);
  --fs-base: clamp(16px, 0.5vw + 14px, 17px);
  --fs-lg:   clamp(17px, 0.7vw + 15px, 19px);
  --fs-xl:   clamp(19px, 1vw + 16px, 22px);
  --fs-2xl:  clamp(23px, 1.6vw + 18px, 28px);
  --fs-3xl:  clamp(28px, 2.2vw + 20px, 38px);
  --fs-4xl:  clamp(32px, 3.2vw + 20px, 52px);
  --fs-5xl:  clamp(38px, 4.5vw + 20px, 64px);
  --fs-hero: clamp(40px, 5.5vw + 20px, 84px);
}



/* ----------------------------------------------------------------------------
   SCOPED RESET — the chrome carries the reset it was written against.

   index.html has global rules the header and footer silently depend on:
   `a { text-decoration: none }`, `* { margin: 0; padding: 0 }`,
   `ul { list-style: none }`, the heading defaults and the button reset. None of
   those selectors start with .nav or .footer, so the prefix extraction left
   them behind — and on the carried pages the chrome fell back to browser
   defaults: footer links UNDERLINED, the Services / Service Area / Company
   columns INDENTED with bullets, chevrons drawn differently.

   EVERY SELECTOR HERE IS WRAPPED IN :where(), and that is the whole point.
   Scoping with a plain `.header-stack button` raises the specificity to (0,1,1)
   — HIGHER than .btn-quote-stack at (0,1,0) — so the reset beat the component
   rules and stripped the green off Get My Quote and Claim Yours no matter what
   order the file was in. :where() contributes ZERO specificity, so these behave
   exactly like the bare `button {}` and `* {}` they replace: they set the
   baseline and lose to anything that names a class.
   ---------------------------------------------------------------------------- */
:where(.header-stack, footer, .promo-bar),
:where(.header-stack, footer, .promo-bar) *,
:where(.header-stack, footer, .promo-bar) *::before,
:where(.header-stack, footer, .promo-bar) *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:where(.header-stack, footer, .promo-bar) a { color: inherit; text-decoration: none; }
:where(.header-stack, footer, .promo-bar) :is(ul, ol) { list-style: none; }
:where(.header-stack, footer, .promo-bar) :is(img, svg) { display: block; max-width: 100%; height: auto; }
:where(.header-stack, footer, .promo-bar) :is(h1, h2, h3, h4, .footer-col-title) {
  font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink);
}
:where(.header-stack, footer) p { color: var(--ink-soft); }
:where(.header-stack, footer, .promo-bar) button {
  font: inherit; border: none; cursor: pointer; background: none; color: inherit;
}

/* ----------------------------------------------------------------------------
   THE THREE RULES THE HEADER DEPENDS ON THAT DO NOT CARRY ITS NAME.
   Extracting by selector prefix missed them, and the symptom was subtle: the
   header rendered correctly but page content slid underneath it, because the
   nav is position:fixed and nothing offset the body. chrome.js measures the
   real header height into --nav-h; the 89px fallback is what it measures to.
   ---------------------------------------------------------------------------- */
:root { --container: 1200px; --gutter: clamp(18px, 4vw, 48px); }
body { padding-top: var(--nav-h, 89px); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ============================================================================
   SITE CHROME — the header and footer, and nothing else.
   Extracted verbatim from index.html so every page can share ONE definition.
   Ryan, 2026-08-25: "Make the navigation header and the footer the exact same
   on every page. I want them all to always sync and match the home page's."
   scripts/sync_chrome.py injects the matching markup and a gate proves every
   page carries byte-identical chrome.
   ============================================================================ */


.skip-link {
  position: absolute; top: -48px; left: 16px; z-index: 999;
  background: var(--brand-blue); color: white; padding: 10px 16px; border-radius: var(--r-md);
}

.skip-link:focus { top: 16px; }


/* ============================================================================
   BUTTONS — multi-variant for CTA variety
   ============================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: var(--r-btn); font-weight: 600; font-size: 15px;
  letter-spacing: -0.01em; transition: all 0.22s var(--ease-swift);
  white-space: nowrap; cursor: pointer; position: relative; line-height: 1;
}

.btn svg { width: 18px; height: 18px; transition: transform 0.22s var(--ease-swift); }

.btn:hover svg:last-child { transform: translateX(3px); }


.btn-primary {
  background: var(--brand-blue); color: white;
  box-shadow: var(--shadow-brand), inset 0 1px 0 rgba(255,255,255,0.18);
}

.btn-primary:hover { background: var(--brand-blue-600); transform: translateY(-1px); box-shadow: 0 24px 48px rgba(11,125,179,0.38), inset 0 1px 0 rgba(255,255,255,0.2); }

.btn-primary:active { transform: translateY(0); }


.btn-gold {
  background: var(--brand-green); color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.55);
  box-shadow: 0 20px 40px rgba(82,182,98,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
}

.btn-gold:hover { background: var(--brand-green-600); transform: translateY(-1px); }


.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline-strong); }

.btn-ghost:hover { background: var(--ink); color: white; box-shadow: inset 0 0 0 1.5px var(--ink); }


.btn-phone {
  background: rgba(255,255,255,0.96); color: var(--brand-blue-ink);
  box-shadow: 0 8px 24px rgba(10,20,36,0.15), inset 0 0 0 1px rgba(255,255,255,0.6);
}

.btn-phone:hover { background: white; transform: translateY(-1px); }


.btn-lg { padding: 18px 32px; font-size: 16px; }

.btn-sm { padding: 10px 18px; font-size: 13px; }


/* Pulsing quote CTA — attention draw */
.btn-pulse {
  position: relative;
  animation: btnPulse 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}


/* Mobile phone button — visible pill matching Request A Quote height */
.btn-phone-mobile {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; min-width: 42px; padding: 0 8px;
  border-radius: var(--r-btn);
  background: var(--surface-tinted);
  color: var(--brand-blue-ink);
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-phone-mobile:hover { background: var(--brand-blue); color: white; }

.btn-phone-mobile svg { width: 22px; height: 22px; }


/* Mobile nav CTA group — consistent gap between phone btn and Request A Quote */
.nav-cta-mobile { gap: 6px; }


/* ============================================================================
   HEADER STICKY WRAP — fixed positioning for rock-solid mobile rendering
   When promo hides on scroll, the whole stack translates up by promo height.
   Body gets padding-top equal to stack height (set by JS) so content starts
   below the header.
   ============================================================================ */
.header-stack {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  transition: transform 0.32s var(--ease-swift);
}


/* ============================================================================
   PROMO BAR — the gold credit card, v3 (Ryan, 2026-08-29). Desktop: countdown
   stacked ABOVE "Ends {holiday}" and enlarged. Mobile: ONE row — the credit
   headline with "Ends {holiday}" as its subtext, beside a "Claim Yours"
   button; the countdown and the dismiss × are gone entirely (no close button
   in the partial — chrome.js null-guards it). The deadline rolls through
   chrome.js HOLIDAYS.
   ============================================================================ */
.promo-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 450;
  padding: 0 12px 14px;
  background: transparent;
  pointer-events: none;
  transform: translateY(130%);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
}

.promo-bar.is-visible { transform: translateY(0); }
.promo-bar.near-footer { transform: translateY(130%); }
.promo-bar.is-dismissed { transform: translateY(130%); }

body:has(.quote-modal.is-open) .promo-bar,
body:has(.apply-modal.is-open) .promo-bar { transform: translateY(130%); }

.promo-bar-inner {
  pointer-events: auto;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; column-gap: 68px; row-gap: 8px;
  max-width: 940px; margin-inline: auto;
  padding: 13px 30px;
  background:
    radial-gradient(ellipse 55% 90% at 10% 12%, rgba(255,255,255,0.32), transparent 55%),
    radial-gradient(ellipse 50% 70% at 92% 92%, rgba(196,110,10,0.28), transparent 55%),
    linear-gradient(135deg, #f6bd35 0%, #eda40e 100%);
  border: 1px solid rgba(122,77,4,0.28);
  border-radius: 18px;
  box-shadow: 0 12px 34px -8px rgba(122,77,4,0.45);
  color: #0a1a2e;
}

.promo-headline {
  display: flex; flex-direction: column; gap: 2px;
}

.promo-headline strong {
  font-size: 18px; font-weight: 800; letter-spacing: -0.01em;
  color: #0a1a2e;
  line-height: 1.15;
}

.promo-headline-sub {
  font-size: 12.5px; font-weight: 700;
  color: rgba(10,26,46,0.6);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Desktop: countdown on top, "Ends X" beneath it */
.promo-deadline {
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  font-weight: 600;
}

.promo-countdown {
  font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 800;
  color: #0a1a2e;
  letter-spacing: 0.03em;
  line-height: 1.15;
}

.promo-countdown .unit {
  font-size: 12px; font-weight: 700;
  color: rgba(10,26,46,0.5);
  margin: 0 7px 0 1px;
}

.promo-ends { color: rgba(10,26,46,0.62); font-weight: 700; font-size: 12.5px; line-height: 1.2; }
.promo-ends strong { color: #0a1a2e; font-weight: 800; }

.promo-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(180deg, #14406a 0%, #0a1a2e 100%);
  color: white;
  font-size: 14.5px; font-weight: 700; letter-spacing: 0;
  padding: 10px 19px;
  border-radius: 999px;
  box-shadow: 0 5px 16px -5px rgba(10,26,46,0.55), inset 0 1px 0 rgba(255,255,255,0.14);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s var(--ease-swift, ease), box-shadow 0.18s;
  white-space: nowrap;
}

.promo-cta::after { content: "→"; font-weight: 700; }

.promo-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -5px rgba(10,26,46,0.65), inset 0 1px 0 rgba(255,255,255,0.14);
  color: white;
}

/* Long CTA text on desktop, "Claim Yours" on mobile */
.promo-cta-short { display: none; }

@media (max-width: 640px){
  .promo-bar { padding: 0 8px 10px; }

  /* ONE row: [ $1,000 Install Credit / Ends X ..... Claim Yours ] */
  .promo-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px; row-gap: 0;
    padding: 10px 14px 11px 18px;
    border-radius: 16px;
    justify-content: initial;
  }

  .promo-headline { grid-column: 1; }
  .promo-headline strong { font-size: 17.5px; }
  .promo-headline-sub { display: none; }

  .promo-deadline { display: contents; }
  .promo-countdown { display: none; }
  .promo-ends {
    grid-column: 1; grid-row: 2;
    font-size: 12.5px; margin-top: 1px;
  }

  .promo-cta {
    grid-column: 2; grid-row: 1 / span 2;
    font-size: 14px; padding: 10px 16px;
    justify-self: end;
  }
  .promo-cta-full { display: none; }
  .promo-cta-short { display: inline; }
}


/* ============================================================================
   NAV — stacked CTAs on desktop, compact on mobile
   ============================================================================ */
.nav-shell {
  position: relative;
  background: rgba(255,255,255,0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; gap: 14px;
}

.nav-logo {
  display: flex; align-items: center; flex-shrink: 0;
}

.nav-logo img.logo-mark {
  height: 64px; width: auto; display: block;
  transition: transform 0.2s;
}

.nav-logo:hover img.logo-mark { transform: scale(1.03); }
@media (max-width: 520px){

  .nav { gap: 8px; padding: 10px 6px 10px 10px; }

  .nav-logo img.logo-mark { height: 46px; }
}
@media (max-width: 380px){

  .nav-logo img.logo-mark { height: 40px; }
}


/* Nav menu — right-aligned, pushed to right of logo */
.nav-menu {
  display: none; gap: 4px; align-items: center;
  margin-left: auto; margin-right: 28px;
}

.nav-menu > a, .nav-menu .nav-dd-trigger {
  padding: 10px 14px; border-radius: var(--r-pill);
  font-size: 20px; font-weight: 600;
  color: var(--ink); transition: all 0.2s; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  letter-spacing: -0.015em;
}

.nav-menu > a:hover, .nav-menu .nav-dd-trigger:hover {
  background: var(--surface-sunken); color: var(--brand-blue);
}

.nav-dd-trigger::after {
  content: ""; width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; transition: transform 0.2s;
}

.nav-dd-trigger.is-open::after { transform: rotate(-135deg); margin-top: 2px; }


.nav-dd-wrap { position: relative; }

.nav-dropdown {
  position: absolute; top: calc(100% + 10px); left: 0;
  background: white; border: 1px solid var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg); min-width: 260px; padding: 8px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.18s var(--ease-swift), transform 0.18s var(--ease-swift);
  z-index: var(--z-dropdown);
}

.nav-dd-wrap.is-open .nav-dropdown {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}

.nav-dropdown a {
  display: block; padding: 10px 12px; border-radius: var(--r-md);
  font-weight: 500; color: var(--ink-soft); font-size: 14px;
}

.nav-dropdown a:hover { background: var(--surface-sunken); color: var(--brand-blue); }


/* Nav right — stacked CTAs on desktop */
.nav-cta-col {
  display: flex; align-items: stretch; gap: 10px;
  flex-shrink: 0;
}

/* Desktop: phone link (inline, not pill) + Request A Quote button */
.nav-cta-desktop {
  display: none; flex-direction: row; align-items: center; gap: 16px;
}

.nav-phone-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--brand-blue-ink); transition: color 0.2s;
}

.nav-phone-link:hover { color: var(--brand-blue); }

.nav-phone-link:hover .phone-icon { color: var(--brand-blue); transform: scale(1.06); }

.nav-phone-link .phone-icon {
  width: 32px; height: 32px; color: var(--brand-blue);
  flex-shrink: 0;
  transition: all 0.2s;
}


/* Request A Quote button — two-line, tight */
.btn-quote-stack {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 0; line-height: 1;
  padding: 10px 22px;
  border-radius: var(--r-btn);
  background: var(--brand-green); color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.55);
  transition: all 0.22s var(--ease-swift);
  box-shadow: 0 8px 20px rgba(82,182,98,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
  cursor: pointer;
  border: none; font: inherit;
  transform-origin: center;
}

.btn-quote-stack:hover { animation-play-state: paused; background: var(--brand-green-600); }

/* Wobble runs ALWAYS, on every page, desktop and mobile (Ryan, 2026-08-29 —
   the old past-hero gate meant most visitors never saw it). Hover pauses it;
   reduced-motion users don't get it, because their OS asked us not to. */
.btn-quote-stack,
.nav-cta-mobile .btn.btn-gold.btn-sm {
  animation: quoteBtnWobble 2s linear infinite;
}

/* Mobile Request Quote button gets the same wobble (when past hero) */
.nav-cta-mobile .btn.btn-gold.btn-sm {
  transform-origin: center;
}

.nav-cta-mobile .btn.btn-gold.btn-sm:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce){

  .btn-quote-stack,
  .nav-cta-mobile .btn.btn-gold.btn-sm { animation: none; }
}

.btn-quote-stack strong {
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1;
  color: white; white-space: nowrap;
}

.btn-quote-stack span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  line-height: 1;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  margin-top: 3px;
}


/* Mobile nav right */
.nav-cta-mobile {
  display: flex; align-items: center; gap: 8px;
}

.nav-toggle {
  display: flex; flex-direction: column; gap: 5px;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: transparent; align-items: center; justify-content: center;
  margin-right: 4px;
  transition: all 0.2s;
}

.nav-toggle:hover span { background: var(--brand-blue); }

.nav-toggle span { width: 24px; height: 3px; background: var(--ink); border-radius: 2px; transition: all 0.3s; }

.nav-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }

.nav-toggle.is-open span:nth-child(2) { opacity: 0; }

.nav-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (min-width: 1080px){

  .nav-menu { display: flex; }

  .nav-cta-desktop { display: flex; }

  .nav-cta-mobile .btn-phone-mobile,
  .nav-cta-mobile .nav-toggle,
  .nav-cta-mobile .btn-sm { display: none; }
}


/* Mobile menu drawer */
.mobile-menu {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10,20,36,0.5); backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  opacity: 0; transition: opacity 0.25s;
  overflow: hidden;
}

.mobile-menu.is-open { display: block; opacity: 1; }

.mobile-menu-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100vw; max-width: 100%;
  background: white;
  padding: 24px 24px 0; overflow-y: auto;
  transform: translateX(100%); transition: transform 0.32s var(--ease-swift);
  display: flex; flex-direction: column;
}

.mobile-menu-panel nav { margin-bottom: 160px; }

.mobile-menu-bottom {
  position: sticky; bottom: 0;
  margin: 0 -24px; padding: 16px 24px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, white 24%);
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--hairline);
}

.mobile-menu.is-open .mobile-menu-panel { transform: translateX(0); }

.mobile-menu-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }

.mobile-menu-head .nav-logo img.logo-mark { height: 48px; }

.mobile-menu-close {
  width: 40px; height: 40px; border-radius: 50%; background: var(--surface-sunken);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; color: var(--ink); font-weight: 300;
}

.mobile-menu nav { display: flex; flex-direction: column; gap: 4px; margin-bottom: 24px; }

.mobile-menu nav a, .mobile-menu nav details > summary {
  padding: 14px 16px; border-radius: var(--r-md); font-size: 16px; font-weight: 500;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; list-style: none;
}

.mobile-menu nav details > summary::-webkit-details-marker { display: none; }

.mobile-menu nav a:hover, .mobile-menu nav summary:hover { background: var(--surface-sunken); }

.mobile-menu nav details > summary::after {
  content: "+"; font-size: 20px; font-weight: 400; color: var(--ink-muted);
}

.mobile-menu nav details[open] > summary::after { content: "−"; }

.mobile-menu nav details[open] > summary { color: var(--brand-blue); }

.mobile-menu nav details > div { padding: 4px 16px 8px 28px; display: flex; flex-direction: column; }

.mobile-menu nav details > div a {
  padding: 10px 12px; font-size: 14.5px; color: var(--ink-soft); font-weight: 500;
}


.gallery-footer {
  text-align: center;
  margin-top: 36px;
}


.reviews-footer {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 36px; text-align: center;
}

.reviews-footer-note {
  font-size: 13.5px; color: var(--ink-muted);
}

.reviews-footer-note strong { color: var(--ink); }


/* ============================================================================
   FOOTER
   ============================================================================ */
footer { background: #0a1424; color: rgba(255,255,255,0.72); padding: clamp(56px, 6vw, 88px) 0 32px; font-size: 14px; }

.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; margin-bottom: 44px; }
@media (max-width: 720px){
 .footer-grid { grid-template-columns: 1fr 1fr; }
 .footer-brand-block { grid-column: 1 / -1; }
}


.footer-brand-block .nav-logo { margin-bottom: 16px; }

.footer-brand-block .nav-logo img.logo-mark { height: 88px; }
@media (max-width: 720px){

  .footer-brand-block .nav-logo { justify-content: center; }

  .footer-brand-block .nav-logo img.logo-mark { height: 96px; }
}

.footer-brand-block p { color: rgba(255,255,255,0.68); margin-bottom: 18px; max-width: 320px; line-height: 1.6; }

.footer-contact { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }

.footer-contact a { color: white; font-weight: 500; display: flex; align-items: center; gap: 10px; font-size: 14.5px; }

.footer-contact a:hover { color: var(--brand-teal); }

.footer-contact svg { width: 16px; height: 16px; color: var(--brand-teal); flex-shrink: 0; }


.footer-social { display: flex; gap: 10px; margin-top: 22px; }

.footer-social a {
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.8); transition: all 0.22s;
}

.footer-social a:hover { background: var(--brand-blue); color: white; transform: translateY(-2px); }

.footer-social svg { width: 18px; height: 18px; }


.footer-col .footer-col-title { color: white; font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: 0.02em; }

.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }

.footer-col a { color: rgba(255,255,255,0.68); transition: color 0.2s; font-size: 14px; }

.footer-col a:hover { color: var(--brand-teal); }


.footer-license {
  padding: 18px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.6);
  max-width: 880px;
}

.footer-license strong { color: rgba(255,255,255,0.85); font-weight: 600; }


.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08); padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  font-size: 12.5px; color: rgba(255,255,255,0.5);
}

.footer-bottom a { color: inherit; }

.footer-bottom a:hover { color: rgba(255,255,255,0.8); }

.footer-bottom-links { display: flex; gap: 20px; flex-wrap: wrap; }

.thank-you-cta-row .btn { flex: 1; min-width: 140px; }

/* Lift toasts just above the bottom promo when it's visible */
body:has(.promo-bar.is-visible:not(.near-footer):not(.is-dismissed)) .toast-container {
  bottom: calc(var(--promo-h, 64px) + 8px);
}


/* .phone-stack — missed by the prefix-based extraction because its name
   does not begin with .nav or .footer. Without it the phone block in the CTA
   column was 116px too wide, which squeezed the menu until "Service Area"
   wrapped onto two lines. The gate below now catches this class of miss. */
.phone-stack {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1; gap: 0;
}
.phone-stack strong {
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  line-height: 1;
  color: inherit; white-space: nowrap;
}
.phone-stack span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase; color: var(--ink-muted);
  white-space: nowrap;
  transition: color 0.2s;
  margin-top: 3px;
  /* Compensate for letter-spacing trailing space so text visually centers */
  padding-left: 0.1em;
}

/* A bare `button { background: none }` used to live here. Appearing AFTER
   .btn-quote-stack, it stripped the green off Get My Quote and the promo bar's
   Claim Yours. The scoped copy in the reset block above does the same job in
   the right place, before the chrome rules, so this one is gone. */
.nav-menu > a, .nav-menu .nav-dd-trigger { white-space: nowrap; }

/* The chrome must not inherit its metrics from whatever page hosts it.
   interior.css runs line-height 1.65 and index.html 1.6, which put the nav
   triggers 1px apart. Pinning it here makes the header pixel-identical
   everywhere instead of almost-identical. */
.nav-menu > a, .nav-menu .nav-dd-trigger { line-height: 1.6; }

/* The chrome carries its OWN font stack. interior.css lists "Segoe UI", Inter,
   Roboto where index.html lists "SF Pro Display", "SF Pro Text" — different
   fallbacks resolve to different metrics, which left the nav 4px wider and the
   footer 3px taller on carried pages. Same reasoning as pinning line-height:
   shared chrome should not change shape depending on who hosts it. */
.header-stack, .header-stack *, footer, footer *, .promo-bar, .promo-bar * {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* index.html also enables these stylistic sets on <body>. They change the
     letterforms, so without them the same string measures a few px narrower —
     which is why the nav was 4px off even after the font stack matched. */
  font-feature-settings: "kern", "liga", "ss01", "ss02";
  text-rendering: optimizeLegibility;
}
/* index.html's <body> runs line-height 1.6 and interior.css runs 1.65. The
   footer links inherited whichever page they landed on — 22.4px against 23.1px
   — and every footer height difference cascaded from that one number. Pinned on
   the containers so it inherits down; the rules that set their own still win. */
.header-stack, footer, .promo-bar { line-height: 1.6; }


/* ============================================================================
   QUOTE MODAL — captures name, mobile, email, address, service
   Uses backdrop scrolling so both form + thank-you states scroll naturally.
   ============================================================================ */
.quote-modal {
  display: none;
  position: fixed; inset: 0;
  z-index: 400;
  background: rgba(10,20,36,0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity 0.25s var(--ease-swift);
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.quote-modal.is-open { display: flex; opacity: 1; align-items: flex-start; justify-content: center; }

.quote-modal-panel {
  background: white;
  border-radius: var(--r-2xl);
  max-width: 470px; width: 100%;
  margin: auto;   /* centers vertically in the flex overlay; collapses to 0 when taller than the viewport so the top stays reachable */
  padding: 0;
  box-shadow: var(--shadow-xl);
  transform: scale(0.92) translateY(20px);
  transition: transform 0.32s var(--ease-spring);
  overflow: hidden; position: relative;
  /* Allow flex item to shrink below content size so scroll container scrolls */
  flex-shrink: 0;
}

.quote-modal.is-open .quote-modal-panel { transform: scale(1) translateY(0); }


.quote-modal-head {
  padding: 28px 32px 20px;
  background: radial-gradient(ellipse 80% 140% at 100% 0%, rgba(82,203,190,0.25), transparent 60%),
              linear-gradient(135deg, #0b7db3 0%, #053b5d 100%);
  color: white; position: relative;
}

.quote-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.15); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1; font-weight: 300;
  transition: all 0.2s;
  backdrop-filter: blur(10px);
  cursor: pointer;
  z-index: 2;
}

.quote-modal-close:hover { background: rgba(255,255,255,0.28); transform: rotate(90deg); }

.quote-modal-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--brand-teal);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: rgba(82, 203, 190, 0.16); border: 1px solid rgba(82, 203, 190, 0.3);
  margin-bottom: 12px;
}

.quote-modal-eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--brand-teal);
  box-shadow: 0 0 0 0 rgba(82,203,190, 0.6);
  animation: heroPulse 2s infinite;
}

.quote-modal-head h2 {
  color: white; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15;
  margin-bottom: 8px; font-weight: 700;
}

.quote-modal-head p {
  color: rgba(255,255,255,0.82); font-size: 14.5px; line-height: 1.5;
}


.quote-modal-body {
  padding: 24px 32px 28px;
}


.quote-form {
  display: flex; flex-direction: column; gap: 14px;
}

.form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 460px){
 .form-row { grid-template-columns: 1fr; gap: 14px; }
}


.form-field {
  display: flex; flex-direction: column; gap: 6px;
}

.form-field label {
  font-size: 12px; font-weight: 600; color: var(--ink);
  letter-spacing: 0.02em;
}

.form-field label .req { color: var(--brand-red); margin-left: 2px; }

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--hairline-strong); border-radius: var(--r-md);
  font: inherit; font-size: 15px; color: var(--ink);
  background: white;
  transition: all 0.2s;
  -webkit-appearance: none; appearance: none;
}

.form-field textarea { resize: vertical; min-height: 80px; }

.form-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7890' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 18px; padding-right: 42px;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(11, 125, 179, 0.15);
}

.form-field input::placeholder, .form-field textarea::placeholder {
  color: var(--ink-faint);
}

.form-error { font-size: 12.5px; color: var(--brand-red); margin-top: 2px; display: none; }

.form-field.has-error input,
.form-field.has-error select {
  border-color: var(--brand-red);
}

.form-field.has-error .form-error { display: block; }


/* Address autocomplete — custom dropdown */
.autocomplete-wrap { position: relative; }

.autocomplete-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: white;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  list-style: none; margin: 0; padding: 4px;
  max-height: 220px; overflow-y: auto;
  z-index: 10;
}

.autocomplete-list li {
  padding: 10px 12px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  transition: background 0.12s;
}

.autocomplete-list li:hover,
.autocomplete-list li.is-highlighted {
  background: var(--surface-tinted);
  color: var(--brand-blue-ink);
}

.autocomplete-list li svg {
  width: 14px; height: 14px; color: var(--ink-muted); flex-shrink: 0;
}

.autocomplete-list li .auto-street {
  font-weight: 600;
}

.autocomplete-list li .auto-city {
  color: var(--ink-muted);
  font-weight: 500;
}


/* Custom service select — styled dropdown that matches the form design */
.custom-select-wrap { position: relative; }

.custom-select-trigger {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--hairline-strong); border-radius: var(--r-md);
  font: inherit; font-size: 15px; color: var(--ink);
  background: white;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: left;
}

.custom-select-trigger:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(11, 125, 179, 0.15);
}

.custom-select-trigger[aria-expanded="true"] {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(11, 125, 179, 0.15);
}

.custom-select-value[data-placeholder="true"] {
  color: var(--ink-faint);
}

.custom-select-chevron {
  width: 18px; height: 18px; color: var(--ink-muted);
  transition: transform 0.22s var(--ease-swift);
  flex-shrink: 0;
}

.custom-select-trigger[aria-expanded="true"] .custom-select-chevron {
  transform: rotate(180deg);
}

.custom-select-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: white;
  border: 1px solid var(--hairline-strong); border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  list-style: none; margin: 0; padding: 4px;
  max-height: 280px; overflow-y: auto;
  z-index: 10;
}

.custom-select-list li {
  padding: 12px 14px; border-radius: var(--r-sm);
  font-size: 14.5px; color: var(--ink);
  cursor: pointer;
  transition: background 0.12s;
  font-weight: 500;
}

.custom-select-list li:hover,
.custom-select-list li.is-highlighted {
  background: var(--surface-tinted);
  color: var(--brand-blue-ink);
}

.custom-select-list li.is-selected {
  background: var(--surface-tinted);
  color: var(--brand-blue);
  font-weight: 600;
}

.form-field.has-error .custom-select-trigger {
  border-color: var(--brand-red);
}


.form-submit {
  margin-top: 8px;
  background: var(--brand-green); color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.55);
  padding: 16px 24px; border-radius: var(--r-btn);
  font-weight: 700; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: all 0.22s var(--ease-swift);
  box-shadow: 0 8px 20px rgba(82,182,98,0.32), inset 0 1px 0 rgba(255,255,255,0.2);
  letter-spacing: -0.01em;
}

.form-submit:hover { background: var(--brand-green-600); transform: translateY(-1px); }

.form-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-submit svg { width: 18px; height: 18px; }


.form-legal {
  font-size: 12px; color: var(--ink-muted); line-height: 1.5; margin-top: 8px;
  text-align: center;
}

.form-trust {
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline);
}

.form-trust-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ink-muted); font-weight: 500;
}

.form-trust-item svg { width: 14px; height: 14px; color: var(--brand-green); }


/* Thank you state — replaces the form on submit */
.thank-you-state { display: none; text-align: center; padding: 32px 32px 28px; }

.thank-you-state.is-visible { display: block; animation: fadeInUp 0.5s var(--ease-swift); }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.thank-you-check {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-green), var(--brand-green-600));
  color: white; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 12px 32px rgba(82,182,98,0.35);
}

.thank-you-check svg { width: 36px; height: 36px; }

.thank-you-state h2 {
  font-size: clamp(20px, 4vw + 4px, 28px);
  letter-spacing: -0.025em; line-height: 1.15;
  margin-bottom: 10px; color: var(--ink);
  white-space: nowrap;
}
@media (max-width: 420px){

  .thank-you-state { padding: 28px 20px 28px; }

  .thank-you-state h2 {
    font-size: clamp(18px, 5.2vw, 22px);
  }
}

.thank-you-state > p.lede {
  font-size: 16px; color: var(--ink-soft); line-height: 1.55;
  margin-bottom: 24px; max-width: 440px; margin-inline: auto;
}


/* Video placeholder */
.thank-you-video {
  position: relative; aspect-ratio: 16/9;
  background: radial-gradient(ellipse 70% 90% at 50% 30%, #1a3055, #0a1424);
  border-radius: var(--r-xl); overflow: hidden;
  margin-bottom: 24px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--hairline);
  cursor: pointer; transition: transform 0.22s;
}

.thank-you-video:hover { transform: translateY(-2px); }

.thank-you-video::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(1px 1px at 30% 25%, rgba(82,203,190,0.6), transparent),
    radial-gradient(1px 1px at 70% 65%, rgba(243,178,29,0.5), transparent),
    radial-gradient(1px 1px at 20% 75%, rgba(11,125,179,0.6), transparent),
    radial-gradient(1px 1px at 85% 20%, rgba(255,255,255,0.4), transparent);
  background-size: 200px 200px; opacity: 0.8;
}

.thank-you-video-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(12px);
  border: 1.5px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  color: white;
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
  transition: all 0.25s var(--ease-spring);
}

.thank-you-video:hover .thank-you-video-play { transform: translate(-50%, -50%) scale(1.08); background: rgba(255,255,255,0.2); }

.thank-you-video-play svg { width: 28px; height: 28px; margin-left: 3px; }

.thank-you-video-label {
  position: absolute; bottom: 16px; left: 20px; right: 20px;
  color: white; font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  text-align: left;
  display: flex; align-items: center; gap: 8px;
}

.thank-you-video-label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-red);
  /* was: animation: pulseDot — never defined anywhere, so it never ran.
     DESIGN.md reserves continuous animation for the promo bar. */
  flex-shrink: 0;
}

.thank-you-video-placeholder {
  position: absolute; top: 14%; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.4); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
}


/* What to expect list */
.thank-you-expect {
  text-align: left;
  background: var(--surface-sunken);
  border-radius: var(--r-xl);
  padding: 22px 22px 18px;
  margin-bottom: 22px;
}

.thank-you-expect h3 {
  font-size: 14px; font-weight: 700; color: var(--ink);
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
}

.thank-you-expect h3 svg { width: 16px; height: 16px; color: var(--brand-blue); }

.thank-you-expect ol {
  list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 12px;
}

.thank-you-expect li {
  display: flex; gap: 14px; align-items: flex-start;
  counter-increment: step;
}

.thank-you-expect li::before {
  content: counter(step);
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: white; color: var(--brand-blue);
  font-weight: 700; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--brand-blue);
  margin-top: 1px;
}

.thank-you-expect li strong { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.thank-you-expect li span { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }


.thank-you-cta-row {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin-top: 8px;
}

.thank-you-signoff {
  font-size: 13px; color: var(--ink-muted); margin-top: 20px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}

/* Carried with the modal: the eyebrow dot's pulse was defined up in the hero
   CSS on index.html. A missing @keyframes does not error — the animation just
   never runs — which is how it would have died silently on 13 pages. */
@keyframes heroPulse {
  0%   { box-shadow: 0 0 0 0 rgba(82,203,190, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(82,203,190, 0); }
  100% { box-shadow: 0 0 0 0 rgba(82,203,190, 0); }
}


/* ============================================================================
   ADDRESS AUTOCOMPLETE dropdown (quote modal) — suggestions styled like the
   rest of the modal; see initAddressAutocomplete in quote.js.
   ============================================================================ */
.addr-suggest {
  display: none;
  position: absolute;
  top: calc(100% + 5px); left: 0; right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid rgba(10,26,46,0.14);
  border-radius: 12px;
  box-shadow: 0 14px 34px -10px rgba(10,26,46,0.35);
  padding: 6px;
  max-height: 230px;
  overflow-y: auto;
}

.addr-suggest-item {
  display: flex; align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.addr-suggest-item:hover,
.addr-suggest-item.is-active { background: rgba(11,125,179,0.08); }

.addr-suggest-main {
  font-size: 14px; font-weight: 700; color: #14243c;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.addr-suggest-sub {
  font-size: 12px; color: rgba(20,36,60,0.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* Plain text line — it briefly carried the hero's check circle in a flex row,
   and the leftover flex split the sentence into gapped fragments on mobile
   (Ryan, 2026-08-29). */
.quote-modal-sub { display: block; }

/* MOBILE MODAL FIT (Ryan, 2026-08-29): the × was overlapping the title, and
   the form ran past the fold. Tighter head/body/field rhythm on small screens
   so everything through the submit button sits inside one phone viewport;
   the title reserves room for the close button. */
@media (max-width: 640px){
  .quote-modal { padding: 12px; }
  .quote-modal-head { padding: 18px 52px 14px 20px; }
  .quote-modal-head h2 { font-size: 21px; }
  .quote-modal-sub { font-size: 13px; }
  .quote-modal-close { top: 12px; right: 12px; width: 32px; height: 32px; }
  .quote-modal-body { padding: 16px 18px 16px; }
  .quote-form { gap: 10px; }
  .form-field { gap: 4px; }
  .form-field input { padding: 11px 14px; }
  .form-consent { margin: 0 0 6px; font-size: 12.5px; }
  .form-submit { padding: 13px 20px; margin-top: 4px; }
  .form-trust { margin-top: 10px; }
}

/* ============================================================================
   CONSENT CHECKBOX + optional-field labels (quote modal, 2026-08-29)
   ============================================================================ */
.form-field .opt { font-weight: 500; color: rgba(20,36,60,0.5); font-size: 0.86em; }

.form-consent {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  font-size: 13px; line-height: 1.5;
  color: rgba(20,36,60,0.78);
  margin: 2px 0 12px;
}

.form-consent input[type="checkbox"] {
  /* the generic .form-field input rule styles this like a text box —
     reset everything and draw a real checkbox */
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin: 1px 0 0; padding: 0;
  border: 2px solid rgba(20,36,60,0.35);
  border-radius: 5px;
  background: #fff center / 13px no-repeat;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

.form-consent input[type="checkbox"]:checked {
  border-color: var(--brand-green, #52b662);
  background-color: var(--brand-green, #52b662);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

.form-consent input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--brand-blue, #0b7db3);
  outline-offset: 2px;
}

.form-consent a { color: var(--brand-blue, #0b7db3); text-decoration: underline; }

.form-field-consent.has-error .form-consent { color: #b3261e; }
.form-field-consent.has-error .form-consent input[type="checkbox"] { outline: 2px solid #b3261e; outline-offset: 1px; border-radius: 3px; }