/* ============================================================
   PLATINUM POURS — Stylesheet
   Luxury white-mode palette pulled directly from the brand brochure:
   warm cream paper, deep black for header + hero, fresh sage green
   from the "Most Popular Platinum" band, and the signature boxwood
   wall as decorative texture. Cinzel serif + generous whitespace
   carry the luxury feel.
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Token strategy: re-purpose existing grayscale tokens so the entire
     site flips to white-mode without rewriting every rule. Tokens that
     used to be "near-black section bg" now resolve to warm cream/white;
     tokens that used to be "muted gray text" now resolve to dark-on-cream.
     Pure --c-black is kept BLACK for the structural anchors (header bar,
     hero, accent bands) where we still want the high-contrast luxury feel. */
  --c-black:      #0a0a0a;   /* structural black (header, hero, dark badges) */
  --c-ink:        #1a1a1a;   /* primary body text on cream */
  --c-night:      #f7f4ec;   /* warm cream — primary section background */
  --c-charcoal:   #ffffff;   /* white — cards, elevated surfaces */
  --c-graphite:   #efebe1;   /* slightly darker cream — alt section variant */
  --c-iron:       #d8d3c5;   /* hairline rule color on cream */
  --c-steel:      #6a6a66;   /* muted text on cream */
  --c-silver:     #4a4a47;   /* secondary text on cream */
  --c-platinum:   #2c2c2a;   /* deeper text for emphasis */
  --c-pearl:      #1a1a1a;   /* strong body text (was pearl on dark) */
  --c-white:      #ffffff;

  /* Green accents — exact brochure sage as the primary brand green.
     The neon mint we used before is replaced everywhere by these warmer
     sage greens so the palette reads as the brochure, not a tech aesthetic.
     --c-cheers stays as a token name but now resolves to deeper sage so
     existing references in the stylesheet automatically pick up the
     correct on-brand color. */
  --c-sage:       #8aa673;   /* primary brochure sage — bands + accents */
  --c-sage-deep:  #6e8a59;   /* deeper sage — CTA + hover */
  --c-sage-tint:  #e8efde;   /* whisper sage — subtle backgrounds */
  --c-sage-soft:  #c8d6b5;   /* mid sage — borders + dividers */
  --c-cheers:     #6e8a59;   /* deeper sage where mint accents used to be */
  --c-boxwood:    #4a7050;   /* deepest botanical — accent only */
  --c-leaf-deep:  #2c3a2c;   /* dark sage for occasional dark accent */
  --c-leaf-mid:   #3a4a3a;   /* mid sage-dark */
  --c-leaf-rich:  #4a5a4a;   /* used by Reviews boxwood overlay tint */
  --c-mint-glow:  rgba(138, 166, 115, 0.22);  /* sage halo for hovers */

  --bg:           var(--c-night);     /* warm cream page background */
  --bg-elev:      var(--c-charcoal);  /* white for cards */
  --text:         var(--c-ink);       /* deep dark on cream */
  --text-muted:   var(--c-steel);     /* mid gray for secondary */
  --text-strong:  var(--c-black);     /* boldest text */
  --rule:         rgba(10, 10, 10, 0.10);
  --rule-strong:  rgba(10, 10, 10, 0.20);

  --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --container:    1240px;
  --container-narrow: 920px;
  --radius:       2px;
  --radius-md:    6px;
  --header-h:     96px;

  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

a {
  color: var(--text-strong);
  text-decoration: none;
  transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
a:hover { color: var(--c-platinum); }

ul, ol { list-style: none; padding: 0; margin: 0; }

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

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

/* ---------- 3. Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}
.container--narrow { max-width: var(--container-narrow); }

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 18px;
}

/* Accent variant — soft neon-green tint, evokes the Cheers signs */
.eyebrow--accent {
  color: var(--c-cheers);
  text-shadow: 0 0 18px var(--c-mint-glow);
}

.body-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  margin: 0 0 18px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 4px;
  transition: gap 0.3s var(--ease), border-color 0.3s var(--ease);
}
.link-arrow:hover {
  gap: 14px;
  border-color: var(--c-white);
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all 0.35s var(--ease);
  cursor: pointer;
  white-space: nowrap;
  border: 1px solid transparent;
}

/* Primary CTA — sage green from the brochure, white text, lifts on
   hover with a soft sage shadow. This is the dominant action color on
   every white-mode page. */
.btn--primary {
  background: var(--c-sage);
  color: var(--c-white);
  border-color: var(--c-sage);
}
.btn--primary:hover {
  background: var(--c-sage-deep);
  border-color: var(--c-sage-deep);
  color: var(--c-white);
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(138, 166, 115, 0.32);
}

/* Outline button — dark border + ink text on white pages. Inverts
   to sage fill on hover. */
.btn--outline {
  background: transparent;
  color: var(--c-black);
  border-color: rgba(10, 10, 10, 0.55);
}
.btn--outline:hover {
  background: var(--c-sage);
  color: var(--c-white);
  border-color: var(--c-sage);
}

.btn--ghost {
  background: transparent;
  color: var(--c-black);
  border-color: rgba(10, 10, 10, 0.25);
  padding: 11px 22px;
}
.btn--ghost:hover {
  border-color: var(--c-sage);
  color: var(--c-sage-deep);
  background: var(--c-sage-tint);
}

/* ---------- Dark-context buttons (Hero + Header) ---------- */
/* Buttons placed inside the hero or header need to invert back to
   white-on-dark so they read against the video / black header bar. */
.hero .btn--primary,
.site-header .btn--primary {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}
.hero .btn--primary:hover,
.site-header .btn--primary:hover {
  background: var(--c-sage);
  color: var(--c-white);
  border-color: var(--c-sage);
  box-shadow: 0 18px 44px rgba(138, 166, 115, 0.32);
}
.hero .btn--outline {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255, 255, 255, 0.75);
}
.hero .btn--outline:hover {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}

/* ---------- 5. Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   6. SITE HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: var(--header-h);
  background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 100%);
  transition: background 0.4s var(--ease), backdrop-filter 0.4s var(--ease), height 0.3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  height: 80px;
}

.header-inner {
  max-width: var(--container);
  height: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--c-white);
}
.header-brand__icon {
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
  transition: width 0.4s var(--ease), height 0.4s var(--ease);
}
/* When the header shrinks on scroll, the icon scales down a touch
   to stay proportional inside the smaller bar. */
.site-header.is-scrolled .header-brand__icon {
  width: 88px;
  height: 88px;
}
.header-brand__text {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Stay light on the dark header bar regardless of page mode. */
  color: #e8e8e8;
}

.primary-nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 26px;
  white-space: nowrap;
}
.primary-nav a {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 232, 232, 0.82);
  position: relative;
  padding: 8px 0;
  white-space: nowrap;
}
.primary-nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--c-white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.primary-nav a:hover { color: var(--c-white); }
.primary-nav a:hover::after { transform: scaleX(1); }

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  background: var(--c-white);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  background: rgba(5,5,5,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  padding: 32px 28px;
  transform: translateY(-110%);
  transition: transform 0.45s var(--ease);
  display: none;
}
.mobile-menu.is-open {
  transform: translateY(0);
}
.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}
.mobile-menu a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-pearl);
}
.mobile-menu .btn { width: 100%; }

/* ============================================================
   7. HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  background: var(--c-black);
}

.hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 100vh;
  min-width: 177.78vh;
  min-height: 56.25vw;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.hero__vignette {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
.hero__vignette--top {
  top: 0;
  height: 32%;
  background: linear-gradient(180deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0) 100%);
}
.hero__vignette--bottom {
  bottom: 0;
  height: 58%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.92) 100%);
}

.hero__lockup {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 920px;
  padding: 0 28px;
  text-align: center;
  z-index: 5;
  animation: heroFade 1.4s var(--ease) 0.2s both;
}

.hero__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(232, 232, 232, 0.78);
  margin: 0 0 22px;
}

.hero__wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.6rem, 7.2vw, 6.2rem);
  line-height: 0.95;
  letter-spacing: 0.14em;
  color: var(--c-white);
  text-transform: uppercase;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #e8e8e8 45%, #9a9a9a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 18px rgba(0, 0, 0, 0.4));
}

.hero__rule {
  width: 86px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(184,245,184,0.7) 50%, transparent 100%);
  margin: 22px auto 18px;
  box-shadow: 0 0 14px var(--c-mint-glow);
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #ffffff;
  margin: 18px 0 32px;
  /* Subtle text shadow so the white tagline always reads crisply over
     the hero video regardless of frame brightness. */
  text-shadow: 0 2px 14px rgba(10, 10, 10, 0.6),
               0 1px 3px rgba(10, 10, 10, 0.5);
}

.hero__cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
  color: rgba(232, 232, 232, 0.55);
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.hero__scroll-text {
  line-height: 1;
}
.hero__scroll-chevron {
  width: 8px;
  height: 8px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  animation: scrollChevron 2.4s ease-in-out infinite;
}
.hero__scroll:hover {
  color: var(--c-white);
}
.hero__scroll:hover .hero__scroll-chevron {
  animation-play-state: paused;
}

@keyframes heroFade {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes scrollChevron {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.55; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}

/* ============================================================
   8. SECTION BASE
   Sections alternate WARM CREAM and PURE WHITE to create a soft
   editorial rhythm — like the bands in the brochure where black
   header strips separate cream package rows. The contrast is gentle
   on the eye while still creating visual variety down the page.
   ============================================================ */
.section {
  padding: 130px 0;
  background: var(--c-night);          /* warm cream */
  position: relative;
}
/* Alternating variant — pure white panels for soft contrast.
   The eye reads the transitions as "fresh paper" pages turning. */
.section--dark {
  background: var(--c-charcoal);       /* pure white */
}
/* Section title color override — on cream/white we want a deep
   ink rather than the previous off-white. */
.section .section-title,
.section--dark .section-title {
  color: var(--c-black);
}

/* ============================================================
   Packages section — sage-green band echoing the "Most Popular"
   highlight from the brochure. The signature boxwood texture
   appears as a tight decorative strip behind the headline.
   ============================================================ */
.section.our-packages {
  background: var(--c-night);
  position: relative;
}
/* Full-color boxwood band at the top of the section — no fade, no
   desaturation, no hairline beneath. A vibrant strip of the brand's
   signature greenery that sits flush with the cream below. */
.section.our-packages::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 130px;
  background: url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  opacity: 1;
  filter: none;
  pointer-events: none;
  /* No mask — boxwood ends in a sharp, clean edge against the cream
     below, like a decorative top border on a brochure page. */
}
/* Old sage hairline removed — no green line running through. */
.section.our-packages::after { display: none !important; }
.section.our-packages > .container { position: relative; z-index: 1; }

/* ============================================================
   Reviews section — boxwood + white floral backdrop the brand
   actually uses at events. Photo sits behind a softly tinted
   sage overlay so reviews still read crisply but the signature
   wall is unmistakable.
   ============================================================ */
.section.reviews {
  background:
    /* Soft cream-and-sage wash so the boxwood texture feels integrated
       with the white-mode page rather than punching a dark hole into it.
       The bottom of the gradient now resolves to the SAME cream tone that
       the next section (Contact) starts with, so there's no visible
       rectangle/seam between them. */
    linear-gradient(180deg,
      rgba(247, 244, 236, 0.82) 0%,
      rgba(232, 239, 222, 0.78) 25%,
      rgba(232, 239, 222, 0.75) 50%,
      rgba(232, 239, 222, 0.85) 80%,
      rgba(247, 244, 236, 1) 100%),
    url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  background-blend-mode: normal, normal;
}
/* Soft edge fades top and bottom — fade to CREAM at both edges so the
   boxwood-textured section blends invisibly into the cream sections
   above and below it (no white rectangle seam). */
.section.reviews::before,
.section.reviews::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 140px;
  pointer-events: none;
  z-index: 1;
}
.section.reviews::before {
  top: 0;
  background: linear-gradient(180deg,
    var(--c-night) 0%,
    rgba(247, 244, 236, 0.85) 40%,
    rgba(247, 244, 236, 0) 100%);
}
.section.reviews::after {
  bottom: 0;
  background: linear-gradient(0deg,
    var(--c-night) 0%,
    rgba(247, 244, 236, 0.85) 40%,
    rgba(247, 244, 236, 0) 100%);
}

/* Force white text on the "From The People We've Served" eyebrow pill. */
.section.reviews .section-head .eyebrow,
.section.reviews .section-head .eyebrow strong,
.section.reviews .section-head .eyebrow * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* "Verified five-star reviews..." section lead — white text + subtle
   dark shadow so it reads crisply over the boxwood backdrop. */
.section.reviews .section-head .section-lead,
.section.reviews .section-head .section-lead * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(10, 10, 10, 0.55),
               0 1px 3px rgba(10, 10, 10, 0.45);
}
/* Google / The Knot / Facebook link names — bold black so they pop
   against the white descriptor text and the boxwood backdrop. */
.section.reviews .section-head .section-lead a {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-bottom-color: rgba(0, 0, 0, 0.6) !important;
  font-weight: 800;
  text-shadow: none !important;
}
.section.reviews .section-head .section-lead a:hover {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  border-bottom-color: #000000 !important;
}

/* Hide the sage flourish underline below the REVIEWS title pill —
   the black pill is doing the work; the green hairline competes. */
.section.reviews .section-head .section-title::after {
  display: none !important;
}

/* CONTACT SECTION — "GET A QUOTE" eyebrow → BOLD BLACK text only
   (no pill background). Larger uppercase header above the
   Personalized Quote title. */
.section.contact .section-head .eyebrow {
  background: transparent !important;
  color: var(--c-black) !important;
  -webkit-text-fill-color: var(--c-black) !important;
  padding: 0 !important;
  font-size: 22px !important;
  letter-spacing: 0.32em !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin-bottom: 22px !important;
  display: inline-block;
  text-transform: uppercase;
}
.section.contact .section-head .eyebrow::after {
  display: none !important;
}

/* Form inputs + selects + textareas — fix the "black rectangle"
   click/focus issue across ALL field types. The original dark-theme
   rule switched the background to dark ink on :focus. Now every form
   field stays CREAM with dark text, and what you type shows clearly
   inside the field. A soft sage focus ring replaces the dark fill. */
.contact-form .form-field input,
.contact-form .form-field input:focus,
.contact-form .form-field input:active,
.contact-form .form-field input:hover,
.contact-form .form-field select,
.contact-form .form-field select:focus,
.contact-form .form-field select:active,
.contact-form .form-field textarea,
.contact-form .form-field textarea:focus,
.contact-form .form-field textarea:active {
  background-color: var(--c-night) !important;
  color: var(--c-ink) !important;
  -webkit-text-fill-color: var(--c-ink) !important;
  caret-color: var(--c-ink) !important;
}
.contact-form .form-field input:focus,
.contact-form .form-field select:focus,
.contact-form .form-field textarea:focus {
  outline: none !important;
  border-color: var(--c-sage) !important;
  box-shadow: 0 0 0 3px rgba(138, 166, 115, 0.22) !important;
}
/* Placeholder text stays muted gray so it's distinguishable from
   typed content. */
