/* ============================================================
   Landscaper Template — Alexo Digital reference design system
   Light SaaS theme adapted from alexodigital.com. Green-forward
   primary with Alexo blue retained as secondary/CTA accent.
   Brand colors are injected per-config via brand.css (loaded AFTER
   this file), so these :root values are fallbacks only.
   ============================================================ */
:root {
  /* fallbacks — overridden by brand.css */
  --primary: #2f7a3f;
  --primary-dark: #235e31;
  --primary-light: #4a9a5b;
  --primary-soft: #eef6ef;
  --accent: #2863bc;
  --band: #10231a;

  --bg: #ffffff;
  --bg-alt: #f5f6f8;
  --bg-card: #ffffff;

  --text: #16181d;
  --text-secondary: #545b66;
  --text-tertiary: #8a909c;
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #c3cdc6;

  --success: #1a9e5f;
  --star: #f5a623;
  --border: #e5e8ea;
  --border-hover: #cfd6d2;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.05), 0 6px 20px rgba(16, 24, 40, 0.06);
  --shadow-card-hover: 0 14px 36px rgba(16, 24, 40, 0.14);
  --shadow-lg: 0 18px 50px rgba(16, 24, 40, 0.12);

  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1180px;
  --max-width-narrow: 820px;
  --section-spacing: clamp(56px, 7vw, 104px);
  --container-padding: clamp(20px, 5vw, 40px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
}

img, video, iframe, svg { max-width: 100%; display: block; }

/* Inline icons scale with their text context. Tile icons (.card__icon svg,
   .feature__icon svg, .checks li svg) keep their explicit sizes via higher
   specificity. */
.icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  display: inline-block;
  vertical-align: -0.15em;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: inherit;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text);
}
h1 { font-size: clamp(2.3rem, 5.2vw, 3.7rem); }
h2 { font-size: clamp(1.85rem, 3.8vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
h4 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
p { color: var(--text-secondary); }

/* --- Layout primitives --- */
.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--container-padding); }
.container--narrow { max-width: var(--max-width-narrow); }
.section { padding: var(--section-spacing) 0; }
.section--alt { background: var(--bg-alt); }
.section--soft { background: var(--primary-soft); }
.section--band { background: var(--band); color: var(--text-on-dark); }
.section--band h1, .section--band h2, .section--band h3 { color: #fff; }
.section--band p { color: var(--text-on-dark-muted); }
.section--tight { padding: clamp(40px, 5vw, 68px) 0; }
/* Contact: the two-column (details+map / form) sits right under the nav with a
   thin top gap, no breadcrumb, so it reads as the first/hero section. */
.section--contact-hero { padding-top: clamp(24px, 3vw, 40px); padding-bottom: clamp(40px, 5vw, 72px); }
/* The page H1 lives here now (hero removed); keep it sized like a section heading. */
.section--contact-hero h1 { font-size: clamp(1.85rem, 3.8vw, 2.8rem); }

.section-head { max-width: 720px; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.section-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 14px;
}
.section-label::before { content: ""; width: 22px; height: 2px; background: var(--primary); display: inline-block; }
.section--band .section-label { color: #8fd6a3; }
.section--band .section-label::before { background: #8fd6a3; }
.section-head p { margin-top: 14px; font-size: 1.08rem; }

.eyebrow { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 700; font-size: 1rem; line-height: 1;
  padding: 15px 28px; border-radius: var(--radius-pill);
  transition: var(--transition); white-space: nowrap; cursor: pointer;
}
.btn--primary { background: var(--primary); color: #fff; box-shadow: 0 6px 18px rgba(20, 83, 45, 0.22); }
.btn--primary:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(20, 83, 45, 0.3); }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { filter: brightness(1.08); transform: translateY(-2px); }
.btn--ghost { background: #fff; color: var(--text); border: 1.5px solid var(--border); }
.btn--ghost:hover { border-color: var(--primary); color: var(--primary); }
.btn--on-dark { background: #fff; color: var(--text); }
.btn--on-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn--ghost-on-dark { background: rgba(255,255,255,0.08); color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.btn--ghost-on-dark:hover { background: rgba(255,255,255,0.16); }
.btn--lg { padding: 18px 36px; font-size: 1.08rem; }
.btn--block { width: 100%; }

/* --- Top bar (utility) --- */
.topbar {
  background: var(--band); color: var(--text-on-dark-muted);
  font-size: 0.85rem; padding: 7px 0;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.topbar a { color: #fff; font-weight: 600; }
.topbar__badges { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar__badges span { display: inline-flex; align-items: center; gap: 6px; }

/* --- Nav --- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.nav__brand { display: flex; align-items: center; gap: 11px; }
/* Logo lockup: mark + wordmark + tagline */
.brand-mark {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark));
  display: grid; place-items: center; box-shadow: 0 2px 9px rgba(20, 83, 45, 0.28);
}
.brand-mark svg { width: 25px; height: 25px; }
.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); white-space: nowrap; }
.brand-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--primary); margin-top: 4px; }
/* legacy square mark fallback */
.nav__brand .logo-mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
}
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__item { position: relative; }
.nav__item--mobile-only { display: none; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 10px 14px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 0.96rem; color: var(--text-secondary); transition: var(--transition);
}
.nav__link:hover, .nav__item:hover .nav__link { color: var(--primary); background: var(--primary-soft); }
.nav__dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(8px); transition: var(--transition); max-height: 70vh; overflow-y: auto;
}
.nav__item:hover .nav__dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown--wide { min-width: 320px; columns: 2; column-gap: 4px; }
.nav__dropdown a {
  display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 0.92rem; font-weight: 500; color: var(--text-secondary); break-inside: avoid;
}
.nav__dropdown a:hover { background: var(--primary-soft); color: var(--primary); }
.nav__cta { display: flex; align-items: center; gap: 12px; }
.nav__phone { font-weight: 800; color: var(--text); white-space: nowrap; }
.nav__phone span { color: var(--primary); }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: var(--radius-sm); }
.nav__toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px auto; transition: var(--transition); }

