/* =========================================================
   Suckling Pig BBQ — Brand Stylesheet
   =========================================================
   BRAND GUIDELINES (client brand sheet)

   Colors
     White      #ffffff  – eye highlights / text on dark
     Deep Plum  #431e4a  – bat wings / dark accents, wordmark text
     Lavender   #9a8dca  – primary background field
     Pig Pink   #f9bcd7  – pig face / ears, soft accents
     Gold       #f7c92f  – "BBQ" wordmark, CTAs
     Cape Navy  #493b6e  – bat cape / body, secondary dark

   Typography — Greycliff CF Family (Heavy for display)
     "SUCKLING PIG" style — Heavy / 44pt / VA 68
        → display headings: all-caps, letter-spacing .068em
          (--track-display)
     "BBQ" style          — Heavy / 28pt / VA 354
        → small labels:    all-caps, letter-spacing .354em
          (--track-label); logo sub-mark ratio 28:44 ≈ .64×
   ========================================================= */

:root {
  --lavender: #9a8dca;
  --lavender-soft: #b6acdb;
  --pink: #f9bcd7;
  --pink-soft: #fce0ee;
  --plum: #431e4a;
  --plum-deep: #2c1230;
  --navy: #493b6e;
  --gold: #f7c92f;
  --gold-deep: #e0af16;
  --white: #ffffff;
  --cream: #f8f5fb;
  --ink: #2c1230;

  --shadow-sm: 0 4px 14px rgba(44, 18, 48, 0.10);
  --shadow-md: 0 14px 40px rgba(44, 18, 48, 0.16);
  --shadow-lg: 0 26px 60px rgba(44, 18, 48, 0.28);

  --radius: 18px;
  --radius-lg: 26px;
  --maxw: 1160px;

  /* Brand type (per brand sheet): Greycliff CF Family, Heavy for display.
     Tracking: VA 68 on display type, VA 354 on small labels ("B B Q").
     Poppins / Nunito Sans stand in until Greycliff CF is licensed —
     the stacks list Greycliff first so @font-face files are picked up
     automatically once added to assets/fonts/. */
  --font-display: "Greycliff CF", "Poppins", "Nunito Sans", system-ui, sans-serif;
  --font-body: "Greycliff CF", "Nunito Sans", system-ui, -apple-system, sans-serif;
  --track-display: 0.068em; /* brand VA 68  */
  --track-label: 0.354em;   /* brand VA 354 */
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.16; margin: 0 0 .5em; color: var(--plum); font-weight: 800; letter-spacing: var(--track-display); text-transform: uppercase; }
p { margin: 0 0 1rem; }
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.section { padding: clamp(56px, 8vw, 108px) 0; }

.text-gold { color: var(--gold); }
.text-plum { color: var(--plum); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  padding: .95em 1.6em; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  letter-spacing: var(--track-display); text-transform: uppercase; text-align: center; line-height: 1;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 1.1em 1.9em; font-size: 1rem; }
.btn-block { width: 100%; }

.btn-gold { background: var(--gold); color: var(--plum); box-shadow: 0 8px 22px rgba(247, 201, 47, .35); }
.btn-gold:hover { background: var(--gold-deep); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(247, 201, 47, .45); }

.btn-plum { background: var(--plum); color: var(--white); }
.btn-plum:hover { background: var(--plum-deep); transform: translateY(-2px); }

.btn-ghost { background: rgba(255,255,255,.08); color: var(--white); border-color: rgba(255,255,255,.65); backdrop-filter: blur(4px); }
.btn-ghost:hover { background: var(--white); color: var(--plum); transform: translateY(-2px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(248, 245, 251, .82);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid rgba(67, 30, 74, .08);
  transition: box-shadow .25s ease, background .25s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); background: rgba(248, 245, 251, .95); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; }
