/* Self-hosted fonts: Space Grotesk (display) + Inter (body). Variable, latin. */
@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/space-grotesk-var.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/inter-var.woff2") format("woff2");}

/* =====================================================================
   Summit Solutions Roofing & Construction
   Design system: "Slate & Copper"
   Charcoal-slate dominant · steel-blue (logo) · warm copper accent · bone canvas
   Hand-coded, no framework. One stylesheet.
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Navy base. Taken from the white-and-red CSI fleet: white surfaces, deep navy
     structure, and the logo red used only where it should pull the eye. */
  --navy-950:#060E1C; --navy-900:#0C1B33; --navy-850:#12294B; --navy-800:#1A3A66;
  --slate-950:#060E1C; --slate-900:#0C1B33; --slate-850:#12294B; --slate-800:#1A3A66;
  --slate-700:#2A4266; --slate-600:#46618A; --slate-500:#657FA6; --slate-400:#93A7C2; --slate-300:#BECCDE; --slate-200:#DCE5EF;

  /* Brand red, matched to the CSInc. logo. Used for CTAs, the emergency band,
     numbers and accents. Never as a large flat background behind body copy. */
  --red:#E01B24; --red-bright:#F5333C; --red-deep:#A9121A; --red-tint:#FDECED;

  /* The house system references --steel / --copper / --pop throughout.
     They are repointed here so the whole component library re-skins at once. */
  --steel:#E01B24; --steel-bright:#F5333C; --steel-deep:#A9121A; --steel-tint:#FDECED;
  --copper:#E01B24; --copper-bright:#F5333C; --copper-deep:#A9121A; --copper-tint:#FDECED;
  --pop:#E01B24; --pop-bright:#F5333C; --pop-deep:#A9121A; --pop-tint:#FDECED;

  --bone:#F4F7FB; --bone-2:#E9EFF7; --paper:#FFFFFF; --ink:#101B2D;
  --bg:var(--paper); --surface:#FFFFFF; --text:var(--ink); --text-muted:#5A6B84;
  --line:#E2E8F1; --line-strong:#C9D5E4;
  --font-display:"Space Grotesk", system-ui, sans-serif;
  --font-body:"Inter", system-ui, sans-serif;
  --font-mono:"Space Grotesk", ui-monospace, Menlo, monospace;
  --fs-display:clamp(2.6rem,5.6vw,4.9rem); --fs-h1:clamp(2.15rem,4.2vw,3.4rem); --fs-h2:clamp(1.85rem,3.3vw,2.8rem); --fs-h3:clamp(1.3rem,1.9vw,1.6rem); --fs-lead:clamp(1.08rem,1.4vw,1.28rem); --fs-body:1.0625rem; --fs-sm:0.925rem; --fs-eyebrow:0.78rem;
  --section-y:clamp(2.75rem,4.5vw,4.5rem); --section-y-sm:clamp(2.25rem,3.5vw,3.25rem); --gutter:clamp(1.25rem,4vw,2.5rem); --maxw:1240px; --maxw-wide:1380px; --maxw-narrow:760px;
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(12,27,51,.05),0 6px 18px rgba(12,27,51,.07); --shadow-md:0 8px 20px rgba(12,27,51,.09),0 22px 48px rgba(12,27,51,.11); --shadow-lg:0 16px 34px rgba(12,27,51,.13),0 44px 90px rgba(12,27,51,.17); --shadow-nav:0 8px 30px rgba(12,27,51,.14);
  --ease:cubic-bezier(.22,.61,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1); --transition:.3s var(--ease);
  --nav-h:76px; --call-h:60px; --topbar-h:38px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2.5px solid var(--steel); outline-offset: 3px; border-radius: 3px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
strong { font-weight: 700; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--maxw-wide); }
.container-narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--section-y); }
.section-sm { padding-block: var(--section-y-sm); }
.section-dark { background: var(--slate-900); color: var(--bone); }
.section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; }
.section-bone { background: var(--bone); }
.section-bone2 { background: var(--bone-2); }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--copper); color: #fff; padding: .7rem 1.1rem; border-radius: var(--r-sm);
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- Eyebrow / section heads ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--copper-deep);
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--copper); display: inline-block; }
.section-dark .eyebrow, .hero .eyebrow { color: var(--copper-bright); }
.section-dark .eyebrow::before, .hero .eyebrow::before { background: var(--copper-bright); }

.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head .eyebrow { margin-bottom: 1.1rem; }
.section-head p { color: var(--text-muted); font-size: var(--fs-lead); margin-top: 1.1rem; }
.section-dark .section-head p { color: var(--slate-300); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 1rem 1.6rem; border-radius: var(--r-sm); border: 1.5px solid transparent;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap; letter-spacing: .005em; position: relative; overflow: hidden;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn-primary { background: var(--copper); color: #fff; box-shadow: 0 6px 18px rgba(158,82,48,.28); }
.btn-primary:hover { background: var(--copper-deep); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(158,82,48,.34); }
.btn-dark { background: var(--slate-900); color: #fff; }
.btn-dark:hover { background: var(--slate-700); transform: translateY(-2px); }
.btn-outline { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--slate-900); background: var(--slate-900); color: #fff; transform: translateY(-2px); }
.btn-ghost-light { border-color: rgba(255,255,255,.35); color: #fff; background: rgba(255,255,255,.06); }
.btn-ghost-light:hover { background: #fff; color: var(--slate-900); border-color: #fff; transform: translateY(-2px); }
.btn-lg { padding: 1.15rem 2rem; font-size: 1.05rem; }
.btn-block { width: 100%; }
/* button shine sweep on hover */
.btn-primary::after, .btn-dark::after, .btn-ghost-light::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.30) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform .7s var(--ease); pointer-events: none; }
.btn-primary:hover::after, .btn-dark:hover::after, .btn-ghost-light:hover::after { transform: translateX(130%); }

/* image hover polish */
.split-media img { transition: transform .8s var(--ease); }
.split-media:hover img { transform: scale(1.045); }
.ba-pair img { transition: transform .7s var(--ease); }
.ba-card:hover .ba-pair img { transform: scale(1.05); }

/* project gallery grid */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.7rem,1.4vw,1.1rem); }
.gallery-item { position: relative; overflow: hidden; border-radius: var(--r-md); aspect-ratio: 4/3; box-shadow: var(--shadow-sm); display: block; width: 100%; padding: 0; font: inherit; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s var(--ease); }
.gallery-item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 52%, rgba(9,20,35,.5)); opacity: 0; transition: opacity .4s; pointer-events: none; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover::after { opacity: 1; }
.gallery-item.wide { grid-column: span 2; aspect-ratio: 16/9; }

/* hover float on all widget cards */
.feature-card, .review-card, .fin-card, .office-card, .area-card { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.feature-card:hover, .review-card:hover, .fin-card:hover, .office-card:hover, .area-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }

/* service-area cards with embedded maps */
.area-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.area-map { aspect-ratio: 16/10; background: var(--bone-2); }
.area-map iframe { width: 100%; height: 100%; display: block; border: 0; }
.area-card .body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.area-card h3 { margin-bottom: .5rem; }
.area-card p { color: var(--text-muted); font-size: var(--fs-sm); flex: 1; }
.area-card .more { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--copper-deep); font-weight: 700; font-size: .92rem; }
.area-card .more svg { width: 1.05em; height: 1.05em; transition: transform var(--transition); }
.area-card:hover .more svg { transform: translateX(4px); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8,16,28,.93); display: none; align-items: center; justify-content: center; padding: 5vh 5vw; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); cursor: default; }
.lightbox-close { position: absolute; top: 20px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.28); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-close:hover { background: rgba(255,255,255,.26); }
.gallery-item { cursor: zoom-in; }

