/* =========================================================================
   SqueegeeCo — Stylesheet
   Organized: tokens → reset → typography → layout → components → utilities → animations
   ========================================================================= */

/* ---------- 1. Design Tokens ---------- */
:root {
  /* ===================================================================
     SqueegeeCo brand palette — lavender/purple primary (from the brand
     swatch #E8DCFC), deep navy for dark sections, warm cream backgrounds.
     The legacy --blue-* names are KEPT and repointed to the purple ramp so
     every existing var(--blue-600) reference picks up the brand color.
     =================================================================== */
  --blue-50:  #f6f1fe;
  --blue-100: #e8dcfc;   /* kept for fallback only; see --purple-100 */
  --blue-100: #ece1fb;
  --blue-200: #d9c4f6;
  --blue-300: #c2a3ef;
  --blue-400: #a87de6;
  --blue-500: #9460dd;
  --blue-600: #7c45cf;   /* PRIMARY purple */
  --blue-700: #6834b0;
  --blue-800: #532a8c;
  --blue-900: #3f2069;

  /* Explicit purple aliases (same ramp, clearer names) */
  --purple-50:  #f6f1fe;
  --purple-100: #ece1fb;
  --purple-200: #d9c4f6;
  --purple-300: #c2a3ef;
  --purple-400: #a87de6;
  --purple-500: #9460dd;
  --purple-600: #7c45cf;
  --purple-700: #6834b0;
  --purple-800: #532a8c;
  --purple-900: #3f2069;
  --lavender:   #E8DCFC;   /* the brand swatch */

  /* Navy — used for dark bands, footer, testimonials (Pink's-style) */
  --navy-900: #102338;
  --navy-800: #14304d;
  --navy-700: #1c3e63;
  --navy-600: #244e7c;

  /* Warm neutrals (cream) */
  --cream:     #f7f4ef;
  --cream-200: #efe9df;
  --cream-300: #e6ded0;

  /* Greys */
  --white: #ffffff;
  --gray-50:  #f7f4ef;   /* repointed to cream so bg-gray-50 reads warm */
  --gray-100: #efe9df;
  --gray-200: #e5e0d6;
  --gray-300: #d3ccbe;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #2c3a4b;
  --gray-800: #19283a;
  --gray-900: #102338;   /* primary dark text -> navy */
  --black: #000000;

  /* Accent — soft lavender (kept under the legacy --pink-* names) */
  --pink-50:  #f6f1fe;
  --pink-100: #ece1fb;
  --pink-200: #d9c4f6;
  --pink-400: #a87de6;
  --pink-600: #7c45cf;

  /* Status */
  --yellow-400: #facc15;
  --red-600:    #dc2626;
  --cyan-50:    #ecfeff;

  /* Spacing / shape */
  --radius-sm: 0.375rem;
  --radius:    0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 1.875rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 2px 0 rgba(0,0,0,.05);
  --shadow:     0 1px 3px 0 rgba(0,0,0,.10), 0 1px 2px -1px rgba(0,0,0,.10);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.10);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,.10), 0 4px 6px -4px rgba(0,0,0,.10);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,.10), 0 8px 10px -6px rgba(0,0,0,.10);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);

  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Layout */
  --container: 1280px;
  --container-md: 896px;
  --container-sm: 768px;

  --nav-height: 116px;
}

/* ---------- 2. Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gray-900);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p { margin: 0; }
img, video { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ---------- 3. Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-md { max-width: var(--container-md); margin: 0 auto; padding: 0 1.5rem; }
.container-sm { max-width: var(--container-sm); margin: 0 auto; padding: 0 1.5rem; }

.section { padding: 8rem 0; }
.section-sm { padding: 5rem 0; }
.section-lg { padding: 10rem 0; }

/* ---------- 4. Navigation (EDIT #101 — split layout) ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--white);
  /* EDIT #126: soft blue drop shadow always on, so the nav reads as raised
     above the page content. Bumps a touch on .scrolled. */
  box-shadow: 0 4px 14px rgba(124,69,207, .18);
  transition: box-shadow .25s var(--ease-out), background .25s var(--ease-out), backdrop-filter .25s var(--ease-out);
}
.nav.scrolled { box-shadow: 0 6px 18px rgba(124,69,207, .22); }

/* ==========================================================================
   EDIT #121 — Video hero (home page only)
   ========================================================================== */
.hero-video {
  position: relative;
  height: 100vh;
  min-height: 540px;
  overflow: hidden;
  background: #0a1a26;
  isolation: isolate;
}
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0,30,60,.15) 0%, rgba(0,30,60,.20) 50%, rgba(0,30,60,.55) 100%),
    rgba(0,0,0,.25);
}
.hero-video-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 2rem 1.5rem calc(var(--nav-height) + 3rem);   /* bottom padding clears the nav overlay */
}
.hero-video-eyebrow {
  color: white;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.hero-video-logo {
  width: clamp(220px, 38vw, 480px);
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(0,0,0,.35));
  margin-bottom: 2rem;
}
.hero-video-tagline {
  color: rgba(255,255,255,.95);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  letter-spacing: .01em;
  max-width: 38rem;
  margin-bottom: 2.25rem;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.hero-video-cta { box-shadow: 0 12px 30px rgba(124,69,207,.35); }
.hero-video-scroll {
  position: absolute;
  left: 50%;
  bottom: calc(var(--nav-height) + 1rem);
  transform: translateX(-50%);
  z-index: 2;
  color: white;
  opacity: .8;
  animation: hero-video-bounce 2.4s ease-in-out infinite;
}
.hero-video-scroll:hover { opacity: 1; }
@keyframes hero-video-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 10px); }
}

/* ---------- Nav skin when home page video hero is showing ---------- */
/* The nav starts at the BOTTOM of the hero and slides up to dock at the top as you
   scroll (driven by JS in app.js). The translateY here sets that start position on
   first paint so it doesn't flash at the top for a frame before JS runs. JS then
   overwrites the transform inline with the exact, scroll-tracked value. */
body.has-video-hero .nav {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  top: 0;
  transform: translateY(calc(100vh - var(--nav-height)));
}
body.has-video-hero .nav.scrolled {
  background: var(--white);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Mobile drawer: dock the nav to the top so the menu opens down the screen, and
   ease it up smoothly so it doesn't jump. (Only transitions on open; closing
   restores the slid position instantly via JS.) */
body.has-video-hero .nav.is-open {
  transform: translateY(0) !important;
  transition: transform .28s ease;
}

/* Mobile: video hero adjustments */
@media (max-width: 768px) {
  /* Hero is 20% shorter on phones: 80vh instead of full 100vh, floor 480px -> 384px */
  .hero-video { height: 80vh; min-height: 384px; }
  .hero-video-logo { width: clamp(180px, 60vw, 280px); }
  .hero-video-tagline { font-size: 1rem; }
  /* Start position matches the shorter mobile hero. */
  body.has-video-hero .nav { transform: translateY(calc(80vh - var(--nav-height))); }
  /* Pull the first heading up closer to the nav on phones. */
  #services.py-32 { padding-top: 2.5rem; }
}

/* ---- Top stripe: thin blue band with tagline + phone ---- */
.nav-strip {
  background: var(--blue-600);
  color: white;
  border-bottom: 1px solid rgba(255,255,255,.18);
  overflow: hidden;
  transition: max-height .25s cubic-bezier(.4,0,.2,1), padding .25s cubic-bezier(.4,0,.2,1), opacity .2s cubic-bezier(.4,0,.2,1);
}
.nav-strip-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: .35rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;          /* centered — phone removed */
  gap: 1rem;
}
.nav-strip-tagline {
  color: white;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.nav-strip-phone {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: white;
  font-weight: 800;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: opacity .15s;
}
.nav-strip-phone:hover { opacity: .8; }
.nav.scrolled .nav-strip { max-height: 0; padding: 0; opacity: 0; }

/* ---- Main row: links | logo | links + CTA ---- */
.nav-main {
  background: var(--white);
  transition: padding .25s var(--ease-out);
}
.nav-main-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 1rem 1.75rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 112px;
  column-gap: 2rem;
}

/* Logo always centered; on mobile the grid collapses (see below) */
.nav-logo {
  display: inline-flex;
  align-items: center;
  grid-column: 2;
  justify-self: center;
  align-self: center;
}
.nav-logo img {
  height: 84px;
  width: auto;
}
.nav-logo:hover img { transform: scale(1.04); }

/* Side blocks are DIRECT grid children of .nav-main-inner (no wrapper) — so they
   reliably land in columns 1 and 3 on the same row as the logo.
   EDIT #109: justify OUTWARD so left links sit at the left edge and right items
   sit at the right edge — symmetric distance from each page edge. */
.nav-side {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 2.25rem;
  line-height: 1;
}
.nav-side-left  { grid-column: 1; justify-content: flex-start; }   /* was flex-end */
.nav-side-right { grid-column: 3; justify-content: flex-end; }     /* was flex-start */

.nav-link, .nav-dropdown-trigger {
  font-weight: 800;
  font-size: 1.05rem;               /* was .95rem — larger */
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--blue-900);
  line-height: 1;
  transition: color .2s;
}
.nav-link:hover, .nav-link.active,
.nav-dropdown-trigger:hover, .nav-dropdown:hover .nav-dropdown-trigger { color: var(--blue-600); }

/* Dropdown trigger (caret) */
.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.nav-dropdown-trigger svg { width: .85rem; height: .85rem; }

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: .9rem;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(.65rem) scale(.96);
  transform-origin: top left;
  transition: opacity .22s var(--ease-out),
              transform .28s cubic-bezier(.16, 1.2, .3, 1),     /* slight overshoot */
              visibility .22s;
  z-index: 51;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
/* Home page, desktop: while the nav floats over the hero (not yet docked at the
   top), a hover dropdown would open below the fold — so disable it and let the
   trigger act as a plain link to its page. Once the nav docks at the top
   (.scrolled), the dropdown menus work normally. */
@media (min-width: 1025px) {
  body.has-video-hero .nav:not(.scrolled) .nav-dropdown:hover .nav-dropdown-menu,
  body.has-video-hero .nav:not(.scrolled) .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transform: translateY(.65rem) scale(.96);
    pointer-events: none;
  }
  body.has-video-hero .nav:not(.scrolled) .nav-dropdown-trigger { cursor: pointer; }
  body.has-video-hero .nav:not(.scrolled) .nav-dropdown-trigger svg { display: none; }
}
.nav-dropdown-inner {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 30, 60, .12), 0 4px 12px rgba(0, 30, 60, .05);
  padding: .65rem 0;
  overflow: hidden;
}
.nav-dropdown-menu a {
  display: block;
  position: relative;
  padding: .85rem 1.5rem;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  color: var(--gray-700);
  white-space: nowrap;
  text-transform: none;
  transition: background .18s, color .18s, padding-left .18s;
}
.nav-dropdown-menu a:hover {
  background: var(--pink-50);
  color: var(--pink-600);
  padding-left: 1.75rem;
}
.nav-dropdown-menu a strong {
  color: var(--blue-900);
  font-weight: 800;
}

/* Pink "Get a Quote" pill — far right, Pink's-style */
.nav-cta-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.35rem;
  background: var(--pink-600);
  color: white !important;
  border-radius: 999px;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  transition: background .2s, transform .15s;
}
.nav-cta-pill:hover { background: var(--blue-600); transform: translateY(-1px); }
.nav-cta-pill:active { transform: translateY(0); }

/* EDIT #105 — Right-side phone link (icon + number, no button chrome) */
.nav-phone-inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--blue-900);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .02em;
  line-height: 1;
  transition: color .2s;
}
.nav-phone-inline:hover { color: var(--blue-600); }
.nav-phone-inline svg { flex-shrink: 0; }

/* EDIT #105 — Outlined "Client Login" pill, sits between phone and Get-a-Quote */
.nav-client-login {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1.2rem;
  background: transparent;
  color: var(--blue-900);
  border: 1.5px solid var(--gray-300);
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .02em;
  line-height: 1;
  transition: background .2s, border-color .2s, color .2s;
}
.nav-client-login:hover {
  background: var(--blue-50);
  border-color: var(--blue-600);
  color: var(--blue-600);
}

/* Phone-link styles (used only inside the mobile drawer now) */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1.25rem;
  border: 2px solid var(--gray-900);
  border-radius: var(--radius-full);
  color: var(--gray-900);
  font-weight: 700;
  letter-spacing: .04em;
  transition: background .2s, color .2s;
}
.nav-phone:hover { background: var(--gray-900); color: var(--white); }
.nav-phone svg { width: 1rem; height: 1rem; }
.nav-phone-mobile { display: none; }   /* hidden by default; shown in mobile drawer */

/* Mobile menu toggle */
.nav-toggle { display: none; }

