/* ============================================================
   STL Christmas Lights — saintlouischristmaslights.com
   Theme: classic — deep evergreen, cranberry, warm gold, cream
   Type: Cormorant Garamond (heads) + Source Sans 3 (body)
   ============================================================ */

:root {
  --ever: #12321F;        /* deepest evergreen */
  --pine: #1B3A2A;        /* panel green */
  --pine-line: #2E523F;
  --cran: #A3222C;        /* cranberry */
  --cran-deep: #7E1A22;
  --gold: #C9A227;
  --gold-bright: #E3B341;
  --gold-ink: #7F6318;    /* gold dark enough for text on cream */
  --cream: #F6F1E3;
  --cream-card: #FDFAF1;
  --parchment: #EDE6D2;
  --ink: #26332B;
  --ink-soft: #51604F;
  --line: #D8CFB4;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --shadow: 0 10px 30px rgba(18, 50, 31, 0.18);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-padding-top: 92px;
}
/* Smooth scrolling only for user-initiated anchor jumps (focus moves),
   so scripted/measured scrolls stay instant. Off under reduced motion. */
html:focus-within {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
}

body {
  font-family: var(--sans);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  color: var(--ever);
}

p + p { margin-top: 1em; }

a { color: var(--cran); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cran-deep); }
a[href^="tel"] { white-space: nowrap; }

:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(18, 50, 31, 0.45);
  border-radius: 3px;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  padding: 15px 26px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn-call {
  background: var(--cran);
  color: #FFF6E8;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow: 0 6px 18px rgba(126, 26, 34, 0.38);
  white-space: nowrap;
}
.btn-call:hover { background: var(--cran-deep); color: #FFF6E8; }

.btn-jump {
  background: var(--gold-bright);
  color: #241B04;
  border-color: rgba(0, 0, 0, 0.2);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.btn-jump:hover { background: #EFC35A; color: #241B04; }

.btn-submit {
  width: 100%;
  background: var(--cran);
  color: #FFF6E8;
  font-size: 1.12rem;
  padding: 16px 26px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(126, 26, 34, 0.32);
}
.btn-submit:hover { background: var(--cran-deep); }
.btn-submit[disabled] { opacity: 0.65; cursor: wait; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(246, 241, 227, 0.97);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(201, 162, 39, 0.35), 0 4px 18px rgba(18, 50, 31, 0.08);
}
/* Vintage ribbon stripe along the very top — wrapping-paper edge */
.site-header::before {
  content: "";
  display: block;
  height: 5px;
  background: repeating-linear-gradient(
    135deg,
    var(--cran) 0 18px,
    var(--gold) 18px 24px,
    var(--ever) 24px 42px,
    var(--gold) 42px 48px
  );
}
.hc-short { display: none; }
.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 74px;
  padding: 8px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ever);
  min-width: 0;
}
.brand svg { flex: 0 0 auto; }
.brand-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ever);
  white-space: nowrap;
}
.brand-tag {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 4px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-left: auto;
}
.site-nav a {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ever);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding: 4px 0;
}
.site-nav a:hover { border-bottom-color: var(--gold); color: var(--ever); }
.header-call {
  margin-left: auto;
  padding: 12px 20px;
  font-size: 1rem;
}
.site-nav + .header-call { margin-left: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--cream);
  overflow: hidden;
  background: var(--ever);
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Tuned for the real night photograph — dark enough for white text, light
     enough that the house and its lights still read through. */
  background:
    linear-gradient(180deg, rgba(10, 27, 17, 0.70) 0%, rgba(13, 35, 22, 0.30) 45%, rgba(9, 25, 16, 0.80) 100%),
    linear-gradient(95deg, rgba(8, 22, 14, 0.62) 0%, rgba(9, 25, 16, 0.30) 52%, rgba(9, 25, 16, 0.10) 100%);
}
.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
  padding: 64px 24px 72px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 18px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hero h1 {
  font-size: clamp(2.4rem, 3.6vw, 3.5rem);
  color: #FBF6E8;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero-sub {
  font-size: 1.14rem;
  max-width: 34rem;
  color: #EFE7D2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 26px 0 10px;
}
.hero-proof {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 16px;
  padding: 0;
  font-size: 0.96rem;
  font-weight: 600;
  color: #F0E8D3;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
}
.hero-proof li { display: flex; align-items: center; gap: 8px; }
.hero-proof svg { flex: 0 0 auto; }

