/* =============================================================
   Home Source Roofing — Commercial page rebuild
   Kit styles (white-led · green accent · camo contrast) +
   layout additions for the three structural variants.
   ============================================================= */
@import url('colors_and_type.css');

* { margin:0; padding:0; box-sizing:border-box; }
.hs-page { font-family:var(--hs-font-body); color:var(--hs-fg); background:var(--hs-paper); -webkit-font-smoothing:antialiased; }
.hs-page img { display:block; max-width:100%; }
.hs-page button { font-family:inherit; cursor:pointer; }
.hs-page a { color:inherit; text-decoration:none; }

.wrap { max-width:1200px; margin:0 auto; padding:0 44px; }

/* ---- type helpers ---- */
.display { font-family:var(--hs-font-body); font-weight:900; text-transform:uppercase; line-height:.95; letter-spacing:-.01em; }
.head { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; letter-spacing:.01em; line-height:1.04; }
.eyebrow { font-family:var(--hs-font-body); font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--hs-green); }
.green { color:var(--hs-green); }
.lede { font-size:18px; line-height:1.6; color:var(--hs-fg-muted); }
.pill { display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--hs-green); padding:7px 14px; border-radius:999px; }
.pill.ghost { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; }
.uline { display:inline-block; width:54px; height:4px; background:var(--hs-green); border-radius:3px; }

/* ---- hide pre-baked header until chrome.js injects the correct one ---- */
#hs-header { visibility: hidden; }