/* ---- Mobile ≤1024px: collapse side links into hamburger drawer ---- */
@media (max-width: 1024px) {
  .nav-strip-tagline { display: none; }     /* keep the phone, drop the long tagline */
  .nav-strip-inner { justify-content: center; }

  .nav-main-inner {
    grid-template-columns: 1fr auto 1fr;     /* symmetric — logo column is truly centered */
    column-gap: .75rem;
  }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px; height: 48px;
    color: var(--blue-900);
    grid-column: 3;                       /* EDIT #114 — moved from left (1) to right (3) */
    grid-row: 1;
    justify-self: end;
  }
  .nav-toggle svg { width: 30px; height: 30px; }
  .nav-logo { grid-column: 2; grid-row: 1; justify-self: center; }
  .nav-logo img { height: 62px; }

  /* Side blocks: collapsed by default and animated open as full-width rows below
     the logo row. The logo stays in row 1 (it never moves); only the menu rows
     below it expand, so the menu drops down smoothly instead of popping open. */
  .nav-side-left,
  .nav-side-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    grid-column: 1 / -1;
    width: 100%;
    margin: 0;
    background: var(--white);
    max-height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height .32s ease, opacity .24s ease, padding .32s ease, visibility .32s;
  }
  .nav-side-left  { grid-row: 2; }
  .nav-side-right { grid-row: 3; }
  .nav.is-open .nav-side-left,
  .nav.is-open .nav-side-right {
    max-height: 70vh;
    opacity: 1;
    visibility: visible;
    padding: .5rem 0;
  }
  .nav.is-open .nav-side-left  { border-top: 1px solid var(--gray-200); }
  .nav.is-open .nav-side-right { padding-bottom: 1.5rem; }
  /* EDIT #116: drop shadow below the whole nav when drawer is open — gives a clear edge */
  .nav.is-open { box-shadow: 0 14px 28px rgba(0, 0, 0, .12), 0 4px 10px rgba(0, 0, 0, .06); }

  .nav-link, .nav-dropdown-trigger {
    padding: 1.25rem 0;
    font-size: 1.15rem;
    letter-spacing: .06em;
    width: 100%;
    text-align: center;                /* EDIT #116 — centered (was left) */
  }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    padding-top: 0;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s var(--ease-out);
  }
  .nav-dropdown.is-open .nav-dropdown-menu { max-height: 600px; }
  .nav-dropdown-inner { border: 0; box-shadow: none; padding: 0 0 .5rem 1rem; text-align: center; }
  .nav-dropdown-menu a { text-align: center; padding-left: 0; }
  .nav-dropdown-menu a:hover { padding-left: 0; }    /* no slide on mobile */
  .nav-dropdown-trigger { justify-content: center; }   /* center the trigger + caret as a unit */

  /* Phone-inline in the mobile drawer: larger, centered, no divider line above */
  .nav-phone-inline {
    padding: 1.25rem 0;
    font-size: 1.5rem;
    width: 100%;
    justify-content: center;
    border-top: 0;
    margin-top: 0;
  }
  .nav-phone-inline svg { width: 24px; height: 24px; }
  .nav-client-login {
    margin-top: .75rem;
    align-self: stretch;
    justify-content: center;
    padding: .85rem 1.25rem;
    font-size: .9rem;
  }

  /* Pink CTA pill: full-width and prominent in the mobile drawer */
  .nav-cta-pill {
    margin: .65rem 0 .5rem;
    justify-content: center;
    padding: .9rem 1.25rem;
    font-size: .9rem;
  }
  .nav-phone-mobile {
    display: inline-flex;
    margin-top: .5rem;
    align-self: flex-start;
  }
}

/* ---------- 5. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .875rem 1.75rem;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1.125rem;
  transition: transform .15s, background .2s, color .2s, box-shadow .2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(.97); }

.btn-primary { background: var(--blue-600); color: var(--white); box-shadow: var(--shadow-lg); }
.btn-primary:hover { background: var(--blue-700); }

.btn-secondary { background: var(--white); color: var(--blue-600); box-shadow: var(--shadow-lg); }
.btn-secondary:hover { background: var(--gray-50); }

.btn-dark { background: var(--gray-900); color: var(--white); }
.btn-dark:hover { background: var(--gray-800); }

.btn-outline { border: 2px solid var(--gray-900); color: var(--gray-900); }
.btn-outline:hover { background: var(--gray-900); color: var(--white); }

.btn-outline-blue { border: 2px solid var(--blue-600); color: var(--blue-600); }
.btn-outline-blue:hover { background: var(--blue-50); }

.btn-outline-white { border: 2px solid var(--white); color: var(--white); }
.btn-outline-white:hover { background: var(--white); color: var(--gray-900); }

.btn-ghost-white { background: rgba(255,255,255,.10); color: var(--white); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.20); }
.btn-ghost-white:hover { background: rgba(255,255,255,.20); }

.btn-rounded { border-radius: var(--radius-full); }
.btn-lg { padding: 1rem 2rem; font-size: 1.125rem; }
.btn-xl { padding: 1.25rem 2.5rem; font-size: 1.25rem; }

/* ---------- 6. Typography ---------- */
.heading-display { font-family: "Anton", Impact, sans-serif; font-size: clamp(2.75rem, 7.5vw, 6.5rem);  font-weight: 400; line-height: .98; letter-spacing: .005em; text-transform: uppercase; }
.heading-xl      { font-family: "Anton", Impact, sans-serif; font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 400; line-height: 1.02;  letter-spacing: .005em; text-transform: uppercase; }
.heading-lg      { font-family: "Anton", Impact, sans-serif; font-size: clamp(2.15rem, 5vw, 3.9rem);  font-weight: 400; line-height: 1.05; letter-spacing: .01em; text-transform: uppercase; }
.heading-md      { font-family: "Anton", Impact, sans-serif; font-size: clamp(1.75rem, 3.5vw, 3rem); font-weight: 400; line-height: 1.1; letter-spacing: .01em; text-transform: uppercase; }
.heading-sm      { font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 800; line-height: 1.25; }
.heading-xs      { font-size: 1.5rem; font-weight: 800; line-height: 1.3; }

.text-2xl        { font-size: 1.5rem; line-height: 1.5; }
.text-xl         { font-size: 1.25rem; line-height: 1.6; }
.text-lg         { font-size: 1.125rem; line-height: 1.6; }
.text-base       { font-size: 1rem; line-height: 1.6; }
.text-sm         { font-size: .875rem; line-height: 1.5; }

.eyebrow {
  display: inline-block;
  color: var(--blue-600);
  font-weight: 700;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .12em;
}

/* ---------- 7. Card / surface components ---------- */
.card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
  transition: box-shadow .3s, transform .3s;
}
.card:hover { box-shadow: var(--shadow-xl); transform: translateY(-2px); }

.card-gray { background: var(--gray-50); border-radius: var(--radius-2xl); padding: 2rem; }

.benefit-card {
  background: var(--gray-50);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out);
}
/* EDIT #30: lift + scale + soften shadow on hover. No background color change. */
.benefit-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-2xl);
}
/* (Color-swap rules intentionally removed.) */

/* EDIT #29: icon-wrap is now a transparent container so the illustrated SVG scene fills it */
.benefit-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  border-radius: var(--radius-2xl);
  background: transparent;
  flex-shrink: 0;
}
.benefit-icon-wrap svg { width: 88px; height: 88px; }
.benefit-icon-wrap.legacy {        /* keep the old solid-blue circle available if needed elsewhere */
  background: var(--blue-600);
  border-radius: var(--radius-full);
  width: 64px; height: 64px;
}
.benefit-icon-wrap.legacy svg { width: 32px; height: 32px; color: var(--white); }

/* Service tile (image with caption overlay) */
.service-tile {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  height: 24rem;
  width: 20rem;
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: border-color .3s;
  cursor: pointer;
  display: block;
  color: inherit;
}
.service-tile:hover { border-color: var(--blue-600); }
.service-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s;
}
.service-tile:hover img { transform: scale(1.10); }
.service-tile-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,.70) 0%, rgba(0,0,0,.30) 50%, transparent 100%);
  color: var(--white);
}
.service-tile-caption h3 { font-size: 1.875rem; font-weight: 800; margin-bottom: .75rem; }
.service-tile-caption p  { font-size: 1.125rem; font-weight: 600; color: var(--gray-200); }

/* List with checks */
.check-list { display: grid; gap: 1rem; }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--gray-700);
}
.check-list li::before {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 24px; height: 24px;
  margin-top: 2px;
  background: var(--blue-600);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center / contain no-repeat;
}

/* ---------- 8. Hero sections ---------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* EDIT #87: With border-box, this padding keeps the (centered) content inside
     the area below the nav so the toggle + H1 don't sit pressed up against
     (or behind) the sticky nav on shorter laptop viewports. */
  padding-top: calc(var(--nav-height) + 2rem);
  padding-bottom: 2rem;
}
.hero-bg, .hero-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,.70), rgba(0,0,0,.50), transparent);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
  color: var(--white);
}
.hero-content .heading-display { color: var(--white); margin-bottom: 2rem; }
.hero-content > p { font-size: 1.5rem; color: var(--gray-200); margin-bottom: 3rem; max-width: 36rem; }

.hero-sub { /* used by service detail pages — sticky background hero */
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
}
.hero-sub .hero-content { max-width: 48rem; }
.hero-sub .heading-xl { color: var(--white); margin-bottom: 1.5rem; }
.hero-sub .hero-content > p { margin-bottom: 2rem; }

.hero-sub.sticky-bg { position: sticky; top: var(--nav-height); }

/* Page header (slim) */
.page-header {
  padding-top: calc(var(--nav-height) + 2.5rem);
  padding-bottom: 2.5rem;
  text-align: center;
}
.page-header h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; }
.page-header p  { font-size: 1.5rem; color: var(--gray-600); font-weight: 600; }

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.scroll-indicator-mouse {
  width: 24px; height: 40px;
  border: 2px solid rgba(255,255,255,.50);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: .5rem;
  animation: scroll-bob 1.5s ease-in-out infinite;
}
.scroll-indicator-mouse::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--white);
  border-radius: 50%;
  animation: scroll-dot 1.5s ease-in-out infinite;
}
@keyframes scroll-bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(8px) } }
@keyframes scroll-dot { 0%,100% { opacity: 0 } 50% { opacity: 1 } }

/* Hero tab pill toggle */
.hero-tabs {
  display: inline-flex;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(4px);
  border: 2px solid rgba(255,255,255,.30);
  border-radius: var(--radius-full);
  padding: 6px;
  margin-bottom: 2rem;
}
.hero-tabs button {
  padding: .75rem 2rem;
  border-radius: var(--radius-full);
  font-weight: 600;
  color: var(--white);
  transition: background .2s, color .2s;
}
.hero-tabs button.active { background: var(--gray-900); color: var(--white); }
.hero-tabs button:not(.active):hover { background: rgba(255,255,255,.10); }

/* ---------- 9. Footer ---------- */
.footer {
  position: relative;
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  padding: 3rem 0;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
.footer-row {
  /* EDIT #25: 3-column grid keeps social icons centered regardless of logo/button widths */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
}
.footer-row > .footer-logo  { justify-self: start; }
.footer-row > .footer-social { justify-self: center; }
.footer-row > .footer-cta    { justify-self: end; }
.footer-logo img { height: 96px; transition: transform .2s; }
.footer-logo:hover img { transform: scale(1.05); }

.footer-social { display: flex; gap: 2rem; align-items: center; }
.footer-social a { color: var(--gray-900); transition: color .2s, transform .2s; }
.footer-social a:hover { transform: scale(1.15); }
.footer-social a.ig:hover { color: var(--pink-600); }
.footer-social a.gg:hover { color: var(--blue-600); }
.footer-social a.yt:hover { color: var(--red-600); }
.footer-social svg { width: 40px; height: 40px; }

.footer-copy {
  /* EDIT #38: copyright row is now a flex row with "Site by upengine" on the right */
  /* EDIT #45: scaled up a little */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-200);
  color: var(--gray-600);
  font-size: 1rem;        /* was .875rem */
  flex-wrap: wrap;
}
.footer-copy-line { margin: 0; }
.footer-copy a:hover { color: var(--blue-600); }

.footer-site-by {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  color: var(--gray-600);
  font-size: .9375rem;    /* was .8125rem */
  font-weight: 600;
  text-decoration: none;
  transition: color .2s, opacity .2s;
  opacity: .9;
}
.footer-site-by:hover { color: var(--gray-900); opacity: 1; }
.footer-site-by svg {
  height: 24px;           /* was 18px */
  width: auto;
  display: block;
}
/* The SVG paths have no fill set — render them in the link's currentColor */
.footer-site-by svg rect,
.footer-site-by svg polygon,
.footer-site-by svg path { fill: currentColor; }

@media (max-width: 600px) {
  .footer-copy { justify-content: center; text-align: center; flex-direction: column-reverse; gap: .75rem; }
}

@media (max-width: 768px) {
  /* On mobile collapse to a centered column */
  .footer-row { grid-template-columns: 1fr; text-align: center; }
  .footer-row > .footer-logo,
  .footer-row > .footer-social,
  .footer-row > .footer-cta { justify-self: center; }
}

