/* ==========================================================================
   THE BREAKERS — New Smyrna Beach
   Design tokens
   ========================================================================== */
:root {
  --pink: #D9828B;
  --pink-deep: #C96470;
  --pink-soft: #F7E3E5;
  --teal: #8BCCCB;
  --teal-deep: #419594;
  --aqua: #19B8D1;
  --sky: #65C7E8;
  --sky-soft: #E3F4FB;
  --white: #FFFFFF;
  --charcoal: #222222;
  --yellow: #F4C542;
  --coral: #F07F73;
  --sand: #FBF3E4;
  --sand-deep: #F2E2C4;

  /* Darker than --pink-deep/--teal-deep specifically so white button-hover
     text clears 4.5:1 (WCAG AA). Scoped to buttons only — the shared
     --pink-deep/--teal-deep tokens above stay untouched since they're
     also used for shadows and other text colors elsewhere. */
  --pink-hover-a11y: #AA555F;
  --teal-hover-a11y: #377E7D;

  --font-display: "Amatic SC", "Arial Narrow", cursive;
  --font-body: "Nunito Sans", "Helvetica Neue", Arial, sans-serif;

  --shadow-card: 0 10px 30px rgba(65, 149, 148, 0.15);
  --radius: 18px;
  --nav-h: 74px;
  --menu-tabs-h: 66px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }

body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.6;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
}

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

/* Sitewide keyboard-focus indicator. Charcoal was chosen (not the brand yellow)
   because the vast majority of the site's focusable elements sit on white or
   light backgrounds (computed: yellow-on-white is 1.63:1, yellow-on-pink is
   1.72:1, yellow-on-teal is 1.11:1 — all fail WCAG 1.4.11's 3:1 non-text-contrast
   minimum; charcoal clears 3:1 against every light/mid background on the site).
   Elements that actually sit on the site's few DARK backgrounds (nav pre-scroll,
   footer, .btn--ghost) get an explicit yellow override below, since charcoal-on-
   dark-navy fails the same 3:1 test in the other direction. This catches every
   interactive element that had no dedicated focus style at all — nav/footer
   links, quickbar links, FAQ <summary> accordion triggers, shipping radio
   options, the skip-link — so nothing sitewide relies on (or lacks) a focus
   indicator; more specific rules below override this per-background as needed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 2px;
}
/* Dark backgrounds where charcoal would fail: nav before it scrolls solid
   (index.html only — every other page loads with the nav already solid/white
   via [data-solid]), and the footer's dark teal-to-navy gradient. */
.nav:not(.is-solid) .nav__links a:focus-visible,
.nav:not(.is-solid) .nav__brand:focus-visible,
.nav:not(.is-solid) .nav__toggle:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible {
  outline-color: var(--yellow);
}

/* Sitewide default link color — inherited by any plain in-copy link (FAQ
   answers, menu-item "view more" links, etc.) that doesn't set its own
   color. --teal only hit 1.81:1 on white; this shade clears 4.5:1. */
a { color: var(--teal-hover-a11y); }

/* ==========================================================================
   Type
   ========================================================================== */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Signature: pink headline on an aqua shadow, used everywhere — two layers only.
   --pink itself only hits 2.79:1 on white (fails even the 3:1 large-text
   minimum); --pink-deep clears 3:1 against every light background this is
   used on (white/sand/pink-soft/sky-soft all ≥3.0) while still reading as
   "the brand pink" since it's the same hue, just deep enough to pass. */
.shout,
.shout--teal,
.shout--white {
  color: var(--pink-deep);
  text-shadow: 0.06em 0.06em 0 var(--aqua);
}
/* On the pink/coral gift-card background this pairing (previously aqua-on-pink,
   ~1.1:1) is currently unreachable in the markup — every .shout under .gift
   gets an inline color override — but hardened defensively in case that
   ever changes. */
.gift .shout,
.gift .shout--teal,
.gift .shout--white {
  color: var(--charcoal);
  text-shadow: 0.06em 0.06em 0 var(--pink-soft);
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  /* --teal only hit 1.81:1 on white at this size (needs 4.5:1); the same
     deepened shade used for button hovers clears it comfortably. */
  color: var(--teal-hover-a11y);
  margin-bottom: 0.9rem;
}
.eyebrow--pink { color: var(--pink-deep); }

.lede { font-size: 1.2rem; color: #4c4c4c; max-width: 38rem; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.85rem 1.9rem;
  border-radius: 8px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); }
.btn:active { transform: translateY(0); box-shadow: none; }
/* Charcoal, not yellow: computed contrast of yellow against the actual button
   backgrounds (pink 1.72:1, teal 1.11:1, white/.btn--outline 1.63:1, plus their
   hover states) all fail WCAG 1.4.11's 3:1 non-text-contrast minimum. Charcoal
   clears 3:1 against all of them (pink 5.69, teal 8.79, white 15.91, hover
   states 3.16–3.37). .btn--ghost is the one variant with a dark rest background
   (and a white hover background), so it gets its own override below. */
.btn:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 3px; }

/* White text directly on --pink/--teal fails WCAG AA contrast (2.79:1 and
   1.81:1 against the 4.5:1 minimum) — dark text on the light base color,
   flipping to white on the darker hover color, keeps the same brand colors
   while actually passing. */
.btn--pink { background: var(--pink); color: var(--charcoal); }
.btn--pink:hover { background: var(--pink-hover-a11y); color: var(--white); }

.btn--teal { background: var(--teal); color: var(--charcoal); }
.btn--teal:hover { background: var(--teal-hover-a11y); color: var(--white); }

