/* ============================================================
   Bleach Boys Cleaning — "Framed Canvas" visual system
   FlyHigh-style travel-booking landing aesthetic.
   Visual/design layer only — no content changes.
   ============================================================ */

:root {
  /* palette */
  --canvas:      #F2F1EE;   /* framed content surface */
  --page:        #F2F1EE;   /* viewport canvas behind the floating frame */
  --card:        #FFFFFF;
  --ink:         #14181F;   /* near-black */
  --navy:        #1B2A4A;   /* deep navy blue for dark chips/buttons */
  --muted:       #5E636B;   /* WCAG AA (5.3:1 on the #F2F1EE canvas) */
  --muted-2:     #63686F;   /* WCAG AA (5.0:1 on canvas) — was #9AA0A6, too light */
  --border:      #E7E5E0;
  --border-2:    #ECEAE5;
  --gold:        #E8A33D;   /* used sparingly: stars, accents, active */
  --gold-soft:   #FBEFD9;
  --green:       #7DC242;
  --cyan:        #62c7e3;   /* brand cyan for accent buttons */

  /* geometry */
  --frame-radius: 30px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 12px;

  /* shadow */
  --shadow-soft: 0 18px 50px rgba(20, 24, 31, .08);
  --shadow-card: 0 8px 30px rgba(20, 24, 31, .06);
  --shadow-pop:  0 24px 60px rgba(20, 24, 31, .16);

  /* type */
  --font: "SF Pro Display", "Plus Jakarta Sans", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --eyebrow: .68rem;
}

/* local SF Pro Display — upright weights mapped across the ranges the page
   uses (300/400 → Regular, 500/600 → Medium, 700/800 → Bold) so the weight
   hierarchy renders with real faces, no faux-bold */
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFPRODISPLAYREGULAR.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFPRODISPLAYMEDIUM.woff2") format("woff2");
  font-weight: 500 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "SF Pro Display";
  src: url("fonts/SFPRODISPLAYBOLD.woff2") format("woff2");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

/* scroll reveal — sections fade + rise into view (only when JS is on) */
.js .frame > section,
.js .frame > .quote-wrap,
.js .frame > footer {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .frame > .is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .frame > section,
  .js .frame > .quote-wrap,
  .js .frame > footer { opacity: 1; transform: none; transition: none; }
}

/* full-width background photo — starts at the top, fades out mid-services */
.page-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1450px;              /* how far down the photo reaches (the red line) */
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(242,241,238,.5), rgba(242,241,238,.4)),
    image-set(
      url("images/house-cleaning-service.webp") type("image/webp"),
      url("images/house-cleaning-service.jpeg") type("image/jpeg")
    ) center top / cover no-repeat;
  /* fade out at the bottom so it ends softly instead of cutting */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 82%, transparent 100%);
}

html {
  scroll-behavior: smooth;
  margin: 0;
  background: #F2F1EE;   /* canvas on all sides + overscroll */
}

body {
  margin: 0;
  position: relative;
  overflow-x: clip;   /* contain full-bleed sections without breaking sticky nav */
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* all headings render in dark navy blue */
h1, h2, h3, h4, h5, h6 { color: var(--navy); }

/* ---------- shared helpers ---------- */

.eyebrow {
  font-size: var(--eyebrow);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 .6rem;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
}
.section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0;
  max-width: 22ch;
}
.section-head .sub {
  color: var(--muted);
  margin: .55rem 0 0;
  font-size: 1rem;
  max-width: 52ch;
}
.section-head .desc {
  color: var(--muted);
  margin: .55rem 0 0;
  max-width: 60ch;
}

/* "Explore All" style link */
.link-explore {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  font-size: .9rem;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: gap .2s ease, opacity .2s ease;
}
.link-explore:hover { gap: .7rem; opacity: .7; }

/* pill buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border-radius: 999px;
  padding: .95rem 1.6rem;
  font-weight: 700;
  font-size: .95rem;
  border: 1.5px solid transparent;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  line-height: 1;
}
.btn:hover {
  background: var(--green);
  border-color: var(--green);
  color: var(--navy);
  transform: translateY(-2px);
}
.btn .arw { transition: transform .2s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* primary button — plain dark-blue pill, no glow/ring/hover effects */
.btn-primary {
  color: #fff;
  border: none;
  background: var(--navy);
  box-shadow: none;
}

.btn-outline {
  background: transparent;
  color: var(--ink);
  border-color: rgba(20, 24, 31, .22);
}
.btn-outline:hover { border-color: var(--green); background: var(--green); color: var(--navy); }

.btn-lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; justify-content: center; }

/* gold star inline */
.stars { color: var(--gold); letter-spacing: 1px; }

