/* ============================================================
   Jeff City Christmas Lights — heritage theme
   Ivory paper · deep burgundy · antique gold · deep green
   Libre Caslon Text (display) + Public Sans (body)
   ============================================================ */

:root {
  --ivory: #F5EFE2;
  --ivory-bright: #FCF8EE;
  --ivory-2: #EDE3CD;
  --paper-edge: #DCCEAC;
  --burgundy: #5C1F2B;
  --burgundy-2: #6B2233;
  --burgundy-deep: #3B1018;
  --burgundy-ink: #2E1218;
  --gold: #B08D3C;
  --gold-bright: #C9A24B;
  --gold-pale: #E2CE97;
  --gold-text: #77591F;
  --green: #23402F;
  --ink: #33262B;
  --ink-soft: #5A4A50;
  --serif: "Libre Caslon Text", "Georgia", serif;
  --sans: "Public Sans", "Segoe UI", Arial, sans-serif;
  --shadow-frame: 0 1px 2px rgba(59, 16, 24, 0.08), 0 10px 30px rgba(59, 16, 24, 0.09);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 112px;
}

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--ink);
  background-color: var(--ivory);
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--burgundy); }

:focus-visible {
  outline: 3px solid var(--burgundy);
  outline-offset: 3px;
  border-radius: 2px;
}

.dark-ground :focus-visible,
.hero :focus-visible,
.cta-final :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-bright);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--burgundy);
  color: var(--ivory-bright);
  padding: 0.6rem 1rem;
  z-index: 300;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

/* ---------- layout helpers ---------- */

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }

section { padding: 4.5rem 0; }

/* ---------- typography ---------- */

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--burgundy-ink);
  line-height: 1.22;
  text-wrap: balance;
}

h2 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); margin-bottom: 1rem; }
h3 { font-size: 1.22rem; margin-bottom: 0.5rem; }

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

.lede {
  font-size: 1.125rem;
  color: var(--ink-soft);
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

/* small-caps section label flanked by gold hairlines */
.label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1.1rem;
}
.label::before,
.label::after {
  content: "";
  display: block;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.label::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* gold fleuron rule between sections */
.rule-fleuron {
  border: 0;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  max-width: 560px;
  margin: 0 auto;
  color: var(--gold);
  font-size: 0.85rem;
}
.rule-fleuron::before,
.rule-fleuron::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 40%, var(--gold) 60%, transparent);
  opacity: 0.75;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:active { transform: translateY(1px); }

/* burgundy — the workhorse on ivory ground */
.btn-burgundy {
  background: var(--burgundy);
  color: #FAF4E6;
  border-color: var(--gold);
  box-shadow: 0 2px 0 rgba(59, 16, 24, 0.25), 0 8px 22px rgba(92, 31, 43, 0.28);
}
.btn-burgundy:hover { background: var(--burgundy-deep); }

/* gold — for dark grounds only (hero panel, final CTA) */
.btn-gold {
  background: var(--gold-bright);
  color: #2A1216;
  border-color: rgba(255, 244, 214, 0.55);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), 0 10px 26px rgba(0, 0, 0, 0.35);
}
.btn-gold:hover { background: #D9B45C; }

/* deep green — secondary on ivory ground */
.btn-green {
  background: var(--green);
  color: #F2F6EE;
  border-color: var(--gold);
  box-shadow: 0 2px 0 rgba(20, 36, 27, 0.25), 0 8px 22px rgba(35, 64, 47, 0.28);
}
.btn-green:hover { background: #182E21; }

/* ivory — secondary on dark grounds */
.btn-ivory {
  background: var(--ivory-bright);
  color: var(--burgundy);
  border-color: var(--gold-pale);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.28), 0 10px 26px rgba(0, 0, 0, 0.3);
}
.btn-ivory:hover { background: #FFFFFF; }

.btn-lg { font-size: 1.1rem; padding: 1.05rem 2rem; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(245, 239, 226, 0.97);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 1px 0 rgba(176, 141, 60, 0.25), 0 6px 18px rgba(59, 16, 24, 0.06);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.brand {
  text-decoration: none;
  color: var(--burgundy-ink);
  line-height: 1.12;
}
.brand .brand-city {
  font-family: var(--serif);
  font-size: 1.28rem;
  display: block;
}
.brand .brand-rest {
  display: block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-top: 4px;
}
.main-nav {
  display: flex;
  gap: 1.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.main-nav a {
  color: var(--ink);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--burgundy); border-bottom-color: var(--gold); }

.header-call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--burgundy);
  color: #FAF4E6;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.6rem 1.05rem;
  border-radius: 3px;
  border: 1px solid var(--gold);
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(92, 31, 43, 0.3);
  transition: background-color 160ms ease;
}
.header-call:hover { background: var(--burgundy-deep); }
.header-call svg { flex: none; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(560px, 76vh, 700px);
  padding: 3.5rem 20px;
  overflow: hidden;
  isolation: isolate;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  z-index: -2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(46, 18, 24, 0.42) 0%, rgba(46, 18, 24, 0.18) 40%, rgba(46, 18, 24, 0.55) 100%);
}

