/* ==========================================================================
   Elite Christmas Lights — Fort Wayne, IN
   Master template for the contractor website service.
   CLONE NOTE: every per-client visual decision lives in :root tokens below.
   Structure follows the Elite banded design system (alternating dark/light
   full-width bands, Montserrat 800 headings, one accent word per heading).
   ========================================================================== */

:root {
  /* Brand tokens (per-client) */
  --navy-deep: #10294a;      /* dusk navy: dark bands + footer (blue, never black) */
  --navy: #16355c;           /* secondary dark band */
  --navy-text: #12263a;      /* headings/body on light bands */
  --ice: #9be1ff;            /* accent word in headings, matches logo ELITE */
  --ice-bright: #4cc9f0;
  --red: #d21f2c;            /* primary CTA, matches logo ribbon */
  --red-dark: #a81823;
  --green: #1e7a46;          /* secondary accent */
  --gold: #ffc94a;           /* bulb glow, stars, highlights */
  --cream: #fdfbf7;          /* light band */
  --gray-band: #f2f5f8;      /* alt light band */
  --white: #ffffff;

  --font-display: "Montserrat", "Arial Black", sans-serif;
  --font-body: "Montserrat", -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --shadow: 0 10px 30px rgba(10, 27, 46, 0.18);
  --maxw: 1180px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--navy-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px;
}

/* Mobile overflow guards: grid/flex children may not force the layout wider
   than the viewport (native selects with long options are the usual culprit) */
.hero-inner > *, .intro-grid > *, .price-grid > *,
.footer-grid > *, .quote-band > * { min-width: 0; }
.quote-card select { max-width: 100%; }
body { overflow-x: hidden; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.12;
  margin: 0 0 0.5em;
}

h1 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); text-transform: uppercase; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

.accent-ice { color: var(--ice-bright); }
.accent-gold { color: var(--gold); }
.accent-red { color: var(--red); }

.kicker {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 2.5px;
  margin-bottom: 10px;
}

/* Dark band heading colors */
.band-dark h2, .band-dark h3,
.band-navy h2, .band-navy h3 { color: var(--white); }
.band-dark p, .band-dark li,
.band-navy p, .band-navy li { color: rgba(255, 255, 255, 0.88); }
.band-dark .kicker, .band-navy .kicker { color: var(--gold); }

/* Light band */
.band-light h2, .band-light h3,
.band-gray h2, .band-gray h3 { color: var(--navy-text); }
.band-light .kicker, .band-gray .kicker { color: var(--red); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  padding: 15px 30px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:active { transform: scale(0.97); }

.btn-red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red-dark);
  box-shadow: 0 6px 18px rgba(210, 31, 44, 0.35);
}
.btn-red:hover { background: var(--red-dark); }

.btn-ghost {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.55);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn-ice {
  background: var(--ice-bright);
  color: var(--navy-deep);
  border-color: var(--navy-deep);
}
.btn-ice:hover { background: var(--ice); }

.btn-block { display: block; width: 100%; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--navy-deep);
  border-bottom: 1px solid rgba(155, 225, 255, 0.15);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 22px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.logo-link { flex-shrink: 0; }
.logo-link img { width: 92px; height: 78px; }

.main-nav { margin-left: auto; }

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.main-nav a:hover { color: var(--ice); border-color: var(--ice); }