/* ---- buttons (glossy) ---- */
.btn { font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; border:0; padding:15px 26px; border-radius:9px; display:inline-flex; align-items:center; gap:9px; color:#fff; white-space:nowrap; transition:transform .12s ease, background .12s ease; }
.btn svg { width:17px; height:17px; }
.btn-primary { background:#16A862; box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.22), 0 8px 22px rgba(22,168,98,.26); }
.btn-primary:hover { background:#000; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 4px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.25); transform:translateY(-1px); }
.btn-primary:active { background:#111; box-shadow:inset 0 3px 7px rgba(0,0,0,.38); transform:translateY(1px); }
.btn-ghost { background:#fff; color:var(--hs-green-hover); border:1.5px solid var(--hs-green); box-shadow:inset 0 1px 2px rgba(0,0,0,.05); }
.btn-ghost:hover { background:#F4FBF6; }
.btn-dark { background:#141414; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 5px rgba(0,0,0,.5); }
.btn-ondark-ghost { background:none; color:#fff; border:1.5px solid rgba(255,255,255,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
.btn-ondark-ghost:hover { background:rgba(255,255,255,.08); }
.btn-sm { padding:11px 18px; font-size:12px; }
.btn-lg { padding:17px 32px; font-size:15px; }

/* ---- top bar + header ---- */
.topbar { background:#000; color:#fff; font-size:12.5px; }
.topbar .wrap { display:none; align-items:center; justify-content:space-between; height:40px; }
.topbar a { font-weight:600; }
.topbar .tb-left { display:none; gap:20px; align-items:center; }
.topbar .tb-left .vo { color:var(--hs-green); font-weight:700; letter-spacing:.04em; text-transform:uppercase; font-size:11px; }
.topbar .tb-right { display:none; gap:18px; align-items:center; color:rgba(255,255,255,.8); }
.topbar .tb-right .ph { display:inline-flex; gap:7px; align-items:center; font-weight:700; color:#fff; }
/* mobile ticker */
.tb-ticker { overflow:hidden; height:40px; }
.tb-track { display:flex; align-items:center; width:max-content; height:40px; animation:ticker 35s linear infinite; will-change:transform; }
.tb-track > * { color:#1CBE72; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; flex-shrink:0; text-decoration:none; padding:0 16px; }
.tb-track .tb-sep { color:rgba(28,190,114,.45); padding:0; font-size:15px; font-weight:400; }
@keyframes ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (min-width:768px){
  .topbar .wrap { display:flex; }
  .topbar .tb-left { display:flex; }
  .topbar .tb-right { display:flex; }
  .tb-ticker { display:none; }
}

.header { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hs-border-subtle); }
.header .wrap { display:flex; align-items:center; gap:24px; height:74px; }
.header .logo img { height:42px; }
.nav { display:flex; gap:22px; margin-left:6px; }
.nav a { font-weight:600; font-size:14px; color:var(--hs-fg); padding:6px 0; position:relative; }
.nav a:hover { color:var(--hs-green-hover); }
.nav a.active { color:var(--hs-green-hover); }
.nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:3px; background:var(--hs-green); border-radius:2px; }
.header .h-cta { margin-left:auto; display:flex; align-items:center; gap:14px; }
.header .h-phone { display:inline-flex; gap:8px; align-items:center; font-family:var(--hs-font-display); font-weight:600; font-size:18px; }

/* ---- section scaffolding ---- */
.sec { padding:72px 0; }
.sec-sm { padding:52px 0; }
.sec-head { max-width:720px; }
.sec-head.center { margin:0 auto; text-align:center; }
.sec-head h2 { font-size:clamp(30px,3.4vw,44px); margin:14px 0 0; }
.sec-head .lede { margin-top:14px; }
.bg-muted { background:var(--hs-surface-muted); }
.bg-subtle { background:var(--hs-surface-subtle); }

/* ---- generic photo placeholder (commercial roof imagery) ---- */
.ph { position:relative; background:#15171a; overflow:hidden; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); }
.ph::before { content:""; position:absolute; inset:0; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 22px, rgba(255,255,255,0) 22px 44px),
  radial-gradient(120% 90% at 80% 0%, #23262b 0%, #121316 70%); }
.ph .ph-in { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:24px; }
.ph .ph-in svg { width:30px; height:30px; opacity:.65; }
.ph .ph-cap { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); }

/* ---- hero: white editorial ---- */
.hero-ed { padding:64px 0 72px; }
.hero-ed .grid { display:grid; grid-template-columns:1.05fr .95fr; gap:54px; align-items:center; }
.hero-ed h1 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; line-height:1.07; font-size:52px; margin:16px 0 0; letter-spacing:.005em; }
.hero-ed h2.sub { font-family:var(--hs-font-wordmark); font-weight:500; font-size:21px; color:var(--hs-fg-muted); margin:14px 0 0; text-transform:none; letter-spacing:normal; line-height:1.2; }
.hero-ed .sub { font-family:var(--hs-font-wordmark); font-weight:500; font-size:21px; color:var(--hs-fg-muted); margin-top:14px; }
.hero-ed .blist { display:flex; flex-direction:column; gap:13px; margin-top:26px; }
.hero-ed .blist .b { display:flex; gap:12px; align-items:center; font-weight:600; font-size:16px; }
.hero-ed .blist .ck { flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--hs-green); color:#fff; display:flex; align-items:center; justify-content:center; }
.hero-ed .blist .ck svg { width:14px; height:14px; }
.hero-ed .heroimg { border-radius:var(--hs-radius-lg); overflow:hidden; aspect-ratio:5/4; box-shadow:var(--hs-shadow-lg); }
.hero-ed .ratings { display:flex; gap:14px; align-items:center; margin-top:24px; flex-wrap:wrap; }

/* rating chip */
.rchip { display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--hs-border-subtle); border-radius:12px; padding:9px 14px; box-shadow:var(--hs-shadow-sm); }
.rchip .rc-src { font-weight:700; font-size:13px; }
.rchip .stars { color:var(--hs-green); letter-spacing:1px; font-size:13px; }
.rchip .rc-num { font-size:12px; color:var(--hs-fg-subtle); }

/* ---- hero: photo / scrim ---- */
.hero-photo { position:relative; min-height:580px; display:flex; align-items:flex-end; background:#0d0f12; overflow:hidden; }
.hero-photo .ph { position:absolute; inset:0; }
.hero-photo .scrim { position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.66) 44%, rgba(0,0,0,.2) 100%); }
.hero-photo .wrap { position:relative; z-index:3; width:100%; padding-top:72px; padding-bottom:60px; }
.hero-photo .inner { max-width:660px; color:#fff; }
.hero-photo h1 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; color:#fff; line-height:1.07; font-size:56px; margin:18px 0 0; }
.hero-photo .sub { font-family:var(--hs-font-wordmark); font-weight:500; font-size:22px; color:rgba(255,255,255,.82); margin-top:18px; }

/* ---- cert / trust badge strip ---- */
.certs { display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.cert { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:12px; padding:14px 18px; display:flex; align-items:center; gap:12px; box-shadow:var(--hs-shadow-sm); min-width:0; }
.cert .cb { flex:0 0 auto; width:38px; height:38px; border-radius:9px; background:var(--hs-green-tint); color:var(--hs-green-hover); display:flex; align-items:center; justify-content:center; }
.cert .cb svg { width:21px; height:21px; }
.cert .ct { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:14px; line-height:1.1; letter-spacing:.01em; }
.cert .cs { font-size:11px; color:var(--hs-fg-subtle); margin-top:2px; }
.certs-label { font-style:italic; font-size:13px; color:var(--hs-fg-subtle); letter-spacing:.02em; }

/* ---- service cards ---- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.svc { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; padding:28px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.svc:hover { transform:translateY(-3px); box-shadow:var(--hs-shadow-lg); border-color:transparent; }
.svc .ic { width:52px; height:52px; border-radius:12px; background:var(--hs-green-tint); color:var(--hs-green-hover); display:flex; align-items:center; justify-content:center; }
.svc .ic svg { width:27px; height:27px; }
.svc h3, .svc .svc-t { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:20px; margin:18px 0 9px; letter-spacing:.01em; line-height:1.12; color:var(--hs-fg); }
.svc p { font-size:14.5px; line-height:1.62; color:var(--hs-fg-muted); }

/* Brand/manufacturer logo row (e.g. "Brands We Work With") */
.brand-logos { list-style:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(32px,6vw,72px); max-width:860px; margin:36px auto 0; padding:0; }
.brand-logos li { margin:0; padding:0; }
.brand-logos img { height:clamp(48px,6vw,70px); width:auto; object-fit:contain; display:block; transition:transform .15s ease; }
.brand-logos li:hover img { transform:translateY(-2px); }

/* ---- roof types ---- */
.types-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.type { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; overflow:hidden; transition:transform .15s, box-shadow .15s; }
.type:hover { transform:translateY(-3px); box-shadow:var(--hs-shadow-lg); }
.type .tph { height:128px; }
.type .tbody { padding:22px 24px 26px; }
.type .tag { font-family:var(--hs-font-mono); font-size:11px; font-weight:500; letter-spacing:.08em; color:var(--hs-green-hover); }
.type h3 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:19px; margin:6px 0 9px; line-height:1.1; }
.type p { font-size:14px; line-height:1.6; color:var(--hs-fg-muted); }

/* roof types — editorial numbered list (variant B) */
.types-list { display:flex; flex-direction:column; }
.trow { display:grid; grid-template-columns:64px 1fr; gap:26px; padding:26px 0; border-top:1px solid var(--hs-border-subtle); align-items:start; }
.trow:last-child { border-bottom:1px solid var(--hs-border-subtle); }
.trow .tn { font-family:var(--hs-font-display); font-weight:700; font-size:34px; color:var(--hs-green); line-height:1; }
.trow h3 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:22px; margin-bottom:7px; }
.trow p { font-size:15px; line-height:1.62; color:var(--hs-fg-muted); max-width:760px; }

/* ---- projects ---- */
.proj-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.proj { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:14px; padding:22px 20px; display:flex; flex-direction:column; gap:14px; transition:transform .15s, box-shadow .15s, border-color .15s; }
.proj:hover { transform:translateY(-3px); box-shadow:var(--hs-shadow-md); border-color:transparent; }
.proj .pj-ic { width:44px; height:44px; border-radius:11px; background:var(--hs-green-tint); color:var(--hs-green-hover); display:flex; align-items:center; justify-content:center; }
.proj .pj-ic svg { width:23px; height:23px; }
.proj .pj-l { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:.01em; line-height:1.12; }
/* projects — pill row (variant B) */
.proj-pills { display:flex; flex-wrap:wrap; gap:12px; }
.proj-pill { display:inline-flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--hs-border); border-radius:999px; padding:12px 20px 12px 14px; font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:16px; letter-spacing:.01em; }
.proj-pill svg { width:18px; height:18px; color:var(--hs-green); }
.proj-pill.on-dark { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.18); color:#fff; }
.proj-pill.on-dark svg { color:var(--hs-green); }

/* ---- intro split ---- */
.intro { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.intro p { font-size:16px; line-height:1.72; color:var(--hs-fg-muted); }
.intro p + p { margin-top:16px; }
.intro .ph { border-radius:var(--hs-radius-lg); aspect-ratio:4/3; box-shadow:var(--hs-shadow-lg); }

/* ---- reviews ---- */
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; padding:26px; box-shadow:var(--hs-shadow-sm); display:flex; flex-direction:column; }
.review .stars { color:var(--hs-green); letter-spacing:2px; font-size:16px; }
.review p { font-size:14px; color:var(--hs-fg-muted); line-height:1.6; }
.review p.rev-text { font-size:14px; color:var(--hs-fg-muted); line-height:1.6; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.review p.rev-text.expanded { display:block; overflow:visible; -webkit-line-clamp:unset; flex:none; }
.review .rev-more { display:none; background:none; border:none; outline:none; color:var(--hs-green-hover); font-size:13px; font-weight:700; padding:6px 0 0; cursor:pointer; font-family:inherit; text-align:left; }
.review .who { display:flex; align-items:center; gap:11px; margin-top:18px; }
.review .who .av { width:38px; height:38px; border-radius:50%; background:var(--hs-green-tint); color:var(--hs-green-hover); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
img.av { width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.review .who .nm { font-weight:700; font-size:13.5px; }
.review .who .mt { font-size:12px; color:rgba(0,0,0,.65); }
.rev-summary { display:inline-flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--hs-border-subtle); border-radius:14px; padding:12px 20px; box-shadow:var(--hs-shadow-sm); }
.rev-summary .big { font-family:var(--hs-font-display); font-weight:700; font-size:30px; color:var(--hs-green); line-height:1; }

/* ---- camo CTA band ---- */
.camo { position:relative; background:#000; color:#fff; overflow:hidden; }
.camo-tex { position:absolute; inset:0; background-image:url('textures/blackout-camo.png'); background-size:520px; opacity:.85; }
.camo .wrap, .pg .camo .wrap, section.camo .wrap { position:relative; padding:72px 44px !important; }
.camo h2 { color:#fff; font-size:clamp(28px,3.4vw,46px); }
.camo .lede { color:rgba(255,255,255,.8); }
.camo .c-mark { position:absolute; right:30px; bottom:18px; height:42px; opacity:.5; }
.camo-split { display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap; }

/* ---- closing band ---- */
.closing { text-align:center; max-width:820px; margin:0 auto; }
.closing p { font-size:16px; line-height:1.75; color:var(--hs-fg-muted); margin-top:18px; }

/* ---- feature block (highlighted product: Low-E, TimberSteel) ---- */
.feat { display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:start; }
.feat .feat-media { position:sticky; top:96px; }
.feat .feat-media .ph { border-radius:var(--hs-radius-lg); aspect-ratio:4/5; box-shadow:var(--hs-shadow-lg); }
.feat .lede { margin-top:14px; }
.feat .subhead { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:22px; margin:26px 0 8px; line-height:1.12; }
.feat .bl-label { font-weight:700; font-size:15px; margin:18px 0 12px; }
.feat-bullets { display:flex; flex-direction:column; gap:14px; }
.bl { display:flex; gap:13px; }
.bl .ck { flex:0 0 24px; width:24px; height:24px; border-radius:50%; background:var(--hs-green); color:#fff; display:flex; align-items:center; justify-content:center; margin-top:2px; }
.bl .ck svg { width:14px; height:14px; }
.bl p { font-size:15px; line-height:1.6; color:var(--hs-fg-muted); }
.bl p b { color:var(--hs-fg); }

/* Numbered process / how-it-works step cards */
.proc-head { margin-bottom:8px; }
.proc-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:38px; }
.proc-step { display:flex; flex-direction:column; background:#fff; border:1px solid var(--hs-border-subtle); border-radius:var(--hs-radius-lg,16px); padding:28px 26px; box-shadow:var(--hs-shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.proc-step:hover { transform:translateY(-3px); box-shadow:var(--hs-shadow-lg); }
.proc-step .num { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:13px; background:var(--hs-green); color:#fff; font-family:var(--hs-font-display); font-weight:700; font-size:19px; line-height:1; margin-bottom:18px; }
.proc-step h3, .proc-step .pt { font-family:var(--hs-font-display); font-weight:600; font-size:18px; text-transform:uppercase; letter-spacing:.01em; line-height:1.15; color:var(--hs-fg); margin:0 0 9px; }
.proc-step p { font-size:14.5px; line-height:1.62; color:var(--hs-fg-muted); margin:0; }
@media (max-width:1000px){ .proc-steps { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .proc-steps { grid-template-columns:1fr; } }

/* Brand/collection cards (e.g. ProVia / Alside under "Types of Windows We Install") */
.collections-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:38px; }
.coll-card { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; padding:28px 30px; box-shadow:var(--hs-shadow-sm); }
.coll-card h3 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:19px; letter-spacing:.01em; line-height:1.15; color:var(--hs-fg); margin:0 0 10px; }
.coll-card p { font-size:14.5px; line-height:1.6; color:var(--hs-fg-muted); margin:0 0 12px; }
.coll-card ul { margin:0; padding-left:18px; display:flex; flex-direction:column; gap:6px; }
.coll-card li { font-size:13.5px; line-height:1.5; color:var(--hs-fg-muted); }
.coll-card li b { color:var(--hs-fg); }
@media (max-width:760px){ .collections-grid { grid-template-columns:1fr; } }
.feat .outro { font-size:15px; line-height:1.7; color:var(--hs-fg-muted); margin-top:20px; }
.feat .feat-cta { margin-top:22px; }
.feat .feat-cta .q { font-weight:700; font-size:16px; margin-bottom:14px; }

/* ---- reviews wall (masonry-ish columns) ---- */
.rev-wall { columns:3; column-gap:20px; }
.rev-wall .rcard { break-inside:avoid; margin-bottom:20px; background:#fff; border:1px solid var(--hs-border-subtle); border-radius:var(--hs-radius-lg); padding:24px; box-shadow:var(--hs-shadow-sm); }
.rev-wall .rcard .stars { color:var(--hs-green); letter-spacing:2px; font-size:15px; }
.rev-wall .rcard p { font-size:14px; line-height:1.62; color:var(--hs-fg-muted); margin-top:12px; }
.rev-wall .rcard .who { display:flex; align-items:center; gap:11px; margin-top:16px; }
.rev-wall .rcard .av { width:38px; height:38px; border-radius:50%; background:var(--hs-green-tint); color:var(--hs-green-hover); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:0 0 auto; }
.rev-wall .rcard .nm { font-weight:700; font-size:13.5px; }
.rev-wall .rcard .mt { font-size:12px; color:var(--hs-fg-subtle); }
.rev-wall .rcard .src { margin-left:auto; font-size:11px; font-weight:700; color:var(--hs-fg-subtle); }
@media (max-width:980px){ .rev-wall { columns:2; } }
@media (max-width:620px){ .rev-wall { columns:1; } }

/* ---- advantages / checklist cards ---- */
.clist { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:38px; }
.crow { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; padding:26px; box-shadow:var(--hs-shadow-sm); }
.crow .ic { width:46px; height:46px; border-radius:11px; background:var(--hs-green-tint); color:var(--hs-green-hover); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.crow .ic svg { width:23px; height:23px; }
.crow h4 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:18px; margin-bottom:7px; letter-spacing:.01em; }
.crow p { font-size:14.5px; line-height:1.6; color:var(--hs-fg-muted); }

/* ---- risk split (storm) ---- */
.risklist { display:flex; flex-direction:column; gap:14px; margin:20px 0 22px; }
.risk .ck { background:#C0392B; }
.risk-media .ph { border-radius:var(--hs-radius-lg); aspect-ratio:4/3; box-shadow:var(--hs-shadow-lg); }

/* ---- FAQ ---- */
.faq-list { display:flex; flex-direction:column; max-width:880px; margin:36px auto 0; }
.faq-item { border-top:1px solid var(--hs-border-subtle); padding:24px 4px; }
.faq-item:last-child { border-bottom:1px solid var(--hs-border-subtle); }
.faq-item h4, .faq-item h3 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:19px; display:flex; gap:12px; align-items:baseline; line-height:1.2; margin:0; }
.faq-item h4 .qm, .faq-item h3 .qm { color:var(--hs-green); font-weight:700; }
.faq-item .faq-q { display:flex; gap:12px; align-items:baseline; }
.faq-item .faq-q .qm { color:var(--hs-green); font-weight:700; font-family:var(--hs-font-display); font-size:19px; line-height:1.2; }
.faq-item .faq-q h3, .faq-item .faq-q h4 { display:block; }
.faq-item p { font-size:15px; line-height:1.65; color:var(--hs-fg-muted); margin-top:10px; padding-left:30px; }

/* ---- footer ---- */
.footer { background:#0a0a0a; color:rgba(255,255,255,.7); padding:60px 0 26px; }
.footer .cols { display:grid; grid-template-columns:1.5fr 1fr 1.6fr 1fr; gap:36px; }
.footer img.flogo { height:72px; margin-bottom:20px; }
/* BBB accredited card */
.bbb-card { display:inline-flex; align-items:center; gap:12px; margin-top:22px; padding:10px 14px; background:#fff; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.25); text-decoration:none; }
.bbb-card img { height:46px; width:auto; }
.bbb-card .bbb-meta { display:flex; flex-direction:column; line-height:1.25; }
.bbb-card .bbb-meta b { color:#0a3d62; font-size:14px; font-weight:800; }
.bbb-card .bbb-meta span { color:#444; font-size:11.5px; }
.bbb-card .bbb-link { color:var(--hs-green-hover); font-weight:700; }
.bbb-card:hover .bbb-link { text-decoration:underline; }
/* social brand icons */
.footer .fsoc a { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); transition:background .15s, color .15s; }
.footer .fsoc a:hover { background:var(--hs-green); color:#06281a; }
.footer .fsoc a svg { width:19px; height:19px; }

/* ============================================================
   Learning Hub topic filter
   ============================================================ */
.lh-filter { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:22px 0 8px; }
.lh-filter-count { font-size:14px; color:var(--hs-fg-muted, #5b6b63); font-weight:600; }
.lh-select { display:inline-flex; align-items:center; gap:10px; }
.lh-select > span { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--hs-fg-subtle, #8a938f); }
.lh-select select { appearance:none; -webkit-appearance:none; font:inherit; font-size:14px; font-weight:600; color:var(--hs-fg);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231CBE72' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border:1px solid var(--hs-border-subtle); border-radius:10px; padding:11px 40px 11px 16px; cursor:pointer; min-width:230px; box-shadow:var(--hs-shadow-sm, 0 2px 6px rgba(0,0,0,.06)); }
.lh-select select:hover { border-color:var(--hs-green); }
.lh-select select:focus { outline:none; border-color:var(--hs-green); box-shadow:0 0 0 3px var(--hs-green-tint, #eafaf2); }
@media (max-width:560px){ .lh-select { width:100%; } .lh-select select { flex:1; min-width:0; } }

/* ============================================================
   Related articles band (end of every blog post)
   ============================================================ */
.related { background:linear-gradient(180deg,#15512f,#103b22); padding:64px 0 70px; margin-top:10px; }
.related .related-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:34px; }
.related .eyebrow { color:#8fe3b6; }
.related .head { color:#fff; font-family:var(--hs-font-display); font-size:clamp(24px,3.4vw,36px); margin-top:6px; }
.related .btn-ghost { color:#fff; border:1.5px solid rgba(255,255,255,.5); background:transparent; }
.related .btn-ghost:hover { border-color:#fff; background:rgba(255,255,255,.08); }
.rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rel-card { display:flex; flex-direction:column; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 14px 34px rgba(0,0,0,.22); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.rel-card:hover { transform:translateY(-4px); box-shadow:0 22px 48px rgba(0,0,0,.3); }
.rel-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--hs-green-tint,#eafaf2); }
.rel-thumb img { width:100%; height:100%; object-fit:cover; }
.rel-cat { position:absolute; left:12px; top:12px; background:var(--hs-green); color:#06281a; font-size:11px; font-weight:800; letter-spacing:.03em; padding:5px 11px; border-radius:999px; }
.rel-body { padding:20px 22px 24px; display:flex; flex-direction:column; gap:9px; }
.rel-body .rel-meta { font-size:12.5px; color:var(--hs-fg-subtle,#8a938f); font-weight:600; }
.rel-body h3 { font-family:var(--hs-font-display); font-size:19px; line-height:1.25; color:var(--hs-fg); margin:0; }
.rel-body p { font-size:14px; line-height:1.55; color:var(--hs-fg-muted,#5b6b63); margin:0; }
@media (max-width:900px){ .rel-grid { grid-template-columns:1fr; max-width:520px; margin:0 auto; } }
.footer h5 { color:#fff; font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:14px; margin-bottom:16px; }
.footer ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.footer ul a, .footer ul li { font-size:13.5px; color:rgba(255,255,255,.66); }
.footer ul a:hover { color:var(--hs-green); }
.footer .finfo { font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.66); }
.footer .finfo b { color:#fff; font-weight:700; display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:4px; margin-top:14px; }
.footer .finfo b:first-child { margin-top:0; }
.footer .cities { display:grid; grid-template-columns:1fr 1fr; column-gap:22px; row-gap:7px; }
.footer .cities li { padding:0; }
.footer .lic { font-family:var(--hs-font-mono); font-size:12px; color:rgba(255,255,255,.5); line-height:1.7; }
.footer .fbar { border-top:1px solid rgba(255,255,255,.1); margin-top:42px; padding-top:22px; display:flex; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.5); flex-wrap:wrap; gap:10px; }
.footer .fsoc { display:flex; gap:14px; }
.footer .fsoc a { color:rgba(255,255,255,.66); font-size:13px; font-weight:600; }
.footer .fsoc a:hover { color:var(--hs-green); }
.footer .cities li a { display:inline-flex; }

/* ============================================================
   Header nav dropdowns + mobile nav  (added for About/Services)
   ============================================================ */
.nav { align-items:center; }
.nav .nav-item { position:relative; display:inline-flex; align-items:center; }
.nav > a, .nav .nav-item > a { white-space:nowrap; }
.nav .nav-item > a { display:inline-flex; align-items:center; gap:4px; }
.nav .caret { display:inline-flex; line-height:0; transition:transform .18s ease; color:var(--hs-fg-muted); }
.nav .nav-item:hover > a .caret,
.nav .nav-item.open > a .caret { transform:rotate(180deg); }
/* the active underline pseudo would sit under the caret too; keep it off dropdown toggles */
.nav .nav-item > a.active::after { display:none; }
.nav .nav-item.is-active > a { color:var(--hs-green-hover); }

.dropdown { position:absolute; top:100%; left:-14px; min-width:236px; background:#fff;
  border:1px solid var(--hs-border-subtle); border-radius:12px; box-shadow:var(--hs-shadow-lg, 0 18px 50px rgba(0,0,0,.16));
  padding:8px; opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s; z-index:60; }
.nav .nav-item:hover > .dropdown,
.nav .nav-item:focus-within > .dropdown,
.nav .nav-item.open > .dropdown { opacity:1; visibility:visible; transform:translateY(6px); }
.dropdown a { display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:8px;
  font-size:13.5px; font-weight:600; color:var(--hs-fg); white-space:nowrap; }
.dropdown a::after { display:none !important; }
.dropdown a:hover { background:var(--hs-green-tint, #eafaf2); color:var(--hs-green-hover); }
.dropdown a svg { width:15px; height:15px; color:var(--hs-green); flex:0 0 15px; }
.dropdown .dd-sep { height:1px; background:var(--hs-border-subtle); margin:6px 8px; }
.dropdown .dd-label { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--hs-fg-subtle, #9aa3a0); padding:10px 12px 4px; }
/* Services mega panel: two columns, section labels span the full width */
.dropdown.mega { left:-20px; display:grid; grid-template-columns:1fr 1fr; gap:1px 8px; min-width:440px; }
.dropdown.mega .dd-full,
.dropdown.mega .dd-label { grid-column:1 / -1; }
.dropdown.mega .dd-full { font-weight:700; border-bottom:1px solid var(--hs-border-subtle); border-radius:8px 8px 0 0; margin-bottom:2px; }

.nav-toggle { display:none; margin-left:auto; background:none; border:0; color:var(--hs-fg); cursor:pointer; padding:6px; }

@media (max-width:1180px) {
  .header .h-cta { display:none; }
  .nav-toggle { display:inline-flex; }
  .nav { position:fixed; inset:114px 0 auto 0; flex-direction:column; align-items:stretch; gap:0; margin:0;
    background:#fff; border-bottom:1px solid var(--hs-border-subtle); box-shadow:var(--hs-shadow-lg, 0 18px 50px rgba(0,0,0,.16));
    padding:8px 20px 22px; max-height:calc(100vh - 114px); overflow:auto;
    transform:translateY(-12px); opacity:0; visibility:hidden; transition:opacity .18s, transform .18s, visibility .18s; }
  .nav.open { opacity:1; visibility:visible; transform:none; }
  .nav > a, .nav .nav-item { width:100%; border-bottom:1px solid var(--hs-border-subtle); }
  .nav > a, .nav .nav-item > a { padding:14px 2px; width:100%; }
  .nav-item { flex-wrap:wrap; }
  .dropdown, .dropdown.mega { position:static; display:block; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:0; padding:2px 0 10px 14px; min-width:0; max-height:0; overflow:hidden; transition:max-height .25s ease; }
  .nav-item.open > .dropdown { max-height:1200px; }
}

/* ---------- siding option / brand cards ---------- */
.opt-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:20px; align-items:stretch; margin-top:6px; }
.opt-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--hs-border-subtle); border-radius:var(--hs-radius-lg); padding:24px; box-shadow:var(--hs-shadow-sm); transition:transform .15s ease, box-shadow .15s ease; }
.opt-card:hover { transform:translateY(-3px); box-shadow:var(--hs-shadow-lg); }
.opt-card h3, .opt-card h5 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:20px; line-height:1.12; margin:0 0 8px; color:var(--hs-fg); }
.opt-card > p { font-size:15px; line-height:1.66; color:var(--hs-fg-muted); margin:0; }
.opt-card .opt-list { margin-top:16px; }
.opt-list { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.opt-list li { position:relative; padding-left:22px; font-size:14.5px; line-height:1.58; color:var(--hs-fg-muted); }
.opt-list li::before { content:""; position:absolute; left:2px; top:8px; width:7px; height:7px; border-radius:50%; background:var(--hs-green); }
.opt-list li strong { color:var(--hs-fg); font-weight:700; }
.opt-foot { margin-top:16px; font-size:14.5px; line-height:1.62; color:var(--hs-fg-muted); }
@media (max-width:720px){ .opt-card { padding:22px; } }

/* ---------- real photos dropped into .ph image slots ---------- */
.ph > img.ph-photo, .ph > video.ph-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:1; }
.ph.has-photo::before { display:none; }
.ph.has-photo .ph-in { display:none; }

/* =============================================================
   Mobile fixes — 560px / 430px breakpoints (Audit June 2026)
   NOTE: many grids have inline style="grid-template-columns:..."
   so overrides require !important to win over inline specificity.
   ============================================================= */

@media (max-width: 560px) {
  /* Tighter wrap padding */
  .wrap { padding: 0 20px; }

  /* Hero H1 sizes */
  .hero-photo h1 { font-size: 40px; line-height: 1.1; }
  .hero-ed h1    { font-size: 36px; line-height: 1.1; }

  /* Hero photo — cap to one viewport height */
  .hero-photo { min-height: 100svh; max-height: 100svh; }

  /* Hero-ed: collapse collapsed image column, hide it */
  .hero-ed .grid    { grid-template-columns: 1fr !important; }
  .hero-ed .heroimg { display: none; }

  /* Content split grids via class (Template A hero-ed pages) */
  .intro { grid-template-columns: 1fr !important; gap: 28px; }
  .feat  { grid-template-columns: 1fr !important; gap: 32px; }
  .uc-grid { grid-template-columns: 1fr !important; gap: 24px; }

  /* Content split grids via inline style (Template B sec pages) —
     attribute selector + !important to beat inline specificity */
  .sec > .wrap > div[style*="grid-template-columns"],
  .sec-sm > .wrap > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column;
    gap: 32px;
  }

  /* Card grids — all inline style, so !important required */
  .svc-grid   { grid-template-columns: 1fr !important; }
  .types-grid { grid-template-columns: 1fr !important; }
  .rev-grid   { grid-template-columns: 1fr !important; }
  .clist      { grid-template-columns: 1fr !important; }
  .proj-grid  { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer 4-col → 1-col */
  .footer .cols { grid-template-columns: 1fr; }

  /* CTA band stack */
  .camo-split { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 430px) {
  .hero-photo h1 { font-size: 36px; }
}

/* ── Mobile fixes: buttons, certifications, sticky header ── */
@media (max-width:640px) {
  /* Buttons: allow text to wrap and go full-width on small screens */
  .btn { white-space:normal; text-align:center; }
  .btn-lg { padding:15px 20px; }
  /* CTA band buttons always full-width on mobile */
  .cta-band .btn, .svc-cta .btn, .hero-actions .btn { width:100%; justify-content:center; }
  /* Cert cards: full-width, equal size, stacked */
  .certs { flex-direction:column; gap:10px; }
  .cert { width:100%; box-sizing:border-box; }
}

/* Global horizontal bleed prevention on mobile */
@media (max-width:640px) {
  body { overflow-x:clip; }
  section, .wrap, .wrap-narrow { max-width:100%; }
}

/* ---- HS forms: consent checkbox, radio groups, file input, honeypot ---- */
.hs-hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.hs-form-error { background: #FEF2F2; border: 1px solid #FCA5A5; color: #B91C1C; font-size: 13px; padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; }
.hs-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; cursor: pointer; }
.hs-consent input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--hs-green); cursor: pointer; }
.hs-consent span { font-size: 12px; line-height: 1.5; color: var(--hs-fg-muted); }
.hs-consent a { color: var(--hs-green-hover); text-decoration: underline; }
.hs-consent-long span { font-size: 12.5px; }
.hs-radio-row { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.hs-radio { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; cursor: pointer; padding: 9px 12px; border: 1.5px solid var(--hs-border); border-radius: 9px; transition: border-color .12s, background .12s; }
.hs-radio:has(input:checked) { border-color: var(--hs-green); background: var(--hs-green-tint); }
.hs-radio input[type="radio"] { accent-color: var(--hs-green); width: 16px; height: 16px; flex: 0 0 auto; }
.hs-skip-link { display: block; text-align: center; font-size: 12.5px; color: var(--hs-fg-subtle); margin-top: 12px; text-decoration: underline; cursor: pointer; }