/* ============================================================
   Lake Ozark Christmas Lights — lakefront theme
   Deep teal night, warm white, copper. Marcellus + Jost.
   ============================================================ */

:root {
  --water: #0A1E22;        /* midnight water */
  --teal: #0E3335;         /* deep teal panel */
  --teal-2: #123C3C;
  --cream: #F7F3EA;        /* warm white */
  --cream-2: #EFE8D9;
  --copper: #CA8558;
  --copper-deep: #9B623C;
  --ink: #182B2E;          /* body text on cream */
  --ink-soft: #3D5457;
  --on-dark: #E9E2D2;      /* body text on teal */
  --on-dark-dim: #B9C4BE;
  --hair-dark: rgba(24, 60, 60, 0.16);   /* hairline on cream */
  --hair-light: rgba(247, 243, 234, 0.16); /* hairline on teal */
  --btn-ink: #221105;      /* text on copper */
  --error: #9C3311;
  --serif: 'Marcellus', 'Georgia', serif;
  --sans: 'Jost', 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: inherit; }

::selection { background: var(--copper); color: var(--btn-ink); }

/* ---------- type helpers ---------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.14; }

.label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--copper-deep);
  display: block;
  margin-bottom: 18px;
}

.on-dark .label, .label.light { color: var(--copper); }

.lede { font-size: 19px; font-weight: 300; line-height: 1.7; }

/* ---------- a11y ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--copper);
  color: var(--btn-ink);
  padding: 12px 20px;
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 2px;
}

input:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--copper-deep) !important;
  box-shadow: 0 0 0 3px rgba(199, 127, 79, 0.28);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  padding: 15px 30px;
  border-radius: 3px;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn-copper {
  background: var(--copper);
  color: var(--btn-ink);
  box-shadow: 0 6px 22px rgba(199, 127, 79, 0.32);
}
.btn-copper:hover { background: #D68C5B; transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(247, 243, 234, 0.55);
}
.btn-ghost:hover { background: rgba(247, 243, 234, 0.1); }

.btn-ghost-dark {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(24, 60, 60, 0.4);
}
.btn-ghost-dark:hover { background: rgba(24, 60, 60, 0.06); }

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

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 32px; }

section { position: relative; }

.on-dark { color: var(--on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--cream); }

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

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(180deg, rgba(7, 21, 25, 0.62), rgba(7, 21, 25, 0));
}

.site-header.scrolled {
  background: rgba(10, 30, 34, 0.94);
  box-shadow: 0 1px 0 var(--hair-light);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.brand { display: flex; flex-direction: column; text-decoration: none; line-height: 1; }
.brand-top { font-family: var(--serif); font-size: 21px; color: var(--cream); letter-spacing: 0.02em; }
.brand-sub {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 5px;
}

.main-nav { display: flex; gap: 30px; }
.main-nav a {
  color: var(--on-dark);
  text-decoration: none;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.main-nav a:hover { color: var(--cream); border-bottom-color: var(--copper); }

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--copper);
  color: var(--btn-ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 11px 20px;
  border-radius: 3px;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.header-phone:hover { background: #D68C5B; }
.header-phone svg { flex: 0 0 auto; }

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

.hero {
  position: relative;
  min-height: max(680px, 100svh);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--water);
  padding: 130px 0 150px;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(102deg, rgba(6, 20, 24, 0.88) 0%, rgba(6, 20, 24, 0.62) 34%, rgba(6, 20, 24, 0.18) 62%, rgba(6, 20, 24, 0.38) 100%),
    linear-gradient(180deg, rgba(6, 20, 24, 0.42) 0%, rgba(6, 20, 24, 0) 26%, rgba(6, 20, 24, 0) 62%, rgba(8, 24, 28, 0.72) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 430px);
  gap: 64px;
  align-items: center;
  width: 100%;
}

.hero-copy h1 {
  font-size: clamp(2.5rem, 4.4vw, 4.05rem);
  color: var(--cream);
  text-shadow: 0 2px 26px rgba(4, 14, 17, 0.75);
  margin-bottom: 22px;
  max-width: 15ch;
}

.hero-copy .label { color: #E2A879; text-shadow: 0 1px 12px rgba(4, 14, 17, 0.8); }

.hero-lede {
  color: #E5DFCF;
  font-size: 19px;
  font-weight: 300;
  max-width: 44ch;
  text-shadow: 0 1px 14px rgba(4, 14, 17, 0.8);
  margin-bottom: 34px;
}

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

.hero-note {
  margin-top: 22px;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: #D9DFD4;
  text-shadow: 0 1px 4px rgba(4, 14, 17, 0.95), 0 2px 16px rgba(4, 14, 17, 0.9);
}

/* shimmer — mirrored light streaks along the waterline (signature) */