.brand-logo { height: 52px; width: auto; }
.main-nav { display: flex; align-items: center; }
.nav-links { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-family: var(--font-display); font-weight: 700; color: var(--plum); font-size: .86rem; text-transform: uppercase; letter-spacing: .09em; transition: color .15s ease; }
.nav-links a:not(.btn):hover { color: var(--navy); }
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--gold); transition: width .2s ease;
}
.nav-links a:not(.btn):hover::after { width: 100%; }
.nav-cta { color: var(--plum) !important; }

.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav-toggle span { display: block; width: 26px; height: 3px; border-radius: 3px; background: var(--plum); transition: transform .25s ease, opacity .25s ease; }
.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); }

/* ---------- Hero — lavender brand field, mascot + logo bats ---------- */
.hero {
  position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, var(--lavender-soft) 0%, var(--lavender) 62%, #8a7cbe 100%);
}
.hero-content { position: relative; z-index: 3; max-width: 780px; margin-inline: auto; padding-block: clamp(44px, 7vw, 84px) clamp(52px, 7vw, 92px); }
/* The mark stays still — only the bats move */
.hero-mascot {
  /* Art is optically centered: transparent left padding balances the
     bats' right overhang, so the pig sits on the true center axis.
     Width compensates for that padding (421/356 of the old size). */
  width: clamp(236px, 29.5vw, 343px); height: auto; margin: 0 auto 1.4rem;
  filter: drop-shadow(0 22px 44px rgba(44, 18, 48, .32));
}
.hero-kicker {
  display: inline-block; font-family: var(--font-display); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  font-size: .74rem; color: var(--plum); margin: 0 0 1.1rem; padding: .45em .35em .45em .9em; border: 1px solid rgba(67,30,74,.4); border-radius: 999px;
}
.hero-title { font-size: clamp(1.9rem, 4.4vw, 3.3rem); color: var(--plum); margin: 0 auto 1.8rem; max-width: 720px; letter-spacing: .035em; text-wrap: balance; }
.hero-title .bite {
  color: var(--white);
  text-shadow: 0 2px 14px rgba(44, 18, 48, .38), 0 1px 3px rgba(44, 18, 48, .3);
  text-decoration: underline; text-decoration-color: var(--gold);
  text-decoration-thickness: .14em; text-underline-offset: .14em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 1.5rem; }
.hero-note { font-size: .95rem; color: rgba(44,18,48,.78); margin: 0; }
.hero-note a { color: var(--plum); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(67,30,74,.35); }
.hero-note a:hover { text-decoration-color: var(--gold); }

/* Floating bats — the actual logo bat. It's a side-profile glider, so the
   art stays whole: each bat gently rocks/flutters while drifting across
   the hero. Drift uses individual translate/rotate props on the <svg>;
   the rock animates transform on the inner <use>, so they compose. */
.hero-bats { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.h-bat {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(20px + var(--s) * 44px); height: auto;
  fill: var(--plum-deep); opacity: var(--o); overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(44, 18, 48, .22));
  animation: bat-drift calc(var(--t) * 1s) ease-in-out infinite;
}
.h-bat.flip { transform: scaleX(-1); }
.h-bat .bat-body, .swarm-bat .bat-body { transform-box: view-box; transform-origin: 26.5px 16px; animation: bat-rock 1.05s ease-in-out infinite alternate; }
.h-bat .bat-body { animation-duration: calc(.68s + var(--s) * .7s); }
@keyframes bat-rock { from { transform: rotate(7deg) translateY(.6px); } to { transform: rotate(-7deg) translateY(-1px); } }
@keyframes bat-drift {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50% { translate: calc(var(--dx) * 1px) calc(var(--dy) * 1px); rotate: calc(var(--r) * 1deg); }
}

/* Bat-swarm scroll transition: fixed overlay, each bat flies from below
   the fold to above the screen on its own delay/speed/curve (set via
   --x/--d/--s/--dx inline). Shown only while .flying is applied. */
