/* ============ Fonts ============ */
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-900italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-400.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2");
}

/* ============ Tokens ============ */
:root {
  --paper: #fbf6e8;
  --paper-dk: #f3e9cf;
  /* Coastal palette (2026-10-05, Mary Jo: turquoise, sea green, coastal blue; no red or navy).
     Class names like .band-navy, .band-red and .btn-rust are historical: they now paint
     teal, sea green and coral. */
  --teal: #07687a;
  --teal-dk: #074d5c;
  --charcoal: #0c3b46;
  --charcoal-dk: #082a32;
  --aqua: #4cc6d4;
  --aqua-dk: #2fa8b6;
  --aqua-light: #a6e8ee;
  --sky: #d3f1f5;
  --sea: #09805f;
  --sea-dk: #076a4f;
  --foam: #8fe6c6;
  --coral: #ff7b5c;
  --coral-dk: #f5694a;
  --coral-ink: #06323b;
  --cream: #fffaf0;
  --ink: #2b2b2b;
  --ink-soft: #4a463c;
  --line: rgba(43, 43, 43, 0.16);
  --line-on-dark: rgba(243, 238, 220, 0.25);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;

  --wrap: 74rem;
  --section-pad: clamp(3rem, 6vw, 5.5rem);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-card: 0 14px 30px -14px rgba(20, 30, 40, 0.35);
  --shadow-pill: 0 6px 16px -6px rgba(20, 30, 40, 0.4);
}

/* ============ Reset ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.5;
  background-image:
    radial-gradient(rgba(43,43,43,0.05) 1px, transparent 1px),
    radial-gradient(rgba(43,43,43,0.035) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 2px 4px;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 900; line-height: 1.05; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--sea); color: var(--cream);
  padding: 0.8rem 1.2rem; font-family: var(--font-body); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 3px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 60rem) { .wrap { padding: 0 2.5rem; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 0.8rem; color: var(--sea-dk);
}
.eyebrow::before { content: ""; width: 1.6em; height: 2px; background: var(--coral); }
.on-dark .eyebrow { color: var(--aqua-light); }
.on-dark .eyebrow::before { background: var(--aqua-light); }

.section-head { max-width: 40rem; margin-bottom: 2.4rem; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-top: 0.4rem; color: var(--teal); }
.on-dark .section-head h2 { color: var(--cream); }
.section-head p { font-size: 1.1rem; color: var(--ink-soft); margin-top: 0.7rem; }
.on-dark .section-head p { color: rgba(243,238,220,0.94); }
.on-dark .section-head .eyebrow { color: var(--aqua-light); }

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 1rem;
  padding: 0.85em 1.7em; border-radius: 999px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  box-shadow: var(--shadow-pill);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-aqua { background: var(--aqua); color: var(--charcoal); }
.btn-aqua:hover { background: var(--aqua-dk); color: var(--charcoal); }
.btn-rust { background: var(--coral); color: var(--coral-ink); }
.btn-rust:hover { background: var(--coral-dk); color: var(--coral-ink); }
.btn-outline { background: transparent; border-color: currentColor; color: inherit; box-shadow: none; }
.btn-outline:hover { background: rgba(0,0,0,0.06); }
.on-dark .btn-outline:hover { background: rgba(255,255,255,0.1); }
.btn-sm { padding: 0.6em 1.3em; font-size: 0.9rem; }

/* ============ Header / nav ============ */
.masthead {
  position: sticky; top: 0; z-index: 100;
  background: var(--charcoal); color: var(--cream);
  border-bottom: 3px solid var(--aqua);
}
.masthead-in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.5rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--cream); }
.brand-mark { width: 2.2rem; height: 2.2rem; color: var(--aqua); flex: none; }
.brand-word { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.3rem; line-height: 1; }
.brand-word small { display: block; font-family: var(--font-body); font-style: normal; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.62rem; color: var(--aqua); margin-top: 0.3em; }

.nav-toggle {
  display: inline-flex; background: none; border: 2px solid var(--line-on-dark); color: var(--cream);
  border-radius: 999px; padding: 0.5rem 0.9rem; min-height: 44px; align-items: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem;
}
.nav-toggle svg { width: 1.1rem; height: 1.1rem; }

.nav { display: flex; align-items: center; gap: 1.8rem; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; }
.nav-links a {
  text-decoration: none; color: var(--cream); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 0.92rem; padding: 0.3em 0; border-bottom: 2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { border-color: var(--aqua); color: var(--aqua); }
.nav-links a.btn { color: var(--charcoal); border-bottom: none; padding: 0.6em 1.3em; }
.nav-links a.btn:hover { color: var(--charcoal); }

@media (max-width: 61.9rem) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--charcoal-dk); border-bottom: 3px solid var(--aqua);
    padding: 0.5rem 1.5rem 1.2rem;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 0.8rem 0; border-bottom: 1px solid var(--line-on-dark); }
  .nav-cta { order: -1; margin: 0.6rem 0 0.2rem; align-self: flex-start; }
}
@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .nav-links { display: flex !important; }
}

/* ============ Dividers ============ */
.scallop {
  height: 1.9rem; width: 100%; display: block;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 2.4rem 2.4rem; mask-size: 2.4rem 2.4rem;
  -webkit-mask-position: center top; mask-position: center top;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><circle cx="24" cy="0" r="17" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><circle cx="24" cy="0" r="17" fill="black"/></svg>');
}
.scallop-navy { background: var(--teal); }
.scallop-charcoal { background: var(--charcoal); }
.scallop-paper { background: var(--paper); }

.torn {
  height: 2.2rem; width: 100%; display: block; margin-bottom: -1px;
  clip-path: polygon(0% 100%,3% 22%,7% 68%,11% 10%,15% 55%,19% 30%,23% 78%,27% 15%,31% 60%,35% 5%,39% 45%,43% 72%,47% 20%,51% 58%,55% 8%,59% 50%,63% 25%,67% 70%,71% 12%,75% 62%,79% 32%,83% 76%,87% 18%,91% 55%,95% 6%,100% 40%,100% 100%);
}
.torn-navy { background: var(--teal); }
.torn-charcoal { background: var(--charcoal); }

/* ============ Hero ============ */
.hero {
  position: relative; background: var(--paper); overflow: hidden;
  padding: 3.2rem 0 0;
}
.hero-in { display: grid; gap: 2.2rem; align-items: center; padding-bottom: 3rem; }
@media (min-width: 58rem) {
  .hero-in { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.4rem); color: var(--teal); margin-top: 0.35em;
}
.hero h1 em { display: block; font-size: 0.44em; font-style: italic; color: var(--sea-dk); margin-top: 0.3em; }
.hero-sub { font-size: 1.2rem; color: var(--ink-soft); max-width: 32rem; margin: 1.1rem 0 1.8rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-photo { position: relative; }
.hero-photo-img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border-radius: var(--radius); box-shadow: var(--shadow-card);
}

.framed-photo { margin: 2.4rem auto 0; max-width: 34rem; text-align: center; }
.framed-photo img {
  width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover;
  border: 6px solid var(--cream); box-shadow: var(--shadow-card); border-radius: var(--radius);
}
.framed-photo figcaption {
  margin-top: 0.7rem; font-family: var(--font-display); font-style: italic;
  font-weight: 900; color: var(--teal); font-size: 1.15rem;
}