.shimmer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 150px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.shimmer i {
  position: absolute;
  top: 0; bottom: 0;
  left: -50%;
  width: 200%;
  mix-blend-mode: screen;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(247, 224, 178, 0)   0px,
      rgba(247, 224, 178, 0.16) 2px,
      rgba(247, 224, 178, 0)   5px,
      rgba(247, 224, 178, 0)   38px,
      rgba(214, 140, 91, 0.13) 40px,
      rgba(214, 140, 91, 0)    43px,
      rgba(214, 140, 91, 0)    90px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.35) 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 45%, rgba(0,0,0,0.35) 100%);
  animation: drift 64s linear infinite;
}

.shimmer i:nth-child(2) {
  background-image:
    repeating-linear-gradient(90deg,
      rgba(247, 224, 178, 0)    0px,
      rgba(247, 224, 178, 0.10) 3px,
      rgba(247, 224, 178, 0)    7px,
      rgba(247, 224, 178, 0)    61px);
  animation: drift 41s linear infinite reverse, breathe 7s ease-in-out infinite;
}

@keyframes drift {
  from { transform: translateX(0); }
  to   { transform: translateX(25%); }
}

@keyframes breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* ---------- quote card ---------- */

.quote-card {
  background: rgba(247, 243, 234, 0.96);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  box-shadow: 0 30px 70px rgba(3, 12, 15, 0.55);
  padding: 30px 30px 26px;
  color: var(--ink);
}

/* keep card text ink even when the card sits inside an .on-dark section */
.on-dark .quote-card h2, .on-dark .quote-card h3,
.quote-card h2, .quote-card h3 { color: var(--ink); }

.quote-card h2 {
  font-size: 25px;
  margin-bottom: 4px;
}

.quote-card .quote-sub {
  font-size: 13.5px;
  color: var(--ink-soft);
  margin-bottom: 18px;
}

.field { margin-bottom: 13px; }

.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

.field input, .field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 15.5px;
  color: var(--ink);
  background: #FFFEFA;
  border: 1px solid rgba(24, 60, 60, 0.28);
  border-radius: 3px;
  padding: 11px 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field textarea { resize: vertical; min-height: 58px; }

.field.has-error input, .field.has-error textarea { border-color: var(--error); }

.field-error {
  display: none;
  color: var(--error);
  font-size: 12.5px;
  margin-top: 4px;
}
.field.has-error .field-error { display: block; }

.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}

.btn-submit {
  width: 100%;
  margin-top: 6px;
  padding: 16px 24px;
  font-size: 16.5px;
}
.btn-submit[disabled] { opacity: 0.65; cursor: wait; transform: none; }

.form-microcopy {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
  letter-spacing: 0.02em;
}

.form-fail {
  display: none;
  margin-top: 12px;
  font-size: 13.5px;
  color: var(--error);
  text-align: center;
}
.form-fail.show { display: block; }
.form-fail a { font-weight: 500; }

/* success state */

[data-form-success] { text-align: center; padding: 26px 6px 12px; }

[data-form-success] .success-mark {
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  border-radius: 50%;
  border: 1px solid var(--copper-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--copper-deep);
}

[data-form-success] h3 { font-size: 24px; margin-bottom: 10px; }

[data-form-success] p { font-size: 15px; color: var(--ink-soft); max-width: 34ch; margin: 0 auto 20px; }