.bat-swarm { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; display: none; }
.bat-swarm.flying { display: block; }
.swarm-bat {
  position: absolute; bottom: -14vh; left: calc(var(--x) * 1%);
  width: calc(26px + var(--s) * 34px); height: auto;
  fill: var(--plum-deep); opacity: 0; overflow: visible;
  filter: drop-shadow(0 8px 14px rgba(44,18,48,.25));
}
.flying .swarm-bat { animation: swarm-fly calc(1.15s + var(--s) * .55s) cubic-bezier(.3,.4,.6,1) calc(var(--d) * 1s) forwards; }
@keyframes swarm-fly {
  0%   { opacity: 0; transform: translate(0, 0) rotate(5deg); }
  12%  { opacity: .95; }
  85%  { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1vw), -128vh) rotate(-7deg); }
}

/* ---------- Inline icons (no emojis) ---------- */
.inline-bat { width: 20px; height: 15px; fill: var(--plum); vertical-align: -2px; margin-right: .4em; display: inline-block; }
.footer-tag .inline-bat { fill: var(--gold); }
.ico { width: 15px; height: 15px; fill: currentColor; vertical-align: -2px; margin-right: .4em; display: inline-block; }
.lead-note .ico { fill: var(--gold); }
.strip-ico { width: 22px; height: 22px; fill: var(--gold); flex-shrink: 0; }

/* ---------- Feature strip ---------- */
.strip { background: var(--plum); color: var(--white); }
.strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding-block: 1.1rem; }
.strip-item { display: flex; align-items: center; justify-content: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: 1rem; }