.hero-snow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.flake {
  position: absolute;
  top: -12px;
  animation: snowfall var(--d, 20s) linear var(--delay, 0s) infinite;
  will-change: transform;
}
.flake i {
  display: block;
  width: var(--s, 5px);
  height: var(--s, 5px);
  border-radius: 50%;
  background: #FFF9EC;
  opacity: var(--o, 0.5);
  box-shadow: 0 0 6px rgba(255, 249, 236, 0.55);
  animation: snowsway var(--sd, 5s) ease-in-out var(--sdelay, 0s) infinite alternate;
}
@keyframes snowfall {
  to { transform: translateY(102vh); }
}
@keyframes snowsway {
  from { transform: translateX(calc(var(--sw, 9px) * -1)); }
  to   { transform: translateX(var(--sw, 9px)); }
}

/* the framed content column — engraved-invitation feel */
.hero-panel {
  position: relative;
  z-index: 2;
  max-width: 780px;
  text-align: center;
  color: #F7EFDD;
  background: linear-gradient(180deg, rgba(43, 13, 19, 0.78), rgba(30, 9, 13, 0.86));
  border: 1px solid rgba(201, 162, 75, 0.9);
  outline: 1px solid rgba(201, 162, 75, 0.38);
  outline-offset: 7px;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4.5vw, 3.2rem);
  box-shadow: 0 24px 60px rgba(20, 5, 8, 0.55);
}
/* wax-seal crest breaking the top border */
.hero-panel::after {
  content: "\2726";
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2B0D13;
  border: 1px solid var(--gold-bright);
  color: var(--gold-bright);
  font-size: 1rem;
  line-height: 32px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}
.hero-kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 1rem;
}
.hero h1 {
  color: #FBF5E7;
  font-size: clamp(1.9rem, 4.2vw, 2.95rem);
  line-height: 1.18;
  margin-bottom: 1.1rem;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
.hero-lede {
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  color: rgba(247, 239, 221, 0.94);
  max-width: 58ch;
  margin: 0 auto 1.7rem;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-bottom: 1.15rem;
}
.hero-note {
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  color: rgba(226, 206, 151, 0.95);
}

/* ---------- quote form section ---------- */

.quote-section { padding-top: 4rem; }

.quote-card {
  background: var(--ivory-bright);
  border: 1px solid var(--gold);
  outline: 1px solid rgba(176, 141, 60, 0.35);
  outline-offset: 5px;
  box-shadow: var(--shadow-frame);
  padding: clamp(1.6rem, 4vw, 3rem);
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.quote-card .corner {
  position: absolute;
  color: var(--gold);
  font-size: 0.8rem;
  line-height: 1;
  opacity: 0.9;
}
.corner-tl { top: 8px; left: 10px; }
.corner-tr { top: 8px; right: 10px; }
.corner-bl { bottom: 8px; left: 10px; }
.corner-br { bottom: 8px; right: 10px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem 1.3rem;
  margin-top: 1.6rem;
  text-align: left;
}
.field { display: flex; flex-direction: column; }
.field-full { grid-column: 1 / -1; }
.field label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--burgundy-ink);
  margin-bottom: 0.38rem;
}
.field label .opt {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.field input,
.field textarea {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #FFFDF6;
  border: 1px solid var(--paper-edge);
  border-bottom: 2px solid var(--gold);
  border-radius: 2px;
  padding: 0.72rem 0.85rem;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field textarea { resize: vertical; min-height: 108px; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--burgundy);
  border-bottom-color: var(--burgundy);
  box-shadow: 0 0 0 3px rgba(92, 31, 43, 0.16);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #9C2F2F;
  border-bottom-color: #9C2F2F;
}
.err {
  display: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #8E1F1F;
  margin-top: 0.32rem;
}
.err.show { display: block; }

/* honeypot — visually removed, tab-skipped */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-actions { grid-column: 1 / -1; margin-top: 0.4rem; }
.btn-submit {
  width: 100%;
  font-size: 1.12rem;
  padding: 1.05rem 1.5rem;
  letter-spacing: 0.02em;
}
.btn-submit[disabled] { opacity: 0.7; cursor: wait; }
.form-alt {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 0.98rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}
.form-alt a { font-weight: 700; color: var(--burgundy); }

.form-success {
  text-align: center;
  padding: 2.2rem 1rem;
}
.form-success h3 {
  font-size: 1.6rem;
  margin-bottom: 0.7rem;
}
.form-success p { max-width: 46ch; margin-left: auto; margin-right: auto; }
.success-call {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(1.7rem, 5vw, 2.3rem);
  font-weight: 700;
  color: #FAF4E6;
  background: var(--burgundy);
  border: 1px solid var(--gold);
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border-radius: 4px;
  box-shadow: 0 10px 26px rgba(92, 31, 43, 0.32);
}
.success-call:hover { background: var(--burgundy-deep); }

/* ---------- services (roman-numeral programme) ---------- */

.svc-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem 3.5rem;
  margin-top: 2.6rem;
  text-align: left;
  counter-reset: svc;
}
.svc {
  counter-increment: svc;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 1.1rem;
}
.svc-num {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold-text);
  text-align: right;
  line-height: 1.3;
  border-right: 1px solid var(--gold);
  padding-right: 1.05rem;
}
.svc-num::before { content: counter(svc, upper-roman) "."; }
.svc h3 { margin-bottom: 0.35rem; }
.svc p { font-size: 0.99rem; color: var(--ink-soft); }

