/* ==========================================================================
   Polar Insulation — Premium Design System
   Custom CSS (no frameworks). One file. Mobile-first.
   ========================================================================== */

:root{
  /* Brand palette — Polar blue / white / orange (retheme) */
  --navy:#0B5F9E;        /* primary blue (brand, headings, nav accents) */
  --navy-2:#073B63;      /* deep blue (dark sections, footer) */
  --ice:#1677B8;         /* medium blue (links/accents) */
  --ice-light:#7FB6DC;   /* light ice blue (accents on dark) */
  --orange:#E63946;      /* CTA red accent */
  --orange-dark:#C92F3B; /* CTA red accent hover */
  --bg:#F8FBFE;          /* page background (very light blue) */
  --white:#FFFFFF;
  --gray-soft:#EAF6FF;
  --text:#17212B;        /* text dark */
  --text-gray:#44515F;   /* body text gray */
  --border:#D9E8F5;      /* light blue border */

  /* Surfaces */
  --surface-low:#EAF6FF; /* light blue section background */
  --surface:#F3FAFF;     /* soft ice blue */
  --navy-line:rgba(255,255,255,.14);

  /* Brand-aligned aliases (new names) */
  --primary:#0B5F9E;
  --primary-dark:#084B7A;
  --primary-med:#1677B8;
  --primary-soft:#EAF6FF;
  --primary-light:#F3FAFF;
  --accent:#E63946;
  --accent-hover:#C92F3B;
  --accent-soft:rgba(230,57,70,.10);
  --accent-border:rgba(230,57,70,.22);
  --text-muted:#44515F;
  --background:#F8FBFE;
  --footer:#073B63;

  /* Type */
  --font-head:"Montserrat","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  /* Shadows */
  --shadow-sm:0 1px 2px rgba(8,75,122,.07), 0 1px 3px rgba(8,75,122,.06);
  --shadow-md:0 4px 14px rgba(8,75,122,.10);
  --shadow-lg:0 18px 40px rgba(8,75,122,.16);
  --shadow-card:0 10px 30px rgba(11,95,158,.10);

  /* Layout */
  --container:1200px;
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:18px;
  --gutter:24px;
  --header-h:76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ice);text-decoration:none;transition:color .18s ease}
