/* ---------- VERSA PROPERTY MANAGEMENT — STYLES ---------- */

:root {
  /* Brand — Versa palette. GREEN is the dominant color; purple is a slight accent
     reserved for select CTAs only. Header + dark surfaces use a neutral warm
     near-black so the green can breathe (the previous purple-navy fought the brand). */
  --ink: #1c1a18;          /* warm near-black — neutral, pairs cream + green cleanly */
  --ink-2: #26231f;         /* card on dark */
  --ink-3: #322e29;         /* elevated on dark */
  --line-dark: rgba(255, 255, 255, 0.08);
  --text-on-dark: #f6f3ec;
  --text-on-dark-soft: rgba(246, 243, 236, 0.78);
  --text-on-dark-mute: rgba(246, 243, 236, 0.6);

  --cream: #f7f4ed;        /* warm cream surface */
  --cream-2: #ece6d6;       /* slightly deeper warm surface */
  --line-light: rgba(28, 26, 24, 0.10);
  --text: #1c1a18;
  --text-soft: rgba(28, 26, 24, 0.74);
  --text-mute: rgba(28, 26, 24, 0.56);

  /* PRIMARY = brand green (leaf + tagline + underline of the Versa logo).
     `--coral` is preserved as the variable name for cross-template compatibility,
     but maps to the Versa forest green. */
  --coral: #2F6E31;        /* brand green — exact logo leaf, slightly deeper for AA on cream */
  --coral-2: #3F8C42;       /* hover state — brighter green */
  --coral-3: #265824;       /* pressed / deep green for surfaces */
  --coral-mute: #c2dbc3;    /* tinted mute */
  --coral-soft: #e6f0e7;    /* lightest green tint — surface wash */
  --secondary: #342F83;    /* brand royal purple — slight accent only (CTA highlight) */
  --secondary-2: #4d44a3;
  --lavender: #6f63d8;      /* logo's lighter purple — additional brand accent (matches the logo) */
  --lavender-soft: #efecfb; /* light lavender wash for subtle backgrounds */
  --neutral-warm: #6b6878;  /* warm gray — accent for property-mgmt feel */

  /* Typography — Fraunces for editorial property-management headings, Inter for body */
  --display: 'Fraunces', Georgia, serif;
  --headline: 'Fraunces', Georgia, serif;
  --body: 'Inter', system-ui, sans-serif;

  --container: 1200px;
  --container-narrow: 760px;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 6px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.18);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Universal heading wrap balance — no orphan words */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

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

a {
  color: inherit;
  text-decoration: none;
}

p { margin: 0.5em 0; }

ul, ol {
  padding-left: 1.2em;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--secondary);
  color: white;
  padding: 0.5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* ---------- LAYOUT ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.section {
  padding: 5rem 0;
}

@media (max-width: 720px) {
  .section { padding: 3.5rem 0; }
}

.section-cream {
  background: var(--cream-2);
}

/* Services section gets a clean white background so it visually breaks
   from the cream reviews section above and the cream service-area below. */
.section-services {
  background: #ffffff;
  border-top: 1px solid rgba(11, 22, 34, 0.06);
  border-bottom: 1px solid rgba(11, 22, 34, 0.06);
}

/* Service area gets a subtle top accent so it doesn't blur into the section above */
.section-area {
  background: var(--cream);
  position: relative;
}

.section-area::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: var(--coral);
  border-radius: 999px;
  margin-top: 1.5rem;
}

/* Subtle orange dot divider above sections that share bg color with whatever's above */
.section-divider-dot::before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  margin: 0 auto 2rem;
}

.section-head {
  margin-bottom: 3rem;
  max-width: 780px;
}

.section-head-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.section-foot {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.feature-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.section-eyebrow {
  display: inline-block;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1rem;
  text-wrap: balance;
}

/* Hero eyebrow sits on the dark photo — cream reads far better than the brand green */
.hero-image .eyebrow { color: #f3eee4; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }

.eyebrow {
  display: inline-block;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1.25rem;
  text-wrap: balance;
}

/* Headlines */
h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.4rem, 5vw + 1rem, 4.8rem);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: var(--ink);
}

h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 0 0 0.75rem;
  color: var(--ink);
}

h3 {
  font-family: var(--headline);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}

h4 {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 0.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 120ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--secondary);
  color: white;
  border-color: var(--secondary);
}
.btn-primary:hover {
  background: var(--secondary-2);
  border-color: var(--secondary-2);
}

.btn-outline {
  background: transparent;
  color: var(--secondary);
  border-color: var(--secondary);
}
.btn-outline:hover {
  background: var(--secondary);
  color: white;
}

.btn-ghost {
  background: transparent;
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-lg {
  padding: 1rem 1.6rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
}

/* ---------- HEADER ---------- */
/* Header — transparent over hero by default, opaque + blurred once scrolled.
   The `data-scrolled` attribute is toggled by inline JS in the footer partial. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  color: var(--text-on-dark);
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease, backdrop-filter 0.28s ease, box-shadow 0.28s ease;
}

.site-header[data-scrolled="true"] {
  background: rgba(28, 26, 24, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--line-dark);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

/* Non-home pages get the solid header immediately (no hero photo behind it). */
body:not(.home) .site-header {
  background: rgba(28, 26, 24, 0.94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom-color: var(--line-dark);
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: 160px;
  overflow: visible;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--display);
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 0.5rem;
}

/* Logo image — prominent in the header. The PNG is now regenerated from the
   original source with a tightly-cropped logo + 32% transparent bottom padding
   built in (per Luke 2026-05-16 — "bottom is still cut off"). The image height
   is set tight to the nav height so no part of the image overflows the header
   box; the transparent bottom padding gives the tagline visual breathing room
   inside the nav, and the cream glow has somewhere to fade. */
.brand img.brand-logo {
  height: 156px;
  width: auto;
  display: block;
  /* Cream halo glow lifts the dark logo + black tagline off the dark header
     so it actually reads. PNG now has a hard alpha floor (≥40), so the canvas
     edges are fully transparent — the drop-shadow only renders around the
     real logo shape, not a rectangle. */
  filter:
    drop-shadow(0 0 4px rgba(247, 244, 237, 0.45))
    drop-shadow(0 0 16px rgba(247, 244, 237, 0.22))
    drop-shadow(0 0 32px rgba(247, 244, 237, 0.12))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.32));
  transition: height 0.2s ease;
}

