/* KEEP IN SYNC: these tokens are duplicated in index.html's inline <style>.
     They are now identical; the one token that used to differ by path depth,
     --paint-tex, is gone. The navy sections use the pre-baked
     images/paint-texture-navy.jpg (see .ba-tex); the raw paint-texture.jpg is
     kept only as the source for tools/bake-paint-texture.sh. */
  :root {
    --font-display: 'Fraunces', 'Georgia', serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
    --fr-axes: 'opsz' 144, 'SOFT' 100, 'WONK' 0;
    --teal: #1CB8A7;
    --teal-dark: #149a8c;
    --coral: #F06F4D;
    --coral-deep: #d85735;
    --navy: #0B217A;
    --stone: #E4E6ED;
    --mist: #F1F4F8;
    --snow: #FBFAF8;
    --onyx: #0F0F0F;
    --ink-soft: #4a5578;
    --line: #d8dce6;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    font-family: var(--font-body);
    background: var(--snow);
    color: var(--navy);
    /* REQUIRED with the self-hosted Fraunces. The brand uses the opsz 144
       cut, pinned via --fr-axes in font-variation-settings. Optical sizing
       defaults to `auto`, which lets the browser drive the opsz axis from the
       font-size and quietly overrides that pin, dropping every headline to
       Fraunces' condensed low-opsz cut. It only misbehaves once the real
       variable font is loaded from our own origin, and only in Safari and iOS,
       so it passes a Chrome review and looks wrong on an iPhone. */
    font-optical-sizing: none;
    font-weight: 400;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    font-variation-settings: var(--fr-axes);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--navy);
  }
  em.tz {
    font-family: var(--font-display);
    font-variation-settings: var(--fr-axes);
    font-style: italic;
    color: var(--teal);
  }
  a { color: inherit; text-decoration: none; }
  img { display: block; }

  .wrap { max-width: 1180px; margin: 0 auto; padding: 0 36px; }
  .wrap-narrow { max-width: 880px; margin: 0 auto; padding: 0 36px; }

  /* ===== NAV ===== */
  nav {
    background: rgba(251,250,248,0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--stone);
    position: sticky; top: 0; z-index: 50;
  }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 82px; }
  .nav-logo img, .nav-logo svg { height: 38px; width: auto; display: block; }
  .nav-links { display: flex; gap: 32px; align-items: center; }
  .nav-links a { font-size: 15px; font-weight: 500; color: var(--navy); transition: color .15s; }
  .nav-links a:hover { color: var(--teal-dark); }
  .nav-links a.active { color: var(--teal-dark); font-weight: 600; }
  .nav-links a.btn, .nav-links a.btn:hover { color: #fff; }
  .nav-phone { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
  .nav-phone i { color: var(--teal); font-size: 19px; }

  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    background: var(--coral); color: #fff;
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    padding: 13px 26px; border-radius: 8px;
    border: none; cursor: pointer;
    transition: background .15s, transform .15s;
  }
  .btn:hover { background: var(--coral-deep); transform: translateY(-1px); }
  .btn-lg { padding: 16px 32px; font-size: 16px; }

  /* ===== SECTION HELPERS ===== */
  section { padding: 110px 0; position: relative; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 11px;
    font-size: 12px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--teal-dark); margin-bottom: 22px;
  }
  .eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--teal); }
  .section-head { max-width: 680px; margin-bottom: 56px; }
  .section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
  .section-head.center .eyebrow { justify-content: center; }
  .section-head h2 { font-size: clamp(32px, 4vw, 48px); }
  .section-head p { margin-top: 18px; font-size: 18px; color: var(--ink-soft); }

  /* ===== HERO PARTS shared by the service-page .hero-card and reviews.html =====
     The split-hero rules that used to live here (.hero, .hero-grid, .hero-copy,
     .hero-pov, .hero-actions, .hero-microcopy, .hero-photo) were dead: no page
     outside index.html has ever used them, and index.html has its own inline
     copies. What remains below IS live, so leave it alone:
       .hero-tag / .hero-photo-credit -> exterior, interior, cabinet .hero-card
       .hero-proof / .hero-proof-item -> reviews.html                          */
  .hero-tag {
    display: inline-flex; align-items: center; gap: 9px;
    align-self: flex-start;
    background: var(--mist); border: 1px solid var(--stone);
    border-radius: 999px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--navy);
    margin-bottom: 26px;
  }
  .hero-tag i { color: var(--teal-dark); font-size: 17px; }
  .hero-proof {
    margin-top: 46px; padding-top: 28px;
    border-top: 1px solid var(--stone);
    display: flex; gap: 20px; flex-wrap: wrap;
    justify-content: space-between;
  }
  .hero-proof-item .num {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: 27px; font-weight: 600; color: var(--navy); line-height: 1;
  }
  .hero-proof-item .num em { font-style: italic; font-variation-settings: var(--fr-axes); color: var(--teal); }
  .hero-proof-item .lbl { font-size: 12.5px; color: #6b7494; margin-top: 7px; letter-spacing: 0.03em; }
  .hero-photo-credit {
    position: absolute; z-index: 3; right: 18px; bottom: 16px;
    font-size: 11.5px; color: rgba(255,255,255,0.85);
    background: rgba(8,18,58,0.55); backdrop-filter: blur(4px);
    border-radius: 999px; padding: 6px 12px;
    display: flex; align-items: center; gap: 6px;
  }
  .hero-photo-credit i { color: var(--teal); }

  /* ===== PAIN-POINT CHECKLIST ===== */
  /* Cory: "maybe bringing the bullet points below this, and centering it."
     Was a 0.95fr/1.05fr side-by-side, which put the copy and the four bullet
     cards shoulder to shoulder with nothing between them. Now the copy sits
     centred on top and the checklist runs below it in two columns. The bullets
     themselves stay left-aligned inside their cards: centring text inside a
     checklist row makes it harder to scan, not easier. */
  .pain { background: var(--snow); padding-top: 0; padding-bottom: 90px; }
  .pain-grid { display: block; }
  .pain-copy { max-width: 680px; margin: 0 auto 44px; text-align: center; }
  .pain-copy .eyebrow { justify-content: center; }
  .pain-copy h2 { font-size: clamp(28px, 3.2vw, 40px); margin-bottom: 18px; }
  .pain-copy p { font-size: 17px; color: var(--ink-soft); }
  .checklist {
    list-style: none;
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    max-width: 900px; margin: 0 auto;
  }
  .checklist li {
    display: flex; align-items: flex-start; gap: 13px;
    background: #fff; border: 1px solid var(--stone); border-radius: 12px;
    padding: 18px 22px;
    font-size: 15.5px; color: var(--ink-soft);
  }
  .checklist li i { color: var(--teal); font-size: 21px; flex-shrink: 0; margin-top: 1px; }
  .checklist li strong { color: var(--navy); font-weight: 600; }

  /* ===== PILLAR-STYLE DIFFERENTIATORS (matches homepage pillars) ===== */
  .pillars { background: var(--mist); }
  .pillar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px; }
  .pillar { border-top: 1.5px solid var(--stone); padding-top: 26px; }
  .pillar .p-num {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-style: italic; font-size: 15px; color: var(--teal-dark);
    display: block; margin-bottom: 12px;
  }
  .pillar h3 { font-size: 21px; margin-bottom: 12px; }
  .pillar p { font-size: 14.5px; color: var(--ink-soft); }
  .pillar .p-proof {
    margin-top: 16px; display: flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 600; color: var(--navy);
  }
  .pillar .p-proof i { color: var(--teal); font-size: 18px; }

  /* ===== WARRANTY CENTERPIECE (light band, navy warranty tiles) =====
     This section used to be navy with cards at rgba(255,255,255,0.05) on top
     of it. Measured, those cards sat at about 1.1:1 against their own section
     background, which is to say invisible, and .warranty-tier .prod was 2.6:1.
     Cory hit this four separate times ("the blue on blue is throwing me off",
     "maybe making this section white", "find a way to make the warranties
     pop") and it was burying the strongest thing the company sells.

     So the band is white and the three warranty tiers are solid navy on it,
     which makes them the highest-contrast objects on the page. .prod now
     measures about 7.5:1. Hairline rules top and bottom keep the band reading
     as deliberate next to snow or mist neighbours.

     This also keeps the page rhythm working once .ba (navy) lands on the
     exterior page: .warranty and .ba never appear on the same page, so
     flipping one and leaving the other navy costs nothing, and .ba keeps the
     dark surround that makes before/after photos read. */
  .warranty { background: #fff; color: var(--navy); border-block: 1px solid var(--stone); overflow: hidden; }
  /* .warranty-tex is deliberately gone. The paint texture is now applied with
     a divide blend (see .ba-tex), and divide over white is a no-op: white
     divided by a 200-255 greyscale clamps straight back to white. The rule
     rendered nothing, so the markup was removed from exterior, interior and
     pledge-warranty rather than left as a decorative element that does not
     decorate. If a white section ever wants this device it needs the opposite
     blend (multiply or darken, un-inverted), which is a separate decision. */
  .warranty .wrap { position: relative; z-index: 1; }
  .warranty h2 { color: var(--navy); }
  .warranty .eyebrow { color: var(--teal-dark); }
  .warranty .eyebrow::before { background: var(--teal); }
  .warranty .section-head p { color: var(--ink-soft); }
  .warranty-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
  .warranty-quote {
    background: var(--mist); border: 1px solid var(--stone);
    border-left: 3px solid var(--teal);
    border-radius: 16px; padding: 40px 40px 34px;
    box-shadow: 0 22px 48px -30px rgba(11,33,122,0.28);
  }
  .warranty-quote .stars { color: var(--teal); font-size: 17px; letter-spacing: 2px; margin-bottom: 16px; }
  .warranty-quote blockquote {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: 20px; line-height: 1.45; color: var(--navy); margin-bottom: 20px;
  }
  .warranty-quote .who { font-size: 13.5px; color: var(--ink-soft); display: flex; align-items: center; gap: 7px; }
  .warranty-quote .who i { color: var(--teal-dark); font-size: 16px; }
  .warranty-points { list-style: none; margin-top: 34px; }
  .warranty-points li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0; border-top: 1px solid var(--line);
    font-size: 15px; color: var(--ink-soft);
  }
  .warranty-points li strong { color: var(--navy); font-weight: 600; }
  .warranty-points li i { color: var(--teal); font-size: 20px; flex-shrink: 0; margin-top: 2px; }
  .warranty-tiers { display: flex; gap: 16px; margin-top: 30px; flex-wrap: wrap; }
  .warranty-tier {
    flex: 1; min-width: 150px;
    background: var(--navy); color: #fff;
    border: 0; border-radius: 12px; padding: 20px 22px;
    box-shadow: 0 20px 40px -22px rgba(11,33,122,0.55);
  }
  .warranty-tier .yrs {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: 26px; font-weight: 600; color: #fff; line-height: 1;
  }
  .warranty-tier .yrs em { font-style: italic; font-variation-settings: var(--fr-axes); color: var(--teal); }
  .warranty-tier .prod {
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    color: #b9c2e4; margin-top: 8px;
  }

  /* ===== GALLERY ===== */
  .gallery { background: var(--snow); }
  .gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .gallery-card {
    position: relative; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--stone); aspect-ratio: 4/4.6;
  }
  .gallery-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
  .gallery-card:hover img { transform: scale(1.04); }
  .gallery-card .loc {
    position: absolute; left: 14px; bottom: 14px; z-index: 2;
    font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
    background: rgba(8,18,58,0.72); color: #fff;
    padding: 7px 13px; border-radius: 999px;
    backdrop-filter: blur(4px);
    display: flex; align-items: center; gap: 6px;
  }
  .gallery-card .loc i { color: var(--teal); }
  .gallery-note { text-align: center; margin-top: 26px; font-size: 13px; color: #6b7494; }
  .gallery-note i { color: var(--teal); vertical-align: -2px; margin-right: 5px; }

  /* Landscape variant. The default card is 4/4.6 portrait, which is right for
     finished-room and street-view shots but crops crew photos badly, since all
     of those are 1200x800 landscape. Used for the crew/process rows that were
     previously bare .wk-grid images. */
  .gallery-grid.wide .gallery-card { aspect-ratio: 4/2.9; }

  /* Small label for a second row inside one merged gallery section, so two
     rows can sit under a single heading without needing two sections. */
  .gallery-sub {
    display: flex; align-items: center; gap: 12px;
    margin: 40px 0 20px;
    font-size: 12px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--teal-dark);
  }
  .gallery-sub::after { content: ""; flex: 1; height: 1px; background: var(--stone); }
  /* Same label inside the navy .ba band, once the exterior stills merged into
     the before/after section on 2026-08-13 ("this one kind of feels like
     gallery into a gallery"). Teal-dark on navy is unreadable. */
  .ba .gallery-sub { color: var(--teal); }
  .ba .gallery-sub::after { background: rgba(255,255,255,0.22); }

  /* ===== PROCESS STEPS ===== */
  .process { background: var(--mist); }
  .steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .step {
    background: #fff; border: 1px solid var(--stone); border-radius: 16px;
    padding: 28px 24px 26px;
  }
  .step .s-num {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-style: italic; font-size: 15px; color: var(--teal-dark);
    display: block; margin-bottom: 14px;
  }
  .step h3 { font-size: 18.5px; margin-bottom: 9px; }
  .step p { font-size: 13.5px; color: var(--ink-soft); }
  /* Step one used to be "Free estimate", which is not a step Kind Home performs,
     it is the thing the reader has to do. Michael, 2026-08-13: pull it out of the
     numbered list and make it the CTA under the process instead. */
  .process-start {
    margin-top: 40px; display: flex; flex-direction: column;
    align-items: center; gap: 12px; text-align: center;
  }
  .process-start-lede {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: 17px; letter-spacing: .01em; color: var(--ink-soft); margin: 0;
  }

  .process-promise {
    margin-top: 44px; text-align: center;
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: clamp(19px, 2.2vw, 24px); line-height: 1.45; color: var(--navy);
    max-width: 760px; margin-left: auto; margin-right: auto;
  }
  .process-promise em { font-style: italic; font-variation-settings: var(--fr-axes); color: var(--teal); }

  /* ===== REVIEWS (matches homepage cards) ===== */
  .reviews { background: var(--snow); }
  .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
  /* Cory on the reviews page: "these are a little stagnant, my eye just kind of
     glazes over them, it's not super engaging." Nine flat outlined boxes read
     as a wall, so the cards now carry real elevation and lift on hover. */
  .review-card {
    background: #fff; border: 1px solid var(--stone); border-radius: 16px;
    padding: 30px 30px 28px; display: flex; flex-direction: column;
    box-shadow: 0 18px 40px -28px rgba(11,33,122,0.35);
    transition: transform .18s, box-shadow .18s, border-color .18s;
  }
  .review-grid .review-card:hover {
    transform: translateY(-3px);
    border-color: var(--teal);
    box-shadow: 0 26px 54px -26px rgba(11,33,122,0.45);
  }
  /* Provenance, split out of the single grey "HomeAdvisor review · Exterior"
     line so the source is legible at a glance rather than buried in body text. */
  .review-src { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 3px; }
  .review-plat {
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
    color: var(--teal-dark); background: var(--mist);
    border: 1px solid var(--stone); border-radius: 999px;
    padding: 2px 9px;
  }
  .review-svc { font-size: 12px; color: #6b7494; }
  .review-card .stars { color: var(--teal); font-size: 16px; letter-spacing: 1.5px; margin-bottom: 13px; }
  .review-text { font-size: 14.5px; color: #2c3658; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
  .review-meta { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--stone); }
  .review-avatar {
    width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
    background: var(--mist); border: 1px solid var(--stone);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: 16px; font-weight: 600; color: var(--teal-dark);
  }
  .review-meta .name { font-size: 14.5px; font-weight: 600; }
  .review-meta .src { font-size: 12.5px; color: #6b7494; }
  .review-verified { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--teal-dark); font-weight: 600; }
  .review-verified i { font-size: 15px; }
  .reviews-foot { text-align: center; margin-top: 30px; font-size: 14px; color: var(--ink-soft); }
  .reviews-foot i { color: var(--teal); vertical-align: -2px; margin-right: 5px; }

  /* ===== FINAL CTA + FORM (matches homepage) ===== */
  .finalcta { background: var(--snow); padding-top: 0; }
  .peace { text-align: center; max-width: 760px; margin: 0 auto 54px; }
  .peace p {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: clamp(24px, 2.8vw, 34px); line-height: 1.34;
    color: var(--navy); font-weight: 600;
  }
  .peace p em { font-style: italic; font-variation-settings: var(--fr-axes); color: var(--teal); }
  .form-box {
    background: #fff; border: 1px solid var(--stone); border-radius: 16px;
    padding: 56px 56px 48px;
    box-shadow: 0 28px 64px -34px rgba(11,33,122,0.26);
  }
  .form-box .eyebrow { justify-content: center; }
  .form-head { text-align: center; max-width: 560px; margin: 0 auto 36px; }
  .form-head h2 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 12px; }
  .form-head p { font-size: 16.5px; color: var(--ink-soft); }
  .lead-form { max-width: 720px; margin: 0 auto; }
  .lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
  .field label { display: block; font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 6px; }
  .field label span { color: var(--coral); }
  .field input {
    width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--navy);
    background: var(--snow); border: 1.5px solid var(--line); border-radius: 8px;
    padding: 13px 15px; outline: none; transition: border-color .15s, box-shadow .15s;
  }
  .field input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(28,184,167,0.15); }
  .lead-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
  .form-reassure { margin-top: 24px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
  .form-reassure span { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: #6b7494; font-weight: 500; }
  .form-reassure i { color: var(--teal); font-size: 17px; }
  .form-zip-note { margin-top: 18px; text-align: center; font-size: 12.5px; color: #8b95bf; }
  .form-zip-note i { color: var(--teal); vertical-align: -2px; margin-right: 4px; }

  /* ===== FOOTER (matches homepage) ===== */
  footer { background: var(--navy); color: #c5cdea; padding: 66px 0 36px; }
  .footer-top {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
    padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .footer-logo { font-family: var(--font-display); font-variation-settings: var(--fr-axes); font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 16px; }
  .footer-logo em { font-style: italic; font-variation-settings: var(--fr-axes); color: var(--teal); }
  .footer-top p { font-size: 14px; line-height: 1.65; max-width: 280px; }
  .footer-col h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; font-family: var(--font-body); font-weight: 600; }
  .footer-col a { display: block; font-size: 14px; margin-bottom: 10px; color: #c5cdea; transition: color .15s; }
  .footer-col a:hover { color: var(--teal); }
  .footer-bottom { padding-top: 26px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; color: #8b95bf; }
  .footer-badges { display: flex; gap: 14px; }
  .footer-badges span { display: flex; align-items: center; gap: 6px; }
  .footer-badges i { color: var(--teal); }

  /* ===== STICKY MOBILE CTA ===== */
  .sticky-cta {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(251,250,248,0.96); backdrop-filter: blur(10px);
    border-top: 1px solid var(--stone);
    padding: 12px 18px;
    align-items: center; justify-content: space-between; gap: 14px;
  }
  .sticky-cta .s-copy { font-size: 13px; line-height: 1.35; }
  .sticky-cta .s-copy strong { display: block; font-size: 14px; color: var(--navy); }
  .sticky-cta .s-copy span { color: #6b7494; }
  .sticky-cta .btn { padding: 11px 20px; font-size: 14px; flex-shrink: 0; }

  /* ===== RESPONSIVE ===== */
  @media (max-width: 980px) {
    .nav-links { display: none; }
    .pillar-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
    /* Seven pages set .steps (and cabinet sets .pillar-grid) with an INLINE
       grid-template-columns, which beats these responsive rules on specificity.
       The result was a real horizontal scroll on mobile: interior and cabinet
       measured a 565px document inside a 375px viewport, on the original build
       as well as this one. Same attribute-selector device already used for
       .wk-grid, and !important is required to outrank the inline style. */
    .steps[style*="repeat("] { grid-template-columns: 1fr 1fr !important; }
    .pillar-grid[style*="repeat("] { grid-template-columns: 1fr 1fr !important; }
    .team-grid[style*="repeat("] { grid-template-columns: 1fr 1fr !important; }
    .warranty-grid { grid-template-columns: 1fr; gap: 44px; }
    .checklist { grid-template-columns: 1fr; max-width: 620px; }
    .gallery-grid { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr 1fr; }
    .footer-top { grid-template-columns: 1fr 1fr; }
    section { padding: 76px 0; }
    .hero-grid { grid-template-columns: 1fr; min-height: auto; }
    .hero-copy { padding: 64px 36px 56px; }
    .hero-photo { min-height: 340px; }
    .hero-proof { gap: 32px; }
    .form-box { padding: 40px 28px 36px; }
    .sticky-cta { display: flex; }
    body { padding-bottom: 74px; }
  }
  @media (max-width: 560px) {
    .wrap, .wrap-narrow { padding: 0 22px; }
    .lead-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
    .pillar-grid, .steps { grid-template-columns: 1fr; }
    .steps[style*="repeat("], .pillar-grid[style*="repeat("],
    .team-grid[style*="repeat("] { grid-template-columns: 1fr !important; }
  }

  /* ===== BEFORE / AFTER SLIDERS (navy section, matches homepage proof) =====
     KEEP IN SYNC: the .ba-* rules are duplicated in index.html's inline
     <style> block. Any change here must be made there too. */
  .ba { background: var(--navy); color: #fff; overflow: hidden; }

  /* The paint texture. It used to be a radial-masked box in the top right
     corner at opacity .1, which read as a lens flare rather than as paint;
     Michael and Zach both called it a smudge on the 2026-08-13 call.

     This is a Photoshop "divide" of the paint texture over --navy at 55%,
     PRE-BAKED into images/paint-texture-navy.jpg. It is a flat opaque
     background: no blend mode, no filter, nothing to composite.

     Why baked and not blended: CSS has no divide mode, but color-dodge over an
     inverted source is mathematically identical (base / (1 - (1 - tex)) ==
     base / tex), so `filter: invert(1); mix-blend-mode: color-dodge` renders
     it exactly. That version was built and tested and it BLANKED THE ENTIRE
     PAGE once the blended layer got tall enough: fine at 700px, white screen
     at this section's real 1529px. A full-bleed filter+blend surface over a
     tall section is not worth a white-screen risk in production for an effect
     nobody can consciously see. Baking gives identical pixels for 12.9KB,
     which is smaller than the source texture it replaces.

     REGENERATE if --navy ever changes; the navy is baked in. The recipe is in
     IMAGES.md. ONE INSTANCE PER PAGE, and only on navy: divide over white is
     a no-op, which is why .warranty-tex is gone. */
  .ba-tex {
    position: absolute; inset: 0;
    background-image: url('../images/paint-texture-navy.jpg');
    background-size: cover; background-position: center 30%;
    pointer-events: none;
  }
  .ba .wrap { position: relative; z-index: 1; }
  .ba h2, .ba .display { color: #fff; }
  .ba .eyebrow { color: var(--teal); }
  .ba .eyebrow::before { background: var(--teal); }
  .ba .section-head p { color: #c5cdea; }
  .ba-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  /* Was rgba(255,255,255,0.04) on navy, then solid #16307F. Still blue on blue.
     Michael on the 2026-08-13 call, on a second screen: "those disappeared for
     me, I couldn't even see them." Decision on that call was to keep the navy
     band (it is the visual break from the white and mist sections, and the dark
     surround is what makes the before/after photos read) and flip the cards to
     white with navy type. Same fix as .warranty, one step further. */
  .ba-set {
    background: #fff; border: 1px solid rgba(255,255,255,0.28);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 22px 48px -26px rgba(0,0,0,0.55);
  }
  .ba-slider {
    position: relative; aspect-ratio: 4/3.1; overflow: hidden;
    cursor: ew-resize; touch-action: none; user-select: none;
  }
  .ba-slider img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; pointer-events: none;
  }
  .ba-before-layer {
    position: absolute; inset: 0; z-index: 2;
    clip-path: inset(0 50% 0 0); -webkit-clip-path: inset(0 50% 0 0);
  }
  .ba-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; z-index: 3;
    width: 2px; background: rgba(255,255,255,0.9);
    transform: translateX(-1px);
    box-shadow: 0 0 14px rgba(0,0,0,0.35);
  }
  .ba-handle-knob {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: #fff; color: var(--navy);
    display: flex; align-items: center; justify-content: center; gap: 2px;
    box-shadow: 0 8px 22px -6px rgba(0,0,0,0.5);
    font-size: 15px;
  }
  .ba-chip {
    position: absolute; top: 12px; z-index: 4;
    font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    background: rgba(8,18,58,0.78); color: #fff;
    padding: 5px 11px; border-radius: 999px;
    backdrop-filter: blur(4px);
    pointer-events: none;
  }
  .ba-chip.before { left: 12px; }
  .ba-chip.after { right: 12px; background: var(--teal); }
  .ba-meta {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; font-size: 13.5px; color: var(--ink-soft);
  }
  .ba-meta strong { color: var(--navy); font-weight: 600; }
  .ba-meta i { color: var(--teal); margin-right: 6px; vertical-align: -2px; }
  .ba-note { text-align: center; margin-top: 26px; font-size: 13px; color: #a6b0d6; }
  .ba-note i { color: var(--teal); vertical-align: -2px; margin-right: 5px; }

  /* ===== FOUNDER NOTE ===== */
  .founder { background: var(--mist); padding: 96px 0; }
  .founder-card {
    display: grid; grid-template-columns: 190px 1fr; gap: 44px; align-items: center;
    background: #fff; border: 1px solid var(--stone); border-radius: 16px;
    padding: 48px 56px;
    box-shadow: 0 24px 54px -32px rgba(11,33,122,0.28);
    max-width: 880px; margin: 0 auto;
  }
  .founder-photo { width: 190px; height: 190px; border-radius: 50%; overflow: hidden; border: 4px solid var(--mist); }
  .founder-photo img { width: 100%; height: 100%; object-fit: cover; }
  .founder-card blockquote {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-size: clamp(19px, 2.2vw, 24px); line-height: 1.42; color: var(--navy);
    margin-bottom: 18px;
  }
  .founder-card blockquote em { font-style: italic; font-variation-settings: var(--fr-axes); color: var(--teal); }
  .founder-who { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-soft); }
  .founder-who .sig {
    font-family: var(--font-display); font-variation-settings: var(--fr-axes);
    font-style: italic; font-size: 20px; color: var(--navy);
  }
  .gallery-grid.four { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 980px) {
    .ba-grid { grid-template-columns: 1fr; }
    .gallery-grid.four { grid-template-columns: 1fr 1fr; }
    .founder-card { grid-template-columns: 1fr; text-align: center; padding: 40px 30px; }
    .founder-photo { margin: 0 auto; }
    .founder-who { justify-content: center; }
  }
  @media (max-width: 560px) {
    .gallery-grid.four { grid-template-columns: 1fr; }
  }


  /* ===== NAV DROPDOWN + MOBILE MENU (sitewide) ===== */
  .nav-drop { position: relative; }
  .nav-drop-btn { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--navy); background: none; border: 0; cursor: pointer; font-family: var(--font-body); padding: 0; transition: color .15s; }
  .nav-drop-btn i { font-size: 14px; color: var(--teal-dark); transition: transform .15s; }
  .nav-drop-btn:hover { color: var(--teal-dark); }
  .nav-drop.open .nav-drop-btn i { transform: rotate(180deg); }
  .nav-drop-menu { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 50px -28px rgba(11,33,122,0.45); padding: 10px; min-width: 250px; display: none; z-index: 60; }
  .nav-drop-menu::before { content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
  .nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu { display: block; }
  .nav-drop-menu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--navy); }
  .nav-drop-menu a:hover { background: var(--mist); color: var(--teal-dark); }
  .nav-toggle { display: none; background: none; border: 0; color: var(--navy); font-size: 27px; cursor: pointer; padding: 4px; line-height: 1; }
  .nav-mobile { display: none; }
  .field.full { grid-column: 1 / -1; }
  @media (max-width: 900px) {
    .nav-toggle { display: block; }
    nav .nav-links { display: none; }
    body.nav-open .nav-mobile { display: block; position: absolute; top: 82px; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--stone); box-shadow: 0 24px 40px -24px rgba(11,33,122,0.35); padding: 10px 24px 22px; z-index: 70; max-height: calc(100vh - 82px); overflow-y: auto; }
    .nav-mobile a { display: block; padding: 12px 2px; font-size: 16px; font-weight: 500; color: var(--navy); border-bottom: 1px solid var(--mist); }
    .nav-mobile .nav-mobile-group { font-size: 12px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--teal-dark); font-weight: 700; padding: 16px 2px 4px; }
    .nav-mobile .btn { margin-top: 16px; width: 100%; justify-content: center; border-bottom: 0; color: #fff; }
  }


  /* ===== PHASE A INNER PAGES ===== */
  .page-hero { background: var(--mist); border-bottom: 1px solid var(--stone); padding: 84px 0 68px; text-align: center; }
  .page-hero .eyebrow { justify-content: center; }
  .page-hero h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.08; margin: 14px auto 18px; max-width: 820px; }
  .page-hero p.lede { font-size: 18px; color: var(--ink-soft); max-width: 660px; margin: 0 auto; }
  .page-hero .hero-proof { justify-content: center; margin-top: 36px; }
  section.block { padding: 90px 0; }
  .faq-list { max-width: 820px; margin: 0 auto; }
  .faq-group-title { font-size: 22px; margin: 44px 0 8px; }
  .faq-group-title:first-child { margin-top: 0; }
  details.faq { border-bottom: 1px solid var(--stone); }
  details.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 20px 2px; font-weight: 600; font-size: 16.5px; color: var(--navy); }
  details.faq summary::-webkit-details-marker { display: none; }
  details.faq summary i { color: var(--teal-dark); font-size: 20px; flex-shrink: 0; transition: transform .2s; }
  details.faq[open] summary i { transform: rotate(45deg); }
  details.faq .faq-a { padding: 0 2px 22px; color: var(--ink-soft); font-size: 15.5px; max-width: 720px; }
  details.faq .faq-a a { color: var(--teal-dark); font-weight: 600; }
  .team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .team-card { background: #fff; border: 1px solid var(--stone); border-radius: 16px; padding: 28px; }
  .team-card .avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--mist); color: var(--teal-dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-variation-settings: var(--fr-axes); font-size: 24px; font-weight: 600; margin-bottom: 16px; }
  .team-card .avatar i { font-size: 28px; }
  .team-card h3 { font-size: 19px; margin-bottom: 2px; }
  .team-card .role { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--teal-dark); font-weight: 700; margin-bottom: 10px; }
  .team-card p { font-size: 14.5px; color: var(--ink-soft); }
  .partner-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 880px; margin: 0 auto; }
  .partner-grid span { background: #fff; border: 1px solid var(--stone); border-radius: 12px; padding: 16px 18px; font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 10px; }
  .partner-grid span i { color: var(--teal); font-size: 19px; }
  .stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
  .stat-band .stat { background: #fff; border: 1px solid var(--stone); border-radius: 16px; padding: 30px 26px; text-align: center; }
  .stat-band .num { font-family: var(--font-display); font-variation-settings: var(--fr-axes); font-size: 38px; font-weight: 600; color: var(--navy); line-height: 1.1; }
  .stat-band .num em { font-style: italic; font-variation-settings: var(--fr-axes); color: var(--teal); }
  .stat-band .num i { color: var(--teal-dark); }
  .stat-band .lbl { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; }
  .plat-strip { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
  .plat { background: #fff; border: 1px solid var(--stone); border-radius: 12px; padding: 14px 22px; font-size: 14.5px; display: flex; gap: 9px; align-items: center; }
  .plat i { color: var(--teal-dark); font-size: 19px; }
  .wk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .wk-grid img { width: 100%; height: 300px; object-fit: cover; border-radius: 14px; border: 1px solid var(--stone); }
  .role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 900px; margin: 0 auto; }
  .role-card { background: #fff; border: 1px solid var(--stone); border-radius: 16px; padding: 30px; }
  .role-card i { font-size: 30px; color: var(--teal-dark); margin-bottom: 14px; display: block; }
  .role-card h3 { font-size: 20px; margin-bottom: 8px; }
  .role-card p { font-size: 14.5px; color: var(--ink-soft); }
  .tier-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .tier-col { background: #fff; border: 1px solid var(--stone); border-radius: 18px; padding: 34px 30px; }
  .tier-col > h3 { font-size: 22px; margin-bottom: 2px; }
  .tier-col .sub { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }
  .tier { border-top: 1px solid var(--stone); padding: 16px 0 14px; }
  .tier .yrs { font-family: var(--font-display); font-variation-settings: var(--fr-axes); font-size: 22px; font-weight: 600; color: var(--navy); }
  .tier .yrs em { font-style: italic; color: var(--teal); font-variation-settings: var(--fr-axes); }
  .tier .prod { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--teal-dark); margin: 4px 0 6px; }
  .tier p { font-size: 14px; color: var(--ink-soft); }
  .tier .rec { display: inline-block; background: var(--teal); color: #fff; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: 3px; }
  @media (max-width: 900px) {
    .team-grid, .tier-cols, .wk-grid, .partner-grid { grid-template-columns: 1fr 1fr; }
    .stat-band { grid-template-columns: 1fr 1fr; }
    .role-grid { grid-template-columns: 1fr; }
    .wk-grid[style*="repeat(4"] { grid-template-columns: 1fr 1fr !important; }
  }
  @media (max-width: 620px) {
    .team-grid, .tier-cols, .wk-grid, .partner-grid { grid-template-columns: 1fr; }
    .review-grid, .stat-band { grid-template-columns: 1fr; }
    .wk-grid[style*="repeat(4"] { grid-template-columns: 1fr !important; }
    section.block { padding: 64px 0; }
  }

  .svc-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: var(--navy); }
  .svc-link i { transition: transform .15s; color: var(--teal-dark); }
  .svc-link:hover i { transform: translateX(3px); }

  /* ===== HERO CARD (service pages — full-image card, rounded corners) ===== */
  .hero-card-outer { padding: 0 16px 16px; background: var(--snow); }
  .hero-card {
    position: relative; border-radius: 0 0 28px 28px; overflow: hidden;
    min-height: 660px; display: flex; align-items: flex-end;
    background: var(--navy);
  }
  .hero-card .hero-bg { position: absolute; inset: 0; }
  .hero-card .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
  .hero-card .hero-scrim {
    position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(88deg, rgba(5,13,52,0.86) 0%, rgba(5,13,52,0.55) 42%, rgba(5,13,52,0.08) 72%),
      linear-gradient(to top, rgba(5,13,52,0.72) 0%, rgba(5,13,52,0) 45%);
  }
  .hero-card .hero-content {
    position: relative; z-index: 2;
    padding: 110px 76px 72px; max-width: 780px; color: #fff;
  }
  .hero-rating { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.92); margin-bottom: 26px; }
  .hero-rating .stars { color: var(--teal); font-size: 15px; letter-spacing: 2px; }
  .hero-card h1 { color: #fff; font-size: clamp(38px, 4.4vw, 58px); line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 20px; }
  .hero-card h1 em.tz { color: var(--teal); }
  .hero-card .hero-sub { font-size: 17.5px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 560px; margin-bottom: 30px; }
  .hero-card .hero-tag {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(6px); border-radius: 999px;
    padding: 8px 16px; font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 22px;
  }
  .hero-card .hero-tag i { color: var(--teal); font-size: 16px; }
  .hero-card .hero-cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 24px; }
  .hero-ghost { font-size: 13.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.45); padding-bottom: 3px; transition: border-color .15s; }
  .hero-ghost:hover { border-color: var(--teal); }
  .hero-card .hero-microcopy { display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(255,255,255,0.8); }
  .hero-card .hero-microcopy i { color: var(--teal); font-size: 17px; }
  .hero-card .hero-photo-credit {
    position: absolute; top: auto; bottom: 20px; right: 24px; z-index: 2;
    display: inline-flex; align-items: center; gap: 6px;
    background: none; backdrop-filter: none; border-radius: 0; padding: 0;
    font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em; color: rgba(255,255,255,0.7);
  }
  .hero-card .hero-photo-credit i { color: rgba(255,255,255,0.7); font-size: 13px; }
  @media (max-width: 900px) {
    .hero-card-outer { padding: 0 10px 10px; }
    .hero-card { min-height: 560px; border-radius: 0 0 20px 20px; }
    .hero-card .hero-content { padding: 80px 28px 44px; }
    .hero-card .hero-scrim {
      background:
        linear-gradient(to top, rgba(5,13,52,0.9) 8%, rgba(5,13,52,0.35) 55%, rgba(5,13,52,0.12) 100%);
    }
  }

  /* ===== FOOTER LOGO (image, not text) ===== */
  .footer-logo img { height: 42px; width: auto; display: block; }

  /* ===== REVIEW SLIDER (service pages) ===== */
  .rev-slider { position: relative; }
  .rev-track {
    display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 3);
    gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
  }
  .rev-track::-webkit-scrollbar { display: none; }
  .rev-track .review-card { scroll-snap-align: start; display: flex; flex-direction: column; }
  .rev-track .review-card .review-text { flex: 1; }
  /* .rev-nav / .rev-btn now live in css/shared-components.css so index.html and
     the service pages stay in sync. Do not re-add them here. */
  @media (max-width: 900px) { .rev-track { grid-auto-columns: 72%; } }
  @media (max-width: 620px) { .rev-track { grid-auto-columns: 88%; } }

  /* ===== AWARDS STRIP ===== */
  .awards { background: var(--snow); padding: 58px 0 64px; }
  .awards-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 36px 54px; }
  .awards-strip img { height: 80px; width: auto; mix-blend-mode: multiply; }
  .awards-strip img.wide { height: 46px; }
  @media (max-width: 620px) {
    .awards-strip { gap: 24px 30px; }
    .awards-strip img { height: 58px; }
    .awards-strip img.wide { height: 34px; }
  }

  /* ===== FOOTER SOCIAL ===== */
  .footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
  .footer-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.18); color: #c5cdea; font-size: 19px; margin-bottom: 0; transition: background .15s, border-color .15s, color .15s; }
  .footer-social a:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

  .team-card .avatar-photo { padding: 0; overflow: hidden; width: 72px; height: 72px; }
  .team-card .avatar-photo img { width: 100%; height: 100%; object-fit: cover; }

  /* ===== IMAGE PLACEHOLDER TILES (assets still needed) ===== */
  .ph-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 300px; border: 2px dashed #b8c0d4; border-radius: 14px; background: var(--mist); color: var(--ink-soft); text-align: center; padding: 24px; }
  .ph-tile i { font-size: 32px; color: var(--teal-dark); }
  .ph-tile strong { color: var(--teal-dark); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; }
  .ph-tile span { font-size: 14px; max-width: 250px; line-height: 1.5; }

  /* ===== RELATED SERVICES (integrated cards) ===== */
  /* Cory: "this is just a little weird, how this kind of looks and feels, the
     left and the right, the buttons down here." The head was flex
     space-between, which threw the eyebrow hard left and the h2 hard right
     with a gap between them. Now it is a single centred head. The grid is
     capped at 300px per card and centred so the two-card pages (interior,
     cabinet) stop stretching two cards across the full 1180px wrap. */
  .related-head { text-align: center; margin-bottom: 26px; }
  .related-head .eyebrow { justify-content: center; }
  .related-head h2 { font-size: clamp(22px, 2.2vw, 27px); margin: 0; }
  .related-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center; gap: 16px;
  }
  .related-card { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--stone); border-radius: 14px; padding: 20px 22px; font-weight: 600; font-size: 15px; color: var(--navy); transition: border-color .15s, box-shadow .15s; }
  .related-card i.lead { font-size: 24px; color: var(--teal-dark); flex-shrink: 0; }
  .related-card i.go { margin-left: auto; color: var(--teal-dark); flex-shrink: 0; transition: transform .15s; }
  .related-card:hover { border-color: var(--teal); box-shadow: 0 10px 30px -18px rgba(11,33,122,0.25); }
  .related-card:hover i.go { transform: translateX(4px); }

  /* ===== LEGAL PROSE ===== */
  .legal-body h2 { font-size: 22px; margin: 36px 0 12px; }
  .legal-body p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.7; margin-bottom: 14px; max-width: 760px; overflow-wrap: anywhere; }

  /* ===== PHOTOGRAPHIC PAGE-HERO WASH ===== */
  .page-hero.has-photo { position: relative; overflow: hidden; }
  .hero-wash { position: absolute; inset: 0; }
  .hero-wash img { width: 100%; height: 100%; object-fit: cover; }
  .hero-wash::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(251,250,248,0.96) 0%, rgba(251,250,248,0.88) 55%, rgba(251,250,248,0.8) 100%); }
  .page-hero.has-photo .wrap { position: relative; z-index: 2; }

  /* footer CTA button: keep text white (overrides .footer-col a color) */
  .footer-col a.btn, .footer-col a.btn:hover { color: #fff; }

  /* ===== SERVICE AREAS ===== */
  .city-grid { display: flex; flex-wrap: wrap; gap: 12px; }
  .city-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--stone); border-radius: 999px; padding: 11px 20px; font-size: 14.5px; font-weight: 500; color: var(--navy); }
  .city-chip i { color: var(--teal); font-size: 16px; }

/* Cloudflare Turnstile widget inside the lead form. Reserve its height so the
   submit button does not jump when the widget finishes loading. */
.lead-form .cf-turnstile { margin: 4px 0 14px; min-height: 65px; }