a:hover{color:var(--orange-dark)}
h1,h2,h3,h4{font-family:var(--font-head);color:var(--navy);line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h1{font-size:clamp(34px,5vw,54px)}
h2{font-size:clamp(28px,3.6vw,38px)}
h3{font-size:clamp(20px,2.2vw,25px);letter-spacing:-.01em;font-weight:700}
h4{font-size:18px;letter-spacing:0;font-weight:700}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
strong{color:var(--navy);font-weight:700}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter);width:100%}
.section{padding:64px 0}
@media(min-width:900px){.section{padding:104px 0}}
.section--tight{padding:48px 0}
@media(min-width:900px){.section--tight{padding:72px 0}}
.section--bg{background:var(--surface-low)}
.section--soft{background:var(--white)}
.section--navy{background:linear-gradient(160deg,#0B5F9E 0%,#084B7A 100%);color:#dceaf6}
.section--navy h2,.section--navy h3,.section--navy h4{color:#fff}
.eyebrow{display:inline-block;font-family:var(--font-body);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-bottom:14px}
.section--navy .eyebrow{color:var(--ice-light)}
.lead{font-size:clamp(17px,1.4vw,20px);color:var(--text-gray);max-width:62ch}
.section--navy .lead{color:#aebdd0}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.measure{max-width:760px}
.section-head{margin-bottom:48px}
.section-head.center{margin-left:auto;margin-right:auto;max-width:760px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.01em;
  padding:15px 28px;border-radius:var(--radius-sm);border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,background .18s ease,box-shadow .18s ease,color .18s ease;
  text-align:center;line-height:1;white-space:nowrap
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--orange);color:#fff;box-shadow:0 6px 18px rgba(230,57,70,.30)}
.btn--primary:hover{background:var(--orange-dark);color:#fff;box-shadow:0 10px 24px rgba(201,47,59,.34)}
.btn--secondary{background:var(--navy);color:#fff}
.btn--secondary:hover{background:var(--navy-2);color:#fff}
.btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:#fff;color:var(--navy)}
.btn--outline{background:transparent;color:var(--navy);border-color:var(--border)}
.btn--outline:hover{border-color:var(--navy);color:var(--navy);background:var(--white)}
.btn--lg{padding:18px 34px;font-size:16px}
.btn--block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.btn-row--center{justify-content:center}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;width:100%;z-index:100;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(140%) blur(8px);border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 rgba(4,22,39,.03)
}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-head);font-weight:800;font-size:21px;color:var(--navy);letter-spacing:-.02em}
.brand:hover{color:var(--navy)}
.brand img{width:34px;height:34px}
.brand span small{display:block;font-family:var(--font-body);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ice);margin-top:1px}
.nav{display:none}
.nav a{font-family:var(--font-head);font-weight:600;font-size:14.5px;color:var(--text-gray);padding:8px 2px;position:relative}
.nav a:hover,.nav a.is-active{color:var(--navy)}
.nav a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);border-radius:2px}
.header-cta{display:flex;align-items:center;gap:14px}
.header-phone{display:none;font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:15px}
.header-phone:hover{color:var(--orange-dark)}
.header-cta .btn{padding:12px 20px;font-size:14px}
.nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer;padding:0 11px}
.nav-toggle span{display:block;height:2.5px;background:var(--navy);border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* Mobile menu panel */
.mobile-menu{
  position:fixed;inset:var(--header-h) 0 0 0;z-index:99;background:var(--navy-2);
  transform:translateX(100%);transition:transform .3s ease;visibility:hidden;
  display:flex;flex-direction:column;padding:26px var(--gutter) 40px;overflow-y:auto
}
.mobile-menu.is-open{transform:translateX(0);visibility:visible}
.mobile-menu a{font-family:var(--font-head);font-weight:600;color:#dce6f2;font-size:19px;padding:15px 0;border-bottom:1px solid var(--navy-line)}
.mobile-menu a:hover{color:#fff}
.mobile-menu .btn{margin-top:8px}
.mobile-menu .mm-cta{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.mobile-menu .mm-phone{color:#fff;font-size:22px;font-family:var(--font-head);font-weight:800;text-align:center;padding:6px 0 0}
body.menu-open{overflow:hidden}

@media(min-width:980px){
  .nav{display:flex;gap:30px;align-items:center}
  .header-phone{display:block}
  .nav-toggle{display:none}
  .mobile-menu{display:none}
}
/* Declutter header on small phones — sticky call bar + menu carry the CTA */
@media(max-width:600px){
  .brand span small{display:none}
  .brand{font-size:19px;gap:9px}
  .brand img{width:30px;height:30px}
  .header-cta .btn{display:none}
  .header-cta{gap:10px}
}
@media(max-width:360px){
  .brand{font-size:17px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;color:#fff;margin-top:var(--header-h);
  background:
    radial-gradient(1200px 600px at 80% -10%,rgba(127,182,220,.40),transparent 60%),
    radial-gradient(900px 500px at 0% 110%,rgba(7,59,99,.55),transparent 55%),
    linear-gradient(160deg,#1677B8 0%,#0B5F9E 55%,#084B7A 100%);
  overflow:hidden
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:22px 22px
}
.hero-inner{position:relative;z-index:2;display:grid;gap:40px;padding:56px 0 64px;align-items:center}
@media(min-width:960px){.hero-inner{grid-template-columns:1.05fr .95fr;padding:88px 0 96px;gap:56px}}
.hero h1{color:#fff;margin-bottom:18px}
.hero .eyebrow{color:var(--ice-light)}
.hero p.lead{color:#bcd0e6;margin-bottom:28px}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px}
.hero-badges span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#cfe0f0}
.hero-badges svg{width:18px;height:18px;flex:none;color:var(--orange)}
.hero--inner{padding:0}
.hero--inner .hero-inner{display:block;padding:54px 0 58px}
@media(min-width:960px){.hero--inner .hero-inner{padding:74px 0 80px}}
.hero--inner h1{max-width:18ch}
.hero--compact .hero-inner{padding:46px 0 50px}
@media(min-width:960px){.hero--compact .hero-inner{padding:60px 0 64px}}
/* Mobile/tablet: the hero-inner zeroes its horizontal padding, so hero text would
   touch the screen edge. Restore a clean left/right gutter (matches site container).
   High specificity (.hero .container.hero-inner) overrides every hero variant; scoped
   to <=768px so desktop alignment is untouched. */
@media(max-width:768px){
  .hero .container.hero-inner{padding-left:var(--gutter);padding-right:var(--gutter);text-align:left}
}

/* Hero form / image card */
.hero-card{
  background:rgba(255,255,255,.97);color:var(--text);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:28px;border:1px solid rgba(255,255,255,.6)
}
.hero-card h2{font-size:22px;margin-bottom:4px}
.hero-card .card-sub{color:var(--text-gray);font-size:14.5px;margin-bottom:18px}

/* ---------- Trust bar ---------- */
.trustbar{background:var(--white);border-bottom:1px solid var(--border)}
.trustbar .container{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 40px;padding-top:22px;padding-bottom:22px}
.trustbar .ti{display:flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-gray)}
.trustbar .ti svg{width:21px;height:21px;color:var(--orange);flex:none}

/* ---------- Grid ---------- */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media(min-width:640px){.grid--2{grid-template-columns:1fr 1fr}.grid--3{grid-template-columns:1fr 1fr}.grid--4{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid--3{grid-template-columns:repeat(3,1fr)}.grid--4{grid-template-columns:repeat(4,1fr)}}

/* ---------- Cards ---------- */
/* Global guard: every "Learn more"-style card arrow stays at icon size (never giant),
   in any container — inline with the text, compact "Learn more →" look. */
.card-link{display:inline-flex;align-items:center;gap:8px;font-weight:700}
.card-link svg{width:18px;height:18px;max-width:18px;max-height:18px;flex:none;transition:transform .2s ease}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:30px;transition:transform .22s ease,box-shadow .22s ease;height:100%;display:flex;flex-direction:column}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--ice-light)}
.card .icon{width:52px;height:52px;border-radius:12px;background:rgba(11,95,158,.10);color:var(--ice);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.card .icon svg{width:27px;height:27px}
.card h3{margin-bottom:8px}
.card p{color:var(--text-gray);font-size:15.5px;margin-bottom:16px}
.card .card-link{margin-top:auto;font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--orange-dark);display:inline-flex;align-items:center;gap:6px}
.card .card-link svg{width:18px;height:18px;flex:none;transition:transform .2s ease}
.card:hover .card-link svg{transform:translateX(4px)}

/* Image card */
.icard{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);display:flex;flex-direction:column;height:100%;transition:transform .22s ease,box-shadow .22s ease}
.icard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--ice-light)}
.icard img{width:100%;height:200px;object-fit:cover;background:var(--navy)}
.icard .icard-body{padding:24px;display:flex;flex-direction:column;flex:1}
.icard h3{margin-bottom:8px;font-size:21px}
.icard p{color:var(--text-gray);font-size:15px;margin-bottom:16px}
.icard .card-link{margin-top:auto;font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--orange-dark);display:inline-flex;align-items:center;gap:8px}
.icard .card-link svg{width:18px;height:18px;flex:none;transition:transform .2s ease}
.icard:hover .card-link svg{transform:translateX(4px)}
.icard .rpill{display:inline-block;align-self:flex-start;background:rgba(11,95,158,.08);color:var(--navy);font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:20px;margin-bottom:12px}

/* Link list cards (cities/counties) */
.linkgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:600px){.linkgrid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.linkgrid{grid-template-columns:repeat(3,1fr)}}
.linkcard{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow-sm);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.linkcard:hover{transform:translateY(-2px);border-color:var(--ice-light);box-shadow:var(--shadow-md)}
.linkcard svg{width:20px;height:20px;color:var(--ice);flex:none}
.linkcard b{display:block;font-family:var(--font-head);font-weight:700;color:var(--navy);font-size:15.5px}
.linkcard small{color:var(--text-gray);font-size:12.5px}

/* Service-area directory — county cards with city chips (hub directory) */
.area-region{margin-bottom:40px}
.area-region:last-child{margin-bottom:0}
.area-region > h3{display:flex;align-items:center;gap:10px;font-size:19px;margin-bottom:18px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.area-region > h3 .pin{display:inline-flex;color:var(--ice);flex:none}
.area-region > h3 .pin svg{width:20px;height:20px}
.area-cols{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:600px){.area-cols{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.area-cols{grid-template-columns:repeat(3,1fr)}}
.area-county{background:var(--white);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm);padding:18px 20px;display:flex;flex-direction:column}
.area-county-name{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--navy);display:inline-flex;align-items:center;gap:8px;padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border)}
.area-county-name:hover{color:var(--orange-dark)}
.city-chips{display:flex;flex-wrap:wrap;gap:8px}
.city-chips a{display:inline-block;background:var(--surface-low);border:1px solid var(--border);border-radius:20px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--navy);transition:background .15s ease,border-color .15s ease,color .15s ease}
.city-chips a:hover{background:#fff;border-color:var(--ice-light);color:var(--orange-dark)}
.area-county .no-city{font-size:13px;color:var(--text-gray);margin:0}

/* ---------- Split / alternating media ---------- */
.split{display:grid;gap:36px;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:56px}}
.split--reverse .split-media{order:-1}
@media(min-width:900px){.split--reverse .split-media{order:2}}
.split-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.split-media img{width:100%;height:100%;min-height:280px;object-fit:cover;background:var(--navy)}
.feature-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:18px}
.feature-list li{display:flex;gap:14px;align-items:flex-start}
.feature-list .fi{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(230,57,70,.12);color:var(--orange-dark);display:flex;align-items:center;justify-content:center}
.feature-list .fi svg{width:21px;height:21px}
.feature-list h4{margin:2px 0 3px}
.feature-list p{margin:0;color:var(--text-gray);font-size:15px}
.section--navy .feature-list p{color:#aebdd0}
.section--navy .feature-list .fi{background:rgba(255,255,255,.08);color:var(--ice-light)}

/* Check list */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:13px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px}
.checks svg{width:22px;height:22px;color:var(--orange);flex:none;margin-top:1px}
.section--navy .checks li{color:#cdd8e6}

/* ---------- Process steps ---------- */
.steps{display:grid;gap:22px;counter-reset:step;grid-template-columns:1fr}
@media(min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.steps--4{grid-template-columns:repeat(4,1fr)}.steps--3{grid-template-columns:repeat(3,1fr)}}
.step{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--shadow-sm);position:relative}
.step .num{font-family:var(--font-head);font-weight:800;font-size:15px;color:#fff;background:var(--orange);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.step h4{margin-bottom:6px}
.step p{margin:0;color:var(--text-gray);font-size:14.5px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center}
.stat b{display:block;font-family:var(--font-head);font-weight:800;font-size:clamp(30px,4vw,44px);color:#fff;line-height:1}
.stat span{display:block;margin-top:8px;font-size:13.5px;letter-spacing:.04em;color:#9fb2c8;text-transform:uppercase;font-weight:600}

/* ---------- FAQ accordion ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{background:var(--white);border:1px solid var(--border);border-radius:12px;margin-bottom:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:18px;cursor:pointer;padding:20px 22px;font-family:var(--font-head);font-weight:700;font-size:16.5px;color:var(--navy);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none;width:24px;height:24px;color:var(--ice);transition:transform .25s ease}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .faq-body{padding:0 22px 20px;color:var(--text-gray);font-size:15.5px}
.faq .faq-body p:last-child{margin-bottom:0}
.faq .faq-body .ans{font-weight:600;color:var(--navy);display:block;margin-bottom:8px}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{background:var(--white);border-bottom:1px solid var(--border);font-size:13.5px}
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0;padding:13px var(--gutter);max-width:var(--container);margin:0 auto}
.breadcrumbs li{display:flex;align-items:center;gap:8px;color:var(--text-gray)}
.breadcrumbs li a{color:var(--ice);font-weight:600}
.breadcrumbs li[aria-current]{color:var(--text-gray)}
.breadcrumbs .sep{color:var(--border)}

/* ---------- Forms ---------- */
.lead-form{display:grid;gap:14px}
.lead-form .row{display:grid;gap:14px}
@media(min-width:520px){.lead-form .row--2{grid-template-columns:1fr 1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--navy)}
.field label .req{color:var(--orange-dark)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:15px;color:var(--text);background:#fff;
  border:1.5px solid var(--border);border-radius:10px;padding:12px 14px;width:100%;transition:border-color .15s ease,box-shadow .15s ease
}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ice);box-shadow:0 0 0 3px rgba(22,119,184,.18)}
.field--hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-gray)}
.consent input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--orange)}
.form-note{font-size:12.5px;color:var(--text-gray);text-align:center;margin:0}
.form-msg{display:none;border-radius:10px;padding:13px 16px;font-size:14.5px;font-weight:600}
.form-msg.show{display:block}
.form-msg.ok{background:#e7f6ec;color:#1c7a3f;border:1px solid #b6e2c4}
.form-msg.err{background:#fdecea;color:#b3261e;border:1px solid #f5c4c0}

/* Estimate band (form + trust) */
.estimate-band{background:var(--navy-2)}
.estimate-grid{display:grid;gap:36px;align-items:start}
@media(min-width:920px){.estimate-grid{grid-template-columns:1fr 1.05fr;gap:52px}}
/* Dark navy copy column — keep every bit of text readable on the navy band.
   Scoped to .estimate-copy so the white form card (.estimate-card) is unaffected. */
.estimate-copy h2,.estimate-copy h3,.estimate-copy h4{color:#fff}
.estimate-copy .eyebrow{color:var(--ice-light)}
.estimate-copy,
.estimate-copy p,
.estimate-copy li,
.estimate-copy .lead,
.estimate-copy .checks li,
.estimate-copy .form-note,
.estimate-copy .consent{color:rgba(255,255,255,.86)}
.estimate-copy .checks svg{color:var(--orange)}
.estimate-copy a{color:var(--orange)}
.estimate-copy a:hover{color:var(--ice-light)}
/* White form card stays fully readable: dark text on white fields. */
.estimate-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:30px}
.estimate-card label{color:var(--navy)}
.estimate-card .consent,.estimate-card .form-note{color:var(--text-gray)}
.estimate-card input,.estimate-card select,.estimate-card textarea{color:#181C1E;background:#fff}
.estimate-card input::placeholder,.estimate-card textarea::placeholder{color:#6B7280}
.estimate-card h3{font-size:21px;margin-bottom:4px}
.estimate-card .card-sub{color:var(--text-gray);font-size:14px;margin-bottom:18px}

/* ---------- Callout / CTA band ---------- */
.cta-band{background:linear-gradient(150deg,#0B5F9E,#084B7A 60%,#073B63);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#bcd0e6;max-width:60ch;margin-left:auto;margin-right:auto}

/* Highlight panel */
.panel{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--orange);border-radius:12px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.panel h4{margin-bottom:6px}
.panel p:last-child{margin:0}

/* Prose (article body) */
.prose{max-width:760px}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.4em}
.prose ul li,.prose ol li{margin-bottom:.5em}
.prose .panel{margin:1.6em 0}

/* Comparison table */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
table.compare{width:100%;border-collapse:collapse;font-size:15px;background:#fff;min-width:560px}
table.compare th,table.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
table.compare thead th{background:var(--navy);color:#fff;font-family:var(--font-head);font-weight:700;font-size:14px}
table.compare tbody tr:nth-child(even){background:var(--surface-low)}
table.compare td:first-child{font-weight:700;color:var(--navy)}

/* Region/area tag list */
.region{margin-bottom:34px}
.region h3{display:flex;align-items:center;gap:10px;font-size:19px;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.region h3 .pin{color:var(--ice)}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer);color:#b9d4e8;padding-top:64px}
.footer-grid{display:grid;gap:36px;grid-template-columns:1fr}
@media(min-width:680px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr}}
@media(min-width:980px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.footer-brand .brand{color:#fff;margin-bottom:14px}
.footer-brand .brand span{color:#fff}
.footer-brand p{font-size:14.5px;color:#b9d4e8;max-width:34ch}
.footer-contact{margin-top:18px;display:grid;gap:9px;font-size:14.5px}
.footer-contact a,.footer-contact span{display:flex;gap:9px;align-items:flex-start;color:#cdd8e6}
.footer-contact a:hover{color:var(--orange)}
.footer-contact svg{width:18px;height:18px;color:var(--ice-light);flex:none;margin-top:2px}
.site-footer h4{color:#fff;font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:14.5px}
.footer-links a{color:#b9d4e8}
.footer-links a:hover{color:var(--orange)}
.footer-bottom{border-top:1px solid var(--navy-line);margin-top:52px;padding:22px 0}
.footer-bottom .container{display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;font-size:13px;color:#7e93ac}
.footer-bottom a{color:#9fb2c8}

/* Sticky mobile call bar */
.mobile-callbar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:1px;background:var(--border);box-shadow:0 -4px 16px rgba(4,22,39,.12)}
.mobile-callbar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 8px;font-family:var(--font-head);font-weight:700;font-size:14.5px;color:#fff}
.mobile-callbar .mc-call{background:var(--navy)}
.mobile-callbar .mc-quote{background:var(--orange)}
.mobile-callbar svg{width:18px;height:18px}
@media(min-width:980px){.mobile-callbar{display:none}}
body{padding-bottom:0}
@media(max-width:979px){body{padding-bottom:54px}}

/* Utilities */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.text-orange{color:var(--orange-dark)}
.hide{display:none}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--orange);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--ice);outline-offset:2px}

/* ==========================================================================
   USER-REQUESTED FIXES (appended last so they override earlier rules)
   1) Final dark form section readability
   2) Inline-SVG icon sizing (oversized / collapsed arrows & icons)
   3) Mobile hero text padding & left alignment
   ========================================================================== */

/* ---- (1) Final dark form section: white/light copy on the navy band -------
   The bottom estimate/contact section sits on dark navy (.estimate-band).
   Make ALL surrounding copy white/light-gray, while the white form CARD keeps
   dark text on white fields. Class `final-estimate-section` is added to every
   final dark form section wrapper in the HTML. */
.final-estimate-section,
.final-estimate-section * {
  color: rgba(255, 255, 255, 0.88);
}
.final-estimate-section h1,
.final-estimate-section h2,
.final-estimate-section h3,
.final-estimate-section h4,
.final-estimate-section .section-title,
.final-estimate-section .section-heading,
.final-estimate-section .cta-title,
.final-estimate-section .form-title {
  color: #ffffff !important;
}
.final-estimate-section p,
.final-estimate-section li,
.final-estimate-section label,
.final-estimate-section .form-note,
.final-estimate-section .help-text,
.final-estimate-section .consent,
.final-estimate-section .trust-line,
.final-estimate-section .check-list,
.final-estimate-section .check-list li,
.final-estimate-section .eyebrow,
.final-estimate-section .section-kicker,
.final-estimate-section .section-subtitle,
.final-estimate-section .lead,
.final-estimate-section .checks li {
  color: rgba(255, 255, 255, 0.86) !important;
}
.final-estimate-section a { color: #E63946 !important; }
.final-estimate-section .estimate-copy a:hover { color: #7FB6DC !important; }
.final-estimate-section .checks svg { color: #E63946 !important; }
.final-estimate-section input,
.final-estimate-section select,
.final-estimate-section textarea {
  color: #181C1E !important;
  background: #ffffff !important;
}
.final-estimate-section input::placeholder,
.final-estimate-section textarea::placeholder { color: #6B7280 !important; }
.final-estimate-section option { color: #181C1E; background: #ffffff; }

/* Protect the WHITE form card inside the dark section: dark labels/notes,
   dark input text on white fields (overrides the white-out rules above). */
.final-estimate-section .estimate-card,
.final-estimate-section .estimate-card * { color: var(--text); }
.final-estimate-section .estimate-card h2,
.final-estimate-section .estimate-card h3,
.final-estimate-section .estimate-card h4 { color: var(--navy) !important; }
.final-estimate-section .estimate-card label { color: var(--navy) !important; }
.final-estimate-section .estimate-card p,
.final-estimate-section .estimate-card .card-sub,
.final-estimate-section .estimate-card .consent,
.final-estimate-section .estimate-card .form-note { color: var(--text-gray) !important; }
.final-estimate-section .estimate-card .req { color: var(--orange-dark) !important; }
.final-estimate-section .estimate-card a { color: var(--ice) !important; }
.final-estimate-section .estimate-card input,
.final-estimate-section .estimate-card select,
.final-estimate-section .estimate-card textarea { color: #181C1E !important; background: #fff !important; }
.final-estimate-section .estimate-card .form-msg.ok { color: #1c7a3f !important; }
.final-estimate-section .estimate-card .form-msg.err { color: #b3261e !important; }

/* ---- (2) Inline SVG icon sizing -----------------------------------------
   Root cause of "giant orange arrows" and missing icons: an inline <svg> with
   a viewBox but no width/height renders at the browser's default replaced size
   — ballooning to ~300-410px in block headings/panels and collapsing to 0 in
   flex buttons. This low-specificity default keeps every inline icon at text
   size and is overridden by the explicit component sizes below. */
svg { width: 1.15em; height: 1.15em; }
/* Buttons: compact inline icon, never stretched, aligned with the label */
.btn svg { width: 18px; height: 18px; max-width: 18px; max-height: 18px; flex: 0 0 auto; }
.btn--lg svg { width: 19px; height: 19px; max-width: 19px; max-height: 19px; }
/* Panel heading icon (was ballooning to ~400px) */
.panel h4 svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex: none; vertical-align: -3px; }
/* Re-pin existing component icon sizes so the universal default never shrinks them */
.faq summary .chev svg { width: 24px; height: 24px; }
.card .icon svg { width: 27px; height: 27px; }
.card .card-link svg,
.icard .card-link svg,
.card-link svg { width: 18px; height: 18px; max-width: 18px; max-height: 18px; }
.checks svg { width: 22px; height: 22px; }
.linkcard svg { width: 20px; height: 20px; }
.trustbar .ti svg { width: 21px; height: 21px; }
.hero-badges svg { width: 18px; height: 18px; }
.footer-contact svg { width: 18px; height: 18px; }
.mobile-callbar svg { width: 18px; height: 18px; }
.area-region > h3 .pin svg { width: 20px; height: 20px; }
.feature-list .fi svg { width: 21px; height: 21px; }
/* Optional compact "Learn more →" helper pattern (used where present) */
.learn-more, .card-cta, .service-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; line-height: 1.2; }
.learn-more svg, .mini-arrow-icon, .card-cta svg, .service-link svg { width: 20px; height: 20px; max-width: 20px; max-height: 20px; flex: 0 0 20px; display: inline-block; }
.mini-arrow { display: inline-block; font-size: 20px; line-height: 1; }

/* ---- (3) Mobile hero text: clean left padding, left aligned, no overflow -- */
@media (max-width: 768px) {
  .hero,
  .page-hero,
  .service-hero,
  .location-hero,
  .city-hero,
  .county-hero,
  .state-hero { text-align: left; }

  .hero .container,
  .hero .container.hero-inner,
  .page-hero .container,
  .service-hero .container,
  .location-hero .container,
  .city-hero .container,
  .county-hero .container,
  .state-hero .container,
  .hero-content,
  .hero-copy,
  .page-hero-content {
    padding-left: 22px !important;
    padding-right: 22px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  .hero h1,
  .page-hero h1,
  .service-hero h1,
  .location-hero h1,
  .city-hero h1,
  .county-hero h1,
  .state-hero h1,
  .hero p,
  .page-hero p { text-align: left !important; }
}

/* ==========================================================================
   Internal body/content link color (red accent) — SCOPED to paragraph/body copy
   Only contextual links inside main content (paragraphs, list items, prose,
   articles, FAQ answers) turn red. Header nav, mobile menu, footer chrome,
   breadcrumbs, buttons, card links, phone CTAs, and form fields are NOT affected:
   - Nav / mobile menu / footer live OUTSIDE <main>, so main-scoped rules can't reach them.
   - Buttons (.btn--*) and breadcrumbs (.breadcrumbs li a) keep higher specificity, so they win.
   - Phone / email links are explicitly excluded below.
   ========================================================================== */
.prose a,
.content a,
.page-content a,
.service-content a,
.location-content a,
.city-content a,
.county-content a,
.state-content a,
.resource-content a,
.faq-content a,
.faq .faq-body a,
.article-body a,
.section-copy a,
.text-block a,
.panel p a,
main p a,
main li a,
main article a {
  color: #E63946;
  font-weight: 700;
  text-decoration-color: rgba(230, 57, 70, 0.35);
  text-underline-offset: 3px;
}
.prose a:hover,
.content a:hover,
.page-content a:hover,
.service-content a:hover,
.location-content a:hover,
.city-content a:hover,
.county-content a:hover,
.state-content a:hover,
.resource-content a:hover,
.faq-content a:hover,
.faq .faq-body a:hover,
.article-body a:hover,
.section-copy a:hover,
.text-block a:hover,
.panel p a:hover,
main p a:hover,
main li a:hover,
main article a:hover {
  color: #C92F3B;
  text-decoration-color: #C92F3B;
}

/* Keep phone / email links (CTAs in body copy, e.g. form-note) unchanged — not red */
main p a[href^="tel:"],
main li a[href^="tel:"],
main article a[href^="tel:"],
.prose a[href^="tel:"],
main p a[href^="mailto:"],
main li a[href^="mailto:"],
main article a[href^="mailto:"],
.prose a[href^="mailto:"] {
  color: var(--ice);
  font-weight: inherit;
}
main p a[href^="tel:"]:hover,
main li a[href^="tel:"]:hover,
main article a[href^="tel:"]:hover,
.prose a[href^="tel:"]:hover,
main p a[href^="mailto:"]:hover,
main li a[href^="mailto:"]:hover,
main article a[href^="mailto:"]:hover,
.prose a[href^="mailto:"]:hover {
  color: var(--orange-dark);
}

/* ==========================================================================
   Inner-page hero top-gap fix
   Cause: every .hero carries `margin-top: var(--header-h)` so it clears the
   fixed header. On the homepage the hero is the first child of <main>, so that
   works perfectly. On inner pages the first child is the `.breadcrumbs` bar,
   which had NO header clearance — it sat hidden behind the fixed header, and
   the hero's own top margin then landed *below* the breadcrumb, leaving a
   ~48px white strip between the header and the blue hero.
   Fix: move the header clearance onto the breadcrumb (the actual first child),
   and zero the hero's now-redundant top margin so it sits flush under the
   breadcrumb. The breadcrumb becomes visible directly under the header and the
   hero starts immediately below it — no blank strip, no header overlap.
   The homepage (no breadcrumb; hero is the first child) is untouched and keeps
   its own header-clearing margin.
   ========================================================================== */
main > .breadcrumbs:first-child { margin-top: var(--header-h); }
.breadcrumbs + .hero { margin-top: 0 !important; }


/* === Real image integration: consistent, balanced section image fit === */
.split-media{overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.split-media img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover;object-position:center}
@media(min-width:900px){.split-media img{min-height:360px}}
.icard img{display:block;width:100%;height:200px;object-fit:cover;object-position:center}

/* County pages only: make split-section images fill the section height cleanly
   (fixes the small / floating image in "Homes We Serve" and overview splits).
   Scoped to .county-page so service/state/city/home pages are unaffected. */
.county-page .split-media{align-self:stretch}
.county-page .split-media img{height:100%;min-height:320px;object-fit:cover;object-position:center}

/* City pages only: make split-section images fill the section height cleanly
   (fixes the small / floating image in the second section and other splits).
   Scoped to .city-page so home / service / county / state / about pages are unaffected. */
.city-page .split-media{align-self:stretch}
.city-page .split-media img{height:100%;min-height:300px;object-fit:cover;object-position:center}
@media (max-width:768px){
  .city-page .split-media img{min-height:260px}
}

/* ============================================================
   Section spacing normalization (service / county / city pages)
   - Pulls the small eyebrow/pre-heading text closer to its H2
     (was ~75px in .prose because of .prose h2{margin-top:1.6em}).
   - Tightens the gap between the two adjacent white sections on
     county pages (County Overview -> Local Climate) so it is not
     double-padded. Scoped to the three page-type body classes only.
   ============================================================ */
.service-page .eyebrow,
.county-page .eyebrow,
.city-page .eyebrow{margin-bottom:10px}
.service-page .eyebrow + h2,
.county-page .eyebrow + h2,
.city-page .eyebrow + h2{margin-top:0 !important}

/* County pages: reduce the large gap between the second and third
   sections (the two consecutive white sections). Only the plain white
   section that directly follows another plain white section is tightened. */
.county-page section.section:not([class*="--"]) + section.section:not([class*="--"]){padding-top:28px}
@media (max-width:768px){
  .county-page section.section:not([class*="--"]) + section.section:not([class*="--"]){padding-top:16px}
}

/* Contact page: make the contact details (phone, address, hours, icons) readable
   on the light main background. The .footer-contact block is shared with the dark
   site footer, so this override is scoped to the contact page main content only
   (the footer sits outside <main> and is left unchanged). */
.contact-page main .footer-contact a,
.contact-page main .footer-contact span{color:#243447 !important;opacity:1 !important}
.contact-page main .footer-contact a[href^="tel:"]{color:#075C9F !important;font-weight:800 !important}
.contact-page main .footer-contact svg{color:#075C9F !important;opacity:1 !important}

/* ============================================================
   GLOBAL: content-section image sizing + label/heading spacing
   Applies site-wide (homepage, about, hubs, states, services,
   counties, cities, contact, faq, free-estimate, resources).
   Real content-image wrapper is .split-media (inside .split);
   real pre-heading label is .eyebrow; header wrapper is .section-head.
   Only .split-media images are stretched, so text/stat/panel columns
   and all logos/icons/SVGs are untouched.
   ============================================================ */

/* 1) Content section images fill their section height in two-column splits */
.split-media{align-self:stretch}
.split-media img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover;object-position:center}
@media (max-width:768px){
  .split-media img{min-height:240px}
}

/* 2) Small label / eyebrow sits close to its heading (target 6-10px) */
.eyebrow{margin-top:0 !important;margin-bottom:8px !important;padding-top:0 !important;padding-bottom:0 !important;line-height:1.25 !important}
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3{margin-top:0 !important;padding-top:0 !important}
.section-head h1,
.section-head h2,
.section-head h3{margin-top:0 !important}

/* Honeypot spam field: kept in the DOM (still submitted) so backend spam
   protection keeps working, but fully hidden from real users on every form.
   "Company URL (leave blank)" must never be visible. */
.field--hp,
.honeypot,
.company-url-field,
.form-field-company-url,
.field-company-url,
.form-group-company-url,
input[name="company_url"],
label[for$="-company"],
label[for="company_url"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  height:0 !important;
  width:0 !important;
  max-height:0 !important;
  overflow:hidden !important;
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  pointer-events:none !important;
}