/* ===== Design tokens ===== */
:root{
  --navy:#142B46; --deep:#0B1B2B; --yellow:#FFD52A; --yellow-h:#F2C51D;
  --white:#fff; --gray:#F4F6F8; --border:#E1E6EB; --body:#344255; --head:#172B40; --muted:#64748B;
  --accent-on-dark:#FFD52A; --accent-on-light:#B8860B;
  --sp-1:8px; --sp-2:12px; --sp-3:16px; --sp-4:24px; --sp-5:32px; --sp-6:48px;
  --r-card:12px; --r-btn:6px;
  --pad:clamp(18px,4vw,48px); --sec:clamp(52px,8vw,96px);
  --f-hero:clamp(2rem,1.2rem + 3.4vw,3.75rem);
  --f-h2:clamp(1.65rem,1.2rem + 1.7vw,2.5rem);
  --f-h3:clamp(1.1rem,1rem + .4vw,1.3rem);
  --shadow:0 6px 20px rgba(11,27,43,.08);
  --nav-h:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
/* ===== Global Typography System & Fluid Scaling ===== */
body{margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:16px;line-height:1.7;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.no-scroll{overflow:hidden}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}

/* Main heading */
h1 {
  font-size: clamp(1.5rem, 1.15rem + 1.25vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  color: var(--head);
  letter-spacing: -0.01em;
}

/* Section heading */
h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.2;
  font-weight: 700;
  color: var(--head);
  letter-spacing: -0.01em;
}

/* Subheading */
h3 {
  font-size: clamp(1.3125rem, 1.1rem + 0.8vw, 1.875rem);
  line-height: 1.3;
  font-weight: 600;
  color: var(--head);
}

/* Smaller heading */
h4 {
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.5rem);
  line-height: 1.35;
  font-weight: 600;
  color: var(--head);
}

/* Supporting content */
.small-text, small {
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
  line-height: 1.6;
}

/* Navigation */
.nav-link, .nav a {
  font-size: clamp(0.875rem, 0.84rem + 0.15vw, 1rem);
}

/* Buttons */
button,
.btn {
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
}

/* Labels / captions */
label,
caption,
.caption,
.eyebrow {
  font-size: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);
}
a{color:inherit;text-decoration:none;transition:color .18s,background-color .18s,border-color .18s,transform .18s}
:focus-visible{outline:3px solid #2B7BE4;outline-offset:2px;border-radius:3px}
.navbar :focus-visible,.site-footer :focus-visible,.hero :focus-visible,.problems :focus-visible,.why :focus-visible,.cta-final :focus-visible,.drawer :focus-visible{outline-color:var(--yellow)}
.container{width:100%;max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.ic{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--deep);padding:8px 14px;z-index:200;font-weight:600}
.skip:focus{left:8px}
.ph{color:var(--muted);font-style:italic}

/* ===== Buttons ===== */
button,
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-btn);font-weight:600;font-size:16px;line-height:1.4;border:2px solid transparent;cursor:pointer;font-family:inherit;transition:background-color .18s,border-color .18s,color .18s;max-width:100%;box-sizing:border-box}
.btn-yellow{background:var(--yellow);color:var(--deep)} .btn-yellow:hover{background:var(--yellow-h);color:var(--deep)}
.btn-navy{background:var(--navy);color:#fff} .btn-navy:hover{background:var(--deep);color:var(--yellow)}
.btn-ghost{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.7);color:#fff} .btn-ghost:hover{background:#fff;color:var(--deep)}
.btn-lg{min-height:54px;padding:0 28px;font-size:1rem}
.btn-block{width:100%}
.btn-call .ic{width:1.15em;height:1.15em}
.tlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.95rem;color:var(--navy)}
.tlink .ic{width:1em;height:1em;transition:transform .18s} .tlink:hover{color:var(--accent-on-light)} .tlink:hover .ic{transform:translateX(4px)}
.eyebrow{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-on-light);margin-bottom:var(--sp-2)}
.eyebrow-y{color:var(--accent-on-dark)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:100;background:#fff}
.infobar{background:#fff;border-bottom:1px solid var(--border);transition:margin .25s}
.infobar-in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding-block:12px}
.logo{display:inline-flex;align-items:center;gap:12px;color:var(--navy)}
.logo img{height:88px;width:auto;max-width:380px;object-fit:contain;display:block}
.foot-brand .logo img{background:#fff;padding:8px 16px;border-radius:8px;max-width:320px;height:76px}
.logo-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;background:var(--navy);color:var(--yellow)} .logo-mark .ic{width:28px;height:28px}
.logo-text{display:flex;flex-direction:column;line-height:1.1} .logo-text strong{font-size:1.15rem;font-weight:800;letter-spacing:-.01em} .logo-text small{font-size:.8rem;font-weight:600;color:var(--muted);margin-top:3px}
.info-items{display:flex;gap:clamp(20px,3vw,44px);margin-left:auto}
.info-item{display:flex;align-items:center;gap:12px;color:#C0392B} .info-item .ic{width:26px;height:26px}
.info-item div{display:flex;flex-direction:column;line-height:1.3;color:var(--head)} .info-item span{font-size:.78rem;color:var(--muted);font-weight:500} .info-item b,.info-item a{font-size:.95rem;font-weight:700}
.info-item a:hover{color:var(--accent-on-light)}
.infobar .mobile-call,.infobar .menu-btn{display:none}
.icon-btn{width:46px;height:46px;border:1px solid var(--border);background:#fff;border-radius:var(--r-btn);display:grid;place-items:center;cursor:pointer;color:var(--navy)} .icon-btn .ic{width:24px;height:24px}

.navbar{background:var(--navy);position:relative}
.navbar-in{display:flex;align-items:center;justify-content:space-between;min-height:var(--nav-h)}
.nav-list{display:flex;align-items:stretch}
.nav-list>li{display:flex;align-items:center;position:relative}
.nav-link{color:#fff;font-size:.9375rem;font-weight:600;padding:18px clamp(10px,1.4vw,18px);display:block;position:relative}
.nav-link::after{content:"";position:absolute;left:clamp(10px,1.4vw,18px);right:clamp(10px,1.4vw,18px);bottom:10px;height:2px;background:var(--yellow);transform:scaleX(0);transition:transform .2s}
.nav-link:hover,.has-menu.open .nav-link{color:var(--yellow)} .nav-link:hover::after,.nav-link[aria-current]::after,.has-menu.open .nav-link::after{transform:scaleX(1)}
.chev-btn{background:none;border:0;color:#fff;cursor:pointer;display:grid;place-items:center;width:28px;height:36px;margin-left:-14px;padding:0} .chev-btn:hover{color:var(--yellow)}
.chev-btn .ic{width:16px;height:16px;transition:transform .2s} .chev-btn[aria-expanded=true] .ic{transform:rotate(180deg)}
.nav-cta{min-height:48px;font-size:.95rem}
.hdr-cta-gap{margin-left:var(--sp-4)}

.mega{position:absolute;left:0;right:0;top:100%;background:#fff;border-top:3px solid var(--yellow);border-bottom:1px solid var(--border);box-shadow:0 18px 36px rgba(11,27,43,.18);max-height:calc(100vh - 150px);overflow-y:auto;padding-block:var(--sp-5) var(--sp-4);animation:megaIn .2s ease-out}
.mega[hidden]{display:none}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.mega-col{padding-inline:clamp(20px,3vw,40px);border-left:1px solid var(--border)} .mega-col:first-child{padding-left:0;border-left:0}
.mega-title{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--navy);padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid var(--yellow);display:inline-block}
.mega-heading{display:flex;align-items:center;gap:10px;font-size:1.25rem;font-weight:700;color:var(--head);margin-bottom:var(--sp-4)} .mega-heading .ic{color:var(--navy);width:26px;height:26px}
.mega li a,.drawer .acc-panel li a{display:block;position:relative;padding:7px 0;font-size:.9375rem;font-weight:500;color:var(--head)}
.mega li a::after{content:"→";position:absolute;right:auto;margin-left:8px;opacity:0;transition:opacity .18s}
.mega li a:hover,.mega li a:focus-visible{color:var(--accent-on-light)} .mega li a:hover::after,.mega li a:focus-visible::after{opacity:1}
.mega-foot{margin-top:var(--sp-4);background:var(--gray);border-radius:var(--r-btn);text-align:center}
.mega-foot a{display:inline-flex;align-items:center;gap:8px;padding:14px;font-weight:700;color:var(--navy);width:100%;justify-content:center} .mega-foot a:hover{color:var(--accent-on-light)} .mega-foot .ic{width:1em;height:1em}

.site-header.scrolled .infobar{margin-top:-0px}
.site-header.scrolled .infobar-in{padding-block:6px} .site-header.scrolled .logo img{height:58px} .site-header.scrolled .logo-mark{width:38px;height:38px}
.site-header.scrolled{box-shadow:0 4px 14px rgba(11,27,43,.18)}

/* Drawer */
.scrim{position:fixed;inset:0;background:rgba(11,27,43,.6);z-index:150} .scrim[hidden],.drawer[hidden]{display:none}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(92vw,400px);background:var(--navy);z-index:160;display:flex;flex-direction:column;color:#fff}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#fff}
.drawer nav{flex:1;overflow-y:auto;padding:8px 0}
.drawer nav>ul>li{border-bottom:1px solid rgba(255,255,255,.1)}
.drawer nav>ul>li>a,.acc-row>a{display:block;padding:15px 20px;font-weight:600;font-size:1.0625rem;flex:1} .drawer a:hover{color:var(--yellow)}
.acc-row{display:flex;align-items:center} .acc-row .chev-btn{width:56px;height:52px;margin:0}
.acc-panel{background:var(--deep);padding:8px 20px 18px}
.drawer .mega-title{color:var(--yellow);margin-top:14px;border-color:rgba(255,255,255,.25)}
.drawer .acc-panel li a{color:#E6ECF2;padding:11px 0;min-height:44px} .drawer .acc-panel li a:hover{color:var(--yellow)}
.view-all{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-weight:700;color:var(--yellow)} .view-all .ic{width:1em;height:1em}
.drawer-foot{padding:16px 20px;background:var(--deep)}

/* ===== Hero ===== */
.hero{position:relative;min-height:clamp(520px,62vw,660px);display:flex;align-items:center;background:var(--deep);overflow:hidden;isolation:isolate}
.hero picture,.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% center;z-index:-2}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,27,43,.92) 0%,rgba(11,27,43,.78) 38%,rgba(11,27,43,.25) 72%,rgba(11,27,43,.05) 100%)}
.hero-in{padding-block:clamp(48px,7vw,88px)}
.hero-copy{max-width:600px}
.hero h1{color:#fff;font-size:clamp(1.5rem, 1.15rem + 1.25vw, 2.25rem);font-weight:700;line-height:1.15;margin-bottom:var(--sp-3);text-wrap:balance}
.hero-text{color:#E3EAF1;font-size:clamp(1rem,.95rem + .3vw,1.15rem);max-width:520px;margin-bottom:var(--sp-5)}
.hero .eyebrow-y{display:inline-block;padding-left:14px;border-left:3px solid var(--yellow)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ===== Trust ===== */
.trust{background:#fff;border-bottom:1px solid var(--border)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.trust-item{display:flex;align-items:center;gap:14px;padding:26px clamp(12px,2vw,28px);border-left:1px solid var(--border)} .trust-item:first-child{border-left:0;padding-left:0}
.trust-ic{width:50px;height:50px;display:grid;place-items:center;color:var(--navy);flex:none} .trust-ic .ic{width:42px;height:42px;stroke-width:1.6}
.trust-item b{display:block;color:var(--head);font-size:.95rem;line-height:1.3} .trust-item span:not(.trust-ic){font-size:.85rem;color:var(--muted)}

/* ===== Sections ===== */
.section{padding-block:var(--sec)} .bg-gray{background:var(--gray)}
.sec-head .lead{font-size:1.05rem;max-width:560px;margin-top:var(--sp-2);color:var(--body)}
.split-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-6);flex-wrap:wrap}
.center-head{text-align:center;margin-bottom:var(--sp-6)} .center-head .lead{margin-inline:auto}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-card);overflow:hidden;transition:box-shadow .2s,transform .2s,border-color .2s}
.card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:#CBD5DF}
.card-body{padding:var(--sp-4);display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.img-ph{width:100%;height:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8696A8;font-size:.82rem;font-weight:600;text-align:center;padding:12px;background:repeating-linear-gradient(135deg,#E9EEF3 0 14px,#E1E7ED 14px 28px)} .img-ph .ic{width:34px;height:34px}
.card-media,.proj-img{aspect-ratio:16/10;overflow:hidden}

/* Problems */
.problems{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.problems-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:center}
.problems h2{color:#fff;margin-bottom:var(--sp-3)} .problems-intro p:not(.eyebrow){color:#CFD9E3;margin-bottom:var(--sp-4);max-width:420px}
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.problem-grid a{display:flex;flex-direction:column;gap:14px;height:100%;background:#fff;color:var(--head);border-radius:var(--r-card);padding:20px;border-bottom:4px solid transparent}
.problem-grid a:hover{border-bottom-color:var(--yellow);transform:translateY(-3px)}
.p-ic{width:48px;height:48px;border-radius:50%;background:var(--gray);display:grid;place-items:center;color:var(--navy)} .p-ic .ic{width:26px;height:26px}
.p-txt b{display:block;font-size:1rem;line-height:1.3} .p-txt em{font-style:normal;display:inline-flex;gap:6px;align-items:center;font-size:.85rem;font-weight:600;color:var(--navy);margin-top:6px} .p-txt .ic{width:.95em;height:.95em}

/* Materials */
.materials-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,4vw,64px);align-items:center}
.materials-intro .btn{margin-top:var(--sp-4)}
.mat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.mat{display:block;position:relative} .mat-img{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;margin-bottom:12px;border:1px solid var(--border)}
.mat span{display:block;font-weight:700;color:var(--head);font-size:1.05rem} .mat em{font-style:normal;font-size:.88rem;font-weight:600;color:var(--navy);display:inline-flex;gap:6px;align-items:center} .mat em .ic{width:.95em;height:.95em;transition:transform .18s}
.mat:hover span{color:var(--accent-on-light)} .mat:hover em .ic{transform:translateX(4px)}

/* Why */
.why{background:linear-gradient(180deg,var(--deep),var(--navy));color:#fff}
.why-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.why h2{color:#fff;margin-bottom:var(--sp-3)} .why-intro>p:not(.eyebrow){color:#CFD9E3;max-width:460px}
.why-photo{aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;margin-top:var(--sp-5);border:1px solid rgba(255,255,255,.15)}
.why-list{display:flex;flex-direction:column;counter-reset:w}
.why-list li{display:flex;gap:20px;padding:22px 0;border-top:1px solid rgba(255,255,255,.14)} .why-list li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.why-ic{width:54px;height:54px;border-radius:var(--r-btn);background:var(--yellow);color:var(--deep);display:grid;place-items:center;flex:none} .why-ic .ic{width:28px;height:28px}
.why h3{color:#fff;margin-bottom:4px} .why-list p{color:#B9C7D6;font-size:.95rem}

/* Projects */
.proj .card-body{gap:6px} .proj-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .proj:hover .proj-img img{transform:scale(1.04)}
.meta{font-size:.85rem;color:var(--muted);font-weight:500}
.note{margin-top:var(--sp-4);font-size:.85rem;color:var(--muted)}

/* About */
.about-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,88px);align-items:center}
.about-img{aspect-ratio:5/4;border-radius:var(--r-card);overflow:hidden;position:relative}
.about-img::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:8px;background:var(--yellow)}
.about-copy h2{margin-bottom:var(--sp-3)} .about-copy p:not(.eyebrow){max-width:520px;margin-bottom:var(--sp-4)}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);position:relative}
.steps li{position:relative;padding-top:4px}
.steps li::before{content:"";position:absolute;top:35px;left:76px;right:-24px;height:2px;border-top:2px dashed #B8C4D0}
.steps li:last-child::before{display:none}
.step-ic{width:72px;height:72px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;margin-bottom:var(--sp-3);position:relative;z-index:1} .step-ic .ic{width:32px;height:32px}
.step-n{position:absolute;top:-6px;left:50px;z-index:2;background:var(--yellow);color:var(--deep);font-size:.75rem;font-weight:800;border-radius:20px;padding:2px 8px}
.steps h3{margin-bottom:6px}

/* Areas */
.areas-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,72px);align-items:start}
.areas-intro .ph{margin-block:var(--sp-3) var(--sp-4)}
.area-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 20px}
.area-grid a{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-btn);font-weight:600;color:var(--head);background:#fff}
.area-grid .ic{color:var(--navy);width:1.15em;height:1.15em} .area-grid a:hover{border-color:var(--navy);background:var(--navy);color:var(--yellow)} .area-grid a:hover .ic{color:var(--yellow)}

/* Planning */
.plan-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:center}
.plan-list{display:flex;flex-direction:column;gap:14px}
.plan-item{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--border);border-left:4px solid var(--navy);border-radius:var(--r-btn);padding:20px 22px}
.plan-item:hover{border-left-color:var(--yellow);box-shadow:var(--shadow)} .plan-item div{flex:1}
.plan-ic{width:48px;height:48px;border-radius:var(--r-btn);background:var(--gray);display:grid;place-items:center;color:var(--navy);flex:none}
.plan-arrow{color:var(--navy);transition:transform .18s} .plan-item:hover .plan-arrow{transform:translateX(5px)}

