/* ==========================================================================
   COMO Christmas Lights — columbiachristmaslightinstallation.com
   The LIGHT site: warm cream page, dark forest-green text, rounded + soft.
   Type: Fraunces (soft) headlines / Nunito Sans body.
   ========================================================================== */

:root {
  --cream: #FAF5E8;
  --cream-2: #F3EAD4;
  --paper: #FFFCF4;
  --ink: #2A4433;
  --ink-soft: #47604F;
  --pine: #2C5E3F;
  --pine-deep: #1D4030;
  --pine-ink: #142B1D;
  --gold: #D9A441;
  --gold-soft: #EFD9A8;
  --gold-deep: #866415;
  --berry: #B5432F;
  --berry-deep: #922F1D;
  --shadow-soft: 0 10px 28px rgba(35, 58, 40, 0.10);
  --shadow-lift: 0 16px 40px rgba(35, 58, 40, 0.16);
  --radius-card: 20px;
  --radius-big: 26px;
  --wrap: 1120px;
  --wrap-narrow: 760px;
}

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

body {
  font-family: "Nunito Sans", "Segoe UI", Tahoma, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--ink);
  background-color: var(--cream);
  /* faint paper grain so the cream never reads as flat white */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--pine-deep);
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.35rem, 5.4vw, 3.9rem); line-height: 1.05; }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.28rem; line-height: 1.3; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--pine); }
a:hover { color: var(--pine-deep); }

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

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

[id] { scroll-margin-top: 92px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pine-deep);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 12px 0;
  z-index: 200;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.2;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn svg { flex: 0 0 auto; }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }

.btn-call {
  background: var(--berry);
  color: #FFF9EF;
  box-shadow: 0 8px 22px rgba(181, 67, 47, 0.32);
}
.btn-call:hover { background: var(--berry-deep); color: #fff; }

.btn-quote {
  background: var(--pine);
  color: #F6FBF3;
  box-shadow: 0 8px 22px rgba(44, 94, 63, 0.28);
}
.btn-quote:hover { background: var(--pine-deep); color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--pine-deep);
  border-color: rgba(44, 94, 63, 0.45);
}
.btn-ghost:hover { border-color: var(--pine); background: rgba(44, 94, 63, 0.06); }

.btn-big { font-size: 1.15rem; padding: 18px 34px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 245, 232, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(44, 94, 63, 0.12);
  transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: 0 6px 24px rgba(35, 58, 40, 0.10); }

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

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--pine-deep);
  font-family: "Fraunces", Georgia, serif;
  font-weight: 650;
  font-size: 1.22rem;
  line-height: 1.1;
  white-space: nowrap;
}
.logo svg { flex: 0 0 auto; }
.logo .logo-sub {
  display: block;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.main-nav { display: flex; gap: 26px; }
.main-nav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--pine-deep); border-bottom-color: var(--gold); }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--berry);
  color: #FFF9EF;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(181, 67, 47, 0.30);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.header-phone:hover { background: var(--berry-deep); color: #fff; transform: translateY(-1px); }

@media (max-width: 900px) {
  .main-nav { display: none; }
}
@media (max-width: 560px) {
  .logo span.logo-text { display: none; }
  .header-inner { padding: 10px 14px; }
  .header-phone { font-size: 0.98rem; padding: 11px 16px; }
}

/* --------------------------------------------------------------------------
   Hero — centered on cream, photo fades into the page below
   -------------------------------------------------------------------------- */
