/* =============================================================
   Home Source Roofing — Homepage Variations
   Foundation stylesheet. Brand tokens inlined from the design
   system (colors_and_type.css) so there is no cross-project
   runtime dependency. Then: shared components + per-variation
   themes + the comparison-app shell.
   White leads · Green accents · Black/camo is the contrast.
   ============================================================= */
:root {
  --hs-paper:#FFFFFF; --hs-ink:#000000; --hs-green:#1CBE72; --hs-green-light:#61D29E;
  --hs-green-rgb:28 190 114;
  --hs-green-hover:#16A862; --hs-green-press:#128A50; --hs-green-tint:#E9F9F1;
  --hs-camo-base:#000000; --hs-camo-mid:#1f1f1f; --hs-camo-high:#383838;
  --hs-surface:#FFFFFF; --hs-surface-muted:#FAFAFA; --hs-surface-subtle:#F4F5F4;
  --hs-fg:#000000; --hs-fg-muted:rgba(0,0,0,.64); --hs-fg-subtle:rgba(0,0,0,.45);
  --hs-fg-inverse:#fff; --hs-fg-inverse-muted:rgba(255,255,255,.70);
  --hs-border-subtle:rgba(0,0,0,.08); --hs-border:rgba(0,0,0,.14); --hs-border-strong:rgba(0,0,0,.40);
  --hs-shadow-sm:0 1px 2px rgba(0,0,0,.06),0 1px 1px rgba(0,0,0,.04);
  --hs-shadow-md:0 4px 12px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05);
  --hs-shadow-lg:0 14px 40px rgba(0,0,0,.12),0 4px 10px rgba(0,0,0,.06);
  --hs-shadow-green:0 8px 24px rgba(28,190,114,.28);
  --hs-font-display:"Oswald",system-ui,sans-serif;
  --hs-font-wordmark:"Josefin Sans",system-ui,sans-serif;
  --hs-font-body:"Montserrat",system-ui,sans-serif;
  --hs-font-mono:"JetBrains Mono",ui-monospace,monospace;
  --hs-radius-sm:4px; --hs-radius-md:8px; --hs-radius-lg:16px; --hs-radius-xl:24px; --hs-radius-pill:999px;
  /* tweakable knobs (set by Tweaks panel on .hs-root) */
  --tw-radius-scale:1;
}

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