.site-header[data-scrolled="true"] .brand img.brand-logo {
  height: 124px;
}
.site-header[data-scrolled="true"] .nav { height: 128px; }

@media (max-width: 960px) {
  .nav { height: 112px; }
  .brand img.brand-logo { height: 108px; }
  .site-header[data-scrolled="true"] .brand img.brand-logo { height: 92px; }
  .site-header[data-scrolled="true"] .nav { height: 96px; }
}

@media (max-width: 540px) {
  .nav { height: 92px; }
  .brand img.brand-logo { height: 88px; }
  .site-header[data-scrolled="true"] .brand img.brand-logo { height: 78px; }
  .site-header[data-scrolled="true"] .nav { height: 82px; }
}

/* Keep these classes around in case any page still references them — but hidden. */
.brand-mark,
.brand-word { display: none; }

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25rem;
  flex: 1;
  justify-content: center;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  font-weight: 500;
  font-size: 0.94rem;
  color: var(--text-on-dark-soft);
  transition: color 160ms ease, background 160ms ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text-on-dark);
  background: rgba(255, 255, 255, 0.06);
}

.nav-links a.active {
  color: var(--secondary-2);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--headline);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-on-dark);
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  transition: color 160ms ease;
}

.nav-phone:hover { color: rgba(255, 255, 255, 0.7); }
.nav-phone .icon-svg { width: 16px; height: 16px; }

.icon-svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.icon-svg.solid { fill: currentColor; stroke: none; }

.mobile-toggle {
  display: none;
  background: none;
  border: 0;
  color: var(--text-on-dark);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
}

/* DROPDOWN — Services */
.has-dropdown {
  position: relative;
}

.dropdown-trigger .caret {
  width: 10px;
  height: 10px;
  transition: transform 200ms ease;
}

.has-dropdown:hover .dropdown-trigger .caret,
.has-dropdown.open .dropdown-trigger .caret {
  transform: rotate(180deg);
}

.dropdown-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 720px;
  max-width: 92vw;
  background: var(--ink-2);
  color: var(--text-on-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
}

.has-dropdown:hover .dropdown-panel,
.has-dropdown:focus-within .dropdown-panel,
.has-dropdown.open .dropdown-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Hover bridge so the gap doesn't close the dropdown */
.has-dropdown::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}

.dropdown-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1.5rem;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-soft);
  transition: color 140ms ease, background 140ms ease;
}

.dropdown-item:hover {
  color: var(--text-on-dark);
  background: rgba(255, 92, 61, 0.08);
}

.dropdown-item-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  color: #ffffff;
}

.dropdown-item-icon svg { width: 100%; height: 100%; }

.dropdown-item-name {
  font-family: var(--headline);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
}

.dropdown-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.dropdown-cta {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--text-on-dark-soft);
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  transition: color 140ms ease, background 140ms ease;
}

.dropdown-cta:hover { color: var(--secondary-2); }

.dropdown-cta.accent {
  background: var(--secondary);
  color: white;
}

.dropdown-cta.accent:hover { background: var(--secondary-2); color: white; }

/* MOBILE NAV */
@media (max-width: 960px) {
  /* Push hamburger to the right edge by giving .nav-cta auto left margin
     once .nav-links exits the flex flow on tablet/mobile. */
  .nav-cta { margin-left: auto; }

  .nav-links {
    position: fixed;
    top: var(--mobile-nav-h, 92px);
    left: 0;
    right: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 1rem;
    background: var(--ink);
    border-bottom: 1px solid var(--line-dark);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 220ms;
    max-height: calc(100vh - var(--mobile-nav-h, 92px));
    overflow-y: auto;
    z-index: 49;
  }

  .nav-links.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 200ms ease, transform 220ms ease, visibility 0s linear 0s;
  }

  /* While the menu is open: solid header so the page can't peek through it. */
  body.menu-open .site-header,
  body.menu-open .site-header[data-scrolled],
  body.menu-open .site-header[data-scrolled="false"] {
    background-color: var(--ink);
  }

  .nav-links li, .nav-links a { width: 100%; }

  .nav-links a {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    justify-content: space-between;
    color: var(--text-on-dark);
  }

  .dropdown-panel {
    position: static;
    transform: none !important;
    min-width: 0;
    max-width: 100%;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.03);
    margin-top: 0.4rem;
    padding: 1rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    display: none;
    left: auto;
  }

  .has-dropdown.open .dropdown-panel,
  .has-dropdown:focus-within .dropdown-panel {
    display: block;
    transform: none !important;
  }

  .has-dropdown:hover .dropdown-panel {
    display: none;
    transform: none !important;
  }

  .has-dropdown.open:hover .dropdown-panel { display: block; }

  .dropdown-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .dropdown-cta { text-align: center; }

  .dropdown-grid {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  /* Hide phone + Free Quote button text on mobile, show only the hamburger.
     Hamburger gets a clear hit target with rounded edges. */
  .nav-phone { display: none; }
  .nav-cta .btn-primary { display: none; }
  .mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--text-on-dark);
    font-size: 1.4rem;
    cursor: pointer;
    transition: background 160ms ease;
  }
  .mobile-toggle:hover { background: rgba(255, 255, 255, 0.14); }
}

/* ---------- HERO ---------- */
.hero {
  background-color: var(--ink);
  background-image:
    /* Two-column hero: dark anchor behind the LEFT copy column, then a hard fade
       so the RIGHT photo card sits on a visible-photo plate. Keeps both columns readable. */
    linear-gradient(95deg, rgba(28, 26, 24, 0.88) 0%, rgba(28, 26, 24, 0.78) 30%, rgba(28, 26, 24, 0.46) 56%, rgba(28, 26, 24, 0.22) 80%, rgba(28, 26, 24, 0.30) 100%),
    var(--hero-bg, none);
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  color: var(--text-on-dark);
  padding: 13rem 0 7rem; /* clears the 168px fixed header + breathing room */
  min-height: 96vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* When the home page sets `style="--hero-bg: url(...)"` the hero gets a real photo background.
   When no `--hero-bg` is set (page-hero, etc.), the hero falls back to the gradient alone. */
.hero.hero-image { background-blend-mode: normal; }

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Green wash top-left + tiny purple touch bottom-right — green dominant, purple is the slight accent */
    radial-gradient(55% 60% at 5% 15%, rgba(47, 110, 49, 0.22), transparent 65%),
    radial-gradient(40% 40% at 100% 100%, rgba(52, 47, 131, 0.16), transparent 65%);
  pointer-events: none;
}