/* About dropdown */
.main-nav li { position: relative; }
.has-dropdown > a::after {
  content: " \25BE";
  font-size: 0.7em;
  opacity: 0.7;
}
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-deep);
  border: 1px solid rgba(155, 225, 255, 0.22);
  border-radius: 10px;
  padding: 8px 0;
  min-width: 210px;
  list-style: none;
  margin: 0;
  z-index: 80;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.dropdown::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px; /* hover bridge between trigger and menu */
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown { display: block; }
.dropdown a {
  display: block;
  padding: 9px 18px;
  font-size: 0.9rem;
  border-bottom: none;
  white-space: nowrap;
}

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 10px;
  border: 2px solid var(--red-dark);
  white-space: nowrap;
}
.header-phone:hover { background: var(--red-dark); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: var(--white);
  font-size: 1.4rem;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Dusk navy, not black: blue lift up top, warm amber "house glow" low.
     TODO(PHOTOS): this gradient is a STAND-IN. Final hero = Brandon's best
     night install photo. When it arrives:
       1. Export WebP at 1600w + 2000w, under 150KB each (image SOP)
       2. Save as assets/img/hero-fort-wayne-install-1600.webp (+2000)
       3. Add class="has-photo" to the <section class="hero"> tag
       4. Add <link rel="preload" as="image" href="..."> in <head> (LCP) */
  background:
    radial-gradient(ellipse 95% 65% at 70% -10%, #27527e 0%, transparent 58%),
    radial-gradient(ellipse 70% 45% at 12% 108%, rgba(255, 176, 66, 0.28) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 88% 102%, rgba(255, 143, 84, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, #0d2035 0%, #133154 55%, #16395f 100%);
  color: var(--white);
  overflow: hidden;
}

/* Photo hero: navy overlay keeps text readable, photo carries the magic */
.hero.has-photo {
  background:
    linear-gradient(100deg, rgba(13, 32, 53, 0.93) 0%, rgba(13, 32, 53, 0.78) 42%, rgba(13, 32, 53, 0.38) 100%),
    url("../assets/img/hero-fort-wayne-install-1600.webp") center 30% / cover no-repeat,
    #10294a;
}
@media (max-width: 749px) {
  /* Lighter overlay on mobile so the install photo actually reads as a house.
     Text sits in the darker top band; the white form card is readable anywhere. */
  .hero.has-photo {
    background:
      linear-gradient(180deg, rgba(13, 32, 53, 0.9) 0%, rgba(13, 32, 53, 0.72) 38%, rgba(13, 32, 53, 0.42) 70%, rgba(13, 32, 53, 0.55) 100%),
      url("../assets/img/hero-fort-wayne-install-800.webp") center 35% / cover no-repeat,
      #10294a;
  }
}

/* Real photos in gallery tiles */
.gallery-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-tile .tile-label { position: relative; z-index: 1; }

.hero-lights {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
  padding: 88px 22px 64px;
  max-width: var(--maxw);
  margin: 0 auto;
}

/* Homepage hero: named areas so mobile can put the FORM right after the
   headline (form-at-top converts; Jason's rule) while desktop keeps the
   two-column layout with the form beside all the copy. */
.hero-grid {
  grid-template-areas:
    "head form"
    "extras form";
  grid-template-rows: auto 1fr;
  row-gap: 0;
  align-items: start;
}
.hero-grid .hero-head { grid-area: head; align-self: end; }
.hero-grid .quote-card { grid-area: form; }
.hero-grid .hero-extras { grid-area: extras; }

.hero h1 { color: var(--white); margin-bottom: 14px; }
.hero h1 .accent-ice { color: var(--ice); }

.hero-sub {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 22px;
  max-width: 34em;
}

.hero-bullets {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.hero-bullets li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}

.hero-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(255, 201, 74, 0.8);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.6 11.6 3.4 8.4l1.2-1.2 2 2 4.8-4.8 1.2 1.2z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.6 11.6 3.4 8.4l1.2-1.2 2 2 4.8-4.8 1.2 1.2z"/></svg>') center/contain no-repeat;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Homepage desktop: the quote form is beside the hero copy, so the
   "Get My Free Quote" anchor button is redundant there. It stays on mobile
   (form is below the fold) and on sub-page heroes (no adjacent form). */
@media (min-width: 981px) {
  .hero:not(.page-hero) .hero-ctas .btn-ghost { display: none; }
}

.hero-note {
  margin-top: 14px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.65);
}

/* Quote form card */
.quote-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 4px rgba(155, 225, 255, 0.14);
  padding: 28px 26px 24px;
  color: var(--navy-text);
}

.quote-card h2 {
  font-size: 1.3rem;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 4px;
  color: var(--navy-text);
}

.quote-card .quote-sub {
  font-size: 0.9rem;
  color: #5b7085;
  margin-bottom: 16px;
}

.quote-card label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 4px;
}

.quote-card input,
.quote-card select,
.quote-card textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  border: 1.5px solid #c9d6e2;
  border-radius: 8px;
  background: #fbfdff;
}

.quote-card textarea { resize: vertical; min-height: 58px; max-width: 100%; }

.quote-card input:focus,
.quote-card select:focus,
.quote-card textarea:focus {
  outline: 2px solid var(--ice-bright);
  border-color: var(--ice-bright);
}

.quote-card .btn { margin-top: 18px; }