/* contact aside (single cohesive sticky widget) */
.contact-aside { position: sticky; top: calc(var(--nav-h) + 22px); background: var(--navy-900); color: var(--bone); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.3rem); box-shadow: var(--shadow-md); overflow: hidden; }
.contact-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 90% 0%, rgba(74,144,226,.18), transparent 60%); pointer-events: none; }
.contact-aside > * { position: relative; z-index: 1; }
.contact-aside h2 { color: #fff; font-size: 1.5rem; margin-bottom: .4rem; }
.contact-aside .ca-sub { color: var(--slate-300); font-size: var(--fs-sm); margin-bottom: 1.5rem; }
.contact-aside .ca-rows { display: flex; flex-direction: column; gap: .9rem; }
.ca-row { display: flex; gap: .8rem; align-items: flex-start; }
.ca-row .ca-ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(255,255,255,.08); color: var(--copper-bright); display: flex; align-items: center; justify-content: center; }
.ca-row .ca-ic svg { width: 18px; height: 18px; }
.ca-row .ca-lbl { display: block; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--slate-400); margin-bottom: 5px; }
.ca-row a, .ca-row span { color: #fff; font-weight: 600; font-size: .98rem; }
.ca-row .ca-val { color: var(--slate-200); font-weight: 500; font-size: .92rem; }
.contact-aside .ca-divider { height: 1px; background: rgba(255,255,255,.12); margin: 1.5rem 0; }
.ca-offices { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ca-office { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: var(--r-sm); padding: .9rem 1rem; }
.ca-office h3 { color: #fff; font-family: var(--font-display); font-size: .98rem; margin-bottom: .25rem; }
.ca-office p { color: var(--slate-300); font-size: .8rem; line-height: 1.45; }
.ca-office a { color: var(--copper-bright); font-size: .78rem; font-weight: 700; }
.contact-aside .ca-rating { display: flex; align-items: center; gap: .7rem; }
.contact-aside .ca-rating .g-rate { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: #fff; }
.contact-aside .ca-rating .stars { display: inline-flex; color: #E8A93B; } .contact-aside .ca-rating .stars svg { width: 15px; height: 15px; }
.contact-aside .ca-rating small { color: var(--slate-300); font-size: .82rem; }
@media (max-width: 920px) { .contact-aside { position: static; } .ca-offices { grid-template-columns: 1fr 1fr; } }

/* video grid */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem,2vw,1.5rem); }
.video-grid.single { grid-template-columns: 1fr; max-width: 880px; margin-inline: auto; }
.video-card { position: relative; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--slate-950); aspect-ratio: 16/9; }
.video-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 620px) { .video-grid { grid-template-columns: 1fr; } }

/* ---------- Header / nav ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 12px var(--gutter);
}
.nav-shell {
  max-width: 1200px; margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .5rem .6rem .5rem 1.1rem;
  background: rgba(255,255,255,.93); border: 1px solid rgba(22,32,43,.10);
  border-radius: var(--r-md); box-shadow: 0 6px 26px rgba(15,33,56,.14);
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 42px; width: auto; }
/* desktop only: bigger logo + slightly larger nav (mobile keeps 42px) */
@media (min-width: 921px) {
  .nav-logo img { height: 56px; }
  .nav-shell { padding-top: .6rem; padding-bottom: .6rem; padding-left: 1.3rem; }
  .nav-links > ul > li > a, .nav-phone { font-size: .98rem; }
}
.nav-links { display: flex; align-items: center; gap: .25rem; }
.nav-links > ul > li > a, .nav-toggle-sub {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .55rem .7rem; border-radius: var(--r-sm); color: var(--slate-700);
  font-size: .94rem; font-weight: 600; transition: color var(--transition), background var(--transition);
}
.nav-links > ul > li > a:hover, .nav-links > ul > li > a[aria-current="page"], .nav-toggle-sub:hover { color: var(--ink); background: rgba(15,33,56,.06); }
.nav-links > ul > li > a[aria-current="page"] { color: var(--steel-deep); }
.nav-links a svg { width: .8em; height: .8em; flex: none; opacity: .65; }

/* dropdown */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 230px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: .5rem; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: .22s var(--ease);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: .6rem .8rem; border-radius: var(--r-sm); color: var(--slate-700); font-size: .93rem; font-weight: 600; }
.dropdown a:hover { background: var(--bone); color: var(--ink); }
.dropdown .dd-label { color: var(--slate-400); font-size: .73rem; letter-spacing: .12em; text-transform: uppercase; padding: .5rem .8rem .2rem; }

.nav-cta { display: flex; align-items: center; gap: .6rem; }
.nav-phone { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 700; font-size: .95rem; padding: .55rem .6rem; }
.nav-phone svg { color: var(--steel); width: 1.05em; }
.nav-cta .btn { padding: .7rem 1.15rem; }

.nav-burger { display: none; width: 46px; height: 46px; border-radius: var(--r-sm); align-items: center; justify-content: center; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: var(--transition); }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); transition: var(--transition); }
.nav-burger span::before { top: -7px; } .nav-burger span::after { top: 7px; }
body.menu-open .nav-burger span { background: transparent; }
body.menu-open .nav-burger span::before { top: 0; transform: rotate(45deg); }
body.menu-open .nav-burger span::after { top: 0; transform: rotate(-45deg); }

/* mobile drawer */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 99; background: var(--slate-950);
  padding: calc(var(--nav-h) + 24px) var(--gutter) 2rem; overflow-y: auto;
  transform: translateX(100%); transition: transform .38s var(--ease-expo); visibility: hidden; color: var(--bone);
}
body.menu-open .mobile-drawer { transform: translateX(0); visibility: visible; }
.mobile-drawer a, .mobile-nav details > summary { color: var(--bone); }
.mobile-nav { display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav > a, .mobile-nav details > summary {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center;
}
.mobile-nav details summary { list-style: none; cursor: pointer; }
.mobile-nav details summary::-webkit-details-marker { display: none; }
.mobile-nav summary .chev svg { width: 1.1rem; height: 1.1rem; }
.mobile-nav details[open] summary .chev { transform: rotate(180deg); }
.mobile-nav details .sub { padding: .4rem 0 .8rem; display: flex; flex-direction: column; gap: .1rem; }
.mobile-nav details .sub a { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--slate-300); padding: .55rem .25rem; border: none; }
.mobile-drawer .drawer-cta { margin-top: 2rem; display: flex; flex-direction: column; gap: .8rem; }
.mobile-drawer .drawer-meta { margin-top: 2rem; color: var(--slate-400); font-size: .92rem; line-height: 1.9; }