/* Decorative leaf accent in the hero corner — echoes the logo leaf at scale */
.hero::after {
  content: '';
  position: absolute;
  top: 18%;
  right: -4%;
  width: 320px;
  height: 320px;
  background-image: radial-gradient(closest-side, rgba(53, 122, 55, 0.18), transparent 70%);
  pointer-events: none;
  filter: blur(6px);
}
@media (max-width: 800px) {
  .hero::after { display: none; }
}

.hero > .container { position: relative; width: 100%; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

.hero-copy { min-width: 0; }

.hero-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ---------- HERO QUICK-QUOTE CARD (right column on desktop) ---------- */
.hero-form-card {
  background: white;
  border-radius: 18px;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.05);
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.hero-form-head { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.2rem; }

.hero-form-eyebrow {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lavender);
}

.hero-form-h2 {
  font-family: var(--display);
  font-size: 1.55rem;
  line-height: 1.1;
  margin: 0;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-form-sub {
  font-size: 0.92rem;
  color: var(--text-soft);
  margin: 0;
  line-height: 1.45;
}

.hero-form { display: flex; flex-direction: column; gap: 0.65rem; }

.hero-form-field { display: flex; flex-direction: column; gap: 0.3rem; }

.hero-form-field > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.01em;
}
.hero-form-field > span em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-mute);
}

.hero-form-field input {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-light);
  border-radius: 9px;
  font-family: var(--body);
  font-size: 0.94rem;
  color: var(--text);
  background: #fafaf7;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.hero-form-field input:focus {
  outline: none;
  border-color: var(--secondary);
  background: white;
  box-shadow: 0 0 0 3px rgba(52, 47, 131, 0.14);
}

.hero-form-fineprint {
  font-size: 0.72rem;
  color: var(--text-mute);
  margin: 0.1rem 0 0;
  line-height: 1.35;
}

.btn-block { width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .hero-form-card { display: none; }
}

.hero-feature-photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
  aspect-ratio: 4 / 5;
  background: rgba(0, 0, 0, 0.2);
  transform: translateY(-1rem);
}

.hero-feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-feature-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.7));
  pointer-events: none;
}

.hero-feature-caption {
  position: absolute;
  left: 1.1rem;
  right: 1.1rem;
  bottom: 1rem;
  color: white;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.hero-feature-caption small {
  display: block;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
  margin-top: 0.3rem;
}

.hero-feature-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.hero-feature-stat {
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-feature-stat-num {
  font-family: var(--display);
  font-size: 1.6rem;
  line-height: 1;
  color: white;
  margin-bottom: 0.3rem;
  font-weight: 600;
}
.hero-feature-stat-num .star {
  color: #ffc94a;
  margin-right: 0.15rem;
}
.hero-feature-stat-label {
  font-size: 0.74rem;
  color: var(--text-on-dark-mute);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 960px) {
  .hero {
    padding: 9rem 0 3rem;
    /* Mobile bg: a cinematic generated PORTRAIT hero (768x1376) — golden-hour
       craftsman home + striped lawn + dusk sky — instead of the flat landscape
       desktop crop. !important because the home page sets --hero-bg inline. */
    background-image:
      linear-gradient(180deg, rgba(24, 22, 32, 0.86) 0%, rgba(24, 22, 32, 0.62) 32%, rgba(24, 22, 32, 0.40) 60%, rgba(24, 22, 32, 0.30) 100%),
      url('/assets/images/hero-mobile.jpg') !important;
    background-position: center center;
    background-size: cover;
    min-height: auto;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .hero-feature,
  .hero-form-card {
    display: none;
  }
}

@media (max-width: 540px) {
  .hero {
    padding: 7rem 0 2.5rem;
  }
}

.hero-copy h1 {
  color: var(--text-on-dark);
}

.hero-h1 {
  font-size: clamp(2.6rem, 5.5vw + 1rem, 5.6rem);
  line-height: 0.95;
  margin: 0 0 1.5rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hero-h1-stack {
  display: block;
}

.hero-h1-stack.accent {
  color: #6f63d8;
  /* Stronger purple-tinted shadow on the brand-tagline line so it pops */
  text-shadow:
    0 2px 18px rgba(0, 0, 0, 0.7),
    0 0 24px rgba(82, 75, 188, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-sub {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-sub {
  font-size: 1.15rem;
  color: var(--text-on-dark-soft);
  margin: 0 0 1.75rem;
  max-width: 560px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.25rem;
}

.hero-actions .btn-outline {
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, 0.3);
}

.hero-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-on-dark);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Hero checkmark trust bullets — Luxe-style value statements */
.hero-trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 1.5rem;
  max-width: 660px;
}

.hero-trust-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.97rem;
  color: var(--text-on-dark);
  line-height: 1.35;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.hero-trust-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--coral);
  background: rgba(247, 108, 8, 0.14);
  border: 1px solid rgba(247, 108, 8, 0.5);
  border-radius: 50%;
  padding: 3px;
  margin-top: 1px;
  box-shadow: 0 0 0 1px rgba(247, 108, 8, 0.18), 0 4px 14px rgba(247, 108, 8, 0.2);
}

@media (max-width: 720px) {
  .hero-trust-list { grid-template-columns: 1fr; gap: 0.55rem; }
  .hero-trust-list li { font-size: 0.92rem; }
}

/* Legacy hero-trust classes preserved as fallbacks if any other page references them */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.hero-trust-item { display: flex; flex-direction: column; }
.hero-trust-num { font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--coral); margin-bottom: 0.2rem; }
.hero-trust-label { font-size: 0.8rem; color: var(--text-on-dark-mute); letter-spacing: 0.05em; text-transform: uppercase; }
.hero-trust-divider { width: 1px; height: 36px; background: var(--line-dark); }

.hero-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/3;
}

.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-photo-tag {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  background: rgba(13, 13, 13, 0.85);
  backdrop-filter: blur(8px);
  color: var(--text-on-dark);
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
}

.hero-photo-tag span {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--coral);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

/* ---------- TRUST STRIP (under hero) ----------
   Editorial inline strip — clean cream surface, hairline dividers between metrics,
   green minimal mark + restrained type. No boxy cards, no neon icon tiles. */
