/* Luxe Ducts, Chicagoland.
   Palette taken from the client's own surfaces: #FE017F sampled from the logo
   pixels, #F5037C is the colour they themselves set in their GoHighLevel chat
   widget, #A50D59 and #D61F7A are their own site tokens (--brand-pink 330 85% 35%
   and --brand-pink-light 330 75% 48%). Black and white are the rest of the mark.
   Type: Archivo Black for display (the heavy "Ducts" half of the logo),
   Barlow for body, and Pinyon Script used once per page as the script "Luxe"
   flourish, because that script IS the logo and nothing else reads as this brand.
   The rubber duck is the mascot and appears as a ghost watermark, in the seam of
   the divider, and as the marker on lists. */

:root {
  --pink: #FE017F;
  --pink-hot: #F5037C;
  --pink-mid: #D61F7A;
  --pink-deep: #A50D59;
  --pink-soft: #FB729E;
  --pink-wash: rgba(254, 1, 127, 0.10);

  --ink: #0A0A0A;
  --ink-soft: #17151A;
  --ink-line: #2A2430;

  --color-bg: #FFFFFF;
  --color-surface: #FBF4F8;
  --color-surface-2: #F4E9F0;

  --color-text: #1B1620;
  --color-text-light: #635C6B;
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #CBBFC7;

  --color-border: #EBDDE6;
  --color-google-star: #FBBC04;

  --font-display: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body: 'Barlow', 'Segoe UI', sans-serif;
  --font-script: 'Pinyon Script', 'Palatino Linotype', serif;

  --container: 1200px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 10px rgba(10, 10, 10, 0.07);
  --shadow-md: 0 10px 28px rgba(10, 10, 10, 0.12);
  --shadow-lg: 0 22px 52px rgba(10, 10, 10, 0.20);
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-nav: 1000;
  --z-cta: 1100;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.68;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-deep); }