.contact-form .form-field input::placeholder,
.contact-form .form-field textarea::placeholder {
  color: var(--c-steel) !important;
  -webkit-text-fill-color: var(--c-steel) !important;
  opacity: 1;
}
/* Repaint the dropdown chevron arrow as a dark icon. */
.contact-form .form-field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--c-ink) 50%),
    linear-gradient(135deg, var(--c-ink) 50%, transparent 50%) !important;
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px !important;
  background-size: 5px 5px, 5px 5px !important;
  background-repeat: no-repeat !important;
}
.contact-form .form-field select option {
  background: #ffffff !important;
  color: var(--c-ink) !important;
}
/* Safari autofill yellow override — keep autofilled inputs cream too. */
.contact-form .form-field input:-webkit-autofill,
.contact-form .form-field input:-webkit-autofill:focus,
.contact-form .form-field input:-webkit-autofill:hover {
  -webkit-box-shadow: 0 0 0 1000px var(--c-night) inset !important;
  -webkit-text-fill-color: var(--c-ink) !important;
  caret-color: var(--c-ink) !important;
}

/* "Jackpot" strong words inside the form-notice — bold BLACK so they
   stand out as the named product reference in the descriptive sentence. */
.contact-form .form-notice p strong {
  color: var(--c-black) !important;
  -webkit-text-fill-color: var(--c-black) !important;
  font-weight: 800;
}

/* "*If no, no worries..." helper text — extra bottom margin so it
   doesn't sit on top of the Estimated Budget field below it. */
.contact-form .form-helper {
  margin: 6px 0 28px !important;
  padding: 0;
  line-height: 1.5;
}
.section.reviews .container { position: relative; z-index: 2; }
/* Review cards now sit on a textured backdrop, so we give them a
   solid white surface, a sage-tinted border, and a soft shadow
   so they read as crisp white "cards on a wall." */
.section.reviews .review-card {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  border-color: rgba(138, 166, 115, 0.30);
  box-shadow: 0 18px 50px rgba(74, 112, 80, 0.18), 0 2px 8px rgba(10, 10, 10, 0.05);
}

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 72px;
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 22px;
  line-height: 1.05;
}

.section-title--sm {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

.section-head--tight {
  margin-bottom: 48px;
}

.section-lead {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.7;
}

.section-head .section-lead { margin: 0 auto; }

.media-frame {
  margin: 0;
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-charcoal);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--rule);
}
.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.media-frame:hover img {
  transform: scale(1.04);
}

/* ============================================================
   9. MEET THE BARS & OWNERS
   ============================================================ */
.the-bar__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
  margin-bottom: 96px;
}
.the-bar__grid:last-child { margin-bottom: 0; }

/* Reverse split — image on left, text on right */
.the-bar__grid--reverse {
  grid-template-columns: 1.1fr 1fr;
}

.the-bar__media {
  display: flex;
  justify-content: center;
  align-items: center;
}
.the-bar__media .media-frame {
  /* Photos display at their natural ratio (no cropping), but capped
     in height so neither block dominates the page. The figure shrinks
     to wrap its image, so there are never empty letterbox bars. */
  aspect-ratio: auto;
  background: transparent;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--rule);
  max-width: 100%;
  display: inline-block;
  line-height: 0;
}
.the-bar__media .media-frame img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  display: block;
}

.signature {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--c-cheers);
  margin: 28px 0 0;
  text-shadow: 0 0 18px var(--c-mint-glow);
}

/* Full-width neon-green underline beneath the bar titles
   (Jackpot, 6 Foot LED Bar). The heading shrinks to the text width
   so the underline spans only the title — never the whole column. */
.the-bar__grid .section-title--sm {
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}
.the-bar__grid .section-title--sm::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-cheers);
  box-shadow: 0 0 14px var(--c-mint-glow);
  border-radius: 1px;
}

/* "The Bars" centered divider that sits between Owners and the Jackpot/LED bar blocks */
.the-bar__divider {
  margin-bottom: 24px;
}
.the-bar__divider .section-head {
  margin-bottom: 56px;
}

/* Decorative neon-green flourish lines on either side of "The Bars".
   Anchored to the H2 itself (not the section-head wrapper) so they
   sit perfectly aligned with the heading text, and they fade in
   gracefully toward the title for a refined editorial look. */
.the-bar__divider .section-title {
  position: relative;
  display: inline-block;
}
/* "THE BARS" decorative side rules — matched sage-green pill bars
   flanking the title on left + right. High-specificity selectors so
   the generic flourish-underline rule lower in the stylesheet cannot
   override the right-side ::after. Both bars now render identically. */
.section--dark.the-bar .the-bar__divider .section-head .section-title::before,
.section--dark.the-bar .the-bar__divider .section-head .section-title::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  /* 280px — longer bars that fill more of the page width either side
     of the "The Bars" pill. */
  width: 280px !important;
  /* 12px ≈ 1/8 inch thick at standard web display. */
  height: 12px !important;
  margin: 0 !important;
  border-radius: 100px !important;
  background: var(--c-sage) !important;
  box-shadow: 0 4px 14px rgba(110, 138, 89, 0.30) !important;
  opacity: 1 !important;
}
.section--dark.the-bar .the-bar__divider .section-head .section-title::before {
  right: calc(100% + 36px) !important;
  left: auto !important;
}
.section--dark.the-bar .the-bar__divider .section-head .section-title::after {
  left: calc(100% + 36px) !important;
  right: auto !important;
}
@media (max-width: 1100px) {
  .section--dark.the-bar .the-bar__divider .section-head .section-title::before,
  .section--dark.the-bar .the-bar__divider .section-head .section-title::after {
    width: 200px !important;
  }
}
@media (max-width: 900px) {
  .section--dark.the-bar .the-bar__divider .section-head .section-title::before,
  .section--dark.the-bar .the-bar__divider .section-head .section-title::after {
    width: 130px !important;
  }
}
@media (max-width: 640px) {
  .section--dark.the-bar .the-bar__divider .section-head .section-title::before,
  .section--dark.the-bar .the-bar__divider .section-head .section-title::after {
    display: none !important;
  }
}

/* Single + Double bar setup cards */
.setups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}

.setup-card {
  background: var(--c-black);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.setup-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-cheers);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px var(--c-mint-glow);
}
.setup-card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--c-charcoal);
}
.setup-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.setup-card:hover .setup-card__media img {
  transform: scale(1.05);
}
.setup-card__body {
  padding: 28px 28px 32px;
}
.setup-card__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-cheers);
  margin: 0 0 12px;
  text-shadow: 0 0 14px var(--c-mint-glow);
}
.setup-card__body h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 12px;
}
.setup-card__body p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   10. HOW IT WORKS
   ============================================================ */
.how-it-works__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  /* stretch makes the photo column match the steps column height exactly */
  align-items: stretch;
  max-width: 1100px;
  margin: 0 auto;
}

/* Photo column stacks vertically and uses flex so both photos share
   the available height equally — identical size, perfectly aligned
   top and bottom with the steps column on the left. */
.how-it-works__media {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.how-it-works__media .media-frame {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: auto;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: step;
}

/* Stacked steps for the new side-by-side layout */
.steps--stack {
  grid-template-columns: 1fr;
  gap: 18px;
}

.step {
  padding: 38px 28px;
  background: var(--c-night);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.step:hover {
  transform: translateY(-4px);
  border-color: var(--c-cheers);
  background: var(--c-charcoal);
  box-shadow: 0 0 0 1px var(--c-mint-glow);
}

/* In stacked layout, make steps a horizontal row inside */
.steps--stack .step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 28px;
  align-items: start;
  padding: 28px 32px;
}
.steps--stack .step__num {
  margin-bottom: 0;
  grid-row: span 2;
  align-self: center;
}
.steps--stack .step__title {
  margin-top: 4px;
}

.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  letter-spacing: 0.06em;
  color: var(--c-platinum);
  margin-bottom: 22px;
  background: linear-gradient(180deg, #ffffff 0%, #c8f5c8 45%, #4a7050 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.step__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-white);
  margin: 0 0 12px;
  text-transform: uppercase;
}
.step p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   11. SERVICES
   ============================================================ */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.service-card {
  background: var(--c-black);
  /* 12px ≈ 1/8 inch solid white frame wrapping the entire card —
     photo, title pill, description, and CTA all sit inside one
     clean white-edged unit so the three packages read as a matched
     set across the row. */
  border: 12px solid #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Flex column layout so all three cards stretch to the same height
     and the green CTA links at the bottom line up perfectly across
     the row regardless of description length. */
  display: flex;
  flex-direction: column;
  box-shadow: 0 14px 38px rgba(10, 10, 10, 0.22),
              0 4px 10px rgba(10, 10, 10, 0.12);
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: #ffffff;
  box-shadow: 0 28px 60px rgba(10, 10, 10, 0.30),
              0 0 0 1px rgba(138, 166, 115, 0.32);
}

.service-card__media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-charcoal);
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.service-card:hover .service-card__media img {
  transform: scale(1.06);
}

.service-card__body {
  padding: 32px 30px 36px;
  /* Flex column inside the body so the green CTA link is pushed to
     the very bottom of the card via `margin-top: auto`. With cards
     stretched to the same height by the parent grid, all three
     arrows now align horizontally across the row. */
  display: flex;
  flex-direction: column;
  flex: 1;
}
.service-card__body .link-arrow {
  margin-top: auto;
}
.service-card__body h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-white);
  margin: 0 0 14px;
  text-transform: uppercase;
}
.service-card__body p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 22px;
}

/* ============================================================
   12. FEATURE SPLIT (Bubbly Wall)
   ============================================================ */
.feature-split__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.feature-split__media .media-frame {
  aspect-ratio: 3/4;
}

.feature-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 36px;
  margin-top: 32px;
}
.feature-list-grid h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.feature-list-grid p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

/* ============================================================
   13. PACKAGES
   ============================================================ */
.package-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}

.package-card {
  background: var(--c-black);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.6s var(--ease), border-color 0.6s var(--ease);
}
.package-card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-strong);
}

.package-card--alt {
  background: var(--c-ink);
}

.package-card__header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 28px;
  margin-bottom: 28px;
}

.package-card__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-platinum);
  margin: 0 0 14px;
}

.package-card__header h3 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 14px;
}

.package-card__price {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--c-white);
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.package-card__price span {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 8px;
}

.package-card__lead {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.75;
  margin: 0 0 24px;
}

.package-card__list {
  flex: 1;
  margin-bottom: 32px;
}
.package-card__list li {
  font-size: 14px;
  color: var(--text);
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: relative;
  padding-left: 24px;
}
.package-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--c-platinum);
}

.package-card__cta { width: 100%; }

.packages-note {
  text-align: center;
  font-size: 13px;
  color: var(--c-steel);
  margin: 48px 0 0;
  font-style: italic;
}

/* ============================================================
   13b. OUR PACKAGES — three-column pricing with cocktail icons
   Silver / Platinum (featured) / Add-ons. Mint-green accents
   throughout: outlined cocktail SVGs, featured-card glow,
   bullet markers, badge, subtitle, and bottom disclaimer.
   ============================================================ */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch;
  /* extra top padding so the lifted Most Popular card has room
     for its floating badge above */
  padding-top: 18px;
}

.pkg-card {
  position: relative;
  background: var(--c-night);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 48px 34px 36px;
  display: flex;
  flex-direction: column;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pkg-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-cheers);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--c-mint-glow);
}

/* Featured (Platinum) card — visually lifted, mint border + glow */
.pkg-card--featured {
  background: var(--c-charcoal);
  border-color: var(--c-cheers);
  box-shadow: 0 0 0 1px var(--c-mint-glow), 0 30px 60px rgba(0, 0, 0, 0.55);
  transform: translateY(-12px);
  z-index: 2;
  /* Extra top padding so the MOST POPULAR badge fits inside the card
     without overlapping the icon and title below it. */
  padding-top: 60px;
}
.pkg-card--featured:hover {
  transform: translateY(-16px);
  border-color: var(--c-cheers);
  box-shadow: 0 0 0 1px var(--c-cheers), 0 36px 72px rgba(0, 0, 0, 0.6), 0 0 32px var(--c-mint-glow);
}

.pkg-card__featured-badge {
  /* Sits INSIDE the top of the Platinum card so the full pill is
     contained — no top-edge clip. */
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-sage);
  color: var(--c-white);
  padding: 8px 20px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 100px;
  box-shadow: 0 8px 20px rgba(110, 138, 89, 0.35),
              0 2px 4px rgba(10, 10, 10, 0.12);
  white-space: nowrap;
  z-index: 3;
}

/* Outlined cocktail glass icon — neon-mint tint with soft glow */
.pkg-card__icon {
  display: flex;
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  color: var(--c-cheers);
  filter: drop-shadow(0 0 14px var(--c-mint-glow));
}
.pkg-card__icon svg {
  width: 100%;
  height: 100%;
}

.pkg-card__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0;
  text-align: center;
  line-height: 1.1;
}

/* Header wrapper — fixed height keeps the green divider at the SAME Y
   position across all three cards regardless of title length or price. */
.pkg-card__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%;
  height: 134px;
  padding-bottom: 22px;
  margin-bottom: 22px;
  position: relative;
}
/* Bold sage divider line — clearly separates price area from the
   feature list. 3px thick + rounded ends + sage glow so it reads as
   an intentional brand-color separator. Now solid sage green from
   edge to edge (no fade-out at the sides) for a clean, confident
   horizontal rule. */
.pkg-card__header::after {
  content: '';
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 3px;
  background: var(--c-sage);
  border-radius: 100px;
  box-shadow: 0 2px 12px rgba(110, 138, 89, 0.35);
}
/* When a card has no price (Add Ons & Upgrades), center the title vertically */
.pkg-card__header--center {
  justify-content: center;
}

.pkg-card__price {
  text-align: center;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}
.pkg-card__price span {
  display: block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.pkg-card__price strong {
  display: block;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c-black) !important;
}

.pkg-card__subtitle {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-cheers);
  margin: 0 0 16px;
  text-shadow: 0 0 12px var(--c-mint-glow);
}

.pkg-card__list {
  flex: 1;
  margin-bottom: 22px;
}
.pkg-card__list li {
  position: relative;
  padding: 11px 0 11px 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pkg-card__list li:last-child { border-bottom: none; }
/* Mint-green bullet marker matches the rest of the green accent system */
.pkg-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18px;
  width: 12px;
  height: 1.5px;
  background: var(--c-cheers);
  box-shadow: 0 0 8px var(--c-mint-glow);
  border-radius: 1px;
}

/* Priced list variant — Add Ons & Upgrades. Each row becomes a flex
   container with the item label on the left and a mint-green price
   pinned to the right. Items align cleanly even when labels wrap. */
