/* HydroSeal — styles.css (FULL FILE)

   - Single, consistent Hero2 system (background via <img>)
   - Fixes desktop hero not showing (removed conflicting .hero2 blocks)
   - Cert stack is larger + isolated (won’t affect hero images)
   - Keeps dropdown nav + hamburger behavior
*/

:root{
  --navy:#0B2D4A;
  --blue:#0F6EA8;
  --teal:#28B6C8;

  --text:#0B1220;
  --muted:#334155;

  --bg:#ffffff;
  --line:#e5e7eb;

  --radius:18px;
  --shadow: 0 10px 30px rgba(17,24,39,.10);

  /* sticky header sizing (used to prevent overlap) */
  --sticky-offset: 116px;

  /* section header colors */
  --h2-blue:#2FA8CF;
  --h3-blue:#1B4E63;

  /* brand accent */
  --water-blue:#39BFEA;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Base elements */
a{color:inherit;text-decoration:none}
img,svg,video,canvas{max-width:100%;height:auto;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Inline content links only */
main p a,
main li a,
main .card p a,
main .card li a,
main .faq-item p a,
main .faq-item li a {
  color: var(--brand-link, #0f766e);
  text-decoration: none;
  font-weight: 600;
  transition: color .18s ease, opacity .18s ease;
}

main p a:hover,
main li a:hover,
main .card p a:hover,
main .card li a:hover,
main .faq-item p a:hover,
main .faq-item li a:hover,
main p a:focus-visible,
main li a:focus-visible,
main .card p a:focus-visible,
main .card li a:focus-visible,
main .faq-item p a:focus-visible,
main .faq-item li a:focus-visible {
  opacity: 0.9;
  color: var(--brand-link-hover, #0b5e59);
  text-decoration: none;
}

/* Shared badge/hero art treatment (warranty + care program) */
.badge-hero-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:260px;
  overflow:hidden;
}

.badge-hero-image{
  display:block;
  width:100%;
  height:auto;
  max-width:510px;
  max-height:260px;
  object-fit:contain;
  object-position:center;
  margin:0 auto;
}

@media (max-width:860px){
  .badge-hero-wrap{
    min-height:220px;
  }
}

/* Prevent anchor/content hiding behind sticky header */
main{scroll-margin-top:var(--sticky-offset)}
section{scroll-margin-top:var(--sticky-offset)}

/* Typography */
.header, .nav, .nav-menu, .nav-link, .dropdown a, .header-ctas .btn, .nav-mobile-ctas .btn{
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
h2{ color: var(--h2-blue); }
h3{ color: var(--h3-blue); }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.01em;
  transition:
    opacity .15s ease,
    transform .15s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease,
    color .15s ease;
  user-select:none;
}
@media (hover:hover) and (pointer:fine){
  .btn:hover{opacity:.92}
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  color:#fff;
  border: 1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(820px 220px at 18% 0%, rgba(57,191,234,.28), transparent 56%),
    radial-gradient(820px 220px at 88% 0%, rgba(15,110,168,.20), transparent 56%),
    linear-gradient(135deg, #39BFEA 0%, #0F6EA8 66%, #0B2D4A 120%);
  box-shadow: 0 10px 26px rgba(17,24,39,.12);
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn-primary::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0) 58%);
  opacity:.72;
}

.btn-primary::after{
  content:"";
  position:absolute;
  inset:-45% -35%;
  pointer-events:none;
  opacity:.42;
  background: linear-gradient(120deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 64%);
  transform: translateX(-22%) rotate(8deg);
}

.btn-ghost{border:1px solid var(--line);background:#fff;color:var(--text)}
.btn-wide{width:100%;text-align:center}

/* Warranty button — green by default */
.btn.btn-ghost[href="/warranty/"]{
  background: linear-gradient(180deg, #2fbe63 0%, #239a4f 100%);
  border-color: rgba(20, 90, 46, 0.42);
  color: #fff;
  font-weight: 900;
  box-shadow:
    0 10px 24px rgba(24, 92, 49, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

/* Slight lift on hover (optional, keeps it premium) */
.btn.btn-ghost[href="/warranty/"]:hover{
  background: linear-gradient(180deg, #34c96b 0%, #24954e 100%);
  box-shadow:
    0 14px 30px rgba(24, 92, 49, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.16);
}


/* Header Call button: override the global tel hover */
.header-ctas .btn.btn-ghost[href^="tel:"]{
  border: 0;
  background: transparent;
  box-shadow: none;
}

.header-ctas .btn.btn-ghost[href^="tel:"]:hover,
.header-ctas .btn.btn-ghost[href^="tel:"]:focus-visible{
  background: rgba(57,191,234,.22);
  border-color: transparent;
  color: var(--text);
  box-shadow: none;
  transform: none;
}

@media (max-width: 720px){
  h2.section-title{
    text-align: center;
  }
}



/* Pills / badges */
.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:#eef6ff;
  color:var(--navy);
  font-weight:900;
  font-size:12px;
}

/* Green badge */
.badge-green{
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color:#065f46;
  border:1px solid rgba(16,185,129,.35);
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
}

.card-bluegrad,
.card-greengrad,
.badge-green,
.why-pill,
.trust-item{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.card-bluegrad::before,
.card-greengrad::before,
.badge-green::before,
.why-pill::before,
.trust-item::before{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%);
  opacity:.55;
}

.card-bluegrad::after,
.card-greengrad::after,
.badge-green::after,
.why-pill::after,
.trust-item::after{
  content:"";
  position:absolute;
  inset:-45% -35%;
  pointer-events:none;
  opacity:.35;
  background: linear-gradient(120deg, rgba(255,255,255,0) 36%, rgba(255,255,255,.14) 50%, rgba(255,255,255,0) 64%);
  transform: translateX(-22%) rotate(8deg);
}

/* Sections / grids */
.section{padding:44px 0}
.grid{display:grid;gap:14px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){
  .grid-3,.grid-2{grid-template-columns:1fr}
}

/* Headings helpers */
.section-title{font-size:28px;margin:0;letter-spacing:-.02em}
.section-sub{color:var(--muted);margin:10px 0 0;max-width:820px}

/* About page cleanup utilities */
.u-mt-14{margin-top:14px}
.u-mt-16{margin-top:16px}
.about-copy-max{max-width:980px}
.about-card-title{margin:0 0 10px}
.about-card-title-tight{margin-top:6px}
.about-card-copy{margin:0}
.about-card-copy-top{margin-top:8px}
.about-card-stack{margin-top:10px}
.about-card-flat{box-shadow:none}
.about-cta-row,
.about-hero-cta-row{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.about-hero-cta-row{justify-content:center}
.about-hero-copy-wrap{
  transform: translateY(clamp(24px, 18vh, 220px));
  width:100%;
  display:flex;
  justify-content:center;
}
.about-hero-panel{
  width:min(920px, 100%);
  margin:0 auto;
  padding:18px 18px 16px;
  border-radius:18px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  text-align:center;
}
.about-hero-title{
  margin:0 auto;
  color:#fff;
  text-shadow:0 12px 34px rgba(0,0,0,.45);
  font-size:clamp(26px, 3.2vw, 50px);
  line-height:1.08;
}
.about-hero-tagline{
  margin:10px auto 0;
  color:rgba(255,255,255,.86);
  font-weight:700;
  text-shadow:0 10px 28px rgba(0,0,0,.35);
  max-width:70ch;
  line-height:1.35;
  font-size:13px;
  letter-spacing:.02em;
  opacity:.95;
}

/* About page: keep hero copy without image media */
.about-hero-noimage{
  min-height:auto;
  background:transparent;
  overflow:visible;
}
.about-hero-noimage .container{padding:20px 16px 8px}
.about-hero-noimage .about-hero-copy-wrap{transform:none}
.about-hero-noimage .about-hero-panel{
  background:transparent;
  border:0;
  padding:0;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.about-hero-noimage .about-hero-title{
  color:var(--ink);
  text-shadow:none;
}
.about-hero-noimage .about-hero-tagline{
  color:var(--muted);
  text-shadow:none;
}

/* Notice box */
.notice{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px;
  background:#f9fafb;
}

/* Small kicker */
.kicker{
  color:var(--teal);
  font-weight:1000;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}

.card-bluegrad{
  background: linear-gradient(135deg, #0f6ea8 0%, #39bfea 100%);
  color:#ffffff;
  border:none;
}
.card-bluegrad h3{ color:#fff; }
.card-bluegrad p,
.card-bluegrad li{ color:rgba(255,255,255,.95); }

/* Match the Trident cert card: light blue -> white */
.card.card-bluegrad.cert-copy{
  background: linear-gradient(135deg, rgba(57,191,234,.22) 0%, #ffffff 68%);
  border: 1px solid rgba(57,191,234,.28);
  box-shadow: var(--shadow);
  color: var(--text);
}

/* Keep text dark on the light gradient */
.card.card-bluegrad.cert-copy h3{ color: var(--navy); }
.card.card-bluegrad.cert-copy p,
.card.card-bluegrad.cert-copy li{ color: var(--muted); }

/* Kicker styling (same vibe) */
.card.card-bluegrad.cert-copy .kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(11,45,74,.10);
  border: 1px solid rgba(11,45,74,.12);
  color: var(--navy);
  font-weight:900;
  letter-spacing:.02em;
}

/* If you have badges inside, keep them readable */
.card.card-bluegrad.cert-copy .badge{
  border:1px solid rgba(57,191,234,.28);
  background: rgba(57,191,234,.10);
}

/* Make the 3 service cards equal height on desktop */
.grid.grid-3{
  align-items: stretch; /* each grid item stretches to same row height */
}

/* Make each service card fill that height */
.grid.grid-3 > a.card.service-card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Keep thumbnails uniform */
.grid.grid-3 > a.card.service-card .service-thumb{
  height: 210px; /* pick the height you want */
  flex: 0 0 auto;
}

/* Let the text area take remaining space (and keep bottoms aligned) */
.grid.grid-3 > a.card.service-card > div{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Optional: push the paragraph down for consistent spacing */
.grid.grid-3 > a.card.service-card > div p{
  margin-top: auto;
}

/* Bright light-blue hover for the Call button (tel:) */
.btn.btn-ghost[href^="tel:"]{
  border-color: rgba(255,255,255,.35);
}

/* Bright light-blue → white gradient hover for Call button */
.btn.btn-ghost[href^="tel:"]{
  border-color: rgba(255,255,255,.35);
}

@media (hover:hover) and (pointer:fine){
.btn.btn-ghost[href^="tel:"]:hover,
.btn.btn-ghost[href^="tel:"]:focus-visible{
  background: linear-gradient(
    180deg,
    #7FE8FF 0%,     /* bright light blue (top) */
    #E9FBFF 100%   /* near-white (bottom) */
  );
  border-color: #7FE8FF;
  color: #0B2D4A; /* HydroSeal navy */
  box-shadow: 0 0 0 1px rgba(127,232,255,.32);
}
}


/* Cards */
.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px;
  background:#fff;
  box-shadow:none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  will-change: transform;
}
.card h3{margin:0 0 6px;font-size:18px;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted)}
.card ul{color:var(--muted)}

/* Premium card hover + image zoom */
.card img{
  transition: transform .35s ease;
  will-change: transform;
  transform: scale(1);
}
.card:focus-within{
  outline: 3px solid rgba(40,182,200,.35);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce){
  .card,
  .card img{ transition:none !important; }
}

/* === CTA row buttons (used on service pages) === */
.driveway-cta-row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.driveway-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.01em;
  text-decoration:none;

  min-width:170px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 10px 26px rgba(17,24,39,.10);

  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  transform: translateZ(0);
  isolation:isolate;
}

/* faint, tight glow BEHIND */
.driveway-cta::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:16px;
  z-index:-1;
  opacity:0;
  filter: blur(6px);
  transform: scale(.98);
  transition: opacity .16s ease, transform .16s ease, filter .16s ease;
}

/* soft top highlight */
.driveway-cta::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

.driveway-cta:focus-visible{
  box-shadow: 0 14px 34px rgba(17,24,39,.14);
  filter: brightness(1.02);
}
@media (hover:hover) and (pointer:fine){
  .driveway-cta:hover{
    box-shadow: 0 14px 34px rgba(17,24,39,.14);
    filter: brightness(1.02);
  }
  .driveway-cta:hover::before{
    opacity:.35;
    transform: scale(1);
    filter: blur(7px);
  }
}

.driveway-cta:active{
  transform: scale(1.01) translateY(0);
  box-shadow: 0 10px 26px rgba(17,24,39,.12);
}

/* TRUST-BAR BLUE buttons */
.driveway-cta-blue{
  background: linear-gradient(135deg, #39BFEA, #0F6EA8);
  color:#fff;
}
.driveway-cta-blue::before{
  background: radial-gradient(circle at 40% 35%, rgba(57,191,234,.55), rgba(15,110,168,.10) 60%, rgba(15,110,168,0) 78%);
}

/* MIDDLE button: LIGHT BLUE gradient */
.driveway-cta-blue-light{
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(57,191,234,.22), transparent 55%),
    radial-gradient(900px 240px at 90% 0%, rgba(15,110,168,.14), transparent 55%),
    linear-gradient(180deg, rgba(57,191,234,.10), #ffffff 72%);
  border:1px solid rgba(15,110,168,.22);
  color: #0B2D4A;
  box-shadow: 0 10px 26px rgba(15,110,168,.10);
}
.driveway-cta-blue-light::before{
  background: radial-gradient(circle at 40% 35%, rgba(57,191,234,.35), rgba(15,110,168,.08) 60%, rgba(15,110,168,0) 78%);
}
.driveway-cta-blue-light::after{
  opacity:.35;
}

@media (max-width:520px){
  .driveway-cta{ width:100%; max-width:420px; }
}





/* ===== Gradient cards ===== */
.card-bluegrad{
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(57,191,234,.20), transparent 55%),
    radial-gradient(900px 260px at 90% 0%, rgba(15,110,168,.14), transparent 55%),
    linear-gradient(180deg, rgba(11,45,74,.06), #fff 55%);
  box-shadow: 0 14px 34px rgba(17,24,39,.10);
  position:relative;
  overflow:hidden;
}
.card-bluegrad > *{ position:relative; z-index:1; }

.card-greengrad{
  border-radius:22px;
  border:1px solid var(--line);
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(40,182,200,.22), transparent 55%),
    radial-gradient(900px 260px at 90% 0%, rgba(34,197,94,.16), transparent 55%),
    linear-gradient(180deg, rgba(40,182,200,.07), #fff 55%);
  box-shadow: 0 14px 34px rgba(17,24,39,.10);
  position:relative;
  overflow:hidden;
}
.card-greengrad > *{ position:relative; z-index:1; }

/* Keep include placeholders sized to avoid layout shift */
[data-include="/partials/header.html"]{
  min-height:130px;
  display:block;
}
@media (max-width:980px){
  [data-include="/partials/header.html"]{
    min-height:104px;
  }
}
[data-include="/partials/footer.html"]{
  min-height:260px;
  display:block;
}

/* Home-only include/widget space reservation to prevent first-paint shifts */
body.page-home [data-include="/partials/header.html"]{
  min-height:130px;
  display:block;
}
body.page-home [data-include="/partials/footer.html"]{
  min-height:260px;
  display:block;
}
body.page-home [data-include]{
  opacity:0;
  transition:opacity .18s ease;
}
body.page-home [data-include].is-loaded{
  opacity:1;
}
body.page-home .elfsight-app-8d93a5a4-3fe5-4e4e-a7d5-1856bb997b36{
  display:block;
}
body.page-home .elfsight-app-8d93a5a4-3fe5-4e4e-a7d5-1856bb997b36:empty{
  display:none;
}
body.page-home .home-hero-wrap{
  display:flex;
  flex-direction:column;
}
body.page-home .home-hero-wrap .hero2{ order:1; }
body.page-home .home-hero-wrap #trustbar-slot{ order:2; }

@media (max-width: 860px){
  .driveway-split .card h2,
  .driveway-split-rev .card h2{
    text-align:center;
  }
}

/* ============================================================
   HERO2 (BACKGROUND VIA <img>) — SINGLE SOURCE OF TRUTH
   ============================================================ */
.hero2{
  position:relative;
  min-height: clamp(560px, 78vh, 920px);
  overflow:hidden;
  background:#071d2f;
  display:flex;
  align-items:center;
}

.hero2 > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

/* wash overlay: use class OR aria-hidden div */
.hero2 .hero-wash,
.hero2 > div[aria-hidden="true"]{
  position:absolute;
  inset:0;
  z-index:1;
  background: rgba(0,0,0,.06);
}

.hero2 .container{
  position:relative;
  z-index:2;
  padding:56px 16px;
}

.hero2 .hero-panel{
  text-align:center;
  margin:0 auto;
}

@media (max-width:980px){
  :root{ --sticky-offset: 128px; }
}

/* Services thumbnails */
.service-thumb{
  width:100%;
  height:210px;
  object-fit:cover;
  border-radius:14px;
  display:block;
}
.card.service-card{ padding:16px; overflow:hidden; }
@media (max-width:900px){
  .service-thumb{ height:220px; }
}
.card.service-card .service-thumb{
  display:block !important;
  width:100% !important;
  height:210px !important;
  object-fit:cover !important;
  object-position:center !important;
}
@media (max-width:900px){
  .card.service-card .service-thumb{
    height:220px !important;
  }
}

/* Certifications hero */
.cert-hero{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:14px;
  align-items:stretch;
  margin-top:16px;
}
.cert-copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
}

/* Cert image panel (base) */
.cert-img{
  border-radius:22px;
  border:1px solid var(--line);
  background:#ffffff !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;

  box-shadow:none !important;          /* kill the "gradient" look */
}


/* IMPORTANT: do NOT set width:91% for all images in .cert-img */
.cert-img img{
  height:auto;
  object-fit:contain;
  display:block;
  background:#ffffff;
  filter:none !important;
}

/* CERT STACK (only affects the 3 badge images) */
.cert-img.cert-stack{
  overflow:hidden;            /* was visible */
  padding:28px 18px;
  gap:16px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}


.cert-img.cert-stack img.cert-badge{
  width:min(340px, 92%);      /* bigger than before */
  max-height:185px;
  filter: drop-shadow(0 0px 0px rgba(0,0,0,.18));
}

.cert-img.cert-stack img.cert-badge.cert-badge--main{
  width:min(520px, 96%);      /* big middle badge */
  max-height:285px;
}

/* small positional bias: top slightly higher, bottom slightly lower */
.cert-img.cert-stack img.cert-badge:first-child{ margin-top:-8px; }
.cert-img.cert-stack img.cert-badge:last-child{ margin-bottom:-8px; }

@media (max-width: 900px){
  .cert-hero{ grid-template-columns: 1fr; }
}

/* Persistent shell slot for trustbar */
#trustbar-slot{
  display:block;
  position:relative;
  z-index:2;
}

/* Global trust bar */
.trustbar{
  width:100%;
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:3;
}
.trustbar .container{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:14px;
  align-items:stretch;
  padding:16px;
}
.trust-item{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:14px 12px;
  border-radius:16px;
  font-weight:1000;
  font-size:16px;
  line-height:1.2;
  letter-spacing:.01em;
  color:var(--navy);
  background: linear-gradient(180deg,
    rgba(57,191,234,.40) 0%,
    rgba(175,238,255,.70) 55%,
    rgba(245,253,255,.98) 100%
  );
  border:1px solid rgba(57,191,234,.38);
  box-shadow: 0 10px 22px rgba(17,24,39,.12);
}

@media (max-width: 900px){
  .trustbar .container{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .trustbar .container{ grid-template-columns: 1fr; }
  .trust-item{ font-size:15px; }
}

/* Service-page media helpers */
.media-box{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #f3f4f6;
}
.media-box > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-h-md{ height: 360px; }
@media (max-width: 900px){
  .media-h-md{ height: 240px; }
  .ba-img{ height: 220px !important; }
}

/* Duval County child page shared layout + FAQ styles */
body.duval-child-page .service-split,
body.duval-child-page .service-split-rev,
body.page-clay-county .service-split,
body.page-clay-county .service-split-rev{
  display:grid;
  gap:18px;
  align-items:stretch;
}
body.duval-child-page .service-split,
body.page-clay-county .service-split{ grid-template-columns:1.1fr .9fr; }
body.duval-child-page .service-split-rev,
body.page-clay-county .service-split-rev{ grid-template-columns:.9fr 1.1fr; }

@media (min-width:861px){
  body.duval-child-page .service-split > .card,
  body.duval-child-page .service-split-rev > .card,
  body.duval-child-page .service-split > .media-box,
  body.duval-child-page .service-split-rev > .media-box,
  body.page-clay-county .service-split > .card,
  body.page-clay-county .service-split-rev > .card,
  body.page-clay-county .service-split > .media-box,
  body.page-clay-county .service-split-rev > .media-box{
    height:100%;
  }

  body.duval-child-page .service-split > .card,
  body.duval-child-page .service-split-rev > .card,
  body.page-clay-county .service-split > .card,
  body.page-clay-county .service-split-rev > .card{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  body.duval-child-page .service-split .media-h-md,
  body.duval-child-page .service-split-rev .media-h-md,
  body.duval-child-page .service-split-equal .media-h-md,
  body.page-clay-county .service-split .media-h-md,
  body.page-clay-county .service-split-rev .media-h-md,
  body.page-clay-county .service-split-equal .media-h-md{
    height:100%;
    min-height:360px;
  }

  body.duval-child-page .service-split-equal > .card,
  body.duval-child-page .service-split-equal > .media-box,
  body.page-clay-county .service-split-equal > .card,
  body.page-clay-county .service-split-equal > .media-box{
    height:100%;
  }
}

body.duval-child-page .service-reviews-section,
body.page-clay-county .service-reviews-section{ margin-top:30px; }

@media (max-width:860px){
  body.duval-child-page .service-split,
  body.duval-child-page .service-split-rev,
  body.page-clay-county .service-split,
  body.page-clay-county .service-split-rev{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  body.duval-child-page .service-split-rev .card,
  body.page-clay-county .service-split-rev .card{ order:1; }
  body.duval-child-page .service-split-rev .media-box,
  body.page-clay-county .service-split-rev .media-box{ order:2; }
}

@media (max-width:520px){
  body.duval-child-page .media-h-md,
  body.page-clay-county .media-h-md{ height:240px; }
}

body.duval-child-page .service-cta-row{
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

body.duval-child-page .service-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  font-weight:900;
  letter-spacing:.01em;
  text-decoration:none;
  min-width:170px;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 26px rgba(17,24,39,.10);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  transform:translateZ(0);
  isolation:isolate;
}
body.duval-child-page .service-cta::before{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:16px;
  z-index:-1;
  opacity:0;
  filter:blur(6px);
  transform:scale(.98);
  transition:opacity .16s ease, transform .16s ease, filter .16s ease;
}
body.duval-child-page .service-cta::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:13px;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 55%);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}
@media (hover:hover) and (pointer:fine){
  body.duval-child-page .service-cta:hover{
    transform:scale(1.03) translateY(-1px);
    box-shadow:0 14px 34px rgba(17,24,39,.14);
    filter:brightness(1.02);
  }
  body.duval-child-page .service-cta:hover::before{
    opacity:.35;
    transform:scale(1);
    filter:blur(7px);
  }
}
body.duval-child-page .service-cta:active{
  transform:scale(1.01) translateY(0);
  box-shadow:0 10px 26px rgba(17,24,39,.12);
}
body.duval-child-page .service-cta-blue{
  background:linear-gradient(180deg, #0f6ea8 0%, #0b5f94 100%);
  color:#fff;
}
body.duval-child-page .service-cta-blue::before{ background:rgba(57,191,234,.45); }
body.duval-child-page .service-cta-cyan{
  background:linear-gradient(180deg, #39bfea 0%, #1ea7d4 100%);
  color:#032437;
}
body.duval-child-page .service-cta-cyan::before{ background:rgba(15,110,168,.35); }

body.duval-child-page .local-content a:not(.btn){
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
body.duval-child-page .local-content a:not(.btn):hover,
body.duval-child-page .local-content a:not(.btn):focus-visible{
  color:#0b5f94;
  text-decoration-thickness:2px;
}

body.duval-child-page :is(#patio-faq, [data-accordion="single"]) details.faq-item{
  border:1px solid var(--line);
  background:#fff;
  border-radius:0;
  overflow:hidden;
}
body.duval-child-page :is(#patio-faq, [data-accordion="single"]) details.faq-item > summary{
  cursor:pointer;
  list-style:none;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
  user-select:none;
}
body.duval-child-page :is(#patio-faq, [data-accordion="single"]) summary::-webkit-details-marker{ display:none; }
body.duval-child-page :is(#patio-faq, [data-accordion="single"]) summary::after{
  content:"▾";
  font-weight:1000;
  color:var(--navy);
  transition:transform .18s ease;
}
body.duval-child-page :is(#patio-faq, [data-accordion="single"]) details[open] summary::after{ transform:rotate(180deg); }
body.duval-child-page :is(#patio-faq, [data-accordion="single"]) .faq-body{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 16px;
  transform:translateY(-6px);
  transition:max-height .28s ease, opacity .22s ease, transform .22s ease;
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(57,191,234,.22), transparent 55%),
    radial-gradient(900px 240px at 90% 0%, rgba(15,110,168,.14), transparent 55%),
    linear-gradient(180deg, rgba(57,191,234,.10), #f8fbff 70%);
  border-top:1px solid rgba(15,110,168,.25);
}
body.duval-child-page :is(#patio-faq, [data-accordion="single"]) details[open] .faq-body{
  max-height:900px;
  opacity:1;
  padding:16px;
  transform:none;
}

/* County pages: Hazard Split */
.hazard-split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:14px;
  align-items:stretch;
  margin-top:14px;
}
.hazard-split .hazard-copy{ height:100%; }
.hazard-split .hazard-copy h3{ margin:0 0 8px; }
.hazard-split .hazard-copy p{
  margin:0 0 14px;
  color: var(--muted);
  line-height:1.65;
}
.hazard-split .hazard-copy p:last-child{ margin-bottom:0; }
.hazard-hero{
  border-radius: var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  background:#f3f4f6;
  height:100%;
  min-height: 360px;
  position:relative;
}
.hazard-hero img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hazard-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.04);
  pointer-events:none;
}
@media (max-width:900px){
  .hazard-split{ grid-template-columns: 1fr; }
  .hazard-hero{ min-height: 220px; }
}

/* Footer */
.site-footer,
footer.site-footer,
.footer,
footer{
  width:100%;
  max-width:none;
  margin-left:0;
  margin-right:0;
}

.site-footer{
  display:block;
  border-top:1px solid var(--line);
  background: var(--navy);
  color:#fff;
  margin-top:50px;
}

.site-footer > .container{
  max-width:1120px;
  margin:0 auto;
  padding-left:18px;
  padding-right:18px;
}

.site-footer__inner{ padding:26px 0 18px; }

.footer-grid{
  display:grid;
  grid-template-columns: 1.2fr .85fr .85fr .85fr .85fr;
  gap:18px;
  align-items:start;
}

.footer-logo{
  height:42px;
  width:auto;
  max-width:100%;
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.55))
    drop-shadow(0 0 4px rgba(255,255,255,.35));
}

.footer-copy{
  margin:10px 0 0;
  color:rgba(255,255,255,.85);
  max-width:420px;
  line-height:1.55;
}

.footer-title{
  font-weight:900;
  letter-spacing:.2px;
}

.footer-links{
  margin-top:10px;
  display:grid;
  gap:9px;
}

.site-footer a{
  color:rgba(255,255,255,.86);
  text-decoration:none;
}
.site-footer a:hover{
  opacity:.92;
  text-decoration:underline;
}

.footer-meta{
  margin-top:10px;
  display:grid;
  gap:9px;
  color:rgba(255,255,255,.85);
}
.footer-meta strong{ color:#fff; }
.footer-phone{ color:#fff; font-weight:900; }

.footer-bottom{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  color:rgba(255,255,255,.78);
  font-size:13px;
}

@media (max-width: 980px){
  .footer-grid{ grid-template-columns: 1fr; gap:16px; }
}

.footer-hours{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:8px;
  row-gap:2px;
  align-items:baseline;
}
.footer-hours strong{ grid-row:1 / span 2; }
.footer-hours span{ display:block; }

/* =================================================================== */
/* ====================== HEADER + DROPDOWN NAV ======================= */
/* =================================================================== */
.header{
  position:sticky;
  top:0;
  z-index:9999;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 20px rgba(17,24,39,.08);
}
.header .container{ padding:0; }

/* Header layout lock (sitewide) */
.header .header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.header .brand{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.header .nav-shell{
  display:flex;
  align-items:center;
  gap:14px;
  flex:1 1 auto;
  justify-content:flex-end;
}

.header .nav-menu{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}

.header .brand-logo{
  width:250px;
  max-width:250px;
  height:auto;
  display:block;
}

.header-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  min-height:86px;
}

/* ===== Header logo sizing (big like ~250px) ===== */
.brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
}

.brand-logo{
  width:250px;
  max-width:250px;
  height:auto;
  display:block;
}

@media (max-width:520px){
  .brand-logo{
    width:210px;
    max-width:210px;
  }
}

.header-nav{ width:100%; }

/* Center desktop nav */
.nav-shell{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

/* Desktop CTAs visible by default */
.header-ctas{
  display:flex;
  gap:10px;
  align-items:center;
  flex:0 0 auto;
  margin-left:auto;
  white-space:nowrap;
}

/* Mobile CTAs hidden on desktop */
.nav-mobile-ctas{ display:none; }

/* Desktop menu row */
.nav-menu{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  white-space:nowrap;
  gap:8px 12px;
  padding:10px 10px;
  font-weight:900;
  font-size:14px;
  overflow: visible;
}

.nav-group{ position:relative; display:inline-flex; align-items:center; flex:0 0 auto; }

.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 9px;
  border-radius:12px;
  letter-spacing:.01em;
  flex:0 0 auto;
}
.nav-link:hover{ background: rgba(57,191,234,.22); }

/* Desktop header CTAs: match nav */
.header-ctas .btn{
  font-size:14px;
  font-weight:900;
  letter-spacing:.01em;
  padding:8px 9px;
  border-radius:12px;
  line-height:1.1;
  min-height:34px;
  box-sizing:border-box;
  flex:0 0 auto;
}

/* Button triggers match links (reset button styles) */
button.nav-link,
.nav-link.nav-parent{
  border:0;
  background:transparent;
  padding:8px 9px;
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  touch-action: manipulation;
}

/* Dropdown (desktop) */
.dropdown{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  margin-top:10px;
  min-width:260px;
  max-width:340px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:10px;
  display:none;
  z-index:10000;
}
.dropdown::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:-12px;
  height:12px;
}
.dropdown a{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  font-weight:900;
  color:var(--text);
  line-height:1.2;
}
.dropdown a:hover{ background: rgba(57,191,234,.18); }

/* Desktop hover dropdowns */
@media (hover:hover) and (pointer:fine){
  .nav-group:hover .dropdown,
  .nav-group:focus-within .dropdown{ display:block; }
}

/* JS open state (mobile taps) */
.nav-group.open .dropdown{ display:block; }

/* Touch devices: don't depend on hover */
@media (hover:none){
  .nav-group:hover .dropdown{ display:none; }
}

/* ===== Hamburger UI ===== */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.nav-toggle-bars{
  width:18px;
  height:2px;
  background: var(--navy);
  display:block;
  position:relative;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width:18px;
  height:2px;
  background: var(--navy);
}
.nav-toggle-bars::before{ top:-6px; }
.nav-toggle-bars::after{ top:6px; }

.nav-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index:9998;
  display:none;
}

/* lock scroll when menu open */
.nav-lock{ overflow:hidden !important; }

/* ================= MOBILE HAMBURGER PANEL ================= */
@media (max-width:980px){

  .header-row{
    justify-content:space-between;
    gap:10px;
  }

  .brand{
    flex:0 0 auto;
    min-width:0;
  }

  .nav-shell{
    flex:0 0 auto;
    justify-content:flex-end;
  }

  /* show hamburger */
  .nav-toggle{
    display:flex;
    flex:0 0 auto;
  }

  /* hide desktop CTAs */
  .header-ctas{ display:none !important; }

  /* nav panel closed by default */
  .header-nav{
    display:none;
    position:fixed;
    left:12px;
    right:12px;
    top:86px;
    z-index:9999;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow: var(--shadow);
    padding:10px;
    max-height: calc(100vh - 96px);
    overflow:auto;
  }

  /* open state */
  .nav-shell.open .header-nav{ display:block; }
  .nav-shell.open .nav-overlay{ display:block; }

  /* vertical menu */
  .nav-menu{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:6px;
    padding:6px;
    white-space:normal;
    overflow:visible;
  }

  .nav-group{
    display:block;
    width:100%;
  }

  .nav-link{
    width:100%;
    justify-content:center;
    text-align:center;
    padding:12px;
    min-height:44px;
  }

  /* dropdowns become inline stacks */
  .dropdown{
    position:static;
    transform:none;
    margin-top:0;
    min-width:unset;
    max-width:unset;
    border:none;
    box-shadow:none;
    padding:6px 0 0;
    display:none;
  }
  .nav-group.open .dropdown{ display:block; }

  .dropdown a{
    padding:12px;
    background: rgba(11,45,74,.04);
    border:1px solid rgba(0,0,0,.06);
    margin-top:6px;
  }

  /* MOBILE MENU CTAs */
  .nav-mobile-ctas{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    padding:10px 6px 6px;
    margin-top:8px;
    border-top:1px solid var(--line);
  }

  .nav-mobile-ctas .btn{
    width:100%;
    padding:8px 10px;
    font-size:13px;
    line-height:1.1;
    border-radius:12px;
    min-height:38px;
  }

  .nav-mobile-ctas .btn-ghost{
    padding:7px 10px;
    min-height:36px;
  }
}

/* Homepage hero overlay tuning (mobile-first, keeps desktop look) */
body.page-home .home-hero-overlay{
  transform: translateY(clamp(24px, 18vh, 220px));
  width:100%;
  display:flex;
  justify-content:center;
}

@media (max-width:860px){
  body.page-home .hero2{
    align-items:flex-start;
    min-height: clamp(420px, 66vh, 620px);
  }

  body.page-home .home-hero-overlay{
    transform:none;
  }

  body.page-home .hero2 .container{
    width:100%;
    padding-top:16px;
    padding-bottom:16px;
  }
}

/* Warranty top section mobile order: image first, then text */
@media (max-width:860px){
  body.page-warranty .warranty-top-grid{
    display:flex !important;
    flex-direction:column !important;
    gap:14px !important;
  }

  body.page-warranty .warranty-top-image{
    order:1;
    justify-self:start !important;
    max-width:560px !important;
    margin-top:12px;
  }

  body.page-warranty .warranty-top-text{
    order:2;
  }
}

/* ================= MOBILE CALL BAR ================= */
.mobile-callbar{ display:none; }
@media (max-width:900px){
  .mobile-callbar{
    position:fixed;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:99999;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    background: var(--blue);
    color:#fff;
    font-weight:900;
    border-radius:16px;
    padding:14px 16px;
    box-shadow: 0 12px 30px rgba(17,24,39,.22);
  }
  body{ padding-bottom:84px; }
  html.nav-lock .mobile-callbar,
  body.nav-lock .mobile-callbar{
    opacity:0;
    pointer-events:none;
  }
}

/* Small helper used earlier */
.why-pill{
  border-color: rgba(34,197,94,.45) !important;
  background:
    radial-gradient(420px 120px at 15% 0%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(420px 120px at 90% 0%, rgba(40,182,200,.16), transparent 60%),
    linear-gradient(180deg, rgba(11,45,74,.06), #fff 72%) !important;
  color: var(--navy) !important;
  text-align:center;
  padding: 6px 10px !important;
  line-height: 1.05 !important;
}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(17,24,39,.14);
  }

  .btn-primary:hover::after{
    transform: translateX(14%) rotate(8deg);
    transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  }

  .btn.btn-ghost[href="/warranty/"]:hover{
    transform: translateY(-1px);
  }

  .btn.btn-ghost[href^="tel:"]:hover,
  .btn.btn-ghost[href^="tel:"]:focus-visible{
    transform: translateY(-1px);
  }

  .card:hover,
  .card:focus-within{
    transform: translateY(-4px);
    box-shadow: 0 18px 45px rgba(17,24,39,.16);
    border-color: rgba(15,110,168,.35);
  }

  .card:hover img,
  .card:focus-within img{
    transform: scale(1.04);
  }

  .driveway-cta:hover{
    transform: scale(1.03) translateY(-1px);
    box-shadow: 0 14px 34px rgba(17,24,39,.14);
    filter: brightness(1.02);
  }

  .driveway-cta:hover::before{
    opacity:.35;
    transform: scale(1);
    filter: blur(7px);
  }

  .card-bluegrad:hover::after,
  .card-greengrad:hover::after,
  .badge-green:hover::after,
  .why-pill:hover::after,
  .trust-item:hover::after{
    transform: translateX(14%) rotate(8deg);
    transition: transform 420ms cubic-bezier(.2,.8,.2,1);
  }
}

@media (hover:none){
  .btn:active,
  .btn-primary:hover,
  .btn.btn-ghost[href="/warranty/"]:hover,
  .btn.btn-ghost[href^="tel:"]:hover,
  .btn.btn-ghost[href^="tel:"]:focus-visible,
  .card:hover,
  .card:focus-within,
  .driveway-cta:hover,
  .driveway-cta:active{
    transform:none;
  }

  .card:hover img,
  .card:focus-within img{
    transform:scale(1);
  }

  .driveway-cta:hover::before,
  .card-bluegrad:hover::after,
  .card-greengrad:hover::after,
  .badge-green:hover::after,
  .why-pill:hover::after,
  .trust-item:hover::after{
    transform:translateX(-22%) rotate(8deg);
  }
}





/* =======================
   PAGE: HOME
   ======================= */
body.page-home .why-card-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:16px;
  align-items:stretch;
}
body.page-home .why-card-grid.reverse{ grid-template-columns:.92fr 1.08fr; }

body.page-home .why-copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  height:100%;
  padding:2px 0;
}
body.page-home .why-copy h3{
  margin:0 0 10px;
  font-size:24px;
  line-height:1.15;
  letter-spacing:-0.01em;
}
body.page-home .why-copy .why-desc{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
  max-width:820px;
}
body.page-home .why-microgrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
body.page-home .why-pill{
  border:1px solid var(--line);
  border-radius:999px;
  padding:8px 12px;
  font-weight:900;
  font-size:13px;
  line-height:1;
  background:#fff;
}
body.page-home .why-note{
  margin-top:14px;
  color:var(--muted);
  font-size:15px;
  line-height:1.55;
}
body.page-home .why-note strong{ color:var(--navy); }

body.page-home .why-img{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#f3f4f6;
  height:100%;
  min-height:225px;
}
body.page-home .why-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

@media (max-width:860px){
  body.page-home .why-card-grid,
  body.page-home .why-card-grid.reverse{
    grid-template-columns:1fr;
    gap:14px;
  }
  body.page-home .why-img{ min-height:165px; order:1; }
  body.page-home .why-copy{ order:2; }
  body.page-home .why-copy h3{ font-size:22px; }
}

body.page-home .cert-hero{
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap:16px;
  align-items:stretch;
  margin-top:16px;
}
body.page-home .cert-copy{ order:1; }
body.page-home .cert-img{ order:2; }

body.page-home .cert-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
body.page-home .cert-badge{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  background:#fff;
  border:none !important;
  box-shadow:none !important;
}

body.page-home img{max-width:100%; height:auto;}

/* Keep homepage hero image filling the hero height on mobile/desktop. */
body.page-home .hero2 > img{
  height:100%;
}

@media (max-width:860px){
  body.page-home .cert-hero{
    grid-template-columns:1fr;
    gap:14px;
  }
  body.page-home .cert-img{ order:1; }
  body.page-home .cert-copy{ order:2; }
}

@media (max-width:860px){
  body.page-home .section h2,
  body.page-home .section .section-title{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
  body.page-home .section h2 + p{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
  }
}

body.page-home .rr-grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:16px;
  align-items:start;
  margin-top:16px;
}
@media (max-width: 980px){
  body.page-home .rr-grid{ grid-template-columns: 1fr; }
}
body.page-home .rr-gallery{
  border-radius:22px;
  border:1px solid var(--line);
  overflow:hidden;
  background:#f3f4f6;
}
body.page-home .rr-gallery img{
  width:100%;
  height:auto;
  display:block;
}
body.page-home #results-reviews .review-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:baseline;
}
body.page-home #results-reviews .review-head > *{ min-width:0; }
body.page-home #results-reviews .review-meta{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  text-align:right;
  flex:1 1 260px;
}
@media (max-width:560px){
  body.page-home #results-reviews .review-meta{ text-align:left; flex-basis:100%; }
}

body.page-home #faq details.faq-item{
  border:1px solid var(--line);
  background:#fff;
  border-radius:0;
  overflow:hidden;
}
body.page-home #faq details.faq-item > summary{
  cursor:pointer;
  list-style:none;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
  user-select:none;
}
body.page-home #faq summary::-webkit-details-marker{ display:none; }