/* ---------- Form card ---------- */
.form-card {
  background: var(--cream-card);
  border: 1px solid var(--gold);
  outline: 4px solid rgba(18, 50, 31, 0.55);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  padding: 32px 26px 24px;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
/* Candy-ribbon top edge — same stripe as the site header, pointing at the form */
.form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(
    135deg,
    var(--cran) 0 18px,
    var(--gold) 18px 24px,
    var(--ever) 24px 42px,
    var(--gold) 42px 48px
  );
}
.form-card-head { text-align: center; margin-bottom: 18px; }
.form-card-head h2 {
  font-size: 1.9rem;
  color: var(--ever);
}
.form-card-head .form-lede {
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-top: 6px;
}
.form-rule {
  width: 74px;
  height: 3px;
  margin: 12px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border: none;
}
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.f-field { margin-bottom: 13px; }
.f-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pine);
  margin-bottom: 5px;
}
.f-field input,
.f-field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #FFFEF8;
  border: 1px solid #C7BC9C;
  border-radius: 6px;
  padding: 11px 12px;
}
.f-field input:focus,
.f-field textarea:focus {
  border-color: var(--gold-ink);
  outline: 2px solid var(--gold-bright);
  outline-offset: 1px;
  box-shadow: none;
}
.f-field textarea { resize: vertical; min-height: 66px; }
.f-field.has-error input,
.f-field.has-error textarea { border-color: var(--cran); background: #FFF6F4; }
.f-err {
  display: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--cran-deep);
  margin-top: 4px;
}
.f-field.has-error .f-err { display: block; }
.form-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 10px;
}
.hp-wrap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Success state */
.form-success { text-align: center; padding: 12px 4px 6px; }
.form-success h3 {
  font-size: 1.85rem;
  color: var(--ever);
  margin-bottom: 10px;
}
.form-success p { color: var(--ink-soft); }
.success-call {
  display: block;
  margin: 20px auto 8px;
  max-width: 320px;
  background: var(--cran);
  color: #FFF6E8;
  font-size: 1.22rem;
  font-weight: 700;
  text-decoration: none;
  padding: 18px 22px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(126, 26, 34, 0.35);
}
.success-call:hover { background: var(--cran-deep); color: #FFF6E8; }
.success-wreath { margin: 0 auto 10px; display: block; }

/* ---------- Garland divider (signature element) ---------- */
.garland {
  line-height: 0;
  overflow: hidden;
  background: transparent;
}
.garland svg {
  width: 100%;
  height: 64px;
  display: block;
}
.garland .wire { stroke: rgba(140, 109, 26, 0.6); stroke-width: 2; fill: none; }
.garland--ondark .wire { stroke: rgba(227, 179, 65, 0.5); }
.gb .halo { opacity: 0.3; }
.gb .stem { stroke: rgba(140, 109, 26, 0.85); stroke-width: 1.6; }
.c-gold { fill: #E3B341; }
.c-warm { fill: #F5E7B4; }
.c-red  { fill: #B3313B; }
.gb { animation: twinkle 4.4s ease-in-out infinite; }
.gb:nth-of-type(5n + 1) { animation-duration: 3.4s; animation-delay: 0.2s; }
.gb:nth-of-type(5n + 2) { animation-duration: 5.1s; animation-delay: 1.3s; }
.gb:nth-of-type(5n + 3) { animation-duration: 4.0s; animation-delay: 2.1s; }
.gb:nth-of-type(5n + 4) { animation-duration: 5.6s; animation-delay: 0.8s; }
.gb:nth-of-type(5n + 5) { animation-duration: 4.7s; animation-delay: 2.9s; }
@keyframes twinkle {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gb { animation: none; opacity: 0.9; }
}

/* ---------- Section scaffolding ---------- */
.section { padding: 72px 0; }
.section--tight { padding: 56px 0; }
.section--parchment { background: var(--parchment); }
.section--pine { background: var(--pine); color: #EFE8D4; }
.section--pine h2, .section--pine h3 { color: #F8F2E2; }

.sec-head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.sec-head .eyebrow { color: var(--gold-ink); text-shadow: none; margin-bottom: 10px; }
.section--pine .sec-head .eyebrow { color: var(--gold-bright); }
.sec-head h2 {
  font-size: clamp(1.9rem, 2.8vw, 2.6rem);
  text-wrap: balance;
}
.sec-head .sec-sub { color: var(--ink-soft); margin-top: 12px; font-size: 1.05rem; }
.section--pine .sec-head .sec-sub { color: #D9D2BC; }
.sec-flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
  color: var(--gold-ink);
}
.sec-flourish::before,
.sec-flourish::after {
  content: "";
  height: 1px;
  width: 64px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.sec-flourish::after { background: linear-gradient(270deg, transparent, var(--gold)); }
.section--pine .sec-flourish { color: var(--gold-bright); }

/* ---------- Welcome / intro ---------- */
.welcome-inner { max-width: 66ch; margin: 0 auto; text-align: left; }
.welcome-inner .lead-para::first-letter {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 3.6em;
  float: left;
  line-height: 0.82;
  padding: 4px 10px 0 0;
  color: var(--cran);
}
.welcome-sig {
  margin-top: 22px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--pine);
}

/* ---------- Services ---------- */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.svc-card {
  grid-column: span 2;
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
  padding: 26px 24px 24px;
  box-shadow: 0 6px 20px rgba(18, 50, 31, 0.08);
}
.svc-card:nth-child(4), .svc-card:nth-child(5) { grid-column: span 3; }
.svc-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  color: var(--gold-ink);
  margin-bottom: 8px;
}
.svc-card h3 { font-size: 1.5rem; margin-bottom: 10px; }
.svc-card p { font-size: 0.99rem; color: var(--ink-soft); }

/* ---------- How it works ---------- */
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.how-step { position: relative; padding-top: 8px; }
.how-num {
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold-bright);
  margin-bottom: 10px;
}
.how-step h3 { font-size: 1.45rem; margin-bottom: 8px; }
.how-step p { color: #D9D2BC; font-size: 0.99rem; }
.how-cta { text-align: center; margin-top: 40px; }
.how-cta .phone-inline {
  color: var(--gold-bright);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Service area ---------- */
.area-groups {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 8px;
}
.area-group h3 {
  font-size: 1.28rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.area-group ul { list-style: none; }
.area-group li { margin-bottom: 10px; }
.area-group a {
  font-weight: 700;
  color: var(--cran);
  text-decoration: none;
  border-bottom: 1px solid rgba(163, 34, 44, 0.35);
}
.area-group a:hover { color: var(--cran-deep); border-bottom-color: var(--cran-deep); }
.area-group .area-note {
  display: block;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.area-outro { text-align: center; margin-top: 34px; color: var(--ink-soft); }

/* ---------- Why us ---------- */
.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 30px;
  align-items: stretch;
}
.why-panel {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 28px;
  box-shadow: 0 6px 20px rgba(18, 50, 31, 0.08);
  position: relative;
}
.why-panel::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(201, 162, 39, 0.45);
  border-radius: 5px;
  pointer-events: none;
}
.why-panel > * { position: relative; }
.why-panel h3 { font-size: 1.6rem; margin-bottom: 14px; }
.check-list { list-style: none; }
.check-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  font-size: 1rem;
}
.check-list svg { flex: 0 0 auto; margin-top: 4px; }
.check-list strong { color: var(--ever); }
.promise-copy { color: var(--ink-soft); }
.promise-line {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--pine);
  margin-top: 16px;
}

/* ---------- Gallery ---------- */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.gal-grid figure { grid-column: span 2; margin: 0; }
.gal-grid figure:nth-child(4), .gal-grid figure:nth-child(5) { grid-column: span 3; }
.gal-grid img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 22px rgba(18, 50, 31, 0.14);
  aspect-ratio: 7 / 4;
  object-fit: cover;
}
.gal-grid figcaption {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  padding: 10px 4px 0;
}
.gal-note {
  text-align: center;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-top: 30px;
}

/* ---------- Reviews ---------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.review-card {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px 26px 24px;
  position: relative;
  box-shadow: 0 6px 20px rgba(18, 50, 31, 0.08);
}
.review-card::before {
  content: "\201C";
  font-family: var(--serif);
  font-size: 4.4rem;
  line-height: 1;
  color: var(--gold);
  position: absolute;
  top: 10px;
  left: 18px;
  opacity: 0.55;
}
.review-card blockquote {
  border: 0;
  padding-top: 26px;
  font-size: 1.02rem;
  color: var(--ink);
}
.review-who {
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.review-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 28px;
}

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 780px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.32rem;
  color: var(--ever);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--cran);
  flex: 0 0 auto;
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-a { padding: 0 4px 22px; color: var(--ink-soft); max-width: 64ch; }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after { transition: none; }
}

/* ---------- Final CTA ---------- */
.cta-final {
  position: relative;
  overflow: hidden;
  background: var(--ever);
  color: var(--cream);
  text-align: center;
}
.cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}
.cta-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 27, 17, 0.82), rgba(10, 27, 17, 0.62) 50%, rgba(10, 27, 17, 0.86));
}
.cta-inner { position: relative; padding: 84px 24px; max-width: 780px; margin: 0 auto; }
.cta-inner h2 {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  color: #FBF6E8;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  text-wrap: balance;
}
.cta-inner p {
  margin-top: 16px;
  font-size: 1.12rem;
  color: #EFE7D2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}
.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 30px;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ever);
  color: #D8D1BB;
  border-top: 3px solid var(--gold);
  font-size: 0.96rem;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  padding: 56px 24px 40px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.footer-brand .brand-name { color: #F8F2E2; font-size: 1.5rem; }
.footer-brand p { margin-top: 12px; max-width: 34ch; }
.footer-call {
  display: inline-block;
  margin-top: 16px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(227, 179, 65, 0.5);
}
.footer-call:hover { color: #F0CB6E; }
.site-footer h3 {
  color: #F8F2E2;
  font-size: 1.25rem;
  margin-bottom: 14px;
}
.footer-towns {
  list-style: none;
  columns: 2;
  column-gap: 28px;
}
.footer-towns li { margin-bottom: 8px; break-inside: avoid; }
.footer-towns a, .footer-links a {
  color: #D8D1BB;
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 209, 187, 0.3);
}
.footer-towns a:hover, .footer-links a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.footer-links { list-style: none; }
.footer-links li { margin-bottom: 8px; }
.footer-base {
  border-top: 1px solid var(--pine-line);
  text-align: center;
  padding: 20px 24px;
  font-size: 0.88rem;
  color: #A9A48E;
}

/* ---------- Town pages ---------- */
.t-hero {
  background: var(--ever);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.t-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.t-hero-inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 64px 24px 58px;
  text-align: center;
}
.t-hero .eyebrow { margin-bottom: 14px; }
.t-hero h1 {
  color: #FBF6E8;
  font-size: clamp(2.1rem, 3.4vw, 3.1rem);
  max-width: 26ch;
  margin: 0 auto 16px;
  text-wrap: balance;
}
.t-hero .t-lede {
  max-width: 58ch;
  margin: 0 auto;
  color: #E6DEC6;
  font-size: 1.1rem;
}
.t-hero .hero-cta { justify-content: center; }
.t-crumb {
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}
.t-crumb a { color: var(--gold-bright); text-decoration: none; border-bottom: 1px solid rgba(227, 179, 65, 0.4); }
.t-crumb span { color: #BDB69E; }

.prose { max-width: 68ch; margin: 0 auto; }
.prose h2 {
  font-size: 1.9rem;
  margin: 38px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose ul { margin: 14px 0 14px 2px; list-style: none; }
.prose ul li {
  padding-left: 26px;
  position: relative;
  margin-bottom: 9px;
}
.prose ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.58em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px rgba(201, 162, 39, 0.8);
}
.t-pull {
  border-left: 3px solid var(--gold);
  background: var(--cream-card);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin: 28px 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--pine);
}
.t-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 34px 0;
}
.t-fact {
  background: var(--cream-card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
  padding: 18px 18px 16px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.t-fact strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ever);
  margin-bottom: 6px;
}
.t-form-wrap { max-width: 640px; margin: 0 auto; }
.t-siblings {
  text-align: center;
  padding: 34px 24px 8px;
  font-size: 0.98rem;
  color: var(--ink-soft);
}
.t-siblings a { font-weight: 600; }