p a { font-weight: 700; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.text-center { text-align: center; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.14; letter-spacing: -0.01em; }
h2, h3, h4 { text-transform: none; }

/* the script flourish, the one place the logo's "Luxe" hand shows up in type */
.script { font-family: var(--font-script); font-weight: 400; letter-spacing: 0.01em; text-transform: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn--primary { background: var(--pink); color: #fff; box-shadow: 0 6px 18px rgba(254, 1, 127, 0.34); }
.btn--primary:hover { background: var(--pink-mid); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(254, 1, 127, 0.42); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--pink-deep); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }
.btn--outline-light { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.85); }
.btn--outline-light:hover { background: #fff; color: var(--ink); }
.btn--sm { padding: 12px 20px; font-size: 13px; }
.btn-pair { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- mobile sticky CTA ---------- */
.mobile-cta-bar { display: none; }
@media (max-width: 768px) {
  .mobile-cta-bar { display: flex; position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-cta); }
  /* one line, always. A wrapped label makes the bar taller than the 52px the
     body padding and the sticky nav offset are both set to. */
  .mobile-cta-bar a { flex: 1; height: 52px; display: flex; align-items: center; justify-content: center; padding: 0 4px; text-align: center; font-family: var(--font-display); font-size: clamp(0.6rem, 3.1vw, 0.78rem); letter-spacing: 0.01em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
  .mobile-cta-bar__primary { background: var(--pink); color: #fff; }
  .mobile-cta-bar__call { background: var(--ink); color: #fff; }
  /* the fixed bar is 52px tall; the sticky nav parks below it, never under it */
  body { padding-top: 52px; }
  body .nav { top: 52px; }
}

/* ---------- utility bar ---------- */
.utility-bar { background: var(--ink); color: #D8CBD3; font-size: 13.5px; padding: 9px 0; position: relative; z-index: 1001; }
.utility-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.utility-bar__item { display: inline-flex; align-items: center; gap: 7px; }
.utility-bar__item svg { width: 15px; height: 15px; color: var(--pink); }
.utility-bar__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* inline-flex from the phone tap-target rule swallows the whitespace text node
   between the label span and the number, so the gap is set explicitly */
.utility-bar__phone { display: inline-flex; align-items: baseline; gap: 6px; color: #fff; font-weight: 700; text-decoration: none; letter-spacing: 0.01em; }
.utility-bar__phone:hover { color: var(--pink-soft); }
.utility-bar__phone span { color: var(--pink-soft); font-weight: 600; }
@media (max-width: 900px) { .utility-bar__where { display: none; } .utility-bar .container { justify-content: center; } }

/* ---------- nav ---------- */
.nav { background: #fff; position: sticky; top: 0; z-index: var(--z-nav); box-shadow: 0 1px 0 var(--color-border), 0 6px 20px rgba(10, 10, 10, 0.07); }
.nav .container { display: flex; align-items: center; gap: 22px; min-height: 84px; }
.nav__logo { flex-shrink: 0; display: block; }
.nav__logo img { width: auto; height: 56px; }
.nav__links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__link, .nav__dropdown-toggle {
  font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink);
  background: none; border: none; cursor: pointer; text-decoration: none;
  padding: 10px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 5px;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.nav__link:hover, .nav__dropdown-toggle:hover { background: var(--pink-wash); color: var(--pink-deep); }
.nav__dropdown { position: relative; }
.nav__dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 268px;
  background: var(--ink); border: 1px solid var(--ink-line);
  border-radius: 12px; padding: 8px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 1002;
}
.nav__dropdown:hover .nav__dropdown-menu, .nav__dropdown.open .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__dropdown-item { display: block; padding: 10px 14px; color: #E9DEE5; text-decoration: none; font-size: 14.5px; font-weight: 600; border-radius: 8px; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.nav__dropdown-item:hover { background: var(--pink); color: #fff; }
.nav__actions { display: flex; gap: 10px; flex-shrink: 0; }
.nav__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; }
.nav__hamburger span { width: 26px; height: 3px; border-radius: 2px; background: var(--ink); transition: transform 0.35s var(--ease), opacity 0.35s var(--ease); }
.nav__hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.nav__hamburger.active span:nth-child(2) { opacity: 0; }
.nav__hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-overlay { position: fixed; inset: 0; background: rgba(10, 10, 10, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease); z-index: 999; }
.nav-overlay.active { opacity: 1; visibility: visible; }
.nav__close { display: none; }
@media (max-width: 1100px) {
  .nav__hamburger { display: flex; margin-left: auto; }
  .nav__actions { display: none; }
  .nav__links {
    position: fixed; top: 0; right: -100%; width: 86%; max-width: 400px; height: 100vh;
    background: var(--ink); flex-direction: column; align-items: stretch;
    padding: 90px 24px 40px; gap: 2px; transition: right 0.4s var(--ease-out); z-index: 1005; overflow-y: auto; margin: 0;
  }
  .nav__links.open { right: 0; }
  .nav__link, .nav__dropdown-toggle { color: #fff; width: 100%; justify-content: space-between; font-size: 17px; padding: 14px 12px; }
  .nav__dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: none; background: rgba(255, 255, 255, 0.06); margin: 4px 0 8px; }
  .nav__dropdown.open .nav__dropdown-menu { display: block; }

  /* ---- open drawer stacking, fixed 2026-09-05 ----------------------------
     .nav is position:sticky with a z-index, so it forms a stacking context and
     the drawer inside it could never outrank .nav's SIBLINGS: the fixed call
     bar (z 1100) and the utility bar (z 1001). The top 149px of the open panel
     sat behind those two, which hid the first menu group, "Cleaning", and sent
     a tap on it to the phone link instead. Lifting the whole nav while the
     drawer is open takes the panel, the hamburger and the close button with it. */
  body.menu-open .nav { z-index: 1200; }
  /* the scrim has to clear the two bars as well, or they stay at full
     brightness in the strip beside the open panel */
  body.menu-open .nav-overlay { z-index: 1150; }
  /* the nav bar itself has to ride above that scrim so the hamburger stays
     tappable, so while the panel is open the bar goes transparent instead of
     leaving a bright white stub in the strip beside it */
  body.menu-open .nav { background: var(--ink); box-shadow: none; }
  body.menu-open .nav__logo { opacity: 0; }
  /* the hamburger is a static child of .nav, so the positioned panel (z 1005)
     painted over it and it could not be tapped to close the menu. It stays
     above the panel and stays tappable, so a second tap in the same place
     still closes the menu, but its bars are hidden while the panel is open:
     the panel covers the whole right side of the screen, so a visible X
     stranded halfway down the menu list read as a rendering fault. The visible
     close affordance is .nav__close at the top right of the panel. */
  .nav__hamburger { position: relative; z-index: 1010; }
  body.menu-open .nav__hamburger span { opacity: 0; }

  /* A real close control inside the drawer. Fixed, not absolute, so it stays
     pinned at the panel's top right even when a long submenu scrolls.
     right:80px, not 16px, so it never lands on top of the hamburger. Above
     768px there is no call bar, the nav parks at y=0, and a 16px inset put the
     two controls in the same 46px box: whichever won the stack made the other
     untappable. 80px keeps a clear 10px gutter between them at every width. */
  .nav__close {
    display: flex; position: fixed; top: 14px; right: 80px;
    width: 46px; height: 46px; align-items: center; justify-content: center;
    padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.32);
    color: #fff; opacity: 0; visibility: hidden; z-index: 6;
    transition: opacity 0.3s var(--ease), visibility 0.3s, background 0.25s var(--ease);
  }
  .nav__close:hover { background: var(--pink); border-color: var(--pink); }
  .nav__close svg { width: 22px; height: 22px; display: block; }
  .nav__links.open .nav__close { opacity: 1; visibility: visible; }
}

/* ---------- brand devices ----------
   1. duck ghost watermark  2. pink runner stripe  3. duck notch seam */
.duck-ghost {
  position: absolute; right: -40px; bottom: -30px; width: clamp(180px, 22vw, 320px);
  opacity: 0.045; pointer-events: none; z-index: 0;
}
.duck-ghost--left { right: auto; left: -50px; top: -40px; bottom: auto; }
.runner-stripe { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.runner-stripe::before {
  content: ''; position: absolute; top: -20%; left: -10%; width: 34%; height: 140%;
  background: linear-gradient(180deg, rgba(254, 1, 127, 0.10), rgba(254, 1, 127, 0.02));
  transform: skewX(-14deg);
}
.section-divider { position: relative; line-height: 0; }
.section-divider--over { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; pointer-events: none; }

/* ---------- hero ---------- */
.hero { position: relative; background: linear-gradient(140deg, #1A0713 0%, var(--ink) 58%, #12060E 100%); color: #fff; overflow: hidden; }
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 10, 10, 0.92) 6%, rgba(20, 6, 14, 0.78) 44%, rgba(165, 13, 89, 0.42) 100%); }
.hero .container { position: relative; z-index: 2; }
.hero--home .hero__content { padding: 92px 0 128px; max-width: 780px; }
.hero--sub .hero__content { padding: 36px 0 104px; max-width: 740px; }
.hero--sub .breadcrumbs { padding-top: 54px; }
@media (max-width: 1100px) { .hero--sub .breadcrumbs { padding-top: 22px; } }
.hero__eyebrow { font-family: var(--font-body); font-weight: 700; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pink-soft); margin-bottom: 14px; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 24px; align-items: center; }
.hero__badge { display: flex; align-items: center; gap: 12px; }
.hero__badge-logo { width: 38px; height: 38px; flex-shrink: 0; }
.hero__badge-mark { width: 38px; height: 38px; color: var(--pink); flex-shrink: 0; }
.hero__badge-info { display: flex; flex-direction: column; gap: 2px; }
.hero__badge-stars { display: flex; gap: 1px; }
.hero__badge-stars svg { width: 16px; height: 16px; fill: var(--color-google-star); }
.hero__badge-text { font-family: var(--font-display); font-size: 0.95rem; color: #fff; text-transform: uppercase; letter-spacing: 0.05em; }
.hero__badge-sub { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-on-dark-muted); }
.hero__title { font-size: clamp(31px, 4.3vw, 54px); margin-bottom: 14px; }
.hero__title .script { color: var(--pink-soft); font-size: 1.22em; line-height: 0.9; }
.hero__count { font-family: var(--font-display); font-size: clamp(17px, 2vw, 23px); color: var(--pink-soft); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 14px; border-bottom: 4px solid var(--pink); display: inline-block; padding-bottom: 5px; }
.hero__text { font-size: clamp(16px, 1.5vw, 19px); color: #EADFE6; max-width: 660px; margin-bottom: 22px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 28px; }
.hero__trust-item { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: #E4D8E0; }
.hero__trust-item svg { width: 17px; height: 17px; color: var(--pink); flex-shrink: 0; }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- trust strip ---------- */
.trust-strip { position: relative; z-index: 4; margin-top: -44px; margin-bottom: 16px; }
.trust-strip__card {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  border-top: 5px solid var(--pink);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 22px 26px;
}
.trust-strip__item { display: flex; align-items: center; gap: 12px; }
.trust-strip__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--pink-wash); color: var(--pink-deep); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trust-strip__icon svg { width: 22px; height: 22px; }
.trust-strip__label { font-family: var(--font-display); font-size: 14.5px; color: var(--ink); }
.trust-strip__sub { font-size: 13px; color: var(--color-text-light); line-height: 1.45; }
@media (max-width: 1024px) { .trust-strip__card { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px) { .trust-strip__card { grid-template-columns: 1fr; } }

/* ---------- credentials strip ---------- */
.creds { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 26px 0; }
.creds__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; }
.creds__pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.creds__pill svg { width: 15px; height: 15px; color: var(--pink); flex-shrink: 0; }
.creds__badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; margin-top: 18px; }
.creds__badges img { height: 52px; width: auto; opacity: 0.95; }
@media (max-width: 640px) { .creds__badges img { height: 42px; } }

/* ---------- sections ---------- */
.section { position: relative; padding: 92px 0; }
.section--surface { background: var(--color-surface); }
.section--dark { background: var(--ink); color: var(--color-on-dark-muted); }
/* Clips the duck ghost watermark. Only used on sections that carry one, because
   overflow:hidden on an ancestor kills position:sticky and the lead form column
   depends on it. Added after the homepage measured 1480px wide at a 1440 viewport. */
.section--ghost { overflow: hidden; }
.section--dark .section-title { color: #fff; }
.section--dark p { color: var(--color-on-dark-muted); }
.section > .container { position: relative; z-index: 1; }
.section-subtitle { font-family: var(--font-body); font-weight: 800; font-size: 13px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 10px; }
.section--dark .section-subtitle { color: var(--pink-soft); }
.section-title { font-size: clamp(27px, 3.2vw, 42px); color: var(--ink); margin-bottom: 18px; }
.section-title--underline { position: relative; padding-bottom: 18px; }
.section-title--underline::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 92px; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--pink) 62%, var(--ink) 62%); }
.section-title--underline.left::after { left: 0; transform: none; }
.section__footer { text-align: center; margin-top: 44px; }
.text-center .section-title { margin-left: auto; margin-right: auto; }
.text-center > p { color: var(--color-text-light); }
.prose { max-width: 810px; margin-left: auto; margin-right: auto; }
.prose p { margin-bottom: 18px; }
.split > div > p, .band__grid > div > p, .lead-split__copy > p { margin-bottom: 16px; }

/* ---------- cards ---------- */
.card-grid { display: grid; gap: 26px; margin-top: 44px; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .card-grid--3, .card-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns: 1fr; } }

.svc-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.svc-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--color-surface-2); overflow: hidden; }
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
.svc-card:hover .svc-card__media img { transform: scale(1.045); }
.svc-card__media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--pink) 62%, var(--ink) 62%); }
.svc-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 26px 28px; }
.svc-card--icon::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--pink) 62%, var(--ink) 62%); }
.svc-card--icon .svc-card__body { padding-top: 30px; }
.svc-card__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--ink); color: var(--pink-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.svc-card__icon svg { width: 26px; height: 26px; }
.svc-card__tag { align-self: flex-start; max-width: 100%; margin-bottom: 12px; background: var(--pink-wash); color: var(--pink-deep); font-family: var(--font-body); font-weight: 800; font-size: 11px; letter-spacing: 0.09em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-card h3 { font-size: 21px; color: var(--ink); margin-bottom: 10px; }
.svc-card p { color: var(--color-text-light); font-size: 15.5px; margin-bottom: 20px; }
.svc-card__body .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 700px) { .svc-card__body { padding: 22px 22px 26px; } }

.icon-card { position: relative; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.icon-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.icon-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--pink-wash); color: var(--pink-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.icon-card__icon svg { width: 25px; height: 25px; }
.icon-card h3 { font-size: 19px; color: var(--ink); margin-bottom: 8px; }
.icon-card p { font-size: 15px; color: var(--color-text-light); }
.icon-card--num .icon-card__icon { background: var(--pink); color: #fff; font-family: var(--font-display); font-size: 20px; }

.review-card { background: #fff; border: 1px solid var(--color-border); border-left: 5px solid var(--pink); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); position: relative; }
.review-card__g { position: absolute; top: 24px; right: 24px; }
.review-card__g svg { width: 25px; height: 25px; }
.review-card__stars { display: flex; gap: 2px; color: var(--color-google-star); margin-bottom: 14px; }
.review-card__stars svg { width: 18px; height: 18px; }
.review-card__text { font-size: 15.5px; color: var(--color-text); margin-bottom: 16px; white-space: pre-line; }
.review-card__author { font-family: var(--font-display); color: var(--ink); font-size: 15px; }
.review-card__when { font-size: 13px; color: var(--color-text-light); }
.reviews__cta { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 44px; }
.spotlight { max-width: 780px; margin: 40px auto 0; }

/* ---------- areas ---------- */
.area-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
@media (max-width: 900px) { .area-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } }
.area-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.area-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--pink); }
.area-card__city { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 16px; color: var(--ink); text-decoration: none; margin-bottom: 6px; }
.area-card__city:hover { color: var(--pink-deep); }
.area-card__city svg { width: 16px; height: 16px; color: var(--pink); }
.area-card__links { display: flex; gap: 8px; font-size: 13.5px; color: var(--color-border); flex-wrap: wrap; }
.area-card__links a { color: var(--color-text-light); text-decoration: none; font-weight: 700; }
.area-card__links a:hover { color: var(--pink-deep); }

/* ---------- lists, steps, stats, split ---------- */
.check-list { list-style: none; columns: 2; gap: 40px; margin-top: 20px; max-width: 760px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) { .check-list { columns: 1; } }
.check-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; break-inside: avoid; }
.check-list svg { width: 17px; height: 17px; color: var(--pink); flex-shrink: 0; }
.check-list a { font-weight: 700; text-decoration: none; }
.check-list a:hover { text-decoration: underline; }
.check-list li span { font-weight: 600; color: var(--color-text); }
.icon-card .check-list { columns: 1; margin-top: 12px; max-width: none; }