/* Reviews / FAQ */
.empty-state{border:2px dashed #C7D1DB;border-radius:var(--r-card);padding:var(--sp-5);text-align:center;color:var(--muted);background:#fff}
.review{margin:0;padding:var(--sp-4)} .review blockquote{margin:0 0 var(--sp-3)} .review figcaption b{display:block;color:var(--head)}
.faq-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,5vw,72px)}
.faq-intro .tlink{margin-top:var(--sp-4)}
details{background:#fff;border:1px solid var(--border);border-radius:var(--r-btn);margin-bottom:12px}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 20px;font-weight:700;color:var(--head)} summary::-webkit-details-marker{display:none}
summary .ic{transition:transform .2s;color:var(--navy)} details[open] summary .ic{transform:rotate(180deg)} details[open]{border-color:var(--navy)}
.faq-a{padding:0 20px 20px}

/* Final CTA */
.cta-final{background:var(--deep);color:#fff;padding-block:var(--sec);border-top:4px solid var(--yellow)}
.cta-in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.cta-final h2{color:#fff;margin-bottom:var(--sp-3)} .cta-copy p{color:#CFD9E3;margin-bottom:var(--sp-5);max-width:480px}
.quote{background:#fff;color:var(--body);border-radius:var(--r-card);padding:clamp(20px,3vw,32px);display:grid;gap:14px}
.field{display:flex;flex-direction:column;gap:6px} label{font-weight:600;font-size:.9rem;color:var(--head)}
input,textarea{font:inherit;padding:12px 14px;border:1.5px solid #B8C4D0;border-radius:var(--r-btn);color:var(--head);width:100%;min-height:46px}
input:focus,textarea:focus{outline:3px solid #2B7BE4;outline-offset:1px;border-color:#2B7BE4}
[aria-invalid=true]{border-color:#C0392B}
.err{color:#B3261E;font-size:.85rem;min-height:0} 
.form-status{font-weight:600;font-size:.92rem} .form-status.error{color:#B3261E} .form-status.success{color:#1B7F3B}
.btn:disabled{opacity:.7;cursor:progress}

/* ===== Footer ===== */
.site-footer{background:var(--deep);color:#C5D1DD}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr 1fr .9fr;gap:clamp(18px,2.2vw,36px);padding-block:clamp(44px,6vw,72px) 44px}
.foot-brand .logo{color:#fff;margin-bottom:var(--sp-3)} .logo-light .logo-text small{color:#9FB0C2} .logo-light .logo-mark{background:var(--yellow);color:var(--deep)}
.foot-brand p{margin-bottom:var(--sp-4);font-size:.95rem;max-width:300px}
.foot-col h2{color:#fff;font-size:1.15rem;margin-bottom:var(--sp-3)} .foot-col h3{color:var(--yellow);font-size:.82rem;text-transform:uppercase;letter-spacing:.07em;margin:18px 0 6px} .foot-col h2+h3{margin-top:0}
.foot-col li a{display:inline-block;padding:5px 0;font-size:.93rem;color:#E3EAF1} .foot-col li a:hover,.foot-bar a:hover{color:var(--yellow);text-decoration:underline;text-underline-offset:4px}
.foot-col .view-all{margin-top:14px}
.foot-bar{border-top:1px solid rgba(255,255,255,.14)} .foot-bar-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:22px;font-size:.88rem}
.foot-bar span{margin-inline:12px;opacity:.5}

/* ===== Responsive ===== */
@media (max-width:1200px){
  .info-item:nth-child(1){display:none}
  .nav-link{font-size:.875rem}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:1024px){
  .logo img{height:clamp(46px,5.5vw,56px);max-width:240px}
  .foot-brand .logo img{height:60px;max-width:260px;padding:6px 12px}
  .navbar{display:none}
  .infobar .menu-btn{display:grid}
  .infobar .mobile-call{display:inline-flex}
  .mobile-call{min-height:46px;padding:0 18px;margin-left:auto}
  .info-items{display:none}
  .infobar-in{gap:12px}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-item:nth-child(3){border-left:0;padding-left:0} .trust-item:nth-child(n+3){border-top:1px solid var(--border)}
  .problems-in,.materials-in,.why-in,.about-in,.areas-in,.plan-in,.faq-in,.cta-in{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:40px} .steps li:nth-child(2)::before{display:none}
  .foot-grid{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1/-1}
  .hero::before{background:linear-gradient(90deg,rgba(11,27,43,.92) 0%,rgba(11,27,43,.7) 55%,rgba(11,27,43,.3) 100%)}
  .hero img{object-position:70% center}
}
@media (max-width:640px){
  .logo-text strong{font-size:1rem} .logo-mark{width:40px;height:40px}
  .mobile-call span{font-size:.9rem}
  .hero{min-height:0}
  .hero::before{background:linear-gradient(180deg,rgba(11,27,43,.88),rgba(11,27,43,.82))}
  .hero img{object-position:80% center}
  .hero .btn-row .btn{width:100%}
  .trust-item{flex-direction:column;align-items:flex-start;gap:8px;padding:18px 12px 18px 0} .trust-item:nth-child(even){padding-left:16px}
  .grid-3,.problem-grid,.area-grid{grid-template-columns:1fr}
  .mat-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .problem-grid a{flex-direction:row;align-items:center}
  .problems-intro .btn,.materials-intro .btn,.split-head .btn{width:100%}
  .steps{grid-template-columns:1fr;row-gap:0}
  .steps li{padding:0 0 28px 92px;min-height:92px} .steps li::before{display:block;top:72px;bottom:0;left:35px;right:auto;height:auto;border-top:0;border-left:2px dashed #B8C4D0}
  .steps li:nth-child(2)::before{display:block}
  .step-ic{position:absolute;left:0;top:0;margin:0} .step-n{left:46px;top:-8px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bar-in{flex-direction:column}
  .foot-brand .btn{width:100%}
  .cta-copy .btn-row .btn{width:100%}
}
@media (max-width:360px){ .mobile-call span{display:none} .mobile-call{padding:0 14px} }
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ===== About page ===== */
.page-hero{position:relative;background:var(--deep);color:#fff;isolation:isolate;overflow:hidden}
.page-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:75% center;z-index:-2}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(11,27,43,.95) 0%,rgba(11,27,43,.85) 55%,rgba(11,27,43,.6) 100%)}
.page-hero-in{padding-block:clamp(48px,7vw,96px);max-width:1280px}
.page-hero h1{color:#fff;font-size:clamp(1.5rem, 1.15rem + 1.25vw, 2.25rem);font-weight:700;line-height:1.15;max-width:820px;margin-bottom:var(--sp-3);text-wrap:balance}
.page-hero-text{max-width:640px;color:#E3EAF1;font-size:clamp(1rem,.95rem + .3vw,1.15rem);margin-bottom:var(--sp-5)}
.crumbs{display:flex;gap:10px;align-items:center;font-size:.88rem;margin-bottom:var(--sp-4);color:#B9C7D6} .crumbs a:hover{color:var(--yellow)} .crumbs [aria-current]{color:#fff;font-weight:600}
.facts{background:#fff;border-bottom:1px solid var(--border)}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.fact{padding:26px clamp(12px,2vw,28px);border-left:1px solid var(--border)} .fact:first-child{border-left:0;padding-left:0}
.fact b{display:block;font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);color:var(--navy);font-weight:800;line-height:1.2} .fact span{font-size:.9rem;color:var(--muted)}
.story{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,88px);align-items:center}
.story-copy h2{margin-bottom:var(--sp-3)} .story-copy p:not(.eyebrow){margin-bottom:var(--sp-3);max-width:620px}
.story-card{background:var(--navy);color:#fff;border-radius:var(--r-card);padding:clamp(28px,4vw,48px);border-bottom:6px solid var(--yellow)}
.story-card .quote-ic{width:44px;height:44px;color:var(--yellow);margin-bottom:var(--sp-3)}
.story-card p{font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem);font-weight:700;line-height:1.3;color:#fff} .story-card span{display:block;margin-top:var(--sp-3);font-size:.88rem;color:#B9C7D6}
.about-head .lead{max-width:680px;margin-inline:auto}
.list-intro{font-weight:700;color:var(--head);margin-bottom:var(--sp-3)}
.check-card{padding:var(--sp-4)} .check-card h3{margin:14px 0 8px}
.check-ic{width:52px;height:52px;border-radius:var(--r-btn);background:var(--navy);color:var(--yellow);display:grid;place-items:center} .check-ic .ic{width:26px;height:26px}
.callout{display:flex;gap:18px;align-items:flex-start;margin-top:var(--sp-4);background:#fff;border:1px solid var(--border);border-left:5px solid var(--yellow);border-radius:var(--r-btn);padding:clamp(20px,3vw,30px)}
.callout .ic{width:34px;height:34px;color:var(--navy)}
.install{background:linear-gradient(180deg,var(--deep),var(--navy));color:#fff}
.install-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,88px);align-items:center}
.install h2{color:#fff;margin-bottom:var(--sp-3)} .install-intro p:not(.eyebrow){color:#CFD9E3;margin-bottom:var(--sp-3);max-width:480px}
.install-list li{display:flex;gap:20px;padding:24px 0;border-top:1px solid rgba(255,255,255,.14)} .install-list li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.install-list .num{flex:none;width:52px;height:52px;border-radius:var(--r-btn);background:var(--yellow);color:var(--deep);display:grid;place-items:center;font-weight:800}
.install-list h3{color:#fff;margin-bottom:4px} .install-list p{color:#B9C7D6;font-size:.95rem}
.acct{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,5vw,72px);align-items:center}
.acct h2{margin-bottom:var(--sp-2)}
.acct-list{display:grid;gap:14px}
.acct-list li{display:flex;align-items:center;gap:16px;border:1px solid var(--border);border-radius:var(--r-card);padding:22px 24px;background:#fff;box-shadow:var(--shadow)}
.acct-list .ic{width:40px;height:40px;color:var(--navy)} .acct-list b{color:var(--head);font-size:1.05rem}

.contact-sec{background:var(--deep);padding-block:var(--sec);border-top:4px solid var(--yellow);scroll-margin-top:84px}
.contact-head{max-width:760px;margin-bottom:var(--sp-6)}
.contact-sec h2{color:#fff;margin-bottom:var(--sp-3);font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem)} .contact-head p:not(.eyebrow){color:#CFD9E3}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,56px);align-items:start}
.contact-info{background:var(--navy);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-card);padding:clamp(24px,3vw,36px);color:#fff}
.ci-brand{display:flex;gap:16px;align-items:center;padding-bottom:var(--sp-4);border-bottom:1px solid rgba(255,255,255,.14)}
.ci-brand .logo-mark{width:56px;height:56px;background:var(--yellow);color:var(--deep);flex:none} .ci-brand .logo-mark .ic{width:32px;height:32px}
.ci-brand h3{color:#fff;font-size:1.4rem} .ci-brand p{font-size:.9rem;color:#B9C7D6;line-height:1.45;margin-top:2px}
.ci-list{display:grid;gap:20px;padding-block:var(--sp-4)}
.ci-list li{display:flex;gap:16px;align-items:flex-start} .ci-list .ic{width:26px;height:26px;color:var(--yellow);margin-top:2px}
.ci-list span{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:#9FB0C2;font-weight:600} .ci-list b{font-size:1.05rem;color:#fff;font-weight:600} .ci-list a:hover b{color:var(--yellow)}
.ci-note{color:#CFD9E3;font-size:.95rem;margin-bottom:var(--sp-3)}
.contact-form h3{font-size:1.35rem;margin-bottom:4px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

@media (max-width:1024px){
  .facts-grid{grid-template-columns:repeat(2,1fr)} .fact:nth-child(3){border-left:0;padding-left:0} .fact:nth-child(n+3){border-top:1px solid var(--border)}
  .story,.install-in,.acct,.contact-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fact{padding:18px 12px 18px 0} .fact:nth-child(even){padding-left:16px}
  .callout{flex-direction:column;gap:10px}
  .page-hero .btn{width:100%}
  .ci-brand{align-items:flex-start}
}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
.install h2.on-dark{color:#fff}
.serve-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-card);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:12px}
.serve-card h3{color:#fff} .serve-card p{color:#C5D1DD;font-size:.97rem}
.serve-card .why-ic{margin-bottom:6px}
@media (max-width:1024px){.grid-2{grid-template-columns:1fr}}

/* ===== Certifications & Badges Strip ===== */
.badges-strip{background:#fff;padding-block:clamp(30px,4vw,48px);border-bottom:1px solid var(--border)}
.badges-grid{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:clamp(28px,5vw,64px)}
.badge-item{display:flex;align-items:center;justify-content:center;background:transparent;border:0;outline:0;box-shadow:none;padding:0;transition:transform .2s ease,opacity .2s ease}
.badge-item:hover{transform:translateY(-2px);opacity:.92}
.badge-item img{max-height:86px;max-width:180px;width:auto;height:auto;object-fit:contain;display:block}

@media (max-width:1024px){
  .badges-grid{gap:clamp(20px,4vw,40px)}
  .badge-item img{max-height:70px;max-width:140px}
}
@media (max-width:640px){
  .badges-grid{gap:20px 24px}
  .badge-item img{max-height:56px;max-width:115px}
}

/* ===== Persistent Floating Call Button ===== */
.floating-call-btn{
  position:fixed;
  right:clamp(16px,2.5vw,28px);
  bottom:clamp(16px,2.5vw,28px);
  z-index:140;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--yellow);
  color:var(--deep);
  padding:14px 22px;
  border-radius:50px;
  font-weight:800;
  font-size:.95rem;
  box-shadow:0 8px 24px rgba(11,27,43,.25),0 2px 6px rgba(11,27,43,.12);
  border:2px solid #fff;
  transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease;
  cursor:pointer;
  white-space:nowrap;
}
.floating-call-btn:hover{
  background:var(--yellow-h);
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(11,27,43,.32);
}
.floating-call-btn .ic{width:20px;height:20px;stroke-width:2.2}
.float-mob{display:none}
@media (max-width:640px){
  .floating-call-btn{padding:12px 18px;font-size:.88rem}
  .float-desk{display:none}
  .float-mob{display:inline}
}

/* ===== Typography & Common Helpers ===== */
.text-white{color:#fff!important}
.lead-light{color:#CFD9E3!important;max-width:720px;margin-inline:auto}
.sec-head-row{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-5);flex-wrap:wrap}

/* ===== Core Services 8-Card Grid ===== */
.services-8-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(16px,2vw,24px);
}
.svc8-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:clamp(22px,2.5vw,28px);
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.svc8-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow);
  border-color:#CBD5DF;
}
.svc8-head{display:flex;justify-content:space-between;align-items:center}
.svc8-num{font-size:.78rem;font-weight:800;color:var(--muted);background:var(--gray);padding:3px 9px;border-radius:20px}
.svc8-ic{width:44px;height:44px;border-radius:var(--r-btn);background:var(--navy);color:var(--yellow);display:grid;place-items:center}
.svc8-ic .ic{width:22px;height:22px}
.svc8-card h3{font-size:1.15rem;color:var(--head);line-height:1.3}
.svc8-card p{font-size:.92rem;color:var(--body);line-height:1.6;flex:1}
.svc8-link{margin-top:auto;font-size:.9rem}

@media (max-width:1180px){
  .services-8-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  .services-8-grid{grid-template-columns:1fr}
}

/* ===== Section 05: Homeowner Problem Selector (Diagnostic Path) ===== */
.problems-sec{background:var(--deep);color:#fff;padding-block:var(--sec)}
.diagnostic-wrap{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(24px,3.5vw,48px);
  margin-top:clamp(28px,4vw,44px);
  align-items:start;
}
.diagnostic-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:640px;
  overflow-y:auto;
  padding-right:6px;
}
.diag-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r-btn);
  color:#E3EAF1;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  transition:all .18s ease;
  width:100%;
}
.diag-btn:hover{
  background:rgba(255,255,255,.1);
  color:#fff;
  border-color:rgba(255,255,255,.25);
}
.diag-btn.active{
  background:var(--navy);
  border-color:var(--yellow);
  border-left:4px solid var(--yellow);
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
.diag-btn.active .diag-ic{color:var(--yellow);background:rgba(255,213,42,.15)}
.diag-btn.active .diag-arr{transform:translateX(4px);color:var(--yellow)}
.diag-ic{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;flex:none;color:#E3EAF1}
.diag-ic .ic{width:18px;height:18px}
.diag-txt{flex:1;line-height:1.35}
.diag-arr{color:rgba(255,255,255,.4);transition:transform .18s;flex:none}
.diag-arr .ic{width:16px;height:16px}

.diagnostic-panels{position:relative}
.diag-panel{
  background:#fff;
  color:var(--body);
  border-radius:var(--r-card);
  padding:clamp(26px,3.5vw,40px);
  box-shadow:0 16px 36px rgba(0,0,0,.3);
  animation:fadePanel .25s ease-out;
}
.diag-panel[hidden]{display:none}
@keyframes fadePanel{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.diag-panel-head{padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:20px}
.diag-panel-badge{display:inline-flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--navy);background:var(--gray);padding:5px 12px;border-radius:20px;margin-bottom:10px}
.diag-panel-badge .ic{width:16px;height:16px}
.diag-panel-head h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.65rem);color:var(--head);line-height:1.25}
.diag-panel-body h4{font-size:1.05rem;color:var(--head);margin-bottom:14px;font-weight:700}
.diag-fix-list{display:grid;gap:12px;margin-bottom:26px}
.diag-fix-list li{display:flex;align-items:flex-start;gap:12px;font-size:.95rem;color:var(--body)}
.fix-check{color:var(--navy);background:var(--yellow);border-radius:50%;width:22px;height:22px;display:grid;place-items:center;flex:none;margin-top:2px}
.fix-check .ic{width:14px;height:14px;stroke-width:2.6}
.diag-panel-foot{border-top:1px solid var(--border);padding-top:20px}

@media (max-width:1024px){
  .diagnostic-wrap{grid-template-columns:1fr}
  .diagnostic-nav{max-height:none}
}

/* ===== Section 06: Materials Showcase Split Header + 10-Card Grid ===== */
.materials-sec{background:#fff;padding-block:var(--sec)}
.mat-split-header{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:clamp(28px,4vw,56px);
  align-items:center;
  margin-bottom:clamp(36px,5vw,56px);
}
.mat-header-copy{display:flex;flex-direction:column;gap:16px}
.mat-header-highlights{display:flex;flex-direction:column;gap:10px;margin:8px 0 12px}
.mat-hl-item{display:flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem;color:var(--head)}
.mat-hl-ic{width:28px;height:28px;border-radius:50%;background:rgba(20,43,70,.08);color:var(--navy);display:grid;place-items:center;flex:none}
.mat-hl-ic .ic{width:16px;height:16px}
.mat-header-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:6px}
.mat-header-media{position:relative}
.mat-img-frame{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 16px 36px rgba(11,27,43,.14);
  border:1px solid var(--border);
  background:var(--deep);
}
.mat-img-frame img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.mat-img-floating-tag{
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  background:rgba(11,27,43,.92);
  backdrop-filter:blur(8px);
  padding:12px 16px;
  border-radius:8px;
  border-left:4px solid var(--yellow);
  color:#fff;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.pulse-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--yellow);
  flex:none;
  box-shadow:0 0 0 0 rgba(255,213,42,.7);
  animation:pulseDot 2s infinite;
}
@keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(255,213,42,.7)}70%{box-shadow:0 0 0 10px rgba(255,213,42,0)}100%{box-shadow:0 0 0 0 rgba(255,213,42,0)}}
.mat-img-floating-tag strong{display:block;font-size:.9rem;color:#fff;line-height:1.25}
.mat-img-floating-tag small{display:block;font-size:.78rem;color:#BACBDC;line-height:1.25}

.mat10-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(14px,1.8vw,22px);
}
.mat10-card{
  background:#fff;
  border:1px solid var(--border);
  border-top:3px solid var(--navy);
  border-radius:var(--r-card);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative;
  box-shadow:0 4px 12px rgba(20,43,70,.04);
}
.mat10-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(20,43,70,.12);
  border-top-color:var(--yellow);
  border-color:#CBD5E1;
}
.mat10-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mat10-tag{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:var(--gray);
  color:var(--navy);
  padding:4px 8px;
  border-radius:4px;
  border:1px solid var(--border);
}
.mat10-idx{font-size:.85rem;font-weight:800;color:var(--muted)}
.mat10-card h3{font-size:1.05rem;font-weight:700;color:var(--head);line-height:1.35;margin:0}
.mat10-desc{font-size:.88rem;line-height:1.55;color:var(--body);flex:1;margin:0}
.mat10-spec-bar{
  display:flex;
  align-items:center;
  gap:8px;
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  padding:8px 10px;
  border-radius:6px;
  font-size:.78rem;
  font-weight:600;
  color:var(--head);
}
.mat10-spec-bar .spec-ic{color:#2E7D32;display:grid;place-items:center;flex:none}
.mat10-spec-bar .spec-ic .ic{width:14px;height:14px}
.mat10-foot{margin-top:auto;padding-top:10px;border-top:1px solid #F1F5F9}
.mat10-link{font-weight:700;color:var(--navy);font-size:.88rem}
.mat10-link:hover{color:var(--navy-light);text-decoration:underline}

@media (max-width:1200px){
  .mat10-grid{grid-template-columns:repeat(3,1fr)}
  .mat-split-header{grid-template-columns:1fr;gap:32px}
}
@media (max-width:768px){
  .mat10-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .mat10-grid{grid-template-columns:1fr}
}

/* ===== Section 07: Roof Work Warranties & Workmanship Guarantees ===== */
.guarantee-sec{background:linear-gradient(180deg,var(--deep),#091726);color:#fff;padding-block:var(--sec)}
.guar-header-block{text-align:center;max-width:880px;margin:0 auto clamp(36px,5vw,56px)}
.guar-seal-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,213,42,.12);
  border:1px solid rgba(255,213,42,.35);
  color:var(--yellow);
  padding:6px 16px;
  border-radius:50px;
  font-weight:700;
  font-size:.82rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:16px;
}
.guar-seal-badge .ic{width:16px;height:16px}
.guar-trust-metrics{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:clamp(16px,3vw,36px);
  flex-wrap:wrap;
  margin-top:28px;
  padding:18px 24px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
}
.gt-metric{display:flex;flex-direction:column;text-align:center}
.gt-metric strong{font-size:1.35rem;color:var(--yellow);font-weight:800;line-height:1.2}
.gt-metric span{font-size:.78rem;color:#E1E6EB;text-transform:uppercase;font-weight:600;letter-spacing:.03em;margin-top:4px}
.gt-sep{width:1px;height:32px;background:rgba(255,255,255,.15)}

.guar-cards-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.5vw,28px);
}
.guar-trust-card{
  background:#0E2238;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-card);
  padding:clamp(24px,3vw,32px);
  display:flex;
  flex-direction:column;
  gap:16px;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.guar-trust-card:hover{
  border-color:var(--yellow);
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}
.guar-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.guar-pillar-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.08);
  padding:4px 10px;
  border-radius:50px;
  font-size:.8rem;
  font-weight:700;
  color:#fff;
}
.guar-num-dot{
  background:var(--yellow);
  color:var(--deep);
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:.72rem;
  font-weight:800;
}
.guar-badge-tag{display:inline-flex;align-items:center;gap:6px;color:var(--yellow);font-size:.8rem;font-weight:700}
.guar-badge-tag .ic{width:15px;height:15px}
.guar-trust-card h3{color:#fff;font-size:1.25rem;line-height:1.3;margin:0}
.guar-commit-box{
  background:rgba(255,213,42,.08);
  border-left:3px solid var(--yellow);
  padding:12px 16px;
  border-radius:0 6px 6px 0;
}
.commit-lbl{display:block;font-size:.72rem;text-transform:uppercase;font-weight:800;letter-spacing:.05em;color:var(--yellow);margin-bottom:3px}
.commit-txt{color:#FFFFFF;font-weight:600;font-size:.92rem;line-height:1.45;margin:0}
.guar-details-block{display:flex;flex-direction:column;gap:14px;margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
.guar-point strong{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--yellow);margin-bottom:4px}
.guar-point strong .pt-ic{color:var(--yellow);display:grid;place-items:center}
.guar-point strong .pt-ic .ic{width:15px;height:15px}
.guar-point p{color:#CFD9E3;font-size:.88rem;line-height:1.55;margin:0}

.guar-strip{
  background:#fff;
  color:var(--head);
  border-radius:var(--r-card);
  padding:clamp(24px,3.5vw,36px);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin-top:clamp(36px,5vw,56px);
  box-shadow:0 14px 32px rgba(0,0,0,.25);
  flex-wrap:wrap;
}
.guar-strip-text{max-width:760px}
.guar-strip-badge{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--navy);margin-bottom:6px}
.guar-strip-text h3{font-size:clamp(1.25rem,1.1rem + .7vw,1.6rem);margin-bottom:6px;color:var(--head)}
.guar-strip-text p{color:var(--body);font-size:.95rem}

@media (max-width:1024px){
  .guar-cards-grid{grid-template-columns:repeat(2,1fr)}
  .gt-sep{display:none}
}
@media (max-width:640px){
  .guar-cards-grid{grid-template-columns:1fr}
  .guar-strip .btn{width:100%}
}

/* ===== Section 08: Recent Projects Real Grid ===== */
.proj-real-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.5vw,28px);
}
.proj-real-card{
  background:#fff;
  border-radius:var(--r-card);
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 4px 16px rgba(20,43,70,.05);
  display:flex;
  flex-direction:column;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.proj-real-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 32px rgba(20,43,70,.12);
  border-color:#CBD5DF;
}
.proj-img-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--deep);
}
.proj-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}
.proj-real-card:hover .proj-img-wrap img{transform:scale(1.04)}
.proj-img-overlay{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  pointer-events:none;
}
.proj-loc-pill{
  background:rgba(11,27,43,.88);
  backdrop-filter:blur(4px);
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
.proj-loc-pill .ic{width:14px;height:14px;color:var(--yellow)}
.proj-num-pill{background:var(--yellow);color:var(--deep);font-size:.78rem;font-weight:800;padding:4px 10px;border-radius:50px}
.proj-card-content{
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
  gap:12px;
}
.proj-card-content h3{font-size:1.18rem;font-weight:700;color:var(--head);line-height:1.3;margin:0}
.proj-card-desc{font-size:.9rem;color:var(--body);line-height:1.55;flex-grow:1;margin:0}
.proj-key-detail{
  background:var(--gray);
  border-left:3px solid var(--navy);
  border-radius:0 6px 6px 0;
  padding:12px 14px;
  margin:4px 0;
}
.key-detail-head{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:.78rem;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.04em;
  color:var(--navy);
  margin-bottom:3px;
}
.key-detail-head .ic{color:#2E7D32;width:14px;height:14px}
.key-detail-text{font-size:.86rem;font-weight:600;color:var(--head);line-height:1.45;margin:0}
.proj-card-foot{border-top:1px solid var(--border);padding-top:14px;margin-top:auto}
.proj-link{font-size:.88rem;font-weight:700;color:var(--navy)}
.proj-link:hover{color:var(--navy-light);text-decoration:underline}

@media (max-width:1024px){
  .proj-real-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .proj-real-grid{grid-template-columns:1fr}
}

/* ===== Section 09: Roof Financing Interactive 2-Column Section ===== */
.fin-sec{background:#fff;padding-block:var(--sec)}
.fin-layout{
  display:grid;
  grid-template-columns:minmax(0,3.5fr) minmax(0,6.5fr);
  gap:clamp(24px,4vw,56px);
  margin-top:clamp(28px,4vw,44px);
  align-items:start;
}
.fin-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fin-tab-btn{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-btn);
  color:var(--head);
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  font-size:.95rem;
  font-weight:600;
  transition:all .18s ease;
  width:100%;
}
.fin-tab-btn:hover{
  background:var(--gray);
  border-color:#CBD5DF;
}
.fin-tab-btn.active{
  background:var(--gray);
  border-color:var(--navy);
  border-left:5px solid var(--yellow);
  font-weight:700;
  color:var(--navy);
  box-shadow:0 3px 10px rgba(11,27,43,.06);
}
.fin-tab-btn.active .fin-tab-num{background:var(--navy);color:var(--yellow)}
.fin-tab-btn.active .fin-tab-arr{transform:translateX(4px);color:var(--navy)}
.fin-tab-num{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--gray);
  color:var(--head);
  display:grid;
  place-items:center;
  font-size:.8rem;
  font-weight:800;
  flex:none;
}
.fin-tab-title{flex:1;line-height:1.35}
.fin-tab-arr{color:var(--muted);flex:none;transition:transform .18s}
.fin-tab-arr .ic{width:16px;height:16px}

.fin-content{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:clamp(26px,4vw,44px);
  box-shadow:0 6px 20px rgba(11,27,43,.05);
}
.fin-panel[hidden]{display:none}
.fin-panel h3{font-size:clamp(1.35rem,1.1rem + .9vw,1.75rem);color:var(--head);margin-bottom:8px}
.fin-panel-intro{font-size:1.02rem;color:var(--body);line-height:1.6;margin-bottom:24px;border-bottom:1px solid var(--border);padding-bottom:18px}
.fin-points-list{display:grid;gap:18px;margin-bottom:28px}
.fin-point{display:flex;gap:16px;align-items:flex-start}
.fin-pt-ic{
  width:42px;
  height:42px;
  border-radius:var(--r-btn);
  background:var(--navy);
  color:var(--yellow);
  display:grid;
  place-items:center;
  flex:none;
  margin-top:2px;
}
.fin-pt-ic .ic{width:22px;height:22px}
.fin-point h4{font-size:1.05rem;color:var(--head);margin-bottom:4px;font-weight:700}
.fin-point p{font-size:.92rem;color:var(--body);line-height:1.6}
.fin-panel-foot{border-top:1px solid var(--border);padding-top:22px}

@media (max-width:1024px){
  .fin-layout{grid-template-columns:1fr}
}

/* ===== Section 10: Service-Area Coverage (Split & Grid) ===== */
.areas-split{
  display:grid;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.areas-left h2{margin-bottom:var(--sp-3)}
.areas-left .lead{margin-bottom:var(--sp-4)}
.areas-badges-note{
  background:#fff;
  border:1px solid var(--border);
  border-left:4px solid var(--navy);
  border-radius:var(--r-btn);
  padding:16px 18px;
  font-size:.88rem;
  line-height:1.55;
  margin-bottom:var(--sp-4);
}
.areas-badges-note strong{color:var(--navy)}

.area-clean-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}
.area-clean-grid a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-btn);
  color:var(--head);
  font-weight:700;
  font-size:.95rem;
  transition:all .18s ease;
}
.area-clean-grid a:hover{
  background:var(--navy);
  color:var(--yellow);
  border-color:var(--navy);
  transform:translateY(-2px);
}
.area-clean-grid a:hover .area-arr{transform:translateX(4px);color:var(--yellow)}
.area-clean-grid a:hover .area-num{background:rgba(255,255,255,.15);color:#fff}
.area-num{
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--gray);
  color:var(--muted);
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:800;
  flex:none;
}
.area-name{display:inline-flex;align-items:center;gap:8px;flex:1}
.area-name .ic{width:16px;height:16px;color:#C0392B}
.area-arr{color:var(--muted);flex:none;transition:transform .18s}
.area-arr .ic{width:15px;height:15px}

@media (max-width:1024px){
  .areas-split{grid-template-columns:1fr}
}
@media (max-width:600px){
  .area-clean-grid{grid-template-columns:1fr}
}

/* ===== Section 11: Reviews 3-Column Grid ===== */
.reviews-sec{background:#fff;padding-block:var(--sec)}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.5vw,28px);
}
.review-card{
  background:var(--gray);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:clamp(22px,2.5vw,28px);
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
  transition:transform .2s ease,box-shadow .2s ease;
}
.review-card:hover{
  background:#fff;
  transform:translateY(-3px);
  box-shadow:var(--shadow);
}
.review-card-top{display:flex;justify-content:space-between;align-items:center}
.star-row{display:flex;align-items:center;gap:4px}
.star-ic{width:18px;height:18px}
.star-row strong{font-size:.9rem;color:var(--head);margin-left:4px}
.review-loc{display:inline-flex;align-items:center;gap:4px;font-size:.82rem;font-weight:600;color:var(--muted)}
.review-loc .ic{width:14px;height:14px;color:#C0392B}
.review-title{font-size:1.1rem;color:var(--head);line-height:1.3;font-weight:700}
.review-card blockquote{margin:0;font-size:.95rem;color:var(--body);line-height:1.65;font-style:italic;flex:1}
.review-card figcaption{border-top:1px solid var(--border);padding-top:14px;margin-top:auto}
.review-author{display:flex;align-items:flex-start;gap:12px}
.author-avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:var(--yellow);display:grid;place-items:center;flex:none;margin-top:2px}
.author-avatar .ic{width:18px;height:18px}
.author-details{display:flex;flex-direction:column;gap:2px}
.review-badge-tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--navy);
  background:rgba(255,213,42,.35);
  border:1px solid rgba(242,197,29,.6);
  padding:2px 8px;
  border-radius:4px;
  width:fit-content;
  margin-bottom:3px;
}
.author-name{display:block;font-size:.96rem;font-weight:700;color:var(--head);line-height:1.25}
.author-property{display:block;font-size:.8rem;font-weight:600;color:var(--muted);line-height:1.35}

@media (max-width:1180px){
  .reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .reviews-grid{grid-template-columns:1fr}
}

/* ===== Section 12: FAQ Accordion ===== */
.faq-layout{
  display:grid;
  grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);
  gap:clamp(28px,5vw,64px);
  align-items:start;
}
.faq-left h2{margin-bottom:var(--sp-3)}
.faq-left .lead{margin-bottom:var(--sp-4)}
.faq-help-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px 22px;
  display:grid;
  gap:12px;
  box-shadow:var(--shadow);
}
.faq-help-box h3{font-size:1.15rem;color:var(--head)}
.faq-help-box p{font-size:.92rem;color:var(--body);line-height:1.55}

.faq-accordion{display:grid;gap:12px}
.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-btn);
  overflow:hidden;
  transition:border-color .18s;
}
.faq-item[open]{border-color:var(--navy);box-shadow:0 4px 14px rgba(11,27,43,.06)}
.faq-item summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:18px 22px;
  cursor:pointer;
  font-weight:700;
  font-size:1rem;
  color:var(--head);
  line-height:1.35;
  user-select:none;
}
.faq-chevron{color:var(--navy);transition:transform .2s;flex:none}
.faq-chevron .ic{width:18px;height:18px}
.faq-item[open] .faq-chevron{transform:rotate(180deg)}
.faq-ans{
  padding:0 22px 20px;
  font-size:.95rem;
  color:var(--body);
  line-height:1.65;
  border-top:1px solid var(--gray);
  padding-top:14px;
}

@media (max-width:1024px){
  .faq-layout{grid-template-columns:1fr}
}

/* ===== Section 13: Final CTA & Credentials ===== */
.cta-sub{color:var(--yellow);font-weight:700;font-size:1.1rem;margin-bottom:var(--sp-4)}
.creds-list{display:grid;gap:14px;margin-bottom:var(--sp-5)}
.creds-list li{display:flex;gap:14px;align-items:flex-start}
.cred-ic{width:38px;height:38px;border-radius:var(--r-btn);background:rgba(255,213,42,.15);color:var(--yellow);display:grid;place-items:center;flex:none}
.cred-ic .ic{width:20px;height:20px}
.creds-list div strong{display:block;font-size:.95rem;color:#fff;line-height:1.35}
.creds-list div span{display:block;font-size:.8rem;color:#9FB0C2;text-transform:uppercase;letter-spacing:.05em}
.quote-card{
  background:#fff;
  border-radius:var(--r-card);
  padding:clamp(26px,4vw,38px);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.quote-card h3{font-size:1.4rem;color:var(--head);margin-bottom:4px}
.form-desc{font-size:.92rem;color:var(--muted);margin-bottom:16px}

/* =========================================================
   SERVICE PAGES & ROOF REPAIR LAYOUT (css/styles.css)
   ========================================================= */

/* Hero Triage Bar */
.repair-hero .page-hero-in{padding-bottom:clamp(40px,5vw,70px)}
.hero-triage-bar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:clamp(24px,3vw,36px);
  max-width:880px;
}
.triage-call-box,
.triage-cta-box{
  background:rgba(11,27,43,.85);
  border:1px solid rgba(255,255,255,.15);
  border-radius:var(--r-card);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  backdrop-filter:blur(10px);
}
.triage-call-box{
  border-left:4px solid var(--yellow);
  background:linear-gradient(135deg,rgba(20,43,70,.9) 0%,rgba(11,27,43,.92) 100%);
}
.triage-cta-box{
  border-left:4px solid #38BDF8;
}
.triage-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--yellow);
}
.triage-phone-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.triage-lbl{
  font-size:.88rem;
  font-weight:600;
  color:#E2E8F0;
  line-height:1.3;
}
.triage-phone-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--yellow);
  color:var(--deep);
  font-size:1.05rem;
  font-weight:800;
  padding:12px 18px;
  border-radius:var(--r-btn);
  text-decoration:none;
  box-shadow:0 6px 18px rgba(255,213,42,.35);
  transition:transform .18s ease,background .18s ease;
  width:fit-content;
}
.triage-phone-btn:hover{
  background:#FFE066;
  transform:translateY(-2px);
  color:var(--deep);
}
.triage-phone-btn .ic{width:20px;height:20px}
.triage-note{
  font-size:.78rem;
  color:#94A3B8;
  line-height:1.35;
}

/* Service Page Wrap & 2-Column Layout */
.service-page-wrap{
  padding-block:clamp(36px,5vw,64px);
}
.service-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:clamp(28px,3.5vw,48px);
  align-items:start;
}

/* Main Content Blocks */
.service-main-content{
  display:flex;
  flex-direction:column;
  gap:clamp(40px,5vw,60px);
  min-width:0;
}
.service-block{
  scroll-margin-top:100px;
}
.service-block h2{
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  color:var(--head);
  line-height:1.25;
  margin-bottom:var(--sp-3);
}
.service-block h3{
  font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem);
  color:var(--head);
  line-height:1.3;
  margin-top:24px;
  margin-bottom:12px;
}
.service-block p{
  font-size:1rem;
  line-height:1.7;
  color:var(--body);
  margin-bottom:16px;
}
.service-block p.lead-text{
  font-size:1.12rem;
  line-height:1.65;
  color:var(--head);
  font-weight:500;
}
.service-block a{
  color:var(--navy);
  font-weight:600;
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  transition:color .18s;
}
.service-block a:hover{
  color:#0284C7;
}

.block-header{
  margin-bottom:var(--sp-3);
}
.sec-badge{
  display:inline-block;
  background:#E0F2FE;
  color:#0369A1;
  font-size:.76rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:4px 10px;
  border-radius:4px;
  margin-bottom:8px;
}

/* Action Highlight Box (Section 1) */
.action-highlight-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:24px;
}
.ah-card{
  border-radius:var(--r-card);
  padding:22px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:var(--shadow);
}
.ah-urgent{
  background:#FFFBEB;
  border:1px solid #FDE68A;
  border-left:5px solid #F59E0B;
}
.ah-plan{
  background:#F0FDF4;
  border:1px solid #BBF7D0;
  border-left:5px solid #10B981;
}
.ah-icon{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  flex:none;
}
.ah-urgent .ah-icon{background:#FEF3C7;color:#D97706}
.ah-plan .ah-icon{background:#DCFCE7;color:#059669}
.ah-icon .ic{width:22px;height:22px}
.ah-card strong{display:block;font-size:1.02rem;color:var(--head);margin-bottom:6px}
.ah-card p{font-size:.9rem;line-height:1.45;color:var(--body);margin-bottom:12px}
.phone-link-lg{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:1.05rem;
  font-weight:800;
  color:#B45309!important;
  text-decoration:none!important;
}
.phone-link-lg:hover{text-decoration:underline!important}
.phone-link-lg .ic{width:18px;height:18px}

/* Crucial Grid (Section 2) */
.crucial-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:22px;
}
.crucial-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px 22px;
  box-shadow:0 4px 14px rgba(20,43,70,.04);
  display:flex;
  flex-direction:column;
  gap:12px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.crucial-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(20,43,70,.08);
}
.crucial-card.highlight{
  border-left:4px solid #EF4444;
  background:#FEF2F2;
}
.crucial-ic{
  width:44px;
  height:44px;
  border-radius:10px;
  background:#F1F5F9;
  color:var(--navy);
  display:grid;
  place-items:center;
  flex:none;
}
.crucial-card.highlight .crucial-ic{
  background:#FEE2E2;
  color:#DC2626;
}
.crucial-ic .ic{width:22px;height:22px}
.crucial-content h4{
  font-size:1.05rem;
  color:var(--head);
  margin-bottom:8px;
}
.crucial-content p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--body);
  margin-bottom:0;
}