/* ---------- Small footer (town pages) ---------- */
.footer-mini {
  background: var(--ever);
  color: #D8D1BB;
  border-top: 3px solid var(--gold);
  text-align: center;
  padding: 36px 24px 30px;
  font-size: 0.95rem;
}
.footer-mini .brand-name { color: #F8F2E2; font-size: 1.3rem; }
.footer-mini p { margin-top: 10px; }
.footer-mini a { color: var(--gold-bright); }

/* ---------- Sticky mobile call bar ---------- */

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
  .svc-grid { grid-template-columns: repeat(2, 1fr); }
  .svc-card, .svc-card:nth-child(4), .svc-card:nth-child(5) { grid-column: span 1; }
  .svc-card:last-child { grid-column: span 2; }
  .area-groups { grid-template-columns: repeat(2, 1fr); }
  .gal-grid { grid-template-columns: repeat(2, 1fr); }
  .gal-grid figure, .gal-grid figure:nth-child(4), .gal-grid figure:nth-child(5) { grid-column: span 1; }
  .gal-grid figure:last-child { grid-column: span 2; }
  .review-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .why-grid { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .how-grid { grid-template-columns: 1fr; gap: 26px; max-width: 560px; margin: 0 auto; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .site-nav { display: none; }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 44px 20px 56px;
    text-align: center;
  }
  .hero-sub { margin: 0 auto; }
  .hero-cta { justify-content: center; }
  .hero-proof { justify-content: center; }
  .hero h1 { font-size: clamp(2.05rem, 8vw, 2.7rem); }
}

@media (max-width: 640px) {
  .section { padding: 54px 0; }
  .header-inner { min-height: 58px; gap: 8px; padding: 6px 12px; }
  .brand-name { font-size: 1.05rem; }
  .brand-tag { display: none; }
  .brand svg { width: 24px; height: 24px; }
  .header-call { padding: 9px 12px; font-size: 0.92rem; }
  .hc-full { display: none; }
  .hc-short { display: inline; }
  .eyebrow { font-size: 0.72rem; letter-spacing: 0.16em; }
  .f-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 22px 18px 18px; }
  .hero-cta .btn, .cta-buttons .btn { width: 100%; }
  .hero-cta { flex-direction: column; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card:last-child { grid-column: span 1; }
  .area-groups { grid-template-columns: 1fr; gap: 20px; }
  .gal-grid { grid-template-columns: 1fr; }
  .gal-grid figure:last-child { grid-column: span 1; }
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .t-facts { grid-template-columns: 1fr; }
  .garland svg { height: 48px; }
  html { scroll-padding-top: 76px; }
}


/* ---------- Complete service-area list in the footer ---------- */
.foot-all-areas { margin-top: 26px; }
.foot-all-areas h3 { margin: 0 0 12px; }
ul.all-areas {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 4 150px;
  column-gap: 26px;
}
ul.all-areas li {
  break-inside: avoid;
  margin: 0 0 7px;
  font-size: 0.9rem;
  line-height: 1.35;
}
ul.all-areas li::before { content: none; }
ul.all-areas a { text-decoration: none; }
ul.all-areas a:hover { text-decoration: underline; }
@media (max-width: 640px) { ul.all-areas { columns: 2 120px; } }


/* ==========================================================================
   Main navigation — identical on every page, with Services / Areas dropdowns
   ========================================================================== */
/* The dropdown panels live inside the header stacking context, so the header must
   out-stack the page sections below it. Do NOT set `position` here — these headers
   are sticky (fixed on Lake Ozark) and overriding that breaks them. */
.site-header, .site-head { z-index: 500; }

.site-nav, .main-nav { position: static; }

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 22px;
}
.nav-list > li { position: relative; margin: 0; padding: 0; }
.nav-list > li::before { content: none; }