.success-tel {
  display: block;
  background: var(--copper);
  color: var(--btn-ink);
  text-decoration: none;
  font-family: var(--serif);
  font-size: 27px;
  letter-spacing: 0.03em;
  padding: 18px 20px;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(199, 127, 79, 0.35);
}
.success-tel small {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ---------- intro strip (teal) ---------- */

.intro {
  background: var(--teal);
  padding: 92px 0 86px;
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
}

.intro h2 { font-size: clamp(1.9rem, 2.9vw, 2.65rem); margin-bottom: 20px; max-width: 20ch; }

.intro .lede { color: var(--on-dark); }

.intro-facts { border-top: 1px solid var(--hair-light); }

.intro-facts li {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 18px 2px;
  border-bottom: 1px solid var(--hair-light);
}

.intro-facts .fact-k {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--cream);
}

.intro-facts .fact-v {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
  text-align: right;
  white-space: nowrap;
}

/* ---------- services ---------- */

.services { padding: 100px 0 90px; }

.section-head { max-width: 640px; margin-bottom: 54px; }
.section-head h2 { font-size: clamp(1.9rem, 3vw, 2.7rem); margin-bottom: 16px; }
.section-head p { color: var(--ink-soft); }

.services-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  border-top: 1px solid var(--hair-dark);
}

.service-item {
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--hair-dark);
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: start;
}

.service-num {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--copper-deep);
  letter-spacing: 0.08em;
  padding-top: 5px;
}

.service-item h3 { font-size: 21.5px; margin-bottom: 8px; }

.service-item p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- service area (teal) ---------- */

.areas {
  background: var(--teal);
  padding: 96px 0 90px;
}

.areas-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.35fr);
  gap: 80px;
  align-items: start;
}

.areas-sticky h2 { font-size: clamp(1.9rem, 2.9vw, 2.65rem); margin-bottom: 18px; max-width: 16ch; }
.areas-sticky p { color: var(--on-dark-dim); font-size: 16px; max-width: 38ch; }
.areas-sticky .btn { margin-top: 28px; }

.town-list { border-top: 1px solid var(--hair-light); }

.town-link {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr auto;
  align-items: baseline;
  gap: 22px;
  padding: 23px 6px;
  border-bottom: 1px solid var(--hair-light);
  text-decoration: none;
  transition: background 0.18s ease;
}

.town-link:hover { background: rgba(247, 243, 234, 0.05); }

.town-name { font-family: var(--serif); font-size: 24px; color: var(--cream); white-space: nowrap; }

.town-tag { font-size: 13.5px; color: var(--on-dark-dim); letter-spacing: 0.03em; }

.town-arrow {
  color: var(--copper);
  font-size: 19px;
  transition: transform 0.18s ease;
}
.town-link:hover .town-arrow { transform: translateX(6px); }

/* ---------- why us ---------- */

.why { padding: 100px 0 92px; }

.why-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: 80px;
  align-items: start;
}

.why-points { border-top: 1px solid var(--hair-dark); }

.why-point { padding: 26px 2px 24px; border-bottom: 1px solid var(--hair-dark); }

.why-point h3 { font-size: 21px; margin-bottom: 7px; }

.why-point p { font-size: 15.5px; color: var(--ink-soft); }

.away-card {
  background: var(--water);
  color: var(--on-dark);
  border-radius: 6px;
  padding: 40px 36px;
  position: sticky;
  top: 110px;
}

.away-card .label { color: var(--copper); }

.away-card h3 { color: var(--cream); font-size: 24px; margin-bottom: 14px; }

.away-card p { font-size: 15.5px; color: var(--on-dark-dim); margin-bottom: 22px; }

/* ---------- gallery (midnight) ---------- */

.gallery {
  background: var(--water);
  padding: 100px 0 96px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.gallery-grid figure { position: relative; margin: 0; }

.g-7 { grid-column: span 7; }
.g-5 { grid-column: span 5; }

.gallery-grid figure { transition: transform 0.28s ease; }

.gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  transition: box-shadow 0.28s ease;
}