.btn--ghost {
  /* A 10%-white overlay over the light hero sky-blue only ever produced a
     ~1.3–1.8:1 contrast for the white text on top of it — nowhere close to
     readable. A dark, mostly-opaque overlay keeps the "ghost/outline" look
     against any part of the hero gradient while actually passing 4.5:1. */
  background: rgba(0, 60, 90, 0.7);
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: var(--white); color: var(--teal-hover-a11y); border-color: var(--white); }
/* .btn--ghost is the one .btn variant whose background flips from dark (rest)
   to white (hover) — the shared .btn:focus-visible charcoal outline (5.86:1 on
   the dark rest background is fine, but only 1.63:1 on the white hover
   background) needs a matching flip so it stays visible in both states. */
.btn--ghost:focus-visible { outline-color: var(--yellow); }
.btn--ghost:hover:focus-visible { outline-color: var(--charcoal); }

.btn--outline { background: var(--white); color: var(--teal-hover-a11y); border-color: var(--teal); }
.btn--outline:hover { background: var(--teal-hover-a11y); color: var(--white); }

.btn--big { font-size: 1.15rem; padding: 0.95rem 2.4rem; }

/* ==========================================================================
   Sticky nav
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.25s ease, box-shadow 0.25s ease;
  /* White nav text/logo directly on the light hero sky-blue only ever hit a
     ~1.9:1 contrast — a dark scrim keeps the "see the hero" transparent
     look while making the white text and logo actually readable. */
  background: rgba(0, 40, 56, 0.55);
  /* forces its own compositing layer so momentum scrolling on Safari/iOS
     doesn't blend the fixed nav with content passing underneath it */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: background-color;
  isolation: isolate;
}
.nav.is-solid {
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 18px rgba(0, 113, 155, 0.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.nav__inner {
  width: min(1200px, 92%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.nav__brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.9rem;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--teal-deep);
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.nav.is-solid .nav__brand { color: var(--pink-deep); text-shadow: 2px 2px 0 var(--teal); }
.nav__brand img { width: 58px; height: auto; }

/* Homepage-only (identified by the missing data-solid attribute — every
   other page's nav is always-solid and carries it): a slightly bigger
   brand mark, regardless of scroll position. */
.nav:not([data-solid]) .nav__brand { font-size: 2.15rem; }
.nav:not([data-solid]) .nav__brand img { width: 76px; }

/* The <nav aria-label="Primary"> landmark wrapping .nav__links exists purely
   for assistive-tech structure — display:contents removes it from the box
   model entirely so .nav__inner's flex layout treats .nav__links exactly
   as if the wrapper weren't there. */
.nav__inner > nav { display: contents; }
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  list-style: none;
}
.nav__links a:not(.btn) {
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  padding: 0.3rem 0;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav.is-solid .nav__links a:not(.btn) { color: var(--charcoal); }
.nav__links a:not(.btn):hover { border-color: var(--pink); color: var(--pink-deep); }
.nav__links .btn { font-size: 1.15rem; padding: 0.5rem 1.3rem; }
#navLinks .nav__halfwall {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  white-space: nowrap;
  background: var(--white);
  border-radius: 999px;
  padding: 0.65rem 2rem 0.65rem 0.75rem;
  box-shadow: 0 4px 14px rgba(0, 60, 90, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nav__halfwall:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 60, 90, 0.28); }
.nav__halfwall img { width: 68px; height: auto; display: block; flex-shrink: 0; }
.nav__halfwall span {
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--charcoal);
}

.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 3px 0 0;
  font-family: inherit;
  line-height: inherit;
  font-weight: 800;
  font-size: 0.86rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  padding: 0.3rem 0;
  border-bottom: 3px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.nav.is-solid .nav__dropdown-toggle { color: var(--charcoal); }
.nav__dropdown-toggle:hover,
.nav__dropdown.is-open .nav__dropdown-toggle { border-color: var(--pink); color: var(--pink-deep); }
.nav__dropdown-arrow { font-size: 0.65em; transition: transform 0.2s ease; }
.nav__dropdown.is-open .nav__dropdown-arrow { transform: rotate(180deg); }
.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  min-width: 210px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 16px 34px rgba(0, 60, 90, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 20;
}
.nav__dropdown.is-open .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#navLinks .nav__dropdown-menu a {
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}
#navLinks .nav__dropdown-menu a:hover { background: var(--sky-soft); color: var(--pink-deep); }

.nav__toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
}
.nav__toggle span {
  display: block;
  width: 26px; height: 3px;
  border-radius: 2px;
  background: var(--white);
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
.nav.is-solid .nav__toggle span { background: var(--teal-deep); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { background: rgba(255, 255, 255, 0.96); box-shadow: 0 2px 18px rgba(0, 113, 155, 0.14); }
  .nav__brand { color: var(--pink-deep); text-shadow: 2px 2px 0 var(--teal); }
  .nav__toggle { display: block; }
  .nav__toggle span { background: var(--teal-deep); }
  .nav__links {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    box-shadow: 0 20px 30px rgba(0, 113, 155, 0.18);
    transform: translateY(-130%);
    transition: transform 0.3s ease;
    padding: 0.5rem 0 1.2rem;
  }
  .nav__links.is-open { transform: translateY(0); }
  .nav__links li { text-align: center; }
  .nav__links a:not(.btn) {
    display: block;
    padding: 0.9rem 0;
    color: var(--charcoal);
    font-size: 1rem;
  }
  .nav__links .btn { margin: 0.8rem auto 0; width: min(260px, 80%); }
  #navLinks .nav__halfwall { display: inline-flex; margin: 0.7rem auto 0; }
  .nav__dropdown { display: flex; flex-direction: column; align-items: center; }
  .nav__dropdown-toggle {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0.9rem 0;
    color: var(--charcoal);
    font-size: 1rem;
    border-bottom: none;
  }
  .nav__dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    margin-top: 0.2rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease;
  }
  .nav__dropdown.is-open .nav__dropdown-menu { max-height: 220px; }
  #navLinks .nav__dropdown-menu a {
    text-align: center;
    padding: 0.7rem 0;
    font-size: 0.95rem;
    color: var(--charcoal);
  }
}