.pkg-card__list--priced li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.pkg-card__list-label {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
}
.pkg-card__list-label em {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  letter-spacing: 0.02em;
}
.pkg-card__list-price {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-cheers);
  text-shadow: 0 0 12px var(--c-mint-glow);
  line-height: 1;
  white-space: nowrap;
  text-align: right;
}
.pkg-card__list-unit {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-shadow: none;
}

/* "Basic mixer package" — a single bullet with a label + grouped sub-list,
   so all mixers read as one bundled offering instead of separate bullets. */
.pkg-card__list-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 13px !important;
  padding-bottom: 13px !important;
}
.pkg-card__list-block strong {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-white);
}
.pkg-card__list-block span {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Inline media frame inside the Platinum card — fills the gap between
   the basic mixer block and the disclaimer note with a polished image
   of the bar's bottle display. The image uses flex:1 to absorb whatever
   vertical space the short mixer list leaves behind. */
.pkg-card__media {
  flex: 1 1 0;
  min-height: 180px;
  margin: 4px 0 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--c-charcoal);
  position: relative;
}
.pkg-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.4s var(--ease);
}
.pkg-card--featured:hover .pkg-card__media img {
  transform: scale(1.04);
}
/* When the featured card has its inline media, the list reverts to its
   natural height so the image is the element that fills the leftover
   space — not the list. Silver and Add-Ons cards keep flex:1 on the list. */
.pkg-card--featured .pkg-card__list {
  flex: 0 0 auto;
}

.pkg-card__note {
  font-size: 12px;
  color: var(--c-silver);
  margin: 0 0 20px;
  text-align: center;
}
.pkg-card__note em { font-style: italic; }

.pkg-card__cta { width: 100%; }

/* Centered gratuity disclaimer below the three columns —
   bumped in size, weight and glow so customers can't miss it. */
.pkg-disclaimer {
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-cheers);
  margin: 64px auto 0;
  text-shadow: 0 0 22px rgba(184, 245, 184, 0.4);
  letter-spacing: 0.08em;
  line-height: 1.5;
}
.pkg-disclaimer em { font-style: italic; }

/* Alcohol disclaimer — informative, not alarming. Card-style block under
   the gratuity note that explains why alcohol is excluded from package
   pricing, plus the upside (savings) and the convenience PP offers via
   Wine, Beer & Spirits. Styled with a mint-green edge accent to match
   the site's accent system while staying secondary to the package cards. */
.pkg-alcohol-note {
  position: relative;
  max-width: 880px;
  margin: 36px auto 0;
  padding: 28px 32px 28px 38px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: left;
}
.pkg-alcohol-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 2px;
  background: var(--c-cheers);
  box-shadow: 0 0 10px var(--c-mint-glow);
  border-radius: 1px;
}
.pkg-alcohol-note p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.pkg-alcohol-note p:last-child { margin-bottom: 0; }
.pkg-alcohol-note__lead {
  font-family: var(--font-display);
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 14px !important;
}
.pkg-alcohol-note__lead strong {
  color: var(--c-cheers);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pkg-alcohol-note strong {
  color: var(--c-white);
  font-weight: 600;
}

@media (max-width: 720px) {
  .pkg-alcohol-note {
    padding: 22px 22px 22px 28px;
  }
  .pkg-alcohol-note__lead {
    font-size: 13px !important;
    letter-spacing: 0.04em;
  }
  .pkg-alcohol-note p { font-size: 13.5px; }
}

/* Cash bar note — visually part of the same family as the alcohol
   disclaimer above (so they read as a pair), but more compact since
   it's a short single paragraph + inline contact CTA. */
.pkg-cashbar-note {
  position: relative;
  max-width: 880px;
  margin: 18px auto 0;
  padding: 22px 32px 22px 38px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: left;
}
.pkg-cashbar-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: var(--c-cheers);
  box-shadow: 0 0 10px var(--c-mint-glow);
  border-radius: 1px;
}
.pkg-cashbar-note p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
.pkg-cashbar-note__lead {
  font-family: var(--font-display);
  font-size: 15px !important;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--c-white);
  margin-bottom: 10px !important;
}
.pkg-cashbar-note__lead strong {
  color: var(--c-cheers);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pkg-cashbar-note a {
  color: var(--c-cheers);
  text-decoration: none;
  border-bottom: 1px solid rgba(184, 245, 184, 0.4);
  transition: border-color 0.3s var(--ease);
}
.pkg-cashbar-note a:hover {
  border-bottom-color: var(--c-cheers);
}

@media (max-width: 720px) {
  .pkg-cashbar-note {
    padding: 18px 22px 18px 28px;
  }
  .pkg-cashbar-note__lead {
    font-size: 13px !important;
    letter-spacing: 0.04em;
  }
  .pkg-cashbar-note p { font-size: 13.5px; }
}

/* ============================================================
   PACKAGES — Notes grid layout
   Stacks the two existing notes (Please note + Wanting a Cash Bar)
   in the left column and the new Mocktails bubble in the right.
   The right bubble stretches to match the combined height of the
   left stack so the row reads as one balanced unit.
   ============================================================ */
.pkg-notes-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  max-width: 1100px;
  margin: 36px auto 0;
  align-items: stretch;
}
.pkg-notes-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* Pull the alcohol + cashbar notes back to a centered max-width
   inside their grid column so they look balanced next to the bubble. */
.pkg-notes-grid .pkg-alcohol-note,
.pkg-notes-grid .pkg-cashbar-note {
  max-width: 100%;
  margin: 0;
}

/* Mocktails bubble — sage-tinted "bubble" with a softly rounded shape,
   sage accent stripe, and friendly readable typography. Stretches to
   fill the right column so it matches the height of the stacked notes. */
.pkg-mocktail-note {
  position: relative;
  background: var(--c-sage-tint);
  border: 1px solid rgba(138, 166, 115, 0.45);
  border-radius: 28px;
  padding: 32px 32px 28px 40px;
  color: var(--c-ink);
  text-align: left;
  box-shadow: 0 10px 28px rgba(110, 138, 89, 0.18),
              0 2px 6px rgba(10, 10, 10, 0.06);
  display: flex;
  flex-direction: column;
  /* Title sits at the top, description follows, then the two photos
     are pushed to the bottom of the bubble. */
  justify-content: flex-start;
  gap: 14px;
}
/* Sage accent stripe on the left edge — matches the same brand-color
   stripe pattern used on the other notes. */
.pkg-mocktail-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 28px;
  width: 3px;
  background: var(--c-sage);
  box-shadow: 0 0 12px rgba(110, 138, 89, 0.35);
  border-radius: 1px;
}
.pkg-mocktail-note__lead {
  font-family: var(--font-display);
  font-size: 24px !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-black);
  margin: 0 !important;
  line-height: 1.1;
}
.pkg-mocktail-note__lead strong {
  font-weight: 500;
  color: var(--c-black);
  letter-spacing: 0.08em;
}
.pkg-mocktail-note p {
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  color: var(--c-silver);
}
.pkg-mocktail-note p strong {
  color: var(--c-sage-deep);
  font-weight: 700;
}

/* Two mocktail photos at the BOTTOM of the bubble — equal-width grid,
   each photo framed by a thin sage border so they read as a matched
   pair inside the bubble. margin-top: auto pushes them to the bottom
   of the flex column so they sit flush with the bubble base. */
.pkg-mocktail-note__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
}
.pkg-mocktail-note__photo {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--c-white);
  border: 2px solid rgba(138, 166, 115, 0.55);
  box-shadow: 0 6px 16px rgba(110, 138, 89, 0.16),
              0 2px 4px rgba(10, 10, 10, 0.08);
  transition: transform 0.4s var(--ease),
              box-shadow 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.pkg-mocktail-note__photo:hover {
  transform: translateY(-2px);
  border-color: var(--c-sage);
  box-shadow: 0 12px 28px rgba(110, 138, 89, 0.24);
}
.pkg-mocktail-note__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.pkg-mocktail-note__photo:hover img {
  transform: scale(1.04);
}

/* Responsive — stack vertically on narrower screens so nothing wraps awkwardly. */
@media (max-width: 900px) {
  .pkg-notes-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .pkg-mocktail-note {
    padding: 24px 22px 24px 30px;
  }
  .pkg-mocktail-note__lead {
    font-size: 20px !important;
  }
  .pkg-mocktail-note p { font-size: 14px; }
}

@media (max-width: 1100px) {
  .pkg-grid {
    grid-template-columns: 1fr;
    gap: 36px;
    max-width: 540px;
    padding-top: 0;
  }
  .pkg-card--featured {
    transform: translateY(0);
  }
  .pkg-card--featured:hover {
    transform: translateY(-4px);
  }
}

/* ============================================================
   13c. RENTALS — quick-scan list of à la carte rental gear.
   Small, easy-to-read 3-column grid with mint-green accents.
   ============================================================ */
.rentals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1100px;
  margin: 0 auto;
}

.rental-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 26px 32px;
  background: var(--c-night);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.rental-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-cheers);
  box-shadow: 0 0 0 1px var(--c-mint-glow), 0 16px 40px rgba(0, 0, 0, 0.4);
}
/* Mint-green accent stripe on the left edge of each card —
   matches the bullet-marker styling used elsewhere on the page. */
.rental-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 2px;
  background: var(--c-cheers);
  box-shadow: 0 0 10px var(--c-mint-glow);
  border-radius: 1px;
}
/* Photo frame at the top of each card — fixed 4:3 ratio keeps all
   six cards perfectly aligned regardless of image dimensions. The
   image sits to the right of the mint-green edge stripe and is
   gently zoomed on hover for a touch of polish. */
.rental-card__media {
  position: relative;
  margin: -10px -14px 18px -14px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--radius-md) - 4px);
  background: #0a0a0a;
}
.rental-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.6s var(--ease), filter 0.6s var(--ease);
  filter: saturate(0.94) brightness(0.97);
}
.rental-card:hover .rental-card__media img {
  transform: scale(1.02);
  filter: saturate(1) brightness(1);
}
/* Subtle inset shadow to integrate the photo with the card body
   instead of letting it feel pasted on. */
.rental-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
              inset 0 -40px 50px -30px rgba(0, 0, 0, 0.55);
  border-radius: inherit;
}

.rental-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 8px;
}
.rental-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Price line — anchored at the bottom of each card with a thin
   mint-green divider above so it reads as a distinct, official
   price tag rather than body copy. */
.rental-card__price {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(184, 245, 184, 0.18);
}
.rental-card__price + .rental-card__price { margin-top: 0; }

.rental-card__amount {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--c-cheers);
  text-shadow: 0 0 14px var(--c-mint-glow);
  line-height: 1;
}

.rental-card__unit {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Push price + spacing forward when card content is short
   (so all six cards align nicely as a grid) */
.rentals-grid { align-items: stretch; }

/* Bottom rentals disclaimer — matches the neon-green treatment of the
   gratuity disclaimer in the Packages section so it reads as a sibling
   "fine print" statement, while still being clearly visible. */
.rentals-disclaimer {
  text-align: center;
  font-size: 17px;
  font-weight: 500;
  color: var(--c-cheers);
  margin: 24px auto 0;
  text-shadow: 0 0 22px rgba(184, 245, 184, 0.4);
  letter-spacing: 0.06em;
  line-height: 1.5;
  max-width: 820px;
}
.rentals-disclaimer em { font-style: italic; }

@media (max-width: 1024px) {
  .rentals-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .rentals-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   14. GALLERY — JS-driven masonry layout
   Each photo keeps its natural aspect ratio. JS measures each
   rendered item and drops it into the currently-shortest column,
   so columns always balance regardless of portrait/landscape mix.
   ============================================================ */
.gallery-grid {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  min-height: 400px;
  /* Overflow hidden keeps the bottom edge flush — the JS uses the
     shortest column for grid height, and any tiny overshoot in the
     other columns is clipped here for a perfectly even bottom. */
  overflow: hidden;
  transition: height 0.4s var(--ease);
}

/* Individual photo tile. Smaller items + thinner border for a sleek
   editorial grid feel. Subtle desaturation by default so the gallery
   reads as a unified body of work; hover snaps each photo to full
   color + a quiet mint-green frame so it feels alive on interaction. */
.gallery-item {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--c-night);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  cursor: zoom-in;
  transition:
    opacity 0.6s var(--ease),
    transform 0.45s var(--ease),
    top 0.45s var(--ease),
    left 0.45s var(--ease),
    border-color 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
  will-change: transform, top, left;
}

.gallery-grid.is-laid-out .gallery-item {
  opacity: 1;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  filter: saturate(0.88) brightness(0.94);
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.gallery-item:hover {
  transform: translateY(-3px);
  border-color: rgba(184, 245, 184, 0.5);
  box-shadow: 0 0 0 1px var(--c-mint-glow), 0 18px 38px rgba(0, 0, 0, 0.45);
  z-index: 2;
}
.gallery-item:hover img {
  transform: scale(1.05);
  filter: saturate(1) brightness(1);
}

/* Before JS runs, stack items normally so the page isn't blank */
.gallery-grid:not(.is-laid-out) .gallery-item {
  position: static;
  width: 100%;
  margin-bottom: 14px;
  opacity: 0;
}

/* ============================================================
   15. ABOUT
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.about__media .media-frame {
  aspect-ratio: 4/5;
}
.signature {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--c-platinum);
  margin: 28px 0 0;
}

/* ============================================================
   16. REVIEWS
   ============================================================ */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.review-card {
  background: var(--c-night);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.review-card:hover {
  transform: translateY(-4px);
  border-color: var(--rule-strong);
}
.review-card__stars {
  font-size: 16px;
  color: #f9c846; /* warm Google-gold star color so reviews read as authentic */
  letter-spacing: 3px;
  margin-bottom: 18px;
  text-shadow: 0 0 12px rgba(249, 200, 70, 0.25);
}
.review-card blockquote {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--text);
  font-style: normal;
  font-weight: 300;
  position: relative;
}
.review-card blockquote::before {
  /* Quiet opening quotation mark in mint-green — adds editorial polish
     without overwhelming the actual review text. */
  content: '\201C';
  position: absolute;
  top: -16px;
  left: -4px;
  font-family: var(--font-display);
  font-size: 44px;
  line-height: 1;
  color: var(--c-cheers);
  opacity: 0.35;
}
.review-card__attr {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(184, 245, 184, 0.12);
}
.review-card__name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-white);
}
.review-card__meta {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.review-disclaimer em { font-style: italic; }
.section-head a { color: var(--c-pearl); border-bottom: 1px solid var(--rule); }
.section-head a:hover { color: var(--c-white); }

/* ============================================================
   17. FAQ
   ============================================================ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--rule);
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 0;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color 0.3s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 300;
  color: var(--c-platinum);
  transition: transform 0.4s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(45deg);
}
.faq-item summary:hover { color: var(--c-platinum); }
.faq-item p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.75;
  padding: 0 0 26px;
  margin: 0;
  max-width: 720px;
}

/* ============================================================
   18. CONTACT
   ============================================================ */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 38px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.contact-info h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 10px;
}
.contact-info p {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.contact-info a { color: var(--text); }
.contact-info a:hover { color: var(--c-white); }

/* Form */
.contact-form {
  background: var(--c-night);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 44px;
}
.form-row {
  margin-bottom: 18px;
}
.form-row--two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--c-black);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--c-white);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  width: 100%;
}
.form-field textarea {
  resize: vertical;
  min-height: 100px;
  font-family: var(--font-body);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--c-platinum);
  background: var(--c-ink);
}
.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-platinum) 50%), linear-gradient(135deg, var(--c-platinum) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.form-submit {
  width: 100%;
  margin-top: 8px;
  padding: 16px 30px;
}
.form-note {
  font-size: 12px;
  color: var(--c-steel);
  text-align: center;
  margin: 14px 0 0;
}

/* Notice block — for the JACKPOT info paragraph between fields. Mint accent
   on the left edge ties it visually to the green accent system. */
.form-notice {
  background: var(--c-charcoal);
  border-left: 2px solid var(--c-cheers);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin: 4px 0 18px;
  box-shadow: 0 0 12px rgba(184, 245, 184, 0.06);
}
.form-notice p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.65;
  margin: 0;
}
.form-notice strong {
  color: var(--c-white);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Small helper text below a field — neon-mint italic, like the asterisk
   side-notes used elsewhere on the page. */
.form-helper {
  font-size: 12px;
  color: var(--c-cheers);
  margin: -8px 0 18px;
  text-shadow: 0 0 10px var(--c-mint-glow);
  letter-spacing: 0.02em;
}
.form-helper em { font-style: italic; }

/* Checkbox + agreement field — horizontal row with mint-tinted check */
.form-field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 22px;
  cursor: pointer;
}
.form-field--checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--c-cheers);
  cursor: pointer;
  flex: 0 0 auto;
}
.form-field--checkbox span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  line-height: 1.55;
}