/* ---------- Hero (full-bleed background image, centered text) ---------- */
.hero { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; background: var(--navy-900); overflow: hidden; }
.hero.hero-sm { min-height: 54vh; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* hero image is sized for parallax travel from the start (in base CSS), so applying the
   effect never resizes/shifts the layout. JS only sets a transform, which CLS ignores. */
.hero-bg img { position: absolute; inset-inline: 0; top: -14%; width: 100%; height: 128%; object-fit: cover; will-change: transform; }

/* subtle card scale-pop reveal + auto-stagger inside grids */
html.js :is(.svc-card,.feature-card,.review-card,.fin-card,.step,.ba-card,.video-card,.area-card,.gallery-item).reveal { transform: translateY(18px) scale(.975); }
html.js :is(.svc-card,.feature-card,.review-card,.fin-card,.step,.ba-card,.video-card,.area-card,.gallery-item).reveal.in { transform: none; }
html.js :is(.cards-2,.cards-3,.cards-4,.ba-grid,.fin-grid,.steps,.video-grid,.gallery-grid) > .reveal:nth-child(2) { transition-delay: .06s; }
html.js :is(.cards-2,.cards-3,.cards-4,.ba-grid,.fin-grid,.steps,.video-grid,.gallery-grid) > .reveal:nth-child(3) { transition-delay: .12s; }
html.js :is(.cards-2,.cards-3,.cards-4,.ba-grid,.fin-grid,.steps,.video-grid,.gallery-grid) > .reveal:nth-child(4) { transition-delay: .18s; }
html.js :is(.cards-2,.cards-3,.cards-4,.ba-grid,.fin-grid,.steps,.video-grid,.gallery-grid) > .reveal:nth-child(5) { transition-delay: .24s; }
html.js :is(.cards-2,.cards-3,.cards-4,.ba-grid,.fin-grid,.steps,.video-grid,.gallery-grid) > .reveal:nth-child(6) { transition-delay: .30s; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(178deg, rgba(8,18,32,.80) 0%, rgba(8,18,32,.46) 40%, rgba(8,18,32,.74) 100%); }
.hero-inner {
  position: relative; z-index: 2; width: 100%; max-width: 900px; margin-inline: auto;
  padding: calc(var(--nav-h) + 2.5rem) var(--gutter) 2.5rem;
  display: flex; flex-direction: column; align-items: center;
}
.hero .breadcrumb { justify-content: center; margin-bottom: 1rem; }
.hero .eyebrow { justify-content: center; margin-bottom: 1.2rem; }
.hero h1 { font-size: var(--fs-display); color: #fff; max-width: 17ch; text-shadow: 0 2px 30px rgba(0,0,0,.25); }
.hero.hero-sm h1 { font-size: var(--fs-h1); max-width: 22ch; }
.hero h1 .accent { color: var(--copper-bright); }
.hero-lead { font-size: var(--fs-lead); color: rgba(255,255,255,.88); margin-top: 1.3rem; max-width: 620px; }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-top: 2rem; }
.hero-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; margin-top: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.18); }
.hero-trust .ht-item { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.9); }
.hero-trust .ht-item svg { color: var(--copper-bright); width: 1.3rem; height: 1.3rem; flex: none; }
.hero-trust .ht-item strong { color: #fff; font-weight: 800; }
.hero-trust .ht-item .stars { display: inline-flex; gap: 1px; }
.hero-trust .ht-item .stars svg { width: .95rem; height: .95rem; color: #E8A93B; }

/* Contact "schedule a storm inspection" hero (Miller-Storm-inspired) */
.hero-schedule::after { background: linear-gradient(178deg, rgba(8,18,32,.86) 0%, rgba(8,18,32,.58) 38%, rgba(8,18,32,.90) 100%); }
.hero-schedule h1 { text-transform: uppercase; letter-spacing: -.01em; max-width: 20ch; }
.hero-careers { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.15rem; color: rgba(255,255,255,.85); font-weight: 600; font-size: .95rem; }
.hero-careers svg { width: 1.05rem; height: 1.05rem; transition: transform .2s var(--ease); }
.hero-careers:hover { color: #fff; }
.hero-careers:hover svg { transform: translateX(3px); }
#schedule { scroll-margin-top: calc(var(--nav-h) + 1rem); }

/* ---------- Strip / marquee ---------- */
.trust-strip { background: var(--bone); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-strip .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 2.6rem; padding-block: 1.4rem; }
.trust-strip img { height: 46px; width: auto; opacity: .92; filter: saturate(1.05); }
.trust-strip .ts-label { color: var(--slate-500); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Stats ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(1.6rem,3vw,2.5rem) 1rem; border-right: 1px solid var(--line); }
.stat:last-child { border-right: none; }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.6rem,5vw,3.7rem); color: var(--ink); line-height: 1; letter-spacing: -.03em; display: inline-flex; align-items: baseline; }
.section-dark .stat .num { color: #fff; }
.stat .num .suf { font-size: .42em; color: var(--copper); font-weight: 800; margin-left: .06em; }
.stat .lbl { margin-top: .75rem; font-size: .92rem; font-weight: 600; color: var(--text-muted); }
.section-dark .stat .lbl { color: var(--slate-300); }
.stats-divider { border: none; border-top: 1px solid var(--line); margin: clamp(2rem,4vw,3rem) 0 0; }

/* ---------- Service cards (equal grid) ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem,2.2vw,1.8rem); }
.cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem,2.4vw,2rem); }
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,1.8vw,1.5rem); }

.svc-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.svc-card .media { position: relative; aspect-ratio: 16/11; overflow: hidden; }
.svc-card .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.svc-card:hover .media img { transform: scale(1.05); }
.svc-card .media .num {
  position: absolute; top: 12px; left: 12px; width: 38px; height: 38px; border-radius: var(--r-sm);
  background: rgba(20,24,29,.78); color: #fff; backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: 600; font-size: .9rem;
}
.svc-card .body { padding: 1.5rem 1.5rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.svc-card h3 { margin-bottom: .55rem; }
.svc-card p { color: var(--text-muted); font-size: var(--fs-sm); flex: 1; }
.svc-card .more { margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem; color: var(--copper-deep); font-weight: 700; font-size: .92rem; }
.svc-card .more svg { width: 1.05em; height: 1.05em; transition: transform var(--transition); }
.svc-card:hover .more svg { transform: translateX(4px); }

/* feature list card (icon rows) */
.feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.7rem; box-shadow: var(--shadow-sm); height: 100%; }
.feature-card .fc-icon { width: 48px; height: 48px; border-radius: var(--r-sm); background: var(--copper-tint); color: var(--copper-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.feature-card .fc-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.feature-card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Split feature (image + text) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 5/4; }
.split-media img { width: 100%; height: 100%; object-fit: cover; }
.split-copy .eyebrow { margin-bottom: 1rem; }
.split-copy h2 { margin-bottom: 1.1rem; }
.split-copy p { color: var(--text-muted); margin-bottom: 1rem; }
.section-dark .split-copy p { color: var(--slate-300); }
.check-list { display: flex; flex-direction: column; gap: .8rem; margin: 1.5rem 0; }
.check-list li { display: flex; gap: .75rem; align-items: flex-start; font-weight: 600; }
.check-list li svg { flex: none; width: 22px; height: 22px; color: var(--copper); margin-top: 2px; }
.section-dark .check-list li svg { color: var(--copper-bright); }

/* ---------- Before / After ---------- */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem,2.2vw,1.8rem); }
.ba-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ba-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.ba-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; }
.ba-pair figure { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.ba-pair img { width: 100%; height: 100%; object-fit: cover; }
.ba-pair figure:first-child::after { content: "Before"; }
.ba-pair figure:last-child::after { content: "After"; }
.ba-pair figure::after {
  position: absolute; left: 10px; top: 10px; font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; padding: .3rem .6rem; border-radius: var(--r-xs); color: #fff;
}
.ba-pair figure:first-child::after { background: rgba(20,24,29,.82); }
.ba-pair figure:last-child::after { background: var(--copper); }
.ba-card .ba-cap { padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ba-card .ba-cap .t { font-weight: 700; font-size: .98rem; }
.ba-card .ba-cap .loc { font-size: .85rem; color: var(--text-muted); }

/* interactive drag slider (homepage feature) */
.ba-slider { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); aspect-ratio: 16/10; user-select: none; touch-action: none; }
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba-slider .after-img { clip-path: inset(0 0 0 50%); }
.ba-slider .ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.ba-slider .ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--slate-700); }
.ba-slider .ba-tag { position: absolute; top: 14px; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .65rem; border-radius: var(--r-xs); color: #fff; }
.ba-slider .ba-tag.before { left: 14px; background: rgba(20,24,29,.82); }
.ba-slider .ba-tag.after { right: 14px; background: var(--copper); }

/* ---------- Reviews ---------- */
.review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.8rem; box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; }
.review-card .stars { display: flex; gap: 2px; color: #E8A93B; margin-bottom: 1rem; }
.review-card .stars svg { width: 18px; height: 18px; }
.review-card .quote { font-size: 1.02rem; line-height: 1.6; flex: 1; }
.review-card .reviewer { margin-top: 1.3rem; display: flex; align-items: center; gap: .8rem; }
.review-card .ava { width: 42px; height: 42px; border-radius: 50%; background: var(--steel); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); }
.review-card .rv-name { font-weight: 700; font-size: .96rem; }
.review-card .rv-meta { font-size: .82rem; color: var(--text-muted); }
.google-pill { display: inline-flex; align-items: center; gap: .7rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: .6rem 1.1rem; box-shadow: var(--shadow-sm); font-weight: 600; }
.google-pill .g-rate { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.google-pill .stars { display: inline-flex; color: #E8A93B; } .google-pill .stars svg { width: 16px; height: 16px; }

/* ---------- Financing ---------- */
.fin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem,2.2vw,1.8rem); }
.fin-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.8rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.fin-card .fin-logo { height: 38px; margin-bottom: 1.2rem; display: flex; align-items: center; }
.fin-card .fin-logo img { height: 100%; width: auto; }
.fin-card ul { display: flex; flex-direction: column; gap: .6rem; margin-top: .3rem; }
.fin-card ul li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--fs-sm); color: var(--text-muted); }
.fin-card ul li svg { flex: none; width: 18px; height: 18px; color: var(--steel); margin-top: 3px; }