/* ==========================================================================
   Hero — illustrated pink building on the sand
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky) 0%, #9ADCF2 55%, #B7E6F6 100%);
}
.hero__scene {
  position: relative;
  margin-top: auto;
  width: 100%;
  height: clamp(240px, max(38vh, 29vw), 560px);
}
.hero__scene svg { width: 100%; height: 100%; display: block; }

.hero__content {
  position: relative;
  z-index: 5;
  width: min(1100px, 92%);
  margin: 0 auto;
  text-align: center;
  padding: calc(var(--nav-h) + 7vh) 0 clamp(4.5rem, 10vh, 7rem);
}
.hero__badge {
  display: inline-block;
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--teal-hover-a11y);
  background: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 4px 14px rgba(0, 113, 155, 0.15);
}
.hero__title {
  font-size: clamp(4.4rem, 13vw, 10.5rem);
  color: var(--pink-deep);
  text-shadow: 0.06em 0.06em 0 var(--aqua);
  margin-bottom: 0.6rem;
}
.hero__sub {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  letter-spacing: 0.05em;
  color: var(--teal-deep);
  margin-bottom: 0.4rem;
}
.hero__tag {
  font-size: 1.05rem;
  font-weight: 700;
  color: #23606f;
  margin-bottom: 2rem;
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }

/* the mural plane flying across the hero sky */
.hero__plane {
  position: absolute;
  top: calc(var(--nav-h) + clamp(6px, 2vh, 22px)); /* always clear of the fixed nav */
  left: 0; /* rest position; the animation itself carries it off both edges */
  z-index: 1;
  width: clamp(230px, 42vw, 620px);
  pointer-events: none;
  animation: planeFly 34s linear infinite;
  transform-origin: center;
}
.hero__plane svg { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .hero__plane { opacity: 0.9; animation-duration: 24s; width: clamp(300px, 78vw, 460px); }
}
.hero__plane-inner { animation: planeBob 5.5s ease-in-out infinite alternate; }
/* flies off one side, waits off-screen for a couple seconds, then genuinely
   flies back in from that same side — real back-and-forth, never a spawn/
   teleport. The turn to face the other way is an instant snap (steps(1))
   while fully off-screen, not a smooth interpolation, so it never renders
   as a visible squish/flip. */
@keyframes planeFly {
  0%   { transform: translateX(calc(100vw + 60px)) scaleX(1); }
  40%  { transform: translateX(calc(-100% - 60px)) scaleX(1); }
  49%  { transform: translateX(calc(-100% - 60px)) scaleX(1); animation-timing-function: steps(1, jump-end); }
  50%  { transform: translateX(calc(-100% - 60px)) scaleX(-1); }
  90%  { transform: translateX(calc(100vw + 60px)) scaleX(-1); }
  99%  { transform: translateX(calc(100vw + 60px)) scaleX(-1); animation-timing-function: steps(1, jump-end); }
  100% { transform: translateX(calc(100vw + 60px)) scaleX(1); }
}
/* counter-mirrors the banner text/burger so letters never render backwards,
   while still relocating with the parent flip so the banner trails correctly */
.hero__plane-banner-content {
  transform-box: fill-box;
  transform-origin: center;
  animation: planeFlip 34s linear infinite;
}
@media (max-width: 640px) {
  .hero__plane-banner-content { animation-duration: 24s; }
}
@keyframes planeFlip {
  0%   { transform: scaleX(1); }
  49%  { transform: scaleX(1); animation-timing-function: steps(1, jump-end); }
  50%  { transform: scaleX(-1); }
  99%  { transform: scaleX(-1); animation-timing-function: steps(1, jump-end); }
  100% { transform: scaleX(1); }
}
@keyframes planeBob {
  from { transform: translateY(-8px) rotate(0.6deg); }
  to { transform: translateY(8px) rotate(-0.6deg); }
}

/* animated water strip at the bottom of the hero */
.hero__waves {
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  z-index: 4;
  line-height: 0;
}
.hero__waves svg { width: 100%; height: clamp(60px, 9vw, 120px); display: block; }
.wave-band { animation: waveDrift 9s linear infinite; }
.wave-band--slow { animation-duration: 14s; animation-direction: reverse; opacity: 0.6; }
@keyframes waveDrift {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

/* gulls */
.gull { animation: gullFloat 7s ease-in-out infinite; transform-origin: center; }
.gull--2 { animation-delay: 2.2s; }
.gull--3 { animation-delay: 4.1s; }
@keyframes gullFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -10px); }
}
.gull-cross { animation: gullCross 30s linear infinite; }
@keyframes gullCross {
  0% { transform: translate(-80px, 0); }
  50% { transform: translate(760px, -40px); }
  100% { transform: translate(1560px, 10px); }
}

/* swaying palms */
.palm {
  animation: palmSway 6s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.palm--2 { animation-duration: 7.2s; animation-delay: 1.1s; }
.palm--3 { animation-duration: 6.6s; animation-delay: 0.6s; }
.palm--4 { animation-duration: 7.8s; animation-delay: 1.8s; }
.palm--5 { animation-duration: 5.6s; animation-delay: 0.3s; }
@keyframes palmSway {
  from { transform: rotate(-1.4deg); }
  to { transform: rotate(1.8deg); }
}

/* drifting clouds */
.cloud { animation: cloudDrift 22s ease-in-out infinite alternate; }
.cloud--2 { animation-duration: 28s; animation-delay: 4s; }
@keyframes cloudDrift {
  from { transform: translateX(-30px); }
  to { transform: translateX(34px); }
}

/* rooftop pennant */
.flag-wave {
  animation: flagWave 2.8s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: left center;
}
@keyframes flagWave {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  50% { transform: rotate(-6deg) scaleY(0.88); }
}

/* Flagler Avenue sign — gentle float */
.arch-float { animation: archFloat 7s ease-in-out infinite; }
@keyframes archFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ocean shimmer */
.shimmer { animation: shimmerDrift 8s ease-in-out infinite alternate; }
.shimmer--2 { animation-duration: 10s; animation-delay: 2s; }
@keyframes shimmerDrift {
  from { transform: translateX(-14px); opacity: 0.35; }
  to { transform: translateX(14px); opacity: 0.7; }
}
.sun-rays { animation: sunPulse 6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes sunPulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.95; }
}