/* ---------- Find the truck — lavender brand field ---------- */
.findus { background: linear-gradient(180deg, var(--lavender) 0%, #a99dd3 100%); }
.findus .eyebrow { color: var(--plum); }
.findus .section-lead { color: rgba(44, 18, 48, .82); }
.stops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-bottom: 2rem; }
.stop-card {
  display: flex; align-items: center; gap: 1.1rem;
  background: var(--white); border: 1px solid rgba(67, 30, 74, .14);
  border-radius: var(--radius); padding: 1.2rem 1.3rem; box-shadow: 0 10px 26px rgba(44, 18, 48, .18);
}
.stop-day {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .1em;
  background: var(--gold); color: var(--plum); border-radius: 14px; padding: .85em .4em;
  min-width: 64px; text-align: center; margin: 0; flex-shrink: 0;
}
.stop-info h3 { font-size: 1rem; margin: 0 0 .15rem; }
.stop-info p { margin: 0; font-size: .92rem; color: #6a5a72; }
.stop-info a { color: var(--navy); font-weight: 700; }
.stop-info a:hover { color: var(--plum); }
.stop-book { background: var(--pink-soft); border-style: dashed; }
.stop-book .stop-day { background: var(--plum); color: var(--gold); }
.findus-actions { text-align: center; }
.findus-note { margin: .9rem 0 0; font-size: .92rem; color: rgba(44, 18, 48, .8); }
.findus-note a { color: var(--plum); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(67, 30, 74, .35); }
.findus-note a:hover { text-decoration-color: var(--gold); }

/* ---------- Section heads ---------- */
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(2.2rem, 5vw, 3.4rem); }
.eyebrow { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); font-size: .78rem; color: var(--navy); margin: 0 0 .6rem; }
.eyebrow.light { color: var(--gold); }
.section-head h2 { font-size: clamp(2rem, 4.5vw, 3.1rem); text-wrap: balance; }
.section-lead { font-size: 1.08rem; color: #5a4a63; }
.on-dark { color: var(--white) !important; }
.section-lead.on-dark { color: rgba(255,255,255,.85) !important; }

/* ---------- About ---------- */
.about { background: linear-gradient(180deg, var(--cream), #eae4f5); }
.about-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.about-media { position: relative; display: flex; justify-content: center; }
.about-photo { width: min(480px, 100%); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.about-badge {
  position: absolute; bottom: 6%; right: 6%;
  background: var(--gold); color: var(--plum); font-family: var(--font-display); font-weight: 700;
  font-size: .76rem; text-transform: uppercase; letter-spacing: var(--track-display);
  padding: .55em 1.05em; border-radius: 999px; box-shadow: var(--shadow-sm);
  transform: rotate(-6deg);
}
.about-copy h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.about-copy p { color: #4b3b54; font-size: 1.06rem; }
.about-copy .btn { margin-top: .8rem; }

/* ---------- Menu ---------- */
.menu { background: var(--cream); }
.menu-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.menu-card {
  background: var(--white); border-radius: var(--radius-lg); padding: 2rem 1.8rem;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(154,141,202,.32);
  transition: transform .2s ease, box-shadow .2s ease;
}
.menu-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.menu-card-title { font-size: 1.4rem; color: var(--plum); position: relative; padding-bottom: .7rem; margin-bottom: .5rem; }
.menu-card-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 4px; border-radius: 4px; background: var(--gold); }
.menu-card-note { font-size: .92rem; color: #7a6a82; margin-bottom: 1.1rem; }
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { display: flex; align-items: baseline; gap: .5rem; padding: .5rem 0; border-bottom: 1px dashed rgba(67,30,74,.12); }
.menu-list li:last-child { border-bottom: 0; }
.mi-name { font-weight: 700; color: var(--plum); font-family: var(--font-display); font-size: .98rem; }
.mi-name small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .78rem; color: #8a7a90; letter-spacing: .01em; }
.mi-dots { flex: 1; border-bottom: 2px dotted rgba(67,30,74,.22); transform: translateY(-4px); }
.mi-price { font-family: var(--font-display); font-weight: 700; color: var(--navy); font-size: .95rem; text-align: right; max-width: 48%; }
.menu-tag { margin: 1.1rem 0 0; font-size: .86rem; color: var(--navy); font-weight: 600; background: var(--pink-soft); padding: .55em .8em; border-radius: 12px; }

/* ---------- Catering ---------- */
.catering { background: linear-gradient(165deg, var(--plum) 0%, var(--plum-deep) 100%); position: relative; }
.package-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.3rem; margin-bottom: 3.2rem; }
.package-card {
  position: relative; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius-lg); padding: 1.8rem 1.5rem; color: var(--white);
  display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  backdrop-filter: blur(3px);
}
.package-card:hover { transform: translateY(-6px); border-color: rgba(247,201,47,.5); box-shadow: var(--shadow-lg); }
.package-card.featured { background: linear-gradient(180deg, rgba(247,201,47,.16), rgba(255,255,255,.05)); border-color: rgba(247,201,47,.6); }
.package-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--plum); font-family: var(--font-display); font-weight: 700; font-size: .72rem;
  letter-spacing: var(--track-label); text-transform: uppercase; padding: .35em .6em .35em .95em; border-radius: 999px; white-space: nowrap;
}
.package-head h3 { color: var(--white); font-size: 1.5rem; margin-bottom: .1rem; }
.serves { font-size: .85rem; color: rgba(255,255,255,.68); margin: 0 0 .8rem; }
.package-price { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--gold); margin: 0 0 1rem; line-height: 1; }
.package-list { list-style: none; margin: 0 0 1.4rem; padding: 0; flex: 1; }
.package-list li { padding: .42rem 0 .42rem 1.5rem; position: relative; font-size: .93rem; color: rgba(255,255,255,.9); border-bottom: 1px solid rgba(255,255,255,.08); }
.package-list li::before {
  content: ""; position: absolute; left: 0; top: .78em; width: 15px; height: 12px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 41"><path fill="%23f7c92f" d="M48.1,13.96c1.14-.34,7.8,11.37,2.51,24.65-.27.69-.63,1.22-1.16,1.6l-2.52-2.49c-1.62-1.6-3.96-2.08-6.25-1.74l-3.52.53c-4.89-4.23-11.35-3.43-16.68.26-.84-5.76-3.83-10.89-9.29-12.74-2.06-4.69-5.47-6.72-10.69-6.33,2.59-9.3,10.66-16.05,20.17-17.2l-.49,2.79c-.86,4.92,1.77,9.69,6.66,11.04,1.24-.98,2.22-2.01,3.6-2.64.76-.35.61,1.25,1.47,1.77.92.55,1.86-.28,2.44.09.68.44.43,2.72.32,4.47,4.53,3.13,10.62,1.2,12.97-3.67.1-.2.31-.36.44-.4Z"/></svg>') center/contain no-repeat;
}
.package-list em { color: var(--gold); font-style: normal; font-weight: 700; }