/* ============================================================
   19. FOOTER
   ============================================================ */
.site-footer {
  background: var(--c-ink);
  border-top: 1px solid var(--rule);
  padding: 80px 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

/* Brand column — logo + tagline stacked together as a tight unit
   in the bottom-left corner. Both elements share the same vertical
   center axis so the brand mark sits perfectly centered above the
   tagline below it. */
.footer-grid > .footer-col:first-child {
  text-align: center;
  align-items: center;
  margin-left: 0;
  max-width: 320px;
}
.footer-logo {
  width: 140px;
  height: auto;
  display: block;
  margin: 0 auto 18px;
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.45));
}
.footer-tagline {
  text-align: center !important;
  margin: 0 auto !important;
  max-width: 320px;
}
@media (max-width: 720px) {
  .footer-grid > .footer-col:first-child { margin-left: 0; }
  .footer-logo { width: 110px; }
}

/* Sage green underline accent on the CONTACT / ADDRESS / FOLLOW
   footer column headings — quiet brand-color tie-in below each label. */
.footer-col h4 {
  position: relative;
  padding-bottom: 10px;
  display: inline-block;
}
.footer-col h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--c-sage);
  border-radius: 100px;
  box-shadow: 0 0 8px rgba(138, 166, 115, 0.4);
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-platinum);
  margin: 0;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-white);
  margin: 0 0 18px;
}

.footer-col p, .footer-col a {
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 8px;
  line-height: 1.7;
}
.footer-col a:hover { color: var(--c-white); }

.social-list li { margin-bottom: 8px; }

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  text-align: center;
}
.footer-bottom p {
  font-size: 12px;
  color: var(--c-steel);
  letter-spacing: 0.06em;
  margin: 0;
}

/* ============================================================
   20. RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .the-bar__grid,
  .the-bar__grid--reverse,
  .feature-split__grid,
  .about__grid,
  .contact__grid,
  .how-it-works__grid {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .feature-split__media .media-frame { aspect-ratio: 4/5; }
  /* Photos go side-by-side on tablet, with a fixed aspect ratio so both
     are still the same size when the column stretching no longer applies. */
  .how-it-works__media { flex-direction: row; }
  .how-it-works__media .media-frame { aspect-ratio: 4/3; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .setups { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; gap: 18px; }
  /* Gallery column count is handled by JS masonry */
}

@media (max-width: 1024px) {
  .primary-nav { display: none; }
  .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .mobile-menu { display: block; }

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

@media (max-width: 720px) {
  :root { --header-h: 72px; }

  .header-brand__text { display: none; }

  .section { padding: 80px 0; }
  .section-head { margin-bottom: 48px; }

  .hero { min-height: 580px; }
  .hero__lockup { bottom: 14%; padding: 0 20px; }
  .hero__eyebrow { letter-spacing: 0.32em; margin-bottom: 16px; }
  .hero__wordmark { letter-spacing: 0.1em; }
  .hero__rule { margin: 18px auto 14px; }
  .hero__tagline { letter-spacing: 0.22em; margin-bottom: 26px; }
  .hero__cta-row { gap: 10px; }
  .hero__cta-row .btn { padding: 13px 22px; font-size: 11px; letter-spacing: 0.18em; }
  .hero__scroll { bottom: 18px; }

  .feature-list { grid-template-columns: 1fr; gap: 14px; }
  .feature-list-grid { grid-template-columns: 1fr; gap: 22px; }

  .steps { grid-template-columns: 1fr; }
  .steps--stack .step { grid-template-columns: 1fr; gap: 14px; padding: 28px 24px; }
  .steps--stack .step__num { grid-row: auto; align-self: flex-start; }
  /* On phones, photos stack again */
  .how-it-works__media { flex-direction: column; }
  .the-bar__grid { margin-bottom: 64px; }

  .package-grid { grid-template-columns: 1fr; }
  .package-card { padding: 36px 28px; }

  /* Gallery column count is handled by JS masonry */

  .contact-info { grid-template-columns: 1fr; }
  .contact-form { padding: 32px 24px; }
  .form-row--two { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr; gap: 36px; margin-bottom: 44px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__scroll-chevron { animation: none; }
}

/* ============================================================
   WHITE-MODE POLISH
   The whole stylesheet was originally built for a dark canvas. The
   palette tokens at the top flip the page to warm cream + white, and
   the block below handles everything that needs explicit re-tuning:
   card backgrounds, on-card text colors, dividers, hover states, the
   alcohol disclaimers, and the contact form. The goal is a luxury,
   editorial feel — like a high-end wedding brochure.
   ============================================================ */

/* Eyebrow + section title contrast on white pages */
.section .eyebrow,
.section--dark .eyebrow {
  color: var(--c-sage-deep);
  letter-spacing: 0.32em;
  font-weight: 600;
}
.section .eyebrow--accent,
.section--dark .eyebrow--accent {
  color: var(--c-sage-deep);
}
.section .section-title,
.section--dark .section-title {
  color: var(--c-black);
}
.section .section-lead,
.section--dark .section-lead {
  color: var(--c-silver);
}
.section .section-lead a,
.section--dark .section-lead a {
  color: var(--c-sage-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 138, 89, 0.45);
  transition: border-color 0.3s var(--ease);
}
.section .section-lead a:hover,
.section--dark .section-lead a:hover {
  border-bottom-color: var(--c-sage-deep);
}

/* --- Package cards --- */
.pkg-card {
  background: var(--c-white);
  border: 1px solid var(--c-iron);
  box-shadow: 0 4px 14px rgba(74, 112, 80, 0.06), 0 1px 3px rgba(10, 10, 10, 0.04);
}
.pkg-card:hover {
  border-color: var(--c-sage);
  box-shadow: 0 24px 60px rgba(74, 112, 80, 0.18), 0 0 0 1px rgba(138, 166, 115, 0.32);
}
/* Featured (Platinum) card uses a sage-tinted background and stronger
   shadow, matching the brochure's highlighted "Most Popular" band. */
.pkg-card--featured {
  background: var(--c-sage-tint);
  border-color: var(--c-sage);
  box-shadow: 0 0 0 1px var(--c-sage), 0 30px 60px rgba(74, 112, 80, 0.22);
}
.pkg-card--featured:hover {
  border-color: var(--c-sage-deep);
  box-shadow: 0 0 0 1px var(--c-sage-deep), 0 36px 72px rgba(74, 112, 80, 0.28);
}
.pkg-card__featured-badge {
  background: var(--c-sage);
  color: var(--c-white);
  box-shadow: 0 6px 18px rgba(110, 138, 89, 0.35);
}
.pkg-card__icon { color: var(--c-sage-deep); filter: drop-shadow(0 0 10px rgba(138, 166, 115, 0.30)); }
.pkg-card__title { color: var(--c-black); }
.pkg-card__price-row .pkg-card__price-label,
.pkg-card__price-row .pkg-card__price-amount { color: var(--c-black); }
.pkg-card__list li { color: var(--c-ink); border-bottom-color: rgba(10, 10, 10, 0.06); }
.pkg-card__list li::before { background: var(--c-sage); box-shadow: 0 0 6px rgba(138, 166, 115, 0.5); }
.pkg-card__list-block strong { color: var(--c-black); }
.pkg-card__list-block span { color: var(--c-silver); }
.pkg-card__note { color: var(--c-silver); }
.pkg-card__list-label { color: var(--c-ink); }
.pkg-card__list-label em { color: var(--c-silver); }
.pkg-card__list-price { color: var(--c-sage-deep); text-shadow: none; }
.pkg-card__list-unit { color: var(--c-silver); }

/* --- Rental cards — 12px (~1/8 inch) solid black picture-frame
   border around each card. Sage left-edge stripe removed so every
   card reads as a clean framed unit. --- */
.rental-card {
  background: var(--c-white);
  border: 12px solid var(--c-black) !important;
  border-radius: 6px;
  padding: 22px 22px 22px 22px !important;
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.18),
              0 4px 10px rgba(10, 10, 10, 0.10);
}
.rental-card:hover {
  border-color: var(--c-black) !important;
  box-shadow: 0 20px 44px rgba(10, 10, 10, 0.26),
              0 6px 14px rgba(10, 10, 10, 0.12);
}
/* Remove the sage left-edge stripe from every rental card. */
.rental-card::before { display: none !important; }
.rental-card h3 { color: var(--c-black); }
.rental-card p { color: var(--c-silver); }
.rental-card__media { background: #efebe1; }
.rental-card__amount { color: var(--c-sage-deep); text-shadow: none; }
.rental-card__unit { color: var(--c-silver); }
.rental-card__price { border-top-color: rgba(138, 166, 115, 0.30); }

/* "RENTALS" section title — black pill bandaid with white text,
   matching the brochure pill system used elsewhere on the site. */
.section.rentals .section-head .section-title {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white) !important;
  padding: 28px 64px;
  border-radius: 100px;
  margin: 0 auto 28px;
  width: fit-content;
  max-width: 92%;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.24),
              0 2px 6px rgba(10, 10, 10, 0.14);
  position: relative;
  line-height: 1.1;
  letter-spacing: 0.06em;
}
.section.rentals .section-head .section-title::after {
  display: none !important;
}

.rentals-disclaimer { color: var(--c-sage-deep) !important; text-shadow: none !important; }

/* --- Disclaimers (gratuity + alcohol + cashbar) --- */
.pkg-disclaimer { color: var(--c-sage-deep); text-shadow: none; }
.pkg-alcohol-note,
.pkg-cashbar-note {
  background: var(--c-white);
  border: 1px solid var(--c-iron);
  color: var(--c-silver);
  box-shadow: 0 4px 14px rgba(74, 112, 80, 0.06);
}
.pkg-alcohol-note::before,
.pkg-cashbar-note::before { background: var(--c-sage); box-shadow: 0 0 8px rgba(138, 166, 115, 0.4); }
.pkg-alcohol-note__lead,
.pkg-cashbar-note__lead { color: var(--c-black) !important; }
.pkg-alcohol-note__lead strong,
.pkg-cashbar-note__lead strong { color: var(--c-sage-deep); }
.pkg-alcohol-note strong { color: var(--c-black); }
.pkg-cashbar-note a {
  color: var(--c-sage-deep);
  border-bottom-color: rgba(110, 138, 89, 0.45);
}
.pkg-cashbar-note a:hover { border-bottom-color: var(--c-sage-deep); }

/* --- Review cards (default outside the boxwood section) --- */
.review-card {
  background: var(--c-white);
  border: 1px solid var(--c-iron);
  box-shadow: 0 4px 14px rgba(74, 112, 80, 0.06);
}
.review-card:hover {
  border-color: var(--c-sage);
  box-shadow: 0 16px 40px rgba(74, 112, 80, 0.18);
}
.review-card blockquote { color: var(--c-ink); }
.review-card blockquote::before { color: var(--c-sage); opacity: 0.6; }
.review-card__attr { border-top-color: rgba(138, 166, 115, 0.25); }
.review-card__name { color: var(--c-black); }
.review-card__meta { color: var(--c-silver); }

/* --- "Meet the Owners" / About section --- */
.about__name { color: var(--c-black); }
.about__role { color: var(--c-sage-deep); }
.about__bio { color: var(--c-silver); }

/* --- Feature list (Services section) --- */
.feature-list h4,
.feature-list-grid h4,
.feature-list-grid__title,
.service-card h4,
.service-card__title { color: var(--c-black); }
.feature-list p,
.feature-list-grid p,
.service-card p { color: var(--c-silver); }
.feature-list-icon,
.service-card__icon,
.service-card svg { color: var(--c-sage-deep); }

/* --- How It Works steps --- */
.step__num { color: var(--c-sage); }
.step__title { color: var(--c-black); }
.step__body { color: var(--c-silver); }

/* --- The Bars titles (Jackpot / 6 ft LED) --- */
.the-bar__title { color: var(--c-black); }
.the-bar__body { color: var(--c-silver); }

/* --- Contact form --- */
.contact-form {
  background: var(--c-white);
  border: 1px solid var(--c-iron);
  box-shadow: 0 8px 28px rgba(74, 112, 80, 0.08);
}
.contact-form label { color: var(--c-ink); }
.contact-form input,
.contact-form select,
.contact-form textarea {
  background: var(--c-night);
  border: 1px solid var(--c-iron);
  color: var(--c-ink);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--c-steel); }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--c-sage);
  outline: none;
  box-shadow: 0 0 0 3px rgba(138, 166, 115, 0.18);
}
.contact-info h4,
.contact-info strong { color: var(--c-black); }
.contact-info p,
.contact-info li { color: var(--c-silver); }

/* --- Section section-head links / anchors --- */
.section-head a { color: var(--c-sage-deep); }