.trust-strip {
  background: var(--cream);
  border-top: 1px solid var(--line-light);
  border-bottom: 1px solid var(--line-light);
  padding: 1.6rem 0;
  position: relative;
}

.trust-strip > .container {
  position: relative;
}

.trust-strip-grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  flex-wrap: nowrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1.4rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  border-right: 1px solid var(--line-light);
  flex: 1 1 0;
  min-width: 0;
}

.trust-badge:last-child { border-right: 0; }

.trust-badge:hover { background: transparent; transform: none; }

.trust-badge-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.trust-badge-icon svg {
  width: 22px;
  height: 22px;
}

.trust-badge-icon-star,
.trust-badge-icon-clock {
  color: var(--coral);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.trust-badge-text {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.trust-badge-title {
  font-family: var(--body);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0;
}

.trust-badge-sub {
  font-size: 0.78rem;
  color: var(--text-mute);
  line-height: 1.35;
  letter-spacing: 0;
}

@media (max-width: 1080px) {
  .trust-strip-grid { flex-wrap: wrap; gap: 0; }
  .trust-badge {
    flex: 1 1 33%;
    border-right: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
    padding: 0.7rem 1rem;
  }
  .trust-badge:nth-child(3n) { border-right: 0; }
  .trust-badge:nth-last-child(-n+3) { border-bottom: 0; }
}

@media (max-width: 720px) {
  .trust-strip { padding: 1rem 0; }
  .trust-badge {
    flex: 1 1 50%;
    padding: 0.65rem 0.9rem;
    gap: 0.55rem;
    border-right: 1px solid var(--line-light);
    border-bottom: 1px solid var(--line-light);
  }
  .trust-badge:nth-child(2n) { border-right: 0; }
  .trust-badge:nth-last-child(-n+2) { border-bottom: 0; }
  .trust-badge:last-child:nth-child(odd) {
    flex: 1 1 100%;
    border-right: 0;
    justify-content: center;
  }
  .trust-badge-icon { width: 22px; height: 22px; }
  .trust-badge-icon svg { width: 18px; height: 18px; }
  .trust-badge-title { font-size: 0.84rem; }
  .trust-badge-sub { font-size: 0.72rem; }
}

/* Mobile auto-rotating trust carousel.
   JS adds `.is-carousel` (and `.is-carousel-wrap` on the strip) ONLY on mobile
   widths with motion allowed — so desktop and prefers-reduced-motion keep the
   normal stacked layout above as a clean fallback. */
/* Lock background scroll while the mobile menu is open (toggled by JS). */
body.menu-open { overflow: hidden; }

/* Mobile infinite-scroll marquee for the trust bar. JS clones the badges and adds
   .is-marquee (mobile + motion-allowed only); desktop keeps the static 5-across row. */
.trust-strip.is-marquee-wrap > .container {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.trust-strip-grid.is-marquee {
  flex-wrap: nowrap;
  width: max-content;
  justify-content: flex-start;
  gap: 0;
  animation: trust-marquee 20s linear infinite;
  will-change: transform;
}
.trust-strip-grid.is-marquee .trust-badge {
  flex: 0 0 auto;
  width: auto;
  min-width: 210px;
  border: 0 !important;
  justify-content: center;
}
.trust-strip-grid.is-marquee:hover { animation-play-state: paused; }
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- PAGE HERO (sub-pages) ----------
   Brand-green plate. Centered text composition — eyebrow, H1, body all align
   along the page's centerline so the sub-page hero feels deliberate (not a
   left-stranded headline). Home hero stays left-aligned because it has a
   right-side companion column; sub-page heroes don't, so they center. */
.page-hero {
  background-color: #241e58;
  background-image:
    linear-gradient(180deg, rgba(36, 30, 88, 0.90) 0%, rgba(52, 47, 131, 0.93) 100%),
    url('/assets/images/gallery/photo-002.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-on-dark);
  padding: 14rem 0 5.5rem;
  position: relative;
  text-align: center;
}

.page-hero > .container { max-width: 900px; }

.page-hero .eyebrow,
.page-hero .section-eyebrow {
  color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 960px) {
  .page-hero { padding: 10rem 0 4rem; }
}

@media (max-width: 540px) {
  .page-hero { padding: 8.5rem 0 3rem; }
}

.page-hero h1 {
  color: var(--text-on-dark);
  margin-bottom: 1rem;
}

.page-hero p {
  color: var(--text-on-dark-soft);
  font-size: 1.1rem;
  max-width: 720px;
  margin: 0 auto;
}


.breadcrumb {
  font-size: 0.85rem;
  color: var(--text-on-dark-mute);
  letter-spacing: 0.04em;
  margin-bottom: 1.25rem;
}

.breadcrumb a { color: var(--text-on-dark-soft); }
.breadcrumb a:hover { color: var(--secondary); }

/* ---------- PAIN GRID ---------- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 800px) {
  .pain-grid { grid-template-columns: 1fr; }
}

.pain-card {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.pain-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.pain-num {
  font-family: var(--display);
  color: var(--coral);
  font-size: 1.4rem;
  letter-spacing: -0.04em;
  margin-bottom: 0.5rem;
}

.pain-card h3 { margin-bottom: 0.4rem; }
.pain-card p { color: var(--text-soft); margin: 0; }

/* ---------- SERVICES GRID ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Full services grid (the /services page, all 10) — clean 5 x 2 on desktop so there's
   no lone orphan card. Falls to 2 columns on tablet, carousel on mobile (base rules). */
@media (min-width: 961px) and (max-width: 1099px) {
  .services-grid--full { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .services-grid--full { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .services-grid--full .service-card-body p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (max-width: 600px) {
  /* Mobile: services become a horizontal swipe carousel (like the reviews carousel).
     One card visible at a time + the next card peeks ~10% on the right so the
     swipeability is obvious. */
  .services-grid {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1.5rem;
    gap: 1rem;
    /* Bleed out of the .container's 1.5rem padding so cards can sit flush with the
       screen edge. Restore the same padding inside the track so the first card
       still aligns with the rest of the page content. */
    margin: 0 -1.5rem;
    padding: 0.5rem 1.5rem 1.5rem;
    -webkit-overflow-scrolling: touch;
  }
  /* Hide the scrollbar — visual cue is the peek alone */
  .services-grid::-webkit-scrollbar { display: none; }
  .services-grid { scrollbar-width: none; }

  .services-grid .service-card {
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  /* When inside the carousel the hover-lift would feel weird on touch */
  .services-grid .service-card:hover { transform: none; }
}

.service-card {
  display: flex;
  flex-direction: column;
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  box-shadow: var(--shadow-sm);
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--coral-mute);
}

.service-card-img {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--ink);
  overflow: hidden;
}

.service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.service-card:hover .service-card-img img { transform: scale(1.04); }

/* Icon fallback when no real photo exists — premium dark backdrop with
   brand-orange icon, brand-blue accent glow, and a subtle grid pattern. */
.service-card-icon-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(80% 70% at 50% 40%, rgba(247, 108, 8, 0.10), transparent 70%),
    linear-gradient(135deg, #152133 0%, #0b1622 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--coral);
  overflow: hidden;
}

/* Faint grid lines for premium texture */
.service-card-icon-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(247, 108, 8, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 108, 8, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(60% 60% at 50% 50%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, black 0%, transparent 75%);
}

.service-card-icon-bg svg {
  position: relative;
  z-index: 1;
  width: 44%;
  height: 44%;
  filter: drop-shadow(0 6px 18px rgba(247, 108, 8, 0.4));
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.service-card:hover .service-card-icon-bg svg { transform: scale(1.08); }

.service-card-icon-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 40% at 25% 25%, rgba(247, 108, 8, 0.18), transparent 65%),
    radial-gradient(35% 35% at 80% 80%, rgba(55, 154, 225, 0.16), transparent 65%);
  pointer-events: none;
}

.service-card-body {
  padding: 1.25rem 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.service-card-body h3 {
  font-size: 1.1rem;
  margin: 0;
}

.service-card-body p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--text-soft);
  line-height: 1.5;
  flex: 1;
}

.service-card-cta {
  margin-top: 0.4rem;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
}

/* ---------- FEATURE SPLIT ---------- */
.feature-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 880px) {
  .feature-split { grid-template-columns: 1fr; gap: 2rem; }
}

.feature-photo {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/5;
}

.feature-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.5rem;
}

.feature-list li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0.4rem 0;
  color: var(--text-soft);
}