/* ---------- 10. Scroll-revealed animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

.reveal-left  { transform: translateX(-30px); }
.reveal-right { transform: translateX(30px); }
.reveal-scale { transform: scale(.9); }
.reveal-left.in-view, .reveal-right.in-view, .reveal-scale.in-view { transform: translate(0, 0) scale(1); }

/* staggered children — incremental delay on data-stagger attribute */
.reveal[data-delay="1"]  { transition-delay: .05s; }
.reveal[data-delay="2"]  { transition-delay: .1s;  }
.reveal[data-delay="3"]  { transition-delay: .15s; }
.reveal[data-delay="4"]  { transition-delay: .2s;  }
.reveal[data-delay="5"]  { transition-delay: .25s; }
.reveal[data-delay="6"]  { transition-delay: .3s;  }
.reveal[data-delay="7"]  { transition-delay: .35s; }
.reveal[data-delay="8"]  { transition-delay: .4s;  }

/* ---------- 11. Sections used repeatedly ---------- */

/* CTA dark section */
.cta-dark { background: var(--gray-900); color: var(--white); padding: 8rem 0; text-align: center; position: relative; overflow: hidden; }
.cta-dark::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-900));
  opacity: .10;
}
.cta-dark > * { position: relative; }
.cta-dark h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 2rem; }
.cta-dark p  { font-size: 1.5rem; color: var(--gray-300); max-width: 42rem; margin: 0 auto 3rem; font-weight: 600; }

.cta-blue { background: var(--blue-600); color: var(--white); padding: 8rem 0; text-align: center; }
.cta-blue h2 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 800; margin-bottom: 1.5rem; }
.cta-blue p { font-size: 1.5rem; color: var(--blue-100); font-weight: 600; margin-bottom: 3rem; }

.cta-image-bg {
  position: relative;
  padding: 8rem 0;
  overflow: hidden;
}
.cta-image-bg .cta-bg {
  position: absolute; inset: 0;
}
.cta-image-bg .cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-image-bg .cta-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.cta-image-bg .container { position: relative; max-width: 56rem; text-align: center; }
.cta-image-bg h2 {
  color: var(--white);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 800;
  margin-bottom: 1.25rem;
  line-height: 1.1;
}
/* EDIT #63: pink decorative bar between heading and subhead */
.cta-image-bg h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 1.25rem auto 0;
  background: linear-gradient(90deg, var(--pink-400) 0%, var(--pink-200) 100%);
  border-radius: 2px;
}
.cta-image-bg p  { color: var(--blue-100); font-size: 1.5rem; margin-bottom: 3rem; font-weight: 600; }
.cta-image-bg .btn-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* EDIT #63: pink phone icon inside the secondary (white) CTA button */
.cta-image-bg .btn-secondary > span:first-child { color: var(--pink-400); }

/* Two-up split section */
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width: 768px) { .split-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* ---------- 12. Service-detail page common patterns ---------- */
/* EDIT #27: removed `position: sticky` — the pinned hero was bleeding into the bottom CTA on
   service-detail pages (especially on mobile). Now scrolls away like every other section. */
.service-hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  overflow: hidden;
}
.service-hero img,
.service-hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.40); }
.service-hero .container {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  z-index: 2;
}
.service-hero .heading-xl { color: var(--white); margin-bottom: 1.5rem; max-width: 48rem; }
.service-hero p { color: rgba(255,255,255,.92); font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; max-width: 36rem; }

.service-section-white { background: var(--white); padding: 8rem 0; position: relative; z-index: 2; }
.service-section-gray  { background: var(--gray-50); padding: 8rem 0; position: relative; z-index: 2; }

.surface-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 1024px) { .surface-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .surface-grid { grid-template-columns: 1fr; } }
.surface-pill {
  display: flex; align-items: center; gap: .75rem;
  padding: 1.25rem 1.5rem;
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  font-weight: 600;
  color: var(--gray-800);
  transition: background .2s;
}
.surface-pill:hover { background: var(--blue-50); }
.surface-pill::before {
  content: "";
  flex-shrink: 0;
  width: 8px; height: 8px;
  background: var(--blue-600);
  border-radius: 50%;
}

/* Benefit row (3 cards) */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.benefit-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .benefit-grid, .benefit-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .benefit-grid, .benefit-grid.cols-4 { grid-template-columns: 1fr; } }

/* ---------- 13. FAQ accordion ---------- */
.faq-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: 1rem;
}
.faq-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem;
  text-align: left;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gray-900);
  transition: background .15s;
}
.faq-toggle:hover { background: var(--gray-50); }
.faq-toggle svg { width: 24px; height: 24px; color: var(--blue-600); transition: transform .3s; flex-shrink: 0; }
.faq-item.open .faq-toggle svg { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease-out);
}
.faq-item.open .faq-answer { max-height: 600px; }
.faq-answer-inner { padding: 0 1.5rem 1.5rem; }
.faq-answer-inner p { color: var(--gray-700); font-size: 1.125rem; line-height: 1.6; white-space: pre-line; }

/* ---------- 14. Stats cards (used on Why Choose Us / Orlando) ---------- */
.stat-card {
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  text-align: center;
  transition: background .4s;
}
.stat-card:hover { background: rgba(255,255,255,.20); }
.stat-number { font-size: clamp(3rem, 6vw, 6rem); font-weight: 800; color: var(--white); margin-bottom: 1rem; line-height: 1; }
.stat-label  { font-size: 1.5rem; font-weight: 700; color: var(--white); margin-bottom: .75rem; }
.stat-desc   { font-size: 1.125rem; color: var(--blue-100); }

/* ---------- 15. Reviews / testimonial cards ---------- */
.review-card {
  background: var(--gray-50);
  border-radius: var(--radius-2xl);
  padding: 2rem;
}
.review-stars { display: flex; gap: .25rem; margin-bottom: 1rem; }
.review-stars svg { width: 20px; height: 20px; color: var(--yellow-400); }
.review-card.accent .review-stars svg { color: var(--pink-400); }
.review-text { font-size: 1.125rem; color: var(--gray-700); margin-bottom: 1.5rem; font-style: italic; font-weight: 500; }
.review-attr { padding-top: 1rem; border-top: 1px solid var(--gray-200); }
.review-name { font-weight: 700; }
.review-loc  { color: var(--gray-600); font-weight: 600; }

/* ---------- 16. Process / steps ---------- */
.process-step { padding: 0; }
.process-step .step-number { font-size: 6rem; font-weight: 800; color: var(--blue-600); opacity: .20; line-height: 1; margin-bottom: 1.5rem; }
.process-step h3 { font-size: 1.875rem; font-weight: 800; margin-bottom: 1rem; }
.process-step p  { font-size: 1.25rem; color: var(--gray-600); font-weight: 600; }

/* ---------- 17. Stacking cards (Home) ---------- */
.stacking-cards { position: relative; }
.stacking-card {
  position: sticky;
  margin-bottom: 2rem;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.stacking-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}
.stacking-card-text { padding: 4rem; }
.stacking-card-text h3 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; line-height: 1.15; margin-bottom: 1.5rem; }
.stacking-card-text p  { font-size: 1.25rem; font-weight: 600; margin-bottom: 2rem; color: var(--gray-600); }
.stacking-card-text .learn { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.125rem; font-weight: 700; color: var(--blue-600); transition: gap .2s; }
.stacking-card-text .learn:hover { gap: .75rem; }
.stacking-card-image { position: relative; height: 500px; }
.stacking-card-image img { width: 100%; height: 100%; object-fit: cover; }

.stacking-card.invert { background: var(--blue-600); }
.stacking-card.invert .stacking-card-text h3 { color: var(--white); }
.stacking-card.invert .stacking-card-text p  { color: var(--blue-100); }
.stacking-card.invert .stacking-card-text .learn { color: var(--white); }
.stacking-card.invert .stacking-card-inner > .stacking-card-image { order: -1; }

@media (max-width: 768px) {
  .stacking-card-inner { grid-template-columns: 1fr; }
  .stacking-card-text { padding: 2rem; }
  .stacking-card-image { height: 280px; }
  .stacking-card.invert .stacking-card-inner > .stacking-card-image { order: 0; }
}

/* ---------- 18. Parallax gallery ---------- */
.parallax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.parallax-col { display: flex; flex-direction: column; gap: 1.5rem; will-change: transform; }
.parallax-col img {
  width: 100%;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  transition: transform .5s;
}
.parallax-col img:hover { transform: scale(1.05); }
.parallax-col.col-left img  { height: 20rem; }
.parallax-col.col-center img { height: 24rem; }
.parallax-col.col-right img  { height: 20rem; }
@media (max-width: 768px) {
  .parallax-grid { grid-template-columns: 1fr; }
  .parallax-col img { height: 18rem !important; }
}

/* ---------- 19. Promise (Clean / Protect / Restore / Shine) ---------- */
.promise-section { background: var(--blue-600); }
.promise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 100vh;
}
.promise-grid .promise-text { padding: 6rem 3rem 6rem 6rem; max-width: 38rem; }
.promise-grid .promise-text h2 {
  font-size: clamp(3rem, 8vw, 7rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1.5rem;
}
.promise-grid .promise-text h2 span { display: block; }
.promise-grid .promise-text h2 .light { color: rgba(255,255,255,.40); }
.promise-grid .promise-text h2 .solid { color: var(--white); }
.promise-grid .promise-text > p { color: var(--white); font-size: 1.25rem; font-weight: 600; margin-bottom: 2rem; }
.promise-grid .promise-text .note { color: rgba(255,255,255,.70); font-size: .875rem; margin-top: 1.5rem; max-width: 28rem; }
.promise-image { position: relative; height: 100%; min-height: 100vh; overflow: hidden; }
.promise-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
  .promise-grid { grid-template-columns: 1fr; min-height: 0; }
  .promise-grid .promise-text { padding: 4rem 1.5rem; }
  .promise-image { min-height: 60vh; }
}

/* ---------- 20. Horizontal scrolling services row ---------- */
.services-scroll {
  overflow-x: auto;
  padding-bottom: 2rem;
  padding-left: 1.5rem;
  scroll-behavior: smooth;
}
.services-scroll-inner {
  display: flex;
  gap: 1.5rem;
  padding-right: 1.5rem;
}

/* ---------- 21. Map / service areas ---------- */
.map-wrap {
  position: relative;
  height: 600px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  /* EDIT #43: blue border around the map */
  border: 4px solid var(--blue-600);
}
.map-wrap.map-wrap-short { height: 360px; }   /* EDIT #116 — shorter for /service-areas */
@media (max-width: 768px) {
  .map-wrap { height: 380px; }
  .map-wrap.map-wrap-short { height: 240px; }
}
.map-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.map-wrap.zoom img { transform: scale(1.5); transform-origin: center; }

/* EDIT #44 / #60: region cards — light gray background, dark text.
   Card itself does NOT change background on hover; only the city links inside
   turn blue when individually hovered. The card gets a subtle lift + shadow. */