/* ---------- trust ---------- */

.trust-band { background: var(--ivory-2); border-top: 1px solid rgba(176,141,60,.4); border-bottom: 1px solid rgba(176,141,60,.4); }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem;
  margin-top: 2.4rem;
}
.trust-item {
  background: var(--ivory-bright);
  border: 1px solid var(--paper-edge);
  border-top: 3px solid var(--gold);
  padding: 1.5rem 1.3rem 1.4rem;
  text-align: center;
  box-shadow: 0 6px 18px rgba(59, 16, 24, 0.06);
}
.trust-item .tmark {
  color: var(--gold-text);
  font-size: 1rem;
  display: block;
  margin-bottom: 0.55rem;
}
.trust-item h3 { font-size: 1.08rem; }
.trust-item p { font-size: 0.94rem; color: var(--ink-soft); }

/* ---------- gallery (framed prints) ---------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.6rem;
  margin-top: 2.5rem;
}
.print { grid-column: span 2; margin: 0; }
.print-wide { grid-column: span 3; }
.print-frame {
  background: var(--ivory-bright);
  border: 1px solid var(--gold);
  padding: 10px;
  box-shadow: var(--shadow-frame);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.print:hover .print-frame {
  transform: translateY(-4px);
  box-shadow: 0 3px 4px rgba(59,16,24,.08), 0 18px 40px rgba(59, 16, 24, 0.16);
}
.print img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.print figcaption {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-align: center;
  padding-top: 0.75rem;
}
.gallery-note {
  margin-top: 2rem;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--ink-soft);
  text-align: center;
}

/* ---------- service area ---------- */