.feature-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.85rem;
  height: 2px;
  background: var(--coral);
}

/* ---------- REVIEWS CAROUSEL (modern, Google-branded) ---------- */
.reviews-section {
  background: var(--cream);
  color: var(--text);
  position: relative;
  padding: 5rem 0 4.5rem;
}

.reviews-section h2,
.reviews-section .section-head p {
  color: var(--text);
}

.reviews-section .section-eyebrow {
  color: var(--coral);
}

/* Small inline rating that sits within the section header — replaces the big summary bubble */
.reviews-inline-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}

.reviews-inline-stars {
  color: #fbbc05;
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  line-height: 1;
}

.reviews-inline-score {
  font-family: var(--display);
  font-weight: 800;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
}

.reviews-inline-meta { color: var(--text-mute); }
.reviews-inline-count { color: var(--text-soft); }

/* "Read all reviews on Google" link — sits BELOW the carousel controls */
.reviews-see-all-row {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}

.reviews-google-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
  letter-spacing: 0.01em;
  padding: 0.6rem 1.1rem;
  background: white;
  border: 1px solid rgba(11, 22, 34, 0.12);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(11, 22, 34, 0.05);
  transition: border-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.reviews-google-link:hover {
  border-color: var(--secondary);
  color: var(--secondary);
  box-shadow: 0 4px 14px rgba(52, 47, 131, 0.18);
  transform: translateY(-1px);
}

/* Carousel container */
.reviews-carousel {
  position: relative;
}

.reviews-track-wrap {
  overflow: hidden;
  padding: 0.5rem 0 1rem; /* room for card shadows */
}

.reviews-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0;
}

.reviews-track::-webkit-scrollbar { display: none; }

/* Each review card — same dimensions, no quote mark abuse */
.review {
  flex: 0 0 calc((100% - 3rem) / 3);
  scroll-snap-align: start;
  background: white;
  border: 1px solid rgba(11, 22, 34, 0.08);
  border-radius: 18px;
  padding: 1.6rem 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 6px 20px rgba(11, 22, 34, 0.07), 0 1px 2px rgba(11, 22, 34, 0.04);
  transition: transform 220ms ease, box-shadow 220ms ease;
  /* Uniform height — controls visual rhythm */
  min-height: 280px;
}

.review:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(11, 22, 34, 0.12), 0 1px 2px rgba(11, 22, 34, 0.04);
}

.review-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
}

.review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--coral), var(--coral-3));
  color: white;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-author-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.review-author {
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text);
  line-height: 1.2;
}

.review-meta {
  font-size: 0.78rem;
  color: var(--text-mute);
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}

.review-google {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-stars {
  color: #fbbc05;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  line-height: 1;
}

.review-text {
  font-size: 0.95rem;
  color: var(--text-soft);
  font-style: normal;
  line-height: 1.55;
  margin: 0;
  /* Limit to ~6 lines so cards stay even; full text on individual review pages */
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Controls below the carousel — prev/next + dots in one row */
.reviews-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.6rem;
}

.reviews-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(11, 22, 34, 0.14);
  background: white;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  box-shadow: 0 2px 8px rgba(11, 22, 34, 0.06);
}

.reviews-carousel-btn:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: white;
}

.reviews-dots {
  display: flex;
  gap: 0.4rem;
}

.reviews-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(11, 22, 34, 0.18);
  transition: background 200ms ease, width 200ms ease;
}

.reviews-dot.active {
  background: var(--secondary);
  width: 22px;
  border-radius: 999px;
}

@media (max-width: 960px) {
  .review { flex: 0 0 calc((100% - 1.5rem) / 2); }
}

@media (max-width: 640px) {
  .review { flex: 0 0 86%; min-height: 240px; }
  .reviews-section { padding: 3.5rem 0 3.5rem; }
  .reviews-google-summary { min-width: 0; }
  .reviews-google-score-num { font-size: 1.6rem; }
}

/* Service detail page carousels inherit the same styles */
.section.reviews-section { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* ---------- PROCESS ---------- */
.process-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

@media (max-width: 880px) {
  .process-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .process-row { grid-template-columns: 1fr; }
}

.process-step {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.6rem;
  position: relative;
}

.process-num {
  font-family: var(--display);
  color: var(--coral);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.04em;
}

.process-step p {
  color: var(--text-soft);
  font-size: 0.95rem;
  margin: 0;
}

/* ---------- AREA ---------- */
.area-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
}