body.page-home #faq summary::after{
  content:"▾";
  font-weight:1000;
  color: var(--navy);
  transition: transform .18s ease;
}
body.page-home #faq details[open] summary::after{ transform: rotate(180deg); }

body.page-home #faq .faq-body{
  max-height:0;
  overflow:hidden;
  opacity:0;
  padding:0 16px;
  transform: translateY(-6px);
  transition:
    max-height .28s ease,
    opacity .22s ease,
    transform .22s ease;
  background:
    radial-gradient(900px 240px at 20% 0%, rgba(57,191,234,.22), transparent 55%),
    radial-gradient(900px 240px at 90% 0%, rgba(15,110,168,.14), transparent 55%),
    linear-gradient(180deg, rgba(57,191,234,.10), #f8fbff 70%);
  border-top:1px solid rgba(15,110,168,.25);
}
body.page-home #faq details[open] .faq-body{
  max-height:620px;
  opacity:1;
  padding:16px;
  transform:none;
}
/* =======================
   PAGE: GET A QUOTE (CLEAN)
   Keep: hero overlay layout + the quote card sizing
   Drop: all the old multi-step/formspree form styling
   ======================= */

/* If you truly don't want trustbar on quote page, keep ONE selector */
body.page-quote .trustbar{ display:none !important; }