.hero { padding: clamp(44px, 7vw, 84px) 0 0; text-align: center; }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pine);
  background: rgba(44, 94, 63, 0.08);
  border: 1px solid rgba(44, 94, 63, 0.18);
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.hero h1 { max-width: 880px; margin: 0 auto 20px; }
.hero .lede {
  max-width: 640px;
  margin: 0 auto 30px;
  font-size: clamp(1.08rem, 1.6vw, 1.24rem);
  color: var(--ink-soft);
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-bottom: 22px;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink-soft);
  margin-bottom: clamp(34px, 5vw, 52px);
  list-style: none;
}
.trust-row li { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { color: var(--gold-deep); }

.hero-photo {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 22px;
}
.hero-photo img {
  width: 100%;
  /* Crop the empty night sky off the real photograph so the lit house fills the frame. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 64%;
  border-radius: var(--radius-big) var(--radius-big) 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 99%);
}
.hero-badge {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pine-deep);
  color: #F6FBF3;
  font-weight: 800;
  font-size: 0.9rem;
  padding: 10px 22px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(20, 43, 29, 0.35);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
/* friendly scalloped transition into tinted sections */
.wave {
  height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 26'%3E%3Cpath d='M0 26 A28 28 0 0 1 56 26 Z' fill='%23F3EAD4'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 56px 26px;
  background-position: bottom center;
}

.section { padding: clamp(58px, 8.5vw, 104px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }
.section-alt { background: var(--cream-2); }

.section-head { text-align: center; max-width: 720px; margin: 0 auto clamp(34px, 5vw, 56px); }
.section-head h2 { margin-bottom: 14px; }
.section-head .sub { color: var(--ink-soft); font-size: 1.08rem; }

/* hand-drawn gold squiggle under section headings */
.squig {
  display: block;
  width: 110px;
  height: 12px;
  margin: 14px auto 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 12'%3E%3Cpath d='M2 8 C 14 2, 26 2, 38 7 S 62 12, 74 7 S 98 2, 108 6' fill='none' stroke='%23D9A441' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* --------------------------------------------------------------------------
   Before / After slider — the centerpiece
   -------------------------------------------------------------------------- */
.ba-wrap { max-width: 980px; margin: 0 auto; }

.ba {
  --pos: 50%;
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: var(--radius-big);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  background: var(--pine-ink);
  touch-action: pan-y;
}
.ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}
.ba .ba-top {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 3px;
  transform: translateX(-50%);
  background: #FFF9EF;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.ba-knob {
  position: absolute;
  top: 50%;
  left: var(--pos);
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #FFF9EF;
  color: var(--pine-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  transition: box-shadow 0.15s ease;
}
.ba.knob-focus .ba-knob {
  box-shadow: 0 0 0 4px var(--gold), 0 6px 18px rgba(0, 0, 0, 0.4);
}
.ba input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  z-index: 5;
}

.ba-label {
  position: absolute;
  top: 16px;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(16, 30, 20, 0.72);
  color: #FFF9EF;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  pointer-events: none;
}
.ba-label-off { left: 16px; }
.ba-label-on { right: 16px; }

.ba-caption {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.98rem;
  margin-top: 18px;
}

@keyframes ba-nudge {
  0%, 100% { --pos: 50%; }
}

/* --------------------------------------------------------------------------
   Cards (services, towns, why-us)
   -------------------------------------------------------------------------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 22px;
}

.card {
  background: var(--paper);
  border: 1px solid rgba(44, 94, 63, 0.10);
  border-radius: var(--radius-card);
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card h3 { margin: 16px 0 10px; }
.card p { color: var(--ink-soft); font-size: 0.99rem; }

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--gold-soft);
  color: var(--pine-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* five service cards: 3 on top, 2 centered below on desktop */
.grid-5 { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.grid-5 .card:nth-child(-n+3) { grid-column: span 2; }
.grid-5 .card:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 960px) {
  .grid-5 { grid-template-columns: 1fr 1fr; }
  .grid-5 .card { grid-column: auto; }
  .grid-5 .card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .grid-5 { grid-template-columns: 1fr; }
  .grid-5 .card:last-child { grid-column: auto; }
}

/* --------------------------------------------------------------------------
   How it works — steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  counter-reset: step;
  list-style: none;
}
.steps li {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius-card);
  border: 1px solid rgba(44, 94, 63, 0.10);
  box-shadow: var(--shadow-soft);
  padding: 34px 26px 28px;
  text-align: center;
}
.steps li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pine);
  color: #F6FBF3;
  font-family: "Fraunces", serif;
  font-weight: 700;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(29, 64, 48, 0.35);
}
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--ink-soft); font-size: 0.98rem; }
.steps-cta { text-align: center; margin-top: 44px; }

/* --------------------------------------------------------------------------
   Towns / service area
   -------------------------------------------------------------------------- */
.town-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
.town-grid .town-card:nth-child(-n+3) { grid-column: span 2; }
.town-grid .town-card:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 960px) {
  .town-grid { grid-template-columns: 1fr 1fr; }
  .town-grid .town-card { grid-column: auto; }
  .town-grid .town-card:last-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .town-grid { grid-template-columns: 1fr; }
  .town-grid .town-card:last-child { grid-column: auto; }
}

.town-card {
  display: block;
  background: var(--paper);
  border: 1px solid rgba(44, 94, 63, 0.12);
  border-radius: var(--radius-card);
  padding: 26px 24px;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.town-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.town-card h3 { margin-bottom: 6px; }
.town-card p { color: var(--ink-soft); font-size: 0.96rem; margin-bottom: 12px; }
.town-card .town-go { font-weight: 800; color: var(--berry); font-size: 0.95rem; }

.hood-note {
  background: var(--paper);
  border: 1px dashed rgba(156, 116, 25, 0.5);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  margin-top: 26px;
  color: var(--ink-soft);
  font-size: 1rem;
  text-align: center;
}
.hood-note strong { color: var(--pine-deep); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (max-width: 640px) { .gallery-grid { grid-template-columns: 1fr; } }
.gallery-grid figure {
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(44, 94, 63, 0.10);
  box-shadow: var(--shadow-soft);
}
.gallery-grid img { width: 100%; height: 290px; object-fit: cover; }
.gallery-grid figcaption {
  padding: 14px 18px 16px;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.gallery-note { text-align: center; color: var(--ink-soft); font-size: 0.95rem; margin-top: 20px; }

/* --------------------------------------------------------------------------
   Why us + reviews
   -------------------------------------------------------------------------- */
.why-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(30px, 5vw, 60px);
  align-items: center;
}
@media (max-width: 860px) { .why-grid { grid-template-columns: 1fr; } }

.check-list { list-style: none; display: grid; gap: 16px; }
.check-list li { display: flex; gap: 14px; align-items: flex-start; }
.check-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--pine); }
.check-list strong { color: var(--pine-deep); }
.check-list span { color: var(--ink-soft); }

.review-slot {
  background: var(--paper);
  border: 1px solid rgba(44, 94, 63, 0.10);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
  padding: 30px 30px 26px;
}
.review-slot .big-q {
  font-family: "Fraunces", serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--gold);
}
.review-slot p { color: var(--ink-soft); }
.review-slot .review-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq-list { display: grid; gap: 14px; }
.faq-list details {
  background: var(--paper);
  border: 1px solid rgba(44, 94, 63, 0.12);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--pine-deep);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: "Fraunces", serif;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold-deep);
  transition: transform 0.2s ease;
  flex: 0 0 auto;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list .faq-body { padding: 0 24px 22px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Quote form
   -------------------------------------------------------------------------- */
.quote-section { background: var(--cream-2); }

.form-card {
  background: var(--paper);
  border-radius: var(--radius-big);
  border: 1px solid rgba(44, 94, 63, 0.12);
  box-shadow: var(--shadow-lift);
  padding: clamp(28px, 4vw, 44px);
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--pine) 0 34px,
    var(--gold) 34px 68px,
    var(--berry) 68px 102px
  );
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.field-full { grid-column: 1 / -1; }
@media (max-width: 620px) { .field-grid { grid-template-columns: 1fr; } }