.page-hero {
  background: var(--teal); color: var(--cream); position: relative; overflow: hidden;
}
.page-hero-in { padding-top: 3.4rem; padding-bottom: 3.2rem; }
.page-hero-copy { max-width: 42rem; position: relative; }
.page-hero h1 { color: var(--cream); font-size: clamp(2.2rem, 5vw, 3.2rem); margin-top: 0.4em; }
.page-hero p { color: rgba(243,238,220,0.94); font-size: 1.1rem; margin-top: 0.8rem; max-width: 34rem; }
.page-hero .lighthouse-badge { position: absolute; right: -1.5rem; top: 1rem; width: 9rem; height: 9rem; opacity: 0.16; color: var(--cream); z-index: 1; }

/* Photo-backed page hero: client photo under a navy wash so cream copy stays readable */
.page-hero-photo { background: var(--teal-dk); }
.page-hero-photo .page-hero-in { padding-top: 5rem; padding-bottom: 4.6rem; }
.page-hero-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: saturate(1.18) contrast(1.04);
}
.page-hero-wash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,77,92,0.78) 0%, rgba(7,77,92,0.72) 100%);
}
@media (min-width: 58rem) {
  .page-hero-photo .page-hero-in { padding-top: 6.5rem; padding-bottom: 6rem; }
  .page-hero-wash { background: linear-gradient(90deg, rgba(7,77,92,0.92) 0%, rgba(7,77,92,0.80) 46%, rgba(7,77,92,0.22) 100%); }
}
.page-hero-photo .page-hero-copy { z-index: 2; }
.page-hero-photo .lighthouse-badge { opacity: 0.22; }

/* ============ Full-bleed photo hero (home) ============ */
.hero.hero-bleed { background: var(--teal-dk); color: var(--cream); padding: 0; }
.hero.hero-bleed .hero-in {
  position: relative; z-index: 3; grid-template-columns: 1fr;
  padding-top: 5.5rem; padding-bottom: 5rem;
}
.hero.hero-bleed .hero-copy { max-width: 44rem; }
.hero.hero-bleed .eyebrow { color: var(--aqua-light); }
.hero.hero-bleed .eyebrow::before { background: var(--aqua-light); }
.hero.hero-bleed h1 { color: var(--cream); }
.hero.hero-bleed h1 em { color: var(--aqua-light); }
.hero.hero-bleed .hero-sub { color: rgba(243,238,220,0.94); max-width: 36rem; }
.hero.hero-bleed .page-hero-wash {
  background: linear-gradient(180deg, rgba(7,77,92,0.90) 0%, rgba(7,77,92,0.80) 100%);
}
.hero.hero-bleed .beam { z-index: 1; }
/* Original tin-sign logo: small badge pinned to the bottom-right corner of the home hero */
.hero.hero-bleed .lighthouse-badge { display: none; }
.hero-sign { position: absolute; right: 1rem; bottom: 1rem; width: 5.5rem; margin: 0; z-index: 3; transform: rotate(3deg); pointer-events: none; }
.hero-sign img { display: block; width: 100%; height: auto; border-radius: 5px; box-shadow: 0 10px 26px rgba(0,0,0,0.45), 0 0 0 2px rgba(243,238,220,0.9); background: #fff; }
.hero.hero-bleed .hero-in { padding-bottom: 8rem; }
@media (min-width: 58rem) {
  .hero-sign { right: 2.5rem; bottom: 2rem; width: 9rem; }
  .hero-sign img { box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 0 3px rgba(243,238,220,0.9); }
}
@media (prefers-reduced-motion: no-preference) { .hero-sign { animation: rise 1s cubic-bezier(.2,.7,.2,1) 0.2s both; } }
.hero.hero-bleed .lighthouse-badge {
  position: absolute; right: 2vw; bottom: -2.5rem; width: 17rem; height: 17rem;
  opacity: 0.16; color: var(--cream); z-index: 2; pointer-events: none;
}
@media (max-width: 57.99rem) {
  .hero.hero-bleed .lighthouse-badge { width: 9rem; height: 9rem; right: -1rem; top: 0.6rem; bottom: auto; }
}
@media (min-width: 58rem) {
  .hero.hero-bleed .hero-in { padding-top: 8rem; padding-bottom: 7.5rem; }
  .hero.hero-bleed .page-hero-wash {
    background: linear-gradient(90deg, rgba(7,77,92,0.95) 0%, rgba(7,77,92,0.86) 46%, rgba(7,77,92,0.28) 100%);
  }
}

/* ============ Photo-backed bands (client photo under a dark wash) ============ */
.band-photo { position: relative; overflow: hidden; }
.band-photo > .band-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
}
.band-photo > .band-wash { position: absolute; inset: 0; }
.band-photo.band-charcoal > .band-wash { background: rgba(43,43,43,0.87); }
.band-photo.band-navy > .band-wash { background: rgba(7,104,122,0.88); }
.band-photo > .wrap { position: relative; z-index: 1; }

/* ============ Beam signature (lighthouse motif) ============ */
.beam-wrap { position: relative; }
.beam {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit;
}
.beam::after {
  content: ""; position: absolute; top: -60%; left: -20%; width: 60%; height: 220%;
  background: conic-gradient(from 200deg at 0% 50%, rgba(95,195,207,0) 0deg, rgba(95,195,207,0.22) 14deg, rgba(95,195,207,0) 30deg);
  animation: sweep 7s linear infinite;
  transform-origin: 0% 50%;
}
@keyframes sweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .beam::after { animation: none; } }

/* ============ Sections / bands ============ */
.band { padding: var(--section-pad) 0; }
.band-paper { background: var(--paper); }
.band-navy { background: var(--teal); color: var(--cream); }
.band-charcoal { background: var(--charcoal); color: var(--cream); }
.on-dark { color: var(--cream); }
.on-dark a:not(.btn) { color: var(--aqua-light); }

/* ============ Why / feature grid ============ */
.why-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46rem) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
.why-card {
  background: rgba(243,238,220,0.06); border: 1px solid var(--line-on-dark); border-radius: var(--radius);
  padding: 1.6rem 1.4rem; text-align: left;
}
.why-card .icon-circle { margin-bottom: 1rem; }
/* optional slim photo band on top of a why-card, icon overlaps its bottom edge */
.why-card.has-photo { padding-top: 0; overflow: hidden; }
.why-card .icon-circle { margin-bottom: 0.9rem; }
.why-card.has-photo .why-photo {
  position: relative; aspect-ratio: 16 / 10; margin: 0 -1.4rem 0; overflow: hidden;
  border-bottom: 3px solid var(--sea);
}
.why-card.has-photo .why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.why-card.has-photo .why-photo .photo-placeholder { border: 0; border-bottom: 2px dashed var(--aqua); }
.why-card.has-photo .why-photo .photo-placeholder-label { font-size: 0.72rem; padding: 0.4em 0.7em; }
.why-card.has-photo .icon-circle { margin-top: 1.4rem; margin-bottom: 0.9rem; }
.why-card h3 { font-family: var(--font-body); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; color: var(--cream); }
.why-card p { font-size: 0.98rem; color: var(--cream); margin-top: 0.5rem; margin-bottom: 0; }

.icon-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.4rem; height: 3.4rem; border-radius: 50%;
  background: rgba(95,195,207,0.14); border: 1.5px solid var(--aqua); color: var(--aqua); flex: none;
}
.icon-circle svg { width: 1.8rem; height: 1.8rem; }
.icon-circle.lg { width: 4.2rem; height: 4.2rem; }
.icon-circle.lg svg { width: 2.2rem; height: 2.2rem; }

/* ============ Card grid (photo + title bar + pill) ============ */
.card-grid { display: grid; gap: 1.8rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }

.tile {
  position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-card);
  background: var(--paper-dk); display: flex; flex-direction: column;
}
.tile-photo { position: relative; aspect-ratio: 4 / 3; }
.tile-bar {
  background: var(--charcoal); color: var(--cream); padding: 0.85rem 1.1rem;
  font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.2rem;
  border-top: 3px solid var(--sea);
}
.tile-body { padding: 1.1rem 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.tile-body p { font-size: 0.98rem; color: var(--ink-soft); flex: 1; }
.tile-cta { align-self: flex-end; margin-top: 0.8rem; }

/* ============ Photo placeholders (no stock photos) ============ */
.photo-placeholder {
  width: 100%; height: 100%; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: repeating-linear-gradient(45deg, var(--paper-dk), var(--paper-dk) 10px, #ded4b2 10px, #ded4b2 20px);
  border: 2px dashed var(--teal); color: var(--teal-dk);
  padding: 1rem;
}
.photo-placeholder.static { position: static; aspect-ratio: 4/3; }
.photo-placeholder-label {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 0.82rem; line-height: 1.4; max-width: 18rem;
  background: rgba(243,238,220,0.92); padding: 0.6em 0.8em; border-radius: var(--radius-sm);
}
/* explicit color so dark-section text rules (.why-card p, .on-dark p) never cascade in */
.photo-placeholder .photo-placeholder-label { color: var(--ink); }
.photo-placeholder-label span { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); margin-top: 0.3em; }

/* ============ Polaroid strip ============ */
.polaroid-strip {
  display: flex; gap: 1.4rem; overflow-x: auto; padding: 0.6rem 0.2rem 1.2rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.polaroid {
  flex: 0 0 auto; width: 13.5rem; background: var(--cream); padding: 0.7rem 0.7rem 1.4rem;
  box-shadow: var(--shadow-card); scroll-snap-align: start;
}
.polaroid:nth-child(odd) { transform: rotate(-2deg); }
.polaroid:nth-child(even) { transform: rotate(1.6deg); }
.polaroid-photo.photo-placeholder.static, .polaroid-photo { aspect-ratio: 1/1; }
img.polaroid-photo { width: 100%; height: auto; object-fit: cover; display: block; }
.polaroid figcaption {
  font-family: "Segoe Print", var(--font-body); font-weight: 600; text-align: center;
  margin-top: 0.6rem; font-size: 0.92rem; color: var(--ink-soft);
}

/* ============ Testimonial mosaic ============ */
.testi-grid { display: grid; gap: 1.4rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 46rem) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi {
  background: var(--cream); border-radius: var(--radius); padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-card); position: relative;
}
.testi:nth-child(2) { transform: translateY(0.9rem); }
.testi p { font-size: 1.12rem; color: var(--ink); font-style: italic; line-height: 1.5; }
.testi::before {
  content: "\201C"; position: absolute; top: 0.2rem; right: 1rem; font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 5rem; line-height: 1; color: var(--aqua); opacity: 0.55; pointer-events: none;
}
.testi-stars { color: var(--sun-dk); letter-spacing: 0.12em; font-size: 0.95rem; margin-bottom: 0.5rem; }
.testi-tag { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; }
.testi-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--teal); color: var(--cream);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: var(--font-body); flex: none;
}
.testi-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.88rem; color: var(--ink); }
.testi-name span { display: block; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--ink-soft); font-size: 0.85rem; }
.testi p.todo { color: var(--sea-dk); background: rgba(9,128,95, 0.1); border-color: var(--sea); }

/* ============ Rating headline (reviews band) ============ */
.rating-head { display: grid; gap: 1.4rem; align-items: center; margin-bottom: 2.2rem; }
@media (min-width: 52rem) { .rating-head { grid-template-columns: auto 1fr auto; gap: 2.4rem; } }
.rating-big { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-display); font-style: italic; font-weight: 900; color: var(--cream); line-height: 1; }
.rating-big strong { font-size: clamp(4rem, 9vw, 6.5rem); color: var(--aqua); }
.rating-big span { font-size: 1.4rem; color: rgba(243,238,220,0.85); }
.rating-stars { color: var(--aqua); font-size: 1.5rem; letter-spacing: 0.15em; display: block; margin-top: 0.3rem; }
.rating-copy h2 { margin-top: 0.3rem; }
.rating-copy p { color: rgba(243,238,220,0.94); font-size: 1.1rem; margin-top: 0.5rem; max-width: 34rem; }
.rating-cta { justify-self: start; }
@media (min-width: 52rem) { .rating-cta { justify-self: end; } }

/* Rating pill (hero) */
.rating-pill {
  display: inline-flex; align-items: center; gap: 0.55em; margin-top: 1.3rem; padding: 0.5em 1em; border-radius: 999px;
  background: rgba(243,238,220,0.12); border: 1px solid rgba(166,226,232,0.55); color: var(--cream); text-decoration: none;
  font-family: var(--font-body); font-weight: 700; letter-spacing: 0.04em; font-size: 0.95rem;
}
.rating-pill:hover { background: rgba(243,238,220,0.2); }
.rating-pill b { color: var(--aqua); letter-spacing: 0.1em; }
.rating-pill:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

/* Single-quote band (inner pages) */
.quote-band { text-align: center; max-width: 52rem; margin: 0 auto; }
.quote-band .rating-stars { display: inline-block; margin: 0 0 0.6rem; }
.quote-band blockquote { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.3; color: var(--cream); }
.quote-band figcaption { margin-top: 1rem; font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--aqua-light); }
.quote-band figcaption a { color: inherit; }