/* ---------- Process steps ---------- */
/* floating step cards (no connector lines) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2vw,1.5rem); counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.6rem 1.5rem 1.7rem; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step::before { counter-increment: step; content: "0" counter(step); display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--copper-tint); color: var(--copper-deep); font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-bottom: 1.1rem; }
.step h3 { font-size: 1.12rem; margin-bottom: .4rem; }
.step p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.35rem 0; text-align: left; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem,1.6vw,1.22rem); color: var(--ink); }
.faq-q .ic { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.faq-q .ic svg { width: 16px; height: 16px; transition: transform var(--transition); }
.faq-item.open .faq-q .ic { background: var(--copper); border-color: var(--copper); color: #fff; }
.faq-item.open .faq-q .ic svg { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease); }
.faq-a-inner { padding: 0 0 1.4rem; color: var(--text-muted); max-width: 70ch; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--slate-900); color: var(--bone); overflow: hidden; border-radius: var(--r-lg); }
.cta-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(58,114,176,.20), transparent 60%); }
.cta-band .cta-inner { position: relative; z-index: 2; padding: clamp(2.5rem,5vw,4rem); display: grid; grid-template-columns: 1.4fr auto; gap: 2rem; align-items: center; }
.cta-band h2 { color: #fff; margin-bottom: .7rem; }
.cta-band p { color: var(--slate-200); max-width: 540px; }
.cta-band .cta-actions { display: flex; flex-direction: column; gap: .8rem; min-width: 220px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { position: relative; background: var(--slate-900); color: var(--bone); padding: calc(var(--nav-h) + clamp(3rem,6vw,4.5rem)) 0 clamp(2.5rem,5vw,4rem); overflow: hidden; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(100% 80% at 90% 0%, rgba(58,114,176,.18), transparent 55%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 2; }
.breadcrumb { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: var(--slate-400); margin-bottom: 1.3rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--slate-300); } .breadcrumb a:hover { color: #fff; }
.breadcrumb .sep { color: var(--slate-600); }
.page-hero h1 { color: #fff; font-size: var(--fs-h1); max-width: 16ch; }
.page-hero p { color: var(--slate-200); font-size: var(--fs-lead); max-width: 60ch; margin-top: 1.2rem; }
.page-hero .ph-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }

/* prose */
.prose p { margin-bottom: 1.1rem; color: var(--text-muted); }
.prose h2 { margin: 2.2rem 0 1rem; }
.prose h3 { margin: 1.6rem 0 .7rem; }
.prose ul.bullets { display: flex; flex-direction: column; gap: .7rem; margin: 1.2rem 0; }
.prose ul.bullets li { display: flex; gap: .7rem; align-items: flex-start; }
.prose ul.bullets li svg { flex: none; width: 20px; height: 20px; color: var(--copper); margin-top: 4px; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,4vw,3.5rem); align-items: stretch; }
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.6rem,3vw,2.4rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .45rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--paper); transition: border-color var(--transition), box-shadow var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--steel); box-shadow: 0 0 0 3px rgba(58,114,176,.15); }
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-note { font-size: .82rem; color: var(--text-muted); margin-top: .5rem; }