.field label {
  display: block;
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--pine-deep);
  margin-bottom: 7px;
}
.field .optional { font-weight: 600; color: var(--ink-soft); }

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 2px solid rgba(44, 94, 63, 0.22);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 4px rgba(44, 94, 63, 0.16);
}
.field.has-error input,
.field.has-error textarea { border-color: var(--berry); }
.field-error {
  display: none;
  color: var(--berry-deep);
  font-weight: 700;
  font-size: 0.88rem;
  margin-top: 6px;
}
.field.has-error .field-error { display: block; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;   /* park it off-screen like the other four sites */
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-submit-row { margin-top: 24px; }
.form-submit-row .btn { width: 100%; }
.form-submit-row .btn[disabled] { opacity: 0.65; cursor: wait; transform: none; }
.form-alt {
  text-align: center;
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 0.98rem;
}
.form-alt a { font-weight: 800; color: var(--berry); text-decoration: none; }
.form-alt a:hover { text-decoration: underline; color: var(--berry-deep); }

/* success state */
.form-success { text-align: center; padding: 20px 6px 10px; }
.form-success .success-mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--pine);
  color: #F6FBF3;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 26px rgba(29, 64, 48, 0.35);
}
.form-success h3 { font-size: 1.7rem; margin-bottom: 10px; }
.form-success p { color: var(--ink-soft); max-width: 460px; margin: 0 auto 22px; }
.success-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--berry);
  color: #FFF9EF;
  font-weight: 800;
  font-size: 1.35rem;
  padding: 20px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(181, 67, 47, 0.35);
}
.success-call:hover { background: var(--berry-deep); color: #fff; }

/* --------------------------------------------------------------------------
   Town pages
   -------------------------------------------------------------------------- */
.town-hero { padding: clamp(46px, 7vw, 80px) 0 clamp(26px, 4vw, 44px); text-align: center; }
.town-hero .lede { max-width: 640px; margin: 0 auto 28px; font-size: 1.14rem; color: var(--ink-soft); }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 6px;
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 26px;
  color: var(--ink-soft);
}
.crumbs a { color: var(--pine); text-decoration: none; padding: 2px 6px; border-radius: 8px; }
.crumbs a:hover { background: rgba(44, 94, 63, 0.08); color: var(--pine-deep); }
.crumbs .sep { color: rgba(44, 94, 63, 0.4); }