.gallery-grid figure:hover { transform: translateY(-5px); }
.gallery-grid figure:hover img { box-shadow: 0 18px 44px rgba(199, 127, 79, 0.22), 0 6px 18px rgba(0, 0, 0, 0.5); }
.gallery-grid figure:hover figcaption { color: var(--copper); }
.gallery-grid figcaption { transition: color 0.28s ease; }

.gallery-grid figcaption {
  margin-top: 12px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-dark-dim);
}

.gallery-note {
  grid-column: span 5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--hair-light);
  border-radius: 4px;
  padding: 40px 36px;
}

.gallery-note h3 { color: var(--cream); font-size: 23px; margin-bottom: 12px; }

.gallery-note p { font-size: 14.5px; color: var(--on-dark-dim); margin-bottom: 20px; }

.gallery-note a { color: var(--copper); text-decoration: none; font-weight: 500; letter-spacing: 0.05em; }
.gallery-note a:hover { text-decoration: underline; }

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

.reviews { padding: 100px 0 88px; }

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

.review-card {
  border: 1px solid var(--hair-dark);
  border-radius: 6px;
  padding: 34px 30px 28px;
  background: #FBF8F1;
}

.review-card blockquote {
  font-family: var(--serif);
  font-size: 19.5px;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 18px;
}

.review-card cite {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-deep);
}

.reviews-disclaimer {
  margin-top: 26px;
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
  max-width: 62ch;
}

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

.faq { padding: 96px 0 100px; background: var(--cream-2); }

.faq-list { border-top: 1px solid var(--hair-dark); }

.faq-list details { border-bottom: 1px solid var(--hair-dark); }

.faq-list summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 26px;
  padding: 24px 4px;
  font-family: var(--serif);
  font-size: 20.5px;
  color: var(--ink);
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: '+';
  font-family: var(--sans);
  font-weight: 300;
  font-size: 26px;
  color: var(--copper-deep);
  line-height: 1;
  transition: transform 0.22s ease;
  flex: 0 0 auto;
}

.faq-list details[open] summary::after { transform: rotate(45deg); }

.faq-list details p {
  padding: 0 4px 26px;
  max-width: 66ch;
  color: var(--ink-soft);
  font-size: 16px;
}

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

.final-cta {
  position: relative;
  overflow: hidden; /* contains the drifting shimmer overlay — no horizontal page overflow */
  background: var(--water) url('../assets/img/reflection.webp') center / cover no-repeat;
  padding: 130px 0;
  text-align: center;
}

.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 18, 22, 0.82), rgba(6, 18, 22, 0.55) 50%, rgba(6, 18, 22, 0.85));
}

/* signature shimmer, echoed on the closing band */
.final-cta::after {
  content: '';
  position: absolute;
  left: -50%;
  right: -50%;
  bottom: 0;
  height: 46%;
  mix-blend-mode: screen;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg,
      rgba(247, 224, 178, 0)    0px,
      rgba(247, 224, 178, 0.07) 3px,
      rgba(247, 224, 178, 0)    7px,
      rgba(247, 224, 178, 0)    54px,
      rgba(214, 140, 91, 0.06)  56px,
      rgba(214, 140, 91, 0)     60px,
      rgba(214, 140, 91, 0)     118px);
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
  mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.8));
  animation: drift 74s linear infinite;
}

.final-cta .wrap { position: relative; z-index: 2; }

.final-cta h2 {
  color: var(--cream);
  font-size: clamp(2.1rem, 3.6vw, 3.3rem);
  max-width: 21ch;
  margin: 0 auto 18px;
  text-shadow: 0 2px 22px rgba(3, 10, 13, 0.8);
}

.final-cta p {
  color: #D9D3C2;
  font-weight: 300;
  font-size: 18px;
  max-width: 52ch;
  margin: 0 auto 36px;
  text-shadow: 0 1px 12px rgba(3, 10, 13, 0.8);
}

.final-cta .hero-ctas { justify-content: center; }

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

.site-footer {
  background: var(--water);
  color: var(--on-dark-dim);
  padding: 66px 0 46px;
  font-size: 14.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--hair-light);
}

.footer-brand .brand-top { font-size: 23px; }
.footer-brand p { margin-top: 16px; max-width: 34ch; }