/* --- Hero --- */
/* Fill the fold below the sticky topbar (~34px) + nav (~74px) so the hero
   image and the trust row both sit above the fold on laptop heights. */
.hero { position: relative; min-height: calc(100svh - 108px); display: flex; align-items: center; color: #fff; overflow: hidden; }
/* Interior heroes (services, areas, about, etc.) also fill the fold so the
   photo covers the view above the fold; a small min keeps short screens sane. */
.hero--sm { min-height: max(520px, calc(100svh - 108px)); }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,20,12,0.86) 0%, rgba(8,20,12,0.62) 42%, rgba(8,20,12,0.18) 100%);
}
.hero__inner { position: relative; z-index: 2; padding: clamp(32px, 5vw, 72px) 0; max-width: 720px; }
.hero h1 { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.4); }
.hero__eyebrow { color: #b9ecc8; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.82rem; margin-bottom: 16px; display: inline-block; }
.hero__sub { color: #e9efe9; font-size: clamp(1.05rem, 1.5vw, 1.22rem); margin: 20px 0 30px; max-width: 600px; text-shadow: 0 1px 10px rgba(0,0,0,0.35); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.hero__trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 600; color: #eaf3ea; }
.hero__trust-item .stars { color: var(--star); letter-spacing: 1px; }

/* --- Home split hero (copy left, quote form right) --- */
.hero--home .hero__inner {
  max-width: var(--max-width); width: 100%;
  display: grid; grid-template-columns: 1fr 432px; gap: clamp(28px, 4vw, 60px);
  align-items: center;
  padding-top: clamp(18px, 2.5vw, 40px); padding-bottom: clamp(18px, 2.5vw, 40px);
}
.hero--home .hero__copy { max-width: 580px; }
.hero-form .quoteform { background: rgba(255, 255, 255, 0.98); padding: clamp(20px, 2vw, 28px); }
.hero-form .quoteform h3 { font-size: 1.4rem; }
.hero-form .quoteform p.sub { margin-bottom: 14px; }
.hero-form .field { margin-bottom: 11px; }
.hero-form .quoteform .form-micro { margin-top: 9px; }

/* Quote-form reveal: form preloads hidden, then expands in place on click.
   Reusable on any container (hero or in-page) via the .qf-reveal class. */
.qf-reveal { transition: max-height .55s cubic-bezier(.16,1,.3,1), opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1); }
.qf-reveal.is-collapsed { max-height: 0; opacity: 0; transform: translateY(14px); pointer-events: none; overflow: hidden; }
.qf-reveal.is-revealed { max-height: 1200px; opacity: 1; transform: none; }

/* Desktop hero reveal: reserve the form's space from the start so revealing only
   fades it in. This stops the hero from growing and pushing the page down on
   shorter viewports (the form is taller than the hero's natural height there). */
@media (min-width: 861px) {
  /* Pin a stable min-height so the reserved space does NOT follow the GHL iframe
     as form_embed.js collapses it to ~0 then re-expands during init. That transient
     was what made the hero drop then rise on load. The form is invisible until
     revealed, so the reserved height just holds the layout steady. */
  .hero-form.qf-reveal { max-height: none; min-height: var(--hero-form-h, 668px); overflow: visible; transition: opacity .18s ease; }
  .hero-form.qf-reveal.is-collapsed { max-height: none; opacity: 0; visibility: hidden; transform: none; pointer-events: none; }
  .hero-form.qf-reveal.is-revealed { max-height: none; opacity: 1; visibility: visible; }
  /* No-JS fallback: a #hash link to the form (services-hub fallback) reveals it. */
  .hero-form.qf-reveal:target { opacity: 1; visibility: visible; }
}
/* No-JS / direct-link fallback: an anchor to the form reveals it via :target */
.qf-reveal:target { max-height: 1200px; opacity: 1; transform: none; pointer-events: auto; }

/* Clickable prompt card that introduces a collapsed form (contact page). */
.qf-prompt { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-card); cursor: pointer; text-decoration: none; color: inherit; overflow: hidden; max-height: 600px; transition: max-height .45s cubic-bezier(.16,1,.3,1), opacity .35s ease, border-color .2s ease; }
.qf-prompt:hover { border-color: var(--primary); }
.qf-prompt h3 { margin-bottom: 6px; }
.qf-prompt p { color: var(--text-secondary); font-size: 0.95rem; margin-bottom: 18px; }
.qf-prompt.is-hidden { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }

/* Subtle-premium green reveal button */
.hero__reveal-btn { position: relative; transition: transform .2s ease, box-shadow .2s ease; animation: heroPulse 2.6s ease-in-out infinite; }
.hero__reveal-btn:hover { transform: translateY(-1px) scale(1.02); box-shadow: 0 0 0 4px rgba(47,122,63,.22), 0 10px 24px rgba(47,122,63,.42); }
.hero__reveal-arrow { display: inline-block; margin-left: 6px; transition: transform .22s ease; }
.hero__reveal-btn:hover .hero__reveal-arrow { transform: translateX(4px); }
.hero__reveal-btn.is-spent { animation: none; }
@keyframes heroPulse { 0%,100% { box-shadow: 0 6px 18px rgba(47,122,63,.35); } 50% { box-shadow: 0 8px 28px rgba(47,122,63,.58); } }
@media (prefers-reduced-motion: reduce) {
  .hero__reveal-btn { animation: none; }
  .hero-form { transition: opacity .3s ease; }
  .hero-form.is-collapsed { transform: none; }
}

/* --- Footer logo (on dark band) --- */
.footer .brand-name { color: #fff; }
.footer .brand-tag { color: #8fd6a3; }

/* --- Trust bar --- */
.trustbar { background: #fff; border-bottom: 1px solid var(--border); }
.trustbar .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding-top: 30px; padding-bottom: 30px; }
.trust-stat { text-align: center; }
.trust-stat__num { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; color: var(--primary); letter-spacing: -0.02em; }
.trust-stat__label { font-size: 0.9rem; color: var(--text-secondary); margin-top: 4px; font-weight: 500; }

/* --- Cards / grids --- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px; transition: var(--transition); height: 100%;
}
.card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.card__icon {
  width: 50px; height: 50px; border-radius: var(--radius-md); margin-bottom: 18px;
  background: var(--primary-soft); color: var(--primary); display: grid; place-items: center;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3, .card h4 { margin-bottom: 9px; }
.card p { font-size: 0.97rem; }
.card__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 700; color: var(--primary); font-size: 0.94rem; }
.card__link:hover { gap: 10px; }

/* service card with image */
.svc-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.svc-card__img { aspect-ratio: 16 / 10; background-size: cover; background-position: center; }
.svc-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }

/* feature card */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon { width: 46px; height: 46px; flex: none; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); display: grid; place-items: center; }
.feature__icon svg { width: 24px; height: 24px; }
.feature h4 { margin-bottom: 6px; }
.feature p { font-size: 0.95rem; }
.badge-pro { display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 9px; border-radius: var(--radius-pill); vertical-align: middle; margin-left: 8px; }