/* ============ Rate cards ============ */
.rate-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 46rem) { .rate-grid { grid-template-columns: repeat(3, 1fr); } }
.rate-card { background: var(--cream); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.rate-card-head { background: var(--teal); color: var(--cream); padding: 1rem 1.3rem; }
.rate-card-head h3 { font-family: var(--font-body); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; }
.rate-card-body { padding: 1.3rem 1.3rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.rate-amount { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.9rem; color: var(--sea-dk); }
.rate-unit { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.82rem; color: var(--teal); margin: -0.4rem 0 0.9rem; }
.rate-note { font-size: 0.88rem; color: var(--ink-soft); margin-top: 0.6rem; flex: 1; }
.rate-card .btn { margin-top: 1rem; align-self: flex-start; }

/* ============ TODO badge (visible placeholder marker) ============ */
.todo {
  display: inline-block; font-family: var(--font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 0.76rem; color: var(--sea-dk);
  background: rgba(9,128,95,0.1); border: 1.5px dashed var(--sea); border-radius: 999px;
  padding: 0.2em 0.7em; margin: 0.2em 0.3em 0.2em 0;
}
.on-dark .todo { color: var(--cream); background: rgba(9,128,95,0.35); border-color: var(--aqua); }

/* ============ Amenity list (simple rows) ============ */
.amen-list { display: grid; gap: 1rem; grid-template-columns: repeat(1,1fr); }
@media (min-width: 40rem) { .amen-list { grid-template-columns: repeat(2,1fr); } }
.amen-row { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; background: var(--cream); border-radius: var(--radius); border-left: 4px solid var(--aqua); box-shadow: 0 6px 16px -10px rgba(20,30,40,.3); }
.amen-row .icon-circle { background: var(--aqua); color: var(--teal-dk); border-color: var(--aqua); }
.amen-row h3 { font-family: var(--font-body); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1rem; color: var(--teal); }
.amen-row p { font-size: 0.95rem; color: var(--ink-soft); margin: 0.3rem 0 0; }

/* ============ Facts strip ============ */
.facts-strip { display: grid; gap: 1.2rem; grid-template-columns: repeat(1,1fr); }
@media (min-width: 46rem) { .facts-strip { grid-template-columns: repeat(3,1fr); } }
.fact { display: flex; gap: 0.9rem; align-items: flex-start; }
.fact h3 { font-family: var(--font-body); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.98rem; }
.fact p { font-size: 0.95rem; margin: 0.25rem 0 0; }

/* ============ Rules list ============ */
.rules-list { display: grid; gap: 0.9rem; margin: 0; }
.rule-row { display: flex; gap: 0.9rem; padding: 0.9rem 1.1rem; background: var(--cream); border-left: 4px solid var(--aqua); border-radius: var(--radius-sm); }
.rule-row dt { font-weight: 700; color: var(--teal); flex: 0 0 11rem; }
.rule-row dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 40rem) { .rule-row { flex-direction: column; gap: 0.2rem; } .rule-row dt { flex: none; } }
.rules-note { margin-top: 1.2rem; font-size: 0.88rem; color: var(--ink-soft); }

/* ============ Map + entrance photo ============ */
.map-split { display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .map-split { grid-template-columns: 1.4fr 1fr; align-items: stretch; } }
.map-photo { min-height: 16rem; }
@media (min-width: 52rem) { .map-photo { aspect-ratio: auto; } }

/* ============ Map ============ */
.map-frame { position: relative; width: 100%; aspect-ratio: 16/10; border: 6px solid var(--cream); box-shadow: var(--shadow-card); background: var(--paper-dk); border-radius: var(--radius); overflow: hidden; }
.map-frame iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 40rem) { .map-frame { aspect-ratio: 16/9; } }

/* ============ Contact form ============ */
.form-grid { display: grid; gap: 1.1rem; max-width: 34rem; }
.field label { display: block; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; margin-bottom: 0.4rem; color: var(--teal); }
.on-dark .field label { color: var(--aqua-light); }
.field input, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1.02rem; padding: 0.75em 0.9em;
  border: 2px solid var(--line); border-radius: var(--radius-sm); background: var(--cream); color: var(--ink);
}
.field input:focus, .field textarea:focus { border-color: var(--teal); outline: none; }
.on-dark .field input:focus, .on-dark .field textarea:focus { border-color: var(--aqua); }
.field textarea { min-height: 8rem; resize: vertical; }
.form-note { font-size: 0.85rem; color: var(--ink-soft); margin-top: -0.3rem; }
.on-dark .form-note:not(.todo) { color: rgba(243, 238, 220, 0.94); }

/* ============ Footer ============ */
.footer { background: var(--charcoal-dk); color: var(--cream); }
.foot-in { padding-top: 3.2rem; padding-bottom: 2rem; display: grid; gap: 2.4rem; grid-template-columns: repeat(1,1fr); }
@media (min-width: 46rem) { .foot-in { grid-template-columns: 1.2fr 1fr 1fr; } }
.foot-brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.8rem; }
.foot-brand svg { width: 2rem; height: 2rem; color: var(--aqua); }
.foot-word { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.25rem; }
.footer h3 { font-family: var(--font-body); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.9rem; color: var(--aqua); margin-bottom: 0.9rem; }
.foot-list { display: grid; gap: 0.6rem; font-size: 0.98rem; }
.foot-list a { text-decoration: none; }
.foot-list a:hover { color: var(--aqua); }
.foot-icon-row { display: flex; align-items: center; gap: 0.6rem; }
.foot-icon-row svg { width: 1.1rem; height: 1.1rem; color: var(--aqua); flex: none; }
.foot-bottom { border-top: 1px solid var(--line-on-dark); padding-top: 1.2rem; padding-bottom: 1.2rem; font-size: 0.85rem; color: rgba(243,238,220,0.6); display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; justify-content: space-between; }
.foot-bottom a { text-decoration: underline; }

/* ============ Sticky mobile call bar ============ */
.call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 0.7rem; padding: 0.7rem 0.9rem;
  background: var(--charcoal); border-top: 3px solid var(--aqua);
  box-shadow: 0 -8px 20px rgba(0,0,0,0.25);
}
.call-bar .btn { flex: 1; }
.call-bar .btn-outline { color: var(--cream); }
@media (min-width: 52rem) { .call-bar { display: none; } }
.has-call-bar main, .has-call-bar .footer { padding-bottom: 4.4rem; }
@media (min-width: 52rem) { .has-call-bar main, .has-call-bar .footer { padding-bottom: 0; } }

/* ============ Utility ============ */
.center { text-align: center; margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.pt-0 { padding-top: 0; }
section[id] { scroll-margin-top: 5.5rem; }
.flip { transform: scaleY(-1); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ Teaser tiles (wide, row layout) ============ */
.tile-wide { flex-direction: row; flex-wrap: wrap; }
.tile-wide .tile-body { flex: 1 1 20rem; }
.tile-wide .tile-photo { flex: 1 1 16rem; aspect-ratio: auto; min-height: 13rem; }
.tile-title { font-size: 1.5rem; margin-top: 0.3rem; }
.tile-flat { background: transparent; box-shadow: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.tile-flat .tile-body { padding: 0; flex: 1 1 18rem; }
.tile-title-display { font-family: var(--font-display); font-style: italic; font-size: 1.6rem; color: var(--cream); }
.tile-flat p:not(.tile-title-display) { color: rgba(243, 238, 220, 0.94); }
.tile-flat-photo {
  width: 8rem; height: 8rem; flex: none; object-fit: cover;
  border-radius: 50%; border: 3px solid var(--aqua); box-shadow: var(--shadow-card);
}
.tile-flat-photo-lg {
  width: min(100%, 22rem); height: auto; aspect-ratio: 4 / 3; flex: 1 1 16rem;
  border-radius: var(--radius); border-width: 4px;
}

.stack-lg { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 1.4rem; grid-template-columns: repeat(1, 1fr); }
@media (min-width: 46rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.narrow { max-width: 34rem; }
.mt-sm { margin-top: 0.4rem; }
.mt-lg { margin-top: 3rem; }
.mt-md { margin-top: 1.8rem; }
.ctas-center { justify-content: center; margin-top: 1.4rem; }


/* ============ Photo mosaic (home gallery) ============ */
.mosaic {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(9rem, auto); grid-auto-flow: dense;
}
@media (min-width: 46rem) { .mosaic { grid-template-columns: repeat(4, 1fr); gap: 0.9rem; grid-auto-rows: 11rem; } }
@media (min-width: 64rem) { .mosaic { grid-auto-rows: 13rem; } }
.mosaic-item {
  display: block; position: relative; overflow: hidden; border-radius: var(--radius);
  background: var(--paper-dk); box-shadow: var(--shadow-card); border: 4px solid var(--cream);
}
.mosaic-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.mosaic-item:hover img { transform: scale(1.04); }
.mosaic-item.span-2 { grid-column: span 2; }
.mosaic-item.tall { grid-row: span 2; }
.mosaic-item .mosaic-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.7rem;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem;
  color: var(--cream); background: linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.75) 100%);
}
.mosaic-item:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; }

/* ============ Catch board (fishing page photo grid) ============ */
.catch-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 46rem) { .catch-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
.catch-grid .mosaic-item { aspect-ratio: 4 / 3; }

/* Small credit line over a licensed or representative photo */
.tile-credit, .why-photo .tile-credit {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3rem 0.6rem; z-index: 2;
  font-family: var(--font-body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--cream); background: linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.7) 100%);
}