/* Signs Container (Section 3) */
.signs-container{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-block:20px;
}
.signs-group{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px;
  box-shadow:0 4px 12px rgba(20,43,70,.03);
}
.signs-group-title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.1rem;
  color:var(--head);
  margin-bottom:14px;
}
.signs-group-title .ic{
  width:20px;
  height:20px;
  color:var(--navy);
}
.signs-list{
  display:grid;
  gap:12px;
  list-style:none;
  padding:0;
}
.signs-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.95rem;
  line-height:1.55;
  color:var(--body);
}
.signs-list .ic{
  width:18px;
  height:18px;
  color:#DC2626;
  flex:none;
  margin-top:2px;
}
.travel-path-reality{
  background:#F8FAFC;
  border-left:4px solid var(--navy);
  padding:20px 22px;
  border-radius:0 8px 8px 0;
  margin-block:20px;
}
.travel-path-reality h4{
  font-size:1.05rem;
  color:var(--head);
  margin-bottom:8px;
}
.diag-alert-box{
  background:#EFF6FF;
  border:1px solid #BFDBFE;
  border-radius:var(--r-card);
  padding:22px 24px;
  display:flex;
  gap:18px;
  align-items:center;
  margin-top:24px;
}
.diag-alert-box .ic{
  width:32px;
  height:32px;
  color:#1D4ED8;
  flex:none;
}
.diag-alert-box strong{
  display:block;
  font-size:1.02rem;
  color:#1E3A8A;
  margin-bottom:4px;
}
.diag-alert-box p{
  font-size:.92rem;
  color:#1E40AF;
  margin-bottom:0;
  line-height:1.5;
}

/* Process Flow Roadmap (Section 4) */
.process-flow-roadmap{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:24px;
  position:relative;
}
.roadmap-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:26px 24px;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:20px;
  box-shadow:0 4px 14px rgba(20,43,70,.04);
  transition:border-color .2s;
}
.roadmap-item:hover{
  border-color:var(--navy);
}
.rm-number{
  width:56px;
  height:56px;
  border-radius:12px;
  background:var(--navy);
  color:#fff;
  font-size:1.35rem;
  font-weight:800;
  display:grid;
  place-items:center;
  flex:none;
  box-shadow:0 6px 16px rgba(20,43,70,.2);
}
.rm-step-title{
  font-size:1.15rem;
  color:var(--head);
  margin-bottom:8px;
}
.rm-highlight{
  display:inline-block;
  background:#FEF3C7;
  color:#92400E;
  font-size:.78rem;
  font-weight:700;
  padding:3px 8px;
  border-radius:4px;
  margin-bottom:8px;
}
.rm-content p{
  font-size:.94rem;
  line-height:1.6;
  color:var(--body);
  margin-bottom:10px;
}
.rm-bullets{
  list-style:none;
  padding:0;
  display:grid;
  gap:6px;
  margin-top:8px;
}
.rm-bullets li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.88rem;
  color:var(--muted);
}
.rm-bullets .ic{
  width:16px;
  height:16px;
  color:#059669;
  flex:none;
  margin-top:2px;
}
.rm-quote-callout{
  background:#F1F5F9;
  border-left:3px solid var(--navy);
  padding:10px 14px;
  font-size:.88rem;
  color:var(--head);
  font-style:italic;
  margin-top:10px;
  border-radius:0 4px 4px 0;
}

/* Verified Contractor Credentials (Section 5) */
.creds-verified-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
  margin-top:22px;
}
.cred-vcard{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:22px;
  box-shadow:0 4px 12px rgba(20,43,70,.03);
}
.cred-vhead{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
}
.cred-vicon{
  width:40px;
  height:40px;
  border-radius:8px;
  background:#E0F2FE;
  color:var(--navy);
  display:grid;
  place-items:center;
  flex:none;
}
.cred-vicon .ic{width:20px;height:20px}
.cred-vhead h4{
  font-size:1.02rem;
  color:var(--head);
}
.cred-vbody p{
  font-size:.92rem;
  line-height:1.55;
  color:var(--body);
  margin-bottom:0;
}

/* Relevant Repair Projects (Section 6) */
.repair-projects-grid{
  display:flex;
  flex-direction:column;
  gap:32px;
  margin-top:24px;
}
.r-proj-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 6px 20px rgba(20,43,70,.06);
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
}
.r-proj-media{
  position:relative;
  background:var(--deep);
  min-height:260px;
}
.r-proj-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.r-proj-tag{
  position:absolute;
  top:14px;
  left:14px;
  background:rgba(11,27,43,.85);
  color:var(--yellow);
  font-size:.74rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 10px;
  border-radius:4px;
  backdrop-filter:blur(6px);
}
.r-proj-body{
  padding:24px 26px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.r-proj-body h3{
  font-size:1.25rem;
  color:var(--head);
  margin-top:0;
  margin-bottom:12px;
}
.r-proj-body p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--body);
  margin-bottom:14px;
}
.proj-kv-table{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-radius:8px;
  padding:12px 16px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:auto;
}
.proj-kv-cell strong{
  display:block;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:2px;
}
.proj-kv-cell span{
  display:block;
  font-size:.88rem;
  font-weight:700;
  color:var(--head);
}

/* Professional Safety & Hygiene (Section 7) */
.safety-hygiene-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-block:20px;
}
.sh-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.sh-icon{
  width:38px;
  height:38px;
  border-radius:8px;
  background:#FEF3C7;
  color:#B45309;
  display:grid;
  place-items:center;
  flex:none;
}
.sh-icon .ic{width:20px;height:20px}
.sh-card strong{display:block;font-size:.98rem;color:var(--head);margin-bottom:4px}
.sh-card p{font-size:.88rem;line-height:1.5;color:var(--body);margin-bottom:0}

/* Senate Bill 4-D 25% Rule Box */
.sb4d-rule-box{
  background:#FFFBEB;
  border:1px solid #FCD34D;
  border-left:5px solid #F59E0B;
  border-radius:var(--r-card);
  padding:22px 24px;
  margin-block:24px;
}
.sb4d-rule-box h4{
  font-size:1.15rem;
  color:#92400E;
  margin-bottom:8px;
}
.sb4d-rule-box p{
  font-size:.94rem;
  color:#78350F;
  line-height:1.6;
  margin-bottom:8px;
}
.sb4d-rule-box p:last-child{margin-bottom:0}

/* Repair Cost Tiers */
.cost-tiers-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-block:24px;
}
.cost-tier-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px 20px;
  display:flex;
  flex-direction:column;
  box-shadow:0 4px 14px rgba(20,43,70,.04);
  position:relative;
}
.cost-tier-card.featured{
  border-color:var(--navy);
  box-shadow:0 8px 24px rgba(20,43,70,.12);
}
.ct-badge{
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#0369A1;
  background:#E0F2FE;
  padding:3px 8px;
  border-radius:4px;
  width:fit-content;
  margin-bottom:10px;
}
.cost-tier-card h4{
  font-size:1.1rem;
  color:var(--head);
  margin-bottom:8px;
}
.ct-price{
  font-size:1.75rem;
  font-weight:800;
  color:var(--navy);
  line-height:1.1;
  margin-bottom:4px;
}
.ct-period{
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:14px;
}
.ct-scope{
  font-size:.88rem;
  color:var(--body);
  line-height:1.55;
  margin-bottom:16px;
  flex-grow:1;
}
.ct-features{
  list-style:none;
  padding:0;
  border-top:1px solid #F1F5F9;
  padding-top:12px;
  display:grid;
  gap:6px;
}
.ct-features li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.82rem;
  color:var(--head);
}
.ct-features .ic{
  width:14px;
  height:14px;
  color:#059669;
  flex:none;
}

/* Cost Drivers Block */
.cost-drivers-block{
  background:#F8FAFC;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px;
  margin-top:20px;
}
.cost-drivers-block h4{
  font-size:1.1rem;
  color:var(--head);
  margin-bottom:14px;
}
.cost-drivers-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}
.cd-item strong{
  display:block;
  font-size:.92rem;
  color:var(--head);
  margin-bottom:2px;
}
.cd-item p{
  font-size:.85rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:0;
}