.region-card {
  background: var(--gray-50);
  color: var(--gray-900);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: 2rem;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.region-card:hover {
  border-color: var(--blue-200);
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}
.region-card h3 {
  font-size: 1.875rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--gray-900);
}
.region-card ul {
  display: grid;
  gap: .75rem;
  font-size: 1.125rem;
}
.region-card li {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: var(--gray-900);
}
.region-card li::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--blue-600);
  border-radius: 50%;
  flex-shrink: 0;
}
.region-card li a {
  color: var(--gray-900);
  text-decoration: none;
  font-weight: 600;
  transition: color .15s;
}
.region-card li a:hover {
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

/* ---------- 22. About page mid section ---------- */
.about-img-tile {
  border-radius: var(--radius-2xl);
  overflow: hidden;
}
.about-img-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.about-img-tile:hover img { transform: scale(1.05); }

.check-pill {
  display: flex; align-items: center; gap: .75rem;
  font-size: 1.125rem; font-weight: 600;
}
.check-pill .check-dot {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ---------- 23. Layout utilities (a small Tailwind-ish subset) ---------- */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.hidden { display: none; }

.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; } .gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; } .gap-16 { gap: 4rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.mt-0 { margin-top: 0; } .mt-2 { margin-top: .5rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-12 { margin-top: 3rem; } .mt-16 { margin-top: 4rem; } .mt-20 { margin-top: 5rem; }
.mb-2 { margin-bottom: .5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-12 { margin-bottom: 3rem; } .mb-16 { margin-bottom: 4rem; } .mb-20 { margin-bottom: 5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

.p-0 { padding: 0; }
.p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .p-12 { padding: 3rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }   /* EDIT #65: was missing — every section using py-24 had zero padding */
.py-32 { padding-top: 8rem; padding-bottom: 8rem; }
.pt-32 { padding-top: 8rem; }
.pt-nav { padding-top: var(--nav-height); }

.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-7xl { max-width: 80rem; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-50 { z-index: 50; }

.bg-white { background: var(--white); }
.bg-gray-50 { background: var(--gray-50); }
.bg-gray-100 { background: var(--gray-100); }
.bg-gray-900 { background: var(--gray-900); }
.bg-blue-600 { background: var(--blue-600); }
.bg-cyan-50 { background: var(--cyan-50); }

.text-white { color: var(--white); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-900 { color: var(--gray-900); }
.text-blue-100 { color: var(--blue-100); }
.text-blue-600 { color: var(--blue-600); }
.text-pink-200 { color: var(--pink-200); }
.text-pink-600 { color: var(--pink-600); }

.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.tracking-tight { letter-spacing: -.025em; }
.tracking-wider { letter-spacing: .12em; }
.leading-tight { line-height: 1.15; }
.leading-relaxed { line-height: 1.7; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-line { white-space: pre-line; }

.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }
.overflow-hidden { overflow: hidden; }

.object-cover { object-fit: cover; }
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

.border { border: 1px solid var(--gray-200); }
.border-t { border-top: 1px solid var(--gray-200); }
.border-b { border-bottom: 1px solid var(--gray-200); }

.transition { transition: all .2s var(--ease-out); }

/* Spinner for Gallery loading */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--gray-900);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 2s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   EDIT BATCH — 14 changes (May 2026)
   ========================================================================== */

/* EDIT #1, #4, #17, #51, #58: Hero on mobile.
   - 5% shorter (was 88vh → now 83vh)
   - Extra top padding so the Residential/Commercial toggle clears the un-scrolled
     nav (which on mobile is taller than --nav-height because the tagline row is
     still visible). #58 bumped the buffer from +3rem to +7rem after the toggle
     was still appearing too close to the nav. */
@media (max-width: 768px) {
  .hero {
    height: auto;
    min-height: 83vh;
    padding-top: calc(var(--nav-height) + 7rem);
    padding-bottom: 2.5rem;
  }
  .hero-bg { top: var(--nav-height); }
  .hero-bg img { object-position: center 30%; }
  .hero-overlay {
    background: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.75) 100%);
    top: var(--nav-height);
  }
  .hero-content {
    padding-top: 0;
    padding-bottom: 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  /* EDIT #51: toggle gets explicit top space and a clear visual buffer below the nav */
  .hero-tabs { margin: 0 0 1.25rem; }
  /* EDIT #17: H1 layouts swap */
  .hero-h1-desktop { display: none; }
  .hero-h1-mobile  { display: block; }
  .hero-h1 { margin-top: 2.25rem; }   /* trimmed from 4.5rem — toggle no longer needs to push down via the H1 */
  .hero-h1-mobile > span {
    display: block;
    font-size: clamp(2.75rem, 11vw, 3.75rem);
    line-height: 1;
    letter-spacing: -.02em;
    margin-bottom: .15em;
  }
  /* EDIT #17: less subtext on mobile */
  .hero-subtext {
    font-size: 1rem;
    margin: 1rem auto 1.75rem;
    max-width: 22rem;
    color: rgba(255,255,255,.92);
  }
  .hero-cta-row { justify-content: center; }
  .scroll-indicator { display: none; }
}
@media (min-width: 769px) {
  .hero-h1-mobile { display: none; }
  .hero-h1-desktop { display: inline; }
}

/* EDIT #1: also center page-header text on mobile (it was already text-center, but keep consistent) */
@media (max-width: 768px) {
  .page-header { padding-top: calc(var(--nav-height) + 1.5rem); padding-bottom: 1.5rem; }
  .page-header h1 { font-size: clamp(2.25rem, 8vw, 3rem); }
  .page-header p  { font-size: 1.125rem; }
}

/* EDIT #2: Stacking cards — stop sticky behavior on mobile (cards now just stack normally) */
@media (max-width: 768px) {
  .stacking-card {
    position: relative !important;
    top: auto !important;
    margin-bottom: 1.25rem;
  }
}

/* EDIT #3: Services horizontal scroller — make scrolling obvious
   - Visible arrow buttons on the sides (desktop & mobile)
   - Edge fade so cards appear to come from off-screen
   - Hint label under the section title
*/
.services-scroll-wrap {
  position: relative;
}
.services-scroll-wrap::before,
.services-scroll-wrap::after {
  content: '';
  position: absolute;
  top: 0; bottom: 2rem;     /* leave room above the scrollbar-hidden area */
  width: 60px;
  pointer-events: none;
  z-index: 2;
}
.services-scroll-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--white), rgba(255,255,255,0));
}
.services-scroll-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--white), rgba(255,255,255,0));
}
.services-scroll-btn {
  position: absolute;
  top: calc(50% - 1rem);
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue-600);
  border: 2px solid var(--blue-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  z-index: 5;
  transition: background .2s, color .2s, transform .15s;
}
.services-scroll-btn:hover { background: var(--blue-600); color: var(--white); transform: translateY(-50%) scale(1.08); }
.services-scroll-btn.prev { left: 1rem; }
.services-scroll-btn.next { right: 1rem; }
.services-scroll-hint {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--blue-600);
  letter-spacing: .02em;
}
.services-scroll-hint svg {
  animation: hint-nudge 1.4s ease-in-out infinite;
}
@keyframes hint-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (max-width: 640px) {
  .services-scroll-btn { width: 40px; height: 40px; }
  .services-scroll-btn.prev { left: .5rem; }
  .services-scroll-btn.next { right: .5rem; }
}

/* EDIT #9: Interactive tabbed showcase ("Everything your property needs to shine") */
.showcase {
  background: var(--white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.showcase-tabs {
  display: flex;
  gap: .25rem;
  padding: .5rem;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.showcase-tab {
  flex: 1;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-lg);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--gray-700);
  transition: background .2s, color .2s;
  cursor: pointer;
}
.showcase-tab:hover { color: var(--blue-600); }
.showcase-tab.active {
  background: var(--white);
  color: var(--blue-600);
  box-shadow: var(--shadow);
}
.showcase-panel {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 480px;
}
.showcase-image {
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
}
.showcase-image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.showcase-image img.is-active { opacity: 1; }
.showcase-body {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--white);
  position: relative;
}
.showcase-body-pane {
  display: none;
  animation: fade-up .4s var(--ease-out);
}
.showcase-body-pane.is-active { display: block; }
.showcase-body h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--gray-900);
}
.showcase-body p {
  font-size: 1.125rem;
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.showcase-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.showcase-chips a {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .625rem 1rem;
  border-radius: var(--radius-full);
  background: var(--blue-50);
  color: var(--blue-700);
  font-size: .9375rem;
  font-weight: 600;
  transition: background .2s, color .2s, transform .15s;
}
.showcase-chips a:hover {
  background: var(--blue-600);
  color: var(--white);
  transform: translateY(-2px);
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
  .showcase-tabs { flex-wrap: wrap; }
  .showcase-tab { flex: 1 1 33%; padding: .75rem .5rem; font-size: .9375rem; }
  .showcase-panel { grid-template-columns: 1fr; min-height: 0; }
  .showcase-image { height: 260px; position: relative; }
  .showcase-body { padding: 2rem 1.5rem; }
}

/* EDIT #11: Parallax gallery — shorter heights + mobile only shows 6 images total */
.parallax-col.col-left img  { height: 16rem; }
.parallax-col.col-center img { height: 20rem; }
.parallax-col.col-right img  { height: 16rem; }
@media (max-width: 768px) {
  .parallax-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .parallax-col img { height: 12rem !important; }
  /* Show only the first 2 items in left + center, and first 2 in right (6 total) */
  .parallax-col .parallax-item:nth-child(n+3) { display: none; }
  /* Hide the entire right column on phones — left + center already give 4 images */
  .parallax-col.col-right { display: none; }
}
@media (max-width: 380px) {
  .parallax-grid { grid-template-columns: 1fr; }
}

/* EDIT #12: Clean / Protect / Restore / Shine — interactive selector */
.promise-section { position: relative; overflow: hidden; }
.promise-grid .promise-text h2 {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  line-height: 1;
}
.promise-word {
  display: block;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 1;
  padding: .1em 0;
  color: rgba(255,255,255,.35);
  cursor: pointer;
  transition: color .25s var(--ease-out), transform .25s var(--ease-out), letter-spacing .25s var(--ease-out);
  position: relative;
}
.promise-word:hover { color: rgba(255,255,255,.6); }
.promise-word.is-active {
  color: var(--white);
  letter-spacing: -.005em;
}
.promise-word.is-active::before {
  content: "";
  position: absolute;
  left: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 60%;
  background: var(--white);
  border-radius: 4px;
}
.promise-blurb {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--white);
  margin: 1.5rem 0 2rem;
  max-width: 32rem;
  min-height: 4em; /* keeps layout steady when blurb text length varies */
  transition: opacity .25s var(--ease-out);
}
.promise-image {
  position: relative;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
}
.promise-image img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .5s var(--ease-out), transform .8s var(--ease-out);
}
.promise-image img.is-active {
  opacity: 1;
  transform: scale(1);
}
@media (max-width: 768px) {
  .promise-image { min-height: 50vh; }
  .promise-blurb { min-height: 0; }
  .promise-word::before { left: -.75rem !important; }
}

/* EDIT #13: Testimonials — on-brand restyle (blue band, white cards w/ quote glyph) */
.reviews-section {
  background: linear-gradient(180deg, var(--blue-700) 0%, var(--blue-600) 100%);
  padding: 8rem 0;
  position: relative;
  overflow: hidden;
}
.reviews-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.10) 0%, transparent 35%),
    radial-gradient(circle at 88% 85%, rgba(255,255,255,.08) 0%, transparent 40%);
  pointer-events: none;
}
.reviews-section .container { position: relative; }
.testimonial {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-2xl);
  padding: 2.25rem 2rem 2rem;
  box-shadow: var(--shadow-xl);
  transition: transform .3s, box-shadow .3s;
  margin: 0;
}
.testimonial:hover { transform: translateY(-4px); box-shadow: var(--shadow-2xl); }
.testimonial-quote {
  position: absolute;
  top: -16px;
  left: 1.5rem;
  width: 48px; height: 48px;
  padding: 8px;
  background: var(--blue-600);
  color: var(--white);
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
}
.testimonial-stars {
  display: flex;
  gap: .25rem;
  color: var(--blue-600);
  margin-bottom: 1rem;
}
.testimonial-stars svg { color: var(--blue-600); }
.testimonial-text {
  font-size: 1.0625rem;
  color: var(--gray-700);
  line-height: 1.65;
  margin: 0 0 1.5rem;
  font-weight: 500;
}
.testimonial-attr {
  padding-top: 1rem;
  border-top: 1px solid var(--gray-200);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  row-gap: .1rem;
  column-gap: .85rem;
  align-items: center;
}
.testimonial-name {
  grid-column: 1; grid-row: 1;
  font-weight: 700; color: var(--gray-900); font-size: 1rem;
}
.testimonial-loc  {
  grid-column: 1; grid-row: 2;
  color: var(--gray-500); font-size: .8rem; font-weight: 500;
  line-height: 1.3;
}

/* EDIT #1: extra mobile centering for showcase + reviews */
@media (max-width: 768px) {
  .reviews-section { padding: 5rem 0; }
  .testimonial { padding: 1.75rem 1.5rem 1.5rem; }
  .testimonial-text { font-size: 1rem; line-height: 1.55; margin-bottom: 1.25rem; }
  .testimonial-quote { width: 40px; height: 40px; top: -12px; }
}

/* EDIT #113: Ensure all section headings clear the fixed nav when scrolled to via anchor. */
h1, h2, h3 { scroll-margin-top: 120px; }

/* EDIT #7: Gallery loader — small fading dot ring, no persistent bar (the wrapper itself is hidden once timer fires) */
.gallery-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin: 0 auto 2rem;
  padding: 1rem 1.5rem;
  background: transparent;
  color: var(--gray-500);
  font-size: .9375rem;
  font-weight: 500;
  opacity: 1;
  transition: opacity .6s var(--ease-out), max-height .6s var(--ease-out), margin .6s var(--ease-out), padding .6s var(--ease-out);
  max-height: 80px;
  overflow: hidden;
}
.gallery-loader.is-hidden {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding: 0;
  pointer-events: none;
}
.gallery-loader .spinner {
  width: 18px; height: 18px;
  border-width: 2px;
  border-color: var(--blue-300);
  border-top-color: var(--blue-600);
}

/* ==========================================================================
   EDIT BATCH 2 — service-card grid, contact form, pink accents (May 2026)
   ========================================================================== */

/* EDIT #18: Service-card grid (replaces horizontal scroller) */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width:  720px) { .services-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }

.service-card {
  /* EDIT #57: image is now always visible at the top of the card.
     - aspect-ratio removed (was forcing empty space when description was short)
     - card sizes to its content
     - image sits as a top strip, content below
     - hover: subtle lift + image zoom inside its frame, no content color flip */
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--white);
  color: var(--gray-900);
  text-decoration: none;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
  box-shadow: var(--shadow-sm);
  isolation: isolate;
}
.service-card:hover,
.service-card.is-tapped {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--blue-200);
}

.service-card-image {
  /* EDIT #57: image always visible at top, ~12rem tall, content sits below */
  position: relative;
  width: 100%;
  height: 11rem;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex-shrink: 0;
  transition: transform .5s var(--ease-out);
}
.service-card-image::after {
  /* subtle gradient at the bottom of the image so the card edge feels intentional */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.10) 100%);
}
.service-card:hover .service-card-image,
.service-card.is-tapped .service-card-image {
  transform: scale(1.05);
}

