/*
Theme Name: Bolt Outdoor Lighting
Theme URI: https://boltoutdoorlighting.com/
Author: Disruptors Media
Description: Custom theme for Bolt Outdoor Lighting Company (Apex / Raleigh Triangle, NC). Content is managed through editable ACF blocks with swappable image fields; chrome is driven by a Site Settings options page. Plain CSS, no build step.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: bolt
*/

/* =========================================================
   Bolt Outdoor Lighting — Design System
   Brand: night-blue base · electric blue action · warm gold glow accent
   Type:  Oswald (display) · Roboto (body)
   Hybrid: light reading sections, dark dramatic heroes/bands.
   ========================================================= */

:root {
  /* ---- Brand palette (Bolt: electric blue + warm gold glow over night blue) ---- */
  --blue:        #5487ff;   /* THE interactive accent — Bolt electric blue (primary CTA, links) */
  --blue-d:      #3f6fe0;   /* deeper blue — hover */
  --blue-2:      #f3b11e;   /* accent on dark surfaces → warm GOLD glow (hero accent, italic) */
  --red:         #f3b11e;   /* legacy alias → gold */
  --gold:        #f3b11e;   /* warm lighting glow — eyebrows, hairline accents, hover */
  --gold-d:      #d9990f;   /* deeper gold */
  --ink:         #0e1f2b;   /* Bolt night-blue base (dark surfaces) */
  --ink-2:       #13293a;   /* raised dark surface */
  --ink-3:       #1c3548;   /* dark slate */
  --head:        #13202b;   /* near-black-blue headings on light */
  --body:        #4a5560;   /* cool-neutral body text */
  --paper:       #f7f9fb;   /* cool off-white page bg */
  --tint:        #eef2f6;   /* cool light section bg */
  --tint-2:      #e4eaf0;
  --line:        #e2e8ee;   /* cool hairlines */
  --line-dark:   rgba(255,255,255,.12);
  --star:        #f3b11e;   /* gold review stars */

  /* ---- Type ---- */
  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --body-font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --script: "Satisfy", "Segoe Script", cursive;

  /* ---- Layout ---- */
  --maxw: 1180px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(14,31,43,.05), 0 8px 24px rgba(14,31,43,.06);
  --shadow-md: 0 12px 34px rgba(14,31,43,.09), 0 3px 10px rgba(14,31,43,.05);
  --shadow-lg: 0 28px 64px rgba(10,20,30,.16);
  --shadow-blue: 0 6px 20px rgba(84,135,255,.28);
  --shadow-gold: 0 6px 24px rgba(243,177,30,.28);
  --ease: cubic-bezier(.22,.61,.36,1);
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 100px; }
body {
  font-family: var(--body-font);
  color: var(--body);
  background: var(--paper);
  line-height: 1.62;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
/* ---------- Premium finish: restraint in the details ---------- */
::selection { background: rgba(84,135,255,.13); color: var(--ink); }
a:focus-visible, button:focus-visible, .btn:focus-visible, .choice:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap.prose { max-width: 720px; }
.wrap.prose p, .wrap.prose li { line-height: 1.75; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--head);
  line-height: 1.1;
  letter-spacing: normal;
  font-weight: 600;
  text-wrap: balance;
}
h1 { font-weight: 600; }
h3, h4 { font-weight: 700; }
p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--body-font);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  color: #6f6b62; display: inline-block;
}
.eyebrow.on-dark { color: rgba(255,255,255,.62); }
.eyebrow.red { color: var(--blue); }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.wrap-narrow { max-width: 820px; }
.section { padding: 120px 0; }
.section-sm { padding: 80px 0; }
.section.tint { background: var(--tint); }
.section.dark { background: var(--ink); color: #c9d2db; }
.section.dark h2, .section.dark h3, .section.dark h4 { color: #fff; }
.center { text-align: center; }
.lead { font-size: 1.2rem; line-height: 1.6; color: var(--body); }
.section.dark .lead { color: #aebccb; }
.muted { color: var(--body); }
.mx-auto { margin-inline: auto; }
.maxw-prose { max-width: 680px; }
.mt-0 { margin-top: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--body-font); font-weight: 600; font-size: .98rem; letter-spacing: .01em;
  padding: 15px 30px; border-radius: 999px; border: 1px solid transparent;
  min-height: 52px; white-space: nowrap;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease), color .25s, border-color .25s;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-blue); }
.btn-primary:hover { transform: translateY(-1px); background: var(--blue-d); box-shadow: 0 10px 26px rgba(84,135,255,.24); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { transform: translateY(-1px); background: var(--ink-2); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--head); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--head); color: var(--head); transform: translateY(-1px); }
.btn-ghost.on-dark { color: #fff; border-color: rgba(255,255,255,.26); }
.btn-ghost.on-dark:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.5); color:#fff; }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-block { width: 100%; }
.btn-lg { font-size: 1.02rem; padding: 17px 36px; min-height: 58px; }

.link-arrow { font-weight: 600; color: var(--blue-d); display: inline-flex; align-items: center; gap: .4em; transition: gap .3s var(--ease); }
.link-arrow:hover { gap: .72em; }
.section.dark .link-arrow { color: var(--blue-2); }

/* ---------- Header (premium dark) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(14,31,43,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.site-header.scrolled { border-bottom-color: var(--line-dark); box-shadow: 0 8px 30px rgba(0,0,0,.30); background: rgba(12,26,37,.94); }
.nav { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); gap: 16px; }
.site-header .wrap { max-width: 1300px; }
/* Footer shares the header's container width so their left/right edges line up. */
.site-footer .wrap { max-width: 1300px; }
/* The Bolt logo is a dark wordmark built for light backgrounds, so it sits on a
   white rounded chip to stay legible on the dark header (keeps the gold emblem). */