.step-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
@media (max-width: 900px) { .step-grid { grid-template-columns: 1fr; } }
.step { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px 28px; box-shadow: var(--shadow-sm); }
.step__num { font-family: var(--font-display); font-size: 26px; color: #fff; background: var(--pink); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.step__label { font-family: var(--font-body); font-weight: 800; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pink-deep); margin-bottom: 6px; }
.step h3 { font-size: 20px; color: var(--ink); margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--color-text-light); }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 640px) { .stat-row { grid-template-columns: repeat(2, 1fr); } }
.stat { background: var(--color-surface); border-radius: var(--radius); padding: 18px 10px; text-align: center; border-bottom: 4px solid var(--pink); }
.stat__num { font-family: var(--font-display); font-size: 27px; color: var(--pink-deep); }
.stat__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-light); }

.split { display: grid; grid-template-columns: 1.12fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }
.split--reverse .split__img { order: -1; }
@media (max-width: 900px) { .split--reverse .split__img { order: 0; } }
.split__img img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); border-bottom: 6px solid var(--pink); width: 100%; object-fit: cover; }

/* ---------- comparison table (their own us vs them) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }
.compare__col { border-radius: var(--radius-lg); padding: 30px 28px; border: 1px solid var(--color-border); background: #fff; }
.compare__col--us { border: 2px solid var(--pink); box-shadow: var(--shadow-md); }
.compare__head { font-family: var(--font-display); font-size: 19px; margin-bottom: 16px; color: var(--ink); }
.compare__col--us .compare__head { color: var(--pink-deep); }
.compare ul { list-style: none; }
.compare li { display: flex; gap: 11px; padding: 9px 0; font-size: 15.5px; border-top: 1px solid var(--color-border); }
.compare li:first-child { border-top: 0; }
.compare li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; }
.compare__col--us li svg { color: var(--pink); }
.compare__col--them { background: var(--color-surface); }
.compare__col--them li { color: var(--color-text-light); }
.compare__col--them li svg { color: #A79EAC; }

/* ---------- dark band with the pitch and the facts card ---------- */
.band { position: relative; background: linear-gradient(140deg, #1A0713, var(--ink) 62%, #12060E); color: #fff; padding: 90px 0 116px; overflow: hidden; }
.band .container { position: relative; z-index: 2; }
.band__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 960px) { .band__grid { grid-template-columns: 1fr; gap: 40px; } }
.band .section-title { color: #fff; }
.band .section-subtitle { color: var(--pink-soft); }
.band p { color: #DCCFD6; }

.form-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow-lg); color: var(--color-text); border-top: 6px solid var(--pink); }
/* The card sits on the dark band, and `.band p` (0,1,1) outranks `.form-card__title`
   (0,1,0), so the card's own headings rendered near-white on white. Scoped rules
   win it back. Caught in the 1440px capture, 2026-09-05. */
.band .form-card, .band .form-card span, .band .form-card li { color: var(--color-text); }
.band .form-card p.form-card__title { color: var(--ink); }
.band .form-card p.form-card__sub, .band .form-card p.form-card__note { color: var(--color-text-light); }
.form-card__title { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.form-card__sub { font-size: 14.5px; color: var(--color-text-light); margin-bottom: 20px; }
.form-card__facts { display: grid; gap: 12px; }
.form-card__facts .contact-item { color: var(--color-text); align-items: flex-start; }
.form-card__facts .contact-item svg { color: var(--pink); }
.form-card__facts .contact-item a { color: var(--pink-deep); font-weight: 700; text-decoration: none; }
.form-card__facts .contact-item a:hover { text-decoration: underline; }
.form-card__note { margin-top: 20px; font-size: 14.5px; color: var(--color-text-light); }
.form-card__note a { font-weight: 800; color: var(--pink-deep); text-decoration: none; }
.form-card__note a:hover { text-decoration: underline; }
.contact-item { display: flex; align-items: flex-start; gap: 10px; padding: 5px 0; font-size: 14.5px; }
.contact-item svg { width: 17px; height: 17px; color: var(--pink); flex-shrink: 0; margin-top: 4px; }

/* ---------- lead form: copy scrolls, form column stays put ----------
   The form column is position sticky with align-self start, which is what lets a
   grid item be shorter than its row and therefore able to stick. The top offset
   clears the 84px sticky nav. Below 960px sticky is switched OFF: pinning a tall
   form inside a phone viewport traps the scroll. */
.lead-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: start; }
.lead-split__copy { max-width: 570px; }
.lead-split__copy > p { color: var(--color-text-light); }
.lead-split__facts { columns: 1; max-width: none; margin-left: 0; margin-right: 0; margin-top: 22px; }
.lead-split__phone { display: inline-block; margin-top: 20px; font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); color: var(--pink-deep); text-decoration: none; }
.lead-split__phone:hover { color: var(--pink); }
.lead-split__phone small { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-light); }
.lead-split__phones { display: flex; gap: 34px; flex-wrap: wrap; }
.lead-split__steps { list-style: none; counter-reset: ls; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--color-border); display: grid; gap: 16px; }
.lead-split__steps li { counter-increment: ls; position: relative; padding-left: 46px; font-size: 15px; color: var(--color-text-light); line-height: 1.6; }
.lead-split__steps li::before { content: counter(ls); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--pink); color: #fff; font-family: var(--font-display); font-size: 15px; display: flex; align-items: center; justify-content: center; }
.lead-split__steps strong { display: block; color: var(--ink); font-size: 16px; }
.lead-split__linkhead { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--color-border); font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.lead-split__links { list-style: none; columns: 2; gap: 24px; margin-top: 12px; }
.lead-split__links li { padding: 6px 0; break-inside: avoid; }
.lead-split__links a { font-size: 15px; font-weight: 700; color: var(--pink-deep); text-decoration: none; }
.lead-split__links a:hover { color: var(--pink); text-decoration: underline; }
@media (max-width: 520px) { .lead-split__links { columns: 1; } }
.lead-split__locs { display: grid; gap: 14px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.lead-split__loc { display: flex; align-items: flex-start; gap: 11px; font-size: 15px; color: var(--color-text-light); }
.lead-split__loc svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--pink); margin-top: 3px; }
.lead-split__loc strong { display: block; color: var(--ink); font-size: 16px; }
.lead-split__loc a { display: inline-block; margin-left: 8px; font-weight: 700; color: var(--pink-deep); text-decoration: none; }
.lead-split__form { position: sticky; top: 100px; align-self: start; }
.lead-split .lead-form { margin: 0; max-width: none; }
@media (max-width: 960px) {
  .lead-split { grid-template-columns: 1fr; gap: 34px; }
  .lead-split__copy { max-width: 660px; margin: 0 auto; }
  .lead-split__form { position: static; top: auto; }
  .lead-split .lead-form { max-width: 660px; margin: 0 auto; }
}