.service-card-content {
  position: relative;
  z-index: 1;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.service-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--blue-50);
  color: var(--blue-600);
  flex-shrink: 0;
  transition: background .35s var(--ease-out), color .35s var(--ease-out);
}
.service-card:hover .service-card-icon,
.service-card.is-tapped .service-card-icon {
  background: var(--blue-600);
  color: var(--white);
}

.service-card-title {
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  color: var(--gray-900);
}
.service-card-desc {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--gray-600);
  margin: 0 0 .25rem;
}
.service-card-arrow {
  display: none;   /* legacy; replaced by .service-card-link */
}

/* Compact card text on phones */
@media (max-width: 720px) {
  /* EDIT #48: drop fixed aspect-ratio so the card grows to fit its content (icon + title + desc + "Click here for more" link).
     Was 4/5; that was clipping the link off the bottom on mobile. */
  .service-card        { aspect-ratio: auto; }
  .service-card-content { padding: 1.25rem; }
  .service-card-icon    { width: 44px; height: 44px; }
  .service-card-title   { font-size: 1.125rem; margin: .75rem 0 .375rem; }
  .service-card-desc    { font-size: .875rem; }
}

/* EDIT #16: Contact form card and inputs */
.contact-form-card {
  background: var(--white);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.contact-form-header {
  padding: 2.25rem 2.5rem 1.5rem;
  border-bottom: 1px solid var(--gray-100);
  background: linear-gradient(180deg, var(--blue-50) 0%, var(--white) 100%);
  position: relative;
}
.contact-form-header::after {
  content: "";
  position: absolute;
  left: 2.5rem; right: 2.5rem; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-600) 60%, var(--pink-400) 60%, var(--pink-400) 100%);
  border-radius: 2px;
}
.contact-form-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--gray-900);
  margin: .5rem 0;
}
.contact-form-header p {
  color: var(--gray-600);
  font-size: 1rem;
}
.contact-form-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue-600);
  padding: .25rem .625rem;
  background: var(--blue-100);
  border-radius: var(--radius-full);
}
.contact-form {
  padding: 2rem 2.5rem 2.5rem;
}
.form-row {
  margin-bottom: 1.25rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.form-row.two   { grid-template-columns: 1fr 1fr; }
.form-row.three { grid-template-columns: 2fr 1fr 1fr; }
@media (max-width: 640px) {
  .form-row.two, .form-row.three { grid-template-columns: 1fr; }
  .contact-form-header, .contact-form { padding-left: 1.25rem; padding-right: 1.25rem; }
  .contact-form-header::after { left: 1.25rem; right: 1.25rem; }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.form-field label {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--gray-800);
}
.form-field label.sr-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap;
}
.form-field .req { color: var(--pink-600); margin-left: 2px; }    /* pink accent on required marker */
.form-field .hint { color: var(--gray-500); font-weight: 500; font-size: .8125rem; margin-left: .375rem; }

.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="date"],
.form-field select,
.form-field textarea {
  width: 100%;
  padding: .75rem .875rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
  font: inherit;
  font-size: 1rem;
  color: var(--gray-900);
  transition: border-color .2s, box-shadow .2s, background .2s;
  appearance: none;
  -webkit-appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--gray-400); }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue-600);
  box-shadow: 0 0 0 4px rgba(124,69,207,.15);    /* blue ring */
}
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea {
  border-color: var(--pink-400);
  box-shadow: 0 0 0 4px rgba(244,114,182,.18);  /* pink ring on error */
}

.form-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 18px;
  padding-right: 2.25rem;
}
.form-field textarea { resize: vertical; min-height: 110px; }

.form-fieldset {
  border: 0;
  margin: 0 0 1.25rem;
  padding: 0;
}
.form-fieldset legend {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--gray-800);
  margin-bottom: .625rem;
  padding: 0;
}

/* Checkbox grid */
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
@media (max-width: 720px) { .checkbox-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .checkbox-grid { grid-template-columns: 1fr; } }

.checkbox-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .875rem;
  border: 1.5px solid var(--gray-200);
  border-radius: var(--radius-lg);
  cursor: pointer;
  user-select: none;
  transition: border-color .2s, background .2s, color .2s;
  background: var(--white);
}
.checkbox-tile:hover { border-color: var(--blue-300); }
.checkbox-tile input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-tile-mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border: 1.5px solid var(--gray-300);
  border-radius: 5px;
  background: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}
.checkbox-tile-mark::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity .15s;
}
.checkbox-tile input:checked ~ .checkbox-tile-mark {
  background: var(--blue-600);
  border-color: var(--blue-600);
}
.checkbox-tile input:checked ~ .checkbox-tile-mark::after { opacity: 1; }
.checkbox-tile input:checked ~ .checkbox-tile-label { color: var(--blue-700); font-weight: 700; }
.checkbox-tile:has(input:checked) {
  border-color: var(--blue-600);
  background: var(--blue-50);
}
.checkbox-tile-label { font-size: .9375rem; font-weight: 600; color: var(--gray-700); }

/* File input */
.file-field {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px dashed var(--gray-300);
  border-radius: var(--radius-lg);
  padding: .75rem .875rem;
  background: var(--gray-50);
  transition: border-color .2s, background .2s;
  cursor: pointer;
}
.file-field:hover { border-color: var(--blue-400); background: var(--blue-50); }
.file-field input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.file-field-label {
  color: var(--gray-600);
  font-size: .9375rem;
  font-weight: 600;
}

/* Submit row + feedback */
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  margin-top: 1.5rem;
}
.form-disclaimer {
  color: var(--gray-500);
  font-size: .8125rem;
  max-width: 38rem;
}
.form-feedback {
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-radius: var(--radius-lg);
  font-size: .9375rem;
  font-weight: 600;
  display: none;
}
.form-feedback.ok    { display: block; background: var(--blue-50);  color: var(--blue-700); border: 1px solid var(--blue-200); }
.form-feedback.error { display: block; background: var(--pink-50);  color: var(--pink-600); border: 1px solid var(--pink-200); }

/* EDIT #15: Pink accents (subtle, blue stays primary)
   - .section-eyebrow pill
   - decorative underline under main section H2s
   - active-state indicators */
.section-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pink-600);
  padding: .3rem .75rem;
  background: var(--pink-50);
  border-radius: var(--radius-full);
  margin-bottom: 1rem;
}

/* Subtle bi-color underline under section headlines */
.heading-lg::after,
.heading-display::after {
  content: none;  /* not auto-applied — opt in with .accent-underline on the heading itself */
}
.accent-underline { position: relative; padding-bottom: .5rem; }
.accent-underline::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-600) 65%, var(--pink-400) 65%, var(--pink-400) 100%);
  border-radius: 3px;
}

/* EDIT #15: pink stripe on active promise-word indicator (was white) */
.promise-word.is-active::before {
  background: var(--pink-400) !important;
}

/* EDIT #15: pink tab indicator under active showcase tab */
.showcase-tab.active {
  position: relative;
}
.showcase-tab.active::after {
  content: "";
  position: absolute;
  left: 1.25rem; right: 1.25rem;
  bottom: -.25rem;
  height: 3px;
  background: var(--pink-400);
  border-radius: 3px;
}

/* EDIT #44: the previous alternating pink dot in region cards is retired —
   bullets are now a single solid color that flips white on hover. */

/* EDIT #15: footer small decorative dot */
/* EDIT #38: the old decorative bar above footer copy is removed — the row is now a
   horizontal layout (copyright left, "Site by" right) so a centered bar would look wrong. */

/* EDIT #15: subtle pink hover state on .nav-link (in addition to blue) */
.nav-dropdown-menu a:hover {
  color: var(--pink-600);
}

/* EDIT #15: middle testimonial card gets a pink quote glyph + star accent for a subtle touch */
.testimonial:nth-child(2) .testimonial-quote {
  background: var(--pink-400);
}
.testimonial:nth-child(2) .testimonial-stars svg {
  color: var(--pink-400);
}

/* ==========================================================================
   EDIT BATCH 3 — tilt-wrap, process timeline, light reviews, gallery water (May 2026)
   ========================================================================== */

/* EDIT #21: tilt-on-scroll wrapper for the why-us video, with a white box behind */
.tilt-wrap {
  position: relative;
  perspective: 1200px;
}
.tilt-back {
  position: absolute;
  inset: 0;
  background: var(--white);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  transform: rotate(-3deg);   /* counter-rotated to the video's tilt */
  z-index: 0;
  pointer-events: none;
}
.tilt-front {
  position: relative;
  z-index: 1;
  width: 100%;
  display: block;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform .3s ease-out;
  will-change: transform;
}

/* EDIT #22: connected-timeline 3-step process */
.process-section { position: relative; }
.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-top: 1rem;
}
.process-line {
  position: absolute;
  top: 86px;                          /* aligns with the center of icon circle */
  left: calc(16% + 1rem);
  right: calc(16% + 1rem);
  height: 4px;
  background: var(--gray-200);
  border-radius: 4px;
  z-index: 0;
  overflow: hidden;
}
.process-line-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-600) 70%, var(--pink-400) 100%);
  transition: width 1.6s var(--ease-out);
}
.process-timeline.in-view .process-line-fill,
.in-view .process-line-fill {
  width: 100%;
}
.process-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-2xl);
  padding: 3rem 1.75rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  z-index: 1;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.process-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2xl);
}
.process-card-num {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pink-400);          /* pink accent for step pip */
  color: var(--white);
  font-weight: 800;
  font-size: .875rem;
  padding: .375rem .9rem;
  border-radius: var(--radius-full);
  letter-spacing: .08em;
  box-shadow: var(--shadow);
}
.process-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  margin: .5rem auto 1.25rem;
  background: var(--blue-600);
  color: var(--white);
  border-radius: var(--radius-full);
  border: 6px solid var(--gray-50);     /* matches section bg — creates a "punched-through line" look */
  box-shadow: var(--shadow);
  position: relative;
  z-index: 2;
}
.process-card h3 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: .5rem;
  color: var(--gray-900);
}
.process-card p {
  font-size: 1rem;
  color: var(--gray-600);
  line-height: 1.55;
}
@media (max-width: 900px) {
  .process-timeline { grid-template-columns: 1fr; gap: 1.5rem; }
  .process-line {
    top: 1rem;
    bottom: 1rem;
    left: 50%;
    right: auto;
    width: 4px;
    height: auto;
    transform: translateX(-50%);
  }
  .process-line-fill {
    width: 100% !important;
    height: 0%;
    transition: height 1.6s var(--ease-out);
  }
  .process-timeline.in-view .process-line-fill,
  .in-view .process-line-fill { height: 100% !important; }
}

/* EDIT #23: Light-background testimonials (no longer a blue band) */
.reviews-section.reviews-light {
  background: var(--gray-50);
  padding: 7rem 0;
}
.reviews-section.reviews-light::before { content: none; }   /* drop the blue radial glows */
.reviews-section.reviews-light .testimonial {
  border: 1px solid var(--gray-100);
}
.reviews-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--blue-600);
  font-weight: 700;
  border-bottom: 2px solid var(--blue-200);
  padding-bottom: .25rem;
  transition: color .2s, border-color .2s;
}
.reviews-link:hover {
  color: var(--blue-700);
  border-bottom-color: var(--blue-600);
}

/* EDIT #24: Gallery water effect — white above, blue wave + water at the bottom */
.gallery-section {
  position: relative;
  background: var(--white);
  overflow: hidden;
}
/* EDIT #128: blue variant — Our Work band on brand blue. */
.gallery-section.gallery-section-blue { background: var(--blue-600); margin-top: -1px; }
.gallery-section.gallery-section-blue .parallax-item img { box-shadow: 0 18px 40px rgba(0, 30, 60, .35); }

/* EDIT #128: water-wave relocated to the bottom of the testimonials section. */
.reviews-section { position: relative; overflow: hidden; }
/* EDIT #130: when the section contains the wave, zero out the bottom padding so
   the wave is flush against the next section (no white gap below it). */
.reviews-section:has(> .reviews-water) { padding-bottom: 0; }
.reviews-water {
  position: relative;
  width: 100%;
  height: 200px;
  line-height: 0;
  overflow: hidden;
  margin-top: 4rem;
}
/* Two waves layered at different speeds read as moving water with depth,
   rather than a single rigid shape sliding sideways. */
.reviews-water-svg {
  position: absolute;
  left: 0; bottom: 0;
  width: 200%;
  height: 100%;
  will-change: transform;
}
.reviews-water-back  { animation: reviews-wave-flow 17s linear infinite; opacity: .55; }
.reviews-water-front { animation: reviews-wave-flow 11s linear infinite; }
@keyframes reviews-wave-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (max-width: 640px) {
  .reviews-water { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .reviews-water-back, .reviews-water-front { animation: none; }
}
@media (max-width: 720px) {
  .gallery-water-svg { height: 140px; }
}

/* ==========================================================================
   EDIT BATCH 4 — about/contact/reviews tightening, service-card v2,
                  outline-only tilt-back, headline sizing (May 2026)
   ========================================================================== */

/* EDIT #31: Smaller owner image on About page */
.about-img-tile.about-img-sm {
  max-width: 22rem;          /* was effectively ~32rem at column width */
  margin-inline: auto;
}
.about-img-tile.about-img-sm img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.1;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}
@media (min-width: 769px) {
  /* Keep the image column visually balanced with the text column despite being smaller */
  .about-owner-grid { align-items: center; }
}