/* --- Steps --- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 8px; }
.step__num { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; }
.step h4 { margin-bottom: 8px; }
.step p { font-size: 0.96rem; }

/* --- Split / media --- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.split__media { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
.split__media--tall { aspect-ratio: 3 / 4; }
.prose > * + * { margin-top: 16px; }
.prose h2 { margin-bottom: 4px; }
.prose ul.checks { display: grid; gap: 12px; margin-top: 18px; }
.checks li { display: flex; gap: 11px; align-items: flex-start; font-weight: 500; color: var(--text); }
.checks li svg { width: 22px; height: 22px; flex: none; color: var(--success); margin-top: 1px; }

/* --- Gallery --- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-item { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background-size: cover; background-position: center; position: relative; }
.gallery-item span { position: absolute; left: 12px; bottom: 12px; background: rgba(8,20,12,0.78); color: #fff; font-size: 0.78rem; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill); }
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; border-radius: var(--radius-lg); overflow: hidden; }
.beforeafter figure { position: relative; aspect-ratio: 1 / 1; background-size: cover; background-position: center; }
.beforeafter figcaption { position: absolute; left: 10px; top: 10px; background: rgba(8,20,12,0.78); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }

/* --- Reviews --- */
.review { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.review__stars { color: var(--star); letter-spacing: 2px; font-size: 1.05rem; margin-bottom: 12px; }
.review__text { color: var(--text); font-size: 1rem; }
.review__meta { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.review__avatar { width: 42px; height: 42px; border-radius: var(--radius-pill); background-size: cover; background-position: center; background-color: var(--primary-soft); flex: none; }
.review__name { font-weight: 700; font-size: 0.94rem; }
.review__loc { font-size: 0.84rem; color: var(--text-tertiary); }
.demo-note { font-size: 0.82rem; color: var(--text-tertiary); text-align: center; margin-top: 26px; font-style: italic; }

/* --- Reviews carousel (GHL-style) --- */
.reviews-carousel { max-width: var(--max-width); margin: 0 auto; }
.rc-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.rc-badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 8px 16px; box-shadow: var(--shadow-card); }
.rc-agg { font-size: 1.05rem; color: var(--text-secondary); }
.rc-agg .rc-stars { color: var(--star); letter-spacing: 2px; }
.rc-agg strong { color: var(--text); font-size: 1.15rem; }
.rc-viewport { overflow: hidden; }
.rc-track { display: flex; transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.rc-slide { flex: 0 0 33.3333%; box-sizing: border-box; padding: 6px 11px; }
.rc-slide .review { height: 100%; }
.rc-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; }
.rc-prev, .rc-next { width: 44px; height: 44px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: #fff; font-size: 1.5rem; line-height: 1; color: var(--text); display: grid; place-items: center; transition: var(--transition); }
.rc-prev:hover, .rc-next:hover { border-color: var(--primary); color: var(--primary); box-shadow: var(--shadow-card); }
.rc-dots { display: flex; gap: 8px; align-items: center; }
.rc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); cursor: pointer; transition: var(--transition); border: none; padding: 0; }
.rc-dot.active { background: var(--primary); width: 26px; border-radius: var(--radius-pill); }
@media (max-width: 860px) { .rc-slide { flex-basis: 50%; } }
@media (max-width: 560px) { .rc-slide { flex-basis: 100%; } }