/* ============ Legal pages ============ */
.legal { max-width: 44rem; }
.legal h2 { font-size: clamp(1.4rem, 3vw, 1.8rem); color: var(--teal); margin-top: 2.2rem; }
.legal h2 + p { margin-top: 0.6rem; }
.legal p { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.6; margin-top: 0.8rem; }
.legal a { color: var(--teal); text-decoration: underline; text-underline-offset: 0.15em; }
.legal-meta { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--sea-dk); margin: 0; }
.legal .legal-meta { margin-top: 0; }
.foot-legal { display: inline-flex; gap: 1.1rem; }
.foot-legal a { color: inherit; }
.foot-legal a:hover { color: var(--aqua-light); }

/* ============ Motion (small scale, transform/opacity only) ============ */
.btn, .quick-tile, .why-card, .testi, .mini, .amen-row, .tile, .rate-card, .fact .icon-circle { transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.why-card:hover { transform: translateY(-4px); border-color: var(--aqua); background: rgba(243,238,220,0.1); }
.testi:hover, .mini:hover, .amen-row:hover, .rate-card:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -14px rgba(20,30,40,0.4); }
.fact:hover .icon-circle { transform: scale(1.08); background: rgba(95,195,207,0.24); }
.icon-circle { transition: transform 0.22s ease, background-color 0.22s ease; }
.feature-photo img, .tile-photo img { transition: transform 0.6s ease; filter: saturate(1.1) contrast(1.03); }
.feature-photo:hover img, .tile:hover .tile-photo img { transform: scale(1.04); }
.rating-pill { transition: transform 0.22s ease, background-color 0.22s ease; }
.rating-pill:hover { transform: translateY(-2px); }

/* Hero copy fades up on load (CSS only) */
@media (prefers-reduced-motion: no-preference) {
  .hero-bleed .hero-copy > * { animation: rise 0.7s cubic-bezier(.2,.7,.2,1) both; }
  .hero-bleed .hero-copy > :nth-child(1) { animation-delay: 0.05s; }
  .hero-bleed .hero-copy > :nth-child(2) { animation-delay: 0.15s; }
  .hero-bleed .hero-copy > :nth-child(3) { animation-delay: 0.28s; }
  .hero-bleed .hero-copy > :nth-child(4) { animation-delay: 0.4s; }
  .hero-bleed .hero-copy > :nth-child(5) { animation-delay: 0.52s; }
  .hero-bleed .lighthouse-badge { animation: rise 1.2s ease 0.3s both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Scroll reveal: only when reveal.js has marked the document, never without JS */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
  html.js-reveal .reveal.is-in { opacity: 1; transform: none; }
  html.js-reveal .reveal.reveal-left { transform: translateX(-18px); }
  html.js-reveal .reveal.reveal-left.is-in { transform: none; }
  html.js-reveal .ticker-track span { transition: color 0.2s; }
}

/* ============ Lightbox ============ */
.lightbox {
  border: 0; padding: 0; background: transparent; max-width: min(92vw, 70rem); max-height: 92vh;
}
.lightbox::backdrop { background: rgba(28,28,28,0.9); }
.lightbox figure { margin: 0; display: grid; gap: 0.6rem; justify-items: center; }
.lightbox img { max-width: 92vw; max-height: 82vh; width: auto; height: auto; border: 6px solid var(--cream); box-shadow: var(--shadow-card); }
.lightbox figcaption { color: var(--cream); font-family: var(--font-body); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; }
.lightbox-close {
  position: fixed; top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  background: var(--sea); color: var(--cream); border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:focus-visible { outline: 3px solid var(--aqua); outline-offset: 3px; }

/* ============ Owners spotlight ============ */
.owners { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 58rem) { .owners { grid-template-columns: 0.95fr 1.05fr; gap: 3.5rem; } }
.owners-photo {
  margin: 0; position: relative; transform: rotate(-1.5deg);
  background: var(--cream); padding: 0.7rem 0.7rem 2.6rem; box-shadow: var(--shadow-card); max-width: 30rem; border-radius: var(--radius-sm);
}
.owners-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.owners-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0.7rem; text-align: center;
  font-family: "Segoe Print", var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--ink-soft);
}
.owners h2, .owners-name { font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--teal); margin-top: 0.4rem; }
.owners-facts { margin-top: 1.5rem; gap: 0.9rem; }
@media (min-width: 46rem) { .owners-facts { grid-template-columns: repeat(2, 1fr); } }
.owners-facts .fact h4 { font-family: var(--font-body); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.98rem; color: var(--ink); }
.owners-facts .fact p { font-size: 0.95rem; margin: 0.25rem 0 0; }
.owners-ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.6rem; }
.owners-ctas .btn-outline { color: var(--teal); }
.owners p { font-size: 1.08rem; color: var(--ink-soft); margin-top: 0.8rem; }
.owners-quote {
  border-left: 4px solid var(--aqua); padding: 0.4rem 0 0.4rem 1rem; margin: 1.2rem 0 0;
  font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.25rem; color: var(--teal); line-height: 1.25;
}

/* ============ Amenity photo cards ============ */
.tile-photo { overflow: hidden; }
.tile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-photo a { position: absolute; inset: 0; display: block; }
.tile-photo a:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
.tile-body p:last-child { margin-bottom: 0; }

/* ============ Park map ============ */
.map-figure { margin: 0; background: var(--cream); padding: 0.8rem; box-shadow: var(--shadow-card); border-radius: var(--radius); overflow: hidden; }
.map-figure a { display: block; }
.map-figure img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.map-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.8rem 0.2rem 0.1rem; font-size: 0.92rem; color: var(--ink-soft); }
.map-figure figcaption strong { color: var(--teal); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.85rem; }

/* ============ Split feature (photo beside copy) ============ */
.split { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 52rem) { .split { grid-template-columns: 1fr 1fr; gap: 3rem; } .split.photo-right .split-photo { order: 2; } }
.split-photo { margin: 0; }
.split-photo img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border: 6px solid var(--cream); box-shadow: var(--shadow-card); border-radius: var(--radius); }
.split-photo figcaption { margin-top: 0.6rem; font-family: var(--font-display); font-style: italic; font-weight: 900; color: var(--teal); font-size: 1.1rem; }
.on-dark .split-photo figcaption { color: var(--cream); }
.split .amen-list { grid-template-columns: 1fr; }


/* ============ Feature split (photo column stretches to match the copy column) ============ */
.feature-split { display: grid; gap: 1.6rem; }
@media (min-width: 52rem) {
  .feature-split { grid-template-columns: 0.9fr 1.1fr; gap: 2.6rem; align-items: stretch; }
  .feature-split.photo-right .feature-photo { order: 2; }
}
.feature-photo { position: relative; margin: 0; min-height: 15rem; border: 6px solid var(--cream); box-shadow: var(--shadow-card); background: var(--paper-dk); border-radius: var(--radius); overflow: hidden; }
@media (max-width: 51.99rem) { .feature-photo { aspect-ratio: 4 / 3; } }
.feature-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-photo a { position: absolute; inset: 0; display: block; }
.feature-photo a:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
.feature-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem 0.8rem;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.74rem;
  color: var(--cream); background: linear-gradient(180deg, rgba(28,28,28,0) 0%, rgba(28,28,28,0.75) 100%);
}
.feature-copy { display: flex; flex-direction: column; gap: 0.6rem; }
.feature-copy h2, .feature-copy h3 { margin-top: 0.2rem; }
.feature-copy > p { font-size: 1.05rem; color: var(--ink-soft); }
.on-dark .feature-copy > p { color: rgba(243,238,220,0.94); }
.feature-copy .btn { align-self: flex-start; margin-top: 0.4rem; }
.feature-copy .form-grid { width: 100%; }
.feature-copy .form-note { margin-top: 0.5rem; }
.mini-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(2, 1fr); margin-top: 0.6rem; }
.mini {
  display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 0.95rem;
  background: var(--cream); border-radius: var(--radius); border-left: 4px solid var(--aqua);
  box-shadow: 0 6px 16px -10px rgba(20,30,40,.3);
}
.mini .icon-circle { width: 2.2rem; height: 2.2rem; flex: none; }
.mini .icon-circle svg { width: 1.1rem; height: 1.1rem; }
.mini h4 { font-family: var(--font-body); font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.88rem; color: var(--teal); margin: 0; }
.mini p { font-size: 0.9rem; color: var(--ink-soft); margin: 0.2rem 0 0; line-height: 1.4; }
@media (max-width: 30rem) { .mini-grid { grid-template-columns: 1fr; } }