/* trust & risk-eliminator block */
.trust-section {
  position: relative;
  margin-top: clamp(36px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* halved top space (forehead) above the heading; bottom padding so the
   green (and its fade) clears the text */
.trust-section.section-pad {
  padding-top: clamp(52px, 7.5vw, 96px);
  padding-bottom: clamp(52px, 7.5vw, 96px);
}
/* green background band behind the text, faded out on the left & right */
.trust-section::before {
  content: "";
  position: absolute;
  top: -60px;
  bottom: -60px;
  left: 0;
  right: 0;
  pointer-events: none;
  background: #fff;
  /* fade all four edges (sides + top/bottom) so the band blends evenly */
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image:
    linear-gradient(90deg, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
.trust-block { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; text-align: center; }
.trust-block h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: .3rem 0 1rem;
}
.trust-block p {
  color: #3A3F46;
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0;
}
.trust-block strong { color: var(--navy); }

/* ---------- quote popup modal ---------- */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.quote-modal.is-open { display: flex; }
.quote-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 15, 25, .6);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.quote-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 94vh;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  animation: modalPop .22s ease;
}
@keyframes modalPop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* LeadHubb quote form frame (inline embed inside our own modal) */
.quote-modal__frame {
  overflow-y: auto; /* scroll only if the form is taller than the viewport allows */
  min-height: 478px; /* grow to fit the whole form (Submit + bottom) instead of clipping at a fixed height */
  max-height: 94vh;
  border-radius: 16px;
}
.quote-modal__frame iframe {
  width: 100%;
  height: 560px; /* fallback; LeadHub auto-resizes to the true content height */
  border: 0;
  display: block;
}
.quote-modal__close {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .06);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.quote-modal__close:hover { background: rgba(0, 0, 0, .12); }
body.modal-open { overflow: hidden; }

/* legal / content pages (privacy, terms) */
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.02em; margin: .3rem 0 .3rem; }
.legal-updated { color: var(--muted); font-size: .9rem; margin: 0 0 2rem; }
.legal h2 { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 800; margin: 2.2rem 0 .5rem; }
.legal p { color: #3A3F46; line-height: 1.75; margin: 0 0 1rem; }
.legal ul { color: #3A3F46; line-height: 1.75; margin: 0 0 1rem; padding-left: 1.2rem; }
.legal ul li { margin-bottom: .3rem; }
.legal a { color: #1a73e8; font-weight: 600; }
.legal a:hover { text-decoration: underline; }
.legal-back { margin-top: 2.4rem; }

/* service / location subpages — two columns: content left, form right
   (over the full-page background photo, like the homepage) */
.subpage-hero {
  max-width: 1120px;
  margin: 0 auto clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.subpage-hero-inner { text-align: left; }
/* "Ready to book?" CTA spanning the bottom of the hero */
.ready-cta {
  grid-column: 1 / -1;
  margin-top: clamp(16px, 3vw, 36px);
  padding: clamp(1.8rem, 4vw, 3rem);
  border-radius: var(--r-lg);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.ready-cta h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; color: var(--navy); margin: 0 0 .4rem; }
.ready-cta p { color: var(--muted); margin: 0 0 1.3rem; }
.ready-cta-actions { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.ready-call { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.subpage-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: .3rem 0 .6rem;
  color: var(--navy);
}
.subpage-hero h2,
.subpage-hero h3 {
  color: var(--navy);
  font-weight: 800;
  line-height: 1.15;
}
.subpage-hero h2 {
  font-size: clamp(1.35rem, 2.5vw, 1.9rem);
  margin: 1.4rem 0 .7rem;
}
.subpage-hero h3 {
  font-size: clamp(1.08rem, 2vw, 1.35rem);
  margin: 1.5rem 0 .55rem;
}
.subpage-hero .sub { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.2rem; }
.subpage-hero .subpage-copy { color: #3A3F46; line-height: 1.75; margin: 0 0 1.4rem; }
.subpage-hero .subpage-copy strong { color: var(--navy); }
.subpage-hero h4 { font-size: 1rem; font-weight: 800; margin: 1.6rem 0 .6rem; color: var(--navy); }
.subpage-hero .panel-features { margin: 1rem 0 0; text-align: left; }
.subpage-hero .panel-pricing { justify-content: flex-start; }
.subpage-hero .panel-addons { text-align: left; }
.subpage-hero .coverage-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 1.6rem 0 0;
  font-size: .95rem;
  color: var(--muted);
}
.subpage-hero .coverage-trust strong { color: var(--navy); }
/* the quote form sits beside the content (right column) */
.subpage-form {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 0;
  overflow: hidden; /* clip the full-bleed form to the card's rounded corners */
}
/* card padding removed so the embedded form fills the card edge-to-edge;
   keep breathing room on the heading only */
.subpage-form .hero-form-head {
  padding: clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 28px) 0;
}
/* let the subpage form grow to fit the whole form (Submit + bottom) instead of
   clipping at the fixed 478px; the hero form keeps its fixed/cropped height */
.subpage-form .hero-form-frame {
  height: auto;
  min-height: 478px;
}
.subpage-form .hero-form-frame iframe {
  height: 620px; /* fallback; LeadHub auto-resizes to the true content height */
}
/* stack to one column on narrower screens */
@media (max-width: 900px) {
  .subpage-hero { grid-template-columns: 1fr; }
}
/* subpage form reuses the homepage .hero-form-frame zoom/crop (no scrollbar) */

/* careers content page */
.career-page { max-width: 980px; margin: 0 auto; }
.career-page h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: .3rem 0 .3rem;
  color: var(--navy);
}
/* one combined card, stacked: Apply Now sits under the copy */
.career-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 4vw, 2.2rem);
  align-items: start;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 4vw, 2.4rem);
}
.career-copy,
.career-apply { min-width: 0; }
/* horizontal divider between the copy and the apply form */
.career-apply {
  border-top: 1px solid var(--border);
  padding-top: clamp(1.5rem, 4vw, 2rem);
}
.career-copy p {
  margin: 0 0 1.2rem;
  color: #3A3F46;
  font-size: 1.02rem;
  line-height: 1.7;
}
.career-copy h2,
.career-apply h2 {
  margin: 0 0 .8rem;
  color: var(--navy);
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 800;
}
.career-apply p {
  margin: 0 0 1.2rem;
  color: var(--muted);
}
.career-apply .callalt {
  text-align: center;
  margin: 1.1rem 0 0;
  font-weight: 700;
}
.career-apply .callalt a { color: var(--green); }
.career-form-frame {
  height: 801px;
  border-radius: 8px;
  overflow: hidden;
}
.career-form-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* thank-you page */
.thank-page {
  min-height: 52vh;
  display: grid;
  place-items: center;
}
.thank-card {
  width: min(100%, 760px);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(2rem, 5vw, 3.4rem);
  text-align: center;
}
.thank-card h1 {
  margin: 0 0 .55rem;
  color: var(--navy);
  font-size: clamp(2.2rem, 6vw, 4rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.thank-card p {
  max-width: 54ch;
  margin: 0 auto 1.6rem;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}
.thank-actions {
  display: flex;
  justify-content: center;
  gap: .8rem;
  flex-wrap: wrap;
}

/* ============================================================
   TOP ANNOUNCEMENT BAR
   ============================================================ */
.announce {
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: .7rem 1rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.announce-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.announce .sep { opacity: .35; font-weight: 400; }
.announce a {
  color: var(--cyan);
  /* opacity pulse (compositor-friendly) instead of animating color, which
     forces paint on every frame and trips Lighthouse's non-composited check */
  animation: announceCtaPulse 2.4s ease-in-out infinite;
  will-change: opacity;
}
.announce a:hover { text-decoration: underline; }
@keyframes announceCtaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  .announce a { animation: none; }
}

/* ============================================================
   FRAMED CANVAS
   ============================================================ */

.frame {
  max-width: 1200px;
  margin: 2px auto 26px;
  background: transparent;   /* page-level photo shows through */
  border-radius: var(--frame-radius);
  overflow: visible;
  position: relative;
}

/* horizontal rhythm for everything below the hero/widget */
.section {
  padding-left: clamp(20px, 5vw, 60px);
  padding-right: clamp(20px, 5vw, 60px);
}
.section-pad { padding-top: clamp(48px, 7vw, 96px); }

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  /* no background — sits directly on the #F2F1EE page canvas */
  background: none;
}

/* floating "liquid glass" nav — macOS dock style, sticky across the page */
.nav {
  position: sticky;
  top: 6px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 6px clamp(14px, 3vw, 28px) 0;
  padding: .55rem 1.1rem .55rem .85rem;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.22) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(185%);
  backdrop-filter: blur(24px) saturate(185%);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow:
    0 3px 16px rgba(20, 24, 31, .12),
    0 2px 6px rgba(20, 24, 31, .06),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 -8px 16px rgba(255, 255, 255, .18);
}
/* specular highlight sweep across the top of the glass */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(140% 80% at 18% -10%, rgba(255,255,255,.5), rgba(255,255,255,0) 55%);
}
/* keep nav contents above the highlight layer */
.nav > * { position: relative; z-index: 1; }
.nav .brand { display: inline-flex; align-items: center; gap: .6rem; }
/* larger logo that overflows the bar via negative margins,
   so the nav's own height stays the same */