/* EDIT #32, #33: tight page header — less space below the H1/sub so body content sits higher */
.page-header.page-header-tight {
  padding-top: calc(var(--nav-height) + 2.5rem);
  padding-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .page-header.page-header-tight {
    padding-top: calc(var(--nav-height) + 2rem);
    padding-bottom: 1rem;
  }
}

/* EDIT #34: Service card v2 — icon left of title, explicit "Click here for more" link.
   No more whole-card click. The card itself is a <div>. */
.service-card-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
}
.service-card-head .service-card-icon {
  width: 44px;
  height: 44px;
  margin: 0;
}
.service-card-head .service-card-title {
  margin: 0;
  font-size: 1.25rem;
  flex: 1;
}
.service-card-content { padding: 1.25rem 1.25rem 1.5rem; }
.service-card-desc { margin-bottom: .75rem; }
.service-card-link {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .5rem .875rem;
  margin-top: auto;
  font-size: .9rem;
  font-weight: 700;
  color: var(--blue-600);
  background: var(--blue-50);
  border-radius: var(--radius-full);
  align-self: flex-start;
  transition: background .2s, color .2s, transform .15s;
  text-decoration: none;
}
.service-card-link:hover {
  background: var(--blue-600);
  color: var(--white);
  transform: translateX(2px);
}

/* Service-card head (icon + title row) — clean colors, no hover-flip since the card no longer goes dark */
.service-card-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.service-card-head .service-card-title {
  font-size: 1.125rem;
}

/* EDIT #67: Mobile — services grid becomes a horizontal SCROLLER.
   - Cards take ~70vw of the viewport (max 280px) so the next card peeks at the edge
   - scroll-snap so swiping snaps cleanly
   - Description text hidden; "Click here for more" text hidden; just an arrow
   - Card image stays at the top, content is a compact row below */
@media (max-width: 720px) {
  .service-card { cursor: default; }

  /* Grid → flex row with horizontal scrolling, bleeding to the viewport edges */
  .services-grid {
    display: flex;
    flex-wrap: nowrap;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    margin-inline: -1.5rem;       /* extend to viewport edges so card edges align with screen */
    padding-inline: 1.5rem;
    padding-bottom: .75rem;
    scrollbar-width: thin;
  }
  .services-grid::-webkit-scrollbar { height: 4px; }
  .services-grid::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 2px; }

  .services-grid > .service-card {
    flex: 0 0 70vw;
    max-width: 280px;
    scroll-snap-align: start;
  }
  .service-card .service-card-image { display: block; height: 8.5rem; }

  /* Compact card content: icon + title row, then a small arrow link aligned right */
  .service-card .service-card-content {
    padding: .875rem 1rem 1rem;
    gap: .5rem;
  }
  .service-card .service-card-head { gap: .5rem; }
  .service-card .service-card-icon { width: 36px; height: 36px; border-radius: var(--radius-md); }
  .service-card .service-card-icon svg { width: 18px; height: 18px; }
  .service-card .service-card-title { font-size: 1rem; line-height: 1.15; }

  /* Hide the description AND the "Click here for more" text — only the arrow remains */
  .service-card .service-card-desc { display: none; }
  .service-card .service-card-link-text { display: none; }
  .service-card .service-card-link {
    margin: 0 0 0 auto;            /* push to the right edge */
    padding: 0;
    background: transparent;
    color: var(--blue-600);
    font-size: 1.375rem;
    line-height: 1;
    align-self: flex-end;
  }
  .service-card .service-card-link:hover { background: transparent; color: var(--blue-700); transform: none; }
}

/* EDIT #35: white outline-only "card" behind the why-us video (no fill, no shadow), counter-rotated more */
.tilt-back {
  background: transparent;
  border: 3px solid var(--white);
  box-shadow: none;
  transform: rotate(-6deg);     /* matches the new ±6° front tilt direction */
}
.tilt-front {
  /* keep its own subtle shadow so it lifts off the section bg */
  box-shadow: var(--shadow-xl);
}


/* ==========================================================================
   EDIT #46 — City pages, REBUILT on-brand (May 2026)
   Replaces the previous off-brand block that mirrored the reference site
   (red CTAs, italic about heading, glass/blur cards, tilted photo frame).
   Window-cleaning brand: cream + navy + lavender/purple accents,
   brand typography, and the site's existing component patterns where possible.
   ========================================================================== */

/* EDIT #51: city-page service cards size to content — the home page's 4/5 aspect
   ratio was designed for a 4-up grid, but the city page shows them 3-up (wider),
   which made the 4/5 ratio leave a huge empty gap between the description and the
   "Click here for more" link. */
.city-page .service-card { aspect-ratio: auto; }
/* EDIT #64: city-page services grid is 3-up on desktop (6 cards = 2 clean rows of 3) */
.city-page .services-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1024px) { .city-page .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width:  720px) { .city-page .services-grid { grid-template-columns: repeat(2, 1fr); } }
/* Breadcrumb */
.city-crumbs {
  background: var(--gray-50);
  padding: calc(var(--nav-height) + 1rem) 0 1rem;
  font-size: .875rem;
  border-bottom: 1px solid var(--gray-100);
}
.city-crumbs a {
  color: var(--gray-600);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s;
}
.city-crumbs a:hover { color: var(--blue-600); }
.city-crumbs > .container > span { margin: 0 .5rem; color: var(--gray-400); }
.city-crumbs [aria-current="page"] { color: var(--gray-900); font-weight: 700; }

/* Hero — brand colors, no pink-state quirk, simple two-line title */
.city-hero {
  position: relative;
  height: 72vh;
  min-height: 520px;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--gray-900);
}
.city-hero-bg { position: absolute; inset: 0; }
.city-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.city-hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(120deg, rgba(15,23,42,.78) 0%, rgba(15,23,42,.55) 55%, rgba(15,23,42,.30) 100%);
}
.city-hero-content {
  position: relative;
  z-index: 2;
  max-width: 60rem;
  color: var(--white);
}
.city-hero-eyebrow {
  background: rgba(255,255,255,.18);
  color: var(--white);
  margin-bottom: 1.25rem;
}
.city-hero-title {
  color: var(--white);
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  line-height: 1.05;
  margin-bottom: 1.25rem;
}
.city-hero-city {
  display: block;
  color: var(--blue-200);
  font-weight: 800;
  margin-top: .25rem;
}
.city-hero-sub {
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255,255,255,.92);
  margin-bottom: 2rem;
  max-width: 40rem;
}
@media (max-width: 720px) {
  .city-hero { min-height: 460px; padding-top: var(--nav-height); }
  .city-hero-sub { font-size: 1rem; }
}

/* Neighborhood chips — flat, clean, blue pin in brand color, no decoration */
.city-hood-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  justify-content: center;
  max-width: 56rem;
  margin: 0 auto;
}
.city-hood-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--gray-900);
  transition: background .2s, border-color .2s, color .2s;
}
.city-hood-chip:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
  color: var(--white);
}
.city-hood-dot {
  display: inline-flex;
  align-items: center;
  color: var(--blue-600);
  flex-shrink: 0;
  transition: color .2s;
}
.city-hood-chip:hover .city-hood-dot { color: var(--white); }

/* "What makes this city special" — light card on gray bg */
.city-special-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-2xl);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.city-special-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-full);
  background: var(--blue-50);
  color: var(--blue-600);
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   EDIT #42 — "What We Clean" content merged into Clean/Protect/Restore/Shine
   ========================================================================== */
.promise-category {
  position: relative;
  margin: 1.25rem 0 1.5rem;
  min-height: 6.5rem;
}
.promise-category-pane {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.promise-category-pane.is-active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.promise-category-pane h3 {
  color: var(--white);
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .75rem;
  opacity: .85;
}
.promise-category-items {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .375rem 1.25rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.promise-category-items li {
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.promise-category-items li::before {
  content: "";
  width: 5px; height: 5px;
  background: var(--pink-400);
  border-radius: 50%;
  flex-shrink: 0;
}
@media (max-width: 720px) {
  .promise-category-items { grid-template-columns: 1fr; }
}

/* ==========================================================================
   EDIT #47 — "See us in action" video feature section
   Reused on the home page, the Pressure Washing page, and every city page.
   ========================================================================== */
.video-feature {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.video-feature.gray-bg  { background: var(--gray-50); }
.video-feature.white-bg { background: var(--white); }
.video-feature.blue-bg  { background: var(--blue-600); color: var(--white); }
.video-feature.blue-bg h2,
.video-feature.blue-bg .video-feature-sub { color: var(--white); }
.video-feature.blue-bg .section-eyebrow { background: rgba(255,255,255,.15); color: var(--white); }

.video-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem;
  align-items: center;
}
/* EDIT #52: flipped layout — video on the left, text on the right */
.video-feature.is-flipped .video-feature-grid {
  grid-template-columns: 1.2fr 1fr;
}
.video-feature.is-flipped .video-feature-text  { order: 2; }
.video-feature.is-flipped .video-feature-frame { order: 1; }
.video-feature-text { max-width: 32rem; }
.video-feature-sub { color: var(--gray-600); }

.video-feature-frame {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  background: var(--gray-900);
  aspect-ratio: 16 / 10;
}
.video-feature-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.video-feature-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-2xl);
  border: 3px solid var(--blue-600);
  pointer-events: none;
  opacity: .9;
}
.video-feature.blue-bg .video-feature-frame::after { border-color: rgba(255,255,255,.6); }

@media (max-width: 900px) {
  .video-feature { padding: 3rem 0; }
  /* EDIT #59: explicitly override the flipped variant too — its higher specificity
     was preventing it from collapsing to one column on mobile, leaving a tiny video
     beside a wall of text. Now both flipped and non-flipped stack vertically. */
  .video-feature-grid,
  .video-feature.is-flipped .video-feature-grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .video-feature-text { max-width: none; text-align: center; margin-inline: auto; }
  /* Reset CSS order so the video sits ABOVE the text on mobile in both variants */
  .video-feature.is-flipped .video-feature-text,
  .video-feature.is-flipped .video-feature-frame { order: initial; }
  /* EDIT #120: drop the negative margin that made the frame bleed past container padding;
     videos now sit inset with the normal container padding on mobile. */
  .video-feature-frame {
    margin-inline: 0;
    border-radius: var(--radius-lg);
    aspect-ratio: 16 / 9;
  }
  .video-feature-frame::after { border-radius: var(--radius-lg); border-width: 2px; }
}

/* ==========================================================================
   EDIT #56 — Trust band (Insured / Experienced / Equipped) under home services
   ========================================================================== */
.trust-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 4rem 0;
  background: var(--blue-600);
}
.trust-band-bg {
  position: absolute; inset: 0; z-index: 0;
}
.trust-band-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 1;
}
.trust-band-bg::after {
  /* brand purple→navy tint over the photo */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(124,69,207,.86) 0%, rgba(20,48,77,.86) 100%);
}
.trust-band > .container { position: relative; z-index: 1; }

.trust-band-inner {
  background: rgba(255,255,255,.13);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius-2xl);
  padding: 1.75rem 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.trust-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  color: var(--pink-200);
  flex-shrink: 0;
}
.trust-item-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.trust-item-label {
  color: var(--pink-200);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.trust-item-value {
  color: var(--white);
  font-size: 1.1875rem;
  font-weight: 800;
  margin-top: .125rem;
}

@media (max-width: 800px) {
  .trust-band { padding: 3rem 0; }
  .trust-band-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.5rem;
  }
}

/* ==========================================================================
   EDIT #68 — Pressure washing page enhancements
   ========================================================================== */

/* --- B4: stat counter row above benefits --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 64rem;
  margin: 0 auto 4rem;
  padding: 2rem;
  background: var(--gray-50);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--gray-200);
}
.benefits-section.bg-blue-600 .stat-row {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  backdrop-filter: blur(4px);
}
.stat-item { text-align: center; }
.stat-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--blue-600);
  font-variant-numeric: tabular-nums;
  margin-bottom: .35rem;
}
.benefits-section.bg-blue-600 .stat-value { color: white; }
.stat-label {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.benefits-section.bg-blue-600 .stat-label { color: rgba(255,255,255,.85); }
@media (max-width: 700px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; padding: 1.5rem; }
}

/* --- B1: gradient-icon benefit cards with hover-lift --- */
.benefit-card-dynamic {
  text-align: center;
  padding: 2.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-2xl);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