/* Historic (black and white) landmark photo, toned to the palette */
.tone-navy img { filter: sepia(0.25) saturate(0.7) contrast(1.05); }

/* Graphic tile for a landmark with no photo (icon on navy) */
.tile-graphic {
  position: absolute; inset: 0; border-radius: inherit; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #16a3b8 0%, var(--teal) 55%, var(--teal-dk) 100%);
}
.tile-graphic svg { width: 5.5rem; height: 5.5rem; color: var(--aqua-light); opacity: 0.9; }
.tile-graphic::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 28%;
  background: repeating-linear-gradient(180deg, rgba(166,226,232,0.18) 0 2px, transparent 2px 9px);
  -webkit-mask-image: linear-gradient(180deg, transparent, black); mask-image: linear-gradient(180deg, transparent, black);
}

/* ============ Ticker (marquee strip under the home hero) ============ */
.ticker {
  background: var(--charcoal); color: var(--cream); border-top: 3px solid var(--sea); border-bottom: 3px solid var(--sea);
  overflow: hidden; white-space: nowrap; padding: 0.7rem 0;
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.9rem;
}
.ticker-track { display: inline-flex; animation: ticker 38s linear infinite; }
.ticker-track:hover { animation-play-state: paused; }
.ticker-track span { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; }
.ticker-track span::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--aqua); flex: none; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; white-space: normal; flex-wrap: wrap; justify-content: center; }
  .ticker-track[aria-hidden="true"] { display: none; }
}

/* ============ Quick links (pick your path) ============ */
.quick-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 52rem) { .quick-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } }
.quick-tile { text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.quick-tile:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -14px rgba(20,30,40,0.45); }
.quick-tile:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
.quick-tile .tile-photo { aspect-ratio: 3 / 2; }
.quick-tile .tile-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 1.1rem; }
.quick-tile .tile-bar::after { content: "\2192"; font-family: var(--font-body); font-style: normal; font-weight: 700; color: var(--aqua); }
.quick-tile.is-reserve .tile-bar { background: var(--coral); color: var(--coral-ink); border-top-color: var(--charcoal); }
.quick-tile.is-reserve .tile-bar::after { color: var(--coral-ink); }