.footer-tel {
  display: inline-block;
  margin-top: 18px;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 22px;
  text-decoration: none;
}
.footer-tel:hover { color: var(--copper); }

.footer-col h3 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 18px;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 10px; }

.footer-col a { color: var(--on-dark-dim); text-decoration: none; }
.footer-col a:hover { color: var(--cream); }

.footer-bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #7E8C86;
}

/* ============================================================
   TOWN PAGES
   ============================================================ */

.town-hero {
  position: relative;
  min-height: 440px;
  display: flex;
  align-items: flex-end;
  background: var(--water);
  overflow: hidden;
  padding: 150px 0 58px;
}

.town-hero img.town-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.town-hero .hero-scrim {
  background:
    linear-gradient(100deg, rgba(6, 20, 24, 0.78) 0%, rgba(6, 20, 24, 0.52) 44%, rgba(6, 20, 24, 0.22) 78%),
    linear-gradient(180deg, rgba(6, 20, 24, 0.5) 0%, rgba(6, 20, 24, 0.3) 40%, rgba(6, 20, 24, 0.88) 100%);
}

.town-hero .wrap { position: relative; z-index: 2; }

.town-hero h1 {
  color: var(--cream);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  max-width: 19ch;
  text-shadow: 0 2px 22px rgba(3, 10, 13, 0.85);
  margin-bottom: 14px;
}

.town-hero .label { color: #E2A879; text-shadow: 0 1px 10px rgba(3, 10, 13, 0.9); margin-bottom: 14px; }

.town-hero .town-hero-sub {
  color: #DCD6C5;
  font-weight: 300;
  font-size: 18px;
  max-width: 52ch;
  text-shadow: 0 1px 12px rgba(3, 10, 13, 0.85);
}

/* Call + quote buttons sit in every service-area hero, same as the homepage. */
.town-hero .hero-ctas { margin-top: 28px; }

.town-body { padding: 84px 0 30px; }

.town-body .prose h2 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); margin: 44px 0 16px; }
.town-body .prose h2:first-child { margin-top: 0; }
.town-body .prose p { margin-bottom: 18px; color: #24393C; }
.town-body .prose ul { margin: 0 0 18px 20px; color: #24393C; }
.town-body .prose li { margin-bottom: 8px; }

.town-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--teal);
  border-radius: 6px;
  padding: 36px 40px;
  margin: 56px 0;
}

.town-callout .callout-text { max-width: 46ch; }

.town-callout h2 { color: var(--cream); font-size: 24px; margin-bottom: 8px; }

.town-callout p { color: var(--on-dark-dim); font-size: 15px; margin: 0; }

/* season timeline (camdenton) */
.season-steps { border-top: 1px solid var(--hair-dark); margin: 10px 0 26px; }
.season-step {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 22px 2px;
  border-bottom: 1px solid var(--hair-dark);
}
.season-step .when {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-deep);
  padding-top: 5px;
}
.season-step h3 { font-size: 19.5px; margin-bottom: 6px; }
.season-step p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* two-line split (lake ozark) */
.twoline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--hair-dark);
  border-radius: 6px;
  overflow: hidden;
  margin: 10px 0 26px;
}
.twoline > div { padding: 34px 32px; }
.twoline > div:first-child { border-right: 1px solid var(--hair-dark); }
.twoline h3 { font-size: 21px; margin-bottom: 10px; }
.twoline p { font-size: 15px; color: var(--ink-soft); margin: 0; }

/* checklist (four seasons / porto cima) */
.check-list { list-style: none; margin: 10px 0 26px !important; border-top: 1px solid var(--hair-dark); }
.check-list li {
  padding: 16px 2px 16px 34px;
  border-bottom: 1px solid var(--hair-dark);
  position: relative;
  margin: 0 !important;
  font-size: 15.5px;
  color: #24393C;
}
.check-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 24px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--copper-deep);
  border-bottom: 2px solid var(--copper-deep);
  transform: rotate(-45deg);
}