/* top-level button styled to match the sibling links */
.nav-top {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  border-bottom: 2px solid transparent;
}
.nav-caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
.nav-has-menu[data-open="true"] .nav-caret { transform: rotate(180deg); }

/* the panel */
.nav-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  min-width: 260px;
  background: #fff;
  color: #1d2b23;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.nav-has-menu:hover > .nav-menu,
.nav-has-menu:focus-within > .nav-menu,
.nav-has-menu[data-open="true"] > .nav-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* keeps the pointer from falling through the gap between button and panel */
.nav-has-menu::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }

.nav-menu ul { list-style: none; margin: 0; padding: 0; }
.nav-menu li { margin: 0; }
.nav-menu li::before { content: none; }
.nav-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 7px;
  color: #1d2b23;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  border-bottom: 0;
}
.nav-menu a:hover { background: rgba(0, 0, 0, 0.06); color: #000; }
.nav-menu a[aria-current="page"] { background: rgba(0, 0, 0, 0.07); }
.nav-menu-all {
  display: block;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  color: #1d2b23;
}
.nav-menu-all:hover { text-decoration: underline; }

/* the wide areas panel */
.nav-menu-wide { min-width: min(760px, 92vw); right: auto; }
.nav-menu-wide .nav-areas { columns: 4 150px; column-gap: 18px; }
.nav-menu-wide .nav-areas li { break-inside: avoid; }
.nav-menu-wide .nav-areas a { padding: 6px 9px; font-size: 0.9rem; font-weight: 500; }

/* keep a right-hand menu from running off the viewport */
.nav-list > li:nth-last-child(-n+3) .nav-menu-wide { left: auto; right: 0; }

.nav-toggle { display: none; }

@media (max-width: 1100px) {
  .nav-list { gap: 16px; }
  .nav-menu-wide { min-width: min(620px, 92vw); }
}

/* ---------- mobile: the nav used to disappear entirely; now it opens ---------- */
@media (max-width: 1023px) {
  .site-nav, .main-nav { display: block; margin-left: auto; }
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: none;
    border: 1px solid currentColor;
    border-radius: 9px;
    color: inherit;
    cursor: pointer;
  }
  .nav-bar { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; }
  .nav-list {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    color: #1d2b23;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
    padding: 10px 16px 18px;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    z-index: 130;
  }
  .site-nav.open .nav-list, .main-nav.open .nav-list { display: flex; }
  .nav-list > li { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
  .nav-list > li:last-child { border-bottom: 0; }
  .nav-list > li > a, .nav-top {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 13px 2px;
    color: #1d2b23;
    font-size: 1.02rem;
    border-bottom: 0;
  }
  .nav-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 12px 10px;
    min-width: 0;
  }
  .nav-has-menu[data-open="true"] > .nav-menu { display: block; }
  /* on touch the panel opens by tap only, never by hover */
  .nav-has-menu:hover > .nav-menu { display: none; }
  .nav-has-menu[data-open="true"]:hover > .nav-menu { display: block; }
  .nav-menu-wide { min-width: 0; }
  .nav-menu-wide .nav-areas { columns: 2 120px; }
  .nav-has-menu::after { content: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; }
  .nav-caret { transition: none; }
}


