/* =============================================================
 * auto-fixes.css — BS5 Desktop Visual Reconciliation
 * Generated from computed-style comparison at 1400px
 * Prod vs Sandbox: header/navbar/social/font matching
 * ============================================================= */

/* Fix 1: Social icon circles — match production 42px diameter (ALL widths) */
a.social-icon-circle {
    width: 42px !important;
    height: 42px !important;
    margin: 0 4px !important;
    line-height: 42px !important;
    font-size: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix 2: Desktop navbar container height — match production 40px */
@media (min-width: 1200px) {
    nav.navbar.navbar-default {
        height: 40px !important;
        min-height: 40px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Fix 3: Nav link styling — match production spacing & sizing */
@media (min-width: 1200px) {
    .navbar-default .navbar-nav > li > a {
        padding: 10px 15px !important;
        font-size: 12px !important;
        line-height: 20px !important;
    }
}

/* Fix 4: Section heading (GET A PRICE ON YOUR NEW GUTTERDOME) — reduce size */
@media (min-width: 1200px) {
    h2 {
        font-size: 30px !important;
    }
}

/* Fix 5: Phone number color — match production gold #c8963e */
@media (min-width: 1200px) {
    a[href^="tel:"] {
        color: #c8963e !important;
        font-weight: 700 !important;
    }
}

/* Fix 6: Section heading top margins — match production 10px top margin */
/* Broad h4 rule applies to all, then sidebar cards get margin-top: 0 override */
@media (min-width: 1200px) {
    h4 {
        margin-top: 10px !important;
    }
    /* Sidebar card headings (Specials/Financing inside list items) — keep at 0 */
    li h4,
    .caption-text h4 {
        margin-top: 0 !important;
    }
}

/* Fix 7: "Professional Installations" footer heading margin — match production 10px vertical */
@media (min-width: 1200px) {
    .site-footer h4,
    footer h4,
    .footer-bottom h4 {
        margin: 10px 0 !important;
    }
}

/* ── Aug 5, 2026: Testimonials text cut off on tablet landscape ──
   phase4-landscape.css forces `p { width: 668px !important }` globally at
   992-1199px, which clips testimonial paragraphs inside the ~387px swiper
   slides (overflow:hidden). Scope testimonial paragraphs back to their
   slide width. Main content paragraph width (668px) untouched. */
.swiper-testimonials p {
    width: auto !important;
}

/* ── Aug 5, 2026: Subpage hero banner h2 too small at desktop ──
   Fix 4 above (h2{font-size:30px!important} @ >=1200px) clobbers the
   #page-slider banner h2, which must stay 60px to match production
   (#page-slider h2{3.75rem} in style.css). Restore it at desktop only. */
@media (min-width: 1200px) {
    #page-slider h2 {
        font-size: 60px !important;
    }
}

/* ── Aug 5, 2026: Contact page testimonials-swiper overflows viewport ──
   phase4-landscape.css sets `div.swiper { width:auto !important }`, which in
   the flex `aside.trust-panel` makes .testimonials-swiper size to its content
   and blow up to 2150px+ (runs off the right edge; slide text parked off-screen).
   Constrain the swiper to its container. */
.testimonials-swiper {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Aug 5, 2026: Issue 1 — testimonial slide paragraph overflow (contact page) ──
   phase4-landscape.css `p{width:668px!important}` forces slide paragraphs outside
   their ~378px slide (clipped by swiper overflow:hidden). Override inside the
   testimonials swiper. (Replaces the non-matching .swiper-testimonials p rule.) */
.testimonials-swiper p,
.testimonial-card p {
    width: auto !important;
}

/* Let testimonials swiper fill the trust-panel at tablet widths (match prod ~426px) */
@media (max-width: 991.98px) {
    .testimonials-swiper {
        width: 100% !important;
        max-width: none !important;
    }
}

/* ── Aug 5, 2026: Issue 2 — two-col grid / form-card responsive widths ──
   Scoped to contact page (page-id-315) so other pages are untouched.
   Part A: override phase4's forced 910px entry-content at 992-1199px.
   Part B: let entry-content grow with viewport at 1200px+ (match prod BS3).
   Part C: flex the two-col first column (form-card) to fill remaining space. */
@media (min-width: 992px) and (max-width: 1199px) {
    body:is(.page-id-315,.gd-quote-page) .entry-content {
        width: auto !important;
        max-width: 960px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (min-width: 1200px) {
    body:is(.page-id-315,.gd-quote-page) .entry-content {
        max-width: 1170px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
.two-col {
    grid-template-columns: 1fr 380px !important;
}
@media (max-width: 991.98px) {
    .two-col {
        grid-template-columns: 1fr !important;
    }
    .two-col > * {
        grid-column: auto !important;
    }
}

/* R3.8 — Get a Price captcha cut off. The Wufoo embed iframe is hardcoded
   height="460", which clips the reCAPTCHA ("I'm not a robot") at the bottom.
   Match the contact page's form iframe height (600px) so the captcha shows. */
iframe[title="Get a Price Form"],
iframe[src*="z1meuq8i0zvk84l"] {
    height: 600px !important;
}

/* R3.5 — AI Chat (Tawk.to) popup circle: reduce 20%. Tawk hard-codes the
   bubble size inside its iframe, so we scale the widget down via CSS.
   transform: scale(0.8) on the tawk iframe/container shrinks the bubble
   (20% smaller) while keeping it anchored bottom-right. Verified selector
   from the tawk embed structure; harmless if the widget doesn't expose it. */
#tawkchat-iframe-container iframe,
#tawk-bubble,
.tawk-min-container,
iframe[title="chat widget"] {
    transform: scale(0.8) !important;
    transform-origin: bottom right !important;
}

@media (min-width: 1400px) {
  nav.navbar { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 1400px) {
  #menu-item-dropdown-1611 { text-align: right; /* BS5-CONV v2 prod:right sand:start */ }
}

@media (min-width: 1400px) {
  a.nav-link { text-align: right; /* BS5-CONV v2 prod:right sand:start */ }
}

@media (min-width: 1400px) {
  #menu-item-dropdown-1611 { white-space: normal; /* BS5-CONV v2 prod:normal sand:nowrap */ }
}

@media (min-width: 1400px) {
  #menu-item-dropdown-377 { white-space: normal; /* BS5-CONV v2 prod:normal sand:nowrap */ }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  a.nav-link { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  a.dropdown-item { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #menu-item-dropdown-377 { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #menu-item-dropdown-377 { text-align: right; /* BS5-CONV v2 prod:right sand:start */ }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  #menu-item-dropdown-1611 { font-family: Questrial, sans-serif; /* BS5-CONV v2 prod:Questrial, sans-serif sand:"Open Sans", sans-serif */ }
}

@media (min-width: 1400px) {
  h2.entry-title { line-height: 28.6px; /* BS5-CONV v2 prod:28.6px sand:36px */ }
}

/* BS5-CONV v2 form-control sizing — match production (BS3) form fields (scoped to form containers) */
.wufoo-wrapper .form-control,
#form3369 .form-control, #form1965 .form-control, #form2001 .form-control {
  font-size: 14px !important;
  height: 34px !important;
  border-radius: 4px !important;
}

/* BS5-CONV v2 dma-landing H1 typography — match production (scoped to page-id-1284) */
body.page-id-1284 .entry-content h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 28.6px !important;
  margin-top: 17.42px !important;
  margin-bottom: 17.42px !important;
}

/* BS5-CONV v2 blog post-title typography — match production */
.blog .entry-title {
  font-size: 26px !important;
  line-height: 28.6px !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

/* BS5-CONV v2 footer + top-bar + form-label + social typography — match production */
/* R2 item 7 (2026-09-23) — the bottom legal row breaks 2+2 on a phone, one line on desktop.
   The owner's spec: LIFETIME WARRANTY + U.S. PATENTS / PRIVACY POLICY + TERMS OF USE. */
.gd-legal-break { display: none; }
@media (max-width: 480px) {
  .gd-legal-break { display: inline; }
}
footer a {
  font-size: 16px !important;
  line-height: 24px !important;
  text-align: center !important;
  text-transform: none !important;
  text-decoration: none !important;
}
.top a[href^='tel:'] {
  font-size: 18px !important;
  line-height: 27px !important;
  text-align: right !important;
  text-decoration: none !important;
}
.wufoo-wrapper label,
#form3369 label, #form1965 label, #form2001 label {
  font-weight: 700 !important;
  margin-bottom: 5px !important;
}
a.social-icon-circle { font-weight: 400 !important; }

/* BS5-CONV v2 social-icon font-weight — match production 400 (scoped to beat .top a 800) */
.top a.social-icon-circle { font-weight: 400 !important; }

/* BS5-CONV v2 social-icon font-weight — match production 400.
   Winner was .navbar-static-top .top a {font-weight:800!important} (0,3,1).
   This ties it (0,3,1) and comes later in cascade. */
.navbar-static-top .top a.social-icon-circle { font-weight: 400 !important; }

/* BS5-CONV v2 blog full-width — neutralize v176 70/30 cap on blog page only, match production */
body.blog .site-content.container,
body.blog #primary,
body.blog #secondary {
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  div.cta1 { text-align: center; /* BS5-CONV v2 prod:center sand:left */ }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
  div.cta2 { text-align: center; /* BS5-CONV v2 prod:center sand:left */ }
}

@media (min-width: 1400px) {
  #Field14 { color: rgb(85, 85, 85); /* BS5-CONV v2 prod:rgb(85, 85, 85) sand:rgb(33, 37, 41) */ }
}

@media (min-width: 1400px) {
  #Field14 { line-height: normal; /* BS5-CONV v2 prod:normal sand:21px */ }
}

@media (min-width: 1400px) {
  .entry-content h1 { color: rgb(16, 41, 97); /* BS5-CONV v2 prod:rgb(16, 41, 97) sand:rgb(64, 64, 64) */ }
}

/* BS5-CONV v2 header topbar heights — match prod 125px so hero clears the nav (not cut by menu) */
.navbar-static-top > .container-fluid:first-of-type > .col-sm-3,
.navbar-static-top .top .col-sm-3 {
  min-height: 85px !important;
}
.navbar-static-top > .container-fluid:first-of-type > .col-sm-9,
.navbar-static-top .top .col-sm-9 {
  min-height: 55px !important;
}

/* #1 (2026-09-08, Jeffrey): removed Contact-only 20px hero offset so the Contact
   static-photo header aligns with every other interior page (was page-id-315
   margin-top:20px). Contact photo top now 112, matching all other pages. */

/* BS5-CONV v2 footer — locations column full-width below 992 (prod uses col-xs-12) */
@media (max-width: 991.98px) {
  footer .col-12.col-md-6.order-md-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
  footer .locations-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* BS5-CONV v2 footer — "More Information and Articles" link font (prod 13px) */
footer .col-md-6.padding a {
  font-size: 13px !important;
  line-height: 19.5px !important;
}

/* BS5-FIX 20260825 — RETIRED Step 5 (t_3a8bf831): this stopgap restored .content-area.col-sm-9
   at ≤640 because the OLD v177 had a bare .col-sm-9{display:none} that nuked the main content
   column. v177 was reworked to scope that to .navbar-static-top .col-sm-9, so the content
   column is no longer hidden. Re-verified: subpage content col stays full-width ≤640 without it. */

/* BS5-FIX 20260825 — residual 390px overflow (+10px): the reworked v177 forces
   #homeheader>div>:nth-child(2){display:block!important;width:100%!important} (spec 1,0,2)
   which out-specificities the .captionDesktop{display:none!important} (0,1,0) when the desktop
   hero caption column IS the nth-child(2). Scoped override (1,1,0) wins and hides it on mobile,
   clearing the +10px overflow. */
@media (max-width: 640px) {
  #homeheader .captionDesktop {
    display: none !important;
  }
}

/* =============================================================
 * Desktop punchlist (Aug 27) — social icons: official brand containers
 * + glyph centering. The inline SVGs ARE the current official marks; the
 * flat solid-color CIRCLE container flattened Instagram's gradient and
 * forced LinkedIn (rounded-square) and YouTube (rounded-rectangle) into
 * circles. Also fixes the glyphs sitting 4px low — style.css sets
 * .social-icon-circle svg{position:relative;top:4px}.
 * Selectors key on the rendered aria-label (exact case: Instagram,
 * LinkedIn, YouTube). FB + X keep their circles.
 * ============================================================= */
/* Center the glyph vertically in the circle (kill the top:4px offset) */
.social-icon-circle svg { top: 0 !important; }
/* Instagram — official multicolor gradient background, not flat pink */
a.social-icon-circle[aria-label="Instagram"] {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  background-color: transparent !important;
}
/* LinkedIn — official mark is "in" on a blue rounded SQUARE */
a.social-icon-circle[aria-label="LinkedIn"] { border-radius: 6px !important; }
/* YouTube — official mark is a red rounded RECTANGLE */
a.social-icon-circle[aria-label="YouTube"] { border-radius: 10px !important; }

/* =============================================================
 * Header geometry — match PRODUCTION (Bill's desktop/landscape lane,
 * Aug 27). Sandbox header was 125px with the nav wrapped ~30px below
 * the logo (migration flex-wrap), leaving a dead band between the
 * social icons and the menu bar. Prod = 95px, nav sits at 55 right
 * below the icons. Measured prod@1280: header 95, nav 55-95. Verified
 * this override reproduces prod exactly (nav_top=55, header=95).
 * Coupled: sticky-form top restored to 95px (was 125 for the old
 * 125px header) in header.php.
 * Scoped to >=992px (desktop + landscape tablet) — mobile (<992) keeps
 * its own stacked header layout; forcing 95px there would clip the menu.
 * ============================================================= */
@media (min-width: 992px) {
  .navbar-static-top { height: 95px !important; }
  .navbar-static-top .col-sm-12.col-md-9 { margin-top: -30px !important; }
}

/* =============================================================
 * Homepage hero — kill the dead band below the nav at landscape/
 * tablet (Bill's lane, Aug 27). `.navbar-static-top` is only
 * position:fixed at >=1200px; below that it's static (in-flow), so
 * BS5-MIG v175's #homeheader{padding-top:95px} (meant to clear a
 * fixed header) double-offsets and leaves a ~95px gap between the
 * menu bar and the hero slider at 768-1199px. Prod has no such
 * padding; the hero sits right below the in-flow header. This removes
 * the padding only where the header is in-flow (<1200px). Desktop
 * (>=1200, header fixed) keeps the padding — unchanged.
 * Verified by injection: hero 190->95 at 768/992/1067 (= nav bottom),
 * 1280 unchanged.
 * ============================================================= */
@media (max-width: 1199.98px) {
  body #homeheader { padding-top: 0 !important; }
}

/* =============================================================
 * Subpage header (contact + all subpages) — SPECIALS/FINANCING box
 * width at landscape (Bill's lane, Aug 27). `#page-slider` is
 * col-lg-10 col-sm-8 and `#cta-internal` is col-sm-4 col-md-4 col-lg-2.
 * BS5 activates col-lg at >=992 while BS3 waits for >=1200, so at
 * 992-1199px the sandbox jumped to the lg ratio (hero 83% / box 17%)
 * that prod only uses at >=1200. Prod at 992-1199 = hero 66% / box 33%.
 * Verified vs prod: this override reproduces prod exactly (box 356px,
 * hero 711px at 1067). Desktop >=1200 untouched.
 * ============================================================= */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #page-slider { flex: 0 0 66.6667% !important; max-width: 66.6667% !important; }
  #cta-internal { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
}


/* =============================================================
 * R8 (Aug 31) — Jeffrey mobile-lane punch list follow-ups.
 * Items cross both lanes but all land on BS5 sandbox.
 * ============================================================= */

/* R8.1 — Item 2: LOCATIONS link was underlined while the phone number
   (a[href^="tel:"]) is not (auto-fixes sets it text-decoration:none).
   Make LOCATIONS match the phone — no underline, same top-bar treatment. */
.navbar-static-top .top .topLeft a,
.navbar-static-top .top .topLeft a[href],
.navbar-static-top .top a[href*="locations"],
.navbar-static-top .top a[href^="http"] {
    text-decoration: none !important;
}

/* R8.2 — Item 4: social icon shape must be CIRCLES for all five brands.
   The Aug 27 official-logo pass gave LinkedIn a 6px rounded square and
   YouTube a 10px rounded rect to mimic their brand marks, but Jeffrey
   wants all five as circles. Force 50% on LinkedIn + YouTube (FB/X/IG
   already circles). Colors stay (Jeffrey confirmed colors match logos). */
a.social-icon-circle[aria-label="LinkedIn"] { border-radius: 50% !important; }
a.social-icon-circle[aria-label="YouTube"] { border-radius: 50% !important; }

/* R8.3 — Item 7: desktop hero slide-heading must match mobile = WHITE.
   The base .slide-heading rule (header.php) sets color:#404040 (dark gray),
   which reads "funky" over the hero photos at desktop. Mobile is white via
   mobile-fixes.css. Bring desktop to white + bolder so it matches mobile. */
.hero-slider-desktop .slide-heading {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 6px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9) !important;
}
.hero-slider-desktop .slide-overlay p {
    color: #ffffff !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8) !important;
}

/* R9 — Dealer state pages (gutter-guard-dealers-*): 4 feature icons must be
   2x2 on ALL breakpoints. The row's inline display:flex + gap:15px overrides
   the Bootstrap col-md-3 grid, so desktop squeezed 3 across + 1 full-width below.
   Force each box to 50% width = clean 2x2 (matches the mobile col-sm-6 layout). */
div[style*="display:flex"][style*="flex-wrap:wrap"] > .col-sm-6.col-md-3,
div[style*="flex-wrap:wrap"][style*="gap:15px"] > .col-sm-6.col-md-3 {
    flex: 0 0 calc(50% - 8px) !important;
    max-width: calc(50% - 8px) !important;
    flex-basis: calc(50% - 8px) !important;
}

/* Careers R2 — match Blog article title typography + color (26px royal blue #4169E1) */
.post-type-archive-careers .entry-title,
.archive.post-type-archive-careers .entry-title {
  font-size: 26px !important;
  line-height: 28.6px !important;
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}
.post-type-archive-careers .entry-title a,
.post-type-archive-careers .entry-title a:visited,
.post-type-archive-careers .entry-title a:hover {
  color: #4169E1;
}

.post-type-archive-careers .entry-title em {
  color: #4169E1;
}
/* Heading consistency: page title H1 = 30px navy, all pages (Jeffrey, Sep 1 2026) */
.entry-content h1,
.blog h1.entry-title,
h1.entry-title,
h1.career-h1 {
  color: #102961 !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
}
.entry-content h1 a,
h1.entry-title a,
h1.career-h1 a { color: #102961 !important; }


/* ============================================================
   Option A heading-hierarchy pin (Sep 8 2026, Chuck)
   Promoted homepage/interior section headers H4->H2 and
   subsection labels H5->H3 for a logical SEO/accessibility
   outline (Google + screen readers). These rules pin the
   promoted tags to their PRE-promotion computed visual so the
   page looks pixel-identical. Decorative CTA/slider captions
   were left at H4/H5 and are NOT covered here.
   ============================================================ */

/* Section headers that were h4.brandBox, now h2.brandBox.
   Replicate the .brandBox look the h4s had (22px/600 white on
   navy #102961, centered, 10px pad, 10px top margin) and defeat
   the bare "h2 {font-size:30px !important}" auto-fix above. */
h2.brandBox {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #fff !important;
  text-align: center !important;
  line-height: 1.2 !important;   /* 26.4px / 22px, as measured pre-promotion */
  background: #102961 !important;
  padding: 10px !important;
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}
/* OUR LOCATIONS sits inside the site-footer, where the old h4s
   got 10px all-round margins from "footer h4"/".site-footer h4". */
.site-footer h2.brandBox,
footer h2.brandBox {
  margin: 10px 0 !important;
}

/* "works in 3 ways" + "Our Values" subsection labels were
   #cta-3 h5 (30px white uppercase 600). They are now h3; the
   bare "h3 {color:#102961;font-weight:700;font-size:26px}" rule
   would recolor navy + downsize, so re-pin to the #cta-3 h5 look.
   (White is authored as #cta-3 {color:#fff} on the section.) */
#cta-3 h3 {
  font-size: 30px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-top: 30px !important;
  margin-bottom: 8px !important;
}

/* HQ / Knoxville location labels were inline-styled h5
   (20px/500 navy Questrial, centered). Now h3; keep that look
   (color/family/margin-top are already inline on the element). */
.location-card h3 {
  font-size: 20px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}


/* ============================================================
   TRUST BAND + INLINE TESTIMONIALS (front-page.php, Sep 8 2026)
   Atlas Rec #5. Sits between the social-proof bar and the main
   homepage content. Navy/gold to match site brand.
   ============================================================ */
.gd-trust-band {
  background: #f4f6fb;
  border-top: 1px solid rgba(16,41,97,0.08);
  padding: 46px 0 54px;
}
.gd-trust-title {
  text-align: center;
  color: #102961;
  font-family: Questrial, 'Open Sans', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: 0.01em;
}
.gd-trust-band .gd-trust-pillars {
  margin-top: 30px;
}
.gd-trust-pillar {
  text-align: center;
  padding: 18px 22px;
}
.gd-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #102961;
  color: #C8963E;
  margin-bottom: 16px;
}
.gd-trust-icon svg {
  width: 32px;
  height: 32px;
}
.gd-trust-lead {
  font-family: Questrial, 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #102961;
  margin: 0 0 8px;
  line-height: 1.3;
}
.gd-trust-line {
  font-size: 14.5px;
  line-height: 1.6;
  color: #444;
  margin: 0 auto;
  max-width: 300px;
}
.gd-trust-band .gd-trust-quotes {
  margin-top: 40px;
  border-top: 1px solid rgba(16,41,97,0.12);
  padding-top: 34px;
}
.gd-quote {
  text-align: center;
  padding: 10px 22px;
}
.gd-quote-text {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.55;
  color: #2b2b2b;
  margin: 0 0 12px;
  quotes: "“" "”" "‘" "’";
}
.gd-quote-author {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #102961;
}
/* Mobile (<=575px) */
@media (max-width: 575.98px) {
  .gd-trust-band { padding: 34px 0 40px; }
  .gd-trust-title { font-size: 24px; }
  .gd-trust-pillar { padding: 12px 8px; }
  .gd-quote { padding: 12px 8px; }
}


/* ============================================================
   R2 FEEDBACK FIXES (Sep 8 2026, Chuck) — homepage visual pass
   Jeffrey R2 items 1-6. All staging-only. Items addressed:
   R2.2 divider overhang / R2.3 gray tail below Rita /
   R2.4 hero heading + sub sizes / R2.5 title-vs-video align /
   R2.6 caption-box fill to match slider bottom.
   (R2.1 trailing empty paragraphs removed from DB page-4 content;
    backed up in v54da_postmeta _r2_home_content_backup_20260908.)
   ============================================================ */

/* ---- R2.2 + R2.3: trust band inner container + divider overhang ----
   Root cause: .gd-trust-band sits in the 1296px content area but its
   inner bootstrap .container is 1320px wide, so .gd-trust-quotes row
   (negative row margins) poked ~24px past the band's right edge
   (1392 vs band 1368). Fix: make the inner container full-bleed within
   the band and kill the bootstrap row negative margins. */
.gd-trust-band .container {
  max-width: 100% !important;
  padding-left: 0;
  padding-right: 0;
}
.gd-trust-band .gd-trust-pillars,
.gd-trust-band .gd-trust-quotes {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* R2.3: tighten the empty gray tail below the last testimonial.
   Band padding-bottom 54px -> 24px (Rita/Manuel row bottom 2060 ->
   band bottom was 2114; now 2084, ~24px under the quotes). */
.gd-trust-band {
  padding: 46px 0 24px;
}

/* ---- R2.4: hero scrolling-slide heading font ----
   Jeffrey: match uppercase heading on the scrolling photos to the
   SPECIALS/FINANCING H4 size (38.4px), and bump the lowercase
   subtitle below +2 sizes (16px -> ~20px). */
.hero-slider-desktop .slide-heading {
  font-size: 38px !important;
}
.hero-slider-desktop .slide-overlay p {
  font-size: 20px !important;
  line-height: 1.4 !important;
}

/* ---- R2.5/R3.2: align "Gutter Guards from GutterDome" title with the
   WATCH OUR VIDEO box top. Video h2.brandBox top edge ~y923; intro H1
   default 21px top margin dropped it ~11px low. margin-top pulled to
   ~6px so the title reads level with (not a hair below) the box top.
   Scope to the homeContentTop intro only. */
#homeContentTop .col-md-6:last-child h1,
#homeContentTop h1 {
  margin-top: 8px !important;
}


/* ---- R3.3 CORRECTION (Jeffrey, Sep 8): REVERT the R2.6 box-grow. ---
   R2.6 wrongly enlarged SPECIALS/FINANCING to fill the column. Correct
   intent: keep the SPECIALS (252) + FINANCING (250) boxes at their
   natural size (FINANCING bottom y612) and instead SHRINK the rotating
   hero slider so its bottom sits inline with the FINANCING box bottom.
   Slider height 600px -> 517px (top 95 + 517 = bottom 612 = FINANCING
   bottom). Slider top edge is unchanged (still 95), so only the bottom
   moves up; caption boxes untouched. */
.hero-slider-desktop,
.hero-slider-desktop .swiper-wrapper,
.hero-slider-desktop .swiper-slide {
  height: 517px !important;
}

/* ============================================================
   R3 FEEDBACK FIXES (Sep 8 2026, Chuck) — homepage visual pass
   R3.1 footer gallery/testimonials equal height (Jeffrey: shrink
   gallery). R3.2 title nudge (above). R3.3 slider shrink (above).
   ============================================================ */

/* ---- R3.1 (=R1.7): make the footer GALLERY box the same height as
   the TESTIMONIALS box. The gallery image was ~700px (L_swiper 800px
   incl caption overlay) while the testimonials quote box is ~476px,
   leaving ~377px empty below the testimonial in the shared sitewide
   footer band. Jeffrey chose: SHRINK the gallery. Target: gallery
   swiper+image height 476px so its bottom (y3549) aligns with the
   testimonials box bottom (y3549). Applies to the shared band on all
   pages (footer.php). Caption overlays image bottom (absolute). */
.footerGallery .gallery-swiper,
.footerGallery .gallery-swiper .swiper-slide {
  height: 476px !important;
}
.footerGallery .gallery-swiper .swiper-slide img {
  height: 476px !important;
}
.footerGallery .gallery-swiper .slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}


/* ============================================================
   GUTTERDOME #6 (Sep 8 2026, Jeffrey punchlist): flush static
   photo header with SPECIALS/FINANCING CTA boxes top+bottom.
   Photo & CTA column both span 112->462; SPECIALS (.cta1) had a
   15px top margin making the photo top stick 15px higher than the
   boxes. Fix: drop cta1's top margin so it starts flush at the
   photo top, and grow both boxes to 170px so FINANCING (.cta2)
   still ends exactly at the photo bottom (462). Staging-only.
   ============================================================ */
#cta-internal .cta1 {
    margin-top: 0 !important;
    height: 170px !important;
}
#cta-internal .cta2 {
    height: 170px !important;
    margin-top: 10px !important;
}