/* Service Areas Cloud (Section 8) */
.areas-pill-cloud{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:12px;
  margin-top:20px;
}
.area-pill{
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  text-decoration:none!important;
  color:var(--head)!important;
  font-weight:600;
  font-size:.92rem;
  box-shadow:0 2px 6px rgba(20,43,70,.03);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.area-pill:hover{
  border-color:var(--navy);
  transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(20,43,70,.08);
  color:var(--navy)!important;
}
.area-pill .arr{color:var(--muted);font-weight:400}

/* =========================================================
   STICKY SIDEBAR COMPONENTS
   ========================================================= */
.service-sidebar{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.sidebar-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px 22px;
  box-shadow:0 4px 16px rgba(20,43,70,.05);
}

/* Sidebar Card 1: Urgent Call */
.sidebar-call-card{
  background:linear-gradient(145deg,var(--deep) 0%,var(--navy) 100%);
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(11,27,43,.25);
}
.sb-call-header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.sb-call-header .pulse-dot{margin-top:2px}
.sb-call-header span{
  font-size:.8rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--yellow);
}
.sidebar-call-card h3{
  color:#fff;
  font-size:1.3rem;
  margin-bottom:8px;
}
.sidebar-call-card p{
  font-size:.88rem;
  color:#CBD5E1;
  line-height:1.5;
  margin-bottom:16px;
}
.sidebar-phone-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--yellow);
  color:var(--deep);
  font-size:1.1rem;
  font-weight:800;
  padding:14px;
  border-radius:var(--r-btn);
  text-decoration:none;
  box-shadow:0 4px 14px rgba(255,213,42,.4);
  transition:transform .18s,background .18s;
}
.sidebar-phone-btn:hover{
  background:#FFE066;
  transform:translateY(-2px);
  color:var(--deep);
}
.sidebar-phone-btn .ic{width:20px;height:20px}
.sidebar-call-card small{
  display:block;
  margin-top:10px;
  font-size:.76rem;
  color:#94A3B8;
  text-align:center;
}

/* Sidebar Card 2: Form */
.sidebar-form-card h3{
  font-size:1.25rem;
  color:var(--head);
  margin-bottom:6px;
}
.sidebar-form-card p{
  font-size:.88rem;
  color:var(--muted);
  line-height:1.45;
  margin-bottom:16px;
}
.quote-form-mini{
  display:grid;
  gap:12px;
}
.quote-form-mini .field label{
  display:block;
  font-size:.8rem;
  font-weight:600;
  color:var(--head);
  margin-bottom:4px;
}
.quote-form-mini .field input,
.quote-form-mini .field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:6px;
  font-family:inherit;
  font-size:.9rem;
  color:var(--head);
  transition:border-color .18s;
  background:#F8FAFC;
}
.quote-form-mini .field input:focus,
.quote-form-mini .field textarea:focus{
  outline:none;
  border-color:var(--navy);
  background:#fff;
}
.quote-form-mini .field .input-err{
  border-color:#DC2626;
  background:#FEF2F2;
}
.quote-form-mini .field .err{
  display:block;
  font-size:.74rem;
  color:#DC2626;
  margin-top:3px;
  min-height:14px;
}
.quote-form-mini .hp{
  display:none;
}
.form-status{
  font-size:.85rem;
  margin-top:8px;
  text-align:center;
  font-weight:600;
}
.form-status.success{color:#059669}
.form-status.error{color:#DC2626}

/* Sidebar Card 3: Other Services */
.sb-nav-title{
  font-size:1.15rem;
  color:var(--head);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.sb-services-list{
  list-style:none;
  padding:0;
  display:grid;
  gap:4px;
}
.sb-services-list li a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 12px;
  border-radius:6px;
  font-size:.88rem;
  font-weight:500;
  color:var(--head);
  text-decoration:none;
  transition:background .18s,color .18s,padding-left .18s;
}
.sb-services-list li a:hover{
  background:#F1F5F9;
  color:var(--navy);
  padding-left:16px;
}
.sb-services-list li.active a{
  background:var(--navy);
  color:#fff;
  font-weight:700;
}
.sb-arrow{
  font-size:.95rem;
  transition:transform .18s;
}
.sb-services-list li a:hover .sb-arrow{
  transform:translateX(3px);
}
.sb-services-list li.active .sb-arrow{
  color:var(--yellow);
}

/* Sidebar Card 4: Trust Creds */
.sidebar-trust-card h4{
  font-size:1.1rem;
  color:var(--head);
  margin-bottom:14px;
}
.sb-trust-list{
  list-style:none;
  padding:0;
  display:grid;
  gap:12px;
}
.sb-trust-list li{
  display:flex;
  gap:12px;
  align-items:center;
}
.sb-trust-list .ic{
  width:22px;
  height:22px;
  color:var(--navy);
  flex:none;
}
.sb-trust-list strong{
  display:block;
  font-size:.88rem;
  color:var(--head);
}
.sb-trust-list span{
  display:block;
  font-size:.76rem;
  color:var(--muted);
}

/* Responsive Breakpoints for Service Page */
@media (max-width:1024px){
  .service-layout{
    grid-template-columns:1fr;
  }
  .service-sidebar{
    position:static;
    margin-top:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
  }
  .sidebar-trust-card{
    grid-column:1 / -1;
  }
}

@media (max-width:768px){
  .hero-triage-bar{
    grid-template-columns:1fr;
  }
  .action-highlight-box{
    grid-template-columns:1fr;
  }
  .crucial-grid{
    grid-template-columns:1fr;
  }
  .creds-verified-grid{
    grid-template-columns:1fr;
  }
  .r-proj-card{
    grid-template-columns:1fr;
  }
  .r-proj-media{
    height:220px;
    min-height:220px;
  }
  .proj-kv-table{
    grid-template-columns:1fr;
    gap:8px;
  }
  .safety-hygiene-grid{
    grid-template-columns:1fr;
  }
  .cost-tiers-grid{
    grid-template-columns:1fr;
  }
  .cost-drivers-grid{
    grid-template-columns:1fr;
  }
  .roadmap-item{
    grid-template-columns:1fr;
    gap:12px;
  }
  .service-sidebar{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   ROOF REPLACEMENT SERVICE PAGE STYLES (css/styles.css)
   Sections 1 to 12 Matching Image 1 Design System
   ========================================================= */

/* General Service Page Helpers */
.section-py{padding-block:clamp(48px,6vw,84px)}
.bg-light{background:#F4F6F8}
.bg-white{background:#FFFFFF}
.bg-deep{background:#0B1B2B;color:#FFFFFF}
.sec-eyebrow{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#0369A1;
  background:#E0F2FE;
  padding:4px 10px;
  border-radius:4px;
  margin-bottom:12px;
}
.sec-head-center{
  text-align:center;
  max-width:760px;
  margin-inline:auto;
  margin-bottom:clamp(32px,4vw,52px);
}
.sec-head-center h2{
  font-size:clamp(1.75rem,1.3rem + 1.2vw,2.4rem);
  color:var(--head);
  line-height:1.25;
  margin-bottom:10px;
}
.sec-sub,
.sec-desc{
  font-size:clamp(.98rem,.92rem + .3vw,1.1rem);
  color:var(--muted);
  line-height:1.6;
}
.grid-2-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px,4vw,48px);
  align-items:start;
}

/* ---------------------------------------------------------
   Section 1: Split Hero: Roof Replacement
   --------------------------------------------------------- */
.replacement-hero{
  position:relative;
  background:linear-gradient(135deg,#0B1B2B 0%,#142B46 100%);
  color:#fff;
  padding-block:clamp(48px,6vw,90px);
  overflow:hidden;
}
.replacement-hero-container{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(32px,4vw,56px);
  align-items:center;
}
.replacement-hero-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.page-hero.replacement-hero .replacement-hero-content h1,
.replacement-hero-content h1,
.replacement-hero h1{
  font-size:clamp(1.5rem, 1.15rem + 1.25vw, 2.25rem);
  color:#fff;
  font-weight:700;
  line-height:1.15;
  margin-bottom:16px;
  text-wrap:balance;
  word-break:break-word;
  overflow-wrap:break-word;
}
.replacement-hero-content .page-hero-text{
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  color:#CBD5E1;
  line-height:1.68;
  margin-bottom:28px;
  max-width:580px;
}
.hero-cta-group{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  margin-bottom:24px;
}
.btn-outline-white{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1.5px solid rgba(255,255,255,.35);
  color:#fff;
  background:rgba(255,255,255,.05);
  font-weight:700;
  padding:14px 22px;
  border-radius:var(--r-btn);
  text-decoration:none;
  transition:all .2s ease;
}
.btn-outline-white:hover{
  background:#fff;
  color:var(--deep);
  border-color:#fff;
}
.btn-outline-white .ic{width:18px;height:18px}
.hero-trust-compact{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:.84rem;
  color:#94A3B8;
  line-height:1.45;
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:16px;
  width:100%;
}
.trust-check-ic{
  width:20px;
  height:20px;
  color:var(--yellow);
  flex:none;
}
.hero-trust-compact strong{color:#F1F5F9}

.replacement-hero-media{
  position:relative;
}
.hero-media-wrap{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.12);
  aspect-ratio:16 / 10;
  background:var(--deep);
}
.hero-media-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hero-floating-pill{
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  background:rgba(11,27,43,.88);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  backdrop-filter:blur(8px);
}
.hero-floating-pill strong{display:block;font-size:.88rem;color:#fff;line-height:1.25}
.hero-floating-pill small{display:block;font-size:.76rem;color:#CBD5E1;line-height:1.25}

/* ---------------------------------------------------------
   Section 2: When to Consider Roof Replacement
   --------------------------------------------------------- */
.editorial-split{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(32px,4vw,56px);
  align-items:center;
}
.editorial-left h2{
  font-size:clamp(1.75rem,1.3rem + 1.2vw,2.3rem);
  color:var(--head);
  line-height:1.25;
  margin-bottom:14px;
}
.editorial-left .sec-intro{
  font-size:1.02rem;
  line-height:1.68;
  color:var(--body);
  margin-bottom:28px;
}
.signs-blocks-grid{
  display:grid;
  gap:16px;
  margin-bottom:28px;
}
.sign-block-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:18px 20px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:0 2px 8px rgba(20,43,70,.03);
  transition:transform .2s ease,border-color .2s ease;
}
.sign-block-item:hover{
  transform:translateY(-2px);
  border-color:#CBD5E1;
  box-shadow:0 8px 18px rgba(20,43,70,.06);
}
.sb-icon{
  width:42px;
  height:42px;
  border-radius:8px;
  background:#EFF6FF;
  color:var(--navy);
  display:grid;
  place-items:center;
  flex:none;
}
.sb-icon .ic{width:22px;height:22px}
.sb-body h3{
  font-size:1.05rem;
  color:var(--head);
  margin-bottom:4px;
}
.sb-body p{
  font-size:.9rem;
  line-height:1.55;
  color:var(--muted);
  margin-bottom:0;
}
.editorial-cta-wrap{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.editorial-disclaimer{
  font-size:.78rem;
  color:var(--muted);
  font-style:italic;
}

.annotated-image-box{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 12px 32px rgba(20,43,70,.1);
  border:1px solid var(--border);
  aspect-ratio:4 / 3;
  background:#E2E8F0;
}
.annotated-image-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.annotation-badge{
  position:absolute;
  background:rgba(11,27,43,.88);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:8px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  backdrop-filter:blur(6px);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  max-width:260px;
}
.annotation-badge strong{display:block;font-size:.82rem;color:var(--yellow);line-height:1.2}
.annotation-badge small{display:block;font-size:.72rem;color:#E2E8F0;line-height:1.2}
.badge-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--yellow);
  flex:none;
}
.badge-top-right{top:16px;right:16px}
.badge-mid-left{top:48%;left:16px}
.badge-bottom-right{bottom:16px;right:16px}

/* ---------------------------------------------------------
   Section 3: Roof Repair vs. Roof Replacement Comparison
   --------------------------------------------------------- */
.comparison-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,36px);
  margin-bottom:28px;
}
.comp-panel{
  border-radius:var(--r-card);
  padding:clamp(24px,3.5vw,36px);
  display:flex;
  flex-direction:column;
  box-shadow:0 6px 20px rgba(20,43,70,.05);
}
.comp-repair{
  background:#FFFFFF;
  border:1.5px solid var(--border);
}
.comp-replacement{
  background:linear-gradient(145deg,#142B46 0%,#0B1B2B 100%);
  color:#fff;
  border:1.5px solid rgba(255,213,42,.35);
  box-shadow:0 12px 36px rgba(11,27,43,.25);
}
.comp-head{
  margin-bottom:24px;
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
}
.comp-replacement .comp-head{
  border-bottom-color:rgba(255,255,255,.15);
}
.comp-tag{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:3px 8px;
  border-radius:4px;
  margin-bottom:8px;
}
.tag-repair{background:#E2E8F0;color:var(--head)}
.tag-replacement{background:rgba(255,213,42,.2);color:var(--yellow);border:1px solid rgba(255,213,42,.4)}
.comp-head h3{
  font-size:1.35rem;
  color:var(--head);
  margin-bottom:6px;
}
.comp-replacement .comp-head h3{color:#fff}
.comp-head p{
  font-size:.9rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:0;
}
.comp-replacement .comp-head p{color:#CBD5E1}

.comp-list{
  list-style:none;
  padding:0;
  display:grid;
  gap:16px;
  margin-bottom:28px;
  flex-grow:1;
}
.comp-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.92rem;
  line-height:1.5;
}
.comp-repair .comp-list li{color:var(--body)}
.comp-replacement .comp-list li{color:#E2E8F0}
.comp-list li strong{display:block;font-size:.95rem;margin-bottom:2px}
.comp-repair .comp-list li strong{color:var(--head)}
.comp-replacement .comp-list li strong{color:#fff}
.comp-list li span{display:block;font-size:.85rem;color:var(--muted)}
.comp-replacement .comp-list li span{color:#94A3B8}

.ic-check{
  width:20px;
  height:20px;
  color:#059669;
  flex:none;
  margin-top:2px;
}
.ic-check-yellow{
  width:20px;
  height:20px;
  color:var(--yellow);
  flex:none;
  margin-top:2px;
}

.btn-outline-navy{
  border:1.5px solid var(--navy);
  color:var(--navy);
  background:transparent;
  font-weight:700;
  padding:12px 18px;
  border-radius:var(--r-btn);
  text-decoration:none;
  text-align:center;
  transition:all .2s;
}
.btn-outline-navy:hover{
  background:var(--navy);
  color:#fff;
}

.decision-note-box{
  background:#EFF6FF;
  border:1px solid #BFDBFE;
  border-radius:var(--r-card);
  padding:18px 22px;
  display:flex;
  gap:16px;
  align-items:center;
}
.decision-note-box .ic{
  width:26px;
  height:26px;
  color:#1D4ED8;
  flex:none;
}
.decision-note-box strong{
  display:block;
  font-size:.94rem;
  color:#1E3A8A;
  margin-bottom:2px;
}
.decision-note-box span{
  font-size:.88rem;
  color:#1E40AF;
  line-height:1.5;
}

/* ---------------------------------------------------------
   Section 4: Roofing Materials & System Options
   --------------------------------------------------------- */
.mat3-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.5vw,28px);
}
.mat-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 4px 14px rgba(20,43,70,.04);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.mat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(20,43,70,.1);
  border-color:#CBD5E1;
}
.mat-card-media{
  position:relative;
  aspect-ratio:16 / 10;
  background:#E2E8F0;
  overflow:hidden;
}
.mat-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.mat-tag{
  position:absolute;
  top:12px;
  left:12px;
  background:rgba(11,27,43,.88);
  color:var(--yellow);
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  padding:4px 8px;
  border-radius:4px;
  backdrop-filter:blur(4px);
}
.mat-card-body{
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.mat-card-body h3{
  font-size:1.22rem;
  color:var(--head);
  margin-bottom:8px;
}
.mat-desc{
  font-size:.9rem;
  color:var(--body);
  line-height:1.6;
  margin-bottom:18px;
}
.mat-factors{
  background:#F8FAFC;
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
  display:grid;
  gap:8px;
  margin-bottom:20px;
}
.mf-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.82rem;
  line-height:1.35;
}
.mf-lbl{color:var(--muted);font-weight:600}
.mf-val{color:var(--head);font-weight:700;text-align:right}
.mat-link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.92rem;
  font-weight:700;
  color:var(--navy);
  text-decoration:none;
  transition:color .18s;
}
.mat-link:hover{color:#0284C7}

/* ---------------------------------------------------------
   Section 5: What Goes Into a Roof Replacement
   --------------------------------------------------------- */
.anatomy-layout{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:clamp(28px,3.5vw,48px);
  align-items:center;
  margin-bottom:24px;
}
.anatomy-image-wrap{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 12px 32px rgba(20,43,70,.1);
  border:1px solid var(--border);
  aspect-ratio:16 / 11;
  background:#E2E8F0;
}
.anatomy-image-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.anatomy-overlay-card{
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  background:rgba(11,27,43,.88);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:12px 16px;
  color:#fff;
  backdrop-filter:blur(6px);
}
.anatomy-overlay-card strong{display:block;font-size:.88rem;color:var(--yellow);margin-bottom:2px}
.anatomy-overlay-card small{display:block;font-size:.76rem;color:#CBD5E1}

.anatomy-components-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.component-card{
  background:#F8FAFC;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:16px 18px;
  display:flex;
  gap:14px;
  align-items:flex-start;
  transition:border-color .18s;
}
.component-card:hover{border-color:var(--navy)}
.comp-badge-num{
  width:32px;
  height:32px;
  border-radius:6px;
  background:var(--navy);
  color:#fff;
  font-size:.9rem;
  font-weight:800;
  display:grid;
  place-items:center;
  flex:none;
}
.comp-details h3{
  font-size:.98rem;
  color:var(--head);
  margin-bottom:4px;
}
.comp-details p{
  font-size:.84rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:0;
}
.anatomy-note{
  font-size:.82rem;
  color:var(--muted);
  font-style:italic;
  text-align:center;
  margin-top:16px;
}

/* ---------------------------------------------------------
   Section 6: Roof Replacement Cost Factors
   --------------------------------------------------------- */
.cost-split-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(32px,4vw,56px);
  align-items:start;
}
.cost-left h2{
  font-size:clamp(1.75rem,1.3rem + 1.2vw,2.3rem);
  color:var(--head);
  line-height:1.25;
  margin-bottom:12px;
}
.cost-text{
  font-size:1.02rem;
  line-height:1.68;
  color:var(--body);
  margin-bottom:24px;
}
.concealed-damage-callout{
  background:#FFFBEB;
  border:1px solid #FCD34D;
  border-left:5px solid #F59E0B;
  border-radius:var(--r-card);
  padding:20px 22px;
  margin-bottom:24px;
}
.cd-alert-head{
  display:flex;
  align-items:center;
  gap:10px;
  color:#92400E;
  margin-bottom:8px;
}
.cd-alert-head .ic{width:22px;height:22px;flex:none}
.cd-alert-head strong{font-size:1.02rem}
.concealed-damage-callout p{
  font-size:.9rem;
  line-height:1.55;
  color:#78350F;
  margin-bottom:0;
}
.cost-cta-box{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.cost-cta-box small{font-size:.78rem;color:var(--muted)}

.factors-rows-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:12px 24px;
  box-shadow:0 4px 16px rgba(20,43,70,.04);
}
.factor-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:16px;
  padding-block:16px;
  border-bottom:1px solid var(--border);
}
.factor-row:last-child{border-bottom:0}
.fr-num{
  font-size:1.15rem;
  font-weight:800;
  color:#94A3B8;
  font-variant-numeric:tabular-nums;
  padding-top:2px;
}
.fr-content h4{
  font-size:1.02rem;
  color:var(--head);
  margin-bottom:4px;
}
.fr-content p{
  font-size:.88rem;
  color:var(--muted);
  line-height:1.55;
  margin-bottom:0;
}

/* ---------------------------------------------------------
   Section 7: Numbered Process Timeline
   --------------------------------------------------------- */
.process-timeline-horizontal{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  position:relative;
}
.pt-step{
  display:flex;
  flex-direction:column;
}
.pt-step-header{
  display:flex;
  align-items:center;
  margin-bottom:16px;
  position:relative;
}
.pt-num{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:1.2rem;
  font-weight:800;
  display:grid;
  place-items:center;
  flex:none;
  box-shadow:0 4px 12px rgba(20,43,70,.18);
  border:3px solid #fff;
  z-index:2;
}
.pt-line{
  flex-grow:1;
  height:3px;
  background:#E2E8F0;
  margin-left:8px;
}
.pt-step:last-child .pt-line{display:none}
.pt-content h3{
  font-size:1.05rem;
  color:var(--head);
  margin-bottom:6px;
}
.pt-content p{
  font-size:.88rem;
  color:var(--muted);
  line-height:1.55;
  margin-bottom:0;
}

/* ---------------------------------------------------------
   Section 8: Duration & Property Protection
   --------------------------------------------------------- */
.prot-left h2{
  font-size:clamp(1.75rem,1.3rem + 1.2vw,2.3rem);
  color:var(--head);
  line-height:1.25;
  margin-bottom:14px;
}
.prot-left p{
  font-size:.98rem;
  line-height:1.68;
  color:var(--body);
  margin-bottom:16px;
}
.prot-highlight-pill{
  background:#EFF6FF;
  border-left:4px solid var(--navy);
  border-radius:0 8px 8px 0;
  padding:14px 18px;
  display:flex;
  gap:12px;
  align-items:center;
  font-size:.9rem;
  color:#1E3A8A;
  font-weight:600;
  margin-top:20px;
}
.prot-highlight-pill .ic{width:22px;height:22px;color:var(--navy);flex:none}

.prot-cards-stack{
  display:grid;
  gap:14px;
}
.prot-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:18px 20px;
  display:flex;
  gap:16px;
  align-items:flex-start;
  box-shadow:0 2px 8px rgba(20,43,70,.03);
}
.prot-icon{
  width:42px;
  height:42px;
  border-radius:8px;
  background:#FEF3C7;
  color:#B45309;
  display:grid;
  place-items:center;
  flex:none;
}
.prot-icon .ic{width:22px;height:22px}
.prot-card h4{
  font-size:1.02rem;
  color:var(--head);
  margin-bottom:4px;
}
.prot-card p{
  font-size:.88rem;
  color:var(--muted);
  line-height:1.5;
  margin-bottom:0;
}

/* ---------------------------------------------------------
   Section 9: Permits, Inspections & Warranties
   --------------------------------------------------------- */
.pw-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:clamp(24px,3.5vw,36px);
  box-shadow:0 4px 16px rgba(20,43,70,.04);
}
.pw-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:16px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.pw-head-ic{
  width:36px;
  height:36px;
  color:var(--navy);
  flex:none;
}
.pw-head h3{
  font-size:1.25rem;
  color:var(--head);
  margin-bottom:2px;
}
.pw-sub{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--muted);
  font-weight:700;
}
.pw-panel>p{
  font-size:.92rem;
  line-height:1.6;
  color:var(--body);
  margin-bottom:16px;
}
.pw-list{
  list-style:none;
  padding:0;
  display:grid;
  gap:10px;
  margin-bottom:20px;
}
.pw-list li{
  font-size:.88rem;
  line-height:1.5;
  color:var(--body);
  position:relative;
  padding-left:18px;
}
.pw-list li::before{
  content:"•";
  position:absolute;
  left:0;
  color:var(--navy);
  font-weight:800;
}
.pw-clarify-box{
  background:#F8FAFC;
  border:1px solid #E2E8F0;
  border-left:4px solid #0284C7;
  border-radius:0 6px 6px 0;
  padding:14px 16px;
}
.pw-clarify-box strong{
  display:block;
  font-size:.86rem;
  color:#0369A1;
  margin-bottom:4px;
}
.pw-clarify-box p{
  font-size:.84rem;
  color:var(--muted);
  line-height:1.45;
  margin-bottom:0;
}

/* ---------------------------------------------------------
   Section 10: Tampa Service Area
   --------------------------------------------------------- */
.local-service-layout{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:clamp(28px,4vw,48px);
  align-items:center;
}
.local-img-wrap{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 12px 32px rgba(20,43,70,.08);
  border:1px solid var(--border);
  aspect-ratio:16 / 11;
  background:#E2E8F0;
}
.local-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.local-caption{
  position:absolute;
  bottom:16px;
  left:16px;
  right:16px;
  background:rgba(11,27,43,.88);
  border:1px solid rgba(255,255,255,.15);
  border-radius:8px;
  padding:12px 16px;
  color:#fff;
  backdrop-filter:blur(6px);
}
.local-caption strong{display:block;font-size:.88rem;color:var(--yellow);margin-bottom:2px}
.local-caption small{display:block;font-size:.76rem;color:#CBD5E1}

.local-content h2{
  font-size:clamp(1.75rem,1.3rem + 1.2vw,2.3rem);
  color:var(--head);
  line-height:1.25;
  margin-bottom:14px;
}
.local-content>p{
  font-size:1rem;
  line-height:1.68;
  color:var(--body);
  margin-bottom:20px;
}
.local-pills-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
  margin-bottom:24px;
}
.local-pills-grid .loc-pill{
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  padding:10px 14px;
  font-size:.88rem;
  font-weight:600;
  color:var(--head)!important;
  text-decoration:none!important;
  text-align:center;
  transition:all .18s;
  box-shadow:0 2px 4px rgba(20,43,70,.02);
}
.loc-pill:hover{
  border-color:var(--navy);
  color:var(--navy)!important;
  background:#F8FAFC;
  transform:translateY(-2px);
}
.local-cta-row{
  display:flex;
  gap:14px;
}

/* ---------------------------------------------------------
   Section 11: Roof Replacement FAQs
   --------------------------------------------------------- */
.faq-accordion-container{
  max-width:880px;
  margin-inline:auto;
  display:grid;
  gap:12px;
}

/* ---------------------------------------------------------
   Section 12: Final Conversion CTA & Estimate Form
   --------------------------------------------------------- */
.final-cta-section{
  position:relative;
  background:linear-gradient(145deg,#0B1B2B 0%,#142B46 100%);
  color:#fff;
}
.final-cta-layout{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(32px,4.5vw,56px);
  align-items:start;
}
.final-cta-text h2{
  font-size:clamp(2rem,1.4rem + 1.6vw,2.8rem);
  color:#fff;
  font-weight:800;
  line-height:1.22;
  margin-bottom:16px;
  text-wrap:balance;
}
.final-desc{
  font-size:1.05rem;
  line-height:1.68;
  color:#CBD5E1;
  margin-bottom:28px;
}
.final-call-box{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-card);
  padding:20px 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:28px;
  border-left:4px solid var(--yellow);
}
.final-call-lbl{
  font-size:.88rem;
  color:#E2E8F0;
  font-weight:600;
}
.final-phone-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.3rem;
  font-weight:800;
  color:var(--yellow)!important;
  text-decoration:none!important;
}
.final-phone-link:hover{text-decoration:underline!important}
.final-phone-link .ic{width:22px;height:22px}
.final-hours-note{
  font-size:.76rem;
  color:#94A3B8;
}
.final-trust-checks{
  display:grid;
  gap:12px;
}
.ft-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.88rem;
  color:#E2E8F0;
}
.ft-item .ic{
  width:18px;
  height:18px;
  color:var(--yellow);
  flex:none;
}

.final-cta-form-card{
  background:#fff;
  border-radius:var(--r-card);
  padding:clamp(26px,4vw,38px);
  color:var(--head);
  box-shadow:0 18px 48px rgba(0,0,0,.4);
}
.final-cta-form-card h3{
  font-size:1.4rem;
  color:var(--head);
  margin-bottom:6px;
}
.final-cta-form-card p{
  font-size:.9rem;
  color:var(--muted);
  line-height:1.45;
  margin-bottom:20px;
}
.quote-form-main{
  display:grid;
  gap:14px;
}
.form-row-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.quote-form-main .field label{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:var(--head);
  margin-bottom:4px;
}
.quote-form-main .field input,
.quote-form-main .field select,
.quote-form-main .field textarea{
  width:100%;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:6px;
  font-family:inherit;
  font-size:.9rem;
  color:var(--head);
  background:#F8FAFC;
  transition:border-color .18s;
}
.quote-form-main .field input:focus,
.quote-form-main .field select:focus,
.quote-form-main .field textarea:focus{
  outline:none;
  border-color:var(--navy);
  background:#fff;
}
.quote-form-main .field .input-err{
  border-color:#DC2626;
  background:#FEF2F2;
}
.quote-form-main .field .err{
  display:block;
  font-size:.74rem;
  color:#DC2626;
  margin-top:3px;
  min-height:14px;
}

/* ---------------------------------------------------------
   Comprehensive Responsive Rules for Service Pages & Sections
   --------------------------------------------------------- */
@media (max-width:1024px){
  .replacement-hero-container{
    grid-template-columns:1fr;
    gap:36px;
  }
  .replacement-hero-content{
    max-width:100%;
  }
  .editorial-split{
    grid-template-columns:1fr;
  }
  .mat3-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .anatomy-layout{
    grid-template-columns:1fr;
  }
  .cost-split-layout{
    grid-template-columns:1fr;
  }
  .process-timeline-horizontal{
    grid-template-columns:1fr;
    gap:16px;
  }
  .pt-step-header{
    margin-bottom:8px;
  }
  .pt-line{display:none}
  .local-service-layout{
    grid-template-columns:1fr;
  }
  .final-cta-layout,
  .final-cta-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
}

@media (max-width:768px){
  /* Section 1: Hero Mobile Optimization */
  .page-hero.replacement-hero,
  .replacement-hero{
    padding-block:clamp(32px,6vw,48px);
    overflow:hidden;
  }
  .replacement-hero-container{
    grid-template-columns:1fr;
    gap:24px;
  }
  .replacement-hero-content{
    width:100%;
    max-width:100%;
  }
  .hero-cta-group{
    display:flex;
    flex-direction:column;
    width:100%;
    gap:12px;
    margin-bottom:20px;
  }
  .hero-cta-group .btn{
    width:100%;
    max-width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
    padding:14px 18px;
    min-height:48px;
    box-sizing:border-box;
    word-break:break-word;
  }
  .hero-trust-compact{
    display:flex;
    align-items:flex-start;
    gap:10px;
    font-size:.84rem;
    line-height:1.45;
    word-break:break-word;
    padding-top:14px;
  }
  .hero-trust-compact .trust-check-ic{
    margin-top:2px;
    flex-shrink:0;
  }
  .replacement-hero-media{
    width:100%;
    max-width:100%;
  }
  .hero-media-wrap{
    width:100%;
    max-width:100%;
    aspect-ratio:16 / 10;
    border-radius:var(--r-card);
    overflow:hidden;
  }
  .hero-floating-pill{
    position:static;
    margin-top:10px;
    background:rgba(11,27,43,.96);
    border:1px solid rgba(255,255,255,.15);
    border-radius:8px;
    padding:10px 14px;
    width:100%;
    box-sizing:border-box;
  }
  .crumbs{
    flex-wrap:wrap;
    font-size:.8rem;
    gap:6px;
    line-height:1.4;
    word-break:break-word;
    margin-bottom:12px;
  }

  /* Section Directly Above Footer (Final CTA & Lead Card) */
  .final-cta-section{
    padding-block:clamp(36px,6vw,60px);
    overflow:hidden;
  }
  .final-cta-layout,
  .final-cta-grid{
    grid-template-columns:1fr;
    gap:30px;
  }
  .final-desc{
    font-size:16px;
    line-height:1.65;
    margin-bottom:20px;
  }
  .final-call-box,
  .final-phone-box{
    padding:16px;
    margin-bottom:20px;
    border-radius:10px;
    word-break:break-word;
    box-sizing:border-box;
    width:100%;
  }
  .final-phone-link{
    font-size:clamp(1.1rem,.95rem + 1vw,1.35rem);
    flex-wrap:wrap;
    gap:8px;
    word-break:break-word;
  }
  .final-trust-checks{
    gap:10px;
    margin-top:16px;
  }
  .ft-item,
  .ft-check-item{
    font-size:.875rem;
    align-items:flex-start;
    gap:10px;
    line-height:1.4;
    word-break:break-word;
  }
  .ft-item .ic,
  .ft-check-item .ic{
    margin-top:2px;
    flex-shrink:0;
  }
  .final-cta-form-card,
  .quote-form-card{
    padding:22px 16px;
    border-radius:var(--r-card);
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    box-shadow:0 10px 30px rgba(0,0,0,.25);
  }
  .form-row-2,
  .quote-form-main .form-row{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }
  .quote-form-main .field input,
  .quote-form-main .field select,
  .quote-form-main .field textarea,
  .quote-form-main input,
  .quote-form-main select,
  .quote-form-main textarea{
    font-size:16px !important;
    padding:12px 14px !important;
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
  .quote-form-main .btn,
  .quote-form-card .btn,
  .final-cta-form-card .btn{
    width:100% !important;
    white-space:normal !important;
    text-align:center !important;
    padding:14px 16px !important;
    font-size:16px !important;
    line-height:1.35 !important;
    min-height:48px !important;
    box-sizing:border-box !important;
    word-break:break-word !important;
  }

  /* Other Sections Responsive Stacking */
  .comparison-grid,
  .mat3-grid,
  .anatomy-components-grid,
  .grid-2-col,
  .problem-cards-grid,
  .signs-grid,
  .process-numbered-grid,
  .global-trust-grid,
  .case-studies-grid,
  .proj-real-grid,
  .action-steps-grid,
  .guar-cards-grid{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }
}

@media (max-width:640px){
  /* Global Button Wrap Protection */
  .btn{
    white-space:normal !important;
    text-align:center;
    word-break:break-word;
    max-width:100%;
  }
  .badges-grid{
    gap:16px 20px;
  }
  .badge-item img{
    max-height:50px;
    max-width:105px;
  }
  .areas-pill-grid,
  .areas-pill-cloud{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }
  .area-pill,
  .areas-pill-grid a,
  .areas-pill-cloud a{
    max-width:100%;
    box-sizing:border-box;
    white-space:normal;
    text-align:center;
  }
}

/* =========================================================
   PRICING SECTION: 2-COLUMN ACCORDION UI & 3-COLUMN SIGNS GRID
   ========================================================= */

/* Top Divider & White Background */
.pricing-section-wrap{
  border-top:1px solid var(--border);
  background:#FFFFFF;
}

/* Spacious 2-Column Desktop Layout */
.pricing-split-layout{
  display:grid;
  grid-template-columns:minmax(0,47%) minmax(0,53%);
  gap:clamp(36px,5vw,68px);
  align-items:stretch;
}

/* Left Column: Realistic Image */
.pricing-media-col{
  position:relative;
  display:flex;
  min-height:520px;
}
.pricing-media-col img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:4px;
  display:block;
  box-shadow:0 8px 24px rgba(20,43,70,.06);
  border:1px solid var(--border);
}

/* Right Column: Heading, Intro & Accordion Stack */
.pricing-content-col{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pricing-content-col h2{
  font-size:clamp(1.85rem,1.4rem + 1.2vw,2.4rem);
  color:var(--head);
  line-height:1.25;
  margin-bottom:12px;
}
.pricing-intro-text{
  font-size:1.02rem;
  line-height:1.68;
  color:var(--body);
  max-width:620px;
  margin-bottom:28px;
}

/* Accordion Stack (Thin navy borders, clean separators) */
.pricing-accordion-stack{
  display:flex;
  flex-direction:column;
  border-top:1.5px solid var(--navy);
  margin-bottom:24px;
}
.pricing-acc-row{
  border-bottom:1.5px solid var(--navy);
  border-left:1.5px solid var(--navy);
  border-right:1.5px solid var(--navy);
  background:#FFFFFF;
  transition:background-color .18s ease,border-left-width .18s ease;
}
.pricing-acc-row:hover{
  background:#F8FAFC;
}
.pricing-acc-row.is-open{
  background:#FFFFFF;
  border-left:4px solid var(--navy);
}
.pricing-acc-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 22px;
  background:transparent;
  border:none;
  font-family:inherit;
  font-size:1.06rem;
  font-weight:700;
  color:var(--navy);
  text-align:left;
  cursor:pointer;
  outline:none;
  transition:color .18s ease;
}
.pricing-acc-btn:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:-2px;
}
.pricing-acc-btn .pricing-chevron{
  width:16px;
  height:16px;
  color:var(--navy);
  flex:none;
  transition:transform .25s ease,color .25s ease;
}
.pricing-acc-row.is-open .pricing-acc-btn .pricing-chevron{
  transform:rotate(90deg);
  color:#B45309;
}
.pricing-acc-title{
  flex-grow:1;
  line-height:1.35;
}
.pricing-acc-price-pill{
  margin-left:auto;
  font-size:.92rem;
  font-weight:800;
  color:var(--navy);
  background:#EBF3FA;
  padding:5px 12px;
  border-radius:4px;
  white-space:nowrap;
  border:1px solid #D0E1F0;
}
.pricing-acc-row.is-open .pricing-acc-price-pill{
  background:var(--navy);
  color:#FFFFFF;
  border-color:var(--navy);
}

/* Expanded Panel Content */
.pricing-acc-panel{
  display:none;
  padding:0 22px 24px 50px;
  font-size:.93rem;
  line-height:1.68;
  color:var(--body);
}
.pricing-acc-row.is-open .pricing-acc-panel{
  display:block;
}
.pricing-acc-panel p{
  margin-bottom:12px;
}
.pricing-acc-panel p:last-child{
  margin-bottom:0;
}
.pricing-acc-panel ul{
  list-style:none;
  padding:0;
  margin:0 0 14px 0;
  display:grid;
  gap:8px;
}
.pricing-acc-panel ul li{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.9rem;
  color:var(--body);
}
.pricing-acc-panel ul li .ic{
  width:16px;
  height:16px;
  color:#059669;
  flex:none;
  margin-top:4px;
}
.pricing-acc-footer-note{
  background:#F8FAFC;
  border-left:3px solid var(--navy);
  padding:10px 14px;
  font-size:.85rem;
  color:var(--muted);
  margin-top:12px;
  border-radius:0 4px 4px 0;
}

/* ---------------------------------------------------------
   SIGNS SECTION: 3-COLUMN GRID (1 Row = 3 Signs, 2 Rows = 6 Signs)
   --------------------------------------------------------- */
.signs-grid-3col{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin-bottom:32px;
}
.sign-card-3col{
  background:#FFFFFF;
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:24px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:0 3px 10px rgba(20,43,70,.03);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.sign-card-3col:hover{
  transform:translateY(-3px);
  border-color:#CBD5E1;
  box-shadow:0 10px 24px rgba(20,43,70,.08);
}
.sign-card-3col .sign-icon-top{
  width:44px;
  height:44px;
  border-radius:8px;
  background:#EFF6FF;
  color:var(--navy);
  display:grid;
  place-items:center;
  flex:none;
}
.sign-card-3col .sign-icon-top .ic{
  width:22px;
  height:22px;
}
.sign-card-3col h3{
  font-size:1.1rem;
  color:var(--head);
  margin:0;
  line-height:1.35;
}
.sign-card-3col p{
  font-size:.91rem;
  line-height:1.6;
  color:var(--body);
  margin:0;
  flex-grow:1;
}

/* Responsive Rules for Pricing & Signs Grid */
@media (max-width:1024px){
  .pricing-split-layout{
    grid-template-columns:1fr;
    gap:36px;
  }
  .pricing-media-col{
    min-height:360px;
    height:360px;
  }
  .signs-grid-3col{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:640px){
  .pricing-media-col{
    min-height:240px;
    height:240px;
  }
  .pricing-acc-btn{
    padding:16px 14px;
    font-size:.98rem;
    gap:10px;
  }
  .pricing-acc-price-pill{
    font-size:.82rem;
    padding:3px 8px;
  }
  .pricing-acc-panel{
    padding:0 14px 18px 36px;
  }
  .signs-grid-3col{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   SECTION: TECHNICAL INSPECTION BLUEPRINT
   ========================================================= */
.inspection-blueprint-section {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.inspection-blueprint-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* Left Column: Visual & Spec Box */
.inspection-media-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 96px;
}

.inspection-img-wrap {
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 4px 16px rgba(20, 43, 70, 0.05);
}

.inspection-img-wrap img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  display: block;
}

.inspection-spec-panel {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.inspection-spec-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.inspection-spec-item .spec-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.inspection-spec-item .spec-val {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}

/* Right Column: Technical Flow Checklist */
.inspection-checklist-col {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 32px 36px;
  box-shadow: 0 4px 16px rgba(20, 43, 70, 0.04);
}

.inspection-flow-list {
  display: flex;
  flex-direction: column;
}

.inspection-flow-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.inspection-flow-item:first-child {
  padding-top: 0;
}

.inspection-flow-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Left marker & connector column */
.inspection-marker-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inspection-num {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--navy);
  font-size: 0.88rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  box-shadow: 0 2px 6px rgba(20, 43, 70, 0.12);
  z-index: 2;
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.inspection-flow-item:hover .inspection-num,
.inspection-flow-item:focus-within .inspection-num {
  background: var(--navy);
  color: #fff;
}

.inspection-connector {
  position: absolute;
  top: 38px;
  bottom: -22px;
  width: 2px;
  background: #E1E6EB;
  z-index: 1;
}

.inspection-flow-item:last-child .inspection-connector {
  display: none;
}

/* Content block */
.inspection-item-body {
  padding-top: 4px;
}

.inspection-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.inspection-item-head .ic {
  width: 18px;
  height: 18px;
  color: var(--navy);
  flex-shrink: 0;
}

.inspection-item-head h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  line-height: 1.35;
}

.inspection-item-body p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
}

.inspection-flow-item:hover,
.inspection-flow-item:focus-within {
  border-bottom-color: #CBD5E1;
}

/* =========================================================
   SECTION: WHAT WE INCLUDE IN EVERY ROOF REPLACEMENT
   ========================================================= */
.roof-assembly-section {
  background: #fff;
  border-top: 1px solid var(--border);
}

.include-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 36px;
}

.include-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(20, 43, 70, 0.03);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.include-card:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
  box-shadow: 0 8px 22px rgba(20, 43, 70, 0.06);
}

.include-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.include-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
}