/* Bulk */
.bulk { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); }
.bulk-title { color: var(--white); text-align: center; font-size: 1.6rem; margin-bottom: 1.6rem; }
.bulk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; margin-bottom: 1.6rem; }
.bulk-col h4 { color: var(--gold); font-size: .95rem; text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: .5rem; }
.menu-list.on-dark li { border-color: rgba(255,255,255,.12); }
.menu-list.on-dark .mi-name { color: var(--white); }
.menu-list.on-dark .mi-price { color: var(--gold); }
.menu-list.on-dark .mi-dots { border-color: rgba(255,255,255,.25); }
.catering-notes { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin: 1.4rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(255,255,255,.14); justify-content: center; }
.catering-notes li { font-size: .88rem; color: rgba(255,255,255,.82); position: relative; padding-left: 1.4rem; }
.catering-notes li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 15px; height: 12px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 53 41"><path fill="%23f7c92f" d="M48.1,13.96c1.14-.34,7.8,11.37,2.51,24.65-.27.69-.63,1.22-1.16,1.6l-2.52-2.49c-1.62-1.6-3.96-2.08-6.25-1.74l-3.52.53c-4.89-4.23-11.35-3.43-16.68.26-.84-5.76-3.83-10.89-9.29-12.74-2.06-4.69-5.47-6.72-10.69-6.33,2.59-9.3,10.66-16.05,20.17-17.2l-.49,2.79c-.86,4.92,1.77,9.69,6.66,11.04,1.24-.98,2.22-2.01,3.6-2.64.76-.35.61,1.25,1.47,1.77.92.55,1.86-.28,2.44.09.68.44.43,2.72.32,4.47,4.53,3.13,10.62,1.2,12.97-3.67.1-.2.31-.36.44-.4Z"/></svg>') center/contain no-repeat;
}

/* ---------- Gallery ---------- */
.gallery { background: var(--cream); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 210px; gap: 14px; }
.gallery-item { margin: 0; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow-sm); position: relative; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item.wide { grid-column: span 2; grid-row: span 2; }

/* ---------- Booking ---------- */
.book { background: linear-gradient(160deg, var(--navy) 0%, var(--plum) 100%); }
.book-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.book-intro h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
.book-intro > p { color: rgba(255,255,255,.86); font-size: 1.06rem; max-width: 460px; }
.contact-list { list-style: none; margin: 1.8rem 0 1.4rem; padding: 0; display: grid; gap: 1rem; }
.contact-list li { display: flex; flex-direction: column; }
.ci-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--track-label); font-size: .72rem; color: var(--gold); margin-bottom: .1rem; }
.contact-list a, .contact-list span:not(.ci-label) { color: var(--white); font-size: 1.12rem; font-weight: 600; }
.contact-list a:hover { color: var(--gold); }
.lead-note { color: rgba(255,255,255,.82); font-size: .95rem; background: rgba(0,0,0,.15); padding: .8em 1em; border-radius: 12px; border-left: 3px solid var(--gold); }
.lead-note strong { color: var(--gold); }

