:root{
  --carolina:#1d5a88;
  --carolina-dk:#16466a;
  --carolina-deep:#13294b;
  --yellow:#ffc72c;
  --yellow-dk:#f0b400;
  --ink:#1b2b3a;
  --muted:#5d6e7d;
  --soft:#eaf4fb;
  --line:#d7e6f1;
  --white:#fff;
  --shadow:0 10px 28px rgba(19,41,75,.10);
  --shadow-lg:0 22px 50px rgba(19,41,75,.18);
  --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,Arial,sans-serif;color:var(--ink);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:'Archivo',system-ui,sans-serif;color:var(--carolina-deep);line-height:1.1;font-weight:800;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:1rem;padding:.85rem 1.6rem;border-radius:8px;border:2px solid transparent;cursor:pointer;transition:.18s;text-transform:uppercase;letter-spacing:.02em}
.btn-yellow{background:var(--yellow);color:var(--carolina-deep);border-color:var(--yellow)}
.btn-yellow:hover{background:var(--yellow-dk);border-color:var(--yellow-dk);transform:translateY(-2px)}
.btn-blue{background:var(--carolina);color:#fff;border-color:var(--carolina)}
.btn-blue:hover{background:var(--carolina-dk);border-color:var(--carolina-dk);transform:translateY(-2px)}
.btn-lg{padding:1.05rem 2rem;font-size:1.05rem}
.btn-block{display:flex;width:100%}

/* Offer bar */
.offerbar{background:var(--yellow);color:var(--carolina-deep)}
.offerbar-in{display:flex;justify-content:space-between;align-items:center;height:36px;font-size:.82rem;font-weight:600;gap:1rem}
.offerbar-in span{font-family:'Archivo',sans-serif}
.offerbar-phone{font-weight:800;white-space:nowrap}
@media(max-width:760px){.offerbar-in span{font-size:.74rem}}

/* Header */
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line);transition:.2s}
.header.scrolled{box-shadow:var(--shadow)}
.header-in{display:flex;align-items:center;justify-content:space-between;height:58px;gap:1.1rem}
.brand{display:flex;align-items:center;line-height:1;flex:none}
.brand .lockup{height:48px;width:auto;display:block;flex:none}
/* one piece of artwork, so it scales as a unit instead of per-line */
@media(max-width:420px){.brand .lockup{height:44px}}
.nav{display:flex;align-items:center;gap:1.4rem;margin-left:auto}
.nav>a,.nav .nav-top{font-family:'Archivo',sans-serif;font-weight:600;font-size:.93rem;color:var(--ink);white-space:nowrap;cursor:pointer}
.nav>a:hover,.nav .nav-top:hover{color:var(--carolina-dk)}
.nav-item{position:relative}
.nav .nav-top{display:inline-flex;align-items:center;gap:.28rem}
.caret{font-size:.62em;color:var(--carolina);transition:transform .2s}
.nav-item:hover .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:100%;left:0;min-width:236px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);padding:.5rem;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(8px);transition:.16s;z-index:60}
.nav-item:hover .dropdown,.nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{padding:.6rem .8rem;border-radius:7px;font-family:'Archivo',sans-serif;font-weight:600;font-size:.92rem;color:var(--ink);white-space:nowrap}
.dropdown a:hover{background:var(--soft);color:var(--carolina-dk)}
.header-actions{display:flex;align-items:center;gap:.9rem}
.header .btn{padding:.55rem 1.2rem;font-size:.86rem}
.phone-link{font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;color:var(--carolina-deep);white-space:nowrap}
.phone-link span{color:var(--carolina)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hamburger span{width:26px;height:3px;background:var(--carolina-deep);border-radius:2px}

/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;min-height:90vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:-2%;background:url('images/hero-modern-home-wide.jpg') center/cover no-repeat;transform:scale(1.08);transform-origin:center;will-change:transform;backface-visibility:hidden}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(8,18,34,.90) 0%,rgba(13,38,64,.78) 46%,rgba(20,70,110,.45) 100%)}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .82fr;gap:3rem;align-items:center;padding:4.5rem 24px;width:100%}
.hero-copy{max-width:720px}
.hero-cta{display:flex;gap:1rem;margin-top:1.9rem;flex-wrap:wrap}
.hero-cta .btn{white-space:nowrap}
.eyebrow{display:inline-block;font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--yellow);margin-bottom:1rem}
.hero h1{color:#fff;font-size:3.3rem;font-weight:900;text-shadow:0 2px 16px rgba(10,22,40,.45)}
.hero-sub{font-size:1.18rem;color:#f0f6fc;margin:1.1rem 0 1.5rem;max-width:560px;text-shadow:0 1px 10px rgba(10,22,40,.4)}
.hero-pills{list-style:none;display:flex;gap:1rem;flex-wrap:wrap;font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem}
.hero-pills li{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);padding:.4rem .9rem;border-radius:999px}
.hero-pills li span{color:var(--yellow)}

/* Hero conversion card
   ---------------------------------------------------------------------------
   Replaced the "Straight From Your Neighbors" review rotator. On a 375px phone
   that rotator started exactly at the fold and ran 487px -- 60% of the screen --
   with nothing in it to tap, while the only contact form on the page sat at
   y=14,016 (screen 17 of 21). This card puts the phone number and a 3-field
   form in that same space. Trust is kept, compressed to the rating + one quote.

   MOBILE RULES BAKED IN HERE, do not "tidy" them away:
   - inputs are 16px. Anything smaller makes iOS Safari zoom the page on focus,
     which knocks the layout sideways mid-typing and loses form completions.
   - the call button and submit are >=48px tall (comfortable thumb target).
   - the call button is a plain tel: link so the site-wide phone_click handler
     in script.js fires the Google Ads conversion with no extra wiring. */
.hero-quote{background:rgba(11,26,46,.66);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.22);border-radius:14px;padding:1.5rem 1.6rem;box-shadow:var(--shadow-lg);max-width:430px;justify-self:end;width:100%}
.qc-title{font-size:1.5rem;line-height:1.15;color:#fff;margin:0}
.qc-sub{font-size:.92rem;color:#cfe0f0;margin:.4rem 0 1.1rem;line-height:1.45}

/* Call: the loudest thing in the card. */
.qc-call{display:flex;flex-direction:column;align-items:center;gap:.1rem;background:var(--yellow);color:var(--carolina-deep);border-radius:10px;padding:.75rem 1rem;min-height:60px;justify-content:center;font-family:'Archivo',sans-serif;transition:.18s;text-align:center}
.qc-call:hover{background:var(--yellow-dk);transform:translateY(-2px)}
.qc-call-label{font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.78}
.qc-call-num{font-size:1.45rem;font-weight:900;letter-spacing:.01em;white-space:nowrap}

.qc-or{display:flex;align-items:center;gap:.8rem;margin:1rem 0 .9rem;color:#b9cfe2;font-size:.8rem;font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.qc-or::before,.qc-or::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.22)}

.qc-form{display:flex;flex-direction:column;gap:.6rem}
/* 16px is a hard floor -- see the note above. */
.qc-form input{width:100%;padding:.85rem .95rem;font-size:16px;font-family:inherit;color:var(--ink);background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.35);border-radius:8px;min-height:48px}
.qc-form input::placeholder{color:#6a7d8c}
.qc-form input:focus{outline:3px solid var(--yellow);outline-offset:1px;border-color:transparent;background:#fff}
.qc-form .btn{margin-top:.2rem;min-height:52px}
.btn-white{background:#fff;color:var(--carolina-deep);border-color:#fff}
.btn-white:hover{background:var(--soft);border-color:var(--soft);transform:translateY(-2px)}

.qc-trust{display:flex;align-items:center;gap:.55rem;margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.18);font-size:.85rem;color:#e8f1fa;flex-wrap:wrap}
.qc-rating{font-family:'Archivo',sans-serif;font-weight:700}
.qc-rating a{color:var(--yellow);text-decoration:underline}
.qc-quote{margin-top:.55rem}
.qc-quote p{font-size:.9rem;line-height:1.5;color:#dce9f4;font-style:italic}
.qc-quote cite{display:block;margin-top:.3rem;font-style:normal;font-family:'Archivo',sans-serif;font-weight:700;font-size:.82rem;color:var(--yellow)}
.qc-quote cite small{color:#b9cfe2;font-weight:600}

.gbadge{display:flex;align-items:center;gap:.4rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:.85rem}
.gbadge .g{width:22px;height:22px;border-radius:50%;background:#fff;color:#4285F4;display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:.9rem}
.gbadge .stars{color:var(--yellow);letter-spacing:.05em}

/* Label text for screen readers where the visible cue is the placeholder. */
.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}

/* Quote card */
.quote-card{background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.quote-head{background:var(--carolina-deep);color:#fff;padding:.7rem 1.3rem;border-bottom:3px solid var(--yellow);display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.quote-head h3{color:#fff;font-size:1.15rem}
.quote-head p{font-size:.78rem;color:#cfe0f0;white-space:nowrap}
.quote-form{display:flex;flex-direction:column;gap:.7rem;padding:1.5rem}
.quote-form input,.quote-form select{padding:.85rem 1rem;border:1px solid var(--line);border-radius:8px;font-size:1rem;font-family:inherit}
.quote-form input:focus,.quote-form select:focus{outline:2px solid var(--carolina);border-color:transparent}
.quote-form small{color:var(--muted);text-align:center;font-size:.78rem}
.estimator-embed{background:#fff;overflow:hidden}
.estimator-embed iframe{width:calc(100% + 17px);height:408px;border:0;display:block}

/* Sections */
.section{padding:5rem 0}
.section-soft{background:var(--carolina-deep);color:#d4e2f0}
.section-soft .section-head h2,.section-soft h2,.section-soft h3,.section-soft h4{color:#fff}
.section-soft .kicker{color:var(--yellow)}
.section-soft .lead{color:#b9cde2}
.section-soft .prose>p,.section-soft .prose li{color:#d4e2f0}
.section-soft .prose a{color:#9ec7e8}
.section-soft .fl-map-note{color:#a7bdd3}
.section-soft .btn-blue{background:var(--yellow);color:var(--carolina-deep);border-color:var(--yellow)}
.section-soft .btn-blue:hover{background:var(--yellow-dk);border-color:var(--yellow-dk);color:var(--carolina-deep)}
.section-soft .check-list li{color:#cdddee}
.section-soft .check-list strong{color:#fff}
.section-soft .check-list li::before{background:var(--yellow);color:var(--carolina-deep)}
.section-head{text-align:center;max-width:740px;margin:0 auto 3rem}
.kicker{display:inline-block;font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;color:var(--carolina-dk);margin-bottom:.6rem}
.section h2,.section-head h2{font-size:2.4rem}
.lead{color:var(--muted);font-size:1.1rem;margin-top:.7rem}

/* Damage grid */
.damage{position:relative}
.damage-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}

/* ===== Drone scan animation ===== */
.drone-layer{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:visible}
.drone{position:absolute;top:0;left:0;width:130px;transform:translate(-180px,120px);transition:transform 1.4s cubic-bezier(.45,.05,.3,1);will-change:transform}
.drone-inner{position:relative;animation:droneBob 2.6s ease-in-out infinite}
.drone-svg{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 14px rgba(19,41,75,.28))}
.prop{animation:propSpin .16s linear infinite;transform-box:fill-box;transform-origin:center}
.prop-2{animation-delay:.06s}
@keyframes propSpin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.12)}}
@keyframes droneBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.drone-light{animation:droneBlink 1.1s ease-in-out infinite}
@keyframes droneBlink{0%,100%{opacity:1}50%{opacity:.15}}
.scan-beam{position:absolute;top:72px;left:50%;width:170px;height:150px;transform:translateX(-50%);background:linear-gradient(to bottom,rgba(75,156,211,.5),rgba(255,199,44,.06) 85%,rgba(75,156,211,0));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);opacity:0;transition:opacity .35s}
.drone.scanning .scan-beam{opacity:1;animation:beamPulse 1s ease-in-out infinite}
@keyframes beamPulse{0%,100%{opacity:.55}50%{opacity:.95}}
.drone-bubble{position:absolute;bottom:96px;left:50%;transform:translate(-50%,10px) scale(.6);opacity:0;background:#fff;border:3px solid #13294b;border-radius:14px;padding:.5rem .85rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:.88rem;color:#13294b;white-space:nowrap;box-shadow:0 8px 20px rgba(19,41,75,.18);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .25s}
.drone-bubble::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);border:7px solid transparent;border-top:10px solid #13294b}
.drone-bubble.show{opacity:1;transform:translate(-50%,0) scale(1)}
.damage-item.scan-glow{border-color:var(--carolina);box-shadow:0 0 0 4px rgba(255,199,44,.5),0 18px 40px rgba(19,41,75,.18);transform:translateY(-6px)}
.damage-item.scanned{border-color:var(--carolina)}
.damage-item{text-align:center;padding:2rem 1.2rem;border:1px solid var(--line);border-radius:var(--radius);transition:.2s;background:#fff}
.damage-item:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--carolina)}
.dmg-ic{font-size:2.4rem;margin-bottom:.8rem}
.damage-item h3,.damage-item h4{font-size:1.15rem;margin-bottom:.4rem}
.damage-item p{color:var(--muted);font-size:.95rem}

/* Why */
.why-in{display:grid;grid-template-columns:1fr 1.05fr;gap:3.5rem;align-items:center}
.why-media img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%;height:480px;object-fit:cover}
.why-copy h2{font-size:2.3rem;margin:.3rem 0 1rem}
.check-list{list-style:none;margin:1.3rem 0 1.8rem;display:flex;flex-direction:column;gap:.9rem}
.check-list li{padding-left:2rem;position:relative;color:var(--muted)}
.check-list li::before{content:"\2714";position:absolute;left:0;top:.1rem;color:#fff;background:var(--carolina);width:1.4rem;height:1.4rem;border-radius:50%;font-size:.78rem;display:flex;align-items:center;justify-content:center}
.check-list strong{color:var(--ink)}

/* Stats */
.stats{background:var(--carolina);color:#fff;padding:3rem 0}
.stats-in{display:flex;justify-content:space-around;gap:1.5rem;flex-wrap:wrap;text-align:center}
.stat-num{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:3rem;color:var(--yellow)}
.stat-lbl{color:#eaf4fb;font-weight:600;font-size:.95rem}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.step{text-align:center;padding:1rem}
.step-no{width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:var(--yellow);color:var(--carolina-deep);font-family:'Archivo',sans-serif;font-weight:900;font-size:1.6rem;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow)}
.step h3,.step h4{font-size:1.15rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.95rem}

/* Types grid */
.types-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.4rem}
.type-card{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);height:230px;display:block}
.type-card img{width:100%;height:100%;object-fit:cover;transition:.5s}
.type-card:hover img{transform:scale(1.08)}
.type-card span{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(19,41,75,.88));color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:1.2rem;padding:2rem 1.2rem .9rem;display:flex;align-items:flex-end}
.type-card::after{content:"";position:absolute;left:0;bottom:0;height:5px;width:100%;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:.25s}
.type-card:hover::after{transform:scaleX(1)}

/* Services */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;transition:.2s}
.svc:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--carolina)}
.svc-ic{font-size:1.8rem;width:58px;height:58px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:12px;margin-bottom:1rem}
.svc h3{font-size:1.2rem;margin-bottom:.4rem}
.svc p{color:var(--muted);font-size:.95rem}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:1rem}
.g-item{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:.5s}
.g-item video{width:100%;height:100%;object-fit:cover;display:block;transition:.5s}
.g-item:hover img{transform:scale(1.08)}
.g-item:hover video{transform:scale(1.08)}
.g-big{grid-column:span 2;grid-row:span 2}

/* Reviews */
.stars-big{color:#a67c00;font-size:1.3rem;margin-top:.7rem;letter-spacing:2px}
.stars-big span{color:var(--muted);font-size:.95rem;letter-spacing:0;margin-left:.4rem}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:3rem}
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.7rem}
.review .stars{color:#a67c00;letter-spacing:2px}
.review p{font-style:italic}
.review cite{color:var(--carolina-deep);font-weight:700;font-style:normal;font-family:'Archivo',sans-serif}
.badges-row{display:flex;align-items:center;justify-content:center;gap:2.5rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid var(--line)}
.badges-row img{height:80px;width:auto;object-fit:contain;filter:grayscale(.1);opacity:.95;transition:.2s}
.badges-row img:hover{filter:none;opacity:1}

/* Logo marquee (scrolling credentials strip) */
.logo-strip{padding:3rem 0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.logo-strip-kicker{text-align:center;font-family:'Archivo',sans-serif;font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:.78rem;color:var(--muted);margin-bottom:1.6rem}
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex;align-items:center;width:max-content;animation:logoscroll 55s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;flex:none}
.marquee-track img{height:56px;width:auto;object-fit:contain;margin:0 1.9rem;filter:grayscale(.25);opacity:.85;transition:.2s;flex:none}
.marquee-track img:hover{filter:none;opacity:1}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Static fallback (reduced motion): show ONE logo set as a wrapped grid — the
   duplicate set exists only for the seamless scroll loop and must be hidden. */
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;width:auto;justify-content:center}.mq-set{flex-wrap:wrap;justify-content:center;gap:1.5rem 2rem}.mq-set-dup{display:none}.marquee-track img{margin:0}.marquee{-webkit-mask-image:none;mask-image:none}}
@media (max-width:640px){.marquee-track img{height:46px;margin:0 1.3rem}}

/* Florida permit map */
.fl-map-wrap{max-width:680px;margin:0 auto 3.5rem;text-align:center}
.fl-maps-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;max-width:1180px;margin:0 auto 1rem;align-items:start}
@media(max-width:820px){.fl-maps-grid{grid-template-columns:1fr;gap:2.8rem}}
/* Three service-area states. Must sit AFTER the two-column rules above, its own media query
   included, or the base .fl-maps-grid breakpoint would lose to it and stack three panels
   across a phone. Goes straight to one column — two would leave an orphan. */
.fl-maps-3{grid-template-columns:repeat(3,1fr);max-width:1240px;align-items:stretch}
@media(max-width:940px){.fl-maps-3{grid-template-columns:1fr;gap:2.8rem}}
/* Navy service-area cards. The map PNGs are transparent and composite onto this card, so
   the card colour and the .sa-* rules below have to stay in step — build_service_area_maps.py
   pulls both out of this stylesheet at render time rather than keeping its own copy. */
.fl-maps-3 .fl-map-panel{background:linear-gradient(160deg,#1c3f70 0%,#13294b 55%,#0e1f3b 100%);border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:1.7rem 1.4rem 1.55rem;box-shadow:0 18px 44px rgba(19,41,75,.30)}
/* .tag-service has to be in the selector to outrank the cream .fl-map-tag.tag-service pill
   defined further down — equal specificity otherwise, and source order would hand it the win. */
.fl-maps-3 .fl-map-tag.tag-service{background:rgba(255,199,44,.10);color:var(--yellow);border:1px solid rgba(255,199,44,.45)}
.fl-maps-3 .fl-map-title{color:#fff;font-size:1.34rem;margin:.65rem 0 0}
.fl-maps-3 .fl-map-title::after{content:"";display:block;width:38px;height:3px;border-radius:2px;background:var(--yellow);margin:.7rem auto 0}
.fl-maps-3 .fl-map{background:none;border:0;box-shadow:none;padding:.5rem 0 0;border-radius:0}
.fl-maps-3 .fl-map-legend{margin-top:.85rem;font-size:.88rem}
.fl-maps-3 .lg-office{color:#fff}
.fl-maps-3 .fl-map-note{color:rgba(255,255,255,.62);font-size:.85rem;margin-top:.5rem}
/* Inside the rendered SVG (rasterised to PNG — no live SVG on the page uses these). */
.sa-shape{fill:url(#saFill);stroke:#ffc72c;stroke-width:1.6;stroke-linejoin:round}
.sa-pin-halo{fill:rgba(255,199,44,.16)}
.sa-pin{fill:url(#saGold);stroke:rgba(255,255,255,.5);stroke-width:1}
.sa-pin-core{fill:#13294b}
/* Halo is translucent, not solid navy: the PNG is transparent and lands on a navy GRADIENT,
   so an opaque halo would print a flat navy patch around every label. This just softens where
   a name crosses the gold outline. */
.sa-lbl{font-family:'Archivo',sans-serif;font-weight:700;font-size:16.5px;fill:#fff;paint-order:stroke;stroke:rgba(14,31,59,.55);stroke-width:3.5;stroke-linejoin:round}
.fl-map-panel{text-align:center}
.fl-map-tag{display:inline-block;font-family:'Archivo',sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .75rem;border-radius:999px}
.fl-map-tag.tag-permits{background:var(--soft);color:var(--carolina-dk)}
.fl-map-tag.tag-service{background:#fff5d6;color:#6b5000}
.fl-map-title{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.2rem;margin:.55rem 0 .7rem}
.fl-map{width:100%;height:auto;display:block;background:linear-gradient(180deg,#f3f9fd,#eaf4fb);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.fl-shape path{fill:#fff;stroke:var(--carolina);stroke-width:2;stroke-linejoin:round}
.fl-stars use{fill:var(--yellow);stroke:#13294b;stroke-width:.6;opacity:.92}
.fl-office{fill:var(--carolina-deep);opacity:.92}
.fl-office-core{fill:#fff}
.fl-office-lbl{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;fill:var(--carolina-deep)}
.fl-office-lbl,.fl-city-lbl{paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
.fl-county-lbls text{font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;letter-spacing:.18em;fill:var(--carolina);opacity:.45}
.fl-city-dot{fill:var(--carolina-dk);opacity:.75}
.fl-city-lbl{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;fill:#3d566e}
.fl-inset-bg{fill:#fff;stroke:var(--line);stroke-width:1.5}
.fl-inset-state{fill:var(--soft);stroke:var(--carolina);stroke-width:1.5;stroke-linejoin:round}
.fl-inset-zoom{fill:rgba(255,199,44,.25);stroke:var(--yellow-dk);stroke-width:2}
.fl-map-legend{display:flex;justify-content:center;gap:2rem;margin-top:1rem;font-family:'Archivo',sans-serif;font-weight:600;font-size:.92rem;flex-wrap:wrap}
.lg-star{color:#7a5c00}
.lg-office{color:var(--carolina-deep)}
.fl-map-note{color:var(--muted);font-size:.88rem;margin-top:.4rem}

/* Areas */
.areas-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.areas-col h3,.areas-col h4{color:var(--carolina-deep);font-size:1.2rem;margin-bottom:.8rem;padding-bottom:.5rem;border-bottom:3px solid var(--yellow)}
.areas-col ul{list-style:none;display:grid;gap:.45rem}
.areas-col li{color:var(--muted);padding-left:1.2rem;position:relative}
.areas-col li::before{content:"\1F4CD";position:absolute;left:0;font-size:.85rem}
.areas-col li a{color:var(--carolina-deep);text-decoration:none;font-weight:600}
.areas-col li a:hover{color:var(--carolina);text-decoration:underline}

/* Chips + FAQ (city pages) */
.chips{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{background:#eef5fb;color:var(--carolina-deep);border:1px solid #d6e6f3;padding:.45rem .9rem;border-radius:999px;font-size:.92rem;font-weight:600}
.faq-list{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
details.faq{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:'Archivo',sans-serif;font-weight:700;color:var(--carolina-deep);display:flex;justify-content:space-between;align-items:center;gap:1rem}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";color:var(--carolina);font-size:1.3rem;font-weight:800;flex-shrink:0}
details.faq[open] summary::after{content:"\2212"}
details.faq p{padding:0 1.2rem 1.1rem;color:var(--muted);margin:0}

/* News */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.news-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--carolina);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.2s;display:flex;flex-direction:column}
.news-card:hover{transform:translateY(-4px);border-color:var(--carolina);box-shadow:var(--shadow-lg)}
.news-card-body{padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.news-cat{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--carolina-dk)}
.news-card h3{font-size:1.18rem;line-height:1.25}
.news-card p{color:var(--muted);font-size:.92rem;flex:1}
.news-meta{font-size:.8rem;color:var(--muted)}
.news-more{color:var(--carolina-dk);font-weight:700;font-family:'Archivo',sans-serif;font-size:.9rem;margin-top:.3rem}
.key-takeaways{background:var(--soft);border-left:4px solid var(--carolina);border-radius:8px;padding:1.2rem 1.4rem;margin:0 0 1.8rem}
.key-takeaways h4{color:var(--carolina-deep);font-size:1rem;margin-bottom:.6rem;font-family:'Archivo',sans-serif}
.key-takeaways ul{margin:0 0 0 1.1rem;color:var(--ink)}
.key-takeaways li{margin-bottom:.4rem}
@media(max-width:980px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.news-grid{grid-template-columns:1fr}}

/* City photo hero + gallery */
.page-hero-img{background-size:cover;background-position:center;background-repeat:no-repeat}
.city-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.city-gallery img{width:100%;height:240px;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)}
@media(max-width:760px){.city-gallery{grid-template-columns:1fr}.city-gallery img{height:220px}}

/* Geo bar (homepage location personalization) */
.geo-bar{background:var(--carolina-deep);color:#eaf4fb;font-size:.85rem;border-bottom:2px solid var(--yellow)}
.geo-bar .wrap{display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;padding:.5rem 24px}
.geo-bar strong{color:#fff}
.geo-bar select{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.25rem .5rem;font-family:inherit;font-size:.82rem;cursor:pointer}
.geo-bar select option{color:#13294b}

/* Finance band */
.finance{background:var(--yellow);padding:3rem 0}
.finance-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.finance h2{color:var(--carolina-deep);font-size:2rem}
.finance p{color:#5a4a10;font-weight:500;max-width:640px}

/* Contact */
.contact-in{display:grid;grid-template-columns:1fr 1.05fr;gap:3rem;align-items:start}
.contact-copy h2{font-size:2.2rem;margin:.3rem 0 .8rem}
.contact-copy p{color:var(--muted)}
.offices{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
.office{background:var(--soft);border-radius:10px;padding:1rem;font-size:.9rem;display:flex;flex-direction:column;gap:.15rem}
.office strong{font-family:'Archivo',sans-serif;color:var(--carolina-deep)}
.office a{color:var(--carolina-dk);font-weight:700}
.email-line a{color:var(--carolina-dk);font-weight:700}
.contact-form-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-lg)}
.contact-form{display:flex;flex-direction:column;gap:1rem}
.contact-form label{font-family:'Archivo',sans-serif;font-weight:600;font-size:.9rem;display:flex;flex-direction:column;gap:.35rem}
.contact-form input,.contact-form select{padding:.8rem 1rem;border:1px solid var(--line);border-radius:8px;font-size:1rem;font-family:inherit}
.contact-form input:focus,.contact-form select:focus{outline:2px solid var(--carolina);border-color:transparent}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.hidden-field{display:none}
.contact-form textarea{padding:.8rem 1rem;border:1px solid var(--line);border-radius:8px;font-size:1rem;font-family:inherit;resize:vertical}
.contact-form textarea:focus{outline:2px solid var(--carolina);border-color:transparent}

/* Footer */
.footer{background:var(--carolina-deep);color:#b9cde2;padding-top:3.5rem}
.footer-in{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem}
.footer-word{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.5rem;color:#fff;line-height:1.05;margin-bottom:1rem;display:flex;flex-direction:column}
.footer-word span{font-size:.92rem;font-weight:600;color:var(--yellow)}
.footer-brand p{font-size:.92rem;margin-bottom:1rem}
.footer-lic{font-size:.82rem;color:#86a2c0}
.footer-col h3{color:#fff;font-size:1rem;margin-bottom:1rem;font-family:'Archivo',sans-serif}
.footer-col a{display:block;color:#b9cde2;font-size:.92rem;padding:.3rem 0;transition:.15s}
.footer-col a:hover{color:var(--yellow);padding-left:4px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.2rem 0}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:#86a2c0;flex-wrap:wrap;gap:.5rem}
.footer-note{color:var(--yellow);font-weight:700}

/* Mobile bar */
.mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 20px rgba(19,41,75,.12);padding:.6rem;gap:.6rem}
.mobile-bar a{flex:1;text-align:center;padding:.85rem;border-radius:8px;font-family:'Archivo',sans-serif;font-weight:700}
/* Call is the primary action on the bar: it used to be the pale one while the
   form button took the yellow, which is backwards for a business that wants the
   phone to ring. */
.mb-call{background:var(--yellow);color:var(--carolina-deep)}
.mb-quote{background:var(--soft);color:var(--carolina-deep);border:1px solid var(--line)}

/* Photo vibrancy — make real photos pop */
.type-card img,.g-item img,.why-media img{filter:saturate(1.1) contrast(1.05);image-rendering:auto}

/* Ghost logo watermarks — brand reinforcement */
.wm{position:relative;overflow:hidden}
.wm::before{content:"";position:absolute;background:url('images/logoprovidential.png') center/contain no-repeat;opacity:.07;pointer-events:none;z-index:0}
.wm>.wrap{position:relative;z-index:1}
.wm-center::before{width:640px;height:640px;left:50%;top:50%;transform:translate(-50%,-50%)}
.wm-right::before{width:540px;height:540px;right:-130px;top:50%;transform:translateY(-50%) rotate(-8deg)}
.wm-left::before{width:540px;height:540px;left:-130px;top:50%;transform:translateY(-50%) rotate(8deg)}
.footer{position:relative;overflow:hidden}
.footer::before{content:"";position:absolute;right:-70px;bottom:-80px;width:460px;height:460px;background:url('images/logoprovidential.png') center/contain no-repeat;opacity:.07;filter:brightness(0) invert(1);pointer-events:none}
.footer>*{position:relative;z-index:1}
@media(max-width:760px){.wm::before{width:420px;height:420px}}

/* Inner pages */
.page-hero{background:linear-gradient(120deg,var(--carolina-deep),var(--carolina));color:#fff;padding:3.4rem 0 3rem;text-align:center}
.page-hero h1{color:#fff;font-size:2.6rem}
.page-hero p{color:#e7f1fa;max-width:680px;margin:.6rem auto 0;font-size:1.1rem}
.breadcrumb{font-size:.85rem;color:#cfe6f6;margin-bottom:.7rem;font-family:'Archivo',sans-serif}
.breadcrumb a{color:#fff;opacity:.9}
.prose{max-width:840px;margin:0 auto}
.prose h2{font-size:1.7rem;margin:2rem 0 .8rem;color:var(--carolina-deep)}
.prose h3{font-size:1.2rem;margin:1.4rem 0 .5rem;color:var(--carolina-deep)}
.prose>p{color:var(--ink);margin-bottom:1rem;line-height:1.75}
.prose ul{margin:0 0 1.2rem 1.3rem;color:var(--ink)}
.prose li{margin-bottom:.5rem;line-height:1.6}
.prose a{color:var(--carolina-dk);font-weight:600}
.page-cta{background:var(--yellow);text-align:center;padding:3rem 0}
.page-cta h2{color:var(--carolina-deep);font-size:1.9rem}
.page-cta p{color:#5a4a10;margin:.5rem auto 1.3rem;max-width:620px}
.svc-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin:1.4rem 0}
.svc-links a{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:1.3rem 1.4rem;font-family:'Archivo',sans-serif;font-weight:700;color:var(--carolina-deep);box-shadow:var(--shadow);transition:.2s}
.svc-links a:hover{transform:translateY(-4px);border-color:var(--carolina)}
@media(max-width:760px){.page-hero h1{font-size:1.9rem}.svc-links{grid-template-columns:1fr}}

/* Responsive */
@media(max-width:980px){
  .hero-in{grid-template-columns:1fr;padding:3.5rem 24px}
  .hero h1{font-size:2.5rem}
  .hero-quote{justify-self:start;max-width:520px}
  .why-in,.contact-in{grid-template-columns:1fr}
  .why-media img{height:340px}
  .damage-grid,.steps{grid-template-columns:repeat(2,1fr)}
  .types-grid,.services-grid,.reviews-grid{grid-template-columns:repeat(2,1fr)}
  .areas-wrap{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:170px}
  .g-big{grid-column:span 2;grid-row:span 1}
}
/* The brand lockup is ~224px wide (the old stacked logo was 45px), so the
   header runs out of room sooner. The offer bar above already carries the phone
   number, so drop the duplicate in the header before the nav gets crowded --
   that buys back ~143px and keeps the full nav on laptops. */
@media(max-width:1250px){ .phone-link{display:none} }

/* Below this the full nav genuinely doesn't fit; switch to the hamburger. */
@media(max-width:1100px){
  .nav{display:none;position:absolute;top:58px;left:0;right:0;flex-direction:column;align-items:stretch;background:#fff;border-bottom:1px solid var(--line);padding:.4rem 24px 1rem;box-shadow:var(--shadow);margin-left:0;gap:0}
  .nav.open{display:flex}
  .nav>a,.nav .nav-top{padding:.75rem 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nav-item{width:100%}
  .nav .nav-top{display:flex;justify-content:space-between}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:.2rem 0 .4rem .9rem;min-width:0;background:transparent}
  .dropdown a{padding:.5rem 0;border-bottom:1px solid var(--line)}
  .caret{display:none}
  .phone-link{display:none}
  .hamburger{display:flex}
}
@media(max-width:760px){
  .types-grid,.services-grid,.reviews-grid,.damage-grid,.steps{grid-template-columns:1fr}
  .offices{grid-template-columns:1fr}
  .footer-in{grid-template-columns:1fr}
  .section h2,.section-head h2{font-size:1.8rem}
  .mobile-bar{display:flex}
  /* the fixed bottom bar carries Call Now + Free Inspection here, so the
     header's duplicate button just crowds the wider brand lockup */
  .header .btn{display:none}
  body{padding-bottom:64px}
  .drone-layer{display:none}
}
@media (prefers-reduced-motion: reduce){
  .drone-layer{display:none}
  .hero-bg{transform:none !important}
}

/* ===================================================================
   DESIGN CENTER  (/design-center hub + per-brand mini-pages)
   =================================================================== */

/* Hub intro band */
.dc-intro{max-width:840px;margin:0 auto 2.5rem;text-align:center}
.dc-intro p{color:var(--muted);font-size:1.08rem;margin-top:.6rem}

/* Material grouping on the hub */
.dc-material{margin:0 0 3.2rem}
.dc-material-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-bottom:3px solid var(--yellow);padding-bottom:.6rem;margin-bottom:1.4rem}
.dc-material-head h2{font-size:1.7rem}
.dc-material-head a{font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;color:var(--carolina-dk);white-space:nowrap}
.dc-material-head a:hover{text-decoration:underline}
.dc-material>p{color:var(--muted);margin:-.6rem 0 1.2rem;max-width:880px}

/* Brand card grid (hub) */
.dc-brands{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.dc-brand-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.2s}
.dc-brand-card:hover{transform:translateY(-5px);border-color:var(--carolina);box-shadow:var(--shadow-lg)}
.dc-card-logo{height:108px;display:flex;align-items:center;justify-content:center;padding:1.2rem 1.4rem;border-bottom:1px solid var(--line);background:#fff}
.dc-card-logo img{max-height:64px;max-width:84%;width:auto;object-fit:contain}
.dc-card-logo .dc-wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.5rem;color:var(--carolina-deep);letter-spacing:-.01em;text-align:center}
.dc-brand-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.dc-brand-body h3{font-size:1.2rem}
.dc-brand-tag{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;color:var(--carolina-dk)}
.dc-brand-body p{color:var(--muted);font-size:.93rem;flex:1}
.dc-brand-more{font-family:'Archivo',sans-serif;font-weight:700;color:var(--carolina-dk);font-size:.92rem;margin-top:.3rem}
.dc-brand-card:hover .dc-brand-more{color:var(--carolina)}

/* Comparison table */
.dc-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:1.2rem 0 .6rem}
.dc-table{width:100%;border-collapse:collapse;min-width:640px;font-size:.95rem;background:#fff}
.dc-table th,.dc-table td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
.dc-table thead th{background:var(--carolina-deep);color:#fff;font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;border-bottom:none}
.dc-table tbody tr:nth-child(even){background:var(--soft)}
.dc-table tbody tr:last-child td{border-bottom:none}
.dc-table td:first-child,.dc-table th:first-child{font-family:'Archivo',sans-serif;font-weight:700;color:var(--carolina-deep)}
.dc-table-note{color:var(--muted);font-size:.85rem;margin:.2rem 0 0}

/* Brand page — top block (intro + logo card) */
.dc-brand-top{display:grid;grid-template-columns:1.5fr 1fr;gap:2.4rem;align-items:center;margin-bottom:1.6rem}
.dc-brand-top .dc-intro-copy p{color:var(--ink);line-height:1.75;margin-bottom:1rem}
.dc-logo-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:2rem;display:flex;align-items:center;justify-content:center;min-height:150px}
.dc-logo-card img{max-height:104px;max-width:90%;width:auto;object-fit:contain}
.dc-logo-card .dc-wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-size:2rem;color:var(--carolina-deep);text-align:center}

/* External resource buttons (brochure / colors / visualizer / warranty) */
.dc-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin:.4rem 0 2.2rem}
.dc-action{display:inline-flex;align-items:center;gap:.55rem;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:.85rem 1.2rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:.92rem;color:var(--carolina-deep);transition:.18s}
.dc-action:hover{background:#fff;border-color:var(--carolina);transform:translateY(-2px);box-shadow:var(--shadow)}
.dc-action .dc-ic{font-size:1.15rem;line-height:1}
.dc-action .dc-ext{color:var(--muted);font-size:.78rem;font-weight:600}
.dc-action-primary{background:var(--carolina);border-color:var(--carolina);color:#fff}
.dc-action-primary:hover{background:var(--carolina-dk);border-color:var(--carolina-dk);color:#fff}
.dc-action-primary .dc-ext{color:#dcebff;color:rgba(255,255,255,.8)}

/* Product line cards */
.dc-lines{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin:1rem 0 1.6rem}
.dc-line{background:#fff;border:1px solid var(--line);border-left:4px solid var(--carolina);border-radius:10px;padding:1.2rem 1.3rem;transition:.18s}
.dc-line:hover{box-shadow:var(--shadow);border-left-color:var(--yellow-dk)}
.dc-line-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-bottom:.35rem}
.dc-line-head h4{font-size:1.08rem;margin:0}
.dc-tier{flex:none;font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.62rem;background:var(--soft);color:var(--carolina-dk);border:1px solid var(--line);padding:.22rem .55rem;border-radius:999px}
.dc-tier.tier-lux{background:#fff6da;color:#6b5000;border-color:#f0dca0}
.dc-line p{color:var(--muted);font-size:.92rem;margin:0}

/* Spec strip */
.dc-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:1.4rem 0 1.8rem}
.dc-spec{background:var(--soft);border-radius:10px;padding:1.1rem 1rem;text-align:center}
.dc-spec b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:1.25rem;color:var(--carolina-deep);line-height:1.15}
.dc-spec span{display:block;color:var(--muted);font-size:.8rem;font-weight:600;margin-top:.25rem}

/* Cross-link callout (placed on material service pages) */
.dc-cross{background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--yellow-dk);border-radius:var(--radius);padding:1.3rem 1.5rem;margin:1.6rem 0}
.dc-cross h3{font-size:1.15rem;margin:0 0 .4rem}
.dc-cross p{color:var(--muted);font-size:.95rem;margin:0 0 .8rem}
.dc-cross-links{display:flex;flex-wrap:wrap;gap:.6rem}
.dc-cross-links a{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.5rem .95rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:.88rem;color:var(--carolina-deep);transition:.15s}
.dc-cross-links a:hover{border-color:var(--carolina);color:var(--carolina-dk)}

/* Legal / attribution note */
.dc-note{color:var(--muted);font-size:.82rem;line-height:1.6;border-top:1px solid var(--line);margin-top:2.5rem;padding-top:1.2rem}

/* Design Center — featured products + color swatches (Sunshine Metal, etc.) */
.dc-products{display:grid;grid-template-columns:repeat(2,1fr);gap:1.4rem;margin:1rem 0 1.8rem}
.dc-product{background:#fff;border:1px solid var(--line);border-top:4px solid var(--carolina);border-radius:12px;padding:1.5rem 1.5rem 1.6rem;box-shadow:var(--shadow)}
.dc-prod-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem;margin-bottom:.5rem}
.dc-prod-head h3{margin:0;font-size:1.3rem;color:var(--carolina-deep)}
.dc-prod-tag{background:var(--soft);color:var(--carolina-dk);font-family:'Archivo',sans-serif;font-weight:700;font-size:.7rem;padding:.32rem .6rem;border-radius:999px;white-space:nowrap;line-height:1.2}
.dc-product>p{color:var(--ink);line-height:1.7;font-size:.94rem;margin:.2rem 0 1rem}
.dc-prod-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem .9rem;margin:0 0 1rem;border-top:1px solid var(--line);padding-top:1rem}
.dc-prod-specs>div{display:flex;flex-direction:column}
.dc-prod-specs b{font-family:'Archivo',sans-serif;font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:700}
.dc-prod-specs span{color:var(--ink);font-size:.9rem;font-weight:600}
.dc-prod-features{list-style:none;padding:0;margin:0 0 1.1rem}
.dc-prod-features li{position:relative;padding-left:1.45rem;margin-bottom:.4rem;color:var(--ink);font-size:.9rem;line-height:1.5}
.dc-prod-features li::before{content:"\2713";position:absolute;left:0;top:.02rem;color:var(--carolina);font-weight:900}
.dc-prod-link{display:inline-flex;align-items:center;gap:.4rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;color:#fff;background:var(--carolina);border-radius:9px;padding:.7rem 1.1rem;transition:.18s}
.dc-prod-link:hover{background:var(--carolina-dk);transform:translateY(-2px);box-shadow:var(--shadow);color:#fff}
.dc-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:.9rem;margin:1.1rem 0 1.2rem}
.dc-swatch{display:flex;flex-direction:column;gap:.5rem}
.dc-chip{width:100%;height:62px;border-radius:8px;border:1px solid rgba(0,0,0,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.dc-chip-none{background:repeating-linear-gradient(45deg,#e9eef4,#e9eef4 5px,#dbe3ec 5px,#dbe3ec 10px)}
.dc-swatch-name{font-size:.85rem;color:var(--ink);font-weight:600;line-height:1.25;text-align:center}
.dc-color-group{font-family:'Archivo',sans-serif;font-size:1.02rem;font-weight:800;color:var(--carolina-deep);margin:1.5rem 0 .1rem}
/* Reviews page */
.rev-platforms{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin:1.2rem 0 .8rem}
.rev-plat{display:flex;flex-direction:column;gap:.25rem;background:#fff;border:1px solid var(--line);border-top:4px solid var(--carolina);border-radius:12px;padding:1.15rem 1.05rem;box-shadow:var(--shadow);transition:.18s;text-align:center;align-items:center}
.rev-plat:hover{transform:translateY(-3px);border-top-color:var(--yellow-dk);box-shadow:0 10px 30px rgba(0,0,0,.1)}
.rev-plat-name{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;color:var(--carolina-deep)}
.rev-plat-rating{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.28rem;color:var(--carolina-deep);line-height:1.15}
.rev-plat-rating .star{color:var(--yellow-dk)}
.rev-plat-rating.is-text{font-size:1.02rem;padding:.14rem 0}
.rev-plat-cta{font-size:.76rem;font-weight:600;color:var(--carolina-dk);margin-top:.3rem}
.rev-note{color:var(--muted);font-size:.84rem;margin:.2rem 0 1.2rem}
.rev-widget{border:1px dashed var(--line);border-radius:12px;padding:1.6rem;background:var(--soft);min-height:120px;display:flex;align-items:center;justify-content:center;text-align:center;margin:.8rem 0 2rem}
.rev-widget-live{margin:.8rem 0 1.6rem;max-width:100%;overflow-x:hidden}
.rev-widget-fallback{color:var(--muted);margin:0}
.rev-leave{background:var(--carolina-deep);color:#fff;border-radius:16px;padding:2.2rem 1.8rem;text-align:center;margin:2rem 0}
.rev-leave h2{color:#fff;margin:0 0 .5rem}
.rev-leave p{color:rgba(255,255,255,.86);max-width:620px;margin:0 auto 1.4rem}
.rev-leave-btns{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
/* Accessibility: skip link + visible keyboard focus */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--carolina-deep);color:#fff;padding:.75rem 1.15rem;border-radius:0 0 8px 0;font-family:'Archivo',sans-serif;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--carolina);outline-offset:2px;border-radius:2px}
.footer :focus-visible,.hero :focus-visible,.rev-leave :focus-visible,.offerbar :focus-visible{outline-color:var(--yellow)}
@media(max-width:760px){.dc-products{grid-template-columns:1fr}}

@media(max-width:980px){
  .dc-brands{grid-template-columns:repeat(2,1fr)}
  .dc-brand-top{grid-template-columns:1fr;gap:1.4rem}
  .dc-logo-card{order:-1}
  .dc-specs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .dc-brands,.dc-lines{grid-template-columns:1fr}
}

/* Brand photo gallery (licensed manufacturer / project photos) */
.dc-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.1rem 0 1.8rem}
.dc-gallery figure{margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}
.dc-gallery img{width:100%;height:230px;object-fit:cover;display:block;transition:.45s}
.dc-gallery figure:hover img{transform:scale(1.06)}
.dc-gallery figcaption{font-size:.8rem;color:var(--muted);padding:.55rem .75rem;line-height:1.4}
@media(max-width:760px){.dc-gallery{grid-template-columns:1fr 1fr}.dc-gallery img{height:200px}}
@media(max-width:480px){.dc-gallery{grid-template-columns:1fr}}

/* ===================================================================
   MOBILE POLISH — phone spacing / overflow (additive; desktop untouched)
   =================================================================== */
@media(max-width:640px){
  /* Offer bar: stack so the promo line isn't clipped by the fixed height */
  .offerbar-in{flex-direction:column;height:auto;gap:.15rem;padding:.4rem 0;text-align:center;justify-content:center}
  .offerbar-in span{font-size:.72rem;line-height:1.35}
  .offerbar-phone{font-size:.86rem}
  /* Tighter vertical rhythm than the desktop 5rem/3rem bands */
  .section{padding:3rem 0}
  .page-hero{padding:2.4rem 0 2rem}
  .page-cta{padding:2.4rem 0}
  .section-head{margin-bottom:1.75rem}
  /* Stack the two big CTA buttons full-width with real spacing */
  .page-cta .btn{display:flex;width:100%;max-width:340px;margin:.55rem auto 0}
  /* Contact form: phone + email stack */
  .form-row{grid-template-columns:1fr}
  /* "Brands we install" logos: smaller + tighter (desktop stays 80px) */
  .badges-row{gap:1.4rem}
  .badges-row img{height:54px}
  /* Design Center wordmark logo cards: grow instead of clipping */
  .dc-card-logo{height:auto;min-height:96px;padding:1rem 1.2rem}
  .dc-card-logo .dc-wordmark{font-size:1.25rem;line-height:1.15}
  /* Design Center cross-link pills: comfier tap targets */
  .dc-cross-links{gap:.7rem}
  .dc-cross-links a{padding:.7rem 1rem}
}
@media(max-width:560px){
  .contact-form-wrap{padding:1.25rem}
}
@media(max-width:480px){
  .hero h1{font-size:2.05rem}
  .hero-sub{font-size:1.05rem}
  .dc-material-head a{white-space:normal}
  .gallery{grid-template-columns:1fr;grid-auto-rows:200px}
  .g-big{grid-column:span 1;grid-row:span 1}
}
@media(max-width:380px){
  .badges-row img{height:46px}
}
@media(max-width:360px){
  .dc-specs{grid-template-columns:1fr}
}

/* Tall photo hero (Design Center hub) — homepage-hero presence */
.page-hero-tall{min-height:62vh;display:flex;align-items:center;justify-content:center}
.page-hero-tall h1{font-size:3.1rem;text-shadow:0 2px 16px rgba(10,22,40,.45)}
.page-hero-tall p{text-shadow:0 1px 10px rgba(10,22,40,.4)}
/* Phones: text sits at the top of a taller band so the photo (the house!) stays
   visible below it instead of being blanketed by the headline + overlay. */
@media(max-width:760px){.page-hero-tall{min-height:72vh;align-items:flex-start}.page-hero-tall h1{font-size:2.1rem}}

/* ===================================================================
   DESIGN CENTER v2 — category architecture, photo-first cards
   (Westlake-inspired: big photography, airy spacing, editorial type)
   =================================================================== */

/* Mid-height photo hero for the 3 category pages */
.page-hero-mid{min-height:46vh;display:flex;align-items:center;justify-content:center}
.page-hero-mid h1{font-size:2.9rem;text-shadow:0 2px 16px rgba(10,22,40,.45)}
.page-hero-mid p{text-shadow:0 1px 10px rgba(10,22,40,.4)}

/* Hub: 3 big category showcase cards */
.dc-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.6rem;margin:2.4rem 0 3.2rem}
.dc-cat-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.22s}
.dc-cat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--carolina)}
.dc-cat-photo{position:relative;aspect-ratio:16/11;overflow:hidden}
.dc-cat-photo img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.dc-cat-card:hover .dc-cat-photo img{transform:scale(1.06)}
.dc-cat-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,38,0) 42%,rgba(10,20,38,.78) 100%)}
.dc-cat-title{position:absolute;left:1.3rem;bottom:1.05rem;z-index:2;color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:1.6rem;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(5,12,24,.55)}
.dc-cat-body{padding:1.25rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.65rem;flex:1}
.dc-cat-body p{color:var(--muted);font-size:.95rem;margin:0;flex:1}
.dc-cat-brands{font-family:'Archivo',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.02em;color:var(--carolina-dk);border-top:1px solid var(--line);padding-top:.7rem}

/* Category pages: subcategory groups + photo-first brand cards */
.dc-group{margin:0 0 3.4rem}
.dc-group-intro{color:var(--muted);margin:-.6rem 0 1.3rem;max-width:880px}
.dc-brands-2{grid-template-columns:repeat(2,1fr);max-width:840px}
.dc-brands-1{grid-template-columns:1fr;max-width:520px}
.dc-card-photo{position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line)}
.dc-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.dc-brand-card:hover .dc-card-photo img{transform:scale(1.05)}
.dc-logochip{position:absolute;left:.85rem;bottom:.85rem;background:rgba(255,255,255,.96);border-radius:8px;padding:.4rem .65rem;display:flex;align-items:center;box-shadow:0 4px 14px rgba(10,20,38,.28)}
.dc-logochip img{max-height:28px;max-width:104px;width:auto;object-fit:contain}
.dc-logochip .dc-wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-size:.9rem;color:var(--carolina-deep)}

/* Hub: icon CTA tiles */
.dc-cta-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:2.8rem 0 1rem}
.dc-cta-tile{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:1.9rem 1.5rem 1.7rem;text-align:center;display:flex;flex-direction:column;gap:.55rem;align-items:center;transition:.2s}
.dc-cta-tile:hover{background:#fff;border-color:var(--carolina);transform:translateY(-4px);box-shadow:var(--shadow)}
.dc-cta-ic{font-size:2.1rem;line-height:1}
.dc-cta-tile h3{font-size:1.12rem;margin:0}
.dc-cta-tile p{color:var(--muted);font-size:.92rem;margin:0;flex:1}

/* Mobile */
@media(max-width:900px){
  .dc-cats{grid-template-columns:1fr}
  .dc-brands-2{grid-template-columns:1fr;max-width:520px}
  .dc-cta-tiles{grid-template-columns:1fr}
}
@media(max-width:760px){
  .page-hero-mid{min-height:58vh;align-items:flex-start}
  .page-hero-mid h1{font-size:2rem}
}

/* MOBILE PHOTO POLISH (2026-07-16) — photo alignment fixes for phones */
@media(max-width:980px){
  /* Why-us photo: show the full 4:3 composition instead of a tall center crop */
  .why-media img{height:auto}
}

/* FIX: .page-hero's `background:` shorthand (defined later in this file) was
   resetting background-size/position to auto/top-left, so photo heroes showed
   the image corner (treetops) instead of the house — worst on phones. Higher
   specificity so cover+center always wins for photo heroes. */
.page-hero.page-hero-img{background-size:cover;background-position:center;background-repeat:no-repeat}

/* ── Design Center: seasonal Shingle Color Board ──────────────────────────────
   Full-width feature blocks (photo-led) rather than a cramped 3-across grid.
   Built from the same tokens as the .dc-* Design Center blocks above. Colour is
   never the only signal: every chip carries a text name, manufacturer, and hex. */
/* The board breaks out of .prose's 840px reading column to the full .wrap width —
   this block is carried by photography, and a 419px-wide roof shot doesn't sell a roof.
   Prose-width children (.cb-intro) opt back in so body copy keeps a readable measure. */
.cb{position:relative;left:50%;width:min(1152px,calc(100vw - 48px));
  margin:3rem 0 0 calc(min(1152px,100vw - 48px) / -2)}
.cb-intro{max-width:840px;margin:0 0 2rem}
.cb-intro p{margin:0 0 1rem}

.cb-card{display:grid;grid-template-columns:1.35fr 1fr;gap:2rem;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.5rem;margin:0 0 2rem}
.cb-card-hero{border-color:var(--yellow);box-shadow:var(--shadow-lg)}

.cb-media{display:flex;flex-direction:column;gap:1rem;min-width:0}
.cb-shot{margin:0;border-radius:10px;overflow:hidden;background:var(--soft);border:1px solid var(--line)}
.cb-shot img{width:100%;height:auto;display:block}
.cb-shot figcaption{font-size:.8rem;color:var(--muted);line-height:1.45;padding:.6rem .8rem;background:#fff}
.cb-shot-2 img{max-height:280px;object-fit:cover}

.cb-info{min-width:0}
.cb-badge{display:inline-flex;align-items:center;gap:.4rem;font-family:'Archivo',sans-serif;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.66rem;
  background:#fff6da;color:#6b5000;border:1px solid #f0dca0;padding:.32rem .7rem;
  border-radius:999px;margin:0 0 .8rem}
.cb-badge-star{color:#b98900}
.cb-mfr{font-family:'Archivo',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:.72rem;color:var(--muted);margin:0}
.cb-info h3{font-size:1.75rem;margin:.15rem 0 .3rem}
.cb-line{font-size:.92rem;color:var(--carolina-dk);font-weight:600;margin:0 0 1.1rem}
.cb-info p{margin:0 0 .9rem}

.cb-swatch{margin:0 0 1.2rem;display:flex;align-items:center;gap:.9rem}
.cb-chip{flex:none;width:104px;height:74px;border-radius:8px;border:1px solid rgba(0,0,0,.18);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.cb-swatch figcaption{font-size:.82rem;color:var(--muted);line-height:1.4}

.cb-specs{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1rem;margin:1.2rem 0 0;
  border-top:1px solid var(--line);padding-top:1rem}
.cb-specs>div{display:flex;flex-direction:column;min-width:0}
.cb-specs dt{font-family:'Archivo',sans-serif;font-size:.66rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);font-weight:700}
.cb-specs dd{margin:0;color:var(--ink);font-size:.9rem;font-weight:600}
.cb-spec-note{font-size:.78rem;color:var(--muted);line-height:1.5;margin:.9rem 0 0}

.cb-compare-h{margin:2.5rem 0 .4rem}
.cb-compare-intro{color:var(--muted);font-size:.9rem;margin:0 0 1.1rem}
.cb-compare{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:0 0 2.5rem;padding:0}
.cb-compare li{display:flex;flex-direction:column;gap:.45rem;text-align:center}
.cb-chip-sm{width:100%;height:96px}
.cb-compare b{font-family:'Archivo',sans-serif;font-size:1rem;color:var(--carolina-deep)}
.cb-compare-mfr{font-size:.82rem;color:var(--muted)}
.cb-compare-hex{font-size:.72rem;color:var(--muted);letter-spacing:.04em}

.cb-cta{background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);
  padding:2rem;text-align:center;margin:0 0 1rem}
.cb-cta h3{font-size:1.5rem;margin:0 0 .5rem}
.cb-cta p{max-width:640px;margin:0 auto 1.4rem;color:var(--ink)}
/* The board sits inside .prose, whose `a{color:var(--carolina-dk)}` rule outranks
   .btn-blue's own colour and would render dark-blue text on a blue button (1.35:1).
   Restore the button colours at higher specificity so both CTAs pass WCAG AA. */
.cb-cta a.btn-blue{color:#fff}
.cb-cta a.btn-yellow{color:var(--carolina-deep)}

@media(max-width:900px){
  .cb-card{grid-template-columns:1fr;gap:1.4rem;padding:1.2rem}
  .cb-info h3{font-size:1.5rem}
  .cb-compare{grid-template-columns:1fr;gap:1.6rem}
  .cb-chip-sm{height:80px}
}
@media(max-width:480px){
  .cb-swatch{flex-direction:column;align-items:flex-start}
  .cb-chip{width:100%;height:80px}
  .cb-specs{grid-template-columns:1fr}
  .cb-cta{padding:1.4rem}
}

/* Full-bleed showcase hero — for pages where the photo IS the pitch (rooftop
   decks). Taller than .page-hero-tall (62vh) so a 4:3 photo keeps ~70% of its
   height instead of being cropped to a band. Sits just under the homepage
   hero's 90vh so page content still peeks above the fold. */
.page-hero-xl{min-height:82vh;display:flex;align-items:center;justify-content:center}
.page-hero-xl h1{font-size:3.4rem;text-shadow:0 2px 16px rgba(10,22,40,.45)}
.page-hero-xl p{font-size:1.2rem;text-shadow:0 1px 10px rgba(10,22,40,.4)}
@media(max-width:1000px){.page-hero-xl{min-height:70vh}.page-hero-xl h1{font-size:2.6rem}}
@media(max-width:760px){.page-hero-xl{min-height:66vh;align-items:flex-start}.page-hero-xl h1{font-size:2.1rem}.page-hero-xl p{font-size:1.05rem}}

/* Brand-page intro slot holding photos instead of a manufacturer logo. Overrides
   .dc-logo-card's centred single-logo layout (max-height:104px) so the images can
   fill the column and stack. */
.dc-logo-card.dc-photo-stack{padding:.55rem;flex-direction:column;gap:.55rem;justify-content:flex-start}
.dc-logo-card.dc-photo-stack img{max-height:none;max-width:100%;width:100%;height:auto;border-radius:8px;display:block;object-fit:cover}
@media(max-width:900px){.dc-logo-card.dc-photo-stack{flex-direction:row}
  .dc-logo-card.dc-photo-stack img{width:50%}}
@media(max-width:560px){.dc-logo-card.dc-photo-stack{flex-direction:column}
  .dc-logo-card.dc-photo-stack img{width:100%}}

/* ---- Design Center: supplier feature block, on-page colour explorer, and the
   big in-section quote band. Added 2026-08-31 with the metal-section rebuild.
   Appended (not woven in) so no existing rule's specificity changes. ---- */

/* Suppliers — who actually fabricates the roof going on the house. */
.dc-suppliers-block{margin:3rem 0 0}
.dc-suppliers{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.4rem;margin:1.5rem 0 .4rem}
.dc-supplier{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 2px 14px rgba(19,41,75,.06)}
.dc-supplier-logo{display:flex;align-items:center;justify-content:center;padding:1.5rem 1.4rem;background:var(--soft);border-bottom:1px solid var(--line);min-height:132px}
.dc-supplier-logo img{max-height:96px;max-width:82%;width:auto;height:auto;object-fit:contain}
.dc-supplier-logo .dc-wordmark{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.6rem;color:var(--carolina-deep);text-align:center}
.dc-supplier-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.dc-supplier-role{display:inline-block;align-self:flex-start;font-family:'Archivo',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--carolina);background:var(--soft);border-radius:5px;padding:.28rem .6rem;margin-bottom:.55rem}
.dc-supplier-body h3{font-size:1.32rem;margin:0 0 .3rem}
.dc-supplier-meta{font-size:.86rem;color:var(--muted);font-weight:600;margin:0 0 .7rem}
.dc-supplier-body p{font-size:.96rem;margin:0 0 .8rem}
.dc-supplier-points{list-style:none;padding:0;margin:.2rem 0 1rem;display:flex;flex-direction:column;gap:.5rem}
.dc-supplier-points li{position:relative;padding-left:1.5rem;font-size:.93rem;line-height:1.5}
.dc-supplier-points li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--carolina);font-weight:800}
.dc-supplier-more{margin-top:auto;font-family:'Archivo',sans-serif;font-weight:700;font-size:.92rem;color:var(--carolina-dk)}
.dc-supplier-more:hover{text-decoration:underline}

/* Colour explorer — colours live here, not on a supplier's website. */
.dc-colorhub{margin:3.2rem 0 0}
.dc-colorhub-intro{margin-bottom:.6rem}
.dc-colorset{margin:2rem 0 0;padding:1.5rem 1.6rem 1.7rem;background:var(--soft);border:1px solid var(--line);border-radius:14px}
.dc-colorset-head{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap;border-bottom:3px solid var(--yellow);padding-bottom:.55rem;margin-bottom:.9rem}
.dc-colorset-tag{font-family:'Archivo',sans-serif;font-weight:800;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:#fff;background:var(--carolina);border-radius:5px;padding:.3rem .62rem}
.dc-colorset-head h3{font-size:1.42rem;margin:0}
.dc-colorset .dc-swatches{grid-template-columns:repeat(auto-fill,minmax(134px,1fr))}
.dc-colorset .dc-chip{height:76px}
.dc-colorset .dc-note{margin-top:1.4rem;padding-top:1rem;border-top-color:rgba(19,41,75,.14)}

/* The big quote band — two equal-weight actions, high contrast against the page. */
.dc-quote{margin:3.2rem 0 1rem;padding:2.6rem 2rem;border-radius:16px;text-align:center;color:#fff;background:linear-gradient(150deg,var(--carolina-deep),#0d1c33)}
.dc-quote-eyebrow{font-family:'Archivo',sans-serif;font-weight:800;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);margin:0 0 .7rem}
.dc-quote h2{color:#fff;font-size:2.05rem;margin:0 0 .7rem}
.dc-quote-body{max-width:60ch;margin:0 auto 1.7rem;color:rgba(255,255,255,.9);font-size:1.05rem}
.dc-quote-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.dc-quote-btn{min-width:270px;padding:1.25rem 2.2rem;font-size:1.12rem}
.dc-quote-btn-call{background:transparent;border-color:rgba(255,255,255,.65);color:#fff}
.dc-quote-btn-call:hover{background:rgba(255,255,255,.12);border-color:#fff}
.dc-quote-foot{margin:1.3rem 0 0;font-size:.88rem;color:rgba(255,255,255,.72)}
@media(max-width:640px){
  .dc-quote{padding:2.1rem 1.2rem}
  .dc-quote h2{font-size:1.6rem}
  .dc-quote-btn{min-width:0;width:100%;padding:1.1rem 1rem;font-size:1rem}
  .dc-colorset{padding:1.2rem 1rem 1.3rem}
  .dc-colorset .dc-swatches{grid-template-columns:repeat(auto-fill,minmax(102px,1fr))}
  .dc-colorset .dc-chip{height:62px}
  .dc-supplier-logo{min-height:112px;padding:1.2rem}
}

/* .prose>p is a DIRECT-child rule, so paragraphs nested inside the new Design
   Center blocks inherit no spacing and run together. Restore it per block. */
.dc-suppliers-block>p,.dc-colorhub-intro p,.dc-colorset>p{margin-bottom:1rem;line-height:1.75}
.dc-colorhub-intro p:last-child,.dc-colorset>p:last-child{margin-bottom:.4rem}
/* .prose a (0,2,0) out-specifies .btn-* inside the prose column, which turned the
   quote band's outline button navy-on-navy. Same fix the colour board already uses. */
.dc-quote a.btn-yellow{color:var(--carolina-deep)}
.dc-quote a.dc-quote-btn-call{color:#fff}
.dc-quote a.dc-quote-btn-call:hover{color:#fff}
/* Portrait/square supplier logos: the shared 104px cap is sized for wide wordmarks
   and leaves a tall logo using under half the card. Fill the card's inner height. */
.dc-logo-card img.dc-logo-tallimg{max-height:124px}
.dc-supplier-logo img.dc-logo-tallimg{max-height:112px}

/* ---- Companion panels that fill the empty half-row beside a single brand card.
   Added 2026-08-31: a lone .dc-brand-card is capped at 520px in an 840px column. ---- */

/* Reuse of the homepage hero conversion card (.qc-* classes). Those styles assume a
   dark ground -- .hero-quote supplies it there, .dc-inspect supplies it here. */
.dc-inspect{display:flex;flex-direction:column;background:linear-gradient(155deg,#13294b,#0b1a2e);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);padding:1.5rem 1.5rem 1.6rem;
  box-shadow:var(--shadow-lg)}
.dc-inspect .qc-title{font-size:1.42rem}
/* .prose a (0,2,0) out-specifies the .qc-* link colours, which would drag the yellow
   call button and the reviews link to body-link navy on this dark panel. */
.dc-inspect a.qc-call{color:var(--carolina-deep)}
.dc-inspect .qc-rating a{color:var(--yellow)}
.dc-inspect .qc-form{margin:0}
.dc-inspect .qc-trust{margin-top:auto;padding-top:1rem}

/* Light wayfinding companion, so one page never shows two identical lead forms. */
.dc-helper{display:flex;flex-direction:column;background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem 1.5rem 1.6rem}
.dc-helper h3{font-size:1.32rem;margin:0 0 .5rem}
.dc-helper>p{font-size:.96rem;color:var(--muted);margin:0 0 1rem;line-height:1.6}
.dc-helper-links{list-style:none;padding:0;margin:0 0 .2rem;display:flex;flex-direction:column;gap:.1rem}
.dc-helper-links li{border-top:1px solid var(--line)}
.dc-helper-links li:last-child{border-bottom:1px solid var(--line)}
.dc-helper-links a{display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  padding:.85rem .1rem;font-family:'Archivo',sans-serif;font-weight:700;font-size:.96rem;
  color:var(--carolina-dk);transition:.15s}
.dc-helper-links a:hover{color:var(--carolina);padding-left:.35rem}
.dc-helper-links a span{color:inherit;font-weight:800}  /* yellow-dk on --soft measured 1.68:1 -- washed out */
.dc-helper-foot{margin:1rem 0 0;font-size:.85rem;color:var(--muted);line-height:1.55}
.dc-helper .dc-helper-foot{margin-top:auto;padding-top:1rem}

/* Offset in-page anchors so a linked heading isn't hidden under the sticky header. */
.dc-anchor{display:block;position:relative;top:-90px;visibility:hidden}

@media(max-width:900px){
  .dc-inspect,.dc-helper{padding:1.25rem 1.15rem 1.4rem}
}
/* .prose h3 (0,2,0) beat .qc-title (0,1,0) and painted the card heading
   carolina-deep on a carolina-deep panel -- contrast 1.00, invisible. Third
   instance of this trap in the prose column; audit new dark panels for it. */
.dc-inspect .qc-title{color:#fff}
.dc-inspect .qc-sub,.dc-inspect .qc-or,.dc-inspect .qc-quote p{color:#cfe0f0}
.dc-inspect .qc-quote cite{color:var(--yellow)}
.dc-inspect .qc-quote cite small{color:#b9cfe2}
.dc-inspect .qc-trust,.dc-inspect .qc-rating{color:#e8f1fa}

/* Same .prose a (0,2,0) trap again, on two solid-fill buttons that were shipping
   unreadable: their intended color:#fff lost to the body-link navy, giving navy on
   carolina blue at 1.35:1. Only the RESTING state was affected -- the :hover rules
   are (0,1,1) and declared later, so they already won, which is why this read as a
   hover quirk rather than a bug. .dc-action-primary is the first action button on
   every brand page that has one. */
.dc-actions a.dc-action-primary{color:#fff}
.dc-products a.dc-prod-link{color:#fff}

/* =====================================================================
   STATE-SPECIFIC THEMES  (added 2026-09-03, Clinton)
   Florida is untouched: no body class, base :root palette, byte-identical.
   Out-of-state pages carry body.state-pa / body.state-ct, which re-point the
   same ~10 tokens every component already reads, so buttons, bands, cards and
   the footer all recolour with no markup changes.
   The extra rules per state exist because a handful of "text on a dark ground"
   values are hardcoded blue-tinted (#b9cde2 / #86a2c0 / #d4e2f0 / #9ec7e8) and
   would read baby-blue on a black or forest footer.
   ===================================================================== */

/* ---- PENNSYLVANIA: near-black structure, old-gold CTA, barn red as ACCENT ONLY.
        Red never fills a button (it would fight the gold CTA and read as an
        error), so .btn-blue is re-pointed to graphite below. The parchment
        panel colour is what actually makes the page stop feeling like Florida. */
body.state-pa{
  --carolina:#9e2a2b;         /* accent + link colour */
  --carolina-dk:#7e2122;      /* link, hover */
  --carolina-deep:#16181c;    /* headings, footer, dark bands */
  --yellow:#f2b21a;           /* CTA */
  --yellow-dk:#d89a0c;
  --ink:#1f1d1a;
  --muted:#6b6355;
  --soft:#f7f2e8;             /* parchment, replaces the icy blue */
  --line:#e5dac6;
  --shadow:0 10px 28px rgba(22,24,28,.12);
  --shadow-lg:0 22px 50px rgba(22,24,28,.20);
}
body.state-pa .btn-blue{background:#2a2d33;border-color:#2a2d33;color:#fff}
body.state-pa .btn-blue:hover{background:#16181c;border-color:#16181c;color:#fff}
body.state-pa .footer,body.state-pa .footer-col a{color:#cfc6b4}
body.state-pa .footer-lic,body.state-pa .footer-bottom .wrap{color:#9a9080}
body.state-pa .section-soft,
body.state-pa .section-soft .prose>p,body.state-pa .section-soft .prose li{color:#e4dccb}
body.state-pa .section-soft .lead{color:#cfc6b4}
body.state-pa .section-soft .prose a{color:#f2b21a}
body.state-pa .page-cta p{color:#4a3b0c}
body.state-pa .page-hero p{color:#efe7d8}

/* ---- CONNECTICUT: deep forest structure, northern-blue actions, brass CTA.
        Brass is the one colour added beyond Clinton's three -- forest, grey and
        northern blue sit in the same value range, so nothing popped for buttons. */
body.state-ct{
  --carolina:#2d5d80;         /* northern blue: primary + links */
  --carolina-dk:#22485f;
  --carolina-deep:#14342b;    /* deep forest: headings, footer, dark bands */
  --yellow:#e0a526;           /* brass CTA */
  --yellow-dk:#c88f16;
  --ink:#1b2a24;
  --muted:#5a6b62;
  --soft:#edf1ee;             /* stone grey-green */
  --line:#d5ded8;
  --shadow:0 10px 28px rgba(20,52,43,.12);
  --shadow-lg:0 22px 50px rgba(20,52,43,.20);
}
body.state-ct .footer,body.state-ct .footer-col a{color:#c9d6ce}
body.state-ct .footer-lic,body.state-ct .footer-bottom .wrap{color:#94a69b}
body.state-ct .section-soft,
body.state-ct .section-soft .prose>p,body.state-ct .section-soft .prose li{color:#dfe8e2}
body.state-ct .section-soft .lead{color:#c9d6ce}
body.state-ct .section-soft .prose a{color:#e0a526}
body.state-ct .page-cta p{color:#43350a}
body.state-ct .page-hero p{color:#e4ece7}

/* ---- Big hero on the out-of-state area pages. Reuses the homepage .hero /
   .hero-quote components, so only the pieces that hardcode navy need theming:
   the overlay gradient, the glass card ground, and the blue-tinted breadcrumb. ---- */
.hero-email{margin-top:1.1rem;font-size:.92rem;color:#e7f1fa}
.hero-email a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.hero-email a:hover{color:var(--yellow)}

body.state-pa .hero-overlay{background:linear-gradient(105deg,rgba(14,15,18,.92) 0%,rgba(34,24,20,.80) 46%,rgba(72,44,20,.46) 100%)}
body.state-pa .hero-quote{background:rgba(20,21,25,.70);border-color:rgba(242,178,26,.30)}
body.state-pa .breadcrumb{color:#e0d6c2}
body.state-pa .hero-email{color:#e6ddcc}

body.state-ct .hero-overlay{background:linear-gradient(105deg,rgba(10,26,21,.92) 0%,rgba(18,48,40,.80) 46%,rgba(30,74,98,.48) 100%)}
body.state-ct .hero-quote{background:rgba(12,32,26,.70);border-color:rgba(224,165,38,.30)}
body.state-ct .breadcrumb{color:#d4e2da}
body.state-ct .hero-email{color:#dcE8e1}

/* The homepage pins .hero-bg with a scale(1.08) parallax transform. On these pages
   the photo is set inline per city; keep the same treatment but let a shorter
   phone viewport show more of the roof rather than the sky. */
@media(max-width:760px){
  .hero-bg{background-position:center 35% !important}
  .hero-email{font-size:.86rem}
}
/* On a phone the hero stacks, so the "#quote" button scrolls to a card that is
   already directly beneath it. Drop it there and let the call button plus the card
   do the work -- saves ~100px above the form. Scoped to the state pages: on the
   homepage this selector is the "Book a Free Inspection" button, which must stay. */
@media(max-width:760px){
  body.state-pa .hero-cta a[href="#quote"],
  body.state-ct .hero-cta a[href="#quote"]{display:none}
}

/* ---- Statewide coverage block on the CT / PA pages. Sits inside .section-soft,
   which is the themed dark band, so the map renders on dark like the homepage's
   three-panel version (background:none, no border). ---- */
.state-cover{display:grid;grid-template-columns:.85fr 1.15fr;gap:2.6rem;align-items:start;
  max-width:1120px;margin:0 auto}
.state-map-col{position:sticky;top:96px}
.fl-map.state-map{background:none;border:0;box-shadow:none;padding:0;border-radius:0;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.35))}
.state-cover .fl-map-legend{margin-top:1rem;color:#fff}
.state-cover .fl-map-note{color:rgba(255,255,255,.66);margin-top:.45rem;text-align:center}
.state-intro{font-size:1.06rem;line-height:1.75;margin:0 0 1.7rem}
.state-region{padding:1rem 0;border-top:1px solid rgba(255,255,255,.16)}
.state-region:first-of-type{border-top:0;padding-top:0}
.state-region h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:1.05rem;
  letter-spacing:.01em;margin:0 0 .35rem}
.state-region p{font-size:.95rem;line-height:1.7;margin:0}
@media(max-width:900px){
  .state-cover{grid-template-columns:1fr;gap:1.8rem}
  .state-map-col{position:static;max-width:460px;margin:0 auto}
}
@media(max-width:560px){
  .state-region h3{font-size:1rem}
  .state-region p{font-size:.92rem}
}
/* .lg-office is var(--carolina-deep), which IS the .section-soft background on these
   pages -- the HQ legend rendered at 1:1, invisible. Same fix .fl-maps-3 uses. */
.state-cover .lg-office{color:#fff}