.include-ic-wrap {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #F1F5F9;
  color: var(--navy);
  display: grid;
  place-items: center;
}

.include-ic-wrap .ic {
  width: 20px;
  height: 20px;
}

.include-card h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px 0;
  line-height: 1.35;
}

.include-card p {
  font-size: 0.91rem;
  line-height: 1.6;
  color: var(--body);
  margin: 0;
  flex-grow: 1;
}

/* Final Step Treatment: Step 7 Clean-Site & Closeout */
.assembly-closeout-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  margin: 40px 0 32px 0;
}

.assembly-closeout-banner {
  background: linear-gradient(180deg, #F8FAFC 0%, #FFFFFF 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-card);
  padding: 28px 32px;
  box-shadow: 0 4px 16px rgba(20, 43, 70, 0.04);
}

.closeout-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.closeout-badge {
  background: var(--navy);
  color: var(--yellow);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 3px;
}

.assembly-closeout-banner h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}

.assembly-closeout-banner p {
  font-size: 0.94rem;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 18px 0;
  max-width: 960px;
}

.closeout-check-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.closeout-check-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--head);
  font-weight: 600;
  line-height: 1.4;
}

.closeout-check-item .ic {
  width: 16px;
  height: 16px;
  color: #059669;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .inspection-blueprint-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .inspection-media-col {
    position: static;
  }
  .inspection-img-wrap img {
    height: 380px;
  }
  .include-grid-3col {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .closeout-check-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .inspection-checklist-col {
    padding: 24px 18px;
  }
  .inspection-blueprint-layout {
    gap: 24px;
  }
  .inspection-flow-item {
    grid-template-columns: 34px 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .inspection-num {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
  .inspection-connector {
    top: 32px;
    bottom: -18px;
  }
  .inspection-spec-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .include-grid-3col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .assembly-closeout-banner {
    padding: 20px 18px;
  }
  .closeout-check-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================================================
   STORM DAMAGE & EMERGENCY ROOF REPAIR SERVICE PAGES
   ========================================================= */

/* Emergency Pulsing Beacon & Badges */
.pulse-dot-red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #EF4444;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: pulseBeaconRed 2s infinite;
}
@keyframes pulseBeaconRed {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.emergency-pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.18);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* 4-Step Action Flow (Section 2 - Storm & Emergency) */
.action-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 32px;
}

.action-step-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  box-shadow: 0 4px 14px rgba(20, 43, 70, 0.04);
}
.action-step-card:hover {
  transform: translateY(-3px);
  border-color: #CBD5E1;
  box-shadow: 0 10px 24px rgba(20, 43, 70, 0.08);
}

.action-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.action-step-num {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--navy);
  color: var(--yellow);
  font-weight: 800;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
}

.action-step-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #F1F5F9;
  color: var(--navy);
  display: grid;
  place-items: center;
}
.action-step-icon .ic {
  width: 20px;
  height: 20px;
}

.action-step-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 10px;
  line-height: 1.35;
}

.action-step-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 0;
  flex-grow: 1;
}

/* Mechanical Failure Split Cards (2x2 Grid) */
.failures-2x2-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 36px;
}

.failure-mode-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(20, 43, 70, 0.05);
  display: flex;
  flex-direction: column;
}