/* --- FAQ --- */
.faq { max-width: 800px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-weight: 700; font-size: 1.06rem; color: var(--text); }
.faq__q::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--primary); transition: var(--transition); flex: none; }
.faq__item.open .faq__q::after { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq__a-inner { padding: 0 0 22px; color: var(--text-secondary); }

/* --- Quote form --- */
.quoteform { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 38px); box-shadow: var(--shadow-card); }
.quoteform h3 { margin-bottom: 6px; }
.quoteform p.sub { font-size: 0.95rem; margin-bottom: 20px; }
.quoteform--embed { padding: 4px; overflow: hidden; }
.quoteform--embed iframe { display: block; width: 100%; background: transparent; border-radius: 12px; }
.hero-form .quoteform--embed { padding: 4px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 6px; color: var(--text); }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-md); background: #fff; color: var(--text); transition: var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-micro { font-size: 0.82rem; color: var(--text-tertiary); margin-top: 12px; text-align: center; }

/* --- CTA band --- */
.cta-band { text-align: center; }
.cta-band h2 { color: #fff; max-width: 720px; margin: 0 auto 14px; }
.cta-band p { color: var(--text-on-dark-muted); max-width: 560px; margin: 0 auto 28px; font-size: 1.08rem; }
.cta-band .hero__cta { justify-content: center; }

/* Bottom CTA band with an embedded quote form (copy left, form right) */
.cta-band--form { text-align: left; }
.cta-band__inner { display: grid; grid-template-columns: 1fr 432px; gap: clamp(28px, 4vw, 60px); align-items: center; }
.cta-band--form h2 { color: #fff; max-width: none; margin: 0 0 14px; }
.cta-band--form p { color: var(--text-on-dark-muted); max-width: 480px; margin: 0 0 22px; font-size: 1.08rem; }
.cta-band__trust { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; font-size: 0.92rem; font-weight: 600; color: #eaf3ea; }
.cta-band__trust span { display: inline-flex; align-items: center; gap: 8px; }
.cta-band__trust .stars { color: var(--star); letter-spacing: 1px; }
.cta-band__form .quoteform { background: #fff; }
@media (max-width: 860px) {
  .cta-band__inner { grid-template-columns: 1fr; }
  .cta-band--form { text-align: center; }
  .cta-band--form p, .cta-band__trust { margin-left: auto; margin-right: auto; }
  .cta-band__trust { align-items: center; }
  .cta-band__form { max-width: 480px; margin: 0 auto; width: 100%; }
}

/* --- Area / chips --- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-pill); background: #fff; border: 1px solid var(--border); font-weight: 600; font-size: 0.92rem; color: var(--text-secondary); transition: var(--transition); }
.chip:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
.neighborhoods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.neighborhoods span { font-size: 0.86rem; color: var(--text-secondary); background: var(--bg-alt); padding: 6px 13px; border-radius: var(--radius-pill); }
.map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); aspect-ratio: 16 / 9; }
.map-embed iframe { width: 100%; height: 100%; border: 0; }

/* --- Breadcrumb --- */
.breadcrumb { font-size: 0.85rem; color: var(--text-tertiary); padding: 16px 0; }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { margin: 0 7px; }

/* --- Footer --- */
.footer { background: var(--band); color: var(--text-on-dark-muted); padding: clamp(48px, 6vw, 76px) 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 44px; }
.footer__brand .nav__brand { color: #fff; margin-bottom: 14px; }
.footer__brand p { color: var(--text-on-dark-muted); font-size: 0.94rem; max-width: 320px; }
.footer__brand .footer__contact { margin-top: 18px; display: grid; gap: 8px; font-size: 0.92rem; }
.footer__brand .footer__contact a { color: #fff; font-weight: 600; }
.footer__col h5 { color: #fff; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; }
.footer__col a { display: block; padding: 6px 0; color: var(--text-on-dark-muted); font-size: 0.92rem; }
.footer__col a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 22px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 0.85rem; }
.footer__bottom a:hover { color: #fff; }
.footer__powered { font-size: 0.82rem; }
.footer__powered a { color: #8fd6a3; font-weight: 600; }

/* --- Standalone review-collection page --- */
/* Compact header so the survey's first step is within view immediately on click. */
.review-collect { background: var(--bg-alt); min-height: 100vh; }
.rc-page { max-width: 620px; margin: 0 auto; padding: clamp(14px, 2.5vw, 28px) 16px 40px; text-align: center; }
.rc-page .nav__brand { display: inline-flex; margin-bottom: 14px; }
.rc-page h1 { font-size: clamp(1.4rem, 3.4vw, 1.95rem); margin-bottom: 6px; }
.rc-page > p { max-width: 460px; margin: 0 auto 16px; font-size: 0.95rem; }
.rc-survey { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(8px, 1.5vw, 16px); box-shadow: var(--shadow-card); overflow: hidden; }
.rc-survey iframe { width: 100%; min-height: 540px; display: block; }

/* --- Standalone discount funnel page --- */
.discount-page { background: var(--bg-alt); min-height: 100vh; }
.dc-badge { display: inline-block; background: var(--primary); color: #fff; font-weight: 800; letter-spacing: 0.5px; font-size: 1.05rem; padding: 7px 18px; border-radius: var(--radius-pill); margin-bottom: 14px; box-shadow: var(--shadow-card); }
.dc-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin: 0 auto 20px; font-size: 0.9rem; color: var(--text-secondary); }
.dc-trust strong { color: var(--text); }
.dc-share { max-width: 460px; margin: 16px auto 0; font-size: 0.92rem; color: var(--text-secondary); }
.dc-call { margin-top: 10px; font-size: 0.9rem; color: var(--text-secondary); }
.dc-call a { color: var(--primary); font-weight: 600; }

/* --- Sticky mobile call bar --- */
/* Floating mobile CTA bar: sits bottom-left and leaves the bottom-right corner
   clear for the chat widget bubble so the two never overlap. */
.mobile-bar { display: none; position: fixed; bottom: 12px; left: 12px; right: 88px; z-index: 60; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 8px 24px rgba(16,24,40,0.18); padding: 8px; gap: 8px; }
.mobile-bar .btn { flex: 1; padding: 12px 10px; font-size: 0.92rem; }

/* --- Utility --- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.lead { font-size: 1.12rem; color: var(--text-secondary); }
.pill-note { display: inline-block; background: var(--primary-soft); color: var(--primary-dark); font-weight: 700; font-size: 0.86rem; padding: 7px 16px; border-radius: var(--radius-pill); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .trustbar .container { grid-template-columns: repeat(2, 1fr); gap: 26px; }
}
@media (max-width: 860px) {
  .nav__links { position: fixed; inset: 74px 0 auto 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--border); padding: 14px; gap: 2px; box-shadow: var(--shadow-lg); transform: translateY(-130%); transition: var(--transition); max-height: calc(100vh - 74px); overflow-y: auto; }
  .nav__links.open { transform: translateY(0); }
  .nav__toggle { display: block; }
  /* Mobile: each parent with a submenu is a collapsed accordion (tap to expand) */
  .nav__dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; columns: 1; padding: 0; max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .nav__item.is-open > .nav__dropdown { max-height: 80vh; padding: 2px 0 8px 14px; overflow-y: auto; }
  .nav__dropdown--wide { columns: 1; }
  .nav__item:hover .nav__link { background: none; }
  .nav__link .icon { transition: transform .25s ease; }
  .nav__item.is-open > .nav__link .icon { transform: rotate(90deg); }
  .nav__cta .btn { display: none; }
  .nav__phone { display: none; }              /* redundant on mobile (topbar + sticky bar carry it); frees room for the brand */
  .brand-name { font-size: 1.05rem; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-mark svg { width: 22px; height: 22px; }
  .hero--home .hero__inner { grid-template-columns: 1fr; }
  .hero--home .hero-form { max-width: 480px; }
  .hero--home .hero__copy { max-width: none; }
  .nav__item--mobile-only { display: block; }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split__media { aspect-ratio: 16 / 10; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .mobile-bar { display: flex; }
  body { padding-bottom: 80px; }
  /* Hide the utility topbar on mobile (hero already shows the rating + reviews) */
  .topbar { display: none; }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .trustbar .container { grid-template-columns: repeat(2, 1fr); }
  .field-row { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero { min-height: 92vh; }
}