/* mini Q&A (sunrise beach) */
.mini-qa { margin: 10px 0 26px; border-top: 1px solid var(--hair-dark); }
.mini-qa dt {
  font-family: var(--serif);
  font-size: 19.5px;
  padding: 20px 2px 6px;
}
.mini-qa dd { padding: 0 2px 20px; border-bottom: 1px solid var(--hair-dark); color: var(--ink-soft); font-size: 15.5px; }

/* quote section on town pages */
.town-quote {
  background: var(--teal);
  padding: 90px 0 96px;
  margin-top: 70px;
}

.town-quote-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 70px;
  align-items: center;
}

.town-quote h2 { font-size: clamp(1.9rem, 2.9vw, 2.6rem); margin-bottom: 16px; }

.town-quote .town-quote-copy p { color: var(--on-dark-dim); max-width: 44ch; margin-bottom: 24px; }

.town-quote .quote-card { box-shadow: 0 26px 60px rgba(3, 12, 15, 0.45); }

/* siblings strip */
.siblings { padding: 58px 0 64px; }

.siblings h2 {
  font-size: 13px;
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper-deep);
  margin-bottom: 22px;
}

.siblings-links { display: flex; flex-wrap: wrap; gap: 12px; }

.siblings-links a {
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink);
  border: 1px solid rgba(24, 60, 60, 0.32);
  border-radius: 100px;
  padding: 9px 20px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.siblings-links a:hover { background: var(--teal); color: var(--cream); border-color: var(--teal); }

/* ============================================================
   Motion preferences
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .shimmer i, .final-cta::after { animation: none; opacity: 0.75; }
  *, *::before, *::after { transition-duration: 0.001s !important; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1120px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 44px; }
  .services-list { column-gap: 48px; }
  .areas-grid, .why-grid { gap: 52px; }
}

@media (max-width: 960px) {
  .main-nav { display: none; }

  .hero { min-height: 0; padding: 122px 0 84px; }
  .hero-inner { grid-template-columns: 1fr; gap: 54px; }
  .hero-copy { padding-top: 8vh; }
  .quote-card { max-width: 560px; }

  .intro-grid, .areas-grid, .why-grid, .town-quote-grid { grid-template-columns: 1fr; gap: 46px; }

  .services-list { grid-template-columns: 1fr; }

  .review-grid { grid-template-columns: 1fr; max-width: 620px; }

  .away-card { position: static; }

  .g-7, .g-5, .gallery-note { grid-column: span 12; }
  .gallery-grid img { aspect-ratio: 16 / 9.5; }

  .footer-grid { grid-template-columns: 1fr; gap: 38px; }

  .twoline { grid-template-columns: 1fr; }
  .twoline > div:first-child { border-right: 0; border-bottom: 1px solid var(--hair-dark); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  .wrap, .wrap-narrow { padding: 0 20px; }

  .header-inner { padding-top: 11px; padding-bottom: 11px; gap: 12px; }
  .brand-top { font-size: 17px; }
  .brand-sub { font-size: 8px; letter-spacing: 0.26em; }
  .header-phone { padding: 10px 12px; font-size: 13.5px; gap: 7px; }

  .hero { padding: 108px 0 72px; }
  .hero-copy { padding-top: 4vh; }
  .hero-copy h1 { font-size: clamp(2.05rem, 8.6vw, 2.6rem); }
  .hero-lede { font-size: 17px; }
  .hero-ctas .btn { width: 100%; }
  .hero-note { text-align: center; }

  .quote-card { padding: 24px 20px 22px; }

  .intro, .services, .areas, .why, .gallery, .reviews, .faq { padding-top: 68px; padding-bottom: 64px; }

  .town-link { grid-template-columns: 1fr auto; }
  .town-tag { grid-column: 1 / -1; }
  .town-name { font-size: 21px; }

  .service-item { grid-template-columns: 40px 1fr; gap: 12px; }

  .final-cta { padding: 92px 0; }

  .town-hero { padding: 130px 0 44px; min-height: 380px; }
  .town-body { padding: 60px 0 20px; }
  .town-callout { padding: 28px 24px; }
  .town-quote { padding: 66px 0 72px; }
  .season-step { grid-template-columns: 1fr; gap: 6px; }

  .faq-list summary { font-size: 18px; }
}


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


/* The dropdown buttons inherited body ink onto the dark header while the sibling
   links were cream. Match them. Desktop only. */