.area-copy { max-width: 68ch; margin: 0 auto 2.4rem; text-align: center; color: var(--ink-soft); }
.area-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.3rem;
}
.area-card {
  display: block;
  text-decoration: none;
  background: var(--ivory-bright);
  border: 1px solid var(--paper-edge);
  border-top: 3px solid var(--burgundy);
  padding: 1.4rem 1.25rem 1.3rem;
  box-shadow: 0 6px 18px rgba(59, 16, 24, 0.06);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.area-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(59, 16, 24, 0.14);
  border-top-color: var(--gold);
}
.area-card h3 { color: var(--burgundy-ink); }
.area-card p { font-size: 0.93rem; color: var(--ink-soft); min-height: 3.4em; }
.area-card .go {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--burgundy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.area-foot {
  text-align: center;
  margin-top: 1.8rem;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

/* ---------- quotes / reviews ---------- */

.quotes-band { background: var(--ivory-2); border-top: 1px solid rgba(176,141,60,.4); border-bottom: 1px solid rgba(176,141,60,.4); }
.quote-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  margin-top: 2.4rem;
}
.pull-quote {
  background: var(--ivory-bright);
  border: 1px solid var(--paper-edge);
  padding: 1.7rem 1.5rem 1.5rem;
  position: relative;
  box-shadow: 0 6px 18px rgba(59, 16, 24, 0.06);
}
.pull-quote::before {
  content: "\201C";
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--gold);
  position: absolute;
  top: 0.45rem;
  left: 1rem;
}
.pull-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.04rem;
  line-height: 1.55;
  color: var(--burgundy-ink);
  margin: 0.8rem 0 0.9rem;
}
.pull-quote cite {
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.quotes-note {
  margin-top: 1.9rem;
  text-align: center;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq-list { margin-top: 2.2rem; text-align: left; }
.faq {
  border-bottom: 1px solid rgba(176, 141, 60, 0.5);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  font-family: var(--serif);
  font-size: 1.13rem;
  color: var(--burgundy-ink);
  padding: 1.15rem 0.2rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-family: var(--sans);
  font-size: 1.35rem;
  color: var(--gold-text);
  flex: none;
  transition: transform 180ms ease;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--burgundy); }
.faq-a { padding: 0 0.2rem 1.3rem; color: var(--ink-soft); max-width: 70ch; }

/* ---------- final CTA ---------- */

.cta-final {
  position: relative;
  text-align: center;
  color: #F7EFDD;
  padding: 5.5rem 24px;
  background: var(--burgundy-deep) url("../assets/img/cta-bokeh.webp") center / cover no-repeat;
  isolation: isolate;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(35, 9, 14, 0.78), rgba(35, 9, 14, 0.66));
}
.cta-final h2 {
  color: #FBF5E7;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  max-width: 24ch;
  margin: 0 auto 0.9rem;
}
.cta-final .cta-sub {
  color: rgba(247, 239, 221, 0.92);
  max-width: 54ch;
  margin: 0 auto 1.8rem;
}
.cta-phone {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: 700;
  color: var(--gold-bright);
  text-decoration: none;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
  margin-bottom: 1.6rem;
  border-bottom: 2px solid rgba(201, 162, 75, 0.6);
  padding-bottom: 0.2rem;
}
.cta-phone:hover { color: #E2CE97; }
.cta-final .cta-note {
  margin-top: 1.4rem;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  color: rgba(226, 206, 151, 0.9);
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--burgundy-deep);
  color: rgba(247, 239, 221, 0.85);
  border-top: 3px solid var(--gold);
  padding: 3.2rem 0 2.4rem;
  text-align: center;
  font-size: 0.95rem;
}
.footer-brand {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: #FBF5E7;
  margin-bottom: 0.5rem;
}
.footer-tag { max-width: 60ch; margin: 0 auto 1.4rem; }
.footer-call {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold-bright);
  text-decoration: none;
  margin-bottom: 1.6rem;
}
.footer-call:hover { color: var(--gold-pale); }
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.7rem;
}
.footer-links a { color: rgba(247, 239, 221, 0.85); text-decoration: none; border-bottom: 1px solid rgba(176, 141, 60, 0.5); padding-bottom: 2px; }
.footer-links a:hover { color: var(--gold-pale); }
.footer-legal { font-size: 0.82rem; color: rgba(247, 239, 221, 0.6); }

/* ---------- town pages ---------- */

.town-nav {
  background: var(--ivory-2);
  border-bottom: 1px solid rgba(176, 141, 60, 0.45);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.town-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 1.5rem;
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.town-nav a { color: var(--ink-soft); text-decoration: none; padding: 0.15rem 0; }
.town-nav a:hover { color: var(--burgundy); }
.town-nav a[aria-current="page"] { color: var(--burgundy); border-bottom: 2px solid var(--gold); }

.town-hero {
  text-align: center;
  padding: 4rem 24px 3.2rem;
  border-bottom: 1px solid rgba(176, 141, 60, 0.4);
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(176, 141, 60, 0.12), transparent 70%),
    var(--ivory);
}
.town-hero h1 {
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  max-width: 22ch;
  margin: 0 auto 1rem;
}
.town-hero .lede { margin-bottom: 1.8rem; }
.town-hero .hero-ctas { margin-bottom: 0; }

.prose { max-width: 70ch; margin: 0 auto; padding: 0 24px; }
.prose h2, .copy-grid h2, .town-follow h2 { margin-top: 2.4rem; }
.prose ul, .copy-grid ul, .town-follow ul { margin: 1em 0; padding-left: 1.35em; }
.prose li + li, .copy-grid li + li, .town-follow li + li { margin-top: 0.45em; }
.prose ul + p, .copy-grid ul + p, .town-follow ul + p { margin-top: 1em; }