/* ==========================================================================
   Mobile optimisation — readable minimums and comfortable tap targets
   ========================================================================== */
@media (max-width: 900px) {

  /* --- legible minimums. Small uppercase labels were down to 8px. --- */
  .site-header .brand-sub,
  .site-head .brand-sub,
  .site-header .brand-rest,
  .site-header .brand-tag,
  .site-header .logo-sub,
  .site-head .brand-word span,
  .logo .logo-sub {
    font-size: 11px;
    letter-spacing: 0.14em;
  }

  .eyebrow, .kicker, .hero-eyebrow, .hero-kicker,
  .label, .s-label, .t-crumb, .crumb {
    font-size: 12.5px;
  }

  figcaption, .figcaption,
  .form-note, .form-microcopy, .quote-sub, .hero-note,
  .gal-note, .gallery-note, .rev-note, .review-tag,
  .reviews-disclaimer, .footer-legal, .town-tag, cite {
    font-size: 13.5px;
  }

  /* a heading should never sit below body size */
  h3 { font-size: max(1rem, 15px); }

  /* --- tap targets --- */
  /* the full service-area list in the footer: two columns, each row tappable */
  ul.all-areas { columns: 2 130px; column-gap: 18px; }
  ul.all-areas li { margin: 0 0 2px; break-inside: avoid; }
  ul.all-areas a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 8px;
    line-height: 1.25;
  }

  /* breadcrumb / sibling-town rows */
  .crumbs a, .t-crumb a, .t-siblings a,
  .siblings-links a, .town-nav a, .foot-links a, .footer-towns a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding-block: 8px;
  }

  /* the header logo/brand block — give it tap height WITHOUT changing display:
     these brands stack a name over a sub-label, and forcing flex put them side by side. */
  .site-header .brand, .site-head .brand, .header-inner .logo {
    min-height: 44px;
    padding-block: 4px;
  }

  /* inline text links inside body copy get a little more room to hit */
  .prose a, .town-body a, .copy-grid a { padding-block: 2px; }
}