/* ============ Aqua band + Nellie's Doggie Play Area (amenities) ============ */
.band-aqua { background: var(--aqua); color: var(--charcoal); }
.torn-aqua { background: var(--aqua); }
.band-aqua .eyebrow { color: var(--teal-dk); }
.band-aqua .eyebrow::before { background: var(--teal-dk); }
.dogpark-title { font-size: clamp(1.9rem, 4vw, 2.7rem); color: var(--teal-dk); margin-top: 0.2rem; }
.band-aqua .feature-copy > p { color: var(--charcoal); font-size: 1.1rem; }
.dogpark-photo { transform: rotate(-1.5deg); border-color: var(--cream); }
.dogpark-stamp {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 2;
  background: var(--sea); color: var(--cream); border: 2px solid var(--cream);
  font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.05rem; line-height: 1.05; text-align: center;
  padding: 0.75em 0.9em; border-radius: 999px; transform: rotate(8deg); box-shadow: var(--shadow-pill);
}
.sign-card {
  background: #fff; color: var(--teal-dk); border: 4px solid var(--sea); border-radius: var(--radius-sm);
  padding: 1rem 1.2rem 1.1rem; box-shadow: var(--shadow-card); max-width: 26rem; margin-top: 0.6rem; transform: rotate(1deg);
}
.sign-card-title {
  font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem;
  color: var(--sea); margin: 0 0 0.6rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--teal-dk);
}
.sign-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.sign-card li { font-family: var(--font-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.02rem; color: var(--teal-dk); line-height: 1.25; }
.sign-card li strong { color: var(--sea); font-weight: 900; margin-right: 0.35em; }
.sign-card-foot { margin: 0.7rem 0 0; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; color: var(--teal-dk); }
@media (prefers-reduced-motion: reduce) { .dogpark-photo, .sign-card, .dogpark-stamp { transform: none; } }


/* =====================================================================
   Vibrancy pass 2026-09-28 (Mary Jo: "no pop"). Palette pulled toward the
   tin-sign logo: candy red, ocean blue, turquoise sea, brighter paper.
   ===================================================================== */

/* Home hero: lighter, left-weighted wash so the park photo shows in color */
.hero.hero-bleed .page-hero-bg { filter: saturate(1.25) contrast(1.05); object-position: 70% 50%; } /* keeps the lighthouse in frame on phones */
/* Turquoise wash (2026-10-01): deep turquoise (7,110,124) instead of navy, slightly heavier so cream copy stays readable */
.hero.hero-bleed { background: #076e7c; }
.hero.hero-bleed .page-hero-wash { background: linear-gradient(180deg, rgba(7,110,124,0.88) 0%, rgba(7,110,124,0.76) 100%); }
@media (min-width: 58rem) {
  .hero.hero-bleed .page-hero-wash { background: linear-gradient(90deg, rgba(7,110,124,0.94) 0%, rgba(7,110,124,0.80) 45%, rgba(7,110,124,0.16) 100%); }
}

/* Ticker: sunny strip under the turquoise hero */
.ticker { background: var(--sun); color: var(--teal-dk); border-top-color: var(--teal-dk); border-bottom-color: var(--teal-dk); }
.ticker-track span::after { background: var(--teal); }

/* Icons: solid aqua discs everywhere instead of faint rings */
.icon-circle { background: var(--aqua); border-color: var(--aqua); color: var(--teal-dk); }
.fact:hover .icon-circle { background: var(--aqua-dk); }

/* Cards: brighter bodies, title bars cycle red / blue / aqua */
.tile { background: var(--cream); }
.tile-bar { background: var(--sea); border-top: 0; }
.card-grid > .tile:nth-child(3n+2) .tile-bar { background: var(--teal); }
.card-grid > .tile:nth-child(3n+3) .tile-bar { background: var(--aqua); color: var(--charcoal); }
.band-navy .card-grid > .tile:nth-child(3n+2) .tile-bar { background: var(--aqua); color: var(--charcoal); }
.band-navy .card-grid > .tile:nth-child(3n+3) .tile-bar { background: var(--sea); color: var(--cream); }
.quick-grid > .quick-tile:nth-child(1) .tile-bar { background: var(--teal); }
.quick-grid > .quick-tile:nth-child(2) .tile-bar { background: var(--aqua); color: var(--charcoal); }
.quick-grid > .quick-tile:nth-child(2) .tile-bar::after { color: var(--charcoal); }
.quick-grid > .quick-tile:nth-child(3) .tile-bar { background: var(--teal); }
.quick-tile.is-reserve .tile-bar { background: var(--coral); color: var(--coral-ink); }

/* Why cards on navy: solid panels with a colored cap */
.why-card { background: rgba(255,255,255,0.09); border: 0; border-top: 5px solid var(--aqua); }
.why-card:nth-child(even) { border-top-color: var(--sea); }
.why-card:hover { background: rgba(255,255,255,0.14); }

/* Stars: brighter on dark bands */
.on-dark .rating-stars, .quote-band .rating-stars { color: #ffcf4a; }

/* Red band (closing "Reserve" CTA, quote bands) */
.band-red { background: var(--sea); color: var(--cream); }
.torn-red { background: var(--sea); }
.band-photo.band-red > .band-wash { background: rgba(9,128,95,0.9); }
.band-red .eyebrow, .band-red .section-head .eyebrow { color: var(--cream); }
.band-red .eyebrow::before { background: var(--aqua); }
.band-red a:not(.btn) { color: var(--cream); }
.band-red .quote-band figcaption { color: var(--cream); }
.band-red h2 { color: var(--cream); }

/* Aqua reviews band (home) */
.band-photo.band-aqua > .band-wash { background: rgba(76,198,212,0.93); }
.band-aqua .rating-big, .band-aqua .rating-big strong, .band-aqua .rating-big span { color: var(--teal-dk); }
.band-aqua .rating-stars { color: var(--teal-dk); }
.band-aqua .rating-copy h2 { color: var(--teal-dk); }
.band-aqua .rating-copy p { color: var(--charcoal); }
.band-aqua .btn-aqua { background: var(--teal-dk); color: var(--cream); }
.band-aqua .btn-aqua:hover { background: var(--teal); color: var(--cream); }


/* =====================================================================
   Section color pass 2026-09-28: sections alternate red / ocean / aqua /
   sky instead of long cream runs. Dividers now draw their shape in a
   pseudo-element so the gap color (--div-bg) matches the section behind.
   ===================================================================== */
.torn, .scallop { position: relative; }
.torn, .torn-navy, .torn-charcoal, .torn-aqua, .torn-red { background: var(--div-bg, var(--paper)); clip-path: none; }
.torn::before {
  content: ""; position: absolute; inset: 0; background: var(--div-fg, var(--teal));
  clip-path: polygon(0% 100%,3% 22%,7% 68%,11% 10%,15% 55%,19% 30%,23% 78%,27% 15%,31% 60%,35% 5%,39% 45%,43% 72%,47% 20%,51% 58%,55% 8%,59% 50%,63% 25%,67% 70%,71% 12%,75% 62%,79% 32%,83% 76%,87% 18%,91% 55%,95% 6%,100% 40%,100% 100%);
}
.scallop, .scallop-navy, .scallop-charcoal, .scallop-paper, .scallop-herodk { background: var(--div-bg, transparent); -webkit-mask: none; mask: none; }
.scallop::before {
  content: ""; position: absolute; inset: 0; background: var(--div-fg, var(--paper));
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 2.4rem 2.4rem; mask-size: 2.4rem 2.4rem;
  -webkit-mask-position: center top; mask-position: center top;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><circle cx="24" cy="0" r="17" fill="black"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><circle cx="24" cy="0" r="17" fill="black"/></svg>');
}
.torn-navy, .scallop-navy { --div-fg: var(--teal); }
.torn-charcoal, .scallop-charcoal { --div-fg: var(--charcoal); }
.torn-aqua { --div-fg: var(--aqua); }
.torn-red { --div-fg: var(--sea); }
.scallop-paper { --div-fg: var(--paper); }
.scallop-herodk { --div-fg: var(--teal-dk); }
.div-on-sky { --div-bg: var(--sky); }
.div-on-aqua { --div-bg: var(--aqua); }
.div-on-red { --div-bg: var(--sea); }

/* Light turquoise band: works with every paper-safe text color */
.band-sky { background: var(--sky); }
/* Card-only bands: color behind cards, cards keep their own text colors */
.band-fill-red { background: var(--sea); }
.band-fill-aqua { background: var(--aqua); }
.band-fill-red .tile, .band-fill-aqua .tile { box-shadow: 0 18px 36px -16px rgba(10,20,30,0.55); }

/* Feature sections on red (amenities shrimp) */
.band-red .feature-copy > p { color: rgba(255,250,240,0.96); }
.band-red .tile-title { color: var(--cream); }
.band-red .feature-photo { border-color: var(--cream); }
/* flat tile on navy (amenities clubhouse) stays transparent */
.tile.tile-flat { background: transparent; box-shadow: none; }


/* =====================================================================
   Yellow pass 2026-09-29 (Bradley: "less red, more yellow, keep the
   patriotism"). Red now lives in Reserve buttons, the ticker, and one
   quote band; sunny yellow takes over the other red bands. Accent colors
   on neighboring boxes cycle through 4 colors so no two boxes that touch
   (side by side OR stacked, in 1, 2, or 3 column layouts) share a color.
   ===================================================================== */
:root { --sun: #ffd23f; --sun-dk: #f2b01e; --sun-lt: #ffe070; --sun-glow: #fff2b0; }

/* Yellow bands (light: navy text, red Reserve button) */
.band-sun { background: var(--sun); color: var(--teal-dk); }
.band-photo.band-sun > .band-wash { background: rgba(255,201,60,0.96); }
.band-sun .eyebrow, .band-sun .section-head .eyebrow { color: var(--teal-dk); }
.band-sun .eyebrow::before { background: var(--teal-dk); }
.band-sun h2, .band-sun .tile-title { color: var(--teal-dk); }
.band-sun .feature-copy > p { color: var(--charcoal); }
.band-sun a:not(.btn) { color: var(--teal-dk); }
.band-sun .btn-outline { color: var(--teal-dk); }
.band-sun .btn-outline:hover { background: rgba(7,77,92,0.08); }
.band-sun .feature-photo { border-color: var(--cream); }
.band-fill-sun { background: var(--sun); }
.band-fill-sun .tile { box-shadow: 0 18px 36px -16px rgba(10,20,30,0.55); }
.torn-sun { --div-fg: var(--sun); }
.div-on-sun { --div-bg: var(--sun); }

/* Card title bars: navy / yellow / aqua / red */
.card-grid > .tile:nth-child(4n+1) .tile-bar { background: var(--teal); color: var(--cream); }
.card-grid > .tile:nth-child(4n+2) .tile-bar { background: var(--sun); color: var(--teal-dk); }
.card-grid > .tile:nth-child(4n+3) .tile-bar { background: var(--aqua); color: var(--charcoal); }
.card-grid > .tile:nth-child(4n+4) .tile-bar { background: var(--sea); color: var(--cream); }
/* on a navy band, skip navy: yellow / aqua / red / sky */
.band-navy .card-grid > .tile:nth-child(4n+1) .tile-bar { background: var(--sun); color: var(--teal-dk); }
.band-navy .card-grid > .tile:nth-child(4n+2) .tile-bar { background: var(--aqua); color: var(--charcoal); }
.band-navy .card-grid > .tile:nth-child(4n+3) .tile-bar { background: var(--sea); color: var(--cream); }
.band-navy .card-grid > .tile:nth-child(4n+4) .tile-bar { background: var(--sky); color: var(--teal-dk); }

/* Home quick tiles: navy / yellow / aqua / red Reserve */
.quick-grid > .quick-tile:nth-child(2) .tile-bar { background: var(--sun); color: var(--teal-dk); }
.quick-grid > .quick-tile:nth-child(2) .tile-bar::after { color: var(--teal-dk); }
.quick-grid > .quick-tile:nth-child(3) .tile-bar { background: var(--aqua); color: var(--charcoal); }
.quick-grid > .quick-tile:nth-child(3) .tile-bar::after { color: var(--charcoal); }

/* Why cards (navy band): aqua / yellow / red / cream caps */
.why-card:nth-child(4n+1) { border-top-color: var(--aqua); }
.why-card:nth-child(4n+2) { border-top-color: var(--sun); }
.why-card:nth-child(4n+3) { border-top-color: var(--foam); }
.why-card:nth-child(4n+4) { border-top-color: var(--cream); }

/* Rate cards: aqua / yellow / red heads */
.rate-card:nth-child(3n+1) .rate-card-head { background: var(--aqua); color: var(--charcoal); }
.rate-card:nth-child(3n+2) .rate-card-head { background: var(--sun); color: var(--teal-dk); }
.rate-card:nth-child(3n+3) .rate-card-head { background: var(--sea); color: var(--cream); }

/* Testimonials (aqua band): navy / yellow / red caps */
.testi { border-top: 5px solid var(--teal); }
.testi:nth-child(3n+2) { border-top-color: var(--sun); }
.testi:nth-child(3n+3) { border-top-color: var(--sea); }

/* Left-edge boxes + their icon discs: aqua / yellow / red / navy */
.mini:nth-child(4n+2), .amen-row:nth-child(4n+2), .rule-row:nth-child(4n+2) { border-left-color: var(--sun); }
.mini:nth-child(4n+3), .amen-row:nth-child(4n+3), .rule-row:nth-child(4n+3) { border-left-color: var(--sea); }
.mini:nth-child(4n+4), .amen-row:nth-child(4n+4), .rule-row:nth-child(4n+4) { border-left-color: var(--teal); }
.mini:nth-child(4n+2) .icon-circle, .amen-row:nth-child(4n+2) .icon-circle { background: var(--sun); border-color: var(--sun); color: var(--teal-dk); }
.mini:nth-child(4n+3) .icon-circle, .amen-row:nth-child(4n+3) .icon-circle { background: var(--sea); border-color: var(--sea); color: var(--cream); }
.mini:nth-child(4n+4) .icon-circle, .amen-row:nth-child(4n+4) .icon-circle { background: var(--teal); border-color: var(--teal); color: var(--cream); }
/* on a yellow band, the yellow edge would vanish: use navy there */
.band-sun .mini:nth-child(4n+2) { border-left-color: var(--teal); }
.band-sun .mini:nth-child(4n+2) .icon-circle { background: var(--teal); border-color: var(--teal); color: var(--cream); }

/* Fact icon discs: aqua / yellow / navy / red */
.facts-strip > .fact:nth-child(4n+2) .icon-circle { background: var(--sun); border-color: var(--sun); color: var(--teal-dk); }
.facts-strip > .fact:nth-child(4n+3) .icon-circle { background: var(--teal); border-color: var(--teal); color: var(--cream); }
.facts-strip > .fact:nth-child(4n+4) .icon-circle { background: var(--sea); border-color: var(--sea); color: var(--cream); }
/* on a navy band, the navy 4th edge would vanish: use charcoal there */
.band-navy .mini:nth-child(4n+4) { border-left-color: var(--charcoal); }
.band-navy .mini:nth-child(4n+4) .icon-circle { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }
/* yellow band already swaps #2 to navy, so #4 goes charcoal */
.band-sun .mini:nth-child(4n+4) { border-left-color: var(--charcoal); }
.band-sun .mini:nth-child(4n+4) .icon-circle { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }

/* Click-to-load map (contact). Navy "chart" panel until the visitor asks for Google. */
.map-facade {
  display: grid; place-items: center; text-align: center; color: var(--cream);
  background:
    repeating-linear-gradient(90deg, rgba(166,232,238,0.10) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(166,232,238,0.10) 0 1px, transparent 1px 44px),
    radial-gradient(circle at 30% 40%, var(--teal) 0%, var(--teal-dk) 75%);
}
.map-facade-in { padding: 1.4rem; display: grid; justify-items: center; gap: 0.7rem; }
.map-facade-addr { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.3rem; line-height: 1.25; color: var(--cream); margin: 0; }
.map-facade-ctas { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.map-facade .btn-outline { color: var(--cream); }
.map-facade .btn-outline:hover { background: rgba(255,255,255,0.1); }
.map-facade-note { font-size: 0.85rem; color: rgba(255,250,240,0.9); margin: 0; }
.map-facade-note a { color: var(--aqua-light); }
.map-facade.is-loaded { display: block; background: var(--paper-dk); }
@media (max-width: 30rem) { .map-frame.map-facade { aspect-ratio: auto; min-height: 17rem; } }

/* FAQ (sites-rates #faq): native details/summary, no JS */
.faq-list { display: grid; gap: 0.8rem; max-width: 52rem; }
.faq-item { background: var(--cream); border-radius: var(--radius); border-left: 4px solid var(--aqua); box-shadow: 0 6px 16px -10px rgba(20,30,40,.3); }
.faq-item:nth-child(4n+2) { border-left-color: var(--sun); }
.faq-item:nth-child(4n+3) { border-left-color: var(--sea); }
.faq-item:nth-child(4n+4) { border-left-color: var(--teal); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; font-family: var(--font-body); font-style: normal; font-weight: 700; font-size: 1.08rem; letter-spacing: 0.02em; color: var(--teal-dk); }
.faq-item summary::after { content: "+"; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--aqua); color: var(--teal-dk); font-weight: 700; font-size: 1.2rem; line-height: 1; transition: transform 0.2s ease; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:focus-visible { outline: 3px solid var(--coral); outline-offset: 2px; border-radius: var(--radius); }
.faq-item p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.55; }

/* Home h1 carries "RV Park" for search + answer engines, set smaller so "Beacon 44" still leads */
.hero h1 .h1-kind { font-size: 0.6em; white-space: nowrap; }

/* Yellow v2 2026-09-29 (Bradley: "less mustardy"): no photo under the yellow,
   a soft sunny glow in the middle that settles to flat --sun at the top and
   bottom edges so torn/scallop dividers still meet it cleanly. */
.band-sun, .band-fill-sun {
  background-color: var(--sun);
  background-image: radial-gradient(ellipse 65% 46% at 50% 50%, var(--sun-glow) 0%, var(--sun-lt) 50%, var(--sun) 100%);
}

/* Contact: direct ways to reach the park (replaced the mailto form) */
.reach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.reach-card {
  display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; text-decoration: none;
  background: var(--cream); color: var(--ink); border-radius: var(--radius); border-left: 5px solid var(--aqua);
  box-shadow: 0 14px 28px -16px rgba(0,0,0,0.5); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.on-dark a.reach-card { color: var(--ink); }
.reach-card:hover { transform: translateY(-3px); box-shadow: 0 20px 34px -14px rgba(0,0,0,0.55); }
.reach-card:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.reach-card .icon-circle { flex: none; }
.reach-text { display: grid; gap: 0.2rem; }
.reach-text strong { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: 1.3rem; color: var(--teal-dk); line-height: 1.15; }
.reach-text span { font-size: 1rem; color: var(--ink-soft); }
.reach-list li:nth-child(2) .reach-card { border-left-color: var(--sun); }
.reach-list li:nth-child(2) .icon-circle { background: var(--sun); border-color: var(--sun); color: var(--teal-dk); }
.reach-list li:nth-child(3) .reach-card { border-left-color: var(--coral); }
.reach-list li:nth-child(3) .icon-circle { background: var(--coral); border-color: var(--coral); color: var(--coral-ink); }
.feature-copy:has(.reach-list) { align-self: center; }
@media (prefers-reduced-motion: reduce) { .reach-card, .reach-card:hover { transition: none; transform: none; } }