.nav .brand img { height: 84px; width: auto; display: block; margin: -16px 0 -28px; }
.brand-name { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--ink); }

.nav-links {
  display: flex;
  gap: 1.6rem;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.nav-links a {
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  opacity: .82;
  transition: opacity .2s ease;
}
.nav-links a { transition: opacity .2s ease, color .2s ease; }
.nav-links a:hover { opacity: 1; color: #4da3ff; }

/* nav dropdowns (Services / Service Areas) */
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown > a { display: inline-flex; align-items: center; gap: .3rem; }
.nav-links .has-dropdown > a::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .6;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  transform: translateY(6px);
  min-width: 230px;
  list-style: none;
  margin: 0;
  padding: .4rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, .98);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 16px 40px rgba(20, 24, 31, .16);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 60;
}
.nav-dropdown::before {   /* invisible bridge so hover doesn't drop in the gap */
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
}
.nav-links .has-dropdown:hover .nav-dropdown,
.nav-links .has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: .6rem .8rem;
  border-radius: 9px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
  opacity: .85;
  white-space: nowrap;
}
.nav-dropdown a:hover { opacity: 1; background: rgba(20, 24, 31, .05); }

/* hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: none;
  background: transparent;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .25s ease, opacity .2s ease;
}
.nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}
.nav-phone {
  font-weight: 700;
  font-size: .95rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  transition: color .2s ease;
}
.nav-phone:hover { color: #4da3ff; }

/* two-column hero layout */
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: clamp(24px, 4vw, 52px) clamp(24px, 5vw, 60px) clamp(12px, 2vw, 24px);
}