/* ---------- forms ---------- */
.lead-form { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 34px 30px; border-top: 6px solid var(--pink); }
.lead-form__head { font-family: var(--font-display); font-size: 22px; color: var(--ink); margin-bottom: 4px; }
.lead-form__sub { font-size: 14.5px; color: var(--color-text-light); margin-bottom: 20px; }
.lead-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-form__full { grid-column: 1 / -1; }
@media (max-width: 640px) { .lead-form__grid { grid-template-columns: 1fr; } .lead-form { padding: 26px 20px; } }
.form-group { display: flex; flex-direction: column; }
.form-label { font-size: 13px; font-weight: 800; margin-bottom: 6px; color: var(--ink); letter-spacing: 0.02em; }
.form-input, .form-textarea, .form-select { width: 100%; padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: var(--radius); font-family: var(--font-body); font-size: 15.5px; color: var(--color-text); background: #fff; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-wash); }
.form-hint { font-size: 12.5px; color: var(--color-text-light); margin-top: 5px; }
.form-checks { display: grid; gap: 10px; margin-top: 4px; }
.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; cursor: pointer; padding: 9px 12px; border: 1.5px solid var(--color-border); border-radius: var(--radius); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); }
.form-check:hover { border-color: var(--pink); background: var(--pink-wash); }
.form-check input { margin-top: 4px; accent-color: var(--pink); width: 17px; height: 17px; flex-shrink: 0; }
.form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--color-text-light); line-height: 1.55; cursor: pointer; }
.form-consent input { margin-top: 3px; accent-color: var(--pink); width: 17px; height: 17px; flex-shrink: 0; }
.lead-form__submit { grid-column: 1 / -1; font-family: var(--font-display); font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; background: var(--pink); color: #fff; border: none; border-radius: 999px; padding: 17px 32px; cursor: pointer; box-shadow: 0 6px 18px rgba(254, 1, 127, 0.34); transition: transform 0.25s var(--ease), background 0.25s var(--ease); }
.lead-form__submit:hover { background: var(--pink-mid); transform: translateY(-2px); }
.lead-form__submit:disabled { opacity: 0.65; cursor: default; transform: none; }
.lead-form__result { grid-column: 1 / -1; margin-top: 12px; padding: 12px 14px; border-radius: var(--radius); font-size: 14.5px; font-weight: 600; }
.lead-form__result.is-ok { background: var(--pink-wash); color: var(--pink-deep); }
.lead-form__result.is-err { background: #FDECEC; color: #A11B1B; }
.lead-form__consent { grid-column: 1 / -1; font-size: 11.5px; line-height: 1.55; color: var(--color-text-light); margin-top: 8px; }

/* Anchor jumps must clear the sticky nav (84px) and, on phones, the fixed CTA bar.
   2026-09-05: #estimate now sits on the FORM column, not on the section wrapper.
   On a phone the two columns stack and the copy column is about 1,500px tall, so
   an anchor on the section dropped the visitor two screens above the form. */
#estimate { scroll-margin-top: 100px; }
@media (max-width: 768px) { #estimate { scroll-margin-top: 148px; } }

/* ---------- CTA band ---------- */
.cta-section { position: relative; padding: 94px 0; text-align: center; color: #fff; background-size: cover; background-position: center 42%; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(10, 10, 10, 0.84), rgba(26, 7, 19, 0.88)); }
.cta-section--flat { background: linear-gradient(135deg, var(--pink) 0%, var(--pink-deep) 100%); }
.cta-section--flat::before { display: none; }
.cta-section .container { position: relative; z-index: 2; }
.cta-section h2 { font-size: clamp(27px, 3.4vw, 43px); margin-bottom: 12px; }
.cta-section p { max-width: 660px; margin: 0 auto 28px; color: rgba(255, 255, 255, 0.92); }
.cta-section--flat .btn--primary { background: var(--ink); box-shadow: none; }
.cta-section--flat .btn--primary:hover { background: #000; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 800px; margin: 40px auto 0; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: #fff; }
.faq-item__question { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: left; padding: 18px 22px; background: none; border: none; cursor: pointer; font-family: var(--font-body); font-weight: 800; font-size: 16px; color: var(--ink); transition: background 0.25s var(--ease); }
.faq-item__question:hover { background: var(--color-surface); }
.faq-item__question svg { flex-shrink: 0; transition: transform 0.3s var(--ease); color: var(--pink); }
.faq-item.active .faq-item__question svg { transform: rotate(180deg); }
.faq-item__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s var(--ease); }
.faq-item.active .faq-item__answer { max-height: 720px; }
.faq-item__answer-inner { padding: 0 22px 20px; color: var(--color-text-light); font-size: 15.5px; }

/* ---------- maps: one per location, full bleed, zero gap ---------- */
.map-section { line-height: 0; display: grid; grid-template-columns: 1fr; }
.map-section--multi { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .map-section--multi { grid-template-columns: 1fr; } }
.map-loc { position: relative; display: flex; flex-direction: column; border-left: 1px solid var(--color-border); }
.map-loc:first-child { border-left: 0; }
@media (max-width: 1000px) { .map-loc { border-left: 0; border-top: 1px solid var(--color-border); } .map-loc:first-child { border-top: 0; } }
.map-loc__label { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; line-height: 1.45; font-size: 14px; color: var(--color-text); background: var(--color-surface); padding: 14px 20px; }
.map-loc__label svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--pink); margin-top: 3px; }
.map-loc__label strong { display: block; font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.map-loc__dir { margin-left: auto; font-weight: 800; font-size: 13px; color: var(--pink-deep); white-space: nowrap; text-decoration: none; }
.map-embed { width: 100%; height: 300px; border: 0; display: block; }

/* ---------- hours table ---------- */
.hours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 40px; }
@media (max-width: 1000px) { .hours-grid { grid-template-columns: 1fr; } }
.hours-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); }
.hours-card h3 { font-size: 19px; color: var(--ink); margin-bottom: 4px; }
.hours-card__addr { font-size: 14.5px; color: var(--color-text-light); margin-bottom: 6px; }
.hours-card__phone { display: inline-block; font-weight: 800; color: var(--pink-deep); text-decoration: none; margin-bottom: 14px; }
.hours-card table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.hours-card th { text-align: left; font-weight: 600; color: var(--color-text-light); padding: 6px 0; border-top: 1px solid var(--color-border); }
.hours-card td { text-align: right; padding: 6px 0; border-top: 1px solid var(--color-border); font-weight: 700; color: var(--ink); }
.hours-card tr:first-child th, .hours-card tr:first-child td { border-top: 0; }
.hours-note { font-size: 13px; color: var(--color-text-light); margin-top: 14px; }