.area-pill-list li {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: var(--headline);
  font-weight: 600;
  font-size: 0.88rem;
}

/* AREA PAGE GRID — editorial city list, NorthLeaf-style.
   Two columns of cities with hairline dividers + neighborhood mini-list. No card chrome. */
.area-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4rem;
  row-gap: 0;
  border-top: 1px solid var(--line-light);
}

@media (max-width: 720px) {
  .area-grid { grid-template-columns: 1fr; column-gap: 0; }
}

.area-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line-light);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.area-card-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--text);
  letter-spacing: -0.005em;
}

.area-card-state {
  color: var(--text-mute);
  font-weight: 400;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.area-card-neighborhoods {
  font-size: 0.85rem;
  color: var(--text-mute);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

@media (max-width: 540px) {
  .area-card { padding: 1.1rem 0; }
  .area-card-name { font-size: 1.3rem; }
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 800px) {
  .trust-row { grid-template-columns: 1fr; }
}

.trust-card {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
}

/* ---------- CTA BANNER ----------
   Background = sump pump + softener install (copper pipes, plumbing infrastructure)
   under a heavy dark overlay so the photo is more texture than image. */
.section-cta {
  background-color: var(--ink);
  background-image:
    /* Heavy overlay — photo is mostly hidden, adds depth rather than competing */
    linear-gradient(105deg, rgba(26, 18, 68, 0.97) 0%, rgba(26, 18, 68, 0.94) 50%, rgba(26, 18, 68, 0.86) 100%),
    url('/assets/images/gallery/photo-007.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-on-dark);
  position: relative;
}

.section-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 10% 50%, rgba(247, 108, 8, 0.14), transparent 70%),
    radial-gradient(40% 60% at 95% 30%, rgba(55, 154, 225, 0.18), transparent 70%);
  pointer-events: none;
}

.section-cta > .container { position: relative; }

.cta-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 720px) {
  .cta-banner { grid-template-columns: 1fr; gap: 1.25rem; }
}

.cta-banner h2 { color: var(--text-on-dark); margin: 0 0 0.4rem; }
.cta-banner p { color: var(--text-on-dark-soft); margin: 0; max-width: 56ch; }

.cta-banner-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ---------- GALLERY ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 320px;
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 280px; }
}

.gallery-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0;
  background: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: default;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gallery-card:hover img { transform: scale(1.04); }

.gallery-card figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.5rem 1.4rem 1.4rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0.65) 70%, transparent);
  color: var(--text-on-dark);
  transform: translateY(40%);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.gallery-card:hover figcaption,
.gallery-card:focus-within figcaption {
  transform: translateY(0);
}

.gallery-card figcaption h3 {
  color: var(--text-on-dark);
  font-size: 1.1rem;
  margin: 0.3rem 0 0.4rem;
}

.gallery-card figcaption p {
  font-size: 0.88rem;
  color: var(--text-on-dark-soft);
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.gallery-cat {
  display: inline-block;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coral);
}

.gallery-link {
  display: inline-block;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--coral);
  margin-top: 0.3rem;
}

.gallery-link:hover { color: var(--secondary-2); }

.gallery-tall {
  grid-row: span 2;
}

.gallery-tall figcaption {
  transform: translateY(30%);
}

.gallery-cta {
  background: var(--cream-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed var(--line-light);
}

.gallery-cta-body { color: var(--text); }
.gallery-cta h3 { color: var(--text); margin: 0.4rem 0 0.5rem; }
.gallery-cta p { color: var(--text-soft); margin: 0 0 1rem; font-size: 0.92rem; }

@media (max-width: 540px) {
  .gallery-tall { grid-row: auto; }
}

/* ---------- ABOUT ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.about-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 1.5rem;
  color: var(--text-on-dark);
}

.about-stat {
  display: flex;
  flex-direction: column;
  padding: 0.6rem;
}

.about-stat-num {
  font-family: var(--display);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--coral);
  margin-bottom: 0.25rem;
  letter-spacing: -0.03em;
}

.about-stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-on-dark-mute);
}

.values-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 880px) {
  .values-row { grid-template-columns: 1fr; }
}

.value-card {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
}

.value-num {
  font-family: var(--display);
  color: var(--coral);
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  letter-spacing: -0.04em;
}

.value-card p { color: var(--text-soft); margin: 0; }

/* ---------- CONTACT ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

@media (max-width: 880px) {
  .contact-grid { grid-template-columns: 1fr; }
}

.contact-form-card {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}

.contact-sub {
  color: var(--text-soft);
  margin: 0.4rem 0 1.5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 540px) {
  .form-row { grid-template-columns: 1fr; }
}

.contact-form label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-family: var(--headline);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text);
}

.contact-form label span em {
  font-style: normal;
  color: var(--coral);
  margin-left: 0.15rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.85rem 1rem;
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--text);
  background: var(--cream);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  transition: border-color 160ms ease, background 160ms ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--coral);
  background: white;
}

.contact-form textarea { resize: vertical; min-height: 110px; }

.form-fineprint {
  font-size: 0.8rem;
  color: var(--text-mute);
  margin: 0.6rem 0 0;
}

.contact-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.contact-card {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.contact-card h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.contact-card p { color: var(--text-soft); margin: 0; font-size: 0.92rem; }

.contact-big-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-family: var(--headline);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0.5rem 0;
  transition: background 160ms ease;
}

.contact-big-btn:hover { background: #1f1f1f; color: var(--secondary-2); }

.contact-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--coral);
}

/* ---------- SERVICE PAGE ---------- */
.page-content {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 960px) {
  .page-content { grid-template-columns: 1fr; }
}

.page-content h2 {
  margin-top: 2.5rem;
  font-size: clamp(1.6rem, 1.6vw + 1rem, 2.2rem);
}

.page-content h2:first-child { margin-top: 0; }

.page-content p { color: var(--text-soft); }

.steps-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

@media (max-width: 600px) { .steps-grid { grid-template-columns: 1fr; } }

.step {
  background: var(--cream-2);
  border-left: 3px solid var(--coral);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.25rem;
}

.step h4 { font-size: 0.92rem; margin-bottom: 0.3rem; letter-spacing: 0.04em; }

.faq-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1rem; }