/* A2P consent block */
.consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
}
.consent-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--red);
}
.consent-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy-text);
  cursor: pointer;
}
.consent-fine {
  font-size: 0.67rem;
  line-height: 1.45;
  color: #93a3b2;
  margin: 6px 0 0;
}
.consent-fine a { color: #93a3b2; text-decoration: underline; }

.quote-card .quote-privacy {
  font-size: 0.75rem;
  color: #8a9bab;
  margin: 10px 0 0;
  text-align: center;
}

/* Answer-first block: the direct answer AI engines can lift */
.quick-answer {
  background: #f2f7fb;
  border-left: 4px solid var(--ice-bright);
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.quick-answer p { margin: 0; font-size: 0.98rem; }
.quick-answer strong { color: var(--navy-text); }

/* Sub-page hero: single column, no form card */
.page-hero .hero-inner {
  grid-template-columns: 1fr;
  max-width: 940px;
  padding: 72px 22px 60px;
}
.page-hero h1 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }

/* Centered quote form band on sub-pages */
.quote-band { display: flex; justify-content: center; }
.quote-band .quote-card { width: 100%; max-width: 540px; }

/* 4-up card row (pricing tiers) */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
@media (max-width: 980px) { .cards-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .cards-4 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
.trust-bar { background: var(--navy); }

.trust-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 18px 22px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.trust-item svg { flex-shrink: 0; }

/* --------------------------------------------------------------------------
   Bands
   -------------------------------------------------------------------------- */
.band { padding: 72px 0; }
.band-light { background: var(--white); }
.band-gray { background: var(--gray-band); }
.band-dark { background: var(--navy-deep); }
.band-navy { background: var(--navy); }

.band-head { text-align: center; max-width: 760px; margin: 0 auto 44px; }

/* Intro */
.intro-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 48px;
  align-items: center;
}

.intro-links { margin-top: 8px; }

.intro-links a {
  color: var(--red);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Service cards
   -------------------------------------------------------------------------- */
.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.svc-card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--navy-text);
  transition: transform 0.18s ease;
}

.svc-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 2px 4px   rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 56px rgba(0, 0, 0, 0.14);
}
.review-card {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.review-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow:
    0 2px 4px   rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(0, 0, 0, 0.10),
    0 32px 56px rgba(0, 0, 0, 0.14);
}
@media (prefers-reduced-motion: reduce) {
  .svc-card:hover, .review-card:hover { transform: none; }
}

.svc-card-img {
  aspect-ratio: 3 / 2;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #14304d, #0a1b2e);
}
.svc-card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-card-body { padding: 22px 24px 26px; }
/* White cards keep navy text even inside dark bands */
.band-navy .svc-card-body h3, .band-dark .svc-card-body h3,
.svc-card-body h3 { margin-bottom: 8px; text-transform: uppercase; color: var(--navy-text); }
.band-navy .svc-card-body p, .band-dark .svc-card-body p,
.svc-card-body p { font-size: 0.95rem; margin-bottom: 14px; color: #43596d; }

.svc-card-link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--red);
}

/* --------------------------------------------------------------------------
   Process steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  counter-reset: step;
}

.step {
  text-align: center;
  padding: 30px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(155, 225, 255, 0.18);
  border-radius: var(--radius);
}

/* Steps on light bands: white cards, navy text */
.band-light .step, .band-gray .step {
  background: var(--white);
  border: 1px solid #e3eaf1;
  box-shadow: var(--shadow);
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 14px;
  box-shadow: 0 0 22px rgba(255, 201, 74, 0.45);
}

.step h3 { text-transform: uppercase; }
.step p { font-size: 0.92rem; margin: 0; }

/* --------------------------------------------------------------------------
   Pricing anchor band
   -------------------------------------------------------------------------- */
.price-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
}

.price-points { list-style: none; padding: 0; margin: 0 0 24px; }

.price-points li {
  position: relative;
  padding: 10px 0 10px 34px;
  border-bottom: 1px solid #e3eaf1;
  font-weight: 600;
}

.price-points li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--green);
  font-weight: 800;
}

.price-callout {
  background: var(--navy-deep);
  color: var(--white);
  border-radius: var(--radius);
  padding: 36px 34px;
  text-align: center;
  box-shadow: var(--shadow);
}

.price-callout .big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.1rem;
  color: var(--gold);
  display: block;
  margin: 6px 0 4px;
}

.price-callout p { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-tile {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 201, 74, 0.25), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(76, 201, 240, 0.2), transparent 45%),
    radial-gradient(circle at 55% 80%, rgba(210, 31, 44, 0.22), transparent 45%),
    linear-gradient(160deg, #12283f, #0a1b2e);
}

.gallery-tile .tile-label {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  background: linear-gradient(transparent, rgba(8, 18, 30, 0.85));
}

.gallery-tile .tile-bulbs {
  position: absolute;
  top: 12px;
  left: 0;
  width: 100%;
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.review-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 28px 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.review-stars {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 3px;
  margin-bottom: 12px;
}

.review-card blockquote {
  margin: 0 0 16px;
  font-size: 0.97rem;
  flex-grow: 1;
}

.review-meta { font-weight: 700; font-size: 0.88rem; }
.review-meta .review-city { color: var(--red); }

.review-source {
  text-align: center;
  margin-top: 30px;
  font-size: 0.92rem;
  color: #5b7085;
}

/* --------------------------------------------------------------------------
   Service areas
   -------------------------------------------------------------------------- */
.city-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.city-link {
  display: block;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(155, 225, 255, 0.2);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--white);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s;
}