.town-body h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 38px 0 14px; }
.town-body h2:first-child { margin-top: 0; }
.town-body ul { margin: 0 0 1em 1.3em; }
.town-body li { margin-bottom: 8px; color: var(--ink); }

.town-callout {
  background: var(--paper);
  border-left: 6px solid var(--gold);
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
  padding: 22px 26px;
  margin: 30px 0;
  color: var(--ink-soft);
}
.town-callout strong { color: var(--pine-deep); }

.town-figure {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  border: 1px solid rgba(44, 94, 63, 0.10);
  margin: 30px 0;
  background: var(--paper);
}
.town-figure img { width: 100%; height: auto; }
.town-figure figcaption { padding: 12px 18px; font-size: 0.92rem; color: var(--ink-soft); }

.chip-list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 14px 0 26px; padding: 0; }
.chip-list li {
  background: var(--paper);
  border: 1px solid rgba(44, 94, 63, 0.18);
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pine-deep);
}

.town-cta-band {
  text-align: center;
  background: var(--pine-deep);
  border-radius: var(--radius-big);
  padding: clamp(34px, 5vw, 54px) 26px;
  margin-top: 46px;
}
.town-cta-band h2 { color: #F6FBF3; margin-bottom: 10px; }
.town-cta-band p { color: rgba(246, 251, 243, 0.85); max-width: 520px; margin: 0 auto 24px; }
.town-cta-band .hero-cta { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Final CTA band (home)
   -------------------------------------------------------------------------- */
.final-note {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 34px;
  color: var(--ink-soft);
  font-size: 1.06rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--pine-ink);
  color: rgba(246, 251, 243, 0.82);
  padding: clamp(44px, 6vw, 70px) 0 34px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 38px;
}
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; } }

.site-footer h3 {
  color: #F6FBF3;
  font-size: 1.05rem;
  font-family: "Nunito Sans", sans-serif;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-brand {
  font-family: "Fraunces", serif;
  font-weight: 650;
  font-size: 1.5rem;
  color: #F6FBF3;
  margin-bottom: 12px;
}
.site-footer p { font-size: 0.98rem; }
.site-footer ul { list-style: none; display: grid; gap: 9px; }
.site-footer a { color: rgba(246, 251, 243, 0.85); text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  font-weight: 800;
  color: #F6FBF3 !important;
  margin: 6px 0 14px;
}
.footer-phone:hover { color: var(--gold) !important; text-decoration: none !important; }
.footer-bottom {
  border-top: 1px solid rgba(246, 251, 243, 0.15);
  padding-top: 22px;
  font-size: 0.88rem;
  color: rgba(246, 251, 243, 0.6);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Mobile sticky call bar (built by JS, shown under 700px after first scroll)
   -------------------------------------------------------------------------- */
.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(20, 43, 29, 0.97);
  box-shadow: 0 -8px 24px rgba(16, 30, 20, 0.28);
}
.callbar a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  padding: 13px 10px;
  border-radius: 999px;
}
.callbar .callbar-call { background: var(--berry); color: #FFF9EF; }
.callbar .callbar-quote { background: var(--cream); color: var(--pine-deep); }
@media (max-width: 700px) {
  .callbar.show { display: flex; }
  .site-footer { padding-bottom: 104px; }
}

/* --------------------------------------------------------------------------
   Reveal-on-scroll (gentle)
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.45s ease, transform 0.45s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .btn { width: 100%; }
  .hero-cta { flex-direction: column; align-items: stretch; padding: 0 4px; }
  .hero-badge { font-size: 0.8rem; padding: 9px 16px; }
  .gallery-grid img { height: 210px; }
  .ba { aspect-ratio: 4 / 3; }
  .kicker { font-size: 0.72rem; letter-spacing: 0.12em; padding: 7px 14px; }
}


/* ---------- 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 ---
   The brand sub-label sat at 10.88px on desktop (the 11px floor added earlier
   only applied below 900px), and the secondary CTA band's buttons were 28px
   tall — too small to tap reliably. */
.logo .logo-sub { font-size: 11px; }
@media (max-width: 900px) {
  .btn { 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; }