/* hero content (left column) */
.hero-body {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

/* embedded lead form (right column) — one white card: headline + iframe */
.hero-form {
  position: relative;
  z-index: 2;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.2vw, 28px);
  box-shadow: var(--shadow-card);
  transition: border-color .2s ease, box-shadow .25s ease, transform .28s ease;
}
.hero-form:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-pop);
  transform: translateY(-4px);
}
.hero-form-head { margin-bottom: 1rem; }
.hero-form-head h2 {
  margin: .1rem 0 0;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}
.hero-form-head p { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }
/* LeadHubb inline quote form frame */
.hero-form-frame {
  overflow: hidden;
  height: 478px;
}
/* let the embedded form span the full card width (break out of the card
   padding); the heading and call-fallback chin keep their padding */
.hero-form > .hero-form-frame {
  margin-left: calc(-1 * clamp(20px, 2.2vw, 28px));
  margin-right: calc(-1 * clamp(20px, 2.2vw, 28px));
}
/* Match the service-page form layout: let the frame grow to fit the whole form
   (no crop/scale) so the entire form shows with no internal scrollbar. */
.hero-form .hero-form-frame {
  height: auto;
  min-height: 478px;
  overflow: hidden;
}
.hero-form .hero-form-frame iframe {
  height: 640px; /* the GHL form is ~610px tall — fit it so the Submit button shows */
}
.hero-form-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* form chin: client trust mark + "or" divider + call fallback button */
.hero-form-chin { margin-top: 1.1rem; }
.hero-form-chin .trust-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
}
.hero-form-chin .trust-logo img { height: 100px; width: auto; }
.hero-form-chin .trust-logo span { font-size: .82rem; font-weight: 700; color: var(--muted); }
.hero-form-chin .trust-logo strong { color: var(--navy); }
.or-divider {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--muted-2);
  font-size: .85rem;
  margin: .9rem 0;
}
.or-divider::before,
.or-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.call-btn {
  width: 100%;
  justify-content: center;
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  border-radius: 999px;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  background: transparent;
}
.call-btn:hover { background: var(--green); border-color: var(--green); color: var(--navy); }
.hero-rating {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: .9rem;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(20,24,31,.06);
  padding: .45rem .85rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
}
.hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--navy);
}
.hero h1 .light { font-weight: 300; display: block; }
.hero h1 .bold  { font-weight: 800; display: block; }

.hero-lead {
  margin: 1.4rem 0 0;
  max-width: 56ch;
  color: #33383F;
  font-size: 1.02rem;
}
.hero-features {
  list-style: none;
  padding: 0;
  margin: 1.3rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 1.4rem;
}
.hero-features li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-basis: 100%;
  font-size: .9rem;
  font-weight: 600;
  color: #2A2F36;
}
.hero-features li::before {
  content: "✓";
  width: 16px; height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--green);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}
.hero-actions {
  margin-top: 6rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.hero-hours {
  margin: 1.1rem 0 0;
  font-size: .82rem;
  color: var(--muted);
}
.explore-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .95rem;
  transition: gap .2s ease;
}
.explore-link:hover { gap: .7rem; }

.hero-badges {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  align-items: flex-start;
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
}
.hero-badges .badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}
.hero-badges .stars {
  color: var(--gold);
  letter-spacing: 0;
}
.hero-badges strong { color: var(--ink); }
.hero-badges .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}

/* ============================================================
   OVERLAPPING QUOTE WIDGET (signature element)
   ============================================================ */

.quote-wrap {
  position: relative;
  z-index: 5;
  margin: clamp(48px, 7vw, 90px) clamp(20px, 5vw, 60px) 0;
}
.quote-services-head {
  margin-bottom: 2.4rem;
}

.quote-widget {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 0 clamp(18px, 2.5vw, 30px) clamp(28px, 3vw, 38px);
  width: 100%;
}

/* folder tabs sitting flush top-left, peeking above the card edge */
.quote-tabs {
  display: flex;
  gap: .4rem;
  transform: translateY(-1px);
  padding-top: 0;
  margin-bottom: clamp(20px, 2.5vw, 30px);
}
.quote-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--navy);
  color: #fff;
  padding: .8rem 1.15rem;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-weight: 700;
  font-size: .85rem;
  margin-top: -16px;           /* peek above card top edge */
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.quote-tab svg { width: 16px; height: 16px; }
.quote-tab:hover {
  background: var(--green);
  color: var(--navy);
  transform: translateY(-2px);
}
.quote-tab[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 -6px 18px rgba(20,24,31,.06);
}
.quote-tab[aria-selected="true"] .tab-ico { color: var(--green); }

.quote-intro { margin-bottom: 1.4rem; }
.offer-badge {
  display: inline-block;
  background: #7DC242;
  color: var(--navy);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .38rem .9rem;
  border-radius: 999px;
  margin-bottom: .75rem;
}
.quote-intro h2 {
  margin: 0;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--navy);
}
.quote-intro p { margin: .35rem 0 0; color: var(--muted); font-size: .95rem; }