.faq-item {
  background: white;
  border: 1px solid var(--line-light);
  border-radius: var(--radius-sm);
  padding: 0;
}

.faq-question {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-family: var(--headline);
  font-weight: 700;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question::after {
  content: '+';
  font-size: 1.4rem;
  color: var(--coral);
  font-weight: 800;
  transition: transform 200ms ease;
}

.faq-item[open] .faq-question::after { transform: rotate(45deg); }

.faq-question::-webkit-details-marker { display: none; }

.faq-answer {
  padding: 0 1.25rem 1rem;
  color: var(--text-soft);
}

.sidebar {
  background: var(--cream-2);
  border: 1px solid var(--line-light);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: sticky;
  top: 100px;
}

.sidebar h3 { font-size: 1rem; margin-bottom: 0.5rem; }

.sidebar-services {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.sidebar-services li { margin: 0.15rem 0; }

.sidebar-services a {
  display: block;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--text-soft);
}

.sidebar-services a:hover { background: white; color: var(--secondary-2); }
.sidebar-services a.current { background: white; color: var(--secondary); font-weight: 700; }

.feature-image {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-md);
}

.feature-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per Luke 2026-05-19 — kill decorative inline photos on mobile (the big
   "Stop juggling four contractors" lawn-and-house photo specifically). They
   look great on desktop where they balance the column layout but feel awkward
   and take up vertical space on a phone where they're full-width slabs. */
@media (max-width: 720px) {
  .feature-image,
  .feature-photo {
    display: none;
  }
}

/* Service hero icon (when no real photo) */
.service-hero-icon {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.service-hero-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 50% at 30% 30%, rgba(255, 92, 61, 0.18), transparent 60%);
}

.service-hero-icon svg { width: 28%; height: 28%; }

/* ---------- PROSE (privacy/terms) ---------- */
.prose { color: var(--text); }
.prose h2 { margin: 2rem 0 0.6rem; font-size: 1.4rem; }
.prose p, .prose ul { color: var(--text-soft); margin: 0.6rem 0; }
.prose a { color: var(--secondary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- FOOTER ---------- */
.site-footer {
  background: var(--ink);
  color: var(--text-on-dark);
  padding: 4rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr; }
}

.footer-brand {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--display);
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}

.footer-brand .brand-mark { font-size: 1.8rem; }
.footer-brand span:not(.brand-mark) { color: var(--text-on-dark); }

.footer-tagline {
  color: var(--text-on-dark-soft);
  margin: 0 0 1rem;
  font-size: 0.94rem;
  max-width: 32ch;
}

.footer-loc, .footer-hours {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-on-dark-mute);
  font-size: 0.85rem;
  margin-right: 1rem;
}

.footer-loc .icon-svg, .footer-hours .icon-svg { width: 14px; height: 14px; }

.site-footer h4 {
  color: var(--text-on-dark);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  color: var(--coral);
}

.footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-list li { margin: 0.4rem 0; }

.footer-list a {
  color: var(--text-on-dark-soft);
  font-size: 0.92rem;
  transition: color 140ms ease;
}

.footer-list a:hover { color: var(--secondary-2); }

.footer-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  font-size: 0.82rem;
  color: var(--text-on-dark-mute);
}

.footer-bottom a {
  color: var(--text-on-dark-mute);
}

.footer-bottom-links a + a { margin-left: 1.25rem; }

.footer-bottom-credit {
  /* Separates "Site by Miller Web Studio" from the legal links so it
     reads as its own attribution, not part of the "Terms of Service" link. */
  padding-left: 1rem;
  border-left: 1px solid var(--line-dark);
}

@media (max-width: 720px) {
  .footer-bottom { justify-content: center; text-align: center; }
  .footer-bottom-credit { padding-left: 0; border-left: 0; }
}

/* ---------- VERSA — TYPOGRAPHY REFINEMENT ----------
   Fraunces is a contemporary serif with optical-size variation. Tightens letter-
   spacing on display sizes and reduces it on body to keep things editorial. */
.hero-h1, .page-hero h1, h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variation-settings: 'opsz' 144;
}
.hero-h1 { font-size: clamp(2.6rem, 6.8vw, 5rem); }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -0.018em; }
h3 { font-family: var(--headline); font-weight: 700; letter-spacing: -0.012em; line-height: 1.18; }
h4 { font-family: var(--headline); font-weight: 600; letter-spacing: -0.008em; }