.benefits-section.bg-blue-600 .benefit-card-dynamic {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
}
.benefit-card-dynamic:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--blue-200);
}
.benefit-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  color: var(--white);
  border-radius: var(--radius-full);
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 20px -6px rgba(124,69,207,.55);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.benefit-card-dynamic:hover .benefit-card-icon {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 14px 28px -6px rgba(124,69,207,.7);
}
.benefit-card-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: .75rem;
  color: var(--gray-900);
}
.benefit-card-desc {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--gray-600);
}

/* --- C: Surface section with image background + glass cards --- */
.surface-image-section {
  background: var(--gray-900);
}
.surface-image-bg {
  position: absolute; inset: 0; z-index: 0;
}
.surface-image-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.surface-image-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(3,105,161,.78) 0%, rgba(0,0,0,.72) 100%);
}
.surface-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .surface-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .surface-grid { grid-template-columns: 1fr; } }
.surface-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.25rem;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(6px);
  transition: transform .25s, background .25s, border-color .25s;
}
.surface-card:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.32);
}
.surface-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-full);
  background: var(--blue-500);
  color: var(--white);
  flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(124,69,207,.5);
}
.surface-card-label {
  color: var(--white);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* --- D: Split (Residential / Commercial) cards with illustrations --- */
.split-card {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  transition: transform .3s, box-shadow .3s;
}
.split-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}
.split-card.is-flipped { grid-template-columns: 1.1fr 1fr; }
.split-card.is-flipped .split-card-illustration { order: 2; }
.split-card.is-flipped .split-card-text         { order: 1; }
.split-card-illustration {
  display: flex;
  align-items: center;
  justify-content: center;
}
.split-illustration-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: var(--radius-lg);
}
.split-card-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gray-900);
  margin: 0 0 1.25rem;
}
.split-card-list {
  display: grid;
  gap: .85rem;
}
.split-card-list-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 1.0625rem;
  color: var(--gray-700);
}
.split-card-list-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
}
@media (max-width: 800px) {
  .split-card,
  .split-card.is-flipped { grid-template-columns: 1fr; gap: 1.5rem; }
  .split-card.is-flipped .split-card-illustration { order: 0; }
  .split-card.is-flipped .split-card-text         { order: 1; }
  .split-illustration-svg { max-width: 200px; margin: 0 auto; }
}

/* --- E: Process timeline (horizontal on desktop, vertical on mobile) --- */
/* EDIT #69: timeline container widened to 1440px max + extra column gap so the 6 steps
   don't crowd; title font shrunk slightly to suit the shorter copy. */
.process-section .container {
  max-width: 1440px;
}
.process-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  align-items: start;
}
.process-timeline-line {
  position: absolute;
  top: 28px;
  left: 8.33%;
  right: 8.33%;
  height: 3px;
  background: linear-gradient(90deg, var(--blue-200), var(--blue-500), var(--blue-200));
  border-radius: 2px;
  z-index: 0;
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 .25rem;
  position: relative;
  z-index: 1;
}
.process-step-node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--blue-500);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px -4px rgba(124,69,207,.45);
  transition: transform .3s, box-shadow .3s, background .3s;
}
.process-step:hover .process-step-node {
  transform: scale(1.1);
  background: var(--blue-500);
  box-shadow: 0 8px 20px -4px rgba(124,69,207,.7);
}
.process-step-number {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--blue-600);
  transition: color .3s;
}
.process-step:hover .process-step-number { color: var(--white); }
.process-step-title {
  font-size: 1.25rem;        /* EDIT #69: was 1.0625rem, larger now since copy is shorter */
  font-weight: 800;
  color: var(--gray-900);
  margin-bottom: .5rem;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.process-step-desc {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--gray-600);
  max-width: 18rem;
  margin-inline: auto;
}
/* When timeline only has 4 steps (gutter cleaning) or 5 steps (paver sealing, dry-ice) */
/* EDIT #70: explicit class-based variants (the previous :has() approach failed because
   .process-timeline-line is the 1st child of .process-timeline, throwing off :nth-child counts).
   Line endpoints calibrated so the line starts/ends at the CENTER of the first/last node. */
.process-timeline.steps-4 { grid-template-columns: repeat(4, 1fr); }
.process-timeline.steps-5 { grid-template-columns: repeat(5, 1fr); }
.process-timeline.steps-6 { grid-template-columns: repeat(6, 1fr); }
.process-timeline.steps-4 .process-timeline-line { left: 12.5%;  right: 12.5%;  }
.process-timeline.steps-5 .process-timeline-line { left: 10%;    right: 10%;    }
.process-timeline.steps-6 .process-timeline-line { left: 8.333%; right: 8.333%; }

@media (max-width: 1024px) {
  .process-timeline,
  .process-timeline.steps-4,
  .process-timeline.steps-5,
  .process-timeline.steps-6 { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.5rem; }
  .process-timeline-line { display: none; }
}
@media (max-width: 640px) {
  .process-timeline,
  .process-timeline.steps-4,
  .process-timeline.steps-5,
  .process-timeline.steps-6 { grid-template-columns: 1fr; gap: 1.5rem; }
  .process-step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
    gap: 1rem;
  }
  .process-step-node { margin-bottom: 0; flex-shrink: 0; width: 48px; height: 48px; }
  .process-step-desc { margin-inline: 0; }
}

/* ==========================================================================
   EDIT #78 — UpEngine reviews popup widget hidden on /reviews.
   The /reviews page has its OWN inline reviews widget with a different token,
   so we only hide our popup's host wrapper. The widget renders into the
   wrapped data-romw-token div; hiding the wrapper hides the popup entirely.
   EDIT #78b: also hidden on mobile (≤768px) — the popup competes with the
   limited screen real estate on phones.
   ========================================================================== */
body.route-reviews #review-widget-host {
  display: none !important;
}
@media (max-width: 768px) {
  #review-widget-host { display: none !important; }
}

/* ==========================================================================
   EDIT #85/#88/#91 — Testimonials grid.
     desktop:  3 columns
     tablet:   2 columns
     mobile:   side-by-side horizontal scroll (cards stay "next to each other"
               instead of stacking; the next card peeks in so it's clear you
               can swipe for more)
   ========================================================================== */
.testimonials-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.testimonials-dots {
  display: none;       /* peek pattern instead of dots */
}
@media (max-width: 1024px) {
  .testimonials-track { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .testimonials-track {
    display: flex;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    margin-inline: -1.5rem;        /* break out of container padding */
    padding: 1.25rem 1.5rem 1rem;  /* top room so the quote badge (top:-12px) isn't clipped by overflow-y:hidden */
    scrollbar-width: none;          /* native scrollbar hidden */
  }
  .testimonials-track::-webkit-scrollbar { display: none; }
  .testimonials-track > .testimonial {
    flex: 0 0 80%;                  /* peek-of-next pattern */
    max-width: 340px;
    scroll-snap-align: start;
    margin: 0;
  }
}

/* ==========================================================================
   EDIT #86 — Review source brand icon (Google / Yelp / HomeAdvisor)
   Sits in the testimonial figcaption to the right of name/location.
   No spelled-out brand name — icon only.
   EDIT #113 — Source now occupies the right column of the attr grid, vertically
   centered across both name + location rows.
   ========================================================================== */
.testimonial-source {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.testimonial-source svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ==========================================================================
   EDIT #90 — Mobile edge-to-edge media frames
   On mobile (≤640px), framed image/video boxes inside `.container` are
   pushed past the 1.5rem container padding so they bleed to the screen edges.
   Border radius drops to 0 so the edge-to-edge feel looks intentional.
   ========================================================================== */
@media (max-width: 640px) {
  .mobile-bleed {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
    border-radius: 0 !important;
    max-width: none !important;
  }
  /* Video feature frame — keep the rounded video boxes INSET on phones so they
     don't touch the screen edges (reverses the earlier edge-to-edge bleed). */
  .video-feature-frame {
    margin-left: 0;
    margin-right: 0;
    border-radius: var(--radius-lg);
  }
  /* Why-Choose-Us page "See Our Work" pair — shorter height too, 600px is way too tall for phones */
  .why-images-grid > div {
    height: 280px !important;
  }
}

/* ==========================================================================
   EDIT #94 — Hero slideshow with thumbnail previews
   8 slides cycle through every service. Layout matches the user's mockup:
   - Big white service name + green "Orlando, FL" anchor below
   - Subtitle in white
   - Prev/Next arrows bottom-center
   - 2 thumbnail preview cards bottom-right showing the next two services
   ========================================================================== */

:root {
  --hero-accent:     #7c45cf;      /* brand purple */
  --hero-accent-soft: rgba(34,197,94,.15);
}

.hero-slider {
  position: relative;
  height: 100vh;
  min-height: 620px;
  max-height: 880px;
  overflow: hidden;
  isolation: isolate;
  color: white;
}
.hero-slides {
  position: absolute; inset: 0;
}
.hero-slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .8s ease-out;
  pointer-events: none;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.hero-slide-bg { position: absolute; inset: 0; }
.hero-slide-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-slide-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%);
}
.hero-slide-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 2rem;
  padding-top: var(--nav-height);
  max-width: 1200px;
  margin: 0 auto;
}
.hero-slide-title {
  font-size: clamp(46px, 8.5vw, 124px);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: .95;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 4px 30px rgba(0,0,0,.35);
}
.hero-slide-service {
  display: block;
  color: white;
}
.hero-slide-anchor {
  display: block;
  color: var(--hero-accent);
  margin-top: .2rem;
}
.hero-slide-sub {
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 500;
  margin-top: 1.5rem;
  max-width: 56ch;
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* Controls overlay sits above slides */
.hero-controls {
  position: absolute;
  left: 0; right: 0;
  bottom: 2rem;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  padding: 0 2rem;
}

.hero-arrows {
  display: flex;
  gap: 1rem;
  margin: 0 auto;          /* centered horizontally */
}
.hero-arrow {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid white;
  background: transparent;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s, transform .15s, color .2s;
}
.hero-arrow:hover {
  background: white;
  color: var(--blue-900);
}
.hero-arrow:focus-visible {
  outline: 2px solid white;
  outline-offset: 3px;
}
.hero-arrow:active { transform: scale(.95); }

/* Thumbnail strip — anchored to bottom-right */
.hero-thumbs {
  position: absolute;
  right: 2rem;
  bottom: 0;
  display: flex;
  gap: 1rem;
}
.hero-thumb {
  width: 240px;
  height: 140px;
  border: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  background: transparent;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transition: transform .25s ease-out, box-shadow .25s;
}
.hero-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.hero-thumb:focus-visible {
  outline: 2px solid var(--hero-accent);
  outline-offset: 3px;
}
.hero-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-thumb-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,.94);
  color: var(--gray-900);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .6rem .85rem;
  text-align: left;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Responsive: hide one or both thumbs on small screens, center arrows */
@media (max-width: 1024px) {
  .hero-thumb { width: 180px; height: 110px; }
  .hero-thumbs { right: 1.5rem; gap: .75rem; }
}
@media (max-width: 820px) {
  .hero-thumbs { display: none; }       /* full-width slide on phones */
  .hero-controls { justify-content: center; bottom: 1.5rem; padding: 0 1rem; }
  .hero-arrow { width: 48px; height: 48px; }
}
@media (max-width: 640px) {
  .hero-slider { height: auto; min-height: 88vh; max-height: none; }
  .hero-slide-content { padding-top: calc(var(--nav-height) + 1.5rem); padding-bottom: 6rem; }
  .hero-slide-sub { margin-top: 1rem; }
}

/* Respect reduced-motion: stop the fade transition, freeze the auto-rotate */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}

/* ==========================================================================
   EDIT #109 — Compact icon tiles for home services
   Replaces the v102 minimized cards. Just icon + label, in a 4-up grid.
   ========================================================================== */
/* ==========================================================================
   EDIT #127 — Why Choose Us icon animations
   Each of the four icons gets a thematic loop. Subtle by design.
   ========================================================================== */
.why-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: white;
  margin-bottom: 1rem;
  overflow: visible;
}
.why-icon-circle svg { display: block; transform-origin: center; }

.why-icon-shield svg { animation: why-shield-pulse 2.6s ease-in-out infinite; }
.why-icon-zap   svg  { animation: why-zap-flicker   1.8s ease-in-out infinite; }
.why-icon-star  svg  { animation: why-star-spin     6s   linear      infinite; }
.why-icon-heart svg  { animation: why-heart-beat    1.4s ease-in-out infinite; }