.brand { display: inline-flex; align-items: center; flex: none; background: #fff; padding: 8px 16px; border-radius: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: box-shadow .25s var(--ease), transform .25s var(--ease); }
.brand:hover { box-shadow: 0 6px 20px rgba(0,0,0,.28); transform: translateY(-1px); }
.brand img { height: 44px; width: auto; display: block; } /* ~60px chip in the 84px header */
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a.navlink {
  font-size: .93rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap; color: #c9d2db; padding: 9px 12px; border-radius: 9px;
  transition: color .2s, background .2s; position: relative;
}
.nav-links a.navlink:hover { color: #fff; background: rgba(255,255,255,.07); }
/* Current-page marker. The gold hairline is the "you are here" cue and it also
   lights up a dropdown parent (Services / Portfolio / Resources) when you are on
   one of its child pages. Applied by main.js from location.pathname, so it works
   on every page without per-page markup. */
.nav-links a.navlink.active { color: #fff; }
.nav-links a.navlink.active::after { content:""; position:absolute; left:14px; right:14px; bottom:2px; height:2px; background: var(--gold); border-radius:2px; }
.drop a.active { background: var(--tint); color: var(--blue-d); }

/* dropdown */
.has-drop { position: relative; }
.has-drop > .navlink { cursor: default; }
.drop {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 246px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 8px;
  box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 11px 14px; border-radius: 9px; font-size: .94rem; font-weight: 700; color: var(--head); }
.drop a small { display:block; font-weight:500; font-size:.78rem; color: var(--body); margin-top:2px; }
.drop a:hover { background: var(--tint); color: var(--blue-d); }

.nav-cta { display: flex; align-items: center; gap: 14px; flex: none; }
.nav-cta .phone { font-weight: 800; color: #fff; font-size: 1.14rem; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nav-cta .phone svg { width: 18px; height: 18px; color: var(--blue-2); }

/* The nav carries 10 items since "Why Bolt?" was added, which runs the header
   into the Free Consultation button on narrower desktops. Tighten the link
   padding, and drop the phone number in the band where it does not fit — it is
   still in the mobile bar, the footer, and on the contact page. */
.nav-links a.navlink { padding-inline: 8px; }
@media (min-width: 1181px) and (max-width: 1400px) {
  .nav-cta .phone { display: none; }
}

.menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid var(--line-dark); border-radius: 12px; background: rgba(255,255,255,.06); align-items: center; justify-content: center; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { position: relative; display:block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: .3s var(--ease); }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -6px; } .menu-toggle span::after { top: 6px; }
.menu-toggle.open span { background: transparent; }
.menu-toggle.open span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.open span::after { top: 0; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after { content:""; position:absolute; inset:0;
  background: linear-gradient(105deg, rgba(13,15,19,.95) 0%, rgba(13,15,19,.82) 42%, rgba(13,15,19,.45) 100%); }
.hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; padding-block: 96px 104px; }
.hero-rating { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); padding: 8px 16px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: #fff; margin-bottom: 22px; }
.hero-rating .stars { color: var(--star); letter-spacing: 1px; }
.hero-rating { transition: background .25s var(--ease), border-color .25s var(--ease); }
.hero-rating:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.34); }
.hero-rating-arrow { opacity: .55; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.hero-rating:hover .hero-rating-arrow { transform: translateX(3px); opacity: 1; }

/* ---------- Google rating badge (reviews section) ---------- */
.grev { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 9px 18px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-md); font-weight: 600; color: var(--head); }
.grev-g { flex: none; }
.grev-stars { color: var(--star); letter-spacing: 1px; font-size: 1rem; line-height: 1; }
.grev-text { font-size: .95rem; }
@media (max-width: 460px) { .grev { flex-wrap: wrap; justify-content: center; text-align: center; gap: 6px 8px; padding: 9px 14px; font-size: .9rem; } }

/* Reviews section: trim the empty space above so reviews surface immediately */
.section.reviews-tight { padding-top: 52px; }

/* ---------- Crawlable reviews (semantic HTML, readable by search/AI crawlers) ---------- */
.crawl-reviews { list-style: none; margin: 44px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.crawl-review article { height: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: var(--shadow-md); }
.crawl-review .cr-stars { color: var(--star); font-size: 1.05rem; letter-spacing: 1px; }
.crawl-review .cr-text { margin: 12px 0 16px; border: 0; padding: 0; }
.crawl-review .cr-text p { margin: 0; color: var(--head); font-size: 1rem; line-height: 1.55; }
.crawl-review .cr-author { display: flex; flex-direction: column; font-style: normal; font-weight: 700; color: var(--head); }
.crawl-review .cr-src { font-weight: 500; font-size: .82rem; color: var(--body); margin-top: 2px; }
@media (max-width: 1000px) { .crawl-reviews { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .crawl-reviews { grid-template-columns: 1fr; } }

/* ---------- Our Work (project showcase) ---------- */
.project-part { margin-top: 8px; }
.project-part + .project-part { margin-top: 56px; }
.project-details { margin-top: 56px; display: grid; gap: 40px; max-width: 760px; }
.pd-block h2 { margin-bottom: 10px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.gallery-item { margin: 0; border-radius: 14px; overflow: hidden; background: var(--tint); aspect-ratio: 4/3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }
.ba-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px; }
.ba-col .gallery-grid { grid-template-columns: 1fr; }
.ba-tag { display: inline-block; margin-bottom: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.ba-tag--before { background: var(--tint-2); color: var(--body); }
.ba-tag--after { background: rgba(84,135,255,.1); color: var(--blue); }
@media (max-width: 900px) { .ba-cols { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Lead popup modal (Schedule Now / Tell us what you need) ---------- */
body.modal-open { overflow: hidden; }
.lead-modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lead-modal[hidden] { display: none; }
.lead-modal-backdrop { position: absolute; inset: 0; background: rgba(12,14,18,.72); backdrop-filter: blur(3px); animation: phFade .2s var(--ease); }
.lead-modal-dialog { position: relative; z-index: 1; width: 100%; max-width: 900px; max-height: 92vh; overflow: auto; background: #fff; border-radius: 20px; box-shadow: var(--shadow-lg); animation: phPop .25s var(--ease); }
@keyframes phFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes phPop { from { opacity: 0; transform: translateY(14px) scale(.98) } to { opacity: 1; transform: none } }
.lead-modal-x { position: absolute; top: 12px; right: 14px; z-index: 3; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--head); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-md); }
.lead-modal-x:hover { background: #fff; }
.lead-modal-grid { display: grid; grid-template-columns: 1fr 1fr; }
.lead-modal-vsl { position: relative; background: var(--ink); min-height: 340px; border-radius: 20px 0 0 20px; overflow: hidden; display: flex; align-items: flex-end; }
.vsl-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lead-modal-vsl::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,12,16,.9), rgba(10,12,16,.15) 62%, rgba(10,12,16,.4)); }
.vsl-msg { position: relative; z-index: 1; padding: 26px; color: #fff; }
.vsl-badge { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); padding: 6px 12px; border-radius: 999px; }
.vsl-badge svg { width: 15px; height: 15px; }
.vsl-msg p { margin-top: 14px; font-family: var(--display); font-size: 1.4rem; line-height: 1.25; font-weight: 600; }
.lead-modal-form { padding: 34px 34px 30px; }
.lead-modal-form h3 { font-size: 1.6rem; }
.lead-modal-form .sub { color: var(--body); margin: 6px 0 16px; }
.lead-modal-form .field { margin-bottom: 12px; }
.lead-modal-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lead-modal-dialog--form { max-width: 680px; border-top: 4px solid var(--gold); }
.lead-modal--simple .lead-modal-form { padding: 38px 40px 34px; }
.lead-modal-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 48px 24px 0; }
.lead-modal-progress span { height: 4px; border-radius: 999px; background: #dfe4e8; transition: background .25s var(--ease); }
.lead-modal-progress span.active { background: var(--gold); }
.lead-modal-step { display: none; animation: phPop .25s var(--ease); }
.lead-modal-step.active { display: block; }
.lead-modal .lead-modal-choices { grid-template-columns: 1fr 1fr; }
.lead-modal-choices .choice { justify-content: center; min-height: 72px; text-align: center; font-family: var(--display); font-size: 1.08rem; }
.lead-modal-choices .choice:hover, .lead-modal-choices .choice.selected { border-color: var(--gold); background: #fff9e8; transform: translateY(-1px); }
.lead-modal-success { padding: 26px 0 8px; }
@media (max-width: 860px) {
  .lead-modal-grid { grid-template-columns: 1fr; }
  .lead-modal-vsl { border-radius: 20px 20px 0 0; min-height: 190px; }
  .lead-modal-form { padding: 26px 22px 24px; }
  .lead-modal-form .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .lead-modal { padding: 12px; align-items: flex-end; }
  .lead-modal-dialog--form { max-height: 94vh; border-radius: 18px 18px 0 0; }
  .lead-modal--simple .lead-modal-form { padding: 30px 18px 22px; }
  .lead-modal-choices { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lead-modal-choices .choice { min-height: 64px; padding: 12px 8px; }
  .lead-modal-progress { margin-right: 44px; margin-bottom: 18px; }
}
.hero h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); color: #fff; font-weight: 600; line-height: 1.0; }
.hero h1 .accent { color: var(--blue-2); font-style: italic; }
.hero p.lead { color: #c9d6e2; margin-top: 22px; max-width: 540px; }
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 34px; margin-top: 48px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.14); flex-wrap: wrap; }
.hero-trust .stat .n { font-family: var(--display); font-weight: 700; font-size: 2rem; color: #fff; line-height: 1; }
.hero-trust .stat .n small { color: var(--blue-2); }
.hero-trust .stat .l { font-size: .8rem; color: #9fb0c0; margin-top: 7px; }

/* hero side card (mini schedule prompt / trust) */
.hero-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: 28px; backdrop-filter: blur(8px); box-shadow: var(--shadow-lg); }
.hero-card h3 { color:#fff; font-size: 1.5rem; }
.hero-card p { color:#aebccb; font-size: .96rem; margin-top: 6px; }
.hero-card .mini-step { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.hero-card .mini-step:last-of-type { border-bottom:0; }
.hero-card .mini-step .num { flex:none; width:34px; height:34px; border-radius:50%; background: var(--blue); color:#fff; display:grid; place-items:center; font-family:var(--display); font-weight:700; }
.hero-card .mini-step b { color:#fff; display:block; font-size:1rem; }
.hero-card .mini-step span { font-size:.86rem; color:#9fb0c0; }
/* Hero inline lead form — a white "quote" card that runs the 3-step flow in place */
.hero-form { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.hero-form .hf-form { padding: 4px 26px 26px; }
.hero-form .progress { padding: 22px 26px 4px; }
.hero-form .fstep h4 { color: var(--ink); }
.hero-form .form-success { color: var(--ink); }
.hero-form .form-success.show { display: block; }
.hero-form .form-success h3 { color: var(--ink); font-size: 1.5rem; }
.hero-form .form-success p { color: var(--body); }
.hero-form .eyebrow { display: inline-block; margin-bottom: 5px; }
.hf-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; font-size: .8rem; color: var(--body); line-height: 1.45; cursor: pointer; }
.hf-consent input { flex: none; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--blue); }
.hf-consent .req { color: var(--red); }
.hf-consent em { font-style: normal; opacity: .65; }

/* ---------- Page hero (interior) ---------- */
.page-hero { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.page-hero::before { content:""; position:absolute; inset:0;
  background: radial-gradient(120% 100% at 88% -20%, rgba(84,135,255,.22), transparent 55%), linear-gradient(150deg,#101216,#1f242b); }
.page-hero.has-img .page-hero-img { position:absolute; inset:0; }
.page-hero.has-img .page-hero-img img { width:100%; height:100%; object-fit:cover; opacity:.28; }
.page-hero .wrap { position: relative; padding: 80px 24px 70px; }
.page-hero h1 { color: #fff; font-size: clamp(2.3rem, 4.6vw, 3.5rem); max-width: 820px; }
.page-hero p { color: #c9d6e2; margin-top: 16px; max-width: 640px; font-size: 1.16rem; }

/* ---------- Breadcrumbs ---------- */
.crumbs { font-size: .85rem; color: #93a6b8; margin-bottom: 20px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a { color:#bdcad7; }
.crumbs a:hover { color: var(--blue-2); }
.crumbs .sep { opacity:.5; }
.crumbs.on-light { color: var(--body); }
.crumbs.on-light a { color: var(--blue-d); }

/* ---------- Trust strip ---------- */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-strip .wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-block: 22px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 11px; color: var(--head); font-size: .94rem; font-weight: 700; }
.trust-item svg { width: 23px; height: 23px; color: var(--blue); flex: none; }
.trust-item .ts-short { display: none; } /* full labels on desktop; short swap in on mobile */

/* ---------- Section heading ---------- */
.sec-head { max-width: 720px; margin-bottom: 54px; }
.sec-head.center { margin-inline: auto; }
.sec-head h2 { font-size: clamp(2rem, 3.8vw, 2.9rem); margin-top: 14px; }
.sec-head p { margin-top: 16px; }

/* ---------- Cards grid ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cards.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; position: relative; overflow: hidden;
  display:flex; flex-direction:column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--tint-2); }
.card-ico { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 22px; background: var(--tint); color: var(--head); flex:none; }
.card-ico svg { width: 25px; height: 25px; }
.card h3 { font-size: 1.32rem; margin-bottom: 9px; }
.card p { font-size: .98rem; color: var(--body); }
.card .link-arrow { margin-top: 16px; font-size: .92rem; }
.card-img { margin: -30px -30px 22px; aspect-ratio: 16/10; overflow:hidden; background: var(--tint); }
.card-img img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.card:hover .card-img img { transform: scale(1.05); }

/* ---------- Article pagination ---------- */
.article-pagination { margin-top: 52px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.article-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  font-weight: 600; font-size: .98rem; color: var(--head);
  background: #fff; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.article-pagination a.page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.article-pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: #fff; }
.article-pagination .page-numbers.dots { border: 0; background: none; min-width: 22px; padding: 0; }

/* ---------- Split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); width: 100%; }
.feature-list { display: grid; gap: 18px; margin-top: 28px; }
.feature-list li { display: flex; gap: 14px; align-items: flex-start; }
.feature-list .ck { flex: none; width: 27px; height: 27px; border-radius: 8px; background: var(--blue); color: #fff; display: grid; place-items: center; margin-top: 3px; }
.feature-list .ck svg { width: 15px; height: 15px; }
.feature-list b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--head); }
.feature-list .d { color: var(--body); font-size: .96rem; }

/* ---------- Process steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 32px 28px; overflow: hidden; }
.step .step-img { margin: -32px -28px 22px; aspect-ratio: 3 / 2; background: var(--ink); overflow: hidden; }
.step .step-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.step .step-n { font-family: var(--display); font-weight: 600; font-size: 2.8rem; color: var(--head); line-height: 1; }
.section.dark .step .step-n { color: #fff; }
.step h3 { font-size: 1.28rem; margin: 14px 0 8px; }
.step p { font-size: .96rem; }
.section.dark .step { background: var(--ink-2); border-color: var(--line-dark); }
.section.dark .step p { color:#aebccb; }

/* ---------- Stats band ---------- */
.band { background: var(--ink); color: #fff; }
.band-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; text-align: center; }
.band .n { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3.2rem); color: #fff; line-height: 1; }
.band .n small { color: var(--blue-2); }
.band .l { color: #9fb0c0; margin-top: 10px; font-size: .94rem; }
.band-grid > div { padding: 14px 18px; }
.band-grid > div + div { border-left: 1px solid rgba(255,255,255,.12); }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display:flex; flex-direction:column; }
.quote .stars { color: var(--star); letter-spacing: 2px; font-size: 1rem; }
.quote p { font-size: 1.02rem; color: var(--head); margin: 14px 0 20px; line-height: 1.6; flex:1; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .av { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; flex:none; }
.quote .av--photo { background: none; overflow: hidden; }
.quote .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.quote .who b { font-size: .96rem; color: var(--head); } .quote .who span { font-size: .82rem; color: var(--body); display: block; }
.quote .who-meta { line-height: 1.3; }
.quote .who-meta b { font-size: .96rem; color: var(--head); display: block; }
.quote .src { display: flex; align-items: center; gap: 5px; font-size: .8rem; color: var(--body); margin-top: 2px; }
.quote .src .g-ico { flex: none; }
/* Elfsight Google Reviews — drop the widget's own dark panel so the cards sit on
   the page background. Targets only the outer "widget-background" element, never
   the review cards' own background (so their text stays readable). */
[class*="elfsight-app-"] [class*="widget-background"] { background: transparent !important; box-shadow: none !important; border-color: transparent !important; }

/* ---------------------------------------------------------- Blog / clusters */
.cat-nav { background: #fff; border-bottom: 1px solid var(--line); }
.cat-nav ul { display: flex; flex-wrap: wrap; gap: 8px 6px; list-style: none; margin: 0; padding: 15px 0; justify-content: center; }
.cat-nav a { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: .92rem; font-weight: 600; color: var(--body); text-decoration: none; transition: background .2s var(--ease), color .2s var(--ease); }
.cat-nav a:hover { background: var(--tint); color: var(--head); }
.cat-nav a.is-active { background: var(--blue); color: #fff; }
.post-byline { color: #c9d6e2; margin-top: 14px; font-size: .95rem; font-weight: 600; letter-spacing: .01em; }
.prose > *:first-child { margin-top: 0; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; background: var(--ink); color: #fff; border-radius: var(--radius-lg); overflow: hidden; padding: 66px; text-align: center; }
.cta-band::before { content:""; position:absolute; inset:0; background: radial-gradient(110% 130% at 50% 0%, rgba(84,135,255,.26), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; font-size: clamp(2rem, 3.8vw, 2.9rem); }
.cta-band p { color: #c9d6e2; max-width: 560px; margin: 16px auto 30px; }
.cta-band .hero-cta { justify-content: center; }

/* ---------- Forms ---------- */
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .86rem; font-weight: 800; color: var(--head); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--head);
  padding: 14px 15px; border: 1.5px solid var(--line); border-radius: 11px; background: var(--tint);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 4px rgba(84,135,255,.14); }
.field textarea { resize: vertical; min-height: 120px; }
.field .req { color: var(--red); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-note { font-size: .82rem; color: var(--body); }

/* ---------- Multi-step schedule form ---------- */
.scheduler { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow:hidden; max-width: 620px; }
.scheduler-head { padding: 26px 30px 0; }
.scheduler-head h3 { font-size: 1.5rem; }
.scheduler-head p { font-size:.95rem; margin-top:4px; color: var(--ink); }
.progress { display:flex; align-items:center; gap:8px; padding: 20px 30px 4px; }
.progress .dot { flex:1; height:8px; border-radius:999px; background: var(--tint-2); transition: background .35s var(--ease); }
.progress .dot.active { background: var(--blue); }
.progress-label { padding: 0 30px; font-size:.8rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color: var(--blue); }
.steps-wrap { padding: 14px 30px 30px; }
.fstep { display:none; animation: fade .35s var(--ease); }
.fstep.active { display:block; }
@keyframes fade { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.fstep h4 { font-size: 1.3rem; margin-bottom: 4px; }
.fstep .sub { font-size:.92rem; color: var(--body); margin-bottom: 18px; }
.choice-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice {
  display:flex; align-items:center; gap:12px; padding:16px; border:1.5px solid var(--line); border-radius:13px;
  background:#fff; cursor:pointer; transition: border-color .2s, background .2s, transform .15s; text-align:left; font-weight:700; color:var(--head); font-size:.98rem;
}
.choice:hover { border-color: var(--blue-2); transform: translateY(-2px); }
.choice.selected { border-color: var(--blue); background: #eaf5ff; box-shadow: 0 0 0 3px rgba(84,135,255,.12); }
.choice .ci { flex:none; width:38px; height:38px; border-radius:10px; background:var(--tint); color:var(--head); display:grid; place-items:center; }
.choice .ci svg { width:20px; height:20px; }
.choice.selected .ci { background: var(--blue); color:#fff; }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip-radio { position:relative; }
.chip-radio input { position:absolute; opacity:0; }
.chip-radio label { display:inline-flex; padding:11px 18px; border:1.5px solid var(--line); border-radius:999px; font-weight:700; font-size:.92rem; color:var(--head); cursor:pointer; transition: all .2s; }
.chip-radio input:checked + label { border-color: var(--blue); background:#eaf5ff; color: var(--blue-d); }
.chip-radio input:focus-visible + label { box-shadow: 0 0 0 3px rgba(84,135,255,.2); }
.fstep-nav { display:flex; gap:12px; margin-top: 22px; }
.fstep-nav .btn { flex:1; }
.form-success { display:none; padding: 40px 30px; text-align:center; }
.form-success.show { display:block; }
.form-success .ok-ico { width:72px; height:72px; border-radius:50%; background:#e7f8ee; color:#1faf54; display:grid; place-items:center; margin:0 auto 18px; }
.form-success .ok-ico svg { width:38px; height:38px; }
.form-success h3 { font-size:1.6rem; color: var(--ink); }
.form-success p { color: var(--ink); }
.form-err { background:#fdecea; color:#b3261e; border:1px solid #f5c6c0; border-radius:11px; padding:12px 14px; font-size:.9rem; font-weight:700; margin-bottom:14px; display:none; }
.form-err.show { display:block; }

/* ---------- Estimator ---------- */
.estimator { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden; }
.estimator-body { padding: 32px; }
.est-result { background: var(--ink); color:#fff; padding: 32px; text-align:center; }
.est-result .est-range { font-family:var(--display); font-weight:700; font-size: clamp(2.2rem,5vw,3.2rem); color:#fff; line-height:1; }
.est-result .est-range small { color: var(--blue-2); font-size:1.2rem; }
.est-result .est-cap { color:#9fb0c0; font-size:.86rem; margin-top:10px; }
.range-row { margin-bottom: 22px; }
.range-row label { display:flex; justify-content:space-between; font-weight:800; color:var(--head); font-size:.92rem; margin-bottom:10px; }
.range-row label b { color: var(--blue-d); font-family:var(--display); }
input[type=range] { width:100%; accent-color: var(--blue); height: 6px; }

/* ---------- Service-area grid ---------- */
.area-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.area-card { display:flex; align-items:center; gap:12px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:13px; font-weight:800; color:var(--head); transition: all .25s var(--ease); }
.area-card:hover { border-color: var(--blue); transform: translateY(-3px); box-shadow: var(--shadow-sm); color: var(--blue-d); }
.area-card svg { width:20px; height:20px; color: var(--blue); flex:none; }
.area-card small { display:block; font-weight:500; font-size:.78rem; color: var(--body); }
.area-feature { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); gap:12px; justify-content:center; }
.area-feature a { padding: 22px 16px; text-align:center; background: var(--ink); color:#fff; border-radius:14px; font-family:var(--display); font-weight:700; font-size:1.1rem; transition: transform .2s, background .2s; }
.area-feature a:hover { transform: translateY(-4px); background: var(--blue-d); }

/* ---------- Map embed ---------- */
.map-embed { border-radius: var(--radius-lg); overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-sm); line-height:0; }
.map-embed iframe { width:100%; height:420px; border:0; display:block; }

/* ---------- FAQ accordion ---------- */
.faq { max-width: 820px; margin-inline:auto; display:grid; gap: 12px; }
.faq-item { border:1px solid var(--line); border-radius: 14px; background:#fff; overflow:hidden; }
.faq-q { width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:16px; padding: 20px 24px; font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--head); background:none; border:0; }
.faq-q .pm { flex:none; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--blue-d); display:grid; place-items:center; font-size:1.3rem; transition: transform .3s, background .2s; }
.faq-item.open .faq-q .pm { transform: rotate(45deg); background: var(--blue); color:#fff; }
.faq-a { max-height:0; overflow:hidden; transition: max-height .35s var(--ease); }
.faq-a-inner { padding: 0 24px 22px; color: var(--body); font-size: 1rem; }

/* ---------- Service detail rows ---------- */
.svc-list { display: grid; gap: 18px; }
.svc-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; display: grid; grid-template-columns: 64px 1fr; gap: 22px; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.svc-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.svc-item .ico { width: 62px; height: 62px; border-radius: 15px; background: var(--ink); color: var(--blue-2); display: grid; place-items: center; }
.svc-item .ico svg { width: 30px; height: 30px; }
.svc-item h3 { font-size: 1.4rem; margin-bottom: 8px; }
.svc-item ul.tags { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.svc-item ul.tags li { font-size: .82rem; font-weight: 700; color: var(--blue-d); background: #eaf5ff; padding: 6px 13px; border-radius: 999px; }

/* ---------- Gallery ---------- */
.gallery-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.gallery-grid figure { border-radius: var(--radius); overflow:hidden; background:var(--tint); aspect-ratio: 4/3; }
.gallery-grid img { width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.06); }
.ba { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.ba figure { position:relative; border-radius:var(--radius); overflow:hidden; }
.ba figcaption { position:absolute; top:12px; left:12px; background: rgba(14,31,43,.86); color:#fff; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:5px 12px; border-radius:999px; }

/* ---------- Video grid ---------- */
.video-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.video-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.video-card .vthumb { aspect-ratio:16/9; background: var(--ink); position:relative; display:grid; place-items:center; }
.video-card .vthumb svg { width:64px; height:64px; color:#fff; opacity:.9; }
.video-card .vbody { padding:22px 24px; }
.video-card h3 { font-size:1.2rem; }
/* Local MP4 players inside video cards (responsive; portrait reels vs landscape) */
.video-card.has-video { margin: 0; display: flex; flex-direction: column; }
.video-card .vplayer { background: var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.video-card .vplayer video { display: block; width: 100%; height: auto; }
.video-card .vplayer.is-portrait video { width: auto; max-width: 100%; max-height: 520px; }
@media (max-width: 760px) { .video-card .vplayer.is-portrait video { width: 100%; max-height: none; } }

/* ---------- Job listings ---------- */
.job { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; transition: box-shadow .3s, transform .3s; }
.job:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.job h3 { font-size:1.3rem; }
.job .meta { font-size:.9rem; color:var(--body); margin-top:4px; }

/* ---------- Article prose ---------- */
.prose { max-width: 760px; margin-inline:auto; }
.prose h2 { font-size: 1.7rem; margin: 38px 0 14px; }
.prose h3 { font-size: 1.3rem; margin: 28px 0 10px; }
.prose p { margin-bottom: 18px; font-size: 1.08rem; color: #444; line-height: 1.7; }
.prose ul { margin: 0 0 18px; padding-left: 0; display:grid; gap:10px; }
.prose ul li { padding-left: 28px; position:relative; }
.prose ul li::before { content:""; position:absolute; left:6px; top:11px; width:7px; height:7px; border-radius:50%; background: var(--blue); }

/* ---------- Sitemap page ---------- */
.sitemap-cols { display:grid; grid-template-columns: repeat(4,1fr); gap: 30px; }
.sitemap-cols h3 { font-size:1.1rem; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--blue); display:inline-block; }
.sitemap-cols ul { display:grid; gap:10px; }
.sitemap-cols a { color: var(--body); font-weight:600; font-size:.96rem; }
.sitemap-cols a:hover { color: var(--blue-d); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #aebccb; padding: 74px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1.1fr; gap: 40px; }
.footer-brand img { display: inline-block; background: #fff; padding: 10px 16px; border-radius: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.22); height: auto; width: auto; max-height: 74px; max-width: 220px; margin-bottom: 18px; }
.footer-brand p { font-size: .94rem; color: #9fb0c0; max-width: 320px; }
.footer-contact { margin-top: 18px; display:grid; gap:10px; font-size:.92rem; }
.footer-contact a { color:#c9d6e2; font-weight:600; display:flex; align-items:flex-start; gap:9px; }
.footer-contact a:hover { color:#fff; }
.footer-contact svg { width:18px; height:18px; color:var(--blue-2); flex:none; margin-top:2px; }
.footer-col h4 { font-family: var(--body-font); font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col ul { display: grid; gap: 10px; }
.footer-col a { color: #9fb0c0; font-size: .94rem; transition: color .2s; }
.footer-col a:hover { color: #fff; }
.footer-social { display:flex; gap:12px; margin-top:18px; }
.footer-social a { width:40px; height:40px; border-radius:10px; background: rgba(255,255,255,.07); display:grid; place-items:center; color:#fff; transition: background .2s, transform .2s; }
.footer-social a:hover { background: var(--blue); transform: translateY(-2px); }
.footer-social svg { width:19px; height:19px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); font-size: .84rem; color: #7e8fa0; }
.footer-bottom a:hover { color: #fff; }

/* ---------- Sticky mobile call/schedule bar ---------- */
.mobilebar { display:none; position:fixed; left:0; right:0; bottom:0; z-index:150; background: rgba(14,31,43,.97); backdrop-filter: blur(10px); border-top:1px solid var(--line-dark); padding:10px 14px; gap:10px; }
.mobilebar .btn { flex:1; min-height:50px; padding:13px; font-size:.96rem; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; } .reveal.d5 { transition-delay: .4s; }

/* ---------- Mobile nav panel ---------- */
.mobile-panel { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-block: 72px 88px; }
  .hero-form { max-width: 500px; margin-inline: auto; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.reverse .split-media { order: 0; }
  .cards, .cards.cols-4, .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .quotes, .steps, .video-grid { grid-template-columns: 1fr; }
  .quotes { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .band-grid { grid-template-columns: repeat(2, 1fr); }
  .band-grid > div:nth-child(3) { border-left: 0; }
  .area-grid { grid-template-columns: repeat(3, 1fr); }
  .area-feature { grid-template-columns: repeat(3,1fr); }
  .sitemap-cols { grid-template-columns: repeat(2,1fr); }
  .gallery-grid { grid-template-columns: repeat(2,1fr); }
}
/* The 7-item nav + phone + CTA only fits at the full content width, so collapse
   to the hamburger menu below the max content width — otherwise it overflows the
   header and the page gets a horizontal scroll / white gap on tablet widths. */
@media (max-width: 1180px) {
  .nav-links, .nav-cta .phone { display: none; }
  .menu-toggle { display: flex; }

  .mobile-panel {
    display: block; position: fixed; inset: var(--header-h) 0 0; z-index: 190;
    background: var(--ink); padding: 26px 24px; transform: translateX(100%);
    transition: transform .35s var(--ease); overflow-y: auto;
  }
  .mobile-panel.open { transform: none; }
  .mobile-panel a { display: block; font-family: var(--display); font-weight:700; font-size: 1.4rem; padding: 15px 0; border-bottom: 1px solid var(--line-dark); color: #fff; }
  .mobile-panel .mp-sub a { font-size: 1.05rem; padding: 11px 0 11px 16px; color:#aebccb; }
  .mobile-panel .btn { display: flex; align-items: center; justify-content: center; text-align: center; margin-top: 22px; width: 100%; padding: 15px 28px; font-size:1.05rem; }
  .mobile-panel .mp-contact { margin-top: 24px; color: #9fb0c0; font-size: .95rem; }
  .mobile-panel .mp-contact a { font-size:.98rem; display:inline; padding:0; border:0; color: var(--blue-2); }
  .mobile-panel a.active { color: #fff; box-shadow: inset 3px 0 0 var(--gold); padding-left: 12px; }
  .mobile-panel .mp-sub a.active { color: #fff; }
  body.nav-open { overflow: hidden; }
}
@media (max-width: 760px) {
  body { font-size: 17px; }
  .section { padding: 60px 0; }
  .section.reviews-tight { padding-top: 28px; }
  .section-sm { padding: 44px 0; }
  .sec-head { margin-bottom: 34px; }
  .cards, .cols-2, .cols-4, .quotes, .steps, .grid-2, .video-grid { grid-template-columns: 1fr; }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .svc-item { grid-template-columns: 1fr; gap: 16px; }
  .cta-band { padding: 40px 22px; }
  .form-card, .estimator-body, .scheduler-head, .steps-wrap, .progress { padding-left: 22px; padding-right: 22px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .sitemap-cols, .gallery-grid, .ba { grid-template-columns: 1fr; }
  .mobilebar { display: flex; }
  body { padding-bottom: 76px; }
  /* Phone header: drop the redundant "Schedule Now" (it lives in the bottom bar) — keep just logo + menu */
  .nav-cta .btn { display: none; }
  /* Reserve the bottom-right corner so the floating chat launcher can't cover the "Schedule Now" button */
  .mobilebar { padding-right: 84px; }

  /* ---- Mobile polish: tighter, more intentional rhythm ---- */
  /* Full-width, stacked CTAs feel premium and are easier to tap */
  .hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-cta .btn { width: 100%; }
  /* Hero trust stats: compact 3-up row on mobile (under the lead, above the form) */
  .hero-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 14px; margin-top: 30px; padding-top: 22px; }
  .hero-trust .stat .n { font-size: 1.5rem; }
  .hero-trust .stat .l { font-size: .72rem; margin-top: 5px; }
  .hero-inner { padding-block: 50px 60px; gap: 26px; }
  .hero h1 { line-height: 1.08; }
  .hero p.lead { margin-top: 18px; }
  .hero-form { max-width: none; }
  .hero-form .hf-form { padding: 4px 20px 22px; }
  .hero-form .progress { padding: 20px 20px 4px; }
  /* Service picker as a compact 2×2, not four tall stacked buttons */
  .hero-form .choice-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-form .choice { flex-direction: column; text-align: center; gap: 8px; padding: 16px 10px; }
  /* Comfortable tap targets everywhere */
  .btn { min-height: 48px; }
  .fstep-nav .btn { min-height: 52px; }
  /* Stats band: compact 2×2, dividers replaced with clean spacing */
  .band-grid { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
  .band-grid > div { padding: 0; }
  .band-grid > div + div { border: 0; }
  /* Featured cities: 2-up instead of a tall single stack */
  .area-feature { grid-template-columns: 1fr 1fr; gap: 12px; }
  .area-feature a { padding: 18px 14px; font-size: 1.04rem; }
  /* Trust strip: one tight line on mobile (short labels), never stacks.
     overflow-x is a safety net for very narrow phones — it stays one line
     and becomes a subtle swipe instead of wrapping to multiple rows. */
  .trust-strip .wrap { flex-wrap: nowrap; justify-content: space-between; gap: 8px; padding-block: 13px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .trust-strip .wrap::-webkit-scrollbar { display: none; }
  .trust-item { flex: 0 0 auto; gap: 4px; font-size: .6rem; letter-spacing: 0; white-space: nowrap; }
  .trust-item .ts-full { display: none; }
  .trust-item .ts-short { display: inline; }
  /* Tighten the dark schedule split so the form isn't pushed far down */
  .section.dark .wrap.split { gap: 32px; }
}
@media (max-width: 460px) {
  .wrap { padding-inline: 18px; }
  .section { padding: 52px 0; }
  .sec-head { margin-bottom: 28px; }
  .hero-inner { padding-block: 44px 54px; }
  .hero h1 { font-size: 2.1rem; line-height: 1.1; }
  .hero p.lead { margin-top: 16px; font-size: 1.08rem; }
  .sec-head h2 { font-size: 1.8rem; }
  .band-grid { gap: 24px 14px; }
  .area-grid { grid-template-columns: 1fr; }
  .cta-band h2 { font-size: 1.9rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .fstep { animation: none !important; }
  .hero-bg video { display: none !important; } /* fall back to the still poster image */
}

/* =========================================================
   Bolt hybrid brand accents (appended)
   Warm gold "lighting glow" over the night-blue design system.
   ========================================================= */
.eyebrow            { color: var(--gold-d); }
.eyebrow.on-dark    { color: var(--gold); }
.eyebrow.red        { color: var(--gold-d); }

/* Oswald is condensed — a touch of tracking keeps display type open */
h1, h2, h3, h4      { letter-spacing: .012em; }
.hero h1, .page-hero h1 { letter-spacing: .006em; }
.eyebrow            { letter-spacing: .26em; }

/* Optional gold CTA (warm glow) — used sparingly for lighting-forward accents */
.btn-gold           { background: var(--gold); color: #17130a; box-shadow: var(--shadow-gold); }
.btn-gold:hover     { background: var(--gold-d); color: #17130a; }

/* Script accent utility (Satisfy) */
.script             { font-family: var(--script); font-weight: 400; }

/* Warm gold hairline glow across the top of dark bands — subtle lighting motif */
.band, .cta-band    { position: relative; }
.section.dark::before, .band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(243,177,30,.55), transparent);
}

/* =========================================================
   Bolt Gallery block + lightbox + YouTube video thumbnails
   ========================================================= */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1000px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.gcell { display: block; position: relative; overflow: hidden; border-radius: var(--radius-sm); aspect-ratio: 4 / 3; background: var(--tint-2); box-shadow: var(--shadow-sm); }
.gcell img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.gcell:hover img { transform: scale(1.06); }
.gcell::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(14,31,43,.42)); opacity: 0; transition: opacity .3s; }
.gcell:hover::after { opacity: 1; }

/* Lightbox overlay */
.bolt-lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(8,16,24,.94); display: flex; align-items: center; justify-content: center; padding: 24px; }
.bolt-lightbox[hidden] { display: none; }
.bolt-lightbox .blx-stage { max-width: 92vw; max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.bolt-lightbox img { max-width: 92vw; max-height: 80vh; object-fit: contain; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.blx-cap { color: #c9d6e2; font-size: .9rem; text-align: center; }
.blx-close { position: absolute; top: 18px; right: 24px; background: none; border: none; color: #fff; font-size: 2.4rem; line-height: 1; cursor: pointer; opacity: .8; }
.blx-close:hover { opacity: 1; }
.blx-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff; width: 52px; height: 52px; border-radius: 999px; font-size: 1.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.blx-nav:hover { background: rgba(255,255,255,.2); }
.blx-prev { left: 20px; } .blx-next { right: 20px; }
@media (max-width: 600px) { .blx-nav { width: 42px; height: 42px; font-size: 1.4rem; } .blx-close { top: 10px; right: 14px; } }

/* YouTube video-card thumbnails (video-cards block, link-out variant) */
.video-card .vthumb { position: relative; }
.video-card .vthumb.has-thumb { background-size: cover; background-position: center; }
.video-card .vplay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.video-card .vplay svg { width: 26px; height: 26px; color: #fff; background: rgba(84,135,255,.92); border-radius: 999px; padding: 16px; box-sizing: content-box; box-shadow: var(--shadow-blue); transition: transform .25s var(--ease); }
.video-card:hover .vplay svg { transform: scale(1.08); background: var(--blue); }

/* =========================================================
   Bolt Contact Split block — two-column contact + form
   ========================================================= */
.contact-block { position: relative; background: var(--tint); overflow: hidden; }
.contact-block::before {
  content: ""; position: absolute; top: -10%; right: -8%; width: 46%; height: 70%;
  background: radial-gradient(circle at 70% 30%, rgba(84,135,255,.10), transparent 62%);
  pointer-events: none;
}
.contact-block::after {
  content: ""; position: absolute; bottom: -12%; left: -6%; width: 40%; height: 60%;
  background: radial-gradient(circle at 30% 70%, rgba(243,177,30,.10), transparent 62%);
  pointer-events: none;
}
.contact-split { position: relative; align-items: start; }
.contact-info .lead { margin-top: 14px; max-width: none; }

.contact-cards { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.contact-card {
  display: flex; align-items: center; gap: 15px; padding: 15px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--blue); }
.cc-ico {
  flex: none; width: 48px; height: 48px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, rgba(84,135,255,.14), rgba(243,177,30,.16));
  color: var(--blue);
}
.cc-ico svg { width: 22px; height: 22px; }
.cc-txt { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; min-width: 0; }
.cc-txt small { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: var(--gold-d); font-weight: 600; }
.cc-txt b { color: var(--head); font-size: 1.04rem; font-family: var(--body-font); font-weight: 700; word-break: break-word; }

.contact-areas { margin-top: 28px; }
.ca-label { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; color: #6f6b62; font-weight: 600; margin-bottom: 11px; }
.contact-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-chips .chip { font-size: .82rem; font-weight: 500; padding: 6px 13px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--head); }

.contact-social { display: flex; gap: 10px; margin-top: 28px; }
.contact-social a {
  width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; transition: background .25s var(--ease), transform .25s var(--ease);
}
.contact-social a:hover { background: var(--blue); transform: translateY(-2px); }
.contact-social a svg { width: 18px; height: 18px; }

/* Let the form fill its column on desktop */
.contact-form-col .scheduler { max-width: none; }

@media (max-width: 760px) {
  .contact-cards { margin-top: 22px; }
  .contact-block::before, .contact-block::after { display: none; }
}

/* =========================================================
   Hero YouTube background layer (desktop only; injected by JS)
   ========================================================= */
.hero-bg img { z-index: 0; }
.hero-bg::after { z-index: 1; }
.hero-yt { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.hero-yt.is-playing { opacity: 1; }
.hero-yt iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; border: 0; pointer-events: none; }
@media (max-width: 760px) { .hero-yt { display: none; } }

/* =========================================================
   Reviews summary badge + on-brand review avatars
   ========================================================= */
.reviews-summary {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center;
  margin-top: 18px; padding: 10px 20px; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow-sm);
}
.reviews-summary .rs-g { display: inline-flex; }
.reviews-summary .rs-score { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--head); line-height: 1; }
.reviews-summary .rs-stars { color: var(--star); letter-spacing: 2px; font-size: 1.02rem; }
.reviews-summary .rs-meta { font-size: .9rem; color: var(--body); font-weight: 500; }
@media (max-width: 460px) { .reviews-summary .rs-meta { width: 100%; } }

/* On-brand initials avatar (photos show when available; otherwise this) */
.quote .av {
  background: linear-gradient(145deg, var(--blue), var(--blue-d));
  box-shadow: 0 0 0 2px rgba(243,177,30,.35), var(--shadow-sm);
  font-size: .95rem; letter-spacing: .01em;
}

/* ============================================================ City / Location pages
   Polished layout for the 58 service-area city pages (page-location.php). */
.loc-hero .page-hero-img img { opacity: .22; }
.loc-hero::after { content:""; position:absolute; inset:0; background:
  radial-gradient(120% 80% at 15% 0%, rgba(84,135,255,.20), transparent 60%); pointer-events:none; }
.loc-hero .wrap { position: relative; z-index: 1; }
.loc-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.18);
  color: #eaf1f9; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
  padding: 7px 14px; border-radius: 999px; margin-bottom: 18px; backdrop-filter: blur(3px);
}
.loc-eyebrow svg { width: 14px; height: 14px; }
.loc-hero h1 .loc-sub {
  display: block; margin-top: 8px; font-family: var(--body-font);
  font-weight: 400; font-size: .42em; line-height: 1.25; color: #c9d6e2; letter-spacing: 0;
}

/* Article + sticky sidebar. */
.loc-layout { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 52px; align-items: start; }
.loc-main.prose { max-width: none; margin: 0; }
.loc-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 22px; }

.loc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: 0 14px 40px -26px rgba(14,31,43,.4); }
.loc-card h3 { font-family: var(--display); font-size: 1.18rem; color: var(--head); margin: 0 0 12px; }
.loc-card p { color: var(--body); font-size: .96rem; line-height: 1.6; margin: 0 0 18px; }
.loc-card .btn { width: 100%; }

/* Dark "get a quote" card for contrast. */
.loc-quote { background: linear-gradient(155deg, var(--ink) 0%, var(--ink-3) 100%); border-color: transparent; }
.loc-quote h3 { color: #fff; }
.loc-quote p { color: #c1d0dd; }
.loc-phone { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; color: #fff; font-family: var(--display); font-weight: 600; font-size: 1.14rem; }
.loc-phone svg { width: 17px; height: 17px; }
.loc-phone:hover { color: var(--blue-2); }

/* Nearby-areas internal links. */
.loc-nearby { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 2px; }
.loc-nearby a { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: var(--radius-sm); color: var(--head); font-weight: 500; font-size: .95rem; transition: background .15s, color .15s; }
.loc-nearby a svg { width: 15px; height: 15px; color: var(--blue); flex: none; }
.loc-nearby a span { flex: 1; }
.loc-nearby a i { font-style: normal; color: var(--blue); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.loc-nearby a:hover { background: var(--tint); color: var(--blue-d); }
.loc-nearby a:hover i { opacity: 1; transform: translateX(0); }
.loc-all { display: inline-block; font-weight: 600; color: var(--blue); font-size: .9rem; }

@media (max-width: 980px) {
  .loc-layout { grid-template-columns: 1fr; gap: 34px; }
  .loc-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .loc-aside { grid-template-columns: 1fr; }
}

/* Brief highlight when a "Free design consultation" CTA scrolls you to the form. */
.cta-flash { animation: bolt-cta-flash 1.5s ease-out; }
.cta-flash:focus { outline: none; }
@keyframes bolt-cta-flash {
  0%   { box-shadow: 0 0 0 0 rgba(84,135,255,0); }
  25%  { box-shadow: 0 0 0 4px rgba(84,135,255,.55); }
  100% { box-shadow: 0 0 0 0 rgba(84,135,255,0); }
}
@media (prefers-reduced-motion: reduce) { .cta-flash { animation: none; } }

/* =========================================================
   Hero — video-feature layout (headline + CTA left, video right,
   Google review strip + lead form below). Static background image.
   ========================================================= */
.hero--video .hero-bg::after { background: linear-gradient(180deg, rgba(11,20,28,.80) 0%, rgba(11,20,28,.60) 42%, rgba(11,20,28,.90) 100%), linear-gradient(105deg, rgba(11,20,28,.55), rgba(11,20,28,0) 70%); }
/* Video-dominant hero: copy on the left, the video occupying a wider column on
   the right. Buttons + trust stats are their own grid items so the video can
   slot into the button position on mobile (see the 960px block below). */
.hero--video .hero-inner {
	align-items: stretch;
	padding-block: 74px 44px;
	max-width: 1280px;
	grid-template-columns: minmax(0, 500px) minmax(0, 1fr);
	column-gap: 42px;
	row-gap: 14px;
	grid-template-areas:
		"lede  media"
		"cta   media"
		"trust media";
}
.hero--video .hero-copy  { grid-area: lede; align-self: center; }
.hero--video .hero-side  { grid-area: media; align-self: stretch; width: 100%; display: flex; }
.hero--video .hero-cta   { grid-area: cta; margin-top: 4px; }
.hero--video .hero-trust { grid-area: trust; margin-top: 4px; padding-top: 22px; }
/* Keep both CTAs on one line so the copy column stays compact (a wrapped,
   stacked pair would make the column tall and force the video to over-crop). */
.hero--video .hero-cta .btn { padding-inline: 22px; }
.hero--video .hero-cta .btn-primary { flex: 0 1 auto; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.hero-media { margin: 0; width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: #05090d; box-shadow: var(--shadow-lg); position: relative; aspect-ratio: var(--hv-ratio, 16 / 9); }
.hero-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(243,177,30,.22); pointer-events: none; }
/* Desktop/laptop: the video keeps its true 16:9 shape (no cropping) and sits
   centered in the media column beside the copy. */
@media (min-width: 961px) {
	.hero--video .hero-side  { align-self: center; }
	.hero--video .hero-media { aspect-ratio: var(--hv-ratio, 16 / 9); height: auto; min-height: 0; align-self: center; }
	.hero--video .hero-media video { object-fit: contain; }
	/* Roomier headline so the title column reads wide, not cramped into thin lines. */
	.hero--video .hero-copy h1 { font-size: clamp(2.6rem, 3.6vw, 3.4rem); }
}
.hero-foot { position: relative; z-index: 2; max-width: 940px; margin-inline: auto; padding-bottom: 84px; display: flex; flex-direction: column; gap: 24px; }
.hero-social { display: flex; flex-direction: column; gap: 14px; }
.hero-social-head { display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 7px 15px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; }
.hero-social-head .hss-g { display: inline-flex; }
.hero-social-head .hss-stars { color: var(--star); letter-spacing: 1px; font-size: .95rem; }
.hero-social-head .hss-label { color: #cdd8e3; font-size: .86rem; }
.hero-social-head .hss-label b { color: #fff; }
.hero-social-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-rev { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 16px 18px; }
.hero-rev-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.hero-rev-av { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, var(--blue), var(--blue-d)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; flex: none; overflow: hidden; box-shadow: 0 0 0 2px rgba(243,177,30,.35); }
.hero-rev-av img { width: 100%; height: 100%; object-fit: cover; }
.hero-rev-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hero-rev-meta b { color: #fff; font-size: .92rem; }
.hero-rev-stars { color: var(--star); font-size: .85rem; letter-spacing: 1px; }
.hero-rev p { color: #cdd8e3; font-size: .92rem; line-height: 1.5; margin: 0; }
.hero-formwrap { width: 100%; max-width: 640px; margin-inline: auto; }
.hero-formwrap .hero-form { margin: 0; }
@media (max-width: 960px) {
	/* Single column: headline/copy, then the VIDEO in the old button slot, then
	   the buttons, then the trust stats. The video becomes a primary element. */
	.hero--video .hero-inner {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 26px;
		padding-block: 60px 40px;
		grid-template-areas:
			"lede"
			"media"
			"cta"
			"trust";
	}
	.hero--video .hero-side { max-width: none; }
	.hero--video .hero-cta,
	.hero--video .hero-trust { margin-top: 0; }
	.hero--video .hero-media { max-width: none; margin-inline: auto; }
}
@media (max-width: 600px) { .hero-social-cards { grid-template-columns: 1fr; } .hero-foot { padding-bottom: 60px; } .hero-cta .btn { width: 100%; } .hero-social-head { align-self: stretch; justify-content: center; } }

/* Standalone Lead CTA section (reviews + form pulled out of the hero) */
.lead-cta .lead-cta-inner { max-width: 940px; margin-inline: auto; display: flex; flex-direction: column; gap: 28px; }
.lead-cta .sec-head { margin-bottom: 0; }
.lead-cta .hero-social { align-items: center; }
.lead-cta .hero-social-head { align-self: center; }

/* =========================================================
   Polished, Google-authentic review avatars (photo-less fallback).
   Real reviewer photos render in place of these when available.
   ========================================================= */
.quote .av, .hero-rev-av {
  color: #fff; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  background: radial-gradient(circle at 32% 26%, #78a6ff 0%, var(--blue) 52%, var(--blue-d) 100%);
}
.quote .av { width: 46px; height: 46px; font-size: 1.06rem; box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(14,31,43,.20); }
.hero-rev-av { font-size: 1rem; box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 3px 10px rgba(0,0,0,.28); }
/* Real photos: clean circle, no gradient/initial styling bleed */
.quote .av--photo, .quote .av--photo img,
.hero-rev-av img { background: none; }
.quote .av--photo { box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(14,31,43,.20); }

/* =========================================================
   Why Bolt? — image placeholder slots.
   Temporary. Each .slot-empty marks a spot waiting on a real
   photo from the client. Delete the span (and this block, once
   the last one is gone) when the images land.
   ========================================================= */
.slot-empty {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--tint); border: 1px dashed #c3d0dc; color: var(--body);
  font-family: var(--display); font-weight: 500; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; text-align: center;
  line-height: 1.9; padding: 14px;
}
.card-img .slot-empty { border: 0; border-bottom: 1px dashed #c3d0dc; }
.split-media .slot-empty {
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}