@media (max-width: 420px) {
  /* one column on the narrowest phones so area names never truncate */
  ul.all-areas { columns: 1; }
}

@media (max-width: 900px) {
  /* remaining footer links (quick-links lists) and the footer phone */
  footer li > a, .site-footer li > a, .site-foot li > a, .footer-mini li > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .footer-phone, .footer-tel, .foot-tel, .footer-call, .foot-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 900px) {
  /* on-page service-area lists (homepage) and any footer nav that is not a <ul> */
  .area-groups li > a,
  .chiplist li > a,
  .footer-links > a,
  .foot-links li > a,
  .t-siblings a,
  .siblings-links a,
  .quick-links li > a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .area-groups li { margin-bottom: 2px; }
}

@media (max-width: 900px) {
  /* the menu button must never be crowded out by the brand lockup */
  .nav-toggle { flex: 0 0 auto; }
  .site-header .brand, .site-head .brand, .header-inner .logo { min-width: 0; flex-shrink: 1; }
}

@media (max-width: 900px) {
  /* header call/quote buttons to a comfortable 44px tap height */
  .site-header .btn, .site-head .btn,
  .header-call, .head-quote, .header-phone, .head-tel {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ------------------------------------------------------------------
   Privacy policy / terms pages, and the legal links in every footer.
   Colours are inherited so this sits correctly on each footer ground.
   ------------------------------------------------------------------ */
.legal-wrap { max-width: 760px; margin-inline: auto; padding-block: clamp(36px, 5vw, 72px); }
.legal-wrap h1 { margin-bottom: 6px; }
.legal-wrap h2 { margin-top: 2.1em; margin-bottom: 0.5em; }
.legal-wrap p, .legal-wrap li { line-height: 1.75; }
.legal-wrap ul { margin: 0 0 20px 22px; }
.legal-wrap li { margin-bottom: 8px; }
/* Was opacity:0.7, which multiplied against the page and pushed contrast to
   ~4.0-4.6:1. An explicit muted colour keeps the visual hierarchy without
   trading away legibility. */
.legal-meta { color: var(--ink-soft); font-size: 0.95em; margin-bottom: 2em; }

.footer-legal-links {
  text-align: center;
  padding: 16px 20px 20px;
  font-size: 14px;
  line-height: 1.6;
}
.footer-legal-links a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 6px;
}
.footer-legal-links a:hover { opacity: 0.72; }
.footer-legal-links .sep { opacity: 0.5; padding-inline: 4px; }

/* Long contact addresses (hello@<long-domain>.com) are one unbroken token and
   will push the page sideways on a narrow phone unless they are allowed to wrap. */
.legal-wrap { overflow-wrap: anywhere; }
.legal-wrap a { overflow-wrap: anywhere; word-break: break-word; }

/* --- UI pass, Sept 2026 ---
   The phone link in the footer copyright bar was a 20px tap target. */
@media (max-width: 900px) {
  .btn { min-height: 44px; }
  .footer-base a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
}


/* --------------------------------------------------------------------------
   Sticky mobile contact bar
   Two thumb-sized targets pinned to the bottom on phones: call, and jump to
   the quote form. It hides itself while the form is actually on screen so it
   never sits on top of the submit button.
   -------------------------------------------------------------------------- */
.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(18, 50, 31, 0.97);
  box-shadow: 0 -8px 24px rgba(10, 26, 16, 0.30);
}
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.2;
  text-decoration: none;
}
.callbar .callbar-call { background: #A3222C; color: #FDFAF1; }
.callbar .callbar-quote { background: #F6F1E3; color: #12321F; }
.callbar a:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 700px) {
  .callbar.show { display: flex; }
  /* keep the bar from covering the last of the page */
  body.has-callbar .site-footer,
  body.has-callbar .site-foot,
  body.has-callbar .footer-mini { padding-bottom: 96px; }
}

/* On a phone the wordmark competes with the menu button and the phone button,
   and below ~360px it actually collided with them. Keep the mark, drop the
   words — the page title and the footer still carry the full name. */
@media (max-width: 560px) {
  .site-header .brand > span { display: none; }
  .site-header .brand { flex: 0 0 auto; }
}

/* An expanded Service Areas submenu runs the full height of the phone, and the
   sticky bar was sitting on top of the last couple of links. Stand it down
   while the menu is open. */
.callbar.is-menu-open { display: none !important; }


/* --------------------------------------------------------------------------
   Mobile: header does not follow the page
   The sticky bottom bar carries Call and Get a Quote within thumb reach, so
   pinning the header as well only costs vertical space on a phone.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .site-header,
  .site-head {
    /* relative, not static: the header must stay the containing block for the
       absolutely positioned .nav-list (top: 100%), or the dropdown resolves
       against the viewport and opens a full screen-height below the button.
       relative scrolls with the page exactly as static does. */
    position: relative;
    top: auto;
  }
  /* nothing is pinned at the top any more, so anchors need almost no offset */
  html { scroll-padding-top: 12px; }
  [id] { scroll-margin-top: 12px; }
}