@keyframes why-shield-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}
@keyframes why-zap-flicker {
  0%, 100%       { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  18%            { opacity: .55; }
  22%            { opacity: 1; filter: drop-shadow(0 0 8px rgba(255,255,255,.85)); }
  30%, 80%       { opacity: 1; filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
}
@keyframes why-star-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes why-heart-beat {
  0%, 70%, 100% { transform: scale(1); }
  15%           { transform: scale(1.22); }
  30%           { transform: scale(1); }
  45%           { transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .why-icon-shield svg, .why-icon-zap svg,
  .why-icon-star svg,   .why-icon-heart svg { animation: none; }
}

/* ==========================================================================
   EDIT #125 — Service selector: split layout, image swap on icon click
   ========================================================================== */
.service-selector {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 3rem;
  align-items: stretch;
}
@media (max-width: 900px) {
  .service-selector { grid-template-columns: 1fr; gap: 1.5rem; }
}

.service-selector-image {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 460px;
  background: var(--gray-100);
}
.service-selector-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s var(--ease-out);
}
.service-selector-image img.is-active { opacity: 1; }
.service-selector-image::after {
  /* gradient overlay at the bottom for caption legibility */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,30,60,.78) 100%);
  pointer-events: none;
}
.service-selector-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.75rem 1.75rem 1.75rem;
  z-index: 1;
  color: white;
}
.service-selector-caption h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  margin-bottom: .35rem;
  letter-spacing: -.01em;
}
.service-selector-caption p {
  font-size: 1rem;
  color: rgba(255,255,255,.92);
  margin-bottom: 1.25rem;
  max-width: 38rem;
  font-weight: 500;
}

.service-selector-icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-content: start;
}
@media (max-width: 1200px) and (min-width: 901px) {
  .service-selector-icons { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .service-selector-icons { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .service-selector-image { min-height: 320px; }
}

.service-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 1.5rem .75rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  color: var(--gray-900);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  font: inherit;       /* override <button> defaults */
  transition: transform .2s ease-out, border-color .2s ease-out, box-shadow .2s ease-out, background .2s ease-out;
}
.service-icon-tile:hover {
  border-color: var(--blue-200);
  background: var(--blue-50);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(124,69,207,.10);
}
.service-icon-tile.is-active {
  border-color: var(--blue-600);
  background: var(--blue-50);
  box-shadow: 0 8px 22px rgba(124,69,207,.18);
}

.service-icon-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--blue-50);
  color: var(--blue-600);
  transition: background .2s, color .2s, transform .2s;
}
.service-icon-tile-icon svg { width: 26px; height: 26px; }
.service-icon-tile:hover .service-icon-tile-icon,
.service-icon-tile.is-active .service-icon-tile-icon {
  background: var(--blue-600);
  color: var(--white);
  transform: scale(1.05);
}

.service-icon-tile-label {
  font-size: .9rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--blue-900);
}
.service-icon-tile:hover .service-icon-tile-label,
.service-icon-tile.is-active .service-icon-tile-label { color: var(--blue-600); }

/* (Old .service-icons-grid styles intentionally removed — selector takes its place) */

/* ==========================================================================
   EDIT #102 — /services hub page
   Horizontal row layout: [title | description | thumbnail], hairline divider.
   Inspired by the Pink's Window Services index.
   ========================================================================== */
.services-page-title {
  color: var(--blue-900);
  letter-spacing: -.01em;
  font-weight: 900;
}

.services-page-rows {
  border-top: 1px solid var(--gray-200);
}

.services-page-row {
  display: grid;
  grid-template-columns: minmax(240px, 26%) 1fr 160px;
  align-items: center;
  gap: 2.5rem;
  padding: 2rem 1.5rem;          /* baseline padding lets the hover bg breathe */
  margin: 0 -1.5rem;             /* extend hover background past the container */
  border-bottom: 1px solid var(--gray-200);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  transition: background .2s ease-out, box-shadow .25s ease-out, transform .2s ease-out;
}
.services-page-row:hover {
  background: var(--pink-50);                              /* was blue-50 */
  box-shadow: 0 10px 30px rgba(219,39,119,.12);            /* subtle outward pop */
  transform: translateY(-1px);
  border-bottom-color: transparent;
}
.services-page-row-title {
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -.005em;
  line-height: .95;
  color: var(--blue-900);
  margin: 0;
  transition: color .2s;
}
.services-page-row:hover .services-page-row-title { color: #7c45cf; }

.services-page-row-desc {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray-700);
  margin: 0;
}

.services-page-row-thumb {
  width: 140px;
  height: 140px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  background: var(--gray-100);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  justify-self: end;
}
.services-page-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease-out;
}
.services-page-row:hover .services-page-row-thumb img { transform: scale(1.06); }

.services-page-cta-eyebrow {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #7c45cf;
  margin-bottom: .5rem;
}
.services-page-cta-title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 800;
  color: var(--blue-900);
  margin: 0;
}

/* Mobile: stack title above description, thumb on the right */
@media (max-width: 720px) {
  .services-page-row {
    grid-template-columns: 1fr 96px;
    grid-template-rows: auto auto;
    gap: 1rem 1rem;
    padding: 1.25rem 1rem;
    margin: 0 -1rem;
  }
  .services-page-row-title {
    grid-column: 1;
    grid-row: 1;
    font-size: 1.5rem;
  }
  .services-page-row-desc {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: .9rem;
  }
  .services-page-row-thumb {
    grid-column: 2;
    grid-row: 1;
    width: 96px;
    height: 96px;
  }
}

/* =========================================================================
   ============  SQUEEGEECO — PINK'S-STYLE BRAND OVERRIDES  ================
   Retro-athletic look: cream backgrounds, navy ink, lavender/purple accent.
   Layered at the end so it wins over earlier rules without editing each one.
   ========================================================================= */

/* ---- Navigation: cream bar, navy ink, purple pill ---- */
.nav-main { background: var(--cream); border-bottom: 2px solid var(--cream-300); }
body.has-video-hero .nav.scrolled,
.nav.scrolled .nav-main { background: var(--cream); }
.nav.scrolled { box-shadow: 0 6px 20px rgba(63, 32, 105, .14); }
.nav-logo img { height: 50px; }
@media (max-width: 1024px){ .nav-logo img { height: 42px; } }

.nav-link, .nav-dropdown-trigger {
  color: var(--navy-800);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .82rem;
}
.nav-link:hover, .nav-link.active,
.nav-dropdown-trigger:hover, .nav-dropdown:hover .nav-dropdown-trigger { color: var(--purple-600); }
.nav-phone-inline { color: var(--navy-800); font-weight: 800; letter-spacing: .04em; }
.nav-phone-inline:hover { color: var(--purple-600); }
.nav-client-login { color: var(--navy-800); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.nav-client-login:hover { color: var(--purple-600); }

.nav-cta-pill {
  background: var(--lavender);
  color: var(--navy-900);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  border: 2px solid var(--navy-900);
  border-radius: var(--radius-full);
  box-shadow: 3px 3px 0 var(--navy-900);
}
.nav-cta-pill:hover { background: var(--purple-600); color: #fff; transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--navy-900); }

.nav-dropdown-menu a { color: var(--navy-800); font-weight: 700; }
.nav-dropdown-menu a:hover { background: var(--lavender); color: var(--navy-900); }
.nav-dropdown-inner { background: var(--cream); border: 2px solid var(--cream-300); }

/* ---- Section eyebrow: purple pill ---- */
.section-eyebrow {
  background: var(--lavender);
  color: var(--purple-800);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

/* ---- Buttons: retro hard-shadow blocks ---- */
.btn { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.btn-primary {
  background: var(--navy-800); color: #fff;
  border: 2px solid var(--navy-900);
  box-shadow: 3px 3px 0 rgba(16,35,56,.35);
}
.btn-primary:hover { background: var(--purple-600); box-shadow: 4px 4px 0 rgba(16,35,56,.45); transform: translate(-1px,-1px); }
.btn-secondary { background: var(--lavender); color: var(--navy-900); border: 2px solid var(--navy-900); box-shadow: 3px 3px 0 rgba(16,35,56,.30); }
.btn-secondary:hover { background: #fff; transform: translate(-1px,-1px); }
.btn-outline-blue { border: 2px solid var(--navy-900) !important; color: var(--navy-900) !important; }
.btn-outline-blue:hover { background: var(--navy-900) !important; color: #fff !important; }

/* ---- Footer: navy ---- */
.footer { background: var(--navy-900); color: var(--cream); border-top: 4px solid var(--purple-600); }
.footer-copy { border-top-color: rgba(255,255,255,.12); }
.footer-copy-line, .footer-copy a, .footer-site-by { color: rgba(255,255,255,.72); }
.footer-copy a:hover { color: #fff; }
.footer-social a { color: var(--cream); }
.footer-social a.ig:hover, .footer-social a.gg:hover { color: var(--lavender); }
.footer-logo img { height: 54px; filter: none; }

/* ---- Dark testimonial / review band -> navy ---- */
.reviews-section.reviews-dark, .cta-blue { background: var(--navy-800) !important; }

/* =========================================================================
   New Pink's-style homepage components
   ========================================================================= */

/* Two-column intro: "CLEAN IT LIKE YOU MEAN IT" */
.sq-intro { background: var(--white); padding: 6rem 0; }
.sq-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.sq-intro-photo { position: relative; border-radius: var(--radius-2xl); overflow: hidden; border: 3px solid var(--navy-900); box-shadow: 8px 8px 0 var(--lavender); }
.sq-intro-photo img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; }
.sq-intro h2 { color: var(--purple-600); margin-bottom: 1.5rem; }
.sq-intro p { color: var(--gray-700); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1rem; }
@media (max-width: 860px){ .sq-intro-grid { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Feature grid with icons (Quick quotes / insured / reliable / respect) */
.sq-features { background: var(--cream); padding: 5rem 0; }
.sq-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; max-width: 1000px; margin: 0 auto; }
.sq-feature { display: block; }
.sq-feature-icon { width: 48px; height: 48px; color: var(--navy-800); margin-bottom: 1rem; }
.sq-feature-icon svg { width: 100%; height: 100%; }
.sq-feature h3 { font-family: "Anton", sans-serif; text-transform: uppercase; letter-spacing: .02em; font-size: 1.4rem; color: var(--navy-900); margin-bottom: .5rem; font-weight: 400; }
.sq-feature p { color: var(--gray-700); line-height: 1.6; font-size: .98rem; }
@media (max-width: 700px){ .sq-feature-grid { grid-template-columns: 1fr; gap: 2.25rem; } }

/* "Lost art" full-bleed image band with overlay text + buttons */
.sq-band { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.sq-band-bg { position: absolute; inset: 0; }
.sq-band-bg img { width: 100%; height: 100%; object-fit: cover; }
.sq-band-bg::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(16,35,56,.55), rgba(63,32,105,.62)); }
.sq-band-inner { position: relative; z-index: 2; color: #fff; padding: 3rem 1.5rem; max-width: 820px; }
.sq-band-inner h2 { color: #fff; margin-bottom: 2rem; text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.sq-band-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* Instagram-style photo grid ("Flip the script") */
.sq-ig { background: var(--cream); padding: 5rem 0; }
.sq-ig-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; flex-wrap: wrap; }
.sq-ig-head h2 { color: var(--purple-600); max-width: 18ch; }
.sq-ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .75rem; }
.sq-ig-grid .sq-ig-cell { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-lg); border: 2px solid var(--navy-900); }
.sq-ig-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.sq-ig-grid .sq-ig-cell:hover img { transform: scale(1.08); }
@media (max-width: 900px){ .sq-ig-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px){ .sq-ig-grid { grid-template-columns: repeat(2, 1fr); } }

/* "The SqueegeeCo Promise" framed badge */
.sq-promise { background: var(--cream); padding: 5rem 0 6rem; }
.sq-promise-card {
  max-width: 880px; margin: 0 auto; background: var(--white);
  border: 3px solid var(--navy-900); border-radius: var(--radius-2xl);
  padding: 3.5rem 2.5rem 3rem; text-align: center; position: relative;
  box-shadow: 10px 10px 0 var(--lavender);
}
.sq-promise-badge {
  width: 76px; height: 76px; border-radius: var(--radius-full);
  background: var(--navy-800); color: var(--lavender);
  display: flex; align-items: center; justify-content: center;
  margin: -3.9rem auto 1.25rem; border: 3px solid var(--navy-900);
}
.sq-promise-badge svg { width: 40px; height: 40px; }
.sq-promise h2 { color: var(--navy-900); margin-bottom: .5rem; }
.sq-promise-sub { color: var(--gray-600); font-weight: 600; margin-bottom: 2.5rem; }
.sq-promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.sq-promise-item .sq-promise-no { font-family: "Anton", sans-serif; font-size: 2.4rem; color: var(--purple-600); line-height: 1; }
.sq-promise-item .sq-promise-dot { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--lavender); color: var(--purple-800); display:flex; align-items:center; justify-content:center; margin: 0 auto .75rem; }
.sq-promise-item h3 { font-size: 1rem; color: var(--navy-900); margin: .4rem 0; font-weight: 800; }
.sq-promise-item p { color: var(--gray-600); font-size: .92rem; line-height: 1.5; }
@media (max-width: 700px){ .sq-promise-grid { grid-template-columns: 1fr; gap: 2.25rem; } }

/* Big footer-ish CTA word band */
.sq-cta-band { background: var(--navy-900); color: #fff; padding: 5rem 0; }
.sq-cta-band h2 { color: #fff; font-size: clamp(2.5rem, 8vw, 6rem); }
.sq-cta-band p { color: var(--lavender); font-weight: 700; }

/* subtle halftone texture utility */
.sq-dots { background-image: radial-gradient(var(--cream-300) 1.4px, transparent 1.4px); background-size: 18px 18px; }