/* ==========================================================================
   Sections & layout helpers
   ========================================================================== */
.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.wrap { width: min(1200px, 92%); margin: 0 auto; }
.section__head { text-align: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section__head h2 { font-size: clamp(3rem, 7vw, 4.9rem); margin-bottom: 0.8rem; }
.section__head .lede { margin: 0 auto; }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* wavy divider between sections */
.divider { line-height: 0; }
.divider svg { width: 100%; height: clamp(40px, 6vw, 90px); display: block; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .wave-band, .wave-band--slow, .gull, .gull-cross, .sun-rays, .palm, .cloud, .flag-wave, .arch-float, .shimmer, .hero__plane-inner { animation: none !important; }
  /* park the plane in a fixed visible spot instead of flying */
  .hero__plane { animation: none !important; left: auto; right: 6vw; }
  .hero__plane-banner-content { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Info bar (hours / walk-ins / parking)
   ========================================================================== */
.info-bar { background: var(--teal); position: relative; z-index: 6; }
.info-bar__inner {
  width: min(1200px, 92%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 3rem;
  padding: 1.1rem 0;
}
.info-bar__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  color: var(--charcoal);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.info-bar__item svg { flex: none; }
@media (max-width: 820px) {
  .info-bar__inner { flex-direction: column; gap: 0.5rem; padding: 0.9rem 0; }
}

/* ==========================================================================
   Photo frames & placeholders
   ========================================================================== */
.photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: linear-gradient(160deg, var(--sky-soft), #bfe7f5);
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 4px solid rgba(255, 255, 255, 0.65);
  pointer-events: none;
}
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.photo--tall { aspect-ratio: 4 / 5; }
.photo--wide { aspect-ratio: 16 / 10; }
.photo:hover img { transform: scale(1.04); }

/* graceful placeholder when a real photo isn't available */
.placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1rem;
  background:
    radial-gradient(circle at 78% 18%, rgba(244, 197, 66, 0.55), transparent 34%),
    linear-gradient(180deg, var(--sky) 0%, var(--aqua) 62%, var(--sand-deep) 62.2%, var(--sand) 100%);
}
.placeholder__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--teal-deep);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}
.placeholder__note {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 113, 155, 0.55);
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
}
.placeholder img.placeholder__logo { width: 92px; height: auto; opacity: 0.95; border-radius: 10px; }
.placeholder[hidden] { display: none; }
.photo.img-failed .placeholder[hidden] { display: flex; }

/* ==========================================================================
   Story timeline
   ========================================================================== */
.story { background: var(--sand); }
.timeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2.5rem;
}
.timeline__card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.8rem 1.5rem 1.6rem;
  text-align: center;
  position: relative;
  border-top: 6px solid var(--pink);
}
.timeline__card:nth-child(2) { border-top-color: var(--aqua); }
.timeline__card:nth-child(3) { border-top-color: var(--yellow); }
.timeline__year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.8rem;
  color: var(--pink-deep);
  text-shadow: 2px 2px 0 var(--teal);
  margin-bottom: 0.5rem;
}
/* Was <h3> directly under the page's only <h1> with no <h2> in between —
   a skipped level. Now <h2>; selector updated to match, same visual output
   since h1–h3 share the same base type rule this already overrides. */
.timeline__card h2 { font-size: 1.5rem; letter-spacing: 0.06em; margin-bottom: 0.6rem; color: var(--charcoal); }
.timeline__card p { font-size: 0.95rem; color: #555; }
@media (max-width: 820px) { .timeline { grid-template-columns: 1fr; } }

/* ==========================================================================
   Burgers section
   ========================================================================== */
.burgers { background: linear-gradient(180deg, var(--white) 0%, var(--pink-soft) 100%); }
.burger-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--yellow);
  color: var(--charcoal);
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 4px 0 #d9a92c;
  margin-bottom: 1.2rem;
}
.burger-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.1rem;
  margin: 2.2rem 0;
}
.burger-card {
  background: var(--white);
  border-radius: 14px;
  padding: 1.25rem 1.3rem 1.15rem;
  box-shadow: var(--shadow-card);
  border-left: 6px solid var(--pink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.burger-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(201, 100, 112, 0.22); }
.burger-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
/* Was <h3> directly under the page's only <h1> with no <h2> in between (heading-order
   violation). Now <h2> — selector updated to match, same visual output. */
.burger-card h2 { font-size: 1.5rem; color: var(--teal-deep); letter-spacing: 0.05em; -webkit-text-stroke: 0.6px var(--teal-deep); }
.burger-card .price { font-family: var(--font-display); font-weight: 700; color: var(--pink-deep); font-size: 1.45rem; -webkit-text-stroke: 0.6px var(--pink-deep); }
.burger-card p { font-size: 0.92rem; color: #555; margin-top: 0.4rem; }

/* ==========================================================================
   Drinks section
   ========================================================================== */
.drinks {
  background: linear-gradient(180deg, var(--teal) 0%, var(--teal-deep) 100%);
  color: var(--white);
}
.drinks .section__head .lede { color: rgba(255, 255, 255, 0.85); }
.drink-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  margin-bottom: 2.4rem;
}
.drink-card {
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 1.3rem 1.35rem;
  transition: background 0.2s ease, transform 0.2s ease;
}
.drink-card:hover { background: rgba(255, 255, 255, 0.18); transform: translateY(-4px); }
.drink-card__top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
/* Card is a translucent glass tile over the section's teal gradient — white
   and yellow text there measured as low as 1.1:1 against it (nowhere near
   4.5:1). Charcoal clears it at both ends of the gradient. */
.drink-card h3 { font-size: 1.55rem; color: var(--charcoal); letter-spacing: 0.04em; text-shadow: 0.05em 0.05em 0 rgba(255, 255, 255, 0.3); }
.drink-card .price { font-family: var(--font-display); font-weight: 700; color: var(--charcoal); font-size: 1.5rem; text-shadow: 0.05em 0.05em 0 rgba(255, 255, 255, 0.3); }
.drink-card p { font-size: 0.9rem; color: var(--charcoal); margin-top: 0.4rem; }

/* ==========================================================================
   Reviews
   ========================================================================== */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.3rem;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.8rem 1.6rem 1.5rem;
  position: relative;
  border-bottom: 5px solid var(--sky);
}
.review-card:nth-child(2) { border-bottom-color: var(--pink); }
.review-card:nth-child(3) { border-bottom-color: var(--yellow); }
/* --yellow only hit 1.63:1 on white (needs 4.5:1 at this size); this deeper
   gold keeps the "star rating" convention recognizable while passing. */