.info-block { margin-bottom: 1.6rem; }
.info-block .lbl { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-deep); margin-bottom: .5rem; }
.info-row { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: .7rem; }
.info-row svg { flex: none; width: 20px; height: 20px; color: var(--steel); margin-top: 3px; }
.info-row a { font-weight: 600; }
.office-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); }
.office-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.office-card p { font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------- Footer ---------- */
.site-footer { background: var(--slate-950); color: var(--slate-300); padding-top: clamp(3.5rem,6vw,5rem); }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand img { height: 54px; width: auto; margin-bottom: 1.1rem; }
.footer-brand p { font-size: .92rem; color: #97A8BA; max-width: 32ch; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.3rem; }
.footer-social a { width: 40px; height: 40px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.footer-social a:hover { background: var(--copper); border-color: var(--copper); color: #fff; transform: translateY(-2px); }
.footer-social svg { width: 18px; height: 18px; }
.footer-col h3 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: #98A9BB; margin-bottom: 1.1rem; }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col a { font-size: .94rem; color: var(--slate-300); } .footer-col a:hover { color: #fff; }
.footer-contact .fc-row { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .8rem; font-size: .94rem; }
.footer-contact .fc-row svg { flex: none; width: 18px; height: 18px; color: var(--copper-bright); margin-top: 3px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.6rem; font-size: .85rem; color: #8E9FB1; }
.footer-bottom a { color: #9AABBD; } .footer-bottom a:hover { color: var(--slate-200); }
.footer-legal a { margin: 0 .15rem; }

/* Payments strip (card acceptance) */
.footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.4rem; padding: 1.8rem 0 .4rem; }
.card-marks { display: inline-flex; gap: .4rem; flex: none; }
.card-mark { width: 40px; height: 27px; display: block; }
.footer-pay .fp-note { margin: 0; font-size: .82rem; line-height: 1.55; color: #98A9BB; max-width: 64ch; }

/* Legal document pages (privacy, terms) */
.legal-wrap { padding-top: calc(var(--nav-h) + 2.4rem); }
.legal-doc { max-width: 820px; margin-inline: auto; }
.legal-doc .eyebrow { margin-bottom: 1rem; }
.legal-doc h1 { font-size: var(--fs-h1); }
.legal-doc .legal-updated { color: #6b7787; font-size: .9rem; margin: .7rem 0 2.2rem; }
.legal-doc h2 { font-size: 1.32rem; margin-top: 2.4rem; margin-bottom: .7rem; color: var(--ink); }
.legal-doc p, .legal-doc li { color: #3f4b5b; line-height: 1.72; }
.legal-doc p { margin-bottom: 1rem; }
.legal-doc ul { margin: 0 0 1.1rem 1.25rem; list-style: disc; }
.legal-doc li { margin-bottom: .45rem; }
.legal-doc a { color: var(--copper-deep); text-decoration: underline; }
.legal-doc .card-marks { margin: .3rem 0 1.2rem; }

/* ---------- Sticky mobile call bar ---------- */
.call-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 95; display: none; grid-template-columns: 1fr 1fr; background: var(--slate-900); border-top: 1px solid rgba(255,255,255,.1); }
.call-bar a { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem; font-weight: 700; color: #fff; font-size: .98rem; }
.call-bar a.cb-call { background: var(--copper); }
.call-bar a svg { width: 1.15em; height: 1.15em; }

/* ---------- Reveal animation (gated behind .js so no-JS / crawlers always see content) ---------- */
html.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-expo), transform .7s var(--ease-expo); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal.d1 { transition-delay: .08s; } html.js .reveal.d2 { transition-delay: .16s; } html.js .reveal.d3 { transition-delay: .24s; } html.js .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* ---------- Utilities ---------- */
.text-center { text-align: center; }
.mt-sm { margin-top: 1rem; } .mt-md { margin-top: 1.5rem; } .mt-lg { margin-top: 2rem; }
.mb-lg { margin-bottom: 2rem; }
.muted { color: var(--text-muted); }
.copper { color: var(--copper-deep); }
.grid-gap { gap: clamp(1.2rem,2.4vw,2rem); }
.divider { height: 1px; background: var(--line); border: none; }
.pill-tag { display: inline-block; background: var(--copper-tint); color: var(--copper-deep); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: .35rem .75rem; border-radius: var(--r-pill); }
.section-dark .pill-tag { background: rgba(219,131,80,.18); color: var(--copper-bright); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } .gallery-item.wide { grid-column: span 2; } }
@media (max-width: 920px) {
  .nav-links, .nav-phone, .nav-cta .btn { display: none; }
  .nav-burger { display: flex; }
  .cards-3, .ba-grid, .fin-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step::after { display: none; }
  .split { grid-template-columns: 1fr; gap: 2rem; }
  .split.reverse .split-media { order: 0; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-band .cta-inner { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2) { border-right: none; }
  .stat:nth-child(1), .stat:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  :root { --nav-h: 70px; }
  body { padding-bottom: var(--call-h); }
  .call-bar { display: grid; }
  .site-footer { padding-bottom: calc(var(--call-h) + 1rem); }
}
@media (max-width: 560px) {
  .cards-3, .cards-2, .cards-4, .ba-grid, .fin-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-cta .btn, .ph-cta .btn { width: 100%; }
}


/* =====================================================================
   A TEAM brand adjustments (over the Summit base)
   navy + sky-cyan professional base · hot-pink personality pops · bubbly radii
   ===================================================================== */
.eyebrow { color: var(--pop-deep); }
.eyebrow::before { background: var(--pop); }
.section-dark .eyebrow, .hero .eyebrow { color: var(--pop-bright); }
.section-dark .eyebrow::before, .hero .eyebrow::before { background: var(--pop-bright); }
.hero h1 .accent, .page-hero h1 .accent { color: var(--pop-bright); }
.btn-primary { box-shadow: 0 8px 20px rgba(30,136,201,.30); }
.btn-primary:hover { box-shadow: 0 12px 28px rgba(30,136,201,.40); }
.btn { border-radius: var(--r-pill); }
/* floating glass nav — logo left · links centered · CTA right */
.nav-shell { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: var(--r-pill); position: relative; }
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 44px; }
.nav-links { position: absolute; left: 50%; transform: translateX(-50%); }
@media (min-width: 921px) { .nav-logo img { height: 54px; } }
@media (max-width: 920px) { .nav-shell { display: flex; justify-content: space-between; } }
/* soft pop accents */
.svc-card .media .num { background: rgba(11,30,61,.85); color: #fff; }
/* CTA band optional background image (light, transparent) */
.cta-band .cta-bg { position: absolute; inset: 0; z-index: 0; opacity: .16; }
.cta-band .cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .cta-inner { position: relative; z-index: 2; }
.google-pill .g-rate, .review-card .ava { background: var(--steel); }
.faq-item.open .faq-q .ic { background: var(--pop); border-color: var(--pop); }

/* service-card media fallback (navy icon block) + bundle card */
.svc-card .media-fill { width: 100%; height: 100%; background: linear-gradient(135deg, var(--navy-800), var(--navy-950)); display: grid; place-items: center; }
.svc-card .media-fill svg { width: 54px; height: 54px; color: var(--pop-bright); }
.svc-card--bundle { background: var(--navy-900); border-color: transparent; }
.svc-card--bundle .body { padding: 1.9rem 1.7rem; justify-content: center; }
.svc-card--bundle h3 { color: #fff; }
.svc-card--bundle p { color: var(--slate-300); }
.svc-card--bundle .b-ic { width: 52px; height: 52px; border-radius: var(--r-md); background: rgba(255,255,255,.1); color: var(--pop-bright); display: grid; place-items: center; margin-bottom: 1.1rem; }
.svc-card--bundle .b-ic svg { width: 26px; height: 26px; }
.svc-card--bundle .more { color: var(--pop-bright); margin-top: 1.2rem; }

/* Area chips — "Where we work" */
.area-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; max-width: 940px; margin: 2.2rem auto 0; padding: 0; }
.area-chips li { list-style: none; padding: .55rem 1.15rem; border: 1px solid var(--line-strong, #d7dce6); border-radius: 999px; background: #fff; font-family: var(--font-display, inherit); font-weight: 600; font-size: .92rem; color: var(--navy-900, #0B1E3D); transition: border-color var(--transition), color var(--transition); }
.area-chips li:hover { border-color: var(--pop, #2FA8E0); color: var(--pop-deep, #1B7FB5); }
.section-dark .area-chips li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }
/* team card (about) */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem,2.4vw,1.8rem); }
.team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.8rem; box-shadow: var(--shadow-sm); text-align: center; }
.team-card .ava { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--steel), var(--copper)); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; }
.team-card h3 { font-size: 1.2rem; }
.team-card .role { color: var(--pop-deep); font-weight: 700; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; margin: .3rem 0 .7rem; }
.team-card p { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 760px){ .team-grid { grid-template-columns: 1fr; max-width:420px; margin-inline:auto; } }


/* =====================================================================
   CSI PLUMBING layer
   The white-and-red fleet translated to the web: white chrome, deep navy
   structure, logo red reserved for action. Adds the components this site
   introduces on top of the shared house system.
   ===================================================================== */

/* ---------- Top utility bar ---------- */
.topbar { background: var(--navy-900); color: var(--slate-200); font-size: .8rem; line-height: 1; position: relative; z-index: 60; }
.topbar-in { display: flex; align-items: center; gap: 1.6rem; height: var(--topbar-h); }
.tb-item { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.tb-item svg { width: 15px; height: 15px; color: var(--red-bright); flex: none; }
.topbar .tb-phone { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; color: #fff; letter-spacing: .01em; }
.topbar .tb-phone svg { width: 15px; height: 15px; color: var(--red-bright); }
.topbar .tb-phone:hover { color: var(--red-bright); }
@media (max-width: 860px) { .tb-hide-sm { display: none; } .topbar-in { gap: 1rem; } }

/* ---------- Logo lockup ---------- */
.nav-logo { display: inline-flex; align-items: center; gap: .7rem; }
.nav-logo img { height: 42px; width: auto; }
.nav-logo-txt { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo-txt b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.nav-logo-txt i { font-style: normal; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-top: 2px; }
@media (max-width: 1080px) { .nav-logo-txt { display: none; } .nav-logo img { height: 40px; } }
.site-footer .footer-brand img { height: 62px !important; width: auto; }
.fb-legal { font-family: var(--font-display); font-weight: 700; color: #fff; margin: .9rem 0 .4rem !important; font-size: 1.02rem; }
.fb-lic { display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem !important; font-size: .84rem !important; color: var(--slate-300) !important; }
.fb-lic svg { width: 17px; height: 17px; color: var(--red-bright); flex: none; }
.footer-quick { margin-top: 1.1rem; font-size: .86rem; color: var(--slate-400); }
.footer-quick a { color: var(--slate-300); text-decoration: underline; text-underline-offset: 2px; }
.footer-quick a:hover { color: #fff; }

/* ---------- Header phone block ---------- */
.nav-phone { display: inline-flex; align-items: center; gap: .55rem; padding-right: .9rem; margin-right: .3rem; border-right: 1px solid var(--line); }
.nav-phone svg { width: 26px; height: 26px; color: var(--red); flex: none; }
.nav-phone span { display: flex; flex-direction: column; line-height: 1.1; }
.nav-phone i { font-style: normal; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; }
.nav-phone b { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.nav-phone:hover b { color: var(--red); }
@media (max-width: 1180px) { .nav-phone { display: none; } }

/* ---------- Hero ---------- */
.hero::after {
  background: linear-gradient(182deg, rgba(6,14,28,.62) 0%, rgba(6,14,28,.66) 40%, rgba(6,14,28,.92) 100%);
}
.hero h1 .accent { color: var(--red-bright); }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.15rem;
  background: var(--red); color: #fff; font-size: .78rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: .5rem .95rem; border-radius: var(--r-pill);
}
.hero-badge svg { width: 15px; height: 15px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: 1.9rem; }
.hero-trust li { display: inline-flex; align-items: center; gap: .45rem; color: #E6EDF7; font-size: .93rem; font-weight: 500; }
.hero-trust svg { width: 17px; height: 17px; color: var(--red-bright); flex: none; }

/* ---------- Page hero with a photo ---------- */
.page-hero--photo { background: var(--navy-950); }
.page-hero--photo .ph-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero--photo .ph-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .34; }
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(96deg, rgba(6,14,28,.90) 0%, rgba(6,14,28,.72) 48%, rgba(6,14,28,.52) 100%);
}
.page-hero--photo .container { position: relative; z-index: 2; }
.page-hero h1 .accent { color: var(--red-bright); }
.page-hero .ph-cta .btn-ghost-light { border-color: rgba(255,255,255,.4); color: #fff; }
.page-hero .ph-cta .btn-ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--navy-900); color: #fff; padding: 1.35rem 0; }
.trust-strip ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem 2rem; }
.trust-strip li { display: flex; align-items: center; gap: .8rem; }
.trust-strip li > svg { width: 26px; height: 26px; color: var(--red-bright); flex: none; }
.trust-strip li > span { display: flex; flex-direction: column; line-height: 1.25; font-size: .84rem; color: var(--slate-300); }
.trust-strip b { font-family: var(--font-display); font-size: .99rem; color: #fff; }
@media (max-width: 900px) { .trust-strip ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .trust-strip ul { grid-template-columns: 1fr; } }

/* ---------- Service cards ---------- */
.svc-card .media--mark {
  background: linear-gradient(140deg, var(--navy-850), var(--navy-950) 70%);
  display: grid; place-items: center; aspect-ratio: 640/440; position: relative;
}
.svc-card .media--mark .mk { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: rgba(224,27,36,.16); }
.svc-card .media--mark .mk svg { width: 34px; height: 34px; color: var(--red-bright); }
.svc-card .body .more { color: var(--red-deep); }
.svc-card:hover .body .more { color: var(--red); }
.svc-card .media .num { background: var(--red); color: #fff; }

/* ---------- Split variants ---------- */
.split--rev { direction: rtl; }
.split--rev > * { direction: ltr; }
@media (max-width: 900px) { .split--rev { direction: ltr; } }
.split-copy--panel {
  background: var(--bone); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.6rem,3vw,2.3rem); align-self: start;
}
.split-copy--panel h3 { font-size: 1.22rem; margin-bottom: 1rem; }

/* ---------- Feature cards ---------- */
.feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem,2.6vw,2rem); box-shadow: var(--shadow-sm); }
.feature-card .fc-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red-tint); margin-bottom: 1rem; }
.feature-card .fc-ic svg { width: 22px; height: 22px; color: var(--red); }
.feature-card h3 { font-size: 1.14rem; margin-bottom: .55rem; }
.feature-card p { color: var(--text-muted); font-size: var(--fs-sm); }
.feature-card--dark { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }
.feature-card--dark h3 { color: #fff; }
.feature-card--dark p { color: var(--slate-300); }
.feature-card--dark .fc-ic { background: rgba(224,27,36,.2); }
.feature-card--dark .fc-ic svg { color: var(--red-bright); }

/* ---------- Coupons ---------- */
.coupon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.coupon {
  position: relative; background: #fff; border: 2px dashed var(--red); border-radius: var(--r-md);
  padding: 1.7rem 1.3rem; text-align: center; display: flex; flex-direction: column; align-items: center;
}
.coupon .cp-amt { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem,4.4vw,3.1rem); line-height: 1; color: var(--red); letter-spacing: -.03em; }
.coupon .cp-off { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-top: .55rem; line-height: 1.25; }
.coupon .cp-detail { color: var(--text-muted); font-size: var(--fs-sm); margin-top: .8rem; }
.coupon .cp-lic { margin-top: auto; padding-top: 1.1rem; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.coupon--lg { padding: 2.1rem 1.6rem; min-height: 300px; }
@media (max-width: 1020px) { .coupon-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .coupon-grid { grid-template-columns: 1fr; } }

/* ---------- Areas ---------- */
.area-chips li { border: 1px solid var(--line-strong); }
.area-chips li:hover { border-color: var(--red); color: var(--red-deep); }
.area-chips--sm { margin-top: 1rem; }
.area-chips--sm li { font-size: .82rem; padding: .35rem .7rem; }
.area-chips--dark li { border-color: rgba(255,255,255,.22); color: var(--slate-200); background: rgba(255,255,255,.04); }
.area-chips--dark li:hover { border-color: var(--red-bright); color: #fff; }
.area-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(1.5rem,2.6vw,2rem); box-shadow: var(--shadow-sm); }
.area-card h3 { font-size: 1.2rem; margin-bottom: .55rem; }
.area-card p { color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Contact aside ---------- */
.ca-row { display: flex; gap: .95rem; padding: 1.05rem 0; border-top: 1px solid var(--line); }
.ca-row:first-of-type { border-top: none; }
.ca-row .ca-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--red-tint); flex: none; }
.ca-row .ca-ic svg { width: 20px; height: 20px; color: var(--red); }
.ca-row > div { display: flex; flex-direction: column; line-height: 1.35; }
.ca-row b { font-family: var(--font-display); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ca-row a, .ca-row > div > span { font-size: 1.06rem; font-weight: 600; color: var(--ink); margin-top: .15rem; }
.ca-row a:hover { color: var(--red); }
.ca-row i { font-style: normal; font-size: .86rem; color: var(--text-muted); margin-top: .2rem; font-weight: 400; }

/* ---------- FAQ ---------- */
.faq-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; transition: transform var(--transition); }
.faq-ic svg { width: 18px; height: 18px; color: var(--red); }
.faq-q[aria-expanded="true"] .faq-ic { transform: rotate(180deg); }

/* ---------- Misc ---------- */
.center-btn { display: flex; justify-content: center; margin-top: 2.2rem; }
.dont-see-line { margin-top: 1.7rem; color: var(--text-muted); font-size: var(--fs-body); text-align: center; }
.dont-see-line a { color: var(--red-deep); text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.dont-see-line a:hover { color: var(--red); }
.dont-see-line--dark { color: var(--slate-300); }
.dont-see-line--dark a { color: var(--red-bright); }
.allsvc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.allsvc { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; font-weight: 500; font-size: .97rem; }
.allsvc .as-ic { display: inline-flex; flex: none; }
.allsvc .as-ic svg { width: 18px; height: 18px; color: var(--red); }
@media (max-width: 900px) { .allsvc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .allsvc-grid { grid-template-columns: 1fr; } }
.step h3::before { background: var(--red) !important; }
.section-dark .section-head h2 { color: #fff; }
.section-dark .section-head p { color: var(--slate-300); }
.muted { color: var(--text-muted); }

/* ---------- Call bar (mobile) ---------- */
.call-bar a:first-child { background: var(--red); color: #fff; }
.call-bar a:last-child { background: var(--navy-900); color: #fff; }

/* ---------- Form ---------- */
.csi-form .field input, .csi-form .field select, .csi-form .field textarea { width: 100%; }
.csi-form button[type="submit"] { margin-top: .4rem; }

/* ---------- Fixed topbar + header stack ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 101; transition: transform .28s var(--ease); }
.site-header { top: var(--topbar-h); transition: top .28s var(--ease); }
body.scrolled .topbar { transform: translateY(-100%); }
body.scrolled .site-header { top: 0; }
.hero { padding-top: calc(var(--topbar-h) + var(--nav-h)); }
.page-hero { padding-top: calc(var(--topbar-h) + var(--nav-h) + clamp(3rem,6vw,4.5rem)); }
@media (prefers-reduced-motion: reduce) { .topbar, .site-header { transition: none; } }
/* Secondary CTA on dark photography needs a real surface behind it */
.hero .btn-ghost-light, .cta-band .btn-ghost-light { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px); }
.hero .btn-ghost-light:hover, .cta-band .btn-ghost-light:hover { background: #fff; color: var(--navy-900); border-color: #fff; }

/* ---------- Height-matched splits (house standard) ---------- */
.split { align-items: stretch; }
.split-media { aspect-ratio: auto; min-height: clamp(300px, 34vw, 460px); }
.split-copy { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) { .split-media { min-height: 240px; } }

/* ---------- Eyebrow contrast on dark surfaces ---------- */
.cta-band .eyebrow, .section-dark .eyebrow, .page-hero .eyebrow, .trust-strip .eyebrow { color: var(--red-bright); }
.cta-band .eyebrow::before, .section-dark .eyebrow::before, .page-hero .eyebrow::before { background: var(--red-bright); }

/* ---------- CTA band ---------- */
.cta-band { background: var(--navy-900); }
.cta-band::before { background: linear-gradient(110deg, rgba(224,27,36,.16), transparent 58%); }
.cta-band .cta-bg { opacity: .20; }

/* ---------- Contact aside sits on navy, so its values must be light ---------- */
.contact-aside .ca-row { border-top-color: rgba(255,255,255,.14); }
.contact-aside .ca-row .ca-ic { background: rgba(224,27,36,.22); }
.contact-aside .ca-row .ca-ic svg { color: var(--red-bright); }
.contact-aside .ca-row b { color: var(--slate-400); }
.contact-aside .ca-row a, .contact-aside .ca-row > div > span { color: #fff; }
.contact-aside .ca-row a:hover { color: var(--red-bright); }
.contact-aside .ca-row i { color: var(--slate-400); }
.contact-aside h2 { color: #fff; }
.contact-aside > p { color: var(--slate-300); }

/* aside hugs its content so sticky works and no dead space is left below */
.contact-grid { align-items: start; }
.contact-aside { align-self: start; }

.hero-badge .hb-lic { display: inline; }
@media (max-width: 560px) { .hero-badge .hb-lic { display: none; } }

/* =====================================================================
   CSI PLUMBING — reference-alignment layer (round 2)
   Hamza's note: the client picked santhoffplumbingco.com for its front-end
   design, and round 1 did not follow it closely enough. What the reference
   actually does, and what this layer adopts:
     1. Condensed heavy display type, headings set in caps.
     2. Full-bleed 50/50 bands. The photo half runs edge to edge, top to
        bottom, no gutter, no rounded corner, no shadow. Sides alternate.
     3. A dark photo-backed panel of icon rows separated by hairlines.
     4. Two-tone ground: white, then a light grey band, then black.
   Kept from round 1 because Hamza asked to keep it: the floating nav pill.
   ===================================================================== */

@font-face{font-family:"Oswald";font-style:normal;font-weight:300 700;font-display:swap;src:url("/assets/fonts/oswald-var.woff2") format("woff2");}

:root {
  --font-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --grey-band: #F1F2F4;
}

/* Oswald runs small and tall, so the scale needs lifting and the tracking opening up. */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: 0; }
h2 { text-transform: uppercase; letter-spacing: .005em; line-height: 1.03; }
.section-head h2 { text-transform: uppercase; }
.hero h1, .page-hero h1 { font-weight: 600; letter-spacing: .002em; line-height: 1.02; }
h3 { font-weight: 600; letter-spacing: .005em; }
.eyebrow { font-family: var(--font-body); font-weight: 700; }
.btn { font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .95rem; }
.nav-links a, .mobile-nav a { font-family: var(--font-display); font-weight: 500; letter-spacing: .02em; font-size: 1.02rem; }
.nav-logo-txt b { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; }

/* =====================================================================
   Full-bleed alternating bands (the reference's core layout move)
   ===================================================================== */
.band { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--paper); }
.band--grey { background: var(--grey-band); }
.band--dark { background: var(--navy-900); }
.band-media { position: relative; overflow: hidden; min-height: clamp(340px, 40vw, 620px); }
.band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.band-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 5rem); }
/* Modifier names the side the PHOTO sits on. The copy half hugs the container
   edge on its own side so the band reads full width without the text running
   into the viewport edge on a wide monitor. */
.band--left  .band-media { order: 1; }   /* photo left  */
.band--left  .band-copy  { order: 2; padding-right: max(1.5rem, calc((100vw - var(--maxw-wide)) / 2 + 1.5rem)); }
.band--right .band-media { order: 2; }   /* photo right */
.band--right .band-copy  { order: 1; padding-left:  max(1.5rem, calc((100vw - var(--maxw-wide)) / 2 + 1.5rem)); }
.band-copy .eyebrow { margin-bottom: .9rem; }
.band-copy h2 { margin-bottom: 1rem; color: var(--red-deep); }
.band--dark .band-copy h2 { color: #fff; }
.band-copy p { color: var(--text-muted); margin-bottom: 1rem; max-width: 56ch; }
.band--dark .band-copy p { color: var(--slate-300); }
.band-copy .check-list { margin: 1.4rem 0; }
.band-copy .btn { align-self: flex-start; margin-top: .6rem; }
@media (max-width: 900px) {
  .band { grid-template-columns: 1fr; }
  .band--left .band-media, .band--right .band-media { order: 1; }
  .band--left .band-copy, .band--right .band-copy { order: 2; }
  .band-media { min-height: 260px; }
  .band--left .band-copy, .band--right .band-copy { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* =====================================================================
   Dark icon-row panel (reference's "24 Hour Emergency Service" list)
   Replaces the 5-items-in-a-6-cell grid that left a blank card.
   ===================================================================== */
.why-band { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.why-copy { background: var(--paper); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem,5vw,5rem) clamp(2rem,4vw,4rem) clamp(2.5rem,5vw,5rem)
           max(1.5rem, calc((100vw - var(--maxw-wide)) / 2 + 1.5rem)); }
.why-copy h2 { color: var(--red-deep); margin-bottom: 1rem; }
.why-copy p { color: var(--text-muted); margin-bottom: 1rem; max-width: 52ch; }
.why-rows { position: relative; background: var(--navy-950); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.2rem,4vw,3.4rem) max(1.5rem, calc((100vw - var(--maxw-wide)) / 2 + 1.5rem)) clamp(2.2rem,4vw,3.4rem) clamp(2rem,4vw,4rem);
  overflow: hidden; }
.why-rows .wr-bg { position: absolute; inset: 0; z-index: 0; }
.why-rows .wr-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .16; }
.why-rows::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(120deg, rgba(6,14,28,.86), rgba(6,14,28,.62)); }
.why-row { position: relative; z-index: 2; display: flex; gap: 1.1rem; padding: 1.15rem 0; border-top: 1px solid rgba(255,255,255,.14); }
.why-row:first-child { border-top: none; padding-top: 0; }
.why-row:last-child { padding-bottom: 0; }
.why-row .wr-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(224,27,36,.20); }
.why-row .wr-ic svg { width: 23px; height: 23px; color: var(--red-bright); }
.why-row h3 { color: #fff; font-size: 1.12rem; margin-bottom: .3rem; }
.why-row p { color: var(--slate-300); font-size: var(--fs-sm); margin: 0; }
@media (max-width: 900px) {
  .why-band { grid-template-columns: 1fr; }
  .why-copy, .why-rows { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* =====================================================================
   Hamza's round-2 fixes
   ===================================================================== */

/* Hero: headline holds to two lines, and the divider + tick row are gone. */
.hero h1 { max-width: 20ch; margin-inline: auto; }
.hero-trust { display: none; }

/* Section heads centre on EVERY page, not just the home page. */
.section-head { text-align: center; margin-inline: auto; }
.section-head p { margin-inline: auto; }
.section-head .eyebrow { justify-content: center; }

/* Visible breadcrumbs removed at Hamza's request. BreadcrumbList schema is
   retained in the JSON-LD, which is what Google actually reads. */
.breadcrumb { display: none; }

/* Services dropdown: a slow mouse used to fall through the gap between the
   nav item and the panel. A transparent bridge plus a close delay fixes it. */
.has-dropdown { position: relative; }
.has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 22px; }
.has-dropdown .dropdown { margin-top: 0; top: calc(100% + 14px); transition: opacity .18s var(--ease), visibility .18s var(--ease), transform .18s var(--ease); }
.has-dropdown .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown { transition-delay: 0s; }
.has-dropdown .dropdown { transition-delay: .22s; }

/* Areas page: chips inside the county cards read as a list, so left align them. */
.area-card .area-chips { justify-content: flex-start; }
.area-chips--sm { justify-content: flex-start; }

/* Coupons keep their own centring. */
.coupon { text-align: center; }

/* Page hero: without the breadcrumb the block needs its own breathing room. */
.page-hero h1 { max-width: 22ch; }
.page-hero .container { text-align: center; }
.page-hero h1, .page-hero p { margin-inline: auto; }
.page-hero .ph-cta { justify-content: center; }

/* Grey alternating ground, matching the reference's white / grey rhythm. */
.section-bone { background: var(--grey-band); }

/* =====================================================================
   CSI PLUMBING — round 3 (Hamza's second review)
   ===================================================================== */

/* 1. The white stroke under the hero.
   The base component paints a 1px --line (near-white) border top and bottom on
   .trust-strip. Round 2 flipped that strip to navy but left the borders, so a
   white hairline sat directly under the hero. */
.trust-strip { border-top: 0; border-bottom: 0; }

/* 2. Hero content sat low.
   The hero is a centred flexbox, but it only carried padding-top to clear the
   fixed topbar and nav. Centring inside a box with padding on one side only
   pushes the content down. Matching the padding on both sides re-centres the
   badge, headline, lead and buttons as a group. */
.hero { padding-top: calc(var(--topbar-h) + var(--nav-h)); padding-bottom: calc(var(--topbar-h) + var(--nav-h) - 40px); }
/* The nav pill floats OVER the hero, so the visually empty band starts at the
   nav's bottom edge, not the hero's. Trimming 40px off the bottom padding puts
   equal space above and below the content within the band you actually see. */

/* 3. Area chips: no orphan on its own row.
   Nineteen chips across the full container width left "Arlington" stranded
   alone on row three. A narrower measure balances the rows. */
.area-chips { max-width: 820px; }
.area-card .area-chips, .area-chips--sm { max-width: none; }

/* 4. Areas page county cards: chips read as a list under the paragraph, so they
   left align and sit directly beneath it instead of drifting to the card floor. */
.area-card { display: flex; flex-direction: column; }
/* NB: no align-items:flex-start here. As a flex item the paragraph would then
   shrink-wrap to its content width, re-wrap to more lines and push the chips
   back down. The chips left-align via justify-content on the list itself. */
.area-card p { margin-bottom: 0; flex: 0 0 auto; }
/* A base rule gives paragraphs flex:1 inside flex containers. Left alone, the
   blurb stretched to fill the card and shoved the chips to the card floor,
   which is the dead space Hamza flagged on the county cards. */
.area-card .area-chips { justify-content: flex-start; margin: 1rem 0 0; width: 100%; }

/* 5. Service page intro now runs as a band with the photo on the right, so it
   matches the two bands below it instead of being a bordered panel. */
.svc-intro .band-copy h2 { color: var(--red-deep); }
.svc-intro .band-copy .check-list { margin-top: 1.5rem; }
.svc-intro .band-copy .btn { margin-top: 1.6rem; }
.svc-covers { margin-top: 1.6rem; }
.svc-covers h3 { font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .8rem; }

/* GHL embed */
.jf-embed { width: 100%; min-height: 640px; border: none; border-radius: 12px; display: block; }

/* The company name is "CSInc." and "plumbing" is a descriptor, so it must stay
   lowercase. These two elements were CSS-uppercased, which silently undid that. */
.nav-logo-txt i { text-transform: none; letter-spacing: .04em; }
.coupon .cp-lic { text-transform: none; letter-spacing: .01em; }

/* =====================================================================
   Round 4 (2026-09-04) — client corrections
   ===================================================================== */

/* Hero wash. Client: "institutional gray, very heavy, not very inviting...
   lighten the background around the writing so we can see the white vans and
   blue sky, keeping the middle a little darker so you can read the words."
   So: a soft dark core sized to the text block, falling away to almost nothing
   at the corners, plus a light top/bottom pass for the nav and the strip edge. */
.hero::after {
  background:
    /* Scrim for the copy block. It lives on this full-bleed layer, NOT on .hero-inner:
       .hero-inner is only as wide as the container, and an ellipse wider than its own box
       gets CLIPPED at the box edge, which drew two hard vertical lines across the hero.
       Radii here are chosen so the gradient reaches full transparency INSIDE the frame
       (50% +/- 44% horizontally, 46% +/- 46% vertically), so there is no edge anywhere. */
    radial-gradient(ellipse 44% 46% at 50% 46%,
      rgba(6,14,28,.22) 0%,
      rgba(6,14,28,.19) 40%,
      rgba(6,14,28,.11) 66%,
      rgba(6,14,28,.04) 86%,
      rgba(6,14,28,0) 100%),
    /* Client 2026-09-10: "take off the dark overlay and make it brighter and more
       inviting", so the rest of the photo keeps only a whisper at the very top for the
       nav and at the very bottom for the trust strip. */
    linear-gradient(180deg,
      rgba(6,14,28,.30) 0%,
      rgba(6,14,28,.04) 14%,
      rgba(6,14,28,0) 60%,
      rgba(6,14,28,.06) 82%,
      rgba(6,14,28,.34) 100%);
}

/* The corners are now bright, so the headline carries its own shadow rather
   than relying on the wash to hold contrast. */
.hero h1, .hero .hero-lead { text-shadow: 0 1px 2px rgba(6,14,28,1), 0 2px 5px rgba(6,14,28,.95), 0 3px 12px rgba(6,14,28,.9), 0 6px 28px rgba(6,14,28,.75), 0 10px 50px rgba(6,14,28,.5); }
.hero-badge { box-shadow: 0 6px 22px rgba(6,14,28,.35); }

/* The brand must keep its lowercase descriptor even inside an uppercased
   heading. Client asked for "Everything CSInc. plumbing handles." back. */
.section-head h2 .brand, h2 .brand { text-transform: none; }

/* The base hero image is scaled to 128% and pushed up 14% to give the parallax
   room to travel, which cropped the sky straight out of the fleet photo. Less
   overshoot keeps the sky and the tops of both vans in frame, which is the part
   the client asked to see. */
.hero .hero-bg img { top: -2%; height: 106%; object-position: 62% 48%; }
/* The 2026-09-08 hero is a portrait frame, so a 16:9 hero is already a tight slice of
   it. Minimal parallax overshoot avoids cropping it twice, and pushing the focal point
   right of centre keeps the technician and the shirt logo clear of the headline. */

/* Photo-less service card. The client sent a screenshot of this tile saying it was
   "not working" - a faint 34px icon on a big dark panel reads as a failed image load.
   Bigger mark, real contrast and a soft brand wash so it reads as a deliberate panel
   until their own water-heater photos arrive. */
.svc-card .media--mark {
  background:
    radial-gradient(120% 100% at 30% 0%, rgba(224,27,36,.20), transparent 60%),
    linear-gradient(140deg, var(--navy-850), var(--navy-950) 72%);
}
.svc-card .media--mark .mk { width: 118px; height: 118px; background: rgba(224,27,36,.20); box-shadow: 0 0 0 1px rgba(245,51,60,.35) inset; }
.svc-card .media--mark .mk svg { width: 56px; height: 56px; color: #F5333C; stroke-width: 1.7; }

/* Phones get the portrait crop of the hero, which is already framed, so it wants a
   neutral focal point rather than the desktop band's off-centre one. */
@media (max-width: 700px) {
  .hero .hero-bg img { top: 0; height: 100%; object-position: 50% 42%; }
}

/* Phones read a good deal darker than desktop here: the portrait crop puts the
   headline straight over the white van and the bright sky rather than the shop
   opening, so the same wash that measures 3.2:1 on desktop measures 2.5:1 at
   390px. Phones therefore keep a slightly deeper core than the desktop hero the
   client is reviewing. */
@media (max-width: 700px) {
  .hero::after {
    background:
      radial-gradient(ellipse 62% 34% at 50% 44%,
        rgba(6,14,28,.36) 0%,
        rgba(6,14,28,.31) 40%,
        rgba(6,14,28,.18) 66%,
        rgba(6,14,28,.06) 86%,
        rgba(6,14,28,0) 100%),
      linear-gradient(180deg,
        rgba(6,14,28,.30) 0%,
        rgba(6,14,28,.04) 14%,
        rgba(6,14,28,0) 60%,
        rgba(6,14,28,.06) 82%,
        rgba(6,14,28,.34) 100%);
  }
}