.city-link:hover { background: rgba(76, 201, 240, 0.15); border-color: var(--ice-bright); }

.city-link .zip {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
}

.city-more {
  margin-top: 22px;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* --------------------------------------------------------------------------
   Loyalty band
   -------------------------------------------------------------------------- */
.loyalty {
  background: linear-gradient(120deg, var(--red) 0%, var(--red-dark) 100%);
  color: var(--white);
}

.loyalty-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 44px 22px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.loyalty h2 { color: var(--white); margin: 0 0 6px; font-size: 1.5rem; }
.loyalty p { margin: 0; color: rgba(255, 255, 255, 0.92); }

.loyalty .btn-ice { border-color: transparent; }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-list { max-width: 820px; margin: 0 auto; }

.faq-item {
  border: 1.5px solid #dde6ee;
  border-radius: 10px;
  margin-bottom: 12px;
  background: var(--white);
  overflow: hidden;
}

.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  font: inherit;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 1rem;
  text-align: left;
  color: var(--navy-text);
  padding: 18px 22px;
  cursor: pointer;
}

.faq-q::after {
  content: "+";
  font-size: 1.5rem;
  color: var(--red);
  transition: transform 0.2s;
  flex-shrink: 0;
}

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

.faq-a {
  display: none;
  padding: 0 22px 20px;
  font-size: 0.97rem;
}

.faq-item.open .faq-a { display: block; }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.final-cta { text-align: center; }
.final-cta h2 { max-width: 700px; margin-left: auto; margin-right: auto; }
.final-cta .hero-ctas { justify-content: center; margin-top: 28px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: #0b1f3a;
  color: rgba(255, 255, 255, 0.8);
  padding: 56px 0 110px; /* bottom padding clears sticky call button */
  font-size: 0.92rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1.3fr;
  gap: 40px;
}

.site-footer h3 {
  color: var(--white);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }

.site-footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; }
.site-footer a:hover { color: var(--ice); }

.footer-logo img { width: 130px; height: auto; margin-bottom: 14px; }

.footer-cities { line-height: 1.9; }

.footer-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 44px;
  padding-top: 22px;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.45);
}

/* --------------------------------------------------------------------------
   Sticky mobile call button
   -------------------------------------------------------------------------- */
.sticky-call {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 70;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  padding: 16px 10px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }
  /* Mobile order: headline, FORM, then bullets/CTAs */
  .hero-grid {
    grid-template-areas:
      "head"
      "form"
      "extras";
    grid-template-rows: auto auto auto;
    row-gap: 28px;
  }
  .cards-3, .review-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .city-grid { grid-template-columns: 1fr 1fr 1fr; }
  .intro-grid, .price-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-inner { grid-template-columns: 1fr 1fr; gap: 16px; }

  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--navy-deep);
    border-bottom: 1px solid rgba(155, 225, 255, 0.2);
    padding: 10px 22px 20px;
  }
  .main-nav.open { display: block; }
  .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .main-nav a { display: block; padding: 10px 0; font-size: 1.05rem; }
  /* Mobile: flatten the dropdown into the menu, indented */
  .dropdown {
    display: block;
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0 0 0 16px;
    min-width: 0;
  }
  .dropdown::before { display: none; }
  .has-dropdown > a::after { content: ""; }
  .dropdown a { font-size: 0.95rem; padding: 8px 0; color: rgba(255, 255, 255, 0.75); }
  .nav-toggle { display: block; }
  .header-phone { margin-left: 0; }
}

@media (max-width: 640px) {
  .cards-3, .review-grid, .steps { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .band { padding: 52px 0; }
  .header-phone span.phone-label { display: none; }
  .sticky-call { display: block; }
  .hero-inner { padding-top: 42px; padding-bottom: 42px; }
  .loyalty-inner { text-align: center; justify-content: center; }
}

/* ==========================================================================
   Web Dazzle (Spanky's library) — approved placement map 2026-07-13:
   Scroll Reveal + Count-Up + Card Lift + one Pulse Ring (form submit).
   Local/warm personality: no Trail Glow, no Tilt. All reduced-motion safe.
   ========================================================================== */
.dz-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-delay: var(--dz-delay, 0s);
}
.dz-reveal.dz-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .dz-reveal { opacity: 1; transform: none; transition: none; }
}

/* Pulse Ring: form submit only (one attention-drawer per viewport).
   Button sits on a WHITE card: brand red at 0.35 alpha per contrast rule. */
.quote-card .btn-block { position: relative; }
.quote-card .btn-block::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(210, 31, 44, 0.35);
  animation: dz-pulse 2.8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes dz-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(210, 31, 44, 0.35); }
  55%  { box-shadow: 0 0 0 14px rgba(0, 0, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) { .quote-card .btn-block::after { animation: none; } }