.review-card__stars { color: #866C24; font-size: 1.15rem; letter-spacing: 0.15em; margin-bottom: 0.7rem; }
.review-card blockquote { font-size: 0.98rem; color: #444; font-style: italic; }
.review-card figcaption {
  margin-top: 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-hover-a11y);
}
.review-note {
  text-align: center;
  font-size: 0.85rem;
  /* #777 on white was 4.48:1 — just short of 4.5:1; #666 clears 5.74:1. */
  color: #666;
  margin-top: 1.6rem;
}
.review-cta { text-align: center; margin-top: 2.2rem; }
.review-cta p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--teal-deep);
  margin-bottom: 0.9rem;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 0.9rem;
}
.faq-item {
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  border-left: 6px solid var(--pink);
  padding: 1.1rem 1.4rem;
}
.faq-item:nth-child(even) { border-left-color: var(--aqua); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  font-size: 1.08rem;
  color: var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--teal-deep);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
  margin-top: 0.8rem;
  color: #555;
  font-size: 0.98rem;
  line-height: 1.6;
}
.faq-item p a { font-weight: 800; text-decoration: none; }
.faq-item p a:hover { text-decoration: underline; }

/* ==========================================================================
   Gallery
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 0.9rem;
}
.gallery-grid .photo { border-radius: 14px; }
.gallery-grid .photo--feature { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
}

/* ==========================================================================
   Gift cards
   ========================================================================== */
.gift {
  background:
    radial-gradient(circle at 12% 20%, rgba(244, 197, 66, 0.35), transparent 40%),
    radial-gradient(circle at 88% 80%, rgba(25, 184, 209, 0.3), transparent 45%),
    linear-gradient(135deg, var(--pink) 0%, var(--coral) 100%);
  color: var(--white);
}
.gift .section__head { margin-bottom: 0; }
.gift .center { text-align: center; }

/* ==========================================================================
   Gift card purchase form (PayPal checkout)
   ========================================================================== */
.gift-purchase { background: var(--sand); }
.split--gift { align-items: start; }

.gift-form {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
}
.gift-form__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 2rem;
  color: var(--pink-deep);
  text-shadow: 0.05em 0.05em 0 var(--aqua);
  margin-bottom: 0.5rem;
}
.gift-form__intro { color: #666; font-size: 0.95rem; margin-bottom: 1.4rem; }

.gift-amount-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.gift-amount-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  background: var(--sky-soft);
  color: var(--teal-deep);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 0.7rem 0.4rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.gift-amount-btn:hover { transform: translateY(-2px); }
.gift-amount-btn.is-active { background: var(--pink); color: var(--charcoal); box-shadow: 0 3px 0 var(--pink-deep); }
/* Charcoal, not yellow: this button's backgrounds (--sky-soft at rest, --pink
   when .is-active) are both light — yellow fails 3:1 non-text contrast on
   both; charcoal clears it on both. */
.gift-amount-btn:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; }

.gift-field { margin-bottom: 1.1rem; }
/* .gift-field is also used as a <fieldset> for the Shipping radio group (was a
   bare <label>text</label> floating above the two radios with no for/id and no
   fieldset/legend — a screen reader jumping directly to a radio wouldn't hear
   "Shipping" as its group context). <fieldset>/<legend> need their UA-default
   border/margin/padding reset to render identically to the plain <div>+<label>
   every other .gift-field still uses. */
.gift-field.gift-field--group { border: none; margin: 0 0 1.1rem; padding: 0; }
.gift-field label,
.gift-field legend {
  display: block;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--charcoal);
  margin-bottom: 0.4rem;
  padding: 0;
}
/* #888 on white was 3.54:1 (fails 4.5:1); #666 clears 5.74:1. Axe did not flag this
   (a false negative, same class of miss as .btn--teal/.btn--ghost) — found via manual sweep. */