/* ============================================================
   BLOG/CAREERS TITLE LEVEL (Sep 8 2026, Jeffrey): on Blog and
   Careers the page title renders in a bare .page-header at the
   top of the content column (~y636), while internal pages nest
   their title inside .entry-content which carries a top margin
   (~y660). Push the blog/careers .page-header down 24px so the
   title sits at the same height as internal-page titles.
   Staging-only.
   ============================================================ */
.blog .page-header,
.post-type-archive-careers .page-header {
    margin-top: 0 !important;
    padding-top: 20px !important;
}


/* ============================================================
   CONTACT/DEALER VIDEO PAIR (Sep 8 2026, Jeffrey final edits):
   two videos side by side, each with its own WATCH OUR VIDEO
   brandBox header, minimal gap between. About unchanged.
   ============================================================ */
.gd-video-pair .col-md-6:first-child { padding-right: 5px !important; }
.gd-video-pair .col-md-6:last-child  { padding-left:  5px !important; }
.gd-video-pair .gd-inner-video { margin-top: 0; }

/* ============================================================
   MOBILE SPACING / CENTER (Sep 9 2026, Jeffrey punchlist).
   #2/#3 Contact + Dealer: the two-up video pair stacks on mobile
   (<768). The desktop 5px center-seam gutter rules above shove
   each stacked card's video slightly off-center. Restore symmetric
   12px gutters on mobile and add a vertical gap between the two
   stacked WATCH OUR VIDEO sections (animated-logo reel -> next
   WATCH header). About unchanged (single video).
   #4 Home: GET A PRICE band (mobile-getaprice) vs the VIEW OUR
   FINANCING band (finance #cta-internal.col-sm-8) — pad the
   finance container down so a small gap shows between them.
   Staging-only.
   ============================================================ */