.failure-card-head {
  padding: 20px 24px;
  background: #FAFBFD;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.failure-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.failure-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #EFF6FF;
  color: var(--navy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.failure-card-icon .ic {
  width: 20px;
  height: 20px;
}

.failure-card-head h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--head);
  margin: 0;
}

.failure-body-split {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-grow: 1;
}

.failure-how-it-happens {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: 8px;
  padding: 14px 16px;
}
.failure-how-it-happens strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #B45309;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.failure-how-it-happens p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #451A03;
  margin: 0;
}

.failure-how-we-repair {
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 8px;
  padding: 14px 16px;
}
.failure-how-we-repair strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #15803D;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.failure-how-we-repair p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #14532D;
  margin: 0;
}

/* Insurance 5-Step Roadmap */
.insurance-roadmap-5step {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin: 32px 0 44px;
}

.roadmap-step-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(20, 43, 70, 0.04);
}

.roadmap-step-badge {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  display: inline-block;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 6px;
  margin-bottom: 12px;
}

.roadmap-step-card h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 8px;
  line-height: 1.35;
}

.roadmap-step-card p {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--muted);
  margin-bottom: 0;
}

/* Trust Highlights Grid */
.trust-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 36px;
}

.trust-highlight-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.trust-hi-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #F0FDF4;
  color: #16A34A;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.trust-hi-icon .ic {
  width: 18px;
  height: 18px;
}

.trust-hi-body strong {
  display: block;
  font-size: 0.92rem;
  color: var(--head);
  margin-bottom: 3px;
}

.trust-hi-body p {
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

/* Stats Counter Strip */
.stats-counter-strip {
  background: linear-gradient(135deg, #142B46 0%, #0B1B2B 100%);
  border-radius: var(--r-card);
  padding: 28px 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(11, 27, 43, 0.15);
}

.stat-counter-block {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0 16px;
}
.stat-counter-block:last-child {
  border-right: none;
}

.stat-counter-val {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1.1;
  margin-bottom: 6px;
  letter-spacing: -0.02em;
}

.stat-counter-label {
  font-size: 0.98rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 4px;
}

.stat-counter-sub {
  font-size: 0.8rem;
  color: #94A3B8;
  margin: 0;
}

/* Delayed Risks 4-Column Grid (Section 5 - Storm) */
.delayed-risks-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
}

.risk-alert-card {
  background: #FFFFFF;
  border: 1.5px solid #FEE2E2;
  border-radius: var(--r-card);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.04);
}
.risk-alert-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #EF4444;
  border-radius: var(--r-card) var(--r-card) 0 0;
}

.risk-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.risk-alert-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #FEE2E2;
  color: #DC2626;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.risk-alert-icon .ic {
  width: 20px;
  height: 20px;
}

.risk-card-head h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #991B1B;
  margin: 0;
}

.risk-alert-card p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #374151;
  margin: 0;
}

/* Property Types Grid (Section 4 - Emergency) */
.property-types-grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-top: 36px;
}

.property-type-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(20, 43, 70, 0.05);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.property-type-card:hover {
  transform: translateY(-3px);
  border-color: #CBD5E1;
}

.prop-type-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #EFF6FF;
  color: var(--navy);
  border: 1px solid #DBEAFE;
  padding: 4px 10px;
  border-radius: 6px;
  margin-bottom: 14px;
}

.property-type-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 14px;
}

.prop-systems-list {
  background: #FAFBFD;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 0.85rem;
  line-height: 1.45;
}
.prop-systems-list strong {
  display: block;
  color: var(--head);
  margin-bottom: 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.prop-systems-list a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.prop-systems-list a:hover {
  color: #1D4ED8;
}

.prop-scope-body {
  margin-bottom: 22px;
  flex-grow: 1;
}
.prop-scope-body strong {
  display: block;
  font-size: 0.85rem;
  color: var(--head);
  margin-bottom: 6px;
}
.prop-scope-body p {
  font-size: 0.87rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* 5-Stage Emergency Timeline (Section 5 - Emergency) */
.emergency-timeline-5stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 36px;
}

.stage-step-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(20, 43, 70, 0.04);
  transition: border-color 0.2s ease;
}
.stage-step-row:hover {
  border-color: #CBD5E1;
}

.stage-num-col {
  background: var(--navy);
  color: var(--yellow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  text-align: center;
}
.stage-num-val {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}
.stage-num-lbl {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: #94A3B8;
  margin-top: 4px;
}

.stage-info-col {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stage-info-col h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
}

.stage-info-col p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

/* Leaking Protocol Emergency Box */
.leaking-protocol-container {
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: var(--r-card);
  padding: 28px 30px;
  margin-bottom: 32px;
}

.leaking-protocol-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.leaking-protocol-head .ic {
  width: 24px;
  height: 24px;
  color: #DC2626;
}
.leaking-protocol-head h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #991B1B;
  margin: 0;
}

.leaking-steps-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.leaking-step-item {
  background: #FFFFFF;
  border: 1px solid #FECACA;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.leaking-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #DC2626;
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.leaking-step-text strong {
  display: block;
  font-size: 0.9rem;
  color: #991B1B;
  margin-bottom: 2px;
}
.leaking-step-text p {
  font-size: 0.84rem;
  line-height: 1.45;
  color: #374151;
  margin: 0;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .action-steps-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .insurance-roadmap-5step {
    grid-template-columns: repeat(3, 1fr);
  }
  .property-types-grid-3col {
    grid-template-columns: 1fr;
  }
  .trust-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .failures-2x2-grid,
  .delayed-risks-grid,
  .leaking-steps-list {
    grid-template-columns: 1fr;
  }
  .insurance-roadmap-5step {
    grid-template-columns: 1fr;
  }
  .stats-counter-strip {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 24px 20px;
  }
  .stat-counter-block {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 16px;
  }
  .stat-counter-block:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .stage-step-row {
    grid-template-columns: 60px 1fr;
  }
  .stage-num-val {
    font-size: 1.3rem;
  }
}

@media (max-width: 640px) {
  .action-steps-grid {
    grid-template-columns: 1fr;
  }
  .trust-highlights-grid {
    grid-template-columns: 1fr;
  }
  .failure-card-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Badge & Standards Card Helpers */
.badge-accent {
  background: #EFF6FF;
  color: var(--navy);
  border: 1px solid #BFDBFE;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #FFFFFF;
  color: var(--navy);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(20, 43, 70, 0.04);
}
.badge-outline:hover {
  border-color: var(--navy);
  background: #F8FAFC;
  transform: translateY(-2px);
  color: var(--navy) !important;
}

.standards-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.standard-card {
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px 22px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 0 4px 14px rgba(20, 43, 70, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.standard-card:hover {
  transform: translateY(-2px);
  border-color: #CBD5E1;
}
.standard-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #EFF6FF;
  color: var(--navy);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.standard-icon .ic {
  width: 22px;
  height: 22px;
}
.standard-body h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
}
.standard-body p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 768px) {
  .standards-grid-2col {
    grid-template-columns: 1fr;
  }
}




/* ==========================================================================
   Trust Split Section (2-Column Trust & Track Record)
   ========================================================================== */
.trust-split-section {
  background: #FFFFFF;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
}

.trust-split-grid {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 48px;
  align-items: center;
}

.trust-split-media {
  position: relative;
}

.trust-media-wrap {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(11, 27, 43, 0.12);
}

.trust-media-wrap img {
  width: 100%;
  height: 580px;
  object-fit: cover;
  display: block;
}

.trust-media-overlay-card {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(11, 27, 43, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--r-card);
  padding: 16px 20px;
  color: #FFFFFF;
}

.trust-overlay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yellow);
  margin-bottom: 6px;
}

.trust-overlay-badge .ic {
  width: 14px;
  height: 14px;
}

.trust-media-overlay-card strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  margin-bottom: 3px;
}

.trust-media-overlay-card p {
  font-size: 0.8rem;
  color: #94A3B8;
  margin: 0;
  line-height: 1.4;
}

.trust-split-content {
  display: flex;
  flex-direction: column;
}

.trust-split-points {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
  margin: 28px 0 32px;
}

.trust-split-point {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.trust-sp-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #F0FDF4;
  color: #16A34A;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 1px solid #DCFCE7;
}

.trust-sp-icon .ic {
  width: 18px;
  height: 18px;
}

.trust-split-point strong {
  display: block;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 3px;
}

.trust-split-point p {
  font-size: 0.83rem;
  line-height: 1.45;
  color: var(--muted);
  margin: 0;
}

.trust-split-track-record {
  background: linear-gradient(135deg, #142B46 0%, #0B1B2B 100%);
  border-radius: var(--r-card);
  padding: 24px 28px;
  color: #FFFFFF;
  box-shadow: 0 10px 24px rgba(11, 27, 43, 0.12);
}

.track-record-head {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.track-record-head strong {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.track-record-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.track-record-stat {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 16px;
}

.track-record-stat:last-child {
  border-right: none;
  padding-right: 0;
}

.tr-stat-val {
  display: block;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--yellow);
  line-height: 1.1;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.tr-rating-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.tr-stars {
  display: flex;
  align-items: center;
  gap: 2px;
}

.star-ic {
  width: 15px;
  height: 15px;
}

.tr-stat-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 3px;
}

.tr-stat-sub {
  display: block;
  font-size: 0.77rem;
  color: #94A3B8;
  line-height: 1.35;
}

@media (max-width: 1100px) {
  .trust-split-grid {
    grid-template-columns: 380px 1fr;
    gap: 32px;
  }
  .trust-media-wrap img {
    height: 520px;
  }
}

@media (max-width: 991px) {
  .trust-split-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .trust-media-wrap img {
    height: 380px;
  }
}

@media (max-width: 640px) {
  .trust-split-points {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .track-record-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .track-record-stat {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 0;
    padding-bottom: 14px;
  }
  .track-record-stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

/* ==========================================================================
   Interactive Systems & Materials Catalog Grid (Section 2 - Comm & Res)
   ========================================================================== */
.systems-types-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
}

.system-type-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.system-type-card:hover {
  box-shadow: 0 10px 28px rgba(11, 27, 43, 0.09);
}

.system-card-media {
  position: relative;
  width: 100%;
  height: 240px;
  overflow: hidden;
  background: var(--navy);
}

.system-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.system-type-card:hover .system-card-media img {
  transform: scale(1.03);
}

.system-card-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 27, 43, 0.85);
  backdrop-filter: blur(4px);
  color: var(--yellow);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.system-card-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.system-card-body h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--head);
  margin-bottom: 12px;
  line-height: 1.3;
}

.system-drawer-toggle {
  width: 100%;
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  margin-top: auto;
}

.system-drawer-toggle:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
}

.system-drawer-toggle .drawer-chev {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.system-type-card.open .system-drawer-toggle .drawer-chev {
  transform: rotate(180deg);
}

.system-type-card.open .system-drawer-toggle {
  background: #EFF6FF;
  border-color: #BFDBFE;
  color: #1D4ED8;
}

.system-drawer-panel {
  display: none;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  margin-top: 16px;
}

.system-type-card.open .system-drawer-panel {
  display: block;
}

.system-spec-block {
  margin-bottom: 14px;
}

.system-spec-block:last-child {
  margin-bottom: 0;
}

.system-spec-block strong {
  display: block;
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 4px;
}

.system-spec-block p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

@media (max-width: 900px) {
  .systems-types-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .system-card-media {
    height: 220px;
  }
}

/* ==========================================================================
   Problems & Warning Signs: Exactly 2 per Row (User Requested)
   ========================================================================== */
.problems-2col-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-top: 36px;
}

@media (max-width: 860px) {
  .problems-2col-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ==========================================================================
   Service Triage Strip Callout
   ========================================================================== */
.service-triage-strip {
  margin-top: 40px;
  background: var(--deep);
  border-radius: var(--r-card);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(11, 27, 43, 0.15);
}

@media (max-width: 768px) {
  .service-triage-strip {
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 20px;
  }
  .service-triage-strip > div:last-child {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .service-triage-strip > div:last-child .btn {
    width: 100%;
    text-align: center;
  }
}

/* ==========================================================================
   Case Studies Grid & Cards (Commercial & Residential)
   ========================================================================== */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
}

.case-study-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(11, 27, 43, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.case-study-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(11, 27, 43, 0.1);
}

.case-media {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background: var(--navy);
}

.case-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.case-study-card:hover .case-media img {
  transform: scale(1.04);
}

.case-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 27, 43, 0.85);
  backdrop-filter: blur(4px);
  color: var(--yellow);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.case-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.case-scope-pill {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #1D4ED8;
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.case-body h3 {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--head);
  line-height: 1.35;
  margin-bottom: 16px;
}

.case-point {
  margin-bottom: 12px;
}

.case-point strong {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 3px;
}

.case-point p {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

@media (max-width: 1024px) {
  .case-studies-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 680px) {
  .case-studies-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .case-media {
    height: 200px;
  }
}

/* ==========================================================================
   Problem Cards & Safety Standards Grid
   ========================================================================== */
.problem-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin-top: 36px;
}

.code-callout-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card, 12px);
  padding: clamp(20px, 4vw, 36px);
  max-width: 920px;
  margin: 32px auto 0;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.04);
}

.problem-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 28px 24px;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}

.problem-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11, 27, 43, 0.08);
}

.problem-card-icon {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.problem-card-icon .ic {
  width: 26px;
  height: 26px;
}

.problem-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--head);
  line-height: 1.35;
  margin-bottom: 12px;
}

.problem-card p {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

@media (max-width: 960px) {
  .problem-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
}

@media (max-width: 600px) {
  .problem-cards-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ==========================================================================
   Geographic Service Area Pills
   ========================================================================== */
.areas-pill-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  max-width: 1080px;
  margin-left: auto;
  margin-right: auto;
}

.area-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  padding: 10px 18px;
  border-radius: 50px;
  color: var(--head);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(11, 27, 43, 0.04);
  transition: all 0.2s ease;
}

.area-pill-link .ic {
  width: 16px;
  height: 16px;
  color: var(--navy);
  flex-shrink: 0;
}

.area-pill-link:hover {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(11, 27, 43, 0.12);
}

.area-pill-link:hover .ic {
  color: var(--yellow);
}

/* ==========================================================================
   FAQ Accordion List (Commercial, Residential, Inspection, Maintenance, Leak)
   ========================================================================== */
.pricing-accordion-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 32px;
}

.pricing-acc-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(11, 27, 43, 0.03);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pricing-acc-item.active {
  border-color: #BFDBFE;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}

.pricing-acc-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  transition: background 0.2s ease, color 0.2s ease;
}

.pricing-acc-btn:hover {
  background: #F8FAFC;
}

.pricing-acc-item.active .pricing-acc-btn {
  background: #F0F7FF;
  color: #1D4ED8;
}

.pricing-acc-title {
  flex-grow: 1;
}

.pricing-acc-icon,
.pricing-acc-chevron {
  width: 20px;
  height: 20px;
  position: relative;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.pricing-acc-icon::before,
.pricing-acc-icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.pricing-acc-icon::before {
  top: 9px;
  left: 2px;
  width: 16px;
  height: 2px;
}

.pricing-acc-icon::after {
  top: 2px;
  left: 9px;
  width: 2px;
  height: 16px;
}

.pricing-acc-item.active .pricing-acc-icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.pricing-acc-item.active .pricing-acc-chevron {
  transform: rotate(180deg);
}

.pricing-acc-content {
  display: none;
  padding: 0 24px 20px 24px;
  border-top: 1px solid #E2E8F0;
  background: #FFFFFF;
}

.pricing-acc-item.active .pricing-acc-content {
  display: block;
}

.pricing-acc-inner {
  padding-top: 16px;
}

.pricing-acc-inner p,
.pricing-acc-content p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text);
  margin: 0;
}

/* ==========================================================================
   Final Conversion CTA Section & Lead Capture Form Card
   ========================================================================== */
.final-cta-section {
  background: var(--deep);
  color: #FFFFFF;
  position: relative;
  overflow: hidden;
}

.final-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 48px;
  align-items: start;
}

.final-cta-info {
  display: flex;
  flex-direction: column;
}

.final-trust-checks {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.ft-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #E2E8F0;
  font-size: 0.92rem;
  font-weight: 500;
}

.ft-check-item .ic {
  width: 18px;
  height: 18px;
  color: var(--yellow);
  flex-shrink: 0;
}

.final-phone-box {
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-card);
  padding: 20px 24px;
}

.final-cta-form-wrap {
  width: 100%;
}

.quote-form-card {
  background: #FFFFFF;
  border-radius: var(--r-card);
  padding: 36px 32px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
  color: var(--head);
}

.quote-form-card h3 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--head);
  margin-bottom: 6px;
}

.quote-form-card .form-sub {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 22px;
}

.quote-form-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-form-main .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.quote-form-main .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.quote-form-main label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--head);
  letter-spacing: 0.02em;
}

.quote-form-main input,
.quote-form-main select,
.quote-form-main textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #F8FAFC;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--head);
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
}

.quote-form-main input:focus,
.quote-form-main select:focus,
.quote-form-main textarea:focus {
  outline: none;
  background: #FFFFFF;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

@media (max-width: 960px) {
  .final-cta-grid,
  .final-cta-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 768px) {
  .quote-form-card,
  .final-cta-form-card {
    padding: 22px 16px;
  }
  .quote-form-main .form-row,
  .form-row-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .quote-form-main input,
  .quote-form-main select,
  .quote-form-main textarea {
    font-size: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* =========================================================
   ADDITIONAL SERVICE PAGE STANDARDS & COMPONENT RESTORATIONS
   ========================================================= */

.sec-head-left {
  text-align: left;
  max-width: 760px;
  margin-bottom: clamp(24px, 3.5vw, 40px);
}
.sec-head-left h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem);
  color: var(--head);
  line-height: 1.25;
  margin-bottom: 10px;
}

.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
}
.badge-accent {
  background: rgba(2, 132, 199, 0.1);
  color: #0284C7;
  border: 1px solid rgba(2, 132, 199, 0.25);
}

.form-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #64748B;
  margin-top: 6px;
}
.form-privacy .ic {
  width: 14px;
  height: 14px;
  color: #10B981;
  flex-shrink: 0;
}

.lbl {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--head);
  display: block;
}

.process-numbered-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.process-step-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 28px 24px;
  position: relative;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.process-step-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
}
.process-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0B1B2B;
  color: var(--yellow);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 16px;
}
.process-step-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 10px;
  line-height: 1.35;
}
.process-step-card p {
  font-size: 0.9rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

.clean-check-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.clean-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--body);
  line-height: 1.5;
}
.clean-check-list li::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.clean-check-list li:has(.ic)::before {
  display: none;
}
.clean-check-list li .ic {
  width: 18px;
  height: 18px;
  color: #10B981;
  flex-shrink: 0;
  margin-top: 2px;
}

.r-proj-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(11, 27, 43, 0.88);
  color: #FFFFFF;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.r-proj-scope-tag {
  font-size: 0.78rem;
  font-weight: 700;
  color: #0284C7;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.proj-kv-table {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
  background: #F8FAFC;
  border-radius: 6px;
  padding: 12px;
  border: 1px solid var(--border);
}
.proj-kv-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.82rem;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 6px;
}
.proj-kv-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.proj-kv-label {
  font-weight: 700;
  color: var(--head);
}
.proj-kv-val {
  color: var(--body);
  line-height: 1.4;
}
.r-proj-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
}
.r-proj-loc {
  color: var(--muted);
  font-weight: 600;
}
.r-proj-link {
  color: #0B1B2B;
  font-weight: 700;
  text-decoration: none;
}
.r-proj-link:hover {
  color: #2563EB;
  text-decoration: underline;
}

.standard-pillar-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}
.std-pillar-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.std-pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(11, 27, 43, 0.06);
  color: #0B1B2B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.std-pillar-icon .ic {
  width: 22px;
  height: 22px;
}
.std-pillar-head h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--head);
  margin: 0 0 4px;
}
.standard-pillar-card p {
  font-size: 0.9rem;
  color: var(--body);
  line-height: 1.6;
  margin: 0;
}

.service-areas-section {
  position: relative;
}

/* ==========================================================================
   GLOBAL TRUST GRID & REPUTATION ASIDE
   ========================================================================== */
.global-trust-section {
  background-color: #F8FAFC;
}

.pin-ic {
  color: #2563EB;
}

.global-trust-grid,
.global-trust-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.global-trust-content,
.global-trust-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.trust-lead-text,
.global-trust-main .sec-sub,
.global-trust-content .sec-sub {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--body);
  margin-bottom: 24px;
}

.trust-bullets-list,
.trust-bullets-stack,
.trust-bullets-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 28px;
}

.trust-bullet-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(11, 27, 43, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  min-width: 0;
}

.trust-bullet-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(11, 27, 43, 0.07);
}

.tb-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08);
  color: #2563EB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tb-icon .ic {
  width: 22px;
  height: 22px;
}

.tb-content h3 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 4px;
  line-height: 1.35;
}

.tb-content p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.trust-quote-strip {
  background: linear-gradient(135deg, #0B1B2B 0%, #142B46 100%);
  color: #FFFFFF;
  border-radius: var(--r-card);
  padding: 24px 28px;
  border-left: 4px solid var(--yellow);
  box-shadow: 0 10px 28px rgba(11, 27, 43, 0.12);
  margin-top: 8px;
}

.trust-quote-strip blockquote {
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 12px;
  color: #E2E8F0;
}

.trust-quote-strip cite {
  display: block;
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--yellow);
  letter-spacing: 0.02em;
}

.global-trust-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trust-photo-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(11, 27, 43, 0.1);
  border: 1px solid var(--border);
  background: #FFFFFF;
}

.trust-photo-card img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}

.trust-photo-badge {
  position: absolute;
  bottom: 18px;
  left: 18px;
  right: 18px;
  background: rgba(11, 27, 43, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 12px 18px;
  color: #FFFFFF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.tpb-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yellow);
}

.tpb-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: #FFFFFF;
  font-family: monospace, sans-serif;
  letter-spacing: 0.03em;
}

.track-record-box {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: 0 4px 18px rgba(11, 27, 43, 0.05);
}

.track-record-box h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--head);
  margin-bottom: 16px;
  border-bottom: 1.5px solid var(--border);
  padding-bottom: 10px;
}

.track-record-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  text-align: center;
}

.track-record-stat {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tr-stat-val {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0B1B2B;
  line-height: 1.1;
  margin-bottom: 4px;
}

.tr-stat-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 2px;
}