.gift-field label span { font-weight: 600; color: #666; text-transform: none; letter-spacing: 0; }
.gift-field input[type="number"],
.gift-field textarea {
  width: 100%;
  border: 2px solid var(--sky-soft);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  background: var(--white);
  resize: vertical;
}
/* Was outline:none with only a 2px border-color swap as the sole focus cue —
   too subtle to rely on alone. Charcoal (not yellow) because .gift-form's
   background is white, where yellow only clears 1.63:1 (fails WCAG 1.4.11's
   3:1 non-text-contrast minimum); charcoal clears 15.91:1. :focus-visible
   (not :focus) so the ring shows for keyboard nav, matching the rest of the site. */
.gift-field input[type="number"]:focus-visible,
.gift-field textarea:focus-visible {
  outline: 3px solid var(--charcoal);
  outline-offset: 2px;
  border-color: var(--aqua);
}

.shipping-options { display: grid; gap: 0.6rem; }
.shipping-option {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border: 2px solid var(--sky-soft);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.shipping-option:has(input:checked) { border-color: var(--pink); background: var(--pink-soft); }
.shipping-option input { accent-color: var(--pink); width: 17px; height: 17px; flex-shrink: 0; }
.shipping-option span { flex: 1; font-weight: 700; font-size: 0.92rem; }
.shipping-option strong { font-family: var(--font-display); color: var(--pink-deep); font-size: 1.05rem; }

.gift-total-breakdown {
  border: 2px dashed var(--sky-soft);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  margin-top: 1.4rem;
}
.gift-total-breakdown p { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding-block: 0.25rem; color: #666; font-size: 0.92rem; }
.gift-total-breakdown .gift-total-row {
  border-top: 1px dashed var(--sky-soft);
  margin-top: 0.4rem;
  padding-top: 0.55rem;
  color: var(--charcoal);
}
.gift-total-breakdown .gift-total-row strong { font-family: var(--font-display); color: var(--pink-deep); font-size: 1.3rem; }

/* #888 on white was 3.54:1 (fails 4.5:1); #666 clears 5.74:1. */
.gift-form__fineprint { font-size: 0.8rem; color: #666; text-align: center; margin-top: 0.8rem; }
.gift-form__alt { font-size: 0.88rem; color: #666; text-align: center; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--sky-soft); }
.gift-form__alt a { font-weight: 800; }

.form-success {
  display: none;
  text-align: center;
  padding: 1.4rem;
  margin-top: 1rem;
  background: var(--sky-soft);
  border-radius: 12px;
}
.form-success.is-visible { display: block; }
.form-success h3 { font-family: var(--font-display); text-transform: uppercase; color: var(--teal-deep); font-size: 1.3rem; margin-bottom: 0.4rem; }
.form-success p { font-size: 0.9rem; color: #555; }
.form-success--error { background: var(--pink-soft); }
.form-success--error h3 { color: var(--pink-deep); }

.gift-photo img {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(120, 40, 50, 0.45);
  transform: rotate(-3deg);
  transition: transform 0.25s ease;
}
.gift-photo:hover img { transform: rotate(0deg) scale(1.02); }

.gift-side { display: flex; flex-direction: column; gap: 1.8rem; }
.gift-info,
.gift-faq {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.gift-faq__list { max-width: none; gap: 0.7rem; }
.gift-faq__list .faq-item { padding: 0.9rem 1.1rem; }
.gift-faq__list .faq-item summary { font-size: 0.98rem; }
.gift-info__title {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.7rem;
  color: var(--teal-deep);
  text-shadow: 0.05em 0.05em 0 var(--pink-soft);
  margin-bottom: 1.1rem;
}
.gift-info__list { list-style: none; display: grid; gap: 1rem; }
.gift-info__list li { display: flex; gap: 0.75rem; align-items: flex-start; }
.gift-info__list svg { flex: none; margin-top: 0.15rem; }
.gift-info__list strong { display: block; font-size: 0.95rem; color: var(--charcoal); }
.gift-info__list span { display: block; font-size: 0.85rem; color: #666; margin-top: 0.15rem; line-height: 1.4; }

@media (max-width: 720px) {
  .gift-amount-grid { grid-template-columns: repeat(2, 1fr); }
  .gift-photo { max-width: 340px; margin: 0 auto; }
}

/* ==========================================================================
   Location
   ========================================================================== */
.location { background: var(--sky-soft); }
.location__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
}
@media (max-width: 820px) { .location__grid { grid-template-columns: 1fr; } }
.location__map {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  min-height: 380px;
}
.location__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }
.location__info {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(1.6rem, 3.5vw, 2.4rem);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
/* Was <h3> — on both pages that use this card (location.html, contact.html)
   it's the first heading after the page's only <h1>, so <h3> skipped a
   level. Now <h2>; selector updated to match, same visual output. */
.location__info h2 { font-size: 2rem; color: var(--pink-deep); text-shadow: 1px 1px 0 var(--teal); }
.location__row { display: flex; gap: 0.85rem; align-items: flex-start; }
.location__row svg { flex: none; margin-top: 0.2rem; }
.location__row a { font-weight: 800; color: var(--teal-hover-a11y); text-decoration: none; }
.location__row a:hover { text-decoration: underline; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.hours-table td { padding: 0.35rem 0; border-bottom: 1px dashed #d8e8f0; }
.hours-table td:last-child { text-align: right; font-weight: 800; color: var(--teal-hover-a11y); }
/* #777 on white was 4.48:1 — just short of 4.5:1; #666 clears 5.74:1. */
.hours-note { font-size: 0.85rem; color: #666; }
.badge-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.badge-chip {
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--pink-soft);
  /* Darker than --pink-deep — at 12px text, --pink-deep on --pink-soft only
     hits 3.08:1, short of the 4.5:1 small-text minimum. */
  color: #964B54;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}
.badge-chip--teal { background: #d8f2f8; color: #306F6F; }
.badge-chip--yellow { background: #fdf0cd; color: #7C5F10; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  position: relative;
  overflow: hidden;
  /* Top stop darkened from #0084B0 — white text there only hit 4.26:1,
     just short of the 4.5:1 minimum. */
  background: linear-gradient(180deg, #00769E 0%, #00719B 40%, #014C67 100%);
  color: var(--white);
  padding: 3.5rem 0 calc(clamp(150px, 25.7vw, 480px) + 3rem);
}
.footer .wrap { position: relative; z-index: 2; }
/* dusk streetscape behind the bottom of the footer (injected by main.js) */
.footer__scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(150px, 25.7vw, 480px);
  pointer-events: none;
  z-index: 1;
}
.footer__scene svg { width: 100%; height: 100%; display: block; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
}
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__brand { display: flex; flex-direction: column; gap: 0.9rem; align-items: flex-start; }
.footer__brand img { width: 110px; height: auto; }
.footer__brand .display {
  font-size: 2.1rem;
  color: var(--white);
  text-shadow: 2px 2px 0 var(--pink);
}
/* Was <h4> — every page's last heading before the footer is an <h2> (or, on
   contact.html, an <h2> right before this too), so <h4> here skipped a
   level. Now <h3>, a real semantic fix with the selector updated to match;
   visual output is identical since every property the base h1–h3 rule adds
   (line-height, letter-spacing, uppercase) was already being set here too
   or doesn't affect a short non-wrapping label like this. */
.footer h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--yellow);
  margin-bottom: 0.9rem;
}
.footer ul { list-style: none; display: grid; gap: 0.45rem; }
/* Every one of these used to be a translucent white (0.5–0.88 alpha) over
   the footer gradient — at that size/alpha combination none of them
   actually reached 4.5:1 at the lighter (top) end of the gradient. Full
   white does, at every stop, so the "dimmer" hierarchy now comes from
   font-size/weight only, not opacity. */
.footer a { color: var(--white); text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.footer a:hover { text-decoration: underline; }
.footer address { font-style: normal; font-size: 0.95rem; color: var(--white); line-height: 1.7; }
/* Was justify-content:space-between (flush-left / flush-right) — the only
   left/right-split row in a footer where .footer__legal and .footer__credit
   below it are both centered, which read as uneven. Centered and stacked to
   match. */
.footer__bottom {
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--white);
  text-align: center;
}
.footer__legal {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
}
.footer__legal a { color: var(--white); font-weight: 600; font-size: inherit; }
.footer__legal a:hover { text-decoration: underline; }
.footer__legal span { color: rgba(255, 255, 255, 0.5); }
.footer__credit {
  margin: 0.9rem 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: var(--white);
}
.footer__credit a { color: var(--white); font-weight: 700; font-size: inherit; }
.footer__credit a:hover { text-decoration: underline; }

/* ==========================================================================
   Legal pages (privacy / terms / accessibility)
   ========================================================================== */
.legal-content { max-width: 46rem; margin: 0 auto; color: #444; line-height: 1.75; }
.legal-content h2 { font-family: var(--font-body); font-size: 1.3rem; color: var(--teal-deep); margin: 2rem 0 0.6rem; }
.legal-content h2:first-of-type { margin-top: 0.5rem; }
.legal-content p { margin-bottom: 1rem; }
.legal-content ul { margin: 0 0 1rem 1.3rem; display: grid; gap: 0.4rem; }
.legal-content a { color: var(--teal-hover-a11y); font-weight: 700; }

/* ==========================================================================
   Mobile quick-action bar
   ========================================================================== */
.quickbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: none;
  background: var(--white);
  box-shadow: 0 -6px 24px rgba(0, 60, 90, 0.18);
  padding: 0.5rem 0.6rem calc(0.5rem + env(safe-area-inset-bottom));
}
.quickbar a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  text-decoration: none;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-hover-a11y);
  padding: 0.35rem 0;
  border-radius: 10px;
}
.quickbar a:active { background: var(--sky-soft); }
.quickbar a.quickbar--hot { color: var(--pink-hover-a11y); }
@media (max-width: 820px) {
  .quickbar { display: flex; }
  .footer { padding-bottom: calc(clamp(150px, 25.7vw, 480px) + 7.5rem); }
  /* the fixed quickbar covers the very bottom of the screen even at max
     scroll, so lift the scene above its footprint or it's never visible */
  .footer__scene { bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.menu-hero,
.page-hero {
  background: linear-gradient(180deg, var(--sky) 0%, #9ADCF2 100%);
  padding: calc(var(--nav-h) + 3rem) 0 0;
  text-align: center;
  position: relative;
}
.menu-hero h1, .page-hero h1 { font-size: clamp(3.6rem, 9vw, 6.2rem); margin-bottom: 0.6rem; }
.menu-hero p, .page-hero p { color: #23606f; font-weight: 700; max-width: 40rem; margin: 0 auto 2rem; }
.menu-hero .divider, .page-hero .divider { margin-top: 1.5rem; }
.page-hero--pink { background: linear-gradient(180deg, var(--pink-soft) 0%, #fdd9dd 100%); }
.page-hero--pink p { color: #8a5157; }

/* sister-restaurant shoutout (Half Wall) */
.sister-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--white);
  border-radius: 999px;
  padding: 0.5rem 1.6rem 0.5rem 0.5rem;
  margin: 0 auto 2rem;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.sister-promo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18); }
.sister-promo img { height: 46px; width: auto; display: block; border-radius: 999px; }
.sister-promo span { font-weight: 800; color: var(--charcoal); font-size: 0.95rem; letter-spacing: 0.01em; }
@media (max-width: 480px) {
  .sister-promo { flex-direction: column; text-align: center; border-radius: 20px; padding: 1rem 1.4rem; gap: 0.5rem; }
}

/* PDF / printable menu downloads */
.download-bar {
  max-width: 1050px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
}
.download-bar p {
  flex-basis: 100%;
  flex-shrink: 0;
  max-width: none;
  margin: 0 0 0.2rem;
  font-weight: 800;
  color: var(--teal-hover-a11y);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.download-bar .btn { font-size: 0.85rem; padding: 0.6rem 1.3rem; }

/* homepage teaser cards */
.teaser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.1rem;
}
.teaser-card {
  display: block;
  text-decoration: none;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.6rem 1.5rem 1.5rem;
  border-top: 6px solid var(--pink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.teaser-card:nth-child(2) { border-top-color: var(--aqua); }
.teaser-card:nth-child(3) { border-top-color: var(--yellow); }
.teaser-card:nth-child(4) { border-top-color: var(--coral); }
.teaser-card:hover { transform: translateY(-5px); box-shadow: 0 18px 38px rgba(0, 113, 155, 0.2); }
.teaser-card h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--pink-deep);
  text-shadow: 1px 1px 0 var(--teal);
  font-weight: 700;
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  -webkit-text-stroke: 0.6px var(--pink-deep);
}
.teaser-card p { color: #555; font-size: 0.93rem; margin-bottom: 0.8rem; }
.teaser-card span {
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* --teal-deep is only 3.53:1 on white at this small size; the deeper
     button-hover shade clears 4.5:1. */
  color: var(--teal-hover-a11y);
}

.menu-tabs {
  position: sticky;
  top: var(--nav-h);
  z-index: 80;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0, 113, 155, 0.12);
}
.menu-tabs__scroll {
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  padding: 0.7rem 4%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.menu-tabs__scroll::-webkit-scrollbar { display: none; }
.menu-tab {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-deep);
  background: var(--sky-soft);
  border: 2px solid transparent;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  text-decoration: none;
}
.menu-tab:hover { transform: translateY(-1px); background: #cdeaf6; }
.menu-tab.is-active { background: var(--pink); color: var(--charcoal); box-shadow: 0 3px 0 var(--pink-deep); }
/* Charcoal, not yellow: this tab's backgrounds (--sky-soft at rest, #cdeaf6 on
   hover, --pink when .is-active) are all light — yellow fails 3:1 non-text
   contrast on all three; charcoal clears it on all three. */
.menu-tab:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 2px; }

.menu-section { padding: clamp(2.5rem, 6vw, 4rem) 0; scroll-margin-top: calc(var(--nav-h) + var(--menu-tabs-h) + 14px); }
.menu-section:nth-child(even) { background: var(--sand); }
/* FAQ page: keep every category on the same white background. */
#general-questions, #gift-card-questions, #menu-questions { background: var(--white); }
.menu-section__head { text-align: center; margin-bottom: 2rem; }
.menu-section__head h2 { font-size: clamp(2.7rem, 6vw, 4rem); }
.menu-section__head p { color: #666; font-size: 0.98rem; max-width: 46rem; margin: 0.7rem auto 0; }

.menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem 2.5rem;
  max-width: 1050px;
  margin: 0 auto;
}
@media (max-width: 760px) { .menu-list { grid-template-columns: 1fr; } }
.menu-item {
  background: var(--white);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  box-shadow: 0 4px 14px rgba(0, 113, 155, 0.08);
  break-inside: avoid;
}
.menu-item__row {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}
.menu-item__row h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--charcoal); letter-spacing: 0.04em; white-space: nowrap; -webkit-text-stroke: 0.6px var(--charcoal); }
.menu-item__dots { flex: 1; border-bottom: 2px dotted #cfe3ec; transform: translateY(-4px); }
.menu-item__price { font-family: var(--font-display); font-weight: 700; color: var(--pink-deep); font-size: 1.4rem; white-space: nowrap; -webkit-text-stroke: 0.6px var(--pink-deep); }
.menu-item p { font-size: 0.88rem; color: #666; margin-top: 0.3rem; }
.menu-item .tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-hover-a11y);
  background: var(--sky-soft);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  margin-top: 0.45rem;
}

.menu-callout {
  max-width: 1050px;
  margin: 1.6rem auto 0;
  background: var(--pink-soft);
  border-left: 6px solid var(--pink);
  border-radius: 12px;
  padding: 1rem 1.3rem;
  font-size: 0.92rem;
  color: #6b3c43;
}
/* var(--pink-deep) only clears 3.08:1 on --pink-soft at this bold 0.92rem size
   (fails 4.5:1). #964B54 (already used for .badge-chip) clears 4.98:1. */
.menu-callout strong { color: #964B54; }
.menu-footnote {
  max-width: 1050px;
  margin: 2rem auto 0;
  font-size: 0.8rem;
  /* #888 on white was 3.54:1 (fails 4.5:1); #666 clears 5.74:1. */
  color: #666;
  text-align: center;
}

/* beer table */
.beer-group { max-width: 1050px; margin: 0 auto 2rem; }
.beer-group h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--teal-deep);
  text-shadow: 1px 1px 0 var(--pink-soft);
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}
.beer-table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0, 113, 155, 0.08); }
.beer-table th {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--charcoal);
  background: var(--aqua);
  padding: 0.6rem 1rem;
}
.beer-table td { padding: 0.55rem 1rem; border-bottom: 1px solid #eef6fa; font-size: 0.92rem; }
.beer-table tr:last-child td { border-bottom: 0; }
.beer-table td:first-child { font-weight: 800; color: var(--charcoal); }
.beer-table td:last-child { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--pink-deep); text-align: right; }
.beer-table .local { color: var(--teal-hover-a11y); }
/* #777 on white was 4.48:1 — just short of 4.5:1; #666 clears 5.74:1. */
.beer-table .origin { color: #666; }
@media (max-width: 640px) {
  .beer-table .origin-col { display: none; }
}
.local-flag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: #fdf0cd;
  /* Same fix as .badge-chip--yellow: #8a6a12 only hit 4.46:1, just short. */
  color: #7C5F10;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--white);
  color: var(--teal-hover-a11y);
  font-weight: 800;
  padding: 0.8rem 1.2rem;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

/* ==========================================================================
   Mural band — the hand-painted plane mural from the restaurant wall
   ========================================================================== */
.mural-band {
  line-height: 0;
  background: #8ed8dc;
}
.mural-band img {
  width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: cover;
  display: block;
}