/* full-width follow-on block after a copy-grid */
.town-follow { max-width: 70ch; margin: 0 auto; padding: 0 24px; }
.town-follow > h2:first-child { margin-top: 3rem; }

/* heritage drop cap for town lead paragraphs */
.dropcap::first-letter {
  font-family: var(--serif);
  font-size: 3.35em;
  line-height: 0.76;
  float: left;
  padding: 0.06em 0.14em 0 0;
  color: var(--burgundy);
}

.copy-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2.6rem;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}
.inset-frame {
  margin: 0;
  background: var(--ivory-bright);
  border: 1px solid var(--gold);
  padding: 9px;
  box-shadow: var(--shadow-frame);
}
.inset-frame img { width: 100%; height: auto; }
.inset-frame figcaption {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-text);
  text-align: center;
  padding-top: 0.7rem;
}

.steps {
  list-style: none;
  counter-reset: step;
  margin: 2rem 0;
  display: grid;
  gap: 1.3rem;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 1rem;
  align-items: start;
}
.steps li::before {
  content: counter(step);
  font-family: var(--serif);
  font-size: 1.25rem;
  color: #FAF4E6;
  background: var(--burgundy);
  border: 1px solid var(--gold);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.callout {
  border-left: 3px solid var(--gold);
  background: var(--ivory-bright);
  border-top: 1px solid var(--paper-edge);
  border-bottom: 1px solid var(--paper-edge);
  border-right: 1px solid var(--paper-edge);
  padding: 1.4rem 1.6rem;
  margin: 2.2rem 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.12rem;
  color: var(--burgundy-ink);
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.2rem;
  margin-top: 2.2rem;
  text-align: left;
}
.split-col {
  background: var(--ivory-bright);
  border: 1px solid var(--paper-edge);
  border-top: 3px solid var(--burgundy);
  padding: 1.7rem 1.6rem;
  box-shadow: 0 6px 18px rgba(59, 16, 24, 0.06);
}
.split-col h3 { font-size: 1.2rem; }

/* ---------- responsive ---------- */

@media (max-width: 960px) {
  .main-nav { display: none; }
  .svc-list { grid-template-columns: 1fr; gap: 1.9rem; }
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .area-grid { grid-template-columns: 1fr 1fr; }
  .quote-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .print, .print-wide { grid-column: span 1; }
  .copy-grid { grid-template-columns: 1fr; }
  .copy-grid .inset-frame { max-width: 460px; margin: 0 auto; }
}

@media (max-width: 640px) {
  section { padding: 3.4rem 0; }
  .brand .brand-city { font-size: 1.12rem; }
  .header-call { font-size: 0.88rem; padding: 0.55rem 0.8rem; }
  .hero {
    min-height: min(86svh, 640px);
    padding: 2.2rem 14px;
  }
  .hero-panel { outline-offset: 5px; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .area-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 44px 1fr; }
  .footer-links { gap: 0.5rem 1rem; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-snow { display: none; }
  .flake { display: none; }
}


/* ---------- 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: 900px) {
  .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 ---
   Brand sub-label was 9.92px on desktop; the earlier 11px floor only covered
   phones. Buttons get a reliable tap height on mobile. */
.brand .brand-rest { font-size: 11px; }
@media (max-width: 900px) {
  .btn { min-height: 44px; }
}


/* --------------------------------------------------------------------------
   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(46, 18, 24, 0.97);
  box-shadow: 0 -8px 24px rgba(28, 10, 14, 0.34);
}
.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: #5C1F2B; color: #FCF8EE; }
.callbar .callbar-quote { background: #F5EFE2; color: #2E1218; }
.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; }
}

/* No icon on this brand, so keep the town name and drop the second line,
   which was wrapping the header to three lines on a narrow phone. */
@media (max-width: 560px) {
  .brand .brand-rest { display: none; }
  .brand .brand-city { white-space: nowrap; }
  .site-header .brand, .site-head .brand { flex: 0 0 auto; min-width: max-content; }
}

/* At 320px the brand, menu button and phone button together ran 10px past the
   screen. Trim the phone button's padding rather than hide the number — it is
   the highest-intent thing in the header. Tap height is preserved. */
@media (max-width: 360px) {
  .header-call {
    padding-inline: 10px;
    font-size: 13px;
    gap: 5px;
    min-height: 44px;
  }
}

/* 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; }