/* ===== shared utilities (scoped to .page so the app chrome is separate) ===== */
.page { background:var(--hs-paper); color:var(--hs-fg); font-family:var(--hs-font-body); }
.wrap { max-width:1200px; margin:0 auto; padding:0 28px; }
.display { font-family:var(--hs-font-display); font-weight:700; 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:#1a7a3c; }
.green { color:#1a7a3c; }
.hero .green { color:#1CBE72; }
.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:#1a7a3c; padding:7px 14px; border-radius:999px; }
.pill.ghost { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; }
.pill.outline { background:transparent; border:1.5px solid #1a7a3c; color:#1a7a3c; }
.uline { display:inline-block; width:54px; height:4px; background:var(--hs-green); border-radius:3px; }

/* ---- buttons (glossy) ---- */
.btn { font-weight:700; font-size:14px; letter-spacing:.04em; text-transform:uppercase; border:0; padding:15px 26px; border-radius:calc(9px * var(--tw-radius-scale)); display:inline-flex; align-items:center; gap:9px; color:#fff; white-space:nowrap; transition:transform .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:#1a7a3c; border:1.5px solid #1a7a3c; 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-dark:hover { background:#222; transform:translateY(-1px); }
.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; }
.btn-block { width:100%; justify-content:center; }
.btn-link { background:none; border:0; padding:15px 4px; color:#1a7a3c; text-decoration:underline; text-underline-offset:3px; box-shadow:none; }
.btn-link:hover { color:#16A862; }

/* ---- 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,.92); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hs-border-subtle); }
.header .wrap { display:flex; align-items:center; gap:26px; height:74px; }
.header .logo img { height:56px; }
.nav { display:flex; gap:26px; margin-left:8px; }
.nav a { font-weight:600; font-size:14.5px; 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:16px; }
.header .h-phone { display:inline-flex; gap:8px; align-items:center; font-family:var(--hs-font-display); font-weight:600; font-size:19px; }
/* dark header variant */
.header.dark { background:rgba(8,8,8,.86); border-bottom:1px solid rgba(255,255,255,.1); }
.header.dark .nav a { color:rgba(255,255,255,.82); }
.header.dark .nav a:hover, .header.dark .nav a.active { color:#fff; }
.header.dark .h-phone { color:#fff; }

/* ---- section scaffolding ---- */
.page section { padding:72px 0; }
.sec-head { max-width:680px; }
.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); }
.bg-ink { background:#0a0a0a; color:#fff; }

/* ---- hero (full-bleed photo) ---- */
.hero { position:relative; min-height:620px; display:flex; align-items:center; background:#000; overflow:hidden; }
.hero-bg { position:absolute; inset:0; }
.hero-bg img { width:100%; height:100%; object-fit:cover; }
.hero-bg video, .hero-vid { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-mobile-bg { display:block; position:absolute; inset:0; }
.hero-desktop-bg { display:none; }
@media (min-width:769px) {
  .hero-mobile-bg { display:none; }
  .hero-desktop-bg { display:block; }
}
.hero-scrim { position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.18) 100%); }
.hero .wrap { position:relative; padding-top:64px; padding-bottom:64px; }
.hero-inner { max-width:660px; color:#fff; }
.hero h1 { color:#fff; font-size:clamp(40px,5.4vw,68px); margin:18px 0 0; }
.hero .lede { color:rgba(255,255,255,.82); margin-top:18px; max-width:520px; }
.hero-cta { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-trust { display:flex; gap:22px; align-items:center; margin-top:34px; flex-wrap:wrap; }
.hero-trust .stars { color:var(--hs-green); font-size:17px; letter-spacing:2px; }
.hero-trust .rev { font-size:13px; color:rgba(255,255,255,.78); }
.hero-trust .rev b { color:#fff; font-size:15px; }
.hero-trust .sep { width:1px; height:30px; background:rgba(255,255,255,.22); }

/* ---- trust strip ---- */
.trust { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; box-shadow:var(--hs-shadow-md); display:grid; grid-template-columns:repeat(4,1fr); margin-top:-44px; position:relative; z-index:5; }
.trust .cell { padding:24px 22px; text-align:center; }
.trust .cell + .cell { border-left:1px solid var(--hs-border-subtle); }
.trust .cell svg { width:26px; height:26px; color:var(--hs-green); }
.trust .cell .big { font-family:var(--hs-font-display); font-weight:600; font-size:24px; margin-top:8px; }
.trust .cell .small { font-size:12.5px; color:var(--hs-fg-muted); margin-top:3px; }

/* ---- services grid ---- */
.svc-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.svc { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; padding:26px; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; cursor:pointer; }
.svc:hover { transform:translateY(-3px); box-shadow:var(--hs-shadow-lg); border-color:transparent; }
.svc .ic { width:50px; height:50px; 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:26px; height:26px; }
.svc h3 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:21px; margin:16px 0 8px; letter-spacing:.01em; }
.svc p { font-size:14px; line-height:1.6; color:var(--hs-fg-muted); }
.svc .more { display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-weight:700; font-size:13px; color:var(--hs-green-hover); }
.svc .more svg { width:15px; height:15px; transition:transform .15s ease; }
.svc:hover .more svg { transform:translateX(3px); }

/* ---- why choose us ---- */
.why { display:grid; grid-template-columns:1.05fr 1fr; gap:54px; align-items:center; }
.why-media { border-radius:18px; overflow:hidden; box-shadow:var(--hs-shadow-lg); aspect-ratio:4/3; background:#000; }
.why-media img { width:100%; height:100%; object-fit:cover; }
.check-list { display:flex; flex-direction:column; gap:18px; margin-top:26px; }
.check { display:flex; gap:14px; }
.check .ck { flex:0 0 26px; width:26px; height:26px; border-radius:50%; background:var(--hs-green); color:#fff; display:flex; align-items:center; justify-content:center; }
.check .ck svg { width:15px; height:15px; }
.check h4 { font-weight:700; font-size:16px; }
.check p { font-size:14px; color:var(--hs-fg-muted); line-height:1.55; margin-top:3px; }

/* ---- process steps ---- */
.process { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:46px; counter-reset:step; }
.step { position:relative; padding-top:14px; }
.step .num { font-family:var(--hs-font-body); font-weight:900; font-size:40px; line-height:1; color:var(--hs-green); opacity:.9; }
.step h4 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:17px; letter-spacing:.01em; margin:12px 0 7px; }
.step p { font-size:13px; line-height:1.55; color:var(--hs-fg-muted); }
.step::before { content:""; position:absolute; top:0; left:0; width:42px; height:4px; background:var(--hs-green); border-radius:3px; }

/* ---- mascot callout ---- */
.mascot-band { background:var(--hs-green-tint); border-radius:22px; overflow:hidden; display:grid; grid-template-columns:300px 1fr; align-items:end; gap:20px; }
.mascot-band .m-img { align-self:end; }
.mascot-band .m-img img { max-height:330px; margin:0 auto; }
.mascot-band .m-body { padding:48px 48px 48px 0; }
.mascot-band.m-centered .m-body { text-align:center; }
.mascot-band.m-centered .m-body .lede { margin-left:auto; margin-right:auto; }
.mascot-band.m-centered .m-body > div { justify-content:center; }

/* ---- partners ---- */
.partners { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; margin-top:36px; }
.partner { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:12px; padding:18px 26px; font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; letter-spacing:.02em; color:var(--hs-fg-muted); display:flex; align-items:center; gap:10px; }
.partner svg { width:20px; height:20px; color:var(--hs-green); }

/* ---- camo CTA band ---- */
.camo { position:relative; background:#000; color:#fff; overflow:hidden; }
.camo-tex { position:absolute; inset:0; background-image:url('assets/textures/blackout-camo.png'); background-size:520px; opacity:.85; }
.camo .wrap { position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; padding:64px 28px; }
.camo h2 { color:#fff; font-size:clamp(28px,3.4vw,46px); }
.camo .lede { color:rgba(255,255,255,.78); margin-top:14px; max-width:520px; }
.camo .c-mark { position:absolute; right:28px; bottom:18px; height:40px; opacity:.5; }

/* ---- reviews ---- */
.rev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:42px; }
.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 .q { font-weight:700; font-size:17px; margin:12px 0 8px; line-height:1.35; }
.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 p { font-size:14px; color:var(--hs-fg-muted); line-height:1.6; }
.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, img.av { width:38px; height:38px; border-radius:50%; flex-shrink:0; }
.review .who .av { 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 { object-fit:cover; }
.review .who .nm { font-weight:700; font-size:13.5px; }
.review .who .mt { font-size:12px; color:rgba(0,0,0,.65); }

/* ---- service areas ---- */
.areas-wrap { display:grid; grid-template-columns:1fr 1fr; gap:54px; align-items:center; }
.area-map { border-radius:18px; overflow:hidden; box-shadow:var(--hs-shadow-lg); background:var(--hs-surface-subtle); aspect-ratio:1/.9; position:relative; }
.area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px 14px; margin-top:24px; }
.area-grid a { font-size:13.5px; color:var(--hs-fg-muted); display:flex; align-items:center; gap:7px; padding:6px 0; transition:color .12s; }
.area-grid a:hover { color:var(--hs-green-hover); }
.area-grid a svg { width:14px; height:14px; color:var(--hs-green); flex:0 0 14px; }

/* ---- FAQ ---- */
.faq-list { max-width:820px; margin:42px auto 0; display:flex; flex-direction:column; gap:0; }
.faq { border-bottom:1px solid var(--hs-border-subtle); }
.faq-q { width:100%; background:none; border:0; text-align:left; padding:24px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; font-family:var(--hs-font-body); font-weight:700; font-size:18px; color:var(--hs-fg); }
.faq-q .qi { flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:var(--hs-green-tint); color:var(--hs-green-hover); display:flex; align-items:center; justify-content:center; transition:transform .2s ease; }
.faq.open .qi { transform:rotate(180deg); background:var(--hs-green); color:#fff; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq.open .faq-a { max-height:320px; }
.faq-a p { font-size:15px; line-height:1.65; color:var(--hs-fg-muted); padding:0 50px 24px 0; }

/* ---- learning hub ---- */
.learn-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:42px; }
.article { background:#fff; border:1px solid var(--hs-border-subtle); border-radius:16px; overflow:hidden; transition:transform .15s ease, box-shadow .15s ease; cursor:pointer; }
.article:hover { transform:translateY(-3px); box-shadow:var(--hs-shadow-lg); }
.article .ph { aspect-ratio:16/10; background:linear-gradient(135deg,#1a1a1a,#2c2c2c); position:relative; display:flex; align-items:center; justify-content:center; }
.article .ph .tag { position:absolute; top:14px; left:14px; z-index:2; }
.article .ph .ph-mark { height:46px; opacity:.32; }
.article .ph .ph-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.article .ar-body { padding:22px; }
.article .ar-meta { font-size:12px; color:var(--hs-fg-subtle); display:flex; gap:8px; align-items:center; }
.article h3 { font-size:18px; line-height:1.3; margin:10px 0 0; font-weight:700; }
.article:hover h3 { color:var(--hs-green-hover); }

/* image placeholder helper */
.imgph { position:relative; background:repeating-linear-gradient(45deg,#ececec,#ececec 14px,#f4f4f4 14px,#f4f4f4 28px); display:flex; align-items:center; justify-content:center; color:var(--hs-fg-subtle); }
.imgph .lbl { font-family:var(--hs-font-mono); font-size:11px; letter-spacing:.04em; background:rgba(255,255,255,.85); padding:5px 10px; border-radius:6px; border:1px solid var(--hs-border-subtle); text-align:center; }
.imgph.dark { background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 14px,#222 14px,#222 28px); color:rgba(255,255,255,.5); }
.imgph.dark .lbl { background:rgba(0,0,0,.5); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.7); }

/* ---- footer ---- (canonical rules mirrored from assets/styles.css so the
   homepage footer matches every other page; chrome.css adds the shared extras
   — 72px logo, BBB card, social pills, inline city links — on top.) */
.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; }
.footer h5, .footer .footer-nav-h { 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); }

/* ---- inspection modal ---- */
.modal-ov { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.6); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:24px; animation:fade .2s ease; }
@keyframes fade { from{opacity:0} to{opacity:1} }
.modal { background:#fff; border-radius:20px; width:min(540px,100%); max-height:92vh; overflow:auto; box-shadow:var(--hs-shadow-lg); animation:pop .22s cubic-bezier(.2,.7,.3,1); }
@keyframes pop { from{opacity:0; transform:translateY(12px) scale(.98)} to{opacity:1; transform:none} }
.modal-top { background:#000; color:#fff; padding:22px 26px; display:flex; align-items:center; justify-content:space-between; }
.modal-top .pill { font-size:11px; }
.modal-top .x { background:rgba(255,255,255,.12); border:0; color:#fff; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.modal-top .x:hover { background:rgba(255,255,255,.22); }
.steps { display:flex; gap:6px; padding:18px 26px 0; }
.steps .s { flex:1; height:5px; border-radius:3px; background:var(--hs-border); }
.steps .s.on { background:var(--hs-green); }
.modal-body { padding:24px 26px 28px; }
.modal-body h3 { font-family:var(--hs-font-display); font-weight:600; text-transform:uppercase; font-size:24px; }
.modal-body .sub { font-size:14px; color:var(--hs-fg-muted); margin-top:6px; }
.field { display:flex; flex-direction:column; gap:7px; margin-top:16px; }
.field label { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,0,0,.65); }
.field input, .field select { font-family:inherit; font-size:15px; padding:13px 14px; border:1.5px solid var(--hs-border); border-radius:9px; outline:none; transition:border .12s, box-shadow .12s; background:#fff; }
.field input:focus, .field select:focus { border-color:var(--hs-green); box-shadow:0 0 0 3px rgba(var(--hs-green-rgb),.15); }
.opt-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.opt { border:1.5px solid var(--hs-border); border-radius:12px; padding:16px; display:flex; gap:12px; align-items:center; transition:border .12s, background .12s; }
.opt:hover { border-color:var(--hs-green); background:#F8FEFB; }
.opt.sel { border-color:var(--hs-green); background:var(--hs-green-tint); }
.opt .oi { width:38px; height:38px; border-radius:10px; background:#fff; border:1px solid var(--hs-border-subtle); display:flex; align-items:center; justify-content:center; color:var(--hs-green-hover); }
.opt .oi svg { width:20px; height:20px; }
.opt .ol { font-weight:700; font-size:14px; }
.modal-foot { display:flex; gap:12px; margin-top:24px; }
.modal-foot .btn { flex:1; justify-content:center; }
.done-ic { width:72px; height:72px; border-radius:50%; background:var(--hs-green-tint); color:var(--hs-green); display:flex; align-items:center; justify-content:center; margin:6px auto 0; }
.done-ic svg { width:38px; height:38px; }

/* responsive (within a page) */
@media (max-width:1000px){
  .nav,.topbar .tb-left{display:none}
  .svc-grid,.rev-grid,.learn-grid{grid-template-columns:1fr 1fr}
  .why,.areas-wrap{grid-template-columns:1fr; gap:32px}
  /* city-link grid: 3 fixed columns can't shrink below ~350px and overflow narrow
     phones; drop to 2 columns so the section fits the viewport on mobile. */
  .area-grid{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
  .trust .cell:nth-child(3){border-left:0}
  .mascot-band{grid-template-columns:1fr}
  .mascot-band .m-body{padding:0 32px 40px}
  .footer .cols{grid-template-columns:1fr 1fr}
  .camo .wrap{flex-direction:column; align-items:flex-start}
  .process{grid-template-columns:1fr 1fr 1fr}
}

/* article cards are links */
a.article { display:block; text-decoration:none; color:inherit; }

/* =============================================================
   Mobile fixes — 560px / 430px breakpoints
   Audit: June 2026
   ============================================================= */

@media (max-width: 560px) {
  /* Issue 10: Process steps 5-col → 1-col on mobile */
  .process { grid-template-columns: 1fr; }

  /* Mascot band: prevent content bleed on narrow screens */
  .mascot-band { overflow:hidden; }
  .mascot-band .m-body { padding:0 16px 32px; }
  .mascot-band .m-body .lede { max-width:100% !important; }
  .mascot-band .m-body .btn { width:100%; justify-content:center; white-space:normal; }
  .mascot-band .m-body > div { flex-direction:column; }

  /* Global bleed prevention — stop any element causing horizontal scroll */
  body { overflow-x:clip; }
  section, .wrap { max-width:100%; }
  .btn { white-space:normal; }
}

@media (max-width: 430px) {
  /* Issue 3: H1 line-height smaller than font-size */
  .hero h1 { line-height: 1.1; }

  /* Issue 10: Process steps (belt + suspenders for 430px) */
  .process { grid-template-columns: 1fr; }

  /* Issue 12: Learning article grid → 1-col on smallest phones */
  .learn-grid { grid-template-columns: 1fr; }

  /* Issue 4: Footer cols → 1-col on very small screens (homepage already 2-col at 1000px) */
  .footer .cols { grid-template-columns: 1fr; }
}

/* Pending from prior fix session: rev-grid 1-col on homepage mobile */
@media (max-width: 560px) {
  .rev-grid { grid-template-columns: 1fr; }
}

/* =============================================================
   Learning articles — horizontal swipe carousel on mobile
   ============================================================= */

@media (max-width: 560px) {
  .learn-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 16px;
    padding: 4px 4px 20px;
    /* pull to viewport edge so first card sits flush */
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
  }
  .learn-grid::-webkit-scrollbar { display: none; }

  .learn-grid .article {
    flex: 0 0 82vw;
    max-width: 340px;
    scroll-snap-align: start;
    /* restore card sizing that the grid columns used to enforce */
    width: auto;
  }

  /* Make the card photo taller so cards feel bigger */
  .learn-grid .article .ph {
    aspect-ratio: 4 / 3;
    min-height: 220px;
  }
}

/* =============================================================
   Reviews — full-width divider list, manual scroll on mobile
   ============================================================= */

@media (max-width: 560px) {
  .rev-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    grid-template-columns: unset;
    /* scrollable container — show ~1.5 reviews so users know there's more */
    max-height: 72vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: y mandatory;
  }
  .rev-grid::-webkit-scrollbar { display: none; }

  .rev-grid .review {
    width: 100%;
    flex-shrink: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid var(--hs-border-subtle, #e7ece9);
    box-shadow: none;
    padding: 28px 0;
    scroll-snap-align: start;
  }
  .rev-grid .review:first-child { border-top: 1px solid var(--hs-border-subtle, #e7ece9); }
}

/* =============================================================
   Process Section — Concept C Spotlight
   ============================================================= */
.process-section{padding:80px 0}
.process-layout{display:flex;gap:2rem;align-items:stretch;margin-top:2.5rem}
.process-nav{flex:0 0 50%;display:flex;flex-direction:column;gap:5px}
.process-nav-item{flex:1;display:flex;align-items:center;gap:14px;padding:8px 16px;border:1.5px solid transparent;border-radius:10px;background:#f7f7f7;cursor:pointer;text-align:left;transition:all .25s ease;width:100%;position:relative}
.process-nav-item:hover{border-color:#1CBE72;background:#f0faf5}
.process-nav-item.active{background:#16A862;border-color:#16A862}
.pni-num{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-family:'Oswald',sans-serif;font-size:16px;font-weight:600;color:#999;transition:all .25s}
.process-nav-item.active .pni-num{background:#fff;border-color:#fff;color:#1CBE72}
.pni-text{flex:1;display:flex;flex-direction:column;gap:2px}
.pni-title{font-family:'Oswald',sans-serif;font-size:18px;letter-spacing:.06em;text-transform:uppercase;color:#444;transition:color .25s;display:block}
.process-nav-item.active .pni-title{color:#fff}
.pni-sub{font-family:'Montserrat',sans-serif;font-size:15px;color:#aaa;transition:color .25s}
.process-nav-item.active .pni-sub{color:rgba(255,255,255,.8)}
.pni-arrow{font-size:20px;color:#ccc;transition:color .25s,transform .25s;line-height:1}
.process-nav-item.active .pni-arrow{color:#fff;transform:translateX(3px)}
.process-spotlight{flex:1;position:relative;border-radius:16px;overflow:hidden;min-height:260px;display:grid}
.spotlight-panel{grid-area:1/1;display:flex;flex-direction:column;opacity:0;visibility:hidden;pointer-events:none}
.spotlight-panel.active{opacity:1;visibility:visible;pointer-events:auto;animation:spotFadeIn .4s ease forwards}
@keyframes spotFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.spotlight-img-wrap{flex:1;display:flex;align-items:flex-end;justify-content:center;position:relative;padding:1rem 1rem 0;overflow:hidden}
.spotlight-img-wrap.light{background:linear-gradient(160deg,#e8f9f0 0%,#f5fdf8 100%)}
.spotlight-img-wrap.dark{background:linear-gradient(160deg,#e8f9f0 0%,#f5fdf8 100%)}
.spotlight-img-wrap.truck{background:linear-gradient(160deg,#e8f9f0 0%,#f5fdf8 100%)}
.spotlight-img{max-height:240px;width:auto;max-width:calc(100% - 2rem);object-fit:contain;display:block;filter:drop-shadow(0 8px 24px rgba(0,0,0,.12));transition:transform .4s ease}
.spotlight-img:hover{transform:scale(1.03) translateY(-4px)}
.spotlight-img.truck-img{max-height:200px;max-width:100%}
.spotlight-badge{position:absolute;top:16px;left:16px;background:#16A862;color:#fff;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:20px}
.spotlight-caption{background:#1a1a1a;padding:1.25rem 1.5rem}
.sc-title{font-family:'Oswald',sans-serif;font-size:18px;color:#1CBE72;letter-spacing:.05em;margin-bottom:6px}
.sc-body{font-family:'Montserrat',sans-serif;font-size:13px;color:rgba(255,255,255,.75);line-height:1.65;margin:0}
.spotlight-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:rgba(255,255,255,.15)}
.spotlight-progress-bar{height:100%;background:#1CBE72;border-radius:2px;transform-origin:left center;transform:scaleX(0);transition:none}
.pni-prev,.pni-next{display:none}
@media(max-width:767px){
  .process-layout{flex-direction:column;gap:1rem}
  .process-nav{flex-direction:row;align-items:stretch;gap:0;overflow:hidden;padding-bottom:0;border-radius:12px}
  .process-nav-item{display:none;flex:1;flex-direction:row;align-items:center;justify-content:center;gap:10px;padding:14px 16px;border-radius:0;border:none;touch-action:manipulation}
  .process-nav-item.active{display:flex;background:#16A862;border-color:#16A862}
  .pni-text{display:flex}
  .pni-title{font-size:15px}
  .pni-title[data-mob]{font-size:0}
  .pni-title[data-mob]::before{content:attr(data-mob);font-size:15px}
  .pni-sub{display:none}
  .pni-arrow{display:none}
  .pni-num{width:30px;height:30px;font-size:14px;background:rgba(255,255,255,.25);border:2px solid rgba(255,255,255,.4)}
  .process-nav-item.active .pni-num{background:#fff;border-color:#fff;color:#16A862}
  .process-nav-item::after{content:none}
  .pni-prev,.pni-next{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;background:#16A862;border:none;cursor:pointer;font-size:30px;color:#fff;font-weight:700;transition:background .15s,color .15s;line-height:1;padding:0;touch-action:manipulation}
  .pni-prev{border-right:2px solid rgba(255,255,255,.2)}
  .pni-next{border-left:2px solid rgba(255,255,255,.2)}
  .pni-prev:hover,.pni-next:hover{background:#129a56;color:#fff}
  .process-spotlight{min-height:180px}
  .spotlight-img-wrap{min-height:0}
  .spotlight-img{max-height:169px;max-width:calc(100% - 2rem)}
  .sc-title{font-size:15px}
  .sc-body{font-size:12px}
}