/* The eyebrow + uppercase-style accents stay sans for that editorial-magazine contrast */
.eyebrow, .section-eyebrow {
  font-family: var(--body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.76rem;
}

/* Headline accent — paint the third hero stack in green to echo the leaf */
.hero-h1-stack.accent {
  color: #6f63d8;
  font-style: italic;
  font-variation-settings: 'opsz' 144;
}

/* Brand link underline — green */
.prose a, .footer-list a:hover { color: var(--secondary-2); }

/* ---------- VERSA — SCROLL-REVEAL ----------
   Vanilla CSS used by the IntersectionObserver in _src/partials/footer.html.
   Element is invisible until .is-visible is added. Honors prefers-reduced-motion. */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal-up   { transform: translateY(40px); }
.reveal-left  { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-scale { transform: scale(0.94); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger child reveals when the parent is .reveal */
.reveal > .service-card,
.reveal > .review,
.reveal > .area-card,
.reveal > .gallery-card,
.reveal > .trust-badge,
.reveal > .value-card,
.reveal > .trust-card,
.reveal > .feature-image,
.reveal > .feature-copy,
.reveal > li {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible > * {
  opacity: 1;
  transform: none;
}
.reveal.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal.is-visible > *:nth-child(2) { transition-delay: 0.12s; }
.reveal.is-visible > *:nth-child(3) { transition-delay: 0.19s; }
.reveal.is-visible > *:nth-child(4) { transition-delay: 0.26s; }
.reveal.is-visible > *:nth-child(5) { transition-delay: 0.33s; }
.reveal.is-visible > *:nth-child(6) { transition-delay: 0.40s; }
.reveal.is-visible > *:nth-child(7) { transition-delay: 0.47s; }
.reveal.is-visible > *:nth-child(8) { transition-delay: 0.54s; }
.reveal.is-visible > *:nth-child(9) { transition-delay: 0.61s; }
.reveal.is-visible > *:nth-child(n+10) { transition-delay: 0.68s; }

/* Stagger inside a .services-grid that's already been revealed */
.reveal.is-visible .services-grid > * {
  animation: vp-rise 0.55s ease both;
}
.reveal.is-visible .services-grid > *:nth-child(1) { animation-delay: 0.05s; }
.reveal.is-visible .services-grid > *:nth-child(2) { animation-delay: 0.12s; }
.reveal.is-visible .services-grid > *:nth-child(3) { animation-delay: 0.19s; }
.reveal.is-visible .services-grid > *:nth-child(4) { animation-delay: 0.26s; }
.reveal.is-visible .services-grid > *:nth-child(5) { animation-delay: 0.33s; }
.reveal.is-visible .services-grid > *:nth-child(6) { animation-delay: 0.40s; }
.reveal.is-visible .services-grid > *:nth-child(7) { animation-delay: 0.47s; }
@keyframes vp-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* Reduced motion: skip everything, render visible immediately */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-up, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- VERSA — FEATURE-SPLIT REVERSE ---------- */
.feature-split-reverse {
  direction: rtl;
}
.feature-split-reverse > * {
  direction: ltr;
}
@media (max-width: 800px) {
  .feature-split-reverse { direction: ltr; }
}

/* ---------- VERSA — STICKY MOBILE CTA BAR ----------
   Only shown ≤720px, hidden until scrolled past the hero. JS in footer toggles .visible. */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: none;
  background: linear-gradient(180deg, rgba(26, 18, 68, 0.96), rgba(26, 18, 68, 1));
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.30);
  transform: translateY(110%);
  transition: transform 0.32s ease;
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  /* Right-padding so the AI chat bubble at the bottom-right doesn't overlap the second button */
  padding-right: 76px;
}
.sticky-cta-row .btn {
  width: 100%;
  justify-content: center;
  padding: 0.85rem 0.6rem;
  font-size: 0.95rem;
  border-radius: 10px;
  min-height: 48px;
}
@media (max-width: 720px) {
  /* sticky-cta removed per Luke 2026-05-16 — kept rule shells for safety */
  .sticky-cta { display: none !important; }
}

/* ---------- VERSA — HOME HERO IMAGE-VARIANT REFINEMENT ----------
   When a hero has the `.hero-image` modifier and a real --hero-bg, ensure the
   property photo carries weight on both desktop and mobile. */
.hero.hero-image .hero-copy {
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}
.hero.hero-image .hero-h1 {
  text-shadow: 0 2px 36px rgba(0, 0, 0, 0.45);
}

/* ---------- VERSA — SERVICE CARD ICON-ONLY HERO POLISH ----------
   For services without a real photo (snow-removal, concrete, decks),
   the service-card-icon-bg becomes the visual. Make it feel intentional. */
.service-card-icon-bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, var(--secondary) 0%, var(--ink) 100%);
  color: var(--coral);
}
.service-card-icon-bg svg {
  width: 56%;
  height: 56%;
  max-width: 130px;
  max-height: 130px;
  opacity: 0.92;
}
.service-hero-icon {
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
    linear-gradient(135deg, var(--secondary) 0%, var(--ink) 100%);
  color: var(--coral);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.service-hero-icon svg {
  width: 36%;
  max-width: 220px;
}

/* ---------- VERSA — TRUST-BADGE ICONS ----------
   Unified green icons on transparent background — clean, brand-aligned, anti-AI. */
.trust-badge-icon-shield,
.trust-badge-icon-star,
.trust-badge-icon-home,
.trust-badge-icon-wrench,
.trust-badge-icon-clock { background: transparent; color: var(--coral); }

/* ---------- VERSA — NAV PHONE + DROPDOWN POLISH ---------- */
.nav-phone { color: white; }
.nav-phone:hover { color: rgba(255, 255, 255, 0.7); }
.dropdown-cta.accent { background: var(--secondary); color: white; }
.dropdown-cta.accent:hover { background: var(--secondary-2); }


.footer-bottom a:hover { color: var(--secondary-2); }

.footer-credit a { color: var(--secondary-2); }

/* Selection */
::selection {
  background: var(--coral);
  color: var(--ink);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- SMS CONSENT BLOCK ----------
   A2P 10DLC-compliant consent block matching the MWS pattern. Two checkboxes:
   transactional (account-related) + marketing (promotional). Full disclosure
   text above the boxes. Used on the contact page form and the home-hero
   quick-quote form. */
.sms-consent-block {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.1rem;
  background: rgba(28, 26, 24, 0.04);
  border: 1px solid var(--line-light);
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-mute);
}

.sms-disclosure {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-mute);
  margin: 0 0 0.85rem;
  letter-spacing: 0.005em;
}
.sms-disclosure strong { color: var(--text-soft); font-weight: 600; }
.sms-disclosure a {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sms-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0 0 0.7rem;
  cursor: pointer;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.sms-consent-row:last-child { margin-bottom: 0; }
.sms-consent-row input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  accent-color: var(--secondary);
  cursor: pointer;
}
.sms-consent-row span { flex: 1; }
.sms-consent-row strong { color: var(--text); font-weight: 600; }
.sms-consent-row em {
  display: block;
  margin-top: 0.25rem;
  font-style: normal;
  color: var(--text-mute);
  font-size: 0.66rem;
}

/* Compact variant for the home-hero quick-quote card — slightly smaller text,
   tighter padding so the consent block doesn't dominate the small white card. */
.sms-consent-block-compact {
  padding: 0.7rem 0.85rem;
  margin: 0.4rem 0 0.6rem;
}
.sms-consent-block-compact .sms-disclosure { font-size: 0.66rem; margin-bottom: 0.6rem; }
.sms-consent-block-compact .sms-consent-row { font-size: 0.68rem; gap: 0.5rem; }
.sms-consent-block-compact .sms-consent-row input[type="checkbox"] { width: 14px; height: 14px; }
.sms-consent-block-compact .sms-consent-row em { font-size: 0.62rem; }

/* ---------- FORM SUCCESS STATES ---------- */
.contact-success,
.hero-form-success {
  padding: 2rem 1.5rem;
  background: white;
  border-radius: var(--radius);
  border: 1px solid var(--coral);
  text-align: center;
}
.contact-success h3,
.hero-form-success h3 {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--coral);
  margin: 0 0 0.6rem;
}
.contact-success p,
.hero-form-success p {
  color: var(--text-soft);
  margin: 0 0 1rem;
}
.contact-success .btn {
  margin-top: 0.5rem;
}