body.page-quote{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Hero image is handled globally by .hero2; only keep quote overlay positioning */
body.page-quote .hero2{ position:relative; }
body.page-quote .hero2 .container{ position:relative; z-index:3; }

/* Center the quote card and control vertical placement on the hero */
body.page-quote .hero2 .quote-overlay{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding-top: clamp(18px, 12vh, 140px);
  padding-bottom: 28px;
}

/* Single-column grid wrapper (safe even if you later add a left copy card) */
body.page-quote .hero2 .quote-grid{
  width: min(1080px, 100%);
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
  justify-items:center;
  align-items:start;
}

/* Make Request a Quote box 25% wider */
body.page-quote .qcard{
  width:100%;
  max-width:900px;
  margin-left:auto;
  margin-right:auto;
}

/* Card title */
body.page-quote .quote-form-title{
  margin:0 0 10px;
  text-align:center;
  font-size:22px;
  color:var(--navy);
  font-weight:900;
}

/* If using Jobber embed, force it to fill the card */
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227{
  width:100%;
  max-width:100%;
}

/* Mobile spacing tweaks */
@media (max-width: 860px){
  body.page-quote .hero2 .quote-overlay{
    padding-top: clamp(14px, 8vh, 90px);
    padding-bottom: 18px;
  }
  body.page-quote .qcard{ padding:16px; max-width: 100%; }
}
/* === FORCE JOBBER EMBED TO USE FULL CARD WIDTH === */
body.page-quote .qcard{
  max-width: 900px !important; /* 25% wider target */
  width: 100% !important;
}

/* The embed mount point */
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227{
  width: 100% !important;
  max-width: 100% !important;
}

/* The embed usually injects 1–3 wrapper divs — this removes the cap */
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227 > *{
  width: 100% !important;
  max-width: 100% !important;
}

/* If Jobber uses a “container” pattern, this kills it */
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227 *{
  max-width: 100% !important;
}

/* Make inputs/buttons actually stretch (some embeds set inline widths) */
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227 input,
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227 select,
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227 textarea,
body.page-quote #c639aa23-e770-4085-b066-c7bba042d9df-2246227 button{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* === Sitewide FAQ visual normalization === */
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) summary,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-q,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-q span{
  color:#0f172a !important;
  font-weight:600 !important;
}

:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-body,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-a,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-body p,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-a p,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-body li,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-a li,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-body ul,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-a ul,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-body ol,
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-a ol{
  color:#1f2937 !important;
  font-weight:400 !important;
  line-height:1.7 !important;
}

:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-body :is(strong, b),
:where(section[id*="faq" i], .faq-acc, details.faq-item, details.card) .faq-a :is(strong, b){
  font-weight:400 !important;
  color:#1f2937 !important;
}


/* Shared breadcrumb */
.breadcrumb{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.breadcrumb .container{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 0;
  font-size:14px;
  color:var(--muted);
  overflow-x:auto;
  white-space:nowrap;
}
.breadcrumb a{
  color:var(--navy);
  text-decoration:none;
}
.breadcrumb a:hover{ text-decoration:underline; }
.breadcrumb [aria-current="page"]{
  color:var(--text);
  font-weight:700;
}

/* Clay County internal link modules */
.clay-local-links .container{
  display:grid;
  gap:12px;
}
.clay-link-module{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.clay-link-module h2,
.clay-link-module h3{
  margin:0;
  color:var(--navy);
}
.clay-link-module .muted{
  margin:8px 0 0;
}
.clay-link-module--services{
  background:linear-gradient(180deg,rgba(15,110,168,.08) 0%, #fff 100%);
}
.clay-link-module--areas{
  background:#fff;
  box-shadow: inset 0 0 0 1px rgba(15,110,168,.08);
}
.clay-link-grid{
  margin-top:10px;
  margin-bottom:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.clay-link-item{
  margin:0;
}
.clay-local-links a{
  color:var(--navy);
}
.clay-link-grid a{
  display:block;
  border:1px solid rgba(15,110,168,.2);
  border-radius:10px;
  padding:8px 10px;
  font-size:.95rem;
  font-weight:600;
  line-height:1.35;
  background:rgba(255,255,255,.9);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.clay-link-grid a:hover,
.clay-link-grid a:focus-visible{
  border-color:rgba(15,110,168,.45);
  background:#fff;
  box-shadow:0 0 0 3px rgba(15,110,168,.12);
}
.clay-chip-row{
  margin-top:10px;
  margin-bottom:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.clay-chip-item{
  margin:0;
}
.clay-chip-link{
  display:inline-flex;
  align-items:center;
  border:1px solid rgba(15,110,168,.18);
  border-radius:999px;
  padding:6px 12px;
  font-size:.9rem;
  background:linear-gradient(180deg,#fff 0%, rgba(15,110,168,.05) 100%);
  transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.clay-chip-link:hover,
.clay-chip-link:focus-visible{
  border-color:rgba(15,110,168,.4);
  background:#fff;
  box-shadow:0 0 0 3px rgba(15,110,168,.1);
}
@media (max-width:720px){
  .clay-link-grid{
    grid-template-columns:1fr;
  }
}