/* ---------- footer ---------- */
.footer { position: relative; background: var(--ink); color: var(--color-on-dark-muted); padding: 82px 0 34px; overflow: hidden; }
.footer .container { position: relative; z-index: 1; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.25fr; gap: 42px; }
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo { background: #fff; display: inline-block; border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; }
.footer__logo img { width: 150px; }
.footer__brand-desc { font-size: 14.5px; margin-bottom: 16px; }
.footer__rating { display: flex; align-items: center; gap: 6px; color: var(--color-google-star); margin-bottom: 18px; }
.footer__rating svg { width: 16px; height: 16px; }
.footer__rating span { color: #fff; font-weight: 700; font-size: 14px; margin-left: 4px; }
.footer__social { display: flex; gap: 12px; flex-wrap: wrap; }
.footer__social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ink-line); display: flex; align-items: center; justify-content: center; color: var(--color-on-dark-muted); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.footer__social a:hover { background: var(--pink); color: #fff; border-color: var(--pink); }
.footer__social svg { width: 17px; height: 17px; }
.footer__heading { font-size: 16px; color: #fff; margin-bottom: 16px; }
.footer__links a { display: block; padding: 4px 0; color: var(--color-on-dark-muted); text-decoration: none; font-size: 14.5px; transition: color 0.25s var(--ease); }
.footer__links a:hover { color: var(--pink-soft); }
.footer .contact-item { color: var(--color-on-dark-muted); }
.footer .contact-item a { color: #fff; font-weight: 700; text-decoration: none; }
.footer .contact-item a:hover { color: var(--pink-soft); }
.footer__bottom { margin-top: 46px; padding-top: 24px; border-top: 1px solid var(--ink-line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.legal-footer { background: #050505; color: #8A7F87; text-align: center; padding: 16px 20px; font-size: 13px; }
.legal-footer a { color: #B7A9B2; text-decoration: none; margin: 0 4px; }
.legal-footer a:hover { color: var(--pink-soft); }

/* ---------- breadcrumbs ---------- */
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: rgba(255, 255, 255, 0.72); }
.breadcrumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs .sep { opacity: 0.5; }
.breadcrumbs .current { color: #fff; font-weight: 700; }

/* ---------- badge row for light backgrounds (404, legal) ---------- */
.badge-row-light { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin: 0 0 26px; }
.badge-row-light__item { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; color: var(--color-text-light); }
.badge-row-light__item strong { color: var(--ink); }
.badge-row-light__item svg { width: 22px; height: 22px; flex-shrink: 0; }
.badge-row-light__item svg[fill="currentColor"] { color: var(--pink); }

/* ---------- review widget ---------- */
.review-widget { width: 100%; min-height: 640px; border: none; border-radius: 14px; background: #fff; display: block; box-shadow: var(--shadow-sm); }
@media (max-width: 640px) { .review-widget { min-height: 760px; } }

/* ---------- chamber widgets ---------- */
.chambers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 26px; margin-top: 30px; }
.chambers > div, .chambers > a { max-width: 190px; }
.chambers img { max-height: 90px; width: auto; margin: 0 auto; }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.hero__badges { animation: fadeInUp 0.8s var(--ease-out) 0s both; }
.hero__title { animation: fadeInUp 0.8s var(--ease-out) 0.14s both; }
.hero__count { animation: fadeInUp 0.8s var(--ease-out) 0.22s both; }
.hero__text { animation: fadeInUp 0.8s var(--ease-out) 0.3s both; }
.hero__trust { animation: fadeInUp 0.8s var(--ease-out) 0.38s both; }
.hero__actions { animation: fadeInUp 0.8s var(--ease-out) 0.44s both; }

@media (max-width: 768px) {
  .section { padding: 64px 0; }
  .band { padding: 64px 0 92px; }
  .cta-section { padding: 66px 0; }
  .hero--home .hero__content { padding: 60px 0 104px; }
  .btn-pair .btn, .hero__actions .btn { width: 100%; text-align: center; }
  /* the chat launcher is fixed bottom right, keep the last tappable thing clear of it */
  .cta-section, .lead-form, .form-card { padding-bottom: 88px; }
  .footer { padding-bottom: 94px; }
}

/* mobile tap targets: 44px floor on anything you tap.
   768 not 767, so the hamburger is still a 44px target at exactly 768px, which
   is where the fixed call bar is still on screen. */
@media (max-width: 768px) {
  .btn, .btn--sm { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; }
  .nav__link, .nav__dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .utility-bar__phone, .breadcrumbs a, .breadcrumbs li { min-height: 44px; display: inline-flex; align-items: center; }
  .nav__hamburger { min-width: 44px; min-height: 44px; }
  .footer__links a { min-height: 44px; display: flex; align-items: center; }
  .check-list li, .lead-split__links li { padding-top: 11px; padding-bottom: 11px; }
  .faq-item__question { min-height: 52px; }
  .form-check { min-height: 48px; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}