/* service-specific panels (toggled by tabs) */
.quote-panels { margin: 1.1rem 0 1.3rem; }
.quote-panel[hidden] { display: none; }
.panel-lead { margin: 0; color: var(--muted); font-size: .95rem; }
.panel-lead strong { color: var(--navy); }
.panel-pricing {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1rem 0;
}
.price-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: .55rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  line-height: 1.2;
}
.price-chip strong { font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.price-chip span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); }
.panel-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}
.panel-features li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 600;
  font-size: .92rem;
  color: #2A2F36;
}
.panel-features li::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: 13px; height: 8px;
  border-left: 2.5px solid var(--green);
  border-bottom: 2.5px solid var(--green);
  transform: rotate(-45deg);
}
.panel-addons { margin: .9rem 0 0; font-size: .85rem; color: var(--muted); }
.panel-addons strong { color: var(--navy); }

/* form fields as bordered boxes */
.quote-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .9rem;
}
.field-box {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: .7rem .95rem .8rem;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field-box:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20,24,31,.06);
}
.field-box label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: .25rem;
}
.field-box .control {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  padding: 0;
  appearance: none;
}
.field-box select.control { cursor: pointer; }

.quote-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.quote-foot .fineprint {
  font-size: .72rem;
  line-height: 1.5;
  color: var(--muted-2);
  max-width: 60ch;
  margin: 0;
}
.quote-foot .fineprint a { text-decoration: underline; }

/* CTA aligned to the bottom of the intro ("Takes 30 seconds…" line) */
.quote-cta {
  flex: none;
  align-self: flex-end;
  box-shadow: var(--shadow-pop);
}
/* intro sits inline with the CTA; drop its bottom margin so its last line
   is the true baseline the button aligns to */
.quote-foot .quote-intro { margin-bottom: 0; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.price-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: border-color .2s ease, box-shadow .2s ease, transform .28s ease;
}
.price-card:hover {
  border-color: var(--green);
  transform: scale(1.02);
}
.price-card.featured {
  box-shadow: var(--shadow-pop);
}
.price-tag-pop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--green);
  color: var(--navy);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .5rem 1.15rem;
  border-radius: 999px;
}
.price-card .freq {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.price-card .plan { font-size: 1.35rem; font-weight: 800; margin: .3rem 0 0; letter-spacing: -.01em; }
.price-card .price-prefix {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  margin: .9rem 0 0;
}
.price-card .price {
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: .1rem 0 .1rem;
}
.price-card .price::after {
  content: "/visit";
  display: inline-block;
  margin-left: .25rem;
  transform: translateY(.12em);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
}
.price-card .price span {
  display: inline-block;
  margin-left: .25rem;
  transform: translateY(.12em);
  font-size: .95rem;
  font-weight: 600;
  color: var(--muted);
}
.price-card .note { font-size: .85rem; color: var(--green); font-weight: 700; margin: 0 0 1rem; }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: .4rem 0 1.6rem;
  display: grid;
  gap: .6rem;
}
.price-card ul li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .92rem;
  color: #2A2F36;
}
.price-card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 14px; height: 8px;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}
.price-card .btn { margin-top: auto; }

.offer {
  margin-top: 1.6rem;
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-md);
  padding: 1.6rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.offer p { margin: 0; max-width: 62ch; color: #E9ECF1; }
.offer .btn-primary { background: var(--cyan); color: var(--navy); box-shadow: none; }

/* ============================================================
   SERVICES
   ============================================================ */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.service-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .2s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.service-ico {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--gold-soft);
  color: var(--gold);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.service-ico svg { width: 24px; height: 24px; }
.service-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; font-weight: 800; }
.service-card p { margin: 0 0 1.1rem; color: var(--muted); font-size: .93rem; }
.service-card .link-explore { margin-top: auto; align-self: flex-start; font-size: .85rem; }

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
}
.step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 1.6rem;
  transition: border-color .2s ease, box-shadow .2s ease, transform .28s ease;
}
.step:hover {
  border-color: var(--green);
  transform: scale(1.02);
}
.step .n {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  margin-bottom: 1rem;
}
.step h3 { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 800; }
.step p { margin: 0; color: var(--muted); font-size: .92rem; }

/* ============================================================
   GUARANTEE
   ============================================================ */
.guarantee {
  background: var(--navy);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: calc(clamp(1.8rem, 4vw, 3rem) + 25px) calc(clamp(1.8rem, 4vw, 3rem) + 50px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
  color: #fff;
}
/* right column: seal on top, Easy Quote button below it */
.guarantee-aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
/* green circular seal */
.guarantee .seal {
  width: clamp(120px, 12vw, 150px);
  height: clamp(120px, 12vw, 150px);
  border-radius: 50%;
  border: 3px solid #7ed957;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.guarantee .seal .pct {
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.02em;
}
.guarantee .seal .cap {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  margin-top: .4rem;
  line-height: 1.3;
}
.guarantee-body h2 {
  color: #fff;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.guarantee-body .desc { color: #C7D3E8; margin: 0 0 1.2rem; max-width: 70ch; }
.guarantee-body ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem 2rem;
}
.guarantee-body ul li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 600;
  color: #fff;
}
.guarantee-body ul li::before {
  content: "";
  position: absolute; left: 0; top: .3em;
  width: 14px; height: 8px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}