.book-form-wrap { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--shadow-lg); }
.form-title { font-size: 1.5rem; margin-bottom: 1.4rem; }
.field { margin-bottom: 1.1rem; display: flex; flex-direction: column; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field label { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--plum); margin-bottom: .35rem; }
.req { color: #d64b7a; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--ink);
  padding: .8em .9em; border: 2px solid #e6dced; border-radius: 12px; background: #fbf9fc;
  transition: border-color .15s ease, box-shadow .15s ease; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--lavender); box-shadow: 0 0 0 4px rgba(154,141,202,.2); background: var(--white);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:user-invalid, .field textarea:user-invalid { border-color: #e79ab6; }
.form-fineprint { font-size: .84rem; color: #7a6a82; margin: .9rem 0 0; text-align: center; }
.form-fineprint strong { color: var(--navy); }
.form-status { margin: .9rem 0 0; font-weight: 700; font-family: var(--font-display); text-align: center; font-size: .95rem; min-height: 1.2em; }
.form-status.success { color: #1f9d63; }
.form-status.error { color: #d64b7a; }

/* ---------- Footer ---------- */
.site-footer { background: var(--plum-deep); color: rgba(255,255,255,.8); }
.footer-inner { display: grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: 2rem 2.5rem; padding-block: clamp(2.4rem, 4vw, 3.4rem); align-items: start; }
.footer-logo { height: 96px; width: auto; margin-bottom: .8rem; }
.footer-wordmark { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-display); color: var(--white); font-size: 1.12rem; margin: 0 0 .55rem; }
.footer-wordmark span { color: var(--gold); letter-spacing: var(--track-label); font-size: .82em; margin-left: .15em; }
.footer-brand p:not(.footer-wordmark) { max-width: 320px; font-size: .94rem; color: rgba(255,255,255,.66); margin: 0; }
.footer-nav h4, .footer-contact h4 { color: var(--gold); font-size: .74rem; text-transform: uppercase; letter-spacing: var(--track-label); margin-bottom: 1rem; }
.footer-nav ul, .footer-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.footer-nav a, .footer-contact a { display: inline-block; padding: .2em 0; }
.footer-nav a:hover, .footer-contact a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }
.footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-block: 1.3rem; }
.footer-bottom p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.55); }
.footer-tag { color: rgba(255,255,255,.7) !important; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-media { order: -1; }
  .stops { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; margin-bottom: 2rem; }
  .menu-columns { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .package-grid { grid-template-columns: 1fr 1fr; }
  .book-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .nav-toggle { display: flex; }
  .brand-logo { height: 44px; }
  .nav-links {
    position: fixed; inset: 74px 0 auto 0; flex-direction: column; gap: 0; align-items: stretch;
    background: var(--cream); box-shadow: var(--shadow-md); padding: .5rem 0 1rem;
    transform: translateY(-140%); transition: transform .3s ease; max-height: calc(100vh - 74px); overflow-y: auto;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links li { border-bottom: 1px solid rgba(67,30,74,.07); }
  .nav-links a:not(.btn) { display: block; padding: 1rem 22px; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-cta { margin: .8rem 22px; }
  .strip-grid { grid-template-columns: 1fr 1fr; gap: .8rem; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .gallery-item.wide { grid-column: span 2; grid-row: span 1; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 1.7rem 1.2rem; }
  .footer-brand { grid-column: 1 / -1; text-align: center; }
  .footer-logo { margin-inline: auto; }
  .footer-brand p:not(.footer-wordmark) { margin-inline: auto; }
  .footer-contact { font-size: .92rem; }
  .footer-contact a { overflow-wrap: anywhere; }
  .footer-bottom .container { flex-direction: column; text-align: center; }
}

@media (max-width: 460px) {
  .package-grid { grid-template-columns: 1fr; }
  .bulk-grid { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-actions .btn { flex: 1; }
  .btn-lg { font-size: .9rem; padding: 1em 1.2em; }
  .hero-kicker { letter-spacing: .22em; }
  .h-bat { width: calc(14px + var(--s) * 32px); }
  .h-bat:nth-of-type(4n) { display: none; }
}

/* ---------- Motion / accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .h-bat, .h-bat .bat-body, .swarm-bat, .swarm-bat .bat-body { animation: none; }
  .bat-swarm { display: none !important; }
  .btn, .menu-card, .package-card, .gallery-item img { transition: none; }
}

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