/* --- Footer (keep dark, stays luxurious like the brochure's bottom band) --- */
.site-footer { background: #0a0a0a; }
/* Footer brand tagline + address — bold white for prominence. */
.footer-tagline {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.footer-address {
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  line-height: 1.7;
}
.footer-col h4 { color: #e8e8e8; }
.footer-col a { color: rgba(232, 232, 232, 0.65); }
.footer-col a:hover { color: var(--c-sage); }
.footer-legal { color: rgba(232, 232, 232, 0.45); border-top-color: rgba(255, 255, 255, 0.08); }

/* --- Gallery section: white-mode tweak so photo tiles read on cream --- */
.gallery-item {
  background: var(--c-white);
  border-color: rgba(10, 10, 10, 0.10);
  box-shadow: 0 4px 12px rgba(74, 112, 80, 0.08);
}
.gallery-item:hover {
  border-color: var(--c-sage);
  box-shadow: 0 18px 38px rgba(74, 112, 80, 0.22), 0 0 0 1px rgba(138, 166, 115, 0.32);
}

/* --- Bullet markers, accent lines, etc. that used mint glow --- */
.eyebrow--accent::before,
.eyebrow--accent::after { background: var(--c-sage) !important; }

/* --- Hero, header, mobile menu keep their dark-mode text overrides --- */
.hero, .hero * { /* hero text colors are explicitly handled in section 7 */ }

/* ============================================================
   GREENERY LAYER — bring the boxwood / white-floral signature to
   life across the page. The motif appears as: a thin closing band
   at the top + bottom of the page, a soft watermark behind the
   "Meet the Owners" portrait, subtle floral edges on the Rentals
   and Gallery section headers, a richer Reviews backdrop, and a
   warm sage-gradient closer above the footer. All elements are
   layered with low opacity and soft masks so the page reads as
   one cohesive editorial spread rather than disconnected accents.
   ============================================================ */

/* Reusable boxwood band — used as section divider and "closing" strip.
   Photo + soft fade-to-cream at top + bottom so it integrates seamlessly. */
.boxwood-band {
  position: relative;
  height: 64px;
  background: url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  background-attachment: scroll;
}
.boxwood-band--thin { height: 38px; }
.boxwood-band::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(247, 244, 236, 0.55) 0%,
    rgba(247, 244, 236, 0.15) 50%,
    rgba(247, 244, 236, 0.55) 100%);
  pointer-events: none;
}
.boxwood-band::after {
  /* Thin sage hairlines at top and bottom of the band — like a
     pressed-leaf ribbon */
  content: '';
  position: absolute; left: 0; right: 0;
  top: 0; bottom: 0;
  border-top: 1px solid rgba(138, 166, 115, 0.42);
  border-bottom: 1px solid rgba(138, 166, 115, 0.42);
  pointer-events: none;
}

/* --- The Bars section (Meet the Owners + bars) ---
   Soft boxwood watermark fading in from the right edge — adds depth and
   makes the section feel rooted in greenery without distracting from
   the portrait or text. */
.section--dark.the-bar {
  background:
    radial-gradient(ellipse 700px 800px at 100% 50%,
      rgba(232, 239, 222, 0.55) 0%,
      rgba(232, 239, 222, 0) 60%),
    var(--c-charcoal);
  position: relative;
  overflow: hidden;
}
.section--dark.the-bar::before {
  content: '';
  position: absolute;
  top: -40px; right: -80px;
  width: 420px; height: 420px;
  background: url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  opacity: 0.16;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 75%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 75%);
}
/* Bottom orb of The Bars removed — was bleeding into Services and
   competing with the new full-color Services ornament. */
.section--dark.the-bar::after { display: none; }
.section--dark.the-bar > .container { position: relative; z-index: 1; }

/* --- Services section: FULL boxwood + white floral wall as the section
   background. The signature greenery covers the entire panel; a soft
   top + bottom darkening gradient deepens the edges just enough for
   pristine text contrast while preserving the lush green saturation
   in the middle. The boxwood blends edge-to-edge — no half-and-half. */
.section.services {
  background:
    linear-gradient(180deg,
      rgba(10, 10, 10, 0.38) 0%,
      rgba(10, 10, 10, 0.22) 14%,
      rgba(10, 10, 10, 0.18) 50%,
      rgba(10, 10, 10, 0.28) 86%,
      rgba(10, 10, 10, 0.42) 100%),
    url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  position: relative;
  overflow: hidden;
}
/* The previous "boxwood orb" decoration is no longer needed — the full
   background does the work. Disabled to keep the panel clean. */
.section.services::before { display: none !important; }
.section.services > .container {
  position: relative;
  z-index: 1;
}

/* --- How It Works: soft floral whisper in lower right --- */
.section--dark.how-it-works {
  position: relative;
  overflow: hidden;
}
.section--dark.how-it-works::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 380px; height: 380px;
  background: url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  opacity: 0.14;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(1px);
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 70%);
}
.section--dark.how-it-works > .container { position: relative; z-index: 1; }

/* --- Packages section: full-color boxwood band at top, cream below,
   no fades, no green hairlines. Clean brochure-page feel. --- */
.section.our-packages {
  background: var(--c-night);
  position: relative;
}
.section.our-packages::before {
  height: 130px;
  opacity: 1 !important;
  filter: none !important;
}
/* Old bottom vignette removed for a cleaner section close. */
.section.our-packages > .container::after { display: none !important; }
.section.our-packages > .container { position: relative; }

/* ============================================================
   PACKAGES SECTION — "Our Packages" black pill banner.
   Matches the brochure-style bandaid pill treatment used on
   Meet the Owners, The Bars, Built for Any Kind of Celebration,
   and From Inquiry to Last Call.
   ============================================================ */
.section.our-packages .section-head .section-title {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white) !important;
  padding: 28px 64px;
  border-radius: 100px;
  margin: 36px auto 28px;
  width: fit-content;
  max-width: 92%;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.24),
              0 2px 6px rgba(10, 10, 10, 0.14);
  position: relative;
  line-height: 1.1;
  letter-spacing: 0.06em;
  z-index: 2;
}
.section.our-packages .section-head .section-title::after {
  display: none !important;
}
.section.our-packages .section-head .section-lead {
  position: relative;
  z-index: 2;
  margin-top: 4px;
}

/* --- Rentals section: MIRRORED boxwood half-circles on the LEFT and
   RIGHT edges. Both ornaments share identical size, color, and shape;
   vertical center aligns with the RENTALS title pill. Together they
   frame the section with botanical accents on each side without ever
   touching the centered content area in between. --- */

/* Packages section ::after stays hidden. */
.section.our-packages::after { display: none !important; }
.section.our-packages { overflow: visible; }

.section.rentals {
  background:
    /* Soft sage washes on both top corners to support the mirrored
       half-circles. */
    radial-gradient(ellipse 600px 500px at 0% 0%,
      rgba(232, 239, 222, 0.45) 0%,
      rgba(232, 239, 222, 0) 60%),
    radial-gradient(ellipse 600px 500px at 100% 0%,
      rgba(232, 239, 222, 0.45) 0%,
      rgba(232, 239, 222, 0) 60%),
    var(--c-night);
  position: relative;
  overflow: hidden;
}

/* Shared geometry — IDENTICAL size, color, shape, mask. Vertical
   center sits at the RENTALS pill height so both halves flank the
   title evenly. */
.section.rentals::before,
.section.rentals::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 480px;
  height: 480px;
  background: url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  opacity: 1;
  pointer-events: none;
  border-radius: 50%;
  /* Punch up the saturation + a touch of contrast so the boxwood reads
     as rich, full-color greenery instead of a washed-out wash. */
  filter: saturate(1.25) brightness(1.04) contrast(1.04);
  /* Mask now keeps the boxwood at FULL opacity through 70% of the
     radius, then fades cleanly at the very edge. Result: solid, vibrant
     greenery with a soft feathered outer rim that still blends into
     the cream background. */
  mask-image: radial-gradient(circle at center,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0.75) 85%,
    rgba(0, 0, 0, 0.3) 95%,
    rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(circle at center,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 70%,
    rgba(0, 0, 0, 0.75) 85%,
    rgba(0, 0, 0, 0.3) 95%,
    rgba(0, 0, 0, 0) 100%);
}

/* LEFT half-circle — circle center on viewport's left edge. Right half
   of the circle is visible, forming a clean semicircle protruding into
   the section from the left. Pushed slightly inward so the bigger
   circle has more visible presence. */
.section.rentals::before {
  left: -220px;
  right: auto;
}

/* RIGHT half-circle — mirror image of the left. */
.section.rentals::after {
  right: -220px;
  left: auto;
}

/* On narrower screens hide both half-circles so they never crowd the
   rental cards (which start spanning more of the screen width). Bumped
   the breakpoint to 1200px since the circles are now larger. */
@media (max-width: 1200px) {
  .section.rentals::before,
  .section.rentals::after {
    width: 380px;
    height: 380px;
    left: auto;
    right: auto;
  }
  .section.rentals::before { left: -200px; }
  .section.rentals::after { right: -200px; }
}
@media (max-width: 1000px) {
  .section.rentals::before,
  .section.rentals::after { display: none; }
}

.section.rentals > .container { position: relative; z-index: 1; }

/* ============================================================
   GALLERY — Two pairs of animated martini glasses cheersing on
   either side of the "From the Road" title. Each pair contains
   two outlined sage-green martinis that lean toward each other
   and "clink" at the rim, with the liquid swishing inside on
   a continuous SMIL loop. A small sparkle flashes between each
   pair at the moment of contact for a real toast feel.
   ============================================================ */
.title-with-glasses {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.5vw, 44px);
  margin: 0 auto 28px;
  flex-wrap: nowrap;
  width: 100%;
}
.title-with-glasses .section-title {
  margin: 0 !important;
  flex-shrink: 0;
}

/* A pair container — holds the two cheersing glasses + the spark
   that flashes between them at the clink. */
.martini-pair {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.martini {
  width: clamp(50px, 5.6vw, 72px);
  height: auto;
  flex-shrink: 0;
  color: var(--c-sage);
  filter: drop-shadow(0 4px 12px rgba(138, 166, 115, 0.35));
  /* Pivot at the stem grip — where an invisible hand would hold the
     glass. Putting the origin near the middle of the stem (not the
     base) means the whole glass swings together like it's being held,
     instead of tipping over from the floor. */
  transform-origin: 50% 66%;
  transform-box: fill-box;
  will-change: transform;
}

/* Hand-held cheers motion — combines three movements at once to feel
   natural and realistic:
     1. LIFT      — translateY up (the hand raises the glass)
     2. APPROACH  — translateX toward partner (the hand moves in)
     3. TILT      — rotate inward (the wrist angles the glass)
   The arc starts with a small pre-lift, peaks at full clink, holds the
   contact, then smoothly releases. Cubic-bezier easing gives the
   motion real weight, like a hand and arm carrying the glass. */
.martini--clink-l {
  animation: pair-clink-l 4.2s cubic-bezier(0.42, 0.05, 0.45, 1) infinite;
}
.martini--clink-r {
  animation: pair-clink-r 4.2s cubic-bezier(0.42, 0.05, 0.45, 1) infinite;
}

@keyframes pair-clink-l {
  0%, 52% {
    transform: translate(0, 0) rotate(0deg);
  }
  60% {
    /* The hand starts lifting the glass — small pre-rise */
    transform: translate(0.5px, -3px) rotate(6deg);
  }
  70% {
    /* Peak clink — glass raised, leaned in, rim meeting partner's */
    transform: translate(2px, -7px) rotate(26deg);
  }
  78% {
    /* Hold the contact — glasses pressed together */
    transform: translate(2px, -7px) rotate(26deg);
  }
  86% {
    /* Hand starts pulling back — glass eases away from partner */
    transform: translate(1px, -3px) rotate(8deg);
  }
  96%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes pair-clink-r {
  0%, 52% {
    transform: translate(0, 0) rotate(0deg);
  }
  60% {
    transform: translate(-0.5px, -3px) rotate(-6deg);
  }
  70% {
    transform: translate(-2px, -7px) rotate(-26deg);
  }
  78% {
    transform: translate(-2px, -7px) rotate(-26deg);
  }
  86% {
    transform: translate(-1px, -3px) rotate(-8deg);
  }
  96%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* Subtle sparkle at the contact point — softer than before so it
   doesn't overpower the "clink!" text. Single pulse, no double-flash. */
.clink-spark {
  position: absolute;
  top: 22%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(212, 230, 187, 0.7) 40%,
    rgba(138, 166, 115, 0.35) 65%,
    rgba(138, 166, 115, 0) 80%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  animation: clink-spark 4.2s ease-out infinite;
  z-index: 2;
  filter: blur(0.4px);
}
@keyframes clink-spark {
  0%, 65%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  82% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

/* "clink!" pop-up text — rises above the pair at the moment of
   contact like a soft sound-effect cue. Uses Sacramento script
   for a hand-drawn, celebratory feel that matches the brand. */
.clink-text {
  position: absolute;
  bottom: 78%;
  left: 50%;
  transform: translate(-50%, 8px) scale(0.75);
  font-family: 'Sacramento', 'Allura', cursive;
  font-size: clamp(15px, 1.6vw, 22px);
  font-weight: 400;
  color: var(--c-sage-deep);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  text-shadow: 0 1px 4px rgba(247, 244, 236, 0.85),
               0 2px 10px rgba(138, 166, 115, 0.3);
  animation: clink-text 4.2s ease-out infinite;
}
@keyframes clink-text {
  0%, 64%, 100% {
    opacity: 0;
    transform: translate(-50%, 8px) scale(0.7);
  }
  70% {
    opacity: 1;
    transform: translate(-50%, -2px) scale(1.05);
  }
  82% {
    opacity: 1;
    transform: translate(-50%, -8px) scale(1);
  }
  92% {
    opacity: 0;
    transform: translate(-50%, -16px) scale(0.95);
  }
}

/* Respect users who prefer reduced motion — keep the glasses
   visible but static, and hide the sparkle + text. */
@media (prefers-reduced-motion: reduce) {
  .martini--clink-l,
  .martini--clink-r,
  .clink-spark,
  .clink-text {
    animation: none !important;
  }
  .clink-spark,
  .clink-text { opacity: 0 !important; }
}

/* Tighten gaps and scale glasses down on smaller screens. Below
   480px, hide the pairs entirely so the title pill stays the focus. */
@media (max-width: 720px) {
  .title-with-glasses { gap: 12px; }
  .martini { width: 42px; }
  .martini-pair { gap: 4px; }
}
@media (max-width: 480px) {
  .title-with-glasses .martini-pair { display: none; }
}

/* ============================================================
   GALLERY SECTION — "From The Road" black pill bandaid with a
   thin sage outline. Text is centered inside the pill, no
   underline beneath.
   ============================================================ */
.section.gallery .section-head .section-title {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white) !important;
  padding: 28px 72px;
  border-radius: 100px;
  margin: 0 auto 28px;
  width: fit-content;
  max-width: 92%;
  border: 5px solid var(--c-sage) !important;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.24),
              0 2px 6px rgba(10, 10, 10, 0.14),
              0 0 16px rgba(138, 166, 115, 0.32);
  position: relative;
  line-height: 1.1;
  letter-spacing: 0.06em;
  text-align: center !important;
}
/* Remove the previous sage underline that used to sit beneath the
   title pill — the new sage border around the pill replaces it. */
.section.gallery .section-head .section-title::after {
  display: none !important;
  content: none !important;
}

/* --- Gallery section: tight sage edges so 30-photo grid is framed
   by greenery rather than floating on plain cream. --- */
.section.gallery {
  background:
    linear-gradient(180deg,
      rgba(232, 239, 222, 0.35) 0%,
      rgba(247, 244, 236, 1) 8%,
      rgba(247, 244, 236, 1) 92%,
      rgba(232, 239, 222, 0.35) 100%),
    var(--c-night);
}

/* --- Reviews section: amplified boxwood backdrop. We dial up the
   contrast slightly so the signature wall reads more clearly while
   keeping the review text crisp on top. Adds soft white-floral
   highlight points by layering a subtle radial gradient. --- */
.section.reviews {
  background:
    linear-gradient(180deg,
      rgba(247, 244, 236, 0.78) 0%,
      rgba(232, 239, 222, 0.62) 25%,
      rgba(232, 239, 222, 0.58) 50%,
      rgba(232, 239, 222, 0.68) 75%,
      rgba(247, 244, 236, 0.90) 100%),
    radial-gradient(ellipse 800px 500px at 50% 50%,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(255, 255, 255, 0) 60%),
    url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  background-blend-mode: normal, screen, normal;
}

/* --- Contact section: warm sage gradient + boxwood "closer" band at top --- */
.section.contact {
  background: var(--c-night);
  position: relative;
}
/* Boxwood band + sage hairline at top of Contact REMOVED — they were
   creating a visible "rectangle" seam where the Reviews section ended
   and the Contact section began. The Contact section now opens with
   plain cream so it blends seamlessly with the Reviews fade above. */
.section.contact::before {
  display: none !important;
}
.section.contact::after {
  /* Sage hairline REMOVED — was part of the same rectangle seam. */
  display: none !important;
  content: '';
  position: absolute;
  top: 78px;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(138, 166, 115, 0) 0%,
    rgba(138, 166, 115, 0.55) 50%,
    rgba(138, 166, 115, 0) 100%);
  pointer-events: none;
}
.section.contact > .container { position: relative; z-index: 1; }

/* --- BROCHURE-STYLE BANDED SECTION HEADERS ---
   Each section eyebrow now sits inside a colored pill band — exactly
   like the "Silver", "Platinum MOST POPULAR", and "VIP" headers on the
   Platinum Pours brochure. Bands ALTERNATE between SAGE GREEN and BLACK
   down the page, creating the same luxury editorial rhythm as the printed
   collateral. White text reads crisply on both colors. */
.section .section-head .eyebrow,
.section--dark .section-head .eyebrow {
  display: inline-block;
  padding: 11px 32px;
  border-radius: 100px;
  margin-bottom: 26px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-white) !important;
  position: relative;
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.12);
}