/* white ghost "Easy Quote" button */
.guarantee-btn {
  border: 1.5px solid rgba(255, 255, 255, .85);
  color: #fff;
  background: transparent;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.guarantee-btn:hover { background: var(--green); border-color: var(--green); color: var(--navy); }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.videos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}
.video-thumb {
  aspect-ratio: 9/16;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: #000;
  position: relative;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
}
.video-thumb img,
.video-thumb iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-thumb img { object-fit: cover; }
/* custom play button (facade — real player loads on click) */
.video-thumb .play-btn {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  border: 2px solid rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: transform .18s ease, background .18s ease;
}
.video-thumb .play-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  transform: translateX(3px);
}
.video-thumb:hover .play-btn,
.video-thumb:focus-visible .play-btn {
  transform: scale(1.08);
  background: rgba(255, 255, 255, .42);
}
.rating-summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
  font-weight: 700;
}
.rating-summary .big { font-size: 1.6rem; }
/* reviews marquee — continuous scroll, no hover pause */
.reviews-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.reviews-track {
  display: flex;
  align-items: stretch;
  width: max-content;
  animation: reviewsMarquee 45s linear infinite;
}
@keyframes reviewsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-track { animation: none; flex-wrap: wrap; justify-content: center; }
}
.review-card {
  flex: 0 0 auto;
  width: clamp(185px, 18vw, 235px);
  margin-right: .8rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: .95rem;
  display: flex;
  flex-direction: column;
}
/* Google-style header: avatar + name + time */
.review-head {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .6rem;
}
.review-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .85rem;
}
.review-meta { display: flex; flex-direction: column; }
.review-name { font-weight: 700; font-size: .82rem; color: var(--ink); }
.review-time { font-size: .7rem; color: var(--muted); }
.review-card .stars { margin-bottom: .4rem; font-size: .8rem; }
.review-card blockquote {
  margin: 0 0 .8rem;
  font-size: .78rem;
  line-height: 1.5;
  color: #2A2F36;
  /* clamp to a few lines like the Google card, with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 3;
          line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  padding-top: .6rem;
}
.review-source { font-size: .7rem; color: var(--muted); }
.review-link { font-size: .72rem; font-weight: 700; color: #1a73e8; }
.review-link:hover { text-decoration: underline; }

/* second row scrolls the opposite direction */
.reviews-marquee + .reviews-marquee { margin-top: 1rem; }
.reviews-track--reverse { animation-direction: reverse; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-note { color: var(--muted); margin: 0 0 1.6rem; }
.faq-note a { font-weight: 700; border-bottom: 1.5px solid var(--ink); }
.faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  align-items: start;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: rgba(20, 24, 31, .18);
}
.faq-item:hover > summary::after { color: var(--green); transform: scale(1.15); }
.faq-item[open]:hover > summary::after { transform: rotate(45deg) scale(1.15); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 1.4rem;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--green);
  transition: transform .2s ease;
  flex: none;
}
.faq-item[open] > summary::after { transform: rotate(45deg); }
.faq-item .answer {
  padding: 0 1.4rem 1.25rem;
  color: var(--muted);
  font-size: .94rem;
}
.faq-cta { margin-top: 1.6rem; }

/* ============================================================
   SERVICE AREAS
   ============================================================ */
.coverage-widget {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  padding: 0 clamp(18px, 2.5vw, 30px) clamp(28px, 3vw, 38px);
  width: 100%;
}
.coverage-tabs {
  display: flex;
  gap: .4rem;
  transform: translateY(-1px);
  padding-top: 0;
  margin-bottom: clamp(20px, 2.5vw, 30px);
}
.coverage-tab {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  border: 1px solid var(--border);
  border-bottom: none;
  background: var(--navy);
  color: #fff;
  padding: .8rem 1.15rem;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-weight: 700;
  font-size: .85rem;
  margin-top: -16px;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.coverage-tab svg { width: 16px; height: 16px; }
.coverage-tab:hover {
  background: var(--green);
  color: var(--navy);
  transform: translateY(-2px);
}
.coverage-tab.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 -6px 18px rgba(20,24,31,.06);
}
.coverage-tab.is-active .tab-ico { color: var(--green); }
.coverage-panels {
  position: relative;
}
.coverage-panel[hidden] { display: none; }
.coverage-body {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 4rem);
  min-height: 390px;
}
.coverage-body > div:first-child {
  max-width: 680px;
}
.coverage-body h3 {
  margin: 0 0 .45rem;
  color: var(--navy);
  font-size: clamp(1.35rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.coverage-body h4 {
  margin: 1.2rem 0 .7rem;
  color: var(--navy);
  font-size: 1rem;
  font-weight: 800;
}
.coverage-copy {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.65;
}
.coverage-features {
  margin-top: 1rem;
}
.coverage-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.4rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.coverage-trust span {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  color: var(--muted);
  font-size: .84rem;
  font-weight: 700;
}
.coverage-trust strong {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 800;
}
.coverage-cta {
  flex: 0 0 min(360px, 100%);
  padding: clamp(1.2rem, 2vw, 1.6rem);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(98, 199, 227, .12), rgba(255, 255, 255, .92));
}
.coverage-cta h3 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  font-weight: 800;
  letter-spacing: -.02em;
}
.coverage-cta p {
  margin: .45rem 0 1.2rem;
  color: var(--muted);
  font-size: .95rem;
}
.coverage-cta .btn {
  margin: .45rem .45rem 0 0;
}