/* --------------------------------------------------------------------------
   Mobile: show the company name
   The wordmark, the menu button and the header call button cannot share one
   row on a phone. The call button gives way: the hero carries a full Call
   button directly below, and the sticky bottom bar carries one everywhere.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .site-header .header-call { display: none; }
  .site-header .brand > span { display: block; min-width: 0; }
  .site-header .brand { flex: 1 1 auto; min-width: 0; }
  .brand-name { font-size: 1rem; white-space: normal; }
  .site-header .brand > span { overflow-wrap: anywhere; }
}


/* --------------------------------------------------------------------------
   NAP street address in the footer
   Colour is inherited so it sits correctly on each footer ground; no opacity,
   which cost us contrast last time.
   -------------------------------------------------------------------------- */
.footer-address {
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.5;
  font-style: normal;
}


/* The longest phones still cannot fit "St. Louis" and "Installers" on one
   line at 1rem. */
@media (max-width: 380px) {
  .brand-name { font-size: 0.9rem; }
}


/* --------------------------------------------------------------------------
   Wordmark must always yield to the menu button
   Same fault as Columbia: .brand-name is nowrap for the desktop lockup, so
   the longer name ran through the menu button from 641px to about 750px.
   -------------------------------------------------------------------------- */
.site-header .brand { min-width: 0; }
.site-header .brand > span { min-width: 0; overflow-wrap: anywhere; }
.site-header .brand-name { white-space: normal; }


/* --------------------------------------------------------------------------
   Desktop nav labels never wrap
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .nav-list { flex: 0 0 auto; }
  .nav-list > li > a,
  .nav-list > li > button,
  .nav-list > li > .nav-top { white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   Logo lockup
   Desktop shows the full lockup; phones show the shield beside the live text.
   Neither the picture nor the image may shrink -- flex squashes the badge.
   -------------------------------------------------------------------------- */
.site-header .brand picture { display: block; flex: 0 0 auto; }
.logo-img {
  display: block;
  flex: 0 0 auto;
  height: 58px;
  width: auto;
  aspect-ratio: 634 / 140;
}
@media (min-width: 701px) {
  .site-header .brand > span { display: none; }
}
@media (max-width: 700px) {
  .logo-img { height: 44px; aspect-ratio: 100 / 110; }
}
@media (max-width: 380px) {
  .logo-img { height: 38px; }
}

/* --------------------------------------------------------------------------
   Service-area list: clamped with a toggle
   108 towns is a lot of page. The list is clipped by overflow, never
   display:none, so every town link stays in the DOM and in layout and remains
   crawlable and followable. The clamp is added by JS -- with JS off the whole
   list simply shows.
   -------------------------------------------------------------------------- */