/* SAGE GREEN band — echoes the brochure's "Most Popular Platinum"
   highlight + "Don't have space for our luxury trailer?" CTA band.
   Applied to alternating sections so green appears every other section
   down the page. */
.section.services .section-head .eyebrow,
.section.our-packages .section-head .eyebrow,
.section.gallery .section-head .eyebrow,
.section.contact .section-head .eyebrow {
  background: var(--c-sage);
  box-shadow: 0 6px 18px rgba(110, 138, 89, 0.35);
}
.section.services .section-head .eyebrow::after,
.section.our-packages .section-head .eyebrow::after,
.section.gallery .section-head .eyebrow::after,
.section.contact .section-head .eyebrow::after {
  /* Subtle inner highlight strip — gives the pill a soft 3D depth. */
  content: '';
  position: absolute;
  inset: 1px 1px 50% 1px;
  border-radius: 100px 100px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* BLACK band — the brochure's structural anchor color. Used on the
   "in-between" sections so the page reads as green/black/green/black
   like the printed brochure rows. */
.section--dark.the-bar .section-head .eyebrow,
.section--dark.how-it-works .section-head .eyebrow,
.section.rentals .section-head .eyebrow,
.section.reviews .section-head .eyebrow {
  background: var(--c-black);
  box-shadow: 0 6px 18px rgba(10, 10, 10, 0.32);
}
.section--dark.the-bar .section-head .eyebrow::after,
.section--dark.how-it-works .section-head .eyebrow::after,
.section.rentals .section-head .eyebrow::after,
.section.reviews .section-head .eyebrow::after {
  content: '';
  position: absolute;
  inset: 1px 1px 50% 1px;
  border-radius: 100px 100px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

/* The `--accent` modifier originally tinted the eyebrow text sage.
   Now that the eyebrow lives inside a colored pill, the text needs
   to stay WHITE regardless of the modifier — so we reset its color. */
.section .eyebrow--accent,
.section--dark .eyebrow--accent { color: var(--c-white) !important; }

/* ============================================================
   THE BARS SECTION — title pills (brochure-style)
   • "Meet the Owners"  → BLACK pill, white text
   • "The Bars"         → BLACK pill, white text, centered
   • "Jackpot"          → SAGE GREEN pill (brochure highlight green)
   • "6 Foot LED Bar"   → SAGE GREEN pill
   All pills are stadium-shaped (100px radius) to match the
   "Silver / Platinum / VIP" header bands on the printed brochure.
   ============================================================ */

/* Shared pill geometry — both colors inherit this. */
.section--dark.the-bar .the-bar__content .section-title,
.section--dark.the-bar .the-bar__divider .section-title {
  display: inline-block;
  color: var(--c-white);
  border-radius: 100px;
  position: relative;
  line-height: 1.05;
  letter-spacing: 0.06em;
}

/* BLACK pill — "Meet the Owners" (h2, first content block).
   Same black pill format, font swapped to the elegant Allura script
   for a hand-lettered cursive feel inside the pill. */
.section--dark.the-bar .the-bar__grid:first-of-type .the-bar__content .section-title {
  background: var(--c-black);
  padding: 18px 60px;
  margin-bottom: 38px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  font-family: 'Allura', 'Edwardian Script ITC', cursive !important;
  font-weight: 400;
  font-size: clamp(3.4rem, 6.5vw, 5.4rem);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.22),
              0 2px 6px rgba(10, 10, 10, 0.14);
}

/* BLACK pill — "The Bars" centered divider header. */
.section--dark.the-bar .the-bar__divider .section-title {
  background: var(--c-black);
  padding: 14px 60px;
  margin-bottom: 0;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.22),
              0 2px 6px rgba(10, 10, 10, 0.14);
}

/* ============================================================
   ALL BLACK BANDAID PILLS → Allura Script font.
   Every section title with a black pill background now shares
   the same elegant cursive lettering for site-wide typographic
   consistency.
   ============================================================ */
.section--dark.the-bar .the-bar__grid:first-of-type .the-bar__content .section-title,
.section--dark.the-bar .the-bar__divider .section-title,
.section.services .section-head .section-title,
.section--dark.how-it-works .section-head .section-title,
.section.our-packages .section-head .section-title,
.section.rentals .section-head .section-title,
.section.gallery .section-head .section-title,
.section.reviews .section-head .section-title {
  font-family: 'Allura', 'Edwardian Script ITC', cursive !important;
  font-weight: 400 !important;
  font-size: clamp(3.6rem, 7vw, 5.6rem) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* SAGE pill — "Jackpot" + "6 Foot LED Bar" (h3 / section-title--sm)
   Brochure's "Most Popular Platinum" green, slightly smaller padding
   to match the smaller heading size. */
.section--dark.the-bar .the-bar__grid .the-bar__content .section-title--sm {
  background: var(--c-sage);
  padding: 18px 42px;
  margin-bottom: 28px;
  padding-bottom: 18px;  /* override the earlier rule that added 12px for the underline */
  box-shadow: 0 12px 30px rgba(110, 138, 89, 0.34),
              0 2px 6px rgba(10, 10, 10, 0.10);
}
/* Hide the legacy mint-green underline below "Jackpot" + "6 Foot LED Bar" —
   the sage pill is doing the visual work now, no underline needed. */
.section--dark.the-bar .the-bar__grid .the-bar__content .section-title--sm::after {
  display: none !important;
  content: none !important;
}

/* "The Bars" decorative side rules — the ::before and ::after define
   the sage green bars flanking the pill on left and right. They are
   styled in the section above and should remain visible here. */

/* Sage flourish under MEET THE OWNERS sits centered beneath the pill. */
.section--dark.the-bar .the-bar__grid:first-of-type .the-bar__content .section-title::after {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 80px;
}

/* All three Meet-the-Owners/Bars portraits get a solid black picture
   frame (~1/4 inch wide) so each photo pops like a framed gallery print.
   Soft layered shadow underneath gives the frames weight and lifts
   them off the page. Applied universally to .the-bar__media .media-frame
   so Scott & Allie, Jackpot, and 6 Foot LED Bar all match. */
.section--dark.the-bar .the-bar__media .media-frame {
  border: 22px solid var(--c-black);
  border-radius: 4px;
  box-shadow: 0 22px 50px rgba(10, 10, 10, 0.32),
              0 6px 14px rgba(10, 10, 10, 0.16);
  background: var(--c-black);
}

/* ============================================================
   SERVICES SECTION — "Built for any kind of celebration"
   • "WHAT WE DO" eyebrow  → unhighlighted, refined small-caps text
   • Section title         → BLACK pill, white text
   • Section lead          → BLACK rounded banner, white text
   The black bands give the description readability over the
   full-color boxwood ornament behind the headline.
   ============================================================ */

/* 1. "WHAT WE DO" — small-caps label in clean white. No pill background,
   subtle soft shadow so it reads crisply against the boxwood. */
.section.services .section-head .eyebrow {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--c-white) !important;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
  letter-spacing: 0.36em;
  font-weight: 600;
  margin-bottom: 20px;
  display: inline-block;
  text-shadow: 0 2px 10px rgba(10, 10, 10, 0.5),
               0 1px 2px rgba(10, 10, 10, 0.3);
}
.section.services .section-head .eyebrow::after {
  display: none !important;
}

/* 2. "Built for any kind of celebration" — black pill banner */
.section.services .section-head .section-title {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white) !important;
  padding: 28px 64px;
  border-radius: 100px;
  margin: 0 auto 30px;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.24),
              0 2px 6px rgba(10, 10, 10, 0.14);
  position: relative;
  line-height: 1.1;
  letter-spacing: 0.06em;
}
/* Hide the legacy gradient underline below the title — the pill alone
   carries the visual weight. */
.section.services .section-head .section-title::after {
  display: none !important;
}

/* 3. Section lead description — black rounded banner with white text.
   60px border-radius keeps the multi-line description shape elegant
   without being a stretched stadium pill. */
.section.services .section-head .section-lead {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white) !important;
  padding: 18px 40px;
  border-radius: 60px;
  margin: 0 auto;
  max-width: 760px;
  box-shadow: 0 10px 26px rgba(10, 10, 10, 0.20),
              0 2px 6px rgba(10, 10, 10, 0.12);
  font-size: 15.5px;
  line-height: 1.55;
  font-weight: 400;
}
.section.services .section-head .section-lead a {
  color: var(--c-sage);
  border-bottom-color: rgba(138, 166, 115, 0.5);
}

/* 4. Service card TITLES — sage green pill banners with white text,
   matching the "Jackpot" / "6 Foot LED Bars" pill treatment in The
   Bars section. Block-level full-width pills with centered text so
   all three cards (Weddings, Corporate Events, Private Parties) read
   evenly with no extra space on either side of the words. */
.section.services .service-card__body h3 {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--c-sage);
  color: var(--c-white) !important;
  padding: 12px 26px;
  border-radius: 100px;
  margin: 0 0 18px;
  box-shadow: 0 10px 26px rgba(110, 138, 89, 0.36),
              0 2px 6px rgba(10, 10, 10, 0.12);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 18px;
  line-height: 1.1;
  text-align: center;
}

/* 5. Service card descriptions — soft white (was grey) for clean
   readability on the dark card background. */
.section.services .service-card__body p {
  color: rgba(255, 255, 255, 0.88) !important;
}
/* Link arrow inside service cards — sage hover for brand consistency. */
.section.services .service-card .link-arrow {
  color: var(--c-sage);
}
.section.services .service-card .link-arrow:hover {
  color: var(--c-white);
}

/* ============================================================
   HOW IT WORKS SECTION — "From inquiry to last call"
   • "HOW IT WORKS" eyebrow → unhighlighted, refined small-caps
   • Section title          → BLACK pill, white text (bandaid)
   • Step cards             → bigger color presence: sage-green
     step number badges + black title pills so each of the 4 steps
     POPS as a distinct branded card.
   ============================================================ */

/* 1. "HOW IT WORKS" eyebrow — bigger and bolder for clear readability,
   still no pill background so it reads as a clean section label. */
.section--dark.how-it-works .section-head .eyebrow {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--c-sage-deep) !important;
  padding: 0;
  border-radius: 0;
  font-size: 18px;
  letter-spacing: 0.38em;
  font-weight: 700;
  margin-bottom: 28px;
  display: inline-block;
}
.section--dark.how-it-works .section-head .eyebrow::after {
  display: none !important;
}

/* 2. "From inquiry to last call" → black pill banner with white text. */
.section--dark.how-it-works .section-head .section-title {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white) !important;
  padding: 28px 64px;
  border-radius: 100px;
  margin: 0 auto 30px;
  box-shadow: 0 14px 36px rgba(10, 10, 10, 0.22),
              0 2px 6px rgba(10, 10, 10, 0.14);
  position: relative;
  line-height: 1.1;
  letter-spacing: 0.06em;
}
.section--dark.how-it-works .section-head .section-title::after {
  display: none !important;
}

/* 3. The four steps — slightly bigger and more readable while keeping
   the same compact stacked layout. Number sits as a clean serif
   numeral on the left, title is the small black pill, description
   follows on the right. */
.section--dark.how-it-works .step {
  background: var(--c-white);
  border: 1px solid var(--c-iron);
  border-radius: 12px;
  padding: 24px 30px;
  box-shadow: 0 5px 14px rgba(74, 112, 80, 0.07);
  transition: transform 0.35s var(--ease),
              box-shadow 0.35s var(--ease),
              border-color 0.35s var(--ease);
}
.section--dark.how-it-works .step:hover {
  transform: translateY(-2px);
  border-color: var(--c-sage);
  box-shadow: 0 14px 32px rgba(110, 138, 89, 0.18);
}

/* Stacked layout (number column | content column) — slightly roomier. */
.section--dark.how-it-works .steps--stack .step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px 24px;
  align-items: center;
  padding: 24px 30px;
}

/* Step number — slightly larger clean serif numeral in deep sage. */
.section--dark.how-it-works .steps--stack .step__num {
  grid-row: span 2;
  align-self: center;
  position: static;
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  margin: 0;
  background: none !important;
  color: var(--c-sage-deep) !important;
  -webkit-text-fill-color: var(--c-sage-deep);
  -webkit-background-clip: border-box;
  background-clip: border-box;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  box-shadow: none;
  border: none;
  text-shadow: none;
}