/* ============================================================
   CAREERS
   ============================================================ */
.careers {
  background: var(--navy);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(2rem, 5vw, 3.4rem);
  margin-bottom: clamp(40px, 6vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: center;
}
.careers h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; margin: 0 0 .8rem; letter-spacing: -.02em; }
.careers p { color: #D6DAE2; margin: 0 0 1.4rem; }
.careers ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 1.6rem; flex-wrap: wrap;
}
.careers ul li { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.careers ul li::before { content: "★"; color: var(--gold); }
.careers .btn-primary { background: var(--cyan); color: var(--navy); box-shadow: none; }
.careers .cta-col { text-align: right; }

/* ============================================================
   COST CTA (navy band + embedded quote form)
   ============================================================ */
/* full-bleed navy band (breaks out of the frame to the viewport edges) */
.cost-cta-band {
  background: var(--navy);
  color: #fff;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(2.6rem, 6vw, 4.5rem) clamp(20px, 5vw, 60px) clamp(1.2rem, 3vw, 2rem);
}
.cost-cta {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}
.cost-cta h2 {
  color: #fff;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}
.cost-cta .sub { color: #C7D3E8; margin: 0 0 2rem; font-size: 1.05rem; }
.cost-cta-form {
  max-width: 560px;
  margin: 0 auto;
  background: transparent;
  border-radius: var(--r-md);
  overflow: hidden;
  height: 345px; /* tall enough to show the whole scaled form incl. the Submit button */
}
/* Zoom the embedded form out and crop its top whitespace so the whole form
   (through the Submit button) fits in the frame without an internal scrollbar.
   Needed because we no longer load GHL's form_embed.js auto-resizer. */
.cost-cta-form iframe {
  width: 153.85%;              /* 100 / 0.65 -> scales back to full width */
  height: 1150px;              /* taller than the form so it never scrolls internally */
  transform: scale(0.65);
  transform-origin: top left;
  margin-right: -53.85%;
  margin-top: -20px;           /* crop the form's built-in top padding */
  border: 0;
  display: block;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: clamp(1.8rem, 4vw, 3rem);
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.final-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .4rem; }
.final-cta .sub { color: var(--muted); margin: 0 0 1.8rem; }
.final-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  text-align: left;
}
.final-form .field-box.wide { grid-column: 1 / -1; }
.final-form .btn { grid-column: 1 / -1; }
.final-cta .fineprint { font-size: .72rem; color: var(--muted-2); margin: 1rem 0 0; }
.final-cta .fineprint a { text-decoration: underline; }
.final-cta .callalt { margin-top: 1rem; font-weight: 700; }
.final-cta .callalt a { color: var(--green); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  position: relative;
  padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 60px) clamp(80px, 8vw, 60px);
}
/* inset divider line with space at the ends */
.footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 5vw, 60px);
  right: clamp(20px, 5vw, 60px);
  height: 1px;
  background: rgba(20, 24, 31, .3);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
}
.footer .brand { display: inline-flex; align-items: center; gap: .2rem; margin-bottom: 1rem; }
.footer .brand img { height: 84px; width: auto; display: block; }
.footer .brand .brand-name { font-size: 1rem; color: #004aad; margin-left: -.5rem; }
.footer .blurb { color: var(--muted); font-size: .9rem; max-width: 30ch; }
.footer h3 {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin: 0 0 1rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.footer ul a { color: #3A3F46; font-size: .92rem; opacity: .9; }
.footer ul a:hover { opacity: 1; color: var(--ink); }
.footer-base {
  margin-top: 2.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--muted);
}

/* ============================================================
   STICKY MOBILE BAR
   ============================================================ */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: none;
  gap: .7rem;
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
}
.sticky-bar .btn { flex: 1; justify-content: center; }

/* ============================================================
   FLOATING CALL BUTTON (soft breathing pulse)
   ============================================================ */
.phone-fab {
  position: fixed;
  right: max(clamp(14px, 3vw, 28px), calc((100vw - 1200px) / 2 + clamp(14px, 3vw, 28px)));
  bottom: clamp(16px, 3vw, 26px);
  z-index: 70;
  border-radius: 50%;
  display: inline-block;
}
/* sonar waves emanating from the button */
.phone-fab::before,
.phone-fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(125, 194, 66, .7);
  pointer-events: none;
  animation: fabSonar 1.6s ease-out infinite;
}
.phone-fab::after { animation-delay: .53s; }
.phone-fab__btn {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  color: #fff;
  background: var(--navy);
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 10px 24px rgba(27, 42, 74, .18),
    0 0 18px rgba(27, 42, 74, .36);
  transition: transform .18s ease;
}
.phone-fab__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  border: 2px solid rgba(125, 194, 66, .7);
  animation: fabSonar 1.6s ease-out infinite;
  animation-delay: 1.06s;
  pointer-events: none;
}
.phone-fab__btn:hover {
  background: var(--green);
  color: var(--navy);
  transform: scale(1.06);
}
.phone-fab__btn svg { width: 26px; height: 26px; }