.area-groups { position: relative; }
.area-groups.is-clamped {
  max-height: 560px;
  overflow: hidden;
}
.area-groups.is-clamped::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 150px;
  background: linear-gradient(to bottom, rgba(246, 241, 227, 0), var(--cream) 88%);
  pointer-events: none;
}
.areas-toggle {
  display: block;
  margin: 30px auto 0;
  min-height: 44px;
  padding: 12px 28px;
  border: 1px solid var(--ever);
  border-radius: 999px;
  background: transparent;
  color: var(--ever);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.areas-toggle:hover { background: var(--ever); color: var(--cream); }
.areas-toggle:focus-visible { outline: 3px solid #C9A227; outline-offset: 2px; }
@media (max-width: 700px) {
  .area-groups.is-clamped { max-height: 430px; }
}


/* --------------------------------------------------------------------------
   "Get a quote" popup (timed + exit-intent)
   Built by JS. Centred card on desktop; a bottom sheet on phones that leaves
   the top of the page visible, so it reads as a prompt rather than a wall.
   -------------------------------------------------------------------------- */
.cq-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(10, 16, 14, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; transition: opacity 0.22s ease;
}
.cq-backdrop.is-open { opacity: 1; }
/* an author display:flex outranks the UA [hidden] rule; without this the
   dismissed overlay would stay as an invisible click-blocker over the page */
.cq-backdrop[hidden] { display: none; }
.cq-card {
  position: relative;
  width: 100%; max-width: 700px; max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--cream-card); color: var(--ink);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  padding: 38px 42px 32px;
  font-family: var(--sans);
  transform: translateY(12px) scale(0.98); transition: transform 0.22s ease;
}
.cq-backdrop.is-open .cq-card { transform: none; }
.cq-close {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink); cursor: pointer;
  font-size: 26px; line-height: 1;
}
.cq-close:hover { background: rgba(0, 0, 0, 0.06); }
.cq-close:focus-visible, .cq-card input:focus-visible, .cq-card textarea:focus-visible, .cq-submit:focus-visible {
  outline: 3px solid var(--cran); outline-offset: 2px;
}
.cq-eyebrow { margin: 0 0 8px; font-size: 0.86rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cran); }
.cq-title { margin: 0 0 10px; font-family: var(--serif); font-size: 2.15rem; line-height: 1.12; color: var(--ever); padding-right: 40px; }
.cq-sub { margin: 0 0 22px; color: var(--ink-soft); font-size: 1.1rem; line-height: 1.5; }
.cq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cq-grid .cq-full { grid-column: 1 / -1; }
.cq-card label { display: block; font-size: 0.9rem; font-weight: 700; margin: 0 0 4px; color: var(--ink); }
.cq-card input, .cq-card textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; font-size: 17px;
  padding: 14px 14px;
  border: 1.5px solid var(--ink-soft); border-radius: 8px;
  background: #FFFFFF; color: var(--ink);
}
.cq-card textarea { min-height: 84px; resize: vertical; }
.cq-card .cq-err { display: none; margin: 4px 0 0; font-size: 0.8rem; color: #8F1D22; font-weight: 700; }
.cq-card .is-invalid input, .cq-card .is-invalid textarea { border-color: #B3282E; }
.cq-card .is-invalid .cq-err { display: block; }
.cq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cq-submit {
  display: block; width: 100%; margin-top: 14px;
  min-height: 58px; padding: 15px 22px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cran); color: #FDFAF1;
  font: inherit; font-size: 1.18rem; font-weight: 800;
}
.cq-submit[disabled] { opacity: 0.7; cursor: wait; }
.cq-note { margin: 14px 0 0; font-size: 0.92rem; color: var(--ink-soft); text-align: center; }
.cq-note a { color: inherit; font-weight: 700; }
.cq-done { display: none; text-align: center; padding: 14px 0 6px; }
.cq-done h3 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 8px; color: var(--ever); outline: none; }
.cq-done p { margin: 0; color: var(--ink-soft); }
.cq-card.is-done form { display: none; }
.cq-card.is-done .cq-done { display: block; }
body.has-popup { overflow: hidden; }
body.has-popup .callbar { display: none !important; }
/* v2: bigger desktop card, full-screen phone */
@media (max-width: 700px) {
  .cq-backdrop { align-items: stretch; padding: 0; }
  .cq-card {
    max-width: none; width: 100%;
    height: 100vh; height: 100dvh; max-height: none;
    border-radius: 0;
    padding: calc(30px + env(safe-area-inset-top, 0px)) 20px calc(26px + env(safe-area-inset-bottom, 0px));
    transform: translateY(24px);
  }
  .cq-close { top: calc(10px + env(safe-area-inset-top, 0px)); }
  .cq-grid { grid-template-columns: 1fr; gap: 12px; }
  .cq-title { font-size: 1.75rem; }
  .cq-sub { font-size: 1.02rem; }
}
@media (prefers-reduced-motion: reduce) {
  .cq-backdrop, .cq-card { transition: none; }
}