.tr-stat-sub {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.3;
}

.tr-rating-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.tr-stars {
  display: flex;
  gap: 2px;
}

.star-ic {
  width: 14px;
  height: 14px;
  fill: #F59E0B;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.95rem;
  background: var(--navy);
  color: #FFFFFF;
  border: 2px solid transparent;
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: var(--deep);
  color: var(--yellow);
}

.comp-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.editorial-right,
.prot-right {
  width: 100%;
}

@media (max-width: 992px) {
  .global-trust-grid,
  .global-trust-split {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

@media (max-width: 768px) {
  .track-record-stats {
    gap: 10px;
  }
  .track-record-stat {
    padding: 12px 6px;
  }
  .tr-stat-val {
    font-size: 1.25rem;
  }
  .tr-stat-label {
    font-size: 0.74rem;
  }
  .tr-stat-sub {
    font-size: 0.68rem;
  }
}

@media (max-width: 600px) {
  .track-record-stats {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .track-record-stat {
    padding: 16px 12px;
  }
  .trust-photo-badge {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 10px 14px;
  }
}

.bur-repair-split,
.tpo-welding-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.95fr);
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
  margin-top: 36px;
}

.table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 28px;
  border-radius: var(--r-card, 12px);
  border: 1px solid var(--border, #E2E8F0);
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.05);
}

.coating-comp-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: #FFFFFF;
}

.coating-comp-table th {
  background: #0B1B2B;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 16px 20px;
  text-align: left;
}

.coating-comp-table td {
  padding: 16px 20px;
  border-bottom: 1px solid #F1F5F9;
  font-size: 0.92rem;
  color: var(--muted, #475569);
  line-height: 1.55;
}

.coating-comp-table tr:hover td {
  background: #F8FAFC;
}

.coating-comp-table tr:last-child td {
  border-bottom: none;
}

.badge-highlight {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge-gold { background: #FEF3C7; color: #92400E; }
.badge-blue { background: #EFF6FF; color: #1D4ED8; }
.badge-purple { background: #F3E8FF; color: #6B21A8; }

.faq-accordion-wrap {
  width: 100%;
}

@media (max-width: 900px) {
  .bur-repair-split,
  .tpo-welding-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
}

@media (max-width: 960px) {
  .process-numbered-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

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




/* ==========================================================================
   LOCATION PAGES (TAMPA, BRANDON & REGIONAL HUBS) EDITORIAL STYLES
   ========================================================================== */

/* 1. Hero Editorial Split */
.loc-hero {
  position: relative;
  background: linear-gradient(145deg, #0B1B2B 0%, #142B46 100%);
  color: #fff;
  padding-block: clamp(44px, 5.5vw, 84px);
  overflow: hidden;
}
.loc-hero-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 4.5vw, 60px);
  align-items: center;
}
.loc-hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.loc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 213, 42, 0.12);
  border: 1px solid rgba(255, 213, 42, 0.35);
  color: var(--yellow);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 16px;
}
.loc-hero h1 {
  color: #fff;
  font-size: clamp(1.5rem, 1.15rem + 1.25vw, 2.25rem);
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 18px;
  text-wrap: balance;
}
.loc-hero-intro {
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  color: #CBD5E1;
  line-height: 1.68;
  margin-bottom: 24px;
  max-width: 600px;
}
.loc-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
}
.loc-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  width: 100%;
}
.loc-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #ffffff !important;
  font-weight: 600;
}
.loc-trust-pill .ic {
  width: 18px;
  height: 18px;
  color: var(--yellow);
  flex-shrink: 0;
}
.loc-hero-media {
  position: relative;
  width: 100%;
}
.loc-hero-img-wrap {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  aspect-ratio: 16 / 11;
  background: var(--deep);
}
.loc-hero-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-hero-badge {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  background: rgba(11, 27, 43, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.loc-hero-badge strong {
  display: block;
  font-size: 0.88rem;
  color: #fff;
  line-height: 1.25;
}
.loc-hero-badge small {
  display: block;
  font-size: 0.76rem;
  color: #CBD5E1;
  line-height: 1.25;
}

/* 2. Roofing Services Groups */
.svc-groups-wrapper {
  display: flex;
  flex-direction: column;
  gap: 36px;
  margin-top: 36px;
}
.svc-group-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: 0 6px 20px rgba(11, 27, 43, 0.05);
  overflow: hidden;
  display: grid;
  grid-template-columns: 360px 1fr;
}
.svc-group-card.prominent {
  border-color: #BFDBFE;
  box-shadow: 0 10px 28px rgba(37, 99, 235, 0.08);
}
.svc-group-media {
  position: relative;
  min-height: 280px;
  background: var(--navy);
}
.svc-group-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.svc-group-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--yellow);
  color: var(--deep);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 4px;
}
.svc-group-body {
  padding: clamp(24px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.svc-group-body h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  color: var(--head);
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}
.svc-group-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
}
.svc-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.svc-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #EFF6FF;
  color: #2563EB;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.svc-item-icon .ic {
  width: 18px;
  height: 18px;
}
.svc-item-content strong {
  display: block;
  font-size: 0.95rem;
  color: var(--head);
  margin-bottom: 4px;
}
.svc-item-content p {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 6px;
}
.svc-item-content .svc-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.svc-item-content .svc-link:hover {
  color: #2563EB;
  text-decoration: underline;
}

/* 3. Numbered Process Workflow Grid */
.loc-process-wrap {
  margin-top: 36px;
}
.loc-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.loc-process-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 26px 22px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.loc-process-card:hover {
  transform: translateY(-3px);
  border-color: #BFDBFE;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.08);
}
.loc-process-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.loc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--yellow);
  font-weight: 800;
  font-size: 0.95rem;
}
.loc-step-badge {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2563EB;
  background: #EFF6FF;
  padding: 4px 10px;
  border-radius: 4px;
}
.loc-process-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 8px;
  line-height: 1.3;
}
.loc-process-card p {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
.timeline-banner-img {
  margin-top: 36px;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(11, 27, 43, 0.08);
  border: 1px solid var(--border);
  max-height: 340px;
}
.timeline-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 4. Why Hillsborough Homeowners Trust Us */
.why-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 36px;
}
.why-trust-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 28px 22px;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.04);
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--navy);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.why-trust-card:hover {
  transform: translateY(-3px);
  border-top-color: var(--yellow);
  box-shadow: 0 10px 24px rgba(11, 27, 43, 0.08);
}
.why-trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #F8FAFC;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--navy);
  margin-bottom: 16px;
}
.why-trust-icon .ic {
  width: 22px;
  height: 22px;
}
.why-trust-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 8px;
}
.why-trust-card p {
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

/* 5. Service Areas & Neighborhoods Directory */
.hoods-split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: clamp(32px, 4.5vw, 60px);
  align-items: start;
  margin-top: 36px;
}
.hoods-intro-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 32px 28px;
  box-shadow: 0 4px 18px rgba(11, 27, 43, 0.04);
}
.hoods-intro-card h3 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}
.hoods-intro-card p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--muted);
  margin-bottom: 24px;
}
.hoods-map-graphic {
  background: #F8FAFC;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  text-align: center;
}
.hoods-list-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hood-group-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px 24px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hood-group-item:hover {
  border-color: #93C5FD;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.06);
}
.hood-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
}
.hood-group-head .ic {
  width: 18px;
  height: 18px;
  color: #2563EB;
}
.hood-group-item p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* 6. Diagnostic Grid (Warning Signs) */
.diagnostic-editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 36px;
}
.diagnostic-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 18px;
  align-items: center;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.03);
  transition: border-color 0.2s ease;
}
.diagnostic-item:hover {
  border-color: #CBD5E1;
}
.diag-media {
  width: 140px;
  height: 110px;
  border-radius: 8px;
  overflow: hidden;
  background: #0B1B2B;
  flex-shrink: 0;
}
.diag-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.diag-content h4 {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.diag-content h4::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F59E0B;
  flex-shrink: 0;
}
.diag-content p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.48;
  margin-bottom: 8px;
}
.diag-action-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563EB;
  text-decoration: none;
}
.diag-action-link:hover {
  text-decoration: underline;
}

/* 7. Asymmetrical Cost Panel */
.cost-40-60 {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
  margin-top: 36px;
}
.cost-featured-panel {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: var(--r-card);
  padding: 36px 30px;
  box-shadow: 0 10px 28px rgba(11, 27, 43, 0.06);
  border-top: 5px solid var(--navy);
}
.cost-badge {
  display: inline-block;
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}
.cost-price-range {
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.75rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 8px;
}
.cost-price-sub {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 18px;
}
.cost-disclaimer {
  font-size: 0.82rem;
  color: #64748B;
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-bottom: 22px;
}
.cost-factors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.cost-factor-box {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px 18px;
}
.cost-factor-box h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cost-factor-box h4 .ic {
  width: 16px;
  height: 16px;
  color: var(--navy);
}
.cost-factor-box p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}

/* 8. Editorial Project Portfolio */
.projects-editorial-wrap {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.featured-project-large {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  box-shadow: 0 10px 30px rgba(11, 27, 43, 0.06);
}
.featured-proj-img {
  min-height: 380px;
  background: #0B1B2B;
}
.featured-proj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-proj-info {
  padding: clamp(28px, 4vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.proj-pill-location {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2563EB;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.featured-proj-info h3 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  margin-bottom: 14px;
}
.featured-proj-info p {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 16px;
}
.supporting-proj-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.supporting-proj-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.04);
  display: flex;
  flex-direction: column;
}
.supporting-proj-card .card-media {
  height: 180px;
  background: #0B1B2B;
}
.supporting-proj-card .card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.supporting-proj-card .card-body {
  padding: 18px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.supporting-proj-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
}
.supporting-proj-card p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 10px;
  flex: 1;
}

/* 9. Proof Band & Credentials */
.proof-band {
  background: var(--navy);
  color: #FFFFFF;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.proof-band-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}
.proof-band-item strong {
  display: block;
  font-size: 1.25rem;
  color: var(--yellow);
  font-weight: 800;
  margin-bottom: 4px;
}
.proof-band-item span {
  font-size: 0.84rem;
  color: #CBD5E1;
}

/* 10. Reviews Editorial */
.reviews-editorial-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  margin-top: 36px;
}
.featured-review-box {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 42px);
  box-shadow: 0 10px 28px rgba(11, 27, 43, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.review-quote-mark {
  font-size: 3rem;
  line-height: 1;
  color: #93C5FD;
  font-family: Georgia, serif;
  margin-bottom: 8px;
}
.featured-review-box blockquote {
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem);
  line-height: 1.65;
  color: var(--head);
  margin: 0 0 20px 0;
  font-style: italic;
}
.review-author {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 16px;
}
.review-author strong {
  font-size: 0.95rem;
  color: var(--head);
}
.review-author span {
  font-size: 0.82rem;
  color: var(--muted);
}
.review-stars {
  color: #F59E0B;
  display: flex;
  gap: 2px;
}
.supporting-reviews-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.supporting-review-item {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(11, 27, 43, 0.03);
}
.supporting-review-item p {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--head);
  margin-bottom: 10px;
}

/* 11. Zip Codes Grid */
.zip-codes-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
.zip-pill {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid #CBD5E1;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--head);
  font-family: monospace, sans-serif;
}

/* 12. Minimal FAQ Accordion */
.faq-two-col {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 64px);
  margin-top: 36px;
  align-items: start;
}
.faq-left-sticky {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.faq-left-img {
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(11, 27, 43, 0.08);
  max-height: 260px;
}
.faq-left-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.faq-minimal-list {
  display: flex;
  flex-direction: column;
}
.faq-min-row {
  border-bottom: 1px solid var(--border);
}
.faq-min-btn {
  width: 100%;
  background: none;
  border: none;
  padding: 20px 0;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  transition: color 0.18s;
}
.faq-min-btn:hover {
  color: #2563EB;
}
.faq-min-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #F1F5F9;
  display: grid;
  place-items: center;
  color: var(--navy);
  flex-shrink: 0;
  font-size: 1.1rem;
  font-weight: 700;
  transition: transform 0.2s, background-color 0.2s;
}
.faq-min-row.active .faq-min-icon {
  transform: rotate(45deg);
  background: var(--yellow);
  color: var(--deep);
}
.faq-min-answer {
  display: none;
  padding-bottom: 20px;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.65;
}
.faq-min-row.active .faq-min-answer {
  display: block;
}

/* 13. Nearby Internal Link Grid */
.nearby-cities-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 28px;
}
.nearby-city-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--head);
  text-decoration: none;
  transition: all 0.2s ease;
}
.nearby-city-pill:hover {
  border-color: #2563EB;
  color: #2563EB;
  transform: translateX(3px);
}
.nearby-city-pill .ic {
  width: 16px;
  height: 16px;
}

/* Mobile Responsive Adjustments for Location Pages */
@media (max-width: 1024px) {
  .loc-hero-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .svc-group-card {
    grid-template-columns: 1fr;
  }
  .svc-group-media {
    min-height: 220px;
  }
  .timeline-track {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 28px;
  }
  .timeline-track::before {
    display: none;
  }
  .why-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hoods-split {
    grid-template-columns: 1fr;
  }
  .cost-40-60 {
    grid-template-columns: 1fr;
  }
  .featured-project-large {
    grid-template-columns: 1fr;
  }
  .supporting-proj-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .proof-band-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 16px;
  }
  .reviews-editorial-layout {
    grid-template-columns: 1fr;
  }
  .faq-two-col {
    grid-template-columns: 1fr;
  }
  .nearby-cities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .svc-group-list {
    grid-template-columns: 1fr;
  }
  .loc-process-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .why-trust-grid {
    grid-template-columns: 1fr;
  }
  .diagnostic-editorial-grid {
    grid-template-columns: 1fr;
  }
  .diagnostic-item {
    grid-template-columns: 1fr;
  }
  .diag-media {
    width: 100%;
    height: 180px;
  }
  .cost-factors-grid {
    grid-template-columns: 1fr;
  }
  .supporting-proj-grid {
    grid-template-columns: 1fr;
  }
  .proof-band-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .nearby-cities-grid {
    grid-template-columns: 1fr;
  }
}


/* Explicit Desktop 36px H1 rule */
@media (min-width: 992px) {
  h1, .hero h1, .page-hero h1, .loc-hero h1, .replacement-hero h1 {
    font-size: 36px !important;
    line-height: 1.22;
  }
}


/* =========================================================
   LOCATION PAGES COMPONENT STYLING & RESPONSIVE FIXES
   ========================================================= */

/* Utilities */
.text-center { text-align: center; }
.text-yellow { color: var(--yellow) !important; }

/* 1. Hero Fast Cards & Hero Media */
.loc-fast-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 20px 0 16px;
  width: 100%;
}
.loc-fast-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.loc-fast-card:hover {
  border-color: rgba(255, 213, 42, 0.4);
  background: rgba(255, 255, 255, 0.09);
}
.loc-fast-q {
  font-size: 0.82rem;
  color: #94A3B8;
  line-height: 1.4;
}
.loc-fast-action {
  font-size: 0.88rem;
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.35;
}
.loc-fast-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--yellow);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  word-break: break-word;
}
.loc-fast-link:hover {
  text-decoration: underline;
}
.loc-fast-note {
  font-size: 0.76rem;
  color: #CBD5E1;
  line-height: 1.35;
}
.loc-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  width: 100%;
}
.loc-hero-pills .loc-pill,
.loc-hero .loc-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  color: #ffffff !important;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.08);
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.loc-pill .ic {
  width: 15px;
  height: 15px;
  color: var(--yellow);
  flex-shrink: 0;
}
.loc-img-card {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--deep);
  aspect-ratio: 16 / 11;
}
.loc-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.loc-img-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  right: 14px;
  background: rgba(11, 27, 43, 0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 12px 16px;
  color: #fff;
}
.loc-img-badge strong {
  display: block;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
}
.loc-img-badge span {
  display: block;
  font-size: 0.78rem;
  color: #CBD5E1;
}

/* 2. Process Section */
.loc-process-wrapper {
  margin-top: 36px;
}

/* 3. Warning Signs (Section 6) */
.signs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 36px;
}
.sign-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px 20px;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
}
.sign-card:hover {
  transform: translateY(-2px);
  border-color: #F59E0B;
}
.sign-icon {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: #FEF3C7;
  color: #D97706;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}
.sign-icon .ic {
  width: 22px;
  height: 22px;
}
.sign-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 8px;
  line-height: 1.35;
}
.sign-card p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 14px;
  flex: 1;
}
.sign-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: #2563EB;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  margin-top: auto;
}
.sign-link:hover {
  text-decoration: underline;
}

/* 4. Case Study Projects (Section 8) */
.projects-featured-wrap {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 36px;
}
.project-featured-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  display: grid;
  grid-template-columns: 420px 1fr;
  box-shadow: 0 10px 30px rgba(11, 27, 43, 0.06);
}
.project-media {
  position: relative;
  min-height: 280px;
  background: #0B1B2B;
}
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.project-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 27, 43, 0.88);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.project-body {
  padding: clamp(22px, 3.5vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.project-category {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #2563EB;
  margin-bottom: 8px;
  display: block;
}
.project-body h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  font-weight: 700;
  color: var(--head);
  margin-bottom: 16px;
  line-height: 1.3;
}
.case-study-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-point {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
  padding: 10px 14px;
  background: #F8FAFC;
  border-radius: 6px;
  border-left: 3px solid #CBD5E1;
}
.case-point strong {
  color: var(--head);
  font-weight: 700;
}
.case-point.highlight {
  background: #F0FDF4;
  border-left-color: #10B981;
  color: #166534;
}
.case-point.highlight strong {
  color: #15803D;
}

/* 5. Nearby City Cards (Section 12) */
.nearby-city-card {
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 20px 18px;
  box-shadow: 0 2px 10px rgba(11, 27, 43, 0.03);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nearby-city-card:hover {
  transform: translateY(-2px);
  border-color: #93C5FD;
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.08);
}
.nearby-city-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--head);
  margin-bottom: 6px;
}
.nearby-city-card p {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}
.nearby-link {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563EB;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  margin-top: auto;
}
.nearby-link:hover {
  text-decoration: underline;
}

/* 6. Final Conversion CTA Section (Section 13) */
.loc-final-cta {
  background: linear-gradient(145deg, #0B1B2B 0%, #142B46 100%);
  color: #FFFFFF;
  padding-block: clamp(48px, 6vw, 88px);
  position: relative;
  overflow: hidden;
}
.loc-cta-box {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.loc-cta-info {
  display: flex;
  flex-direction: column;
}
.loc-cta-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 24px;
}
.loc-cta-pt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: #E2E8F0;
}
.loc-cta-pt .ic {
  width: 18px;
  height: 18px;
  color: var(--yellow);
  flex-shrink: 0;
}
.loc-cta-phone-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(4px);
}
.loc-cta-phone-card span {
  font-size: 0.86rem;
  color: #CBD5E1;
}
.loc-cta-phone-card a {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--yellow) !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.loc-cta-phone-card a:hover {
  text-decoration: underline !important;
}
.loc-cta-phone-card small {
  font-size: 0.78rem;
  color: #94A3B8;
}
.loc-cta-form-card {
  background: #FFFFFF;
  border-radius: var(--r-card);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.35);
  color: var(--head);
}
.loc-cta-form-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--head);
  margin-bottom: 4px;
}
.loc-cta-form-card p {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 18px;
}

/* 7. Comprehensive Responsive Rules */
@media (max-width: 1024px) {
  .project-featured-card {
    grid-template-columns: 1fr;
  }
  .loc-cta-box {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 768px) {
  .loc-fast-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .signs-grid {
    grid-template-columns: 1fr;
  }
  .form-row-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* =========================================================
   COMPREHENSIVE GLOBAL & LOCATION RESPONSIVE RESILIENCE
   Ensures zero layout breakage, zero horizontal overflow,
   and flawless rendering across all screen sizes.
   ========================================================= */

/* Prevent horizontal page blowouts on mobile devices */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Defensive Grid Item Boundaries: prevent grid tracks from expanding beyond viewport */
.loc-hero-split > *,
.svc-groups-wrapper > *,
.svc-group-card > *,
.svc-group-list > *,
.loc-process-grid > *,
.why-trust-grid > *,
.proof-band-grid > *,
.hoods-split > *,
.diagnostic-editorial-grid > *,
.diagnostic-item > *,
.signs-grid > *,
.sign-card > *,
.cost-40-60 > *,
.cost-factors-grid > *,
.projects-editorial-wrap > *,
.featured-project-large > *,
.supporting-proj-grid > *,
.supporting-proj-card > *,
.projects-featured-wrap > *,
.project-featured-card > *,
.reviews-grid > *,
.faq-two-col > *,
.nearby-cities-grid > *,
.final-cta-layout > *,
.loc-cta-box > * {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Form controls in location CTA forms */
.loc-cta-form-card form {
  display: grid;
  gap: 14px;
  width: 100%;
}
.loc-cta-form-card .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}
.loc-cta-form-card .field label {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--head);
}
.loc-cta-form-card .field input,
.loc-cta-form-card .field select,
.loc-cta-form-card .field textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--head);
  background: #FFFFFF;
  box-sizing: border-box;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.loc-cta-form-card .field input:focus,