/* ring starts at the button, expands outward, and fades — sonar/radar pulse */
@keyframes fabSonar {
  0%   { transform: scale(1);   opacity: .7; }
  70%  { opacity: .12; }
  100% { transform: scale(1.75); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-fab::before,
  .phone-fab::after,
  .phone-fab__btn::before { animation: none; opacity: 0; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-body { max-width: none; }
  /* hero form height stays auto (fits the full ~610px form) on mobile too */
  .cost-cta-form { height: 365px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .pricing-grid,
  .services-grid,
  .reviews-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .videos { grid-template-columns: repeat(2, 1fr); }
  .coverage-body {
    align-items: stretch;
    flex-direction: column;
    min-height: 620px;
  }
  .coverage-cta { flex-basis: auto; }
  .career-layout { grid-template-columns: 1fr; }
  .guarantee,
  .careers { grid-template-columns: 1fr; }
  .guarantee { justify-items: start; }
  .guarantee-body ul { grid-template-columns: 1fr; }
  .careers .cta-col { text-align: left; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .frame { margin: 12px; border-radius: 22px; }
  .hero {
    border-radius: 22px 22px 0 0;
    min-height: 560px;
    /* hero background photo on mobile */
    background:
      linear-gradient(180deg, rgba(242,241,238,.55), rgba(242,241,238,.35)),
      image-set(
        url("images/house-cleaning-service.webp") type("image/webp"),
        url("images/house-cleaning-service.jpeg") type("image/jpeg")
      ) center / cover no-repeat;
  }
  .nav-right .nav-phone { display: none; }
  /* smaller Get Quote pill on mobile so it fits beside the logo + hamburger */
  .nav-right .btn-primary { padding: .5rem .9rem; font-size: .8rem; gap: .35rem; }

  /* hamburger centered in the header */
  .nav-toggle {
    display: flex;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }

  /* links collapse into a dropdown panel, shown when menu is open */
  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    flex-direction: column;
    gap: 0;
    padding: .5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(24px) saturate(185%);
    backdrop-filter: blur(24px) saturate(185%);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 3px 16px rgba(20, 24, 31, .12);
  }
  .nav.open .nav-links { display: flex; }
  .nav-links a {
    display: block;
    padding: .8rem 1rem;
    border-radius: 12px;
    opacity: 1;
  }
  .nav-links a:hover { background: rgba(20, 24, 31, .05); }

  /* dropdowns render inline (indented) inside the open hamburger menu */
  .nav-links .has-dropdown > a::after { display: none; }
  .nav-dropdown {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    min-width: 0;
    margin: 0 0 .2rem .6rem;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .nav-dropdown::before { display: none; }
  .nav-dropdown a { padding: .55rem 1rem; font-size: .88rem; opacity: .8; }

  /* stack widget fields vertically */
  .quote-fields { grid-template-columns: 1fr; }

  /* tabs become a centered, wrapping segmented control */
  .quote-tabs,
  .coverage-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    background: var(--navy);
    border-radius: var(--r-sm);
    padding: 4px;
    margin: -20px -6px 1.4rem;
    transform: none;
  }
  .quote-tab,
  .coverage-tab {
    flex: 0 1 auto;
    margin-top: 0;
    min-height: 42px;
    border: none;
    border-radius: calc(var(--r-sm) - 3px);
    justify-content: center;
    padding: .7rem .8rem;
    font-size: .78rem;
  }
  .quote-tab[aria-selected="true"] { box-shadow: none; }
  .coverage-tab.is-active { box-shadow: none; }

  .quote-cta { align-self: stretch; }
  .quote-foot { justify-content: flex-start; }

  .final-form { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }

  /* center the entire guarantee card on mobile — heading, paragraph, checklist
     (as a group, checkmarks kept with the text), plus the badge & button */
  .guarantee { justify-items: center; }
  .guarantee-body { text-align: center; }
  .guarantee-body ul { display: inline-grid; text-align: left; }

  /* one pricing card at a time */
  .pricing-grid { grid-template-columns: 1fr; }

  /* FAQ back to a single column */
  .faq-list { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .pricing-grid,
  .services-grid,
  .reviews-grid,
  .process-grid,
  .videos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---- Cookie consent banner ---- */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-pop);
  font-size: 14px;
}
.cookie-banner__text { margin: 0; flex: 1; line-height: 1.4; }
.cookie-banner__text a { color: var(--cyan); }
.cookie-banner__btn {
  flex: none;
  padding: 9px 18px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--navy);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cookie-banner__btn:hover { opacity: .9; }
@media (max-width: 480px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
}