@media (min-width: 901px) {
  .site-header .nav-list > li > a,
  .site-header .nav-top { color: var(--on-dark); }
  .site-header .nav-list > li > a:hover,
  .site-header .nav-top:hover { color: var(--cream); }
}


/* ==========================================================================
   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) {
  /* dark header: menu button visible against the teal/photo backdrop */
  .site-header .nav-toggle { color: var(--cream); border-color: rgba(247,243,234,0.55); }
}

@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;
  }
}

/* ------------------------------------------------------------------
   Quote form: City + State sit side by side so the address block does
   not stretch the card. Stacks on narrow phones like everything else.
   ------------------------------------------------------------------ */
.field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 13px;
}
@media (max-width: 560px) {
  .field-pair { grid-template-columns: 1fr; gap: 0; }
}

/* iOS Safari zooms the whole page when a focused input is under 16px.
   Desktop keeps 15.5px; phones get 16px so tapping a field does not jump. */
@media (max-width: 900px) {
  .field input,
  .field textarea { font-size: 16px; }
}

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

/* The intro fact rows are a two-up flex line; on a very narrow phone the label
   and value cannot both fit, so let them stack rather than push the page wide. */
@media (max-width: 380px) {
  .intro-facts li { flex-wrap: wrap; gap: 4px 12px; }
}

/* The header is a transparent-to-dark gradient designed to sit over the hero
   image. On a page with no hero behind it (privacy, terms) the cream page
   showed through and the nav links became unreadable — give it a solid ground. */
body.no-hero .site-header {
  background: var(--ink, #182B2E);
  background-image: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* --- UI pass, Sept 2026 ---
   Brand sub-label was 9.5px on desktop. The callout button and the gallery
   note link were under 40px tall on a phone. */
.brand-sub { font-size: 11px; }
@media (max-width: 900px) {
  .btn { min-height: 44px; }
  .gallery-note a,
  .town-callout .btn {
    display: inline-flex;
    align-items: center;
    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(10, 30, 34, 0.97);
  box-shadow: 0 -8px 24px rgba(5, 18, 20, 0.36);
}
.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: #CA8558; color: #182B2E; }
.callbar .callbar-quote { background: #F7F3EA; color: #0E3335; }
.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 either: keep "Lake Ozark" on one line and drop the
   second line that was stacking the header three deep on small phones. */
@media (max-width: 560px) {
  .brand .brand-sub { display: none; }
  .brand .brand-top { white-space: nowrap; }
  .site-header .brand, .site-head .brand { flex: 0 0 auto; min-width: max-content; }
}

/* 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 {
    position: static;
    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; }

  .site-header {
    background: var(--ink, #182B2E);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }
  .town-hero { padding-top: 44px; }
  body.no-hero .town-body { padding-top: 24px; }
}


/* --------------------------------------------------------------------------
   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) {
  .header-phone { display: none; }
  .brand .brand-sub { display: block; font-size: 10px; letter-spacing: 0.18em; }
  .site-header .brand, .site-head .brand { flex: 1 1 auto; min-width: 0; }
}


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


/* --------------------------------------------------------------------------
   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
   The artwork is light ink and both the header and the footer are dark, so no
   reversed variant is needed. Neither the picture nor the image may shrink.
   -------------------------------------------------------------------------- */
.site-header .brand { display: flex; flex-direction: row; align-items: center; gap: 10px; min-width: 0; }
.site-header .brand picture { display: block; flex: 0 0 auto; }
.brand-lines { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.logo-img {
  display: block;
  flex: 0 0 auto;
  height: 58px;
  width: auto;
  aspect-ratio: 468 / 140;
}
.footer-logo {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: 14px;
}
@media (min-width: 701px) {
  .site-header .brand .brand-lines { display: none; }
}
@media (max-width: 700px) {
  .logo-img { height: 44px; aspect-ratio: 74 / 110; }
  .footer-logo { max-width: 260px; }
}
@media (max-width: 380px) {
  .logo-img { height: 38px; }
}