/* Step title — slightly larger black pill so titles are easier to read. */
.section--dark.how-it-works .step__title {
  display: inline-block;
  background: var(--c-black);
  color: var(--c-white) !important;
  padding: 9px 20px;
  border-radius: 100px;
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.2;
  box-shadow: 0 6px 14px rgba(10, 10, 10, 0.20);
  width: auto;
}

/* Step description — slightly larger text + line-height for easier reading. */
.section--dark.how-it-works .step p {
  color: var(--c-silver);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Single-photo side aside — the new how-it-works photo fills the full
   height of the steps column with a clean cover crop and matching
   white frame so it ties into the cards beside it. */
.section--dark.how-it-works .how-it-works__media {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.section--dark.how-it-works .how-it-works__media .how-it-works__media-frame {
  flex: 1 1 0;
  min-height: 0;
  aspect-ratio: auto;
  /* 12px ≈ 1/8 inch solid black picture frame around the cocktail photo —
     matches the framed-portrait treatment used on the bar photos
     in The Bars section above for visual consistency. */
  border: 12px solid var(--c-black);
  border-radius: 4px;
  box-shadow: 0 18px 44px rgba(10, 10, 10, 0.28),
              0 4px 12px rgba(10, 10, 10, 0.14);
  overflow: hidden;
  display: block;
  background: var(--c-black);
  height: 100%;
}
.section--dark.how-it-works .how-it-works__media .how-it-works__media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-height: none;
}

/* --- Featured Platinum card: corner floral ornament for premium feel --- */
.pkg-card--featured {
  overflow: hidden;
}
.pkg-card--featured::after {
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  opacity: 0.20;
  pointer-events: none;
  border-radius: 50%;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
}

/* --- Featured card icon glow — sage instead of mint --- */
.pkg-card--featured .pkg-card__icon {
  color: var(--c-sage-deep);
  filter: drop-shadow(0 0 16px rgba(110, 138, 89, 0.45));
}

/* --- Contact form: tiny boxwood corner accent for warmth --- */
.contact-form {
  position: relative;
  overflow: hidden;
}
.contact-form::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: url('../img/boxwood-bg.jpg') center center / cover no-repeat;
  opacity: 0.10;
  pointer-events: none;
  border-radius: 50%;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%);
  z-index: 0;
}
.contact-form > * { position: relative; z-index: 1; }

/* --- Section-head underline accent below the title — a subtle
   sage leaf-shaped flourish that reinforces the brand greenery
   without adding image weight. Pure CSS, looks like a pressed
   leaf accent on a wedding card. --- */
.section .section-head .section-title::after,
.section--dark .section-head .section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  margin: 18px auto 0;
  background: linear-gradient(90deg,
    rgba(138, 166, 115, 0) 0%,
    var(--c-sage) 30%,
    var(--c-sage-deep) 50%,
    var(--c-sage) 70%,
    rgba(138, 166, 115, 0) 100%);
  border-radius: 2px;
}
/* Skip the underline for sections where the layout already has its
   own treatment (Reviews has the boxwood wall behind it; About uses
   a different head layout). */
.section.reviews .section-head .section-title::after { opacity: 0.7; }

/* --- Soft sage page edges for cohesion at the very top + bottom --- */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg,
    var(--c-sage) 0%,
    var(--c-sage-deep) 50%,
    var(--c-sage) 100%);
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(110, 138, 89, 0.35);
}

/* ============================================================
   PACKAGES — Note titles (Please note / Wanting A Cash Bar /
   Mocktails). Center the title text within each bubble and add a
   continuous sage green underline beneath each heading. The
   underline is drawn with border-bottom so it spans the full width
   of the heading text and stays a consistent thickness across all
   three notes regardless of font size.
   ============================================================ */
.pkg-alcohol-note__lead,
.pkg-cashbar-note__lead,
.pkg-mocktail-note__lead,
.pkg-bartender-note__lead {
  text-align: center !important;
  display: block;
  border-bottom: 2px solid var(--c-sage-deep) !important;
  padding-bottom: 10px !important;
  width: 100%;
}

/* Force the "Please note" title (and its bold inner text) to render
   in the same sage green as the other two note headings, overriding
   the earlier black color rule. */
.pkg-alcohol-note__lead,
.pkg-alcohol-note__lead strong {
  color: var(--c-sage-deep) !important;
}

/* ============================================================
   PACKAGES — Bartender-only note (sits centered below the
   Please Note / Cash Bar / Mocktails grid). Same white card +
   sage-tint family as the alcohol and cash bar notes, but
   centered horizontally on the page and slightly narrower so
   it reads as a stand-alone summary line.
   ============================================================ */
.pkg-bartender-note {
  position: relative;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 28px 32px;
  background: var(--c-white);
  border: 1px solid rgba(110, 138, 89, 0.18);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(74, 112, 80, 0.08);
  text-align: center;
}

/* Inline variant — used when the bartender note sits inside the
   left column stack (under Please Note) instead of as a standalone
   centered row below the grid. Removes the max-width/centered-margin
   so it fills the column width and stacks naturally. */
.pkg-bartender-note--inline {
  max-width: 100%;
  margin: 0;
  padding: 24px 28px;
}
.pkg-bartender-note__lead {
  font-family: var(--font-display);
  font-size: 18px !important;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-sage-deep) !important;
  margin: 0 0 14px !important;
  line-height: 1.2;
}
.pkg-bartender-note__lead strong {
  color: var(--c-sage-deep) !important;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.pkg-bartender-note p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
  color: var(--c-black);
}

@media (max-width: 720px) {
  .pkg-bartender-note {
    padding: 22px 22px;
    margin-top: 32px;
  }
  .pkg-bartender-note__lead {
    font-size: 15px !important;
    letter-spacing: 0.05em;
  }
  .pkg-bartender-note p { font-size: 13.5px; }
}

/* ============================================================
   REVIEWS section — force the subtitle text and its inline
   links (Google / The Knot / Facebook) to render in solid
   BLACK + BOLD so the line reads clearly against the boxwood
   backdrop. Uses -webkit-text-fill-color to override the
   earlier white fill, and strips the text-shadow that was
   bleeding the text. Wins by being last in the cascade.
   ============================================================ */
.section.reviews .section-head .section-lead,
.section.reviews .section-head .section-lead *,
.section.reviews .section-head .section-lead a,
.section.reviews .section-head .section-lead a:hover {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}
.section.reviews .section-head .section-lead a,
.section.reviews .section-head .section-lead a:hover {
  border-bottom-color: rgba(0, 0, 0, 0.6) !important;
  font-weight: 800 !important;
}

/* ============================================================
   COMPREHENSIVE MOBILE & TABLET RESPONSIVE OVERRIDES
   ------------------------------------------------------------
   Goals:
   - Prevent any horizontal scrolling on phones
   - Ensure all touch targets are at least 44px (Apple HIG / Google
     Material accessibility minimums)
   - Scale typography appropriately for small screens
   - Collapse all multi-column grids to single column on phones
   - Make every section readable and tappable on iPhone SE (375px),
     iPhone 13/14/15 (390px), iPhone Pro Max (430px), Pixel/Galaxy
     (360–412px), and tablets (768–1024px)
   - Keep desktop experience completely unchanged
   ============================================================ */

/* ---- Universal mobile safety net ---- */
html, body { overflow-x: hidden !important; max-width: 100%; }

img, video, iframe, svg { max-width: 100%; height: auto; }

/* Prevent long words (URLs, emails) from breaking layout */
p, h1, h2, h3, h4, h5, h6, span, a, li {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Prevent iOS zoom on form focus by guaranteeing 16px input font */
input, select, textarea {
  font-size: 16px;
}

/* ============================================================
   TABLET BREAKPOINT (≤ 1024px) — covers iPads, large Androids
   in landscape, and small laptops
   ============================================================ */
@media (max-width: 1024px) {
  .container { padding: 0 24px; }

  .section { padding: 88px 0; }

  /* Stack the bar sections so the photo sits above its copy */
  .the-bar__grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }
  .the-bar__media { order: 1; }
  .the-bar__content { order: 2; text-align: center; }
  .the-bar__content .body-text { text-align: left; }

  /* Service / package / review / rental grids collapse */
  .service-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .package-grid { grid-template-columns: 1fr; gap: 28px; max-width: 560px; margin-left: auto; margin-right: auto; }
  .rentals-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .review-grid  { grid-template-columns: 1fr 1fr; gap: 22px; }
  .steps        { grid-template-columns: 1fr 1fr; gap: 24px; }
  .feature-list-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* Packages notes — split the mocktails bubble to a new row */
  .pkg-notes-grid { grid-template-columns: 1fr !important; gap: 28px; }

  /* Footer collapses to 2 columns at tablet */
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px;
  }
  .footer-grid > .footer-col:first-child {
    grid-column: 1 / -1;
    max-width: 100%;
    align-items: center;
    text-align: center;
    margin: 0 auto 12px;
  }

  /* Section titles scale down a bit */
  .section-title { font-size: clamp(32px, 6vw, 56px); }
  .section-lead  { font-size: 16px; }
}

/* ============================================================
   PHONE BREAKPOINT (≤ 720px) — covers all iPhones and most
   Androids in portrait orientation
   ============================================================ */
@media (max-width: 720px) {
  .container { padding: 0 20px; }

  body { font-size: 15px; line-height: 1.6; }

  /* Sections — reduce vertical padding so users don't have to
     scroll through huge empty areas on phones */
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 36px; text-align: center; }
  .section-lead { font-size: 15px; }

  /* HERO — make it fit comfortably on a phone screen */
  .hero { min-height: 560px; }
  .hero__lockup { padding: 0 18px; }
  .hero__wordmark { font-size: clamp(34px, 11vw, 56px); }
  .hero__tagline { font-size: 11px; letter-spacing: 0.22em; }
  .hero__cta-row { flex-direction: column; gap: 12px; width: 100%; max-width: 280px; margin: 0 auto; }
  .hero__cta-row .btn { width: 100%; min-height: 48px; }

  /* HEADER — keep brand crest visible, lock nav into mobile menu */
  .site-header { padding: 12px 0; }
  .header-brand__icon { width: 38px; height: 38px; }

  /* Buttons — minimum 44px tall for accessibility */
  .btn { min-height: 44px; padding: 12px 22px; font-size: 12px; }

  /* THE BARS section */
  .the-bar__grid { gap: 28px; margin-bottom: 56px; }
  .the-bar__content .section-title { font-size: clamp(38px, 14vw, 60px) !important; }
  .the-bar__content .body-text { font-size: 14.5px; line-height: 1.7; }

  /* SERVICES — single column on phones */
  .service-grid { grid-template-columns: 1fr !important; gap: 24px; max-width: 440px; margin-left: auto; margin-right: auto; }
  .service-card__body { padding: 24px 22px; }
  .section.services .service-card__body h3 { font-size: 15px; padding: 11px 22px; }
  .service-card__body p { font-size: 13.5px; }

  /* HOW IT WORKS */
  .steps { grid-template-columns: 1fr !important; gap: 18px; }
  .step { padding: 24px 22px; }
  .step__num { font-size: 28px; }
  .step h3 { font-size: 18px; }
  .step p { font-size: 14px; }

  /* PACKAGES */
  .package-grid { grid-template-columns: 1fr !important; gap: 24px; max-width: 480px; }
  .package-card { padding: 32px 24px; }
  .pkg-card__price { font-size: 28px; }
  .pkg-card__title { font-size: 22px; }

  /* Package notes (Please note / Cash bar / Mocktails / Bartender) */
  .pkg-notes-grid { grid-template-columns: 1fr !important; gap: 24px; }
  .pkg-alcohol-note, .pkg-cashbar-note, .pkg-mocktail-note, .pkg-bartender-note {
    padding: 24px 22px !important;
    max-width: 100% !important;
  }
  .pkg-alcohol-note p, .pkg-cashbar-note p,
  .pkg-mocktail-note p, .pkg-bartender-note p {
    font-size: 14px;
    line-height: 1.65;
  }
  .pkg-mocktail-note__lead { font-size: 22px !important; }
  .pkg-mocktail-note__photos { gap: 10px; }
  .pkg-disclaimer { font-size: 13px; padding: 0 12px; text-align: center; }

  /* RENTALS — 1 column on phones for big tappable cards */
  .rentals-grid { grid-template-columns: 1fr !important; gap: 20px; max-width: 440px; margin-left: auto; margin-right: auto; }
  .rental-card { padding: 14px; }
  .rental-card__name { font-size: 15px; }
  .rental-card__price { font-size: 14px; }

  /* GALLERY — JS handles columns; ensure no overflow */
  .gallery .masonry { width: 100%; }

  /* REVIEWS */
  .review-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .review-card { padding: 26px 22px; }
  .review-card__quote { font-size: 14.5px; }

  /* CONTACT */
  .contact-info { grid-template-columns: 1fr !important; gap: 28px; }
  .contact-form { padding: 28px 22px; }
  .form-row--two { grid-template-columns: 1fr !important; gap: 14px; }
  .form-field input, .form-field select, .form-field textarea {
    font-size: 16px !important; /* prevent iOS auto-zoom */
    padding: 13px 14px;
    min-height: 48px;
  }
  .form-field textarea { min-height: 120px; }
  .contact-form .btn { width: 100%; min-height: 50px; }
  .contact__intro .section-title { font-size: clamp(34px, 9vw, 56px); }

  /* FOOTER */
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px; text-align: center; }
  .footer-grid > .footer-col {
    text-align: center !important;
    align-items: center !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  .footer-col h4 { display: inline-block; margin-left: auto; margin-right: auto; }
  .footer-col h4::after { left: 0; right: 0; margin: 0 auto; }
  .footer-tagline { max-width: 280px; }
  .footer-logo { width: 120px; margin: 0 auto 14px; }
  .footer-bottom { font-size: 12px; padding: 0 16px; text-align: center; }

  /* Decorative half-circles and ornaments — hide on small screens
     so they don't interfere with content */
  .rentals::before, .rentals::after,
  .boxwood-arch, .boxwood-corner { display: none !important; }
}