@media (max-width: 767.98px){
  .gd-video-pair > .col-md-6:first-child { padding-right: 12px !important; }
  .gd-video-pair > .col-md-6:last-child  { padding-left:  12px !important; margin-top: 22px; }
}
@media (max-width: 575.98px){
  body.home #page > div.container:has(> #cta-internal.col-sm-8) { padding-top: 16px !important; }
}
/* ============================================================
   Get-a-Price (page 277) — mirrors Contact Us (315) design
   (style.css .page-id-315 block re-scoped to .page-id-277). R2 2026-09-09.
   Staging-only. NOTE: sidebar/width + cta-form/sticky suppression REMOVED so
   277 uses the same col-sm-9 width + keeps its forms exactly like Contact.
   ============================================================ */

  /* ── Hero ── */
  :is(.page-id-277,.gd-quote-page) .hero {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
    color: var(--white);
    padding: var(--space-3xl) var(--space-lg);
    text-align: center;
    position: relative;
    overflow: hidden;
  }
  :is(.page-id-277,.gd-quote-page) .hero::after {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(200,150,62,0.10) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
  }
  :is(.page-id-277,.gd-quote-page) .hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
  :is(.page-id-277,.gd-quote-page) .hero-badge {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 100px;
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-lg);
    backdrop-filter: blur(4px);
  }
  :is(.page-id-277,.gd-quote-page) .hero-badge .stars { color: var(--star); letter-spacing: 2px; }
  :is(.page-id-277,.gd-quote-page) .hero h1 {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-md);
  }
  :is(.page-id-277,.gd-quote-page) .hero h1 span { color: var(--gold-light); }
  :is(.page-id-277,.gd-quote-page) .hero p {
    font-size: 1.125rem;
    color: rgba(255,255,255,0.75);
    max-width: 540px;
    margin: 0 auto var(--space-lg);
    line-height: 1.6;
  }
  :is(.page-id-277,.gd-quote-page) .hero-phone {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 1.25rem; font-weight: 600;
    color: var(--white);
    text-decoration: none;
    padding: 10px 24px;
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    transition: all 0.2s;
  }
  :is(.page-id-277,.gd-quote-page) .hero-phone:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.35); }
  :is(.page-id-277,.gd-quote-page) .hero-phone svg { width: 20px; height: 20px; opacity: 0.8; }

  /* ── Main Layout ── */
  :is(.page-id-277,.gd-quote-page) .page-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-lg);
  }
  :is(.page-id-277,.gd-quote-page) .two-col {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-2xl);
    align-items: start;
  }

  /* ── Form Card ── */
  :is(.page-id-277,.gd-quote-page) .form-card {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elevated);
    overflow: hidden;
  }
  :is(.page-id-277,.gd-quote-page) .form-card-header {
    background: var(--navy);
    color: var(--white);
    padding: var(--space-xl);
  }
  :is(.page-id-277,.gd-quote-page) .form-card-header h2 {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 4px;
  }
  :is(.page-id-277,.gd-quote-page) .form-card-header .subtitle {
    font-size: 0.9375rem;
    color: rgba(255,255,255,0.70);
  }
  :is(.page-id-277,.gd-quote-page) .wufoo-wrapper {
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--white);
  }
  :is(.page-id-277,.gd-quote-page) .wufoo-wrapper iframe {
    width: 100%;
    min-height: 520px;
    border: 0;
    display: block;
  }
  :is(.page-id-277,.gd-quote-page) .form-footer-text {
    margin-top: var(--space-md);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--gray-400);
    display: flex; align-items: center; justify-content: center; gap: 4px;
  }
  :is(.page-id-277,.gd-quote-page) .form-footer-text svg { width: 14px; height: 14px; }

  /* ── Trust Panel ── */
  :is(.page-id-277,.gd-quote-page) .trust-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    position: sticky;
    top: var(--space-xl);
  }
  :is(.page-id-277,.gd-quote-page) .trust-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-50);
    transition: box-shadow 0.2s;
  }
  :is(.page-id-277,.gd-quote-page) .trust-card:hover { box-shadow: var(--shadow-card-hover); }
  :is(.page-id-277,.gd-quote-page) .trust-card-icon {
    width: 44px; height: 44px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: var(--space-md);
    font-size: 1.25rem;
  }
  :is(.page-id-277,.gd-quote-page) .trust-card-icon.navy { background: rgba(16,41,97,0.08); color: var(--navy); }
  :is(.page-id-277,.gd-quote-page) .trust-card-icon.gold { background: rgba(200,150,62,0.12); color: var(--gold); }
  :is(.page-id-277,.gd-quote-page) .trust-card-icon.green { background: rgba(18,183,106,0.10); color: var(--success); }
  :is(.page-id-277,.gd-quote-page) .trust-card h3 {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
  }
  :is(.page-id-277,.gd-quote-page) .trust-card p {
    font-size: 0.875rem;
    color: var(--gray-600);
    line-height: 1.55;
  }

  /* Testimonials Swiper */
  :is(.page-id-277,.gd-quote-page) .testimonials-swiper {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 0;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-50);
    overflow: hidden;
  }
  :is(.page-id-277,.gd-quote-page) .testimonials-swiper .swiper-wrapper { align-items: stretch; }
  :is(.page-id-277,.gd-quote-page) .testimonials-swiper .testimonial-card {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--white);
    border-radius: 0;
    padding: var(--space-lg);
    box-shadow: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  :is(.page-id-277,.gd-quote-page) .testimonials-swiper .swiper-slide { height: auto; }
  :is(.page-id-277,.gd-quote-page) .testimonials-swiper .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: var(--space-sm);
    text-align: center;
    padding-bottom: var(--space-sm);
  }
  :is(.page-id-277,.gd-quote-page) .testimonials-swiper .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: var(--gray-300);
    opacity: 1;
  }
  :is(.page-id-277,.gd-quote-page) .testimonials-swiper .swiper-pagination-bullet-active {
    background: var(--navy);
  }
  :is(.page-id-277,.gd-quote-page) .bbb-badge {
    width: 56px; height: 56px;
    background: #003DA5;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: white;
    font-weight: 800;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1.15;
    flex-shrink: 0;
    letter-spacing: -0.02em;
  }
  :is(.page-id-277,.gd-quote-page) .bbb-info h4 {
    font-size: 0.9375rem; font-weight: 700;
    color: var(--gray-900);
  }
  :is(.page-id-277,.gd-quote-page) .bbb-info .rating {
    display: flex; align-items: center; gap: 6px;
    margin: 2px 0;
  }
  :is(.page-id-277,.gd-quote-page) .bbb-info .rating .stars { color: var(--star); letter-spacing: 1px; font-size: 0.875rem; }
  :is(.page-id-277,.gd-quote-page) .bbb-info .rating .label { font-size: 0.8125rem; color: var(--gray-600); font-weight: 500; }
  :is(.page-id-277,.gd-quote-page) .bbb-info .accredited {
    font-size: 0.75rem; color: var(--success); font-weight: 600;
    display: flex; align-items: center; gap: 4px;
  }

  /* Testimonial */
  :is(.page-id-277,.gd-quote-page) .testimonial-card {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
    position: relative;
    overflow: visible;
  }
  :is(.page-id-277,.gd-quote-page) .testimonial-card::before {
    content: '"';
    position: absolute;
    top: -10px; right: 16px;
    font-family: 'DM Sans', serif;
    font-size: 6rem;
    color: rgba(255,255,255,0.06);
    line-height: 1;
    pointer-events: none;
  }
  :is(.page-id-277,.gd-quote-page) .testimonial-card p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    font-style: italic;
    position: relative;
    z-index: 1;
  }
  :is(.page-id-277,.gd-quote-page) .testimonial-card .author {
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: rgba(255,255,255,0.55);
    font-style: normal;
    font-weight: 500;
  }
  :is(.page-id-277,.gd-quote-page) .testimonial-card .author strong { color: var(--gold-light); font-weight: 600; }

  /* ── Bottom Trust Bar ── */
  :is(.page-id-277,.gd-quote-page) .trust-bar {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-2xl);
  }
  :is(.page-id-277,.gd-quote-page) .trust-bar-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }
  :is(.page-id-277,.gd-quote-page) .trust-pill {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: 100px;
    padding: var(--space-md) var(--space-xl);
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--gray-800);
    display: flex; align-items: center; justify-content: center; gap: 8px;
  }
  :is(.page-id-277,.gd-quote-page) .trust-pill svg { width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }

  /* ── Responsive ── */
  @media (max-width: 900px) {
    :is(.page-id-277,.gd-quote-page) .two-col {
      grid-template-columns: 1fr;
      gap: var(--space-lg);
    }
    :is(.page-id-277,.gd-quote-page) .trust-panel {
      position: static;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-sm);
    }
    :is(.page-id-277,.gd-quote-page) .trust-bar-inner {
      grid-template-columns: 1fr;
    }
    :is(.page-id-277,.gd-quote-page) .hero { padding: var(--space-2xl) var(--space-lg); }
  }
  @media (max-width: 540px) {
    :is(.page-id-277,.gd-quote-page) .page-section { padding: var(--space-lg) var(--space-md); }
    :is(.page-id-277,.gd-quote-page) .two-col { gap: var(--space-md); }
    :is(.page-id-277,.gd-quote-page) .trust-panel { grid-template-columns: 1fr; }
    :is(.page-id-277,.gd-quote-page) .form-card-header { padding: var(--space-lg); }
    :is(.page-id-277,.gd-quote-page) .wufoo-wrapper iframe { min-height: 560px; }
    :is(.page-id-277,.gd-quote-page) .hero h1 { font-size: 1.75rem; }
    :is(.page-id-277,.gd-quote-page) .hero p { font-size: 1rem; }
  }

  /* ── Print ── */
  @media print {
    
    :is(.page-id-277,.gd-quote-page) .hero { background: var(--navy) !important; -webkit-print-color-adjust: exact; }
  }