.loc-cta-form-card .field select:focus,
.loc-cta-form-card .field textarea:focus {
  outline: none;
  border-color: #2563EB;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Image aspect ratios to prevent height collapse on mobile */
.timeline-banner-img {
  aspect-ratio: 16 / 7;
  min-height: 160px;
}
.timeline-banner-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faq-left-img {
  aspect-ratio: 16 / 10;
  min-height: 180px;
}
.faq-left-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.loc-img-card {
  aspect-ratio: 16 / 11;
  min-height: 220px;
}
.loc-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet & Mobile Breakpoints (max-width: 1024px) */
@media (max-width: 1024px) {
  .loc-hero-split {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .svc-group-card {
    grid-template-columns: 1fr !important;
  }
  .svc-group-media {
    min-height: 200px !important;
    max-height: 260px !important;
  }
  .hoods-split {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .cost-40-60 {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .featured-project-large {
    grid-template-columns: 1fr !important;
  }
  .featured-proj-img {
    min-height: 220px !important;
    max-height: 300px !important;
  }
  .project-featured-card {
    grid-template-columns: 1fr !important;
  }
  .project-media {
    min-height: 200px !important;
    max-height: 280px !important;
  }
  .faq-two-col {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .loc-cta-box {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .final-cta-layout {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
}

/* Mobile Breakpoints (max-width: 768px) */
@media (max-width: 768px) {
  .loc-fast-cards {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .svc-group-list {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .loc-process-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .why-trust-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .proof-band-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .diagnostic-editorial-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .diagnostic-item {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .diag-media {
    width: 100% !important;
    height: 180px !important;
  }
  .signs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .cost-factors-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .supporting-proj-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .nearby-cities-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-row-2 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Extra Small Screens (max-width: 480px) */
@media (max-width: 480px) {
  .loc-hero {
    padding-block: 36px 48px !important;
  }
  .loc-fast-card {
    padding: 12px 14px !important;
  }
  .loc-process-card {
    padding: 20px 16px !important;
  }
  .why-trust-card {
    padding: 20px 16px !important;
  }
  .hoods-intro-card {
    padding: 22px 18px !important;
  }
  .hood-group-item {
    padding: 16px 16px !important;
  }
  .cost-featured-panel {
    padding: 24px 18px !important;
  }
  .project-body {
    padding: 20px 16px !important;
  }
  .loc-cta-form-card,
  .final-cta-form-card {
    padding: 22px 16px !important;
  }
}

/* =========================================================
   BLOG STYLES: HUB & ARTICLE LAYOUT WITH STICKY SIDEBAR
   ========================================================= */
.blog-hero {
  background: linear-gradient(135deg, var(--deep) 0%, var(--navy) 100%);
  color: #fff;
  padding: 60px 0 50px;
  position: relative;
  overflow: hidden;
}
.blog-hero .crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 0.85rem;
  color: #94A3B8;
  margin-bottom: 20px;
}
.blog-hero .crumbs a {
  color: #CBD5E1;
  text-decoration: none;
  transition: color 0.18s;
}
.blog-hero .crumbs a:hover {
  color: var(--yellow);
}
.blog-hero .crumbs span[aria-current="page"] {
  color: #fff;
  font-weight: 600;
}
.blog-category-tag {
  display: inline-block;
  background: rgba(255, 213, 42, 0.15);
  color: var(--yellow);
  border: 1px solid rgba(255, 213, 42, 0.35);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.blog-hero h1 {
  font-size: 2.25rem;
  line-height: 1.25;
  color: #fff;
  margin-bottom: 20px;
  max-width: 900px;
}
@media (min-width: 992px) {
  .blog-hero h1 {
    font-size: 2.5rem;
  }
}
.blog-meta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  font-size: 0.88rem;
  color: #CBD5E1;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.blog-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--yellow);
}

/* Blog Layout Grid */
.blog-section {
  padding: 50px 0 80px;
  background: #FAFCFE;
}
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 48px;
  align-items: start;
}

/* Main Article Content */
.blog-main {
  background: #fff;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  padding: 40px;
  box-shadow: 0 4px 20px rgba(11, 27, 43, 0.04);
}
.blog-featured-media {
  margin: -40px -40px 32px -40px;
  border-radius: var(--r-card) var(--r-card) 0 0;
  overflow: hidden;
  background: #0B1B2B;
}
.blog-featured-media img {
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  display: block;
}
.blog-media-caption {
  padding: 10px 24px;
  font-size: 0.82rem;
  color: var(--muted);
  background: #F8FAFC;
  border-bottom: 1px solid var(--border);
  font-style: italic;
}
.article-lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--head);
  font-weight: 500;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.blog-content h2 {
  font-size: 1.65rem;
  line-height: 1.3;
  color: var(--navy);
  margin-top: 44px;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #E2E8F0;
  scroll-margin-top: 100px;
}
.blog-content h3 {
  font-size: 1.25rem;
  line-height: 1.35;
  color: var(--head);
  margin-top: 28px;
  margin-bottom: 12px;
  scroll-margin-top: 100px;
}
.blog-content p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: #334155;
  margin-bottom: 18px;
}
.blog-content ul, .blog-content ol {
  margin-bottom: 22px;
  padding-left: 24px;
}
.blog-content li {
  font-size: 1rem;
  line-height: 1.7;
  color: #334155;
  margin-bottom: 10px;
}
.blog-content strong {
  color: var(--head);
}
.blog-content a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  transition: color 0.18s;
}
.blog-content a:hover {
  color: var(--blue);
}

/* Callout Boxes */
.article-callout {
  background: #F0F7FF;
  border-left: 4px solid var(--navy);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 28px 0;
}
.article-callout.warning {
  background: #FFFBEB;
  border-left-color: #D97706;
}
.article-callout-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 8px;
}
.article-callout.warning .article-callout-head {
  color: #92400E;
}
.article-callout p {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Calculation Box (Decking Allowance) */
.math-breakdown-card {
  background: #F8FAFC;
  border: 1px solid #CBD5E1;
  border-radius: 10px;
  padding: 24px;
  margin: 24px 0;
}
.math-breakdown-head {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--head);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.math-rows {
  display: grid;
  gap: 10px;
  font-size: 0.95rem;
}
.math-row {
  display: flex;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 1px dashed #CBD5E1;
}
.math-row.total {
  border-bottom: none;
  border-top: 2px solid var(--navy);
  padding-top: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
}

/* Clause Box */
.contract-clause-box {
  background: #F1F5F9;
  border: 1px solid #CBD5E1;
  border-left: 5px solid var(--navy);
  border-radius: 6px;
  padding: 22px;
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.7;
  color: #1E293B;
  margin: 24px 0;
}
.contract-clause-box .clause-label {
  font-style: normal;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  display: block;
  margin-bottom: 10px;
}

/* Comparison and Estimate Tables */
.blog-table-wrap {
  overflow-x: auto;
  margin: 28px 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}
.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  text-align: left;
  background: #fff;
}
.blog-table th {
  background: var(--deep);
  color: #fff;
  font-weight: 700;
  padding: 14px 16px;
  border: 1px solid #1E293B;
}
.blog-table td {
  padding: 12px 16px;
  border: 1px solid #E2E8F0;
  color: #334155;
  vertical-align: top;
}
.blog-table tr:nth-child(even) td {
  background: #F8FAFC;
}
.blog-table tr:hover td {
  background: #F1F5F9;
}
.blog-table tfoot td {
  background: #E2E8F0;
  font-weight: 700;
  color: var(--head);
}

/* Step Process (Section 5) */
.steps-process-list {
  display: grid;
  gap: 18px;
  margin: 24px 0;
}
.step-process-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 16px;
}
.step-num-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}
.step-body h3 {
  margin: 0 0 8px 0;
  font-size: 1.15rem;
  color: var(--head);
}
.step-body p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Checklist (Section 8) */
.article-checklist {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  margin: 24px 0;
}
.article-checklist li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.96rem;
}
.checklist-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: #10B981;
  margin-top: 2px;
}

/* FAQ Accordion / Cards */
.faq-article-grid {
  display: grid;
  gap: 16px;
  margin: 28px 0;
}
.faq-article-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  padding: 20px 24px;
}
.faq-article-card h3 {
  font-size: 1.15rem;
  color: var(--head);
  margin-top: 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.faq-article-card p {
  margin-bottom: 0;
  font-size: 0.96rem;
  line-height: 1.65;
  color: #475569;
}

/* =========================================================
   COMPREHENSIVE BLOG SIDEBAR, TOC & CTA BOX STYLES
   ========================================================= */
.blog-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Card 1: Direct Project Desk CTA Box */
.sidebar-cta-box {
  background: linear-gradient(145deg, var(--deep) 0%, var(--navy) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--r-card);
  padding: 26px 22px !important;
  box-shadow: 0 10px 26px rgba(11, 27, 43, 0.22);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.sidebar-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--yellow), #FFE57F);
}

.sidebar-cta-box .cta-subtitle {
  display: inline-flex;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--yellow) !important;
  margin-bottom: 8px;
}

.sidebar-cta-box .cta-title {
  color: #fff !important;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 10px 0;
}

.sidebar-cta-box .cta-desc {
  font-size: 0.88rem;
  color: #CBD5E1 !important;
  line-height: 1.55;
  margin: 0 0 18px 0;
}

.sidebar-cta-box .cta-phone-wrap {
  margin-bottom: 16px;
  width: 100%;
}

.sidebar-cta-box .cta-phone-wrap a,
.sidebar-cta-box .cta-phone-wrap .btn-yellow {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--yellow) !important;
  color: var(--deep) !important;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 13px 18px;
  border-radius: var(--r-btn);
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(255, 213, 42, 0.4);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-sizing: border-box;
}

.sidebar-cta-box .cta-phone-wrap a:hover,
.sidebar-cta-box .cta-phone-wrap .btn-yellow:hover {
  background: #FFE066 !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255, 213, 42, 0.5);
  color: var(--deep) !important;
}

.sidebar-cta-box .cta-trust-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.sidebar-cta-box .trust-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: #E2E8F0;
  line-height: 1.35;
}

.sidebar-cta-box .trust-badge-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--yellow);
}

/* Card Heading & General Sidebar Card Styling */
.sidebar-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #E2E8F0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Card 2: Related Services Links List */
.sidebar-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.sidebar-links-list li a {
  display: block;
  font-size: 0.9rem;
  color: #475569;
  text-decoration: none;
  padding: 8px 12px;
  background: #F8FAFC;
  border-radius: 6px;
  border-left: 3px solid transparent;
  transition: all 0.18s ease;
}

.sidebar-links-list li a:hover {
  color: var(--navy);
  background: #EEF2F6;
  border-left-color: var(--navy);
  transform: translateX(2px);
}

/* Card 3: Sticky Table of Contents (TOC) */
.sidebar-sticky-toc-wrap {
  position: sticky !important;
  top: 96px !important;
  z-index: 10;
}

.sidebar-toc-card,
.sidebar-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px 20px;
  box-shadow: 0 4px 16px rgba(20, 43, 70, 0.05);
}

.sidebar-toc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--head);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.sidebar-toc-head svg {
  width: 18px;
  height: 18px;
  color: var(--navy);
}

.toc-nav {
  display: block;
}

.toc-list,
.sidebar-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
}

.toc-list li a,
.sidebar-toc-list li a {
  display: block;
  font-size: 0.88rem;
  color: #475569;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 6px;
  line-height: 1.45;
  transition: all 0.18s ease;
  border-left: 3px solid transparent;
}

.toc-list li a:hover,
.sidebar-toc-list li a:hover {
  color: var(--navy);
  background: #F1F5F9;
  border-left-color: var(--navy);
  padding-left: 14px;
}

.toc-list li a.active,
.sidebar-toc-list li a.active {
  color: var(--navy);
  font-weight: 700;
  background: #EEF2F6;
  border-left-color: var(--yellow);
}

/* =========================================================
   RESPONSIVE DATA TABLES & COMPARISON TABLES
   ========================================================= */
.table-responsive,
.blog-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 28px 0;
  border-radius: 8px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 10px rgba(11, 27, 43, 0.04);
  background: #fff;
}

.table-responsive::-webkit-scrollbar,
.blog-table-wrap::-webkit-scrollbar {
  height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb,
.blog-table-wrap::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 3px;
}

.data-table,
.blog-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.94rem;
  text-align: left;
  background: #fff;
}

.data-table th,
.blog-table th {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  padding: 14px 18px;
  border-top: none;
  border-bottom: 2px solid #0B1B2B;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.data-table td,
.blog-table td {
  padding: 13px 18px;
  border: 1px solid #E2E8F0;
  color: #334155;
  vertical-align: top;
  line-height: 1.6;
}

.data-table tr:nth-child(even) td,
.blog-table tr:nth-child(even) td {
  background: #F8FAFC;
}

.data-table tr:hover td,
.blog-table tr:hover td {
  background: #F1F5F9;
}

/* Blog Hub / Listing Page */
.blog-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.blog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(11, 27, 43, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(11, 27, 43, 0.1);
}
.blog-card-media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #0B1B2B;
}
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}
.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}
.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blog-card-meta {
  display: flex;
  gap: 12px;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.blog-card-title {
  font-size: 1.25rem;
  line-height: 1.35;
  margin-bottom: 12px;
}
.blog-card-title a {
  color: var(--head);
  text-decoration: none;
  transition: color 0.18s;
}
.blog-card-title a:hover {
  color: var(--navy);
}
.blog-card-excerpt {
  font-size: 0.92rem;
  line-height: 1.6;
  color: #475569;
  margin-bottom: 20px;
  flex: 1;
}
.blog-card-footer {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blog-card-read-btn {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.blog-card-read-btn:hover {
  color: var(--blue);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .blog-sidebar {
    position: static !important;
    margin-top: 36px;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .sidebar-toc-card,
  .sidebar-sticky-toc-wrap {
    grid-column: 1 / -1;
    position: static !important;
    top: auto !important;
  }
}
@media (max-width: 768px) {
  .blog-main {
    padding: 24px 18px;
  }
  .blog-featured-media {
    margin: -24px -18px 20px -18px;
  }
  .blog-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 30px;
  }
  .sidebar-card {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .sidebar-sticky-toc-wrap {
    width: 100% !important;
    position: static !important;
  }
  .blog-hero h1 {
    font-size: 1.75rem;
  }
  .blog-hub-grid {
    grid-template-columns: 1fr;
  }
  .step-process-card {
    flex-direction: column;
    gap: 10px;
  }
  .data-table,
  .blog-table {
    min-width: 500px;
    font-size: 0.88rem;
  }
  .data-table th,
  .blog-table th,
  .data-table td,
  .blog-table td {
    padding: 10px 14px;
  }
}


/* =========================================================
   BLOG ENHANCEMENTS: DECOR NUMBERED POINTS & FLOW STICKY TOC
   ========================================================= */
.blog-sidebar-flow {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.sidebar-sticky-toc-wrap {
  position: sticky;
  top: 96px;
  z-index: 10;
}

/* Numbered Decor Point Cards */
.decor-points-list {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
  display: grid;
  gap: 12px;
}
.decor-point-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-left: 3px solid var(--navy);
  border-radius: 6px;
  padding: 13px 18px;
  transition: transform 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.decor-point-item:hover {
  background: #F1F5F9;
  border-color: #CBD5E1;
  border-left-color: var(--yellow);
  transform: translateX(3px);
}
.point-num-badge {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.decor-point-item:hover .point-num-badge {
  background: var(--yellow);
  color: var(--deep);
}
.point-text {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #334155;
  margin: 0;
  flex: 1;
}
.point-text strong {
  color: var(--head);
}

/* Prominent Key Questions Box */
.key-questions-grid {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}
.key-question-card {
  display: flex;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px 20px;
  box-shadow: 0 2px 8px rgba(11,27,43,0.04);
}
.kq-badge {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--navy);
  color: var(--yellow);
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kq-content h3 {
  margin: 0 0 6px 0;
  font-size: 1.1rem;
  color: var(--head);
}
.kq-content p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.6;
  color: #475569;
}

/* Three Contractor Comparison Table */
.estimates-comp-table th {
  background: var(--deep);
  color: #fff;
}
.estimates-comp-table .price-cell {
  font-weight: 800;
  color: var(--navy);
  font-size: 1.05rem;
  white-space: nowrap;
}
.estimates-comp-table .contractor-name {
  font-weight: 700;
  color: var(--head);
}


/* =========================================================
   PREMIUM BLOG CARD & INTERACTIVE DESIGN ELEMENTS
   ========================================================= */
.blog-exec-summary {
  background: linear-gradient(145deg, #F8FAFC 0%, #EFF6FF 100%);
  border: 1px solid #BFDBFE;
  border-left: 5px solid var(--navy);
  border-radius: var(--r-card);
  padding: 24px 28px;
  margin: 28px 0 36px;
  box-shadow: 0 4px 16px rgba(20, 43, 70, 0.05);
}
.blog-exec-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.blog-exec-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.blog-exec-icon svg {
  width: 18px;
  height: 18px;
}
.blog-exec-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.blog-exec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.blog-exec-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #334155;
}
.blog-exec-list li svg {
  width: 18px;
  height: 18px;
  color: #0284C7;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Key Metrics / Stat Cards */
.metrics-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 28px 0 36px;
}
.metric-box {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  position: relative;
  overflow: hidden;
}
.metric-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--navy), var(--yellow));
}
.metric-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(20, 43, 70, 0.08);
}
.metric-box .metric-value {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 6px;
}
.metric-box .metric-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
  margin-bottom: 4px;
}
.metric-box .metric-sub {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.4;
}

/* Cause / Risk Cards Grid */
.cards-grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin: 24px 0 32px;
}
.interactive-card {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 22px;
  transition: all 0.2s ease;
  position: relative;
}
.interactive-card:hover {
  background: #fff;
  border-color: #CBD5E1;
  box-shadow: 0 6px 20px rgba(20, 43, 70, 0.06);
  transform: translateY(-2px);
}
.interactive-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.interactive-card-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--navy);
  color: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.interactive-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.interactive-card-body {
  font-size: 0.94rem;
  line-height: 1.6;
  color: #334155;
  margin-bottom: 12px;
}
.interactive-card-pills {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.88rem;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 10px 14px;
}
.interactive-card:hover .interactive-card-pills {
  background: #F8FAFC;
}

/* Comparison Dual Column: Repair vs Replace */
.decision-split-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
  margin: 28px 0;
}
.decision-box {
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #E2E8F0;
  background: #fff;
}
.decision-box.repair-favor {
  border-top: 4px solid #16A34A;
  background: #F0FDF4;
}
.decision-box.replace-favor {
  border-top: 4px solid #EA580C;
  background: #FFF7ED;
}
.decision-box-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.decision-box-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}
.repair-favor .decision-box-title { color: #15803D; }
.replace-favor .decision-box-title { color: #C2410C; }

/* Elegant Article Banner CTA */
.article-banner-cta {
  background: linear-gradient(135deg, var(--deep) 0%, var(--navy) 100%);
  color: #fff;
  border-radius: 12px;
  padding: 32px 36px;
  margin: 40px 0 20px;
  box-shadow: 0 10px 30px rgba(11, 27, 43, 0.15);
  position: relative;
  overflow: hidden;
}
.article-banner-cta::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: rgba(255, 213, 42, 0.08);
  border-radius: 50%;
  pointer-events: none;
}
.article-banner-cta h3 {
  color: #fff;
  font-size: 1.45rem;
  margin-top: 0;
  margin-bottom: 10px;
}
.article-banner-cta p {
  color: #CBD5E1;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 640px;
}
.article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.article-cta-btn-phone {
  background: var(--yellow);
  color: var(--deep);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(255, 213, 42, 0.25);
}
.article-cta-btn-phone:hover {
  background: var(--yellow-h);
  transform: translateY(-2px);
  color: var(--deep);
}
.article-cta-btn-contact {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 13px 22px;
  border-radius: 8px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
}
.article-cta-btn-contact:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.article-cta-trust {
  margin-top: 18px;
  font-size: 0.8rem;
  color: #94A3B8;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}


/* =========================================================
   OVERALL WEBSITE HOVER LINK COLOR: NORMAL DEEP YELLOW
   ========================================================= */
/* Default link hover across the site: normal deep yellow */
a:hover {
  color: var(--accent-on-light);
}

.blog-content a:hover {
  color: var(--accent-on-light) !important;
}

.sidebar-card a:hover,
.services-card a:hover,
.faq-item a:hover,
.step-body a:hover,
.interactive-card a:hover,
.blog-card-title a:hover,
.info-item a:hover,
.tlink:hover {
  color: var(--accent-on-light) !important;
}

.mega li a:hover,
.mega li a:focus-visible {
  color: var(--accent-on-light) !important;
}

.mega-foot a:hover {
  color: var(--accent-on-light) !important;
}

/* On dark backgrounds, preserve vibrant warm yellow visibility */
.navbar a:hover,
.site-footer a:hover,
.drawer a:hover,
.blog-hero a:hover,
.page-hero a:hover,
.article-banner-cta a:not(.article-cta-btn-phone):hover,
.call-card a:not(.btn):hover,
.crumbs a:hover {
  color: var(--yellow) !important;
}

/* Maintain solid button contrast on hover */
.btn-yellow:hover,
.btn-primary:hover,
.article-cta-btn-phone:hover {
  color: var(--deep) !important;
  background: var(--yellow-h);
}

.btn-ghost:hover {
  color: var(--deep) !important;
  background: #fff;
}


/* =========================================================
   SCHEDULED INTERNAL LINK STYLES (PHASE MANAGEMENT)
   ========================================================= */
.scheduled-link,
.future-link,
a[data-future-link="true"] {
  color: inherit !important;
  text-decoration: none !important;
  cursor: default !important;
  pointer-events: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* =========================================================
   ROOFING PROJECTS HUB STYLES
   ========================================================= */
.projects-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 32px 0 24px;
  align-items: center;
}

.project-filter-btn {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--head);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.project-filter-btn:hover {
  border-color: var(--yellow);
  color: var(--accent-on-light);
}

.project-filter-btn.active {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--deep);
  box-shadow: 0 4px 14px rgba(245, 166, 35, 0.25);
}

.project-filter-count {
  background: rgba(11, 27, 43, 0.08);
  font-size: 0.75rem;
  padding: 2px 7px;
  border-radius: 999px;
}

.project-filter-btn.active .project-filter-count {
  background: rgba(11, 27, 43, 0.2);
  color: var(--deep);
}

.projects-hub-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 24px;
}

@media (max-width: 1024px) {
  .projects-hub-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .projects-hub-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(20, 43, 70, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(11, 27, 43, 0.12);
  border-color: rgba(245, 166, 35, 0.5);
}

.project-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--deep);
}

.project-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.project-card:hover .project-card-media img {
  transform: scale(1.05);
}

.project-badge-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(11, 27, 43, 0.88);
  color: var(--yellow);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}

.project-location-tag {
  position: absolute;
  bottom: 12px;
  left: 14px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--deep);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.project-card-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.project-card-title {
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--head);
  margin: 0 0 10px;
}

.project-card-desc {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  margin-bottom: 18px;
  flex-grow: 1;
}

.project-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.project-spec-item {
  font-size: 0.75rem;
  font-weight: 600;
  background: #f4f7fa;
  color: var(--deep);
  padding: 4px 8px;
  border-radius: 4px;
}

.project-card-action {
  margin-top: auto;
}

.project-card-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--r-btn);
  background: #f4f7fa;
  color: var(--deep);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.project-card-btn:hover {
  background: var(--yellow);
  color: var(--deep);
}