/* ============================================================
   SMALL PHONE BREAKPOINT (≤ 480px) — iPhone SE, iPhone Mini,
   Pixel 4a, Galaxy A-series, etc.
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  .section { padding: 52px 0; }
  .section-head { margin-bottom: 28px; }
  .section-title { font-size: clamp(28px, 8vw, 42px); }

  .hero { min-height: 520px; }
  .hero__wordmark { font-size: clamp(30px, 10vw, 44px); letter-spacing: 0.06em; }
  .hero__eyebrow { font-size: 10px; letter-spacing: 0.28em; }
  .hero__tagline { font-size: 10.5px; letter-spacing: 0.2em; }

  .the-bar__content .section-title { font-size: clamp(34px, 12vw, 50px) !important; }

  .section.services .service-card__body h3 { font-size: 14px; padding: 10px 18px; letter-spacing: 0.06em; }

  .step h3 { font-size: 17px; }
  .step p { font-size: 13.5px; }

  .pkg-card__price { font-size: 26px; }
  .pkg-card__title { font-size: 20px; }
  .pkg-card__list li { font-size: 13.5px; }

  .pkg-mocktail-note__lead { font-size: 20px !important; }
  .pkg-mocktail-note__photos {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .rental-card__media { aspect-ratio: 4 / 3; }

  .review-card__quote { font-size: 14px; }
  .review-card__attr cite { font-size: 13px; }

  .footer-logo { width: 100px; }
  .footer-tagline { font-size: 11px; letter-spacing: 0.14em; max-width: 240px; }

  /* Nav menu items larger tap targets */
  .mobile-menu a { padding: 16px 20px !important; font-size: 15px; }
}

/* ============================================================
   EXTRA SMALL PHONES (≤ 380px) — original iPhone SE (1st gen),
   small Android compact phones
   ============================================================ */
@media (max-width: 380px) {
  .container { padding: 0 14px; }

  body { font-size: 14.5px; }

  .hero__wordmark { font-size: clamp(26px, 9.5vw, 38px); }
  .hero__cta-row .btn { font-size: 11px; padding: 12px 18px; }

  .section-title { font-size: clamp(26px, 8vw, 38px); }

  .pkg-card__price { font-size: 24px; }
  .pkg-card__title { font-size: 19px; }

  .footer-logo { width: 88px; }
}

/* ============================================================
   LANDSCAPE PHONES — keep hero readable when device rotates
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .hero { min-height: 420px; }
  .hero__lockup { bottom: 12%; }
  .hero__wordmark { font-size: clamp(28px, 7vw, 42px); }
  .hero__scroll { display: none; }
}

/* ============================================================
   TOUCH DEVICE OPTIMIZATIONS — disable hover-only effects so
   they don't get stuck on tap, ensure smooth tap response
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover lifts/transforms that can feel sticky on touch */
  .service-card:hover,
  .package-card:hover,
  .rental-card:hover,
  .review-card:hover {
    transform: none !important;
  }

  /* Faster tap response — eliminate the 300ms tap delay */
  a, button, .btn, input, select, textarea {
    touch-action: manipulation;
  }

  /* Larger tap area for nav items */
  .nav a, .mobile-menu a {
    padding: 14px 18px;
  }
}

/* ============================================================
   FINAL CROSS-DEVICE OPTIMIZATION PASS
   ============================================================
   Performance + responsive coverage for every recent change:
   - Martini cheers animation (gallery title)
   - Larger header logo + nav tabs
   - Bartender note moved into the left column stack
   - Thicker sage border on the "From the Road" pill
   - All package / rental / contact layouts
   - iPhone notch safe areas + iPad portrait/landscape + low-end Android
   ============================================================ */

/* ---- iPhone notch / Dynamic Island safe areas ---- */
@supports (padding: env(safe-area-inset-left)) {
  .container {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .site-header { padding-top: max(0px, env(safe-area-inset-top)); }
  .site-footer { padding-bottom: max(32px, env(safe-area-inset-bottom)); }
}

/* ---- GPU acceleration for animated elements (smoother on mobile) ---- */
.martini,
.clink-spark,
.clink-text {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000;
  -webkit-perspective: 1000;
  transform: translateZ(0);
}

/* ---- Content-visibility hints — browser skips off-screen rendering
        for huge perf wins on mobile (especially the gallery + reviews) ---- */
.section.gallery,
.section.reviews,
.section.rentals,
.section.our-packages {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* ---- Header — guarantee logo + nav fit cleanly at every size ---- */
@media (max-width: 1100px) {
  .header-brand__icon { width: 92px; height: 92px; }
  .site-header.is-scrolled .header-brand__icon { width: 76px; height: 76px; }
  .header-brand__text { font-size: 19px; }
  .primary-nav ul { gap: 22px; }
  .primary-nav a { font-size: 12px; letter-spacing: 0.14em; }
}
@media (max-width: 980px) {
  .header-brand__icon { width: 78px; height: 78px; }
  .site-header.is-scrolled .header-brand__icon { width: 64px; height: 64px; }
}

/* ---- iPad portrait sweet spot (768–900px) — tune layouts so they
        feel native on the iPad's exact dimensions ---- */
@media (min-width: 721px) and (max-width: 900px) {
  .section { padding: 76px 0; }

  /* Bar sections — keep photo above copy for vertical iPad reads */
  .the-bar__grid {
    grid-template-columns: 1fr !important;
    gap: 28px;
  }
  .the-bar__media { order: 1; }
  .the-bar__content { order: 2; }

  /* Service / rentals can stay 2-up on iPad */
  .service-grid { grid-template-columns: 1fr 1fr; }
  .rentals-grid { grid-template-columns: repeat(2, 1fr); }
  .review-grid  { grid-template-columns: 1fr 1fr; }

  /* Package notes — stack with breathing room */
  .pkg-notes-grid { grid-template-columns: 1fr !important; gap: 24px; }
}

/* ---- iPad landscape / small laptops (901–1180px) ---- */
@media (min-width: 901px) and (max-width: 1180px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .rentals-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Martini cheers — keep it crisp + visible at iPad portrait,
        smaller on phones, gone on tiny screens ---- */
@media (max-width: 900px) {
  .title-with-glasses { gap: 14px; }
  .martini { width: 48px; }
  .martini-pair { gap: 5px; }
  .clink-text { font-size: 14px; }
  .clink-spark { width: 12px; height: 12px; }
}
@media (max-width: 600px) {
  .title-with-glasses { gap: 10px; }
  .martini { width: 38px; }
  .clink-text { font-size: 12px; bottom: 90%; }
}
@media (max-width: 480px) {
  /* Already hidden via .title-with-glasses .martini-pair { display: none } */
}

/* ---- Bartender note inline variant — make sure it stacks
        and reads well on every screen ---- */
@media (max-width: 720px) {
  .pkg-bartender-note--inline {
    padding: 22px 22px !important;
  }
  .pkg-bartender-note--inline .pkg-bartender-note__lead {
    font-size: 14px !important;
    letter-spacing: 0.05em;
    line-height: 1.35;
  }
  .pkg-bartender-note--inline p:not(.pkg-bartender-note__lead) {
    font-size: 14px;
  }
}

/* ---- Gallery title pill — guarantee the thicker sage outline
        and bigger "From the Road" pill don't push past viewport ---- */
@media (max-width: 720px) {
  .section.gallery .section-head .section-title {
    padding: 22px 32px;
    max-width: 88%;
    border-width: 4px !important;
  }
}
@media (max-width: 480px) {
  .section.gallery .section-head .section-title {
    padding: 18px 24px;
    border-width: 3px !important;
  }
}

/* ---- Pause off-screen animations to save battery on mobile.
        Animations only run while the gallery is in/near the viewport. ---- */
@media (max-width: 900px) {
  .martini--clink-l,
  .martini--clink-r,
  .clink-spark,
  .clink-text {
    animation-play-state: running;
  }
}

/* ---- Low-data / save-data mode (some Android users enable this) ---- */
@media (prefers-reduced-data: reduce) {
  .hero__video { display: none; }
  .martini--clink-l,
  .martini--clink-r,
  .clink-spark,
  .clink-text {
    animation: none !important;
  }
  .clink-spark, .clink-text { opacity: 0 !important; }
}

/* ---- Prevent ANY horizontal overflow at every viewport size.
        Belt-and-suspenders catch-all for edge cases. ---- */
html, body {
  max-width: 100vw;
  overflow-x: hidden !important;
}
.section, .container, footer, header, main, section {
  max-width: 100%;
  overflow-x: clip;
}

/* ---- Smooth scrolling stays smooth on mobile (iOS momentum) ---- */
html {
  -webkit-overflow-scrolling: touch;
}

/* ---- High-density displays (Retina, AMOLED) — sharper text rendering ---- */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
}

/* ---- Print stylesheet — clean, readable, no animations.
        Someone might actually print this for an event planning meeting. ---- */
@media print {
  .site-header,
  .hero__video,
  .hero__scroll,
  .martini,
  .clink-spark,
  .clink-text,
  .contact-form button {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .section { padding: 20px 0 !important; page-break-inside: avoid; }
  a { text-decoration: underline; color: #000; }
  img { max-width: 100% !important; page-break-inside: avoid; }
}

/* ---- Forced-colors mode (Windows High Contrast accessibility) ---- */
@media (forced-colors: active) {
  .btn, .pkg-card, .service-card, .rental-card, .review-card {
    border: 1px solid CanvasText;
  }
}

/* ---- Final overflow safety — any element nested deep can't bust out ---- */
img, video, svg, iframe, canvas, picture { max-width: 100%; }
table { max-width: 100%; display: block; overflow-x: auto; }
pre, code { white-space: pre-wrap; word-break: break-word; }

/* ============================================================
   QUOTE EMBED — Wheelo inline "Get A Quote" form in the contact
   section. Wheelo's form_embed.js auto-resizes the iframe to the
   form's real height on every device; these rules just make sure
   it fills its column, stays responsive, and has a sensible
   fallback height if the resize script is ever slow to load.
   ============================================================ */
.quote-embed {
  width: 100%;
  align-self: start;
}
.quote-embed iframe {
  display: block;
  width: 100% !important;
  min-height: 820px;      /* fallback floor; script sets the real height */
  border: none;
  background: transparent;
}
@media (max-width: 720px) {
  /* On phones the form fields stack, so give a taller fallback floor. */
  .quote-embed iframe { min-height: 1100px; }
}

/* ============================================================
   PHONE HEADER LOGO FIX — the earlier tablet scaling rules
   (92px/78px) cascade into phones and clip the crest against the
   72px mobile header. This final rule wins the cascade and sizes
   the crest to fit the phone header cleanly.
   ============================================================ */
@media (max-width: 720px) {
  .header-brand__icon {
    width: 54px !important;
    height: 54px !important;
  }
  .site-header.is-scrolled .header-brand__icon {
    width: 46px !important;
    height: 46px !important;
  }
}

/* ============================================================
   MOBILE MENU LEAK FIX — the closed menu drawer hides by sliding
   up via translateY(-110%), but with the enlarged header the
   drawer's bottom edge (the white Get a Quote button) peeked out
   at the top of the page on tablet-width screens. Hide the closed
   drawer completely with visibility + a larger offset, and only
   reveal it when it is actually opened.
   ============================================================ */
.mobile-menu {
  transform: translateY(-200%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.mobile-menu.is-open {
  transform: translateY(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Tablet-width header: size the crest to fit inside the 96px bar
   without clipping (also covers the 720–980px hamburger range). */
@media (max-width: 980px) {
  .header-brand__icon {
    width: 64px;
    height: 64px;
  }
  .site-header.is-scrolled .header-brand__icon {
    width: 56px;
    height: 56px;
  }
}

/* ============================================================
   MOBILE MENU TEXT FIX — the white-mode palette turned the old
   "pearl" variable near-black, leaving the drawer's links dark
   on its dark background. Force light, readable menu text.
   ============================================================ */
.mobile-menu a {
  color: #f2f2f2 !important;
}
.mobile-menu a:hover,
.mobile-menu a:active {
  color: #ffffff !important;
}
/* Keep the Get a Quote button in the drawer readable (white pill,
   dark text) */
.mobile-menu .btn--primary,
.mobile-menu .btn {
  color: #0a0a0a !important;
  background: #ffffff !important;
}

/* ============================================================
   PHONE TITLE-PILL FIX — the script-font section titles carry a
   3.6rem minimum from the Allura styling, which overflows a
   phone screen ("Meet the Owners" was clipped at the edge).
   These overrides come last in the cascade, so they win, and
   scale the pills to fit any phone width cleanly.
   ============================================================ */
@media (max-width: 720px) {
  .section-head .section-title,
  .the-bar__divider .section-title {
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    line-height: 1.15 !important;
    padding: 14px 28px !important;
    max-width: 92% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }
}
@media (max-width: 400px) {
  .section-head .section-title,
  .the-bar__divider .section-title {
    font-size: clamp(1.7rem, 9vw, 2.4rem) !important;
    padding: 12px 22px !important;
  }
}

/* ============================================================
   PHONE FIX: "MEET THE OWNERS" + THE-BAR TITLES — these titles
   live inside .the-bar__content (not .section-head), and their
   Allura sizing rule is highly specific, so the earlier phone
   override never reached them. These selectors match that
   specificity and sit later in the cascade, so they win and the
   pills now scale to fit any phone screen.
   ============================================================ */
@media (max-width: 720px) {
  .section--dark.the-bar .the-bar__grid:first-of-type .the-bar__content .section-title,
  .section--dark.the-bar .the-bar__grid .the-bar__content .section-title,
  .section--dark.the-bar .the-bar__grid .the-bar__content .section-title--sm,
  .section--dark.the-bar .the-bar__divider .section-head .section-title,
  .section--dark.the-bar .the-bar__divider .section-title {
    font-size: clamp(2rem, 9.5vw, 3rem) !important;
    line-height: 1.15 !important;
    padding: 14px 26px !important;
    max-width: 92% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    box-sizing: border-box;
  }
}
@media (max-width: 400px) {
  .section--dark.the-bar .the-bar__grid:first-of-type .the-bar__content .section-title,
  .section--dark.the-bar .the-bar__grid .the-bar__content .section-title,
  .section--dark.the-bar .the-bar__grid .the-bar__content .section-title--sm,
  .section--dark.the-bar .the-bar__divider .section-head .section-title,
  .section--dark.the-bar .the-bar__divider .section-title {
    font-size: clamp(1.7rem, 9vw, 2.4rem) !important;
    padding: 12px 20px !important;
  }
}

/* ============================================================
   PHONE NAV: INSTANT JUMPS — on touch devices the smooth glide
   across a very tall single-column page feels slow and laggy, so
   anchor taps (nav tabs, Get a Quote) jump straight to their
   section. Desktop keeps the smooth glide.
   ============================================================ */
@media (max-width: 980px) {
  html { scroll-behavior: auto !important; }
}

/* ============================================================
   OCT 2026 LAYOUT FIXES
   1) Center the sage "Jackpot" / "6 Foot LED Bars" pills over
      their text columns (they sat left-aligned).
   2) Equal-width package cards: the long "per specialty
      (depending on ingredients)" price note was forcing the
      Add Ons column wider than the other two. minmax(0,1fr)
      makes all three columns exactly equal and lets long price
      notes wrap instead of stretching the card.
   ============================================================ */
.section--dark.the-bar .the-bar__grid .the-bar__content .section-title--sm {
  display: block !important;
  width: fit-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.pkg-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
@media (max-width: 1100px) {
  .pkg-grid { grid-template-columns: 1fr !important; }
}
.pkg-card__list-price { white-space: normal; text-align: right; }
.pkg-card__list-unit { white-space: normal; max-width: 220px; margin-left: auto; }