/* Phone icon via CSS — avoids WordPress SVG stripping */
:is(.page-id-277,.gd-quote-page) .hero-phone::before {
  content: '📞';
  font-size: 1.1em;
  margin-right: 8px;
}
/* R2: money-page hero H1 must be readable white (global bare-h1 navy was
   washing it out on the navy band); keep the gold <span> highlight. */
:is(.page-id-277,.gd-quote-page) .hero h1{color:#fff!important}
:is(.page-id-315,.gd-quote-page) .hero h1{color:#fff!important}

/* ── 2026-09-10 · CHUCK-FIXES · CTA quick-form overflow 992–1024px ─────────────
   Sitewide +31–35px horizontal page overflow (every interior page): the
   quick-form SUBMIT (button.btn.btn-primary) measures 261px but sits in a
   col-md-15 slot inside .d-none.d-lg-block > #cta-form, so it overruns its
   column and pushes the row past the viewport at 992–1024px.
   Constrain the button to its own column in that band only — >=1200px already
   fits and is left untouched. Verified post-fix: scrollWidth == innerWidth
   at 992 / 1000 / 1024. */
@media (min-width:992px) and (max-width:1199.98px){
  #cta-form .btn.btn-primary{width:100%!important;max-width:100%!important;min-width:0!important;box-sizing:border-box}
}

/* ── 2026-09-14 · CHUCK-FIXES · WCAG AA contrast on gold CTAs (Jeffrey-approved) ──
   White label on brand gold #C8963E measures 2.66:1 — fails WCAG 2.1 AA for
   normal text (4.5:1) AND for large text (3:1). Navy #102961 on the same gold
   measures 5.22:1 (4.50:1 on the darkened hover gold). TEXT COLOUR ONLY — every
   gold background, size, padding and radius is unchanged; the gold stays as approved.
   Gold surfaces carrying white text on staging:
     .btn-primary            — sticky form, quick-price form, brochure form,
                               hero LEARN MORE, hero + dealer CTAs, mobile band
     .mobile-getaprice .btn  — mobile "Get a Free Quote" bar
     .gallery-cta a          — "See Full Gallery →" (sitewide footer gallery band)
     .gd-recorder .gd-r-btn-submit — Share Your Story recorder submit
   Hover gold nudged #B88735 / #B8872E → #B68C39: the old hover golds scored only
   4.34 / 4.33 with navy (still failing on hover). #B68C39 = 4.50:1. ~4% darker. */
.btn-primary, .btn-gold,
.btn-primary:visited, .btn-gold:visited,
.btn-primary:hover, .btn-gold:hover,
.btn-primary:focus, .btn-gold:focus,
.btn-primary:active, .btn-gold:active,
.mobile-getaprice .btn, .mobile-getaprice .btn:hover,
.gallery-cta a, .gallery-cta a:hover,
.gd-recorder .gd-r-btn-submit, .gd-recorder .gd-r-btn-submit:hover {
  color: #102961 !important;
}
.btn-primary:hover, .btn-gold:hover {
  background-color: #B68C39 !important;
  border-color: #B68C39 !important;
}
.gallery-cta a:hover {
  background: #B68C39 !important;
}

/* [bandaid removed 2026-09-15 for the necessity test] */

/* ── RESTORED 2026-09-15 (chuck-fixes) — this block was removed BY ACCIDENT during the
   #33 "bandaid removed" edit: the deleted range spanned the bandaid AND this block.
   Nothing about the Q4/Q2 work called for removing it. Caught during the staging->prod
   push audit — without it, /about-us/ "Explore Our Products" and /testimonials/
   "Share Your Story" revert to white-on-gold = 2.66:1 (WCAG AA FAIL), undoing Q2.
   Do not delete during future cleanups: it is load-bearing, not a bandaid. */
/* Content-embedded gold CTAs (inline-styled in post_content, so no theme class to hook):
   page 375 "Explore Our Products →", page 313 "Share Your Story" badge + button.
   A stylesheet !important beats an inline NON-important declaration, so one rule covers
   them — and any future paste of the same gold-button pattern. Gold bg + white text only.
   2026-09-17: this selector keys on the inline style TEXT, so it also caught
   .gd-warranty-callout on /products/gutter-guard/ (border-left #C8963E + color:#fff on a
   NAVY gradient) and forced navy-on-navy — an unreadable box. Excluded explicitly; that
   callout keeps white text and its gold trophy icon. If you add another dark-background
   element with a #C8963E accent, exclude it here too. */
[style*="#C8963E" i][style*="color:#fff" i]:not(.gd-warranty-callout),
[style*="#C8963E" i][style*="color: #fff" i]:not(.gd-warranty-callout) {
  color: #102961 !important;
}

/* ── 2026-09-15 · CHUCK-FIXES · COMPANY BLOG REDESIGN
   R3 #6: every grid photo must show the baked-in GutterDome logo. The logo sits
   in a CORNER of each All Company source, and WHICH corner varies per file
   (verified: top-left on some, bottom-left on others). So a 16:9 crop either
   loses it or needs per-file knowledge. The sources are natively 800x600, so the
   image slots are 4:3 and the full frame is shown — object-fit:cover on a 16:9
   slot would crop top+bottom and cut the badge off again. Do not "tidy" these
   back to 16/9 without re-checking the logos. ─────────────────────────
   /blog/ was dumping 10 full article bodies inline in a col-md-9 column.
   Now: featured post + 3-up card grid, full width, paginated. Driven by the real
   WP loop (home.php + partials/content-blog-{feature,card}.php) so a new post
   appears automatically. Everything is namespaced .gd-blog* — no other page is
   affected. Placeholder tiles show for posts with no featured image. */
.gd-blog-wrap { /* do NOT set max-width here: the theme's .container already sizes itself
   and overriding it caused 27px of horizontal overflow at 1440px (measured 2026-09-15). */ }
.gd-blog-main { width: 100%; }
.gd-blog { margin: 6px 0 0; }

/* featured / newest post
   2026-09-15 (R1 #7): align the text column to the TOP of the photo — was
   `center`, which dropped "Latest Article" below the image top edge. */
.gd-blog-feature { margin: 0 0 38px; }
.gd-blog-feature-link { display: grid; grid-template-columns: 1.12fr 1fr; gap: 28px;
  align-items: start; text-decoration: none; }
.gd-blog-feature:hover .gd-blog-feature-title { text-decoration: underline; }
.gd-blog-feature-media, .gd-blog-thumb { display: block; overflow: hidden;
  border-radius: 6px; background: #eef1f5; }
.gd-blog-feature-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.gd-blog-kicker { display: inline-block; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: #C8963E; font-weight: 700; margin: 0 0 8px; }

/* NOTE (2026-09-22): the design-lane deliverables that used to live at the END of this file
   were moved VERBATIM to css/auto-fixes-design.css, which loads AFTER this file. Blocks that
   went across: R2b/R2c/R2d, the Sep-14 Jeffrey punchlist header + Q4, R4 design #1/#2,
   R2 #5 + R5 blog cards, the DMA hub/benefit-card spacing, and the W16/W17 ruling series.
   This file keeps the operational/structural layer (BS5-CONV, overflow, WCAG, hero geometry,
   trust band, the page-277 design system). Do not move a block back without re-running
   scripts/css-split-fingerprint.py — enqueue order is load-bearing. */

/* ── R3 (2026-09-23) — items 12a + 12b. Appended at END OF FILE on purpose: the theme's own
   `.entry-content h1 { color: rgb(16,41,97) }` above is also `!important`, so with equal specificity the
   LAST rule wins. Placing this earlier made it dead on arrival. */
.entry-content .sys-hero h1, .sys-hero h1 { color: #fff !important; font-weight: 700 !important; }
/* The CTA centres itself, so it does not depend on what the content formatter does to a wrapper. */
.gd-cta-card a, .gd-cta-card > p > a, .gd-cta-card p a { display: block !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; text-align: center; }
/* R4 item 14 (2026-09-23) — /testimonials/ state grid. `repeat(4,1fr)` cannot shrink a track below its
   longest word, so on a phone the four tracks (354px) outgrew the container (315px) and the tail of
   "Pennsylvania" fell off the screen. Two columns on phones; desktop stays four. */
.gd-state-grid { column-count: 4; column-gap: 24px; }
.gd-state-grid > div { break-inside: avoid; }
/* Multi-column, NOT a grid: a grid fills row-first, so reading DOWN each column is impossible without
   knowing the row count. `column-count` fills column-first by definition — which is the order asked for. */
@media (max-width: 480px) { .gd-state-grid { column-count: 2; } }

/* ══════════════════════════════════════════════════════════════════════════════════════════
   GALLERY REBUILD — /gallery/ (page 394), added 2026-09-23.
   The page previously carried its grid rule in an inline `style=` attribute on a box that
   computed to `display:block`, so `grid-template-columns: repeat(auto-fit, …)` was inert and the
   four photos rendered as full-width 280px strips keeping 24–42 % of each frame. The rule now
   lives here, where a grid rule belongs.
   Tiles are 4:3 on purpose: every source photo in this set is exactly 800x600, so 4:3 crops
   nothing — and the GutterDome logo is burned into a corner of every one of them, so any crop
   eats it. `auto-fill` (not `auto-fit`) keeps tile width identical across every section, which
   keeps the chosen `srcset` candidate stable too.
   ══════════════════════════════════════════════════════════════════════════════════════════ */
.gd-gal-lede { max-width: 62ch; margin: 0 0 24px; }

/* Category anchor bar — sticky so the reader can jump roof types without scrolling back up. */
.gd-gal-anchors { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 10px 0;
  position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid rgba(16,41,97,.10); }
.gd-gal-anchors a { display: inline-block; padding: 6px 12px; border: 1px solid rgba(16,41,97,.25);
  border-radius: 999px; font-size: 14px; line-height: 1.4; text-decoration: none; color: #102961; }
.gd-gal-anchors a:hover, .gd-gal-anchors a:focus { border-color: #102961; background: rgba(16,41,97,.05); }
.gd-gal-anchors a:focus-visible { outline: 3px solid #C8963E; outline-offset: 2px; }
.gd-gal-count { opacity: .65; font-size: 12px; }

.gd-gal-section { margin: 0 0 48px; scroll-margin-top: 84px; }
.gd-gal-section h2 { margin: 0 0 8px; }
.gd-gal-section > p { max-width: 62ch; margin: 0 0 20px; }
.gd-gal-status { font-size: 13px; }

/* 2 / 3 / 4 columns. `minmax(0,1fr)` so a long word can never outgrow its track. */
.gd-gal-grid { display: grid; gap: 12px; margin: 0; padding: 0;
  grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 768px)  { .gd-gal-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1200px) { .gd-gal-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.gd-gal-tile { margin: 0; }
.gd-gal-tile a { display: block; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.gd-gal-tile img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gd-gal-tile a:focus-visible { outline: 3px solid #C8963E; outline-offset: 2px; }

/* "Show more" hides EXTRA tiles in CSS, never in the DOM — every photo stays crawlable. */
.gd-gal-grid > figure[data-hidden] { display: none; }
.gd-gal-more { display: inline-block; margin: 16px 0 0; padding: 10px 20px; font-weight: 700;
  font-size: 15px; background: #102961; color: #fff; border: 0; border-radius: 4px; cursor: pointer; }
.gd-gal-more:hover, .gd-gal-more:focus { background: #0b1a36; }
.gd-gal-more:focus-visible { outline: 3px solid #C8963E; outline-offset: 2px; }

/* Closing CTA. Gold fills take NAVY text (5.22:1); white on this gold is 2.66:1 and fails AA. */
.gd-gal-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; }
.gd-gal-btn { display: inline-block; padding: 12px 22px; border-radius: 4px; font-weight: 700;
  text-decoration: none; background: #C8963E; color: #102961; }
.gd-gal-btn-primary { background: #102961; color: #fff; }
.gd-gal-btn:hover, .gd-gal-btn:focus { filter: brightness(.94); }
.gd-gal-btn:focus-visible { outline: 3px solid #102961; outline-offset: 2px; }

/* Lightbox — one image at a time, populated on demand. No new library: the page already loads
   Swiper for the footer carousel, and a second slider instance for a single-image viewer would
   be weight for nothing. */
.gd-gal-lb { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; background: rgba(11,26,54,.96); }
.gd-gal-lb[hidden] { display: none; }
.gd-gal-lb-stage { display: flex; align-items: center; justify-content: center; }
.gd-gal-lb-stage img { max-width: min(900px, 92vw); max-height: 78vh; width: auto; height: auto;
  border-radius: 4px; background: #0b1a36; }
.gd-gal-lb-cap { color: #fff; max-width: 70ch; margin: 16px 0 0; text-align: center; font-size: 15px; }
.gd-gal-lb-close, .gd-gal-lb-prev, .gd-gal-lb-next { position: absolute; width: 48px; height: 48px;
  border: 0; border-radius: 50%; cursor: pointer; font-size: 28px; line-height: 1;
  background: rgba(255,255,255,.14); color: #fff; }
.gd-gal-lb-close { top: 16px; right: 16px; }
.gd-gal-lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gd-gal-lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.gd-gal-lb-close:hover, .gd-gal-lb-prev:hover, .gd-gal-lb-next:hover { background: rgba(255,255,255,.26); }
.gd-gal-lb-close:focus-visible, .gd-gal-lb-prev:focus-visible, .gd-gal-lb-next:focus-visible {
  outline: 3px solid #C8963E; outline-offset: 2px; }