/* ===== Brand palette: "Logo Match" =====
   Defined once here as variables, then reused everywhere below. */
:root {
  --black: #050505;       /* Rich Black - main background */
  --charcoal: #161616;    /* panels and bands on black */
  --green: #19492C;       /* Clover Green - cards and feature blocks */
  --gold: #CFAC5C;        /* Logo Gold - accents, prices, frames */
  --pale-gold: #E9D6A0;   /* small gold text on black */
  --purple: #592261;      /* Cane Purple - accent only */
  --ivory: #F4EFE4;       /* headlines on black */
  --stone: #D9D3C5;       /* body text on black */
  --grey: #9A958A;        /* secondary text */
  --smoke: #4A4740;       /* divider lines */
  --heading: 'EB Garamond', Garamond, Georgia, serif;
  --body: 'Didact Gothic', 'Century Gothic', 'Trebuchet MS', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--black); color: var(--stone); font-family: var(--body); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: var(--gold); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

/* Shared building blocks */
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
section { padding: 96px 0; border-top: 1px solid #1f1e1b; scroll-margin-top: 68px; }   /* menu jumps land below the sticky top bar */
.eyebrow { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.eyebrow .item { white-space: nowrap; } /* keeps each service name on one line when the tagline wraps on phones */
h1, h2, h3 { font-family: var(--heading); font-weight: 500; color: var(--ivory); line-height: 1.1; }
h2 { font-size: clamp(34px, 5vw, 52px); margin-bottom: 18px; }
h3 { font-size: 28px; margin-bottom: 10px; }
.lead { font-size: 19px; max-width: 680px; }
.ornament { display: flex; align-items: center; gap: 14px; margin: 26px 0; }
.ornament::before, .ornament::after { content: ""; height: 1px; width: 90px; background: var(--purple); }
.ornament span { width: 12px; height: 12px; background: var(--purple); border: 1px solid var(--gold); transform: rotate(45deg); }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .ornament { justify-content: center; }

.btn { display: inline-block; padding: 14px 28px; font-family: var(--body); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
       text-decoration: none; border: 1px solid var(--gold); cursor: pointer; transition: background .2s, color .2s; }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--pale-gold); }
.btn-line { background: transparent; color: var(--gold); }
.btn-line:hover { background: var(--gold); color: var(--black); }

/* ===== Top navigation bar ===== */
header { position: sticky; top: 0; z-index: 10; background: rgba(5,5,5,.94); border-bottom: 1px solid #1f1e1b; }
header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.brand { font-family: var(--heading); font-size: 24px; color: var(--gold); text-decoration: none; letter-spacing: .04em; white-space: nowrap; }   /* gold, like the logo */
.brand em { color: var(--pale-gold); font-style: italic; }                                                                                          /* softer gold ampersand */
.header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; background: transparent;
               border: 1px solid var(--gold); color: var(--gold); font-family: var(--body); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; }
.bars, .bars::before, .bars::after { display: block; width: 18px; height: 2px; background: var(--gold); transition: transform .3s ease, background .3s ease; }
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }
header.open .bars { background: transparent; }                          /* the three lines turn into an X when open */
header.open .bars::before { transform: translateY(6px) rotate(45deg); }
header.open .bars::after { transform: translateY(-6px) rotate(-45deg); }
nav ul { display: flex; gap: 28px; list-style: none; }
nav a { color: var(--stone); text-decoration: none; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
nav a:hover { color: var(--gold); }
nav a { white-space: nowrap; }                                              /* keep "Plan your bar" on one line */
@media (max-width: 1100px) and (min-width: 861px) {                         /* mid-size screens: tighten the menu so it fits */
  nav ul { gap: 16px; }
  nav a { font-size: 13px; letter-spacing: .06em; }
}
header .btn { padding: 10px 18px; font-size: 12px; }

/* ===== Hero (first screen) ===== */
.hero { border-top: none; padding: 56px 0 88px; text-align: center; }
.hero img { width: min(460px, 86vw); margin: 0 auto 8px; mix-blend-mode: lighten; } /* lets the logo's black background melt into the page */
.hero h1 { font-size: clamp(44px, 7vw, 76px); margin-bottom: 18px; }
.hero .lead { margin: 0 auto 34px; }
.hero .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== Story ===== */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; }
.card { background: var(--charcoal); border: 1px solid #242320; padding: 36px; }
.card h3 { color: var(--gold); }
.card-photo { display: block; width: calc(100% + 72px); max-width: none; margin: -36px -36px 26px; aspect-ratio: 1 / 1; object-fit: cover; }
/* ===== Our Story heritage rows (photo beside text, alternating sides) ===== */
.heritage { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 56px; }
.heritage img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid #242320; }
.heritage.reverse img { order: 2; }
.heritage h3 { font-size: 40px; color: var(--gold); margin-bottom: 6px; }
.heritage .place { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin-bottom: 18px; }
.heritage p + p { margin-top: 14px; }
.heritage em { color: var(--pale-gold); }
.together { margin-top: 64px; }
.statement { font-family: var(--heading); font-size: clamp(24px, 3vw, 32px); color: var(--ivory); line-height: 1.35; max-width: 820px; margin: 0 auto; }
.card .place { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin: -14px 0 12px; }

/* ===== Photos ===== */
.split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; }
.photo { width: 100%; object-fit: cover; border: 1px solid #242320; }
.photo.tall { aspect-ratio: 3 / 4; }
.banner { width: 100%; aspect-ratio: 21 / 8; object-fit: cover; border: 1px solid #242320; margin: 12px 0 40px; }
.sticky { position: sticky; top: 96px; }

/* ===== Events we serve ===== */
.events { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.event { background: var(--charcoal); border: 1px solid #242320; padding: 26px 24px; }
.event h3 { font-size: 24px; color: var(--ivory); display: flex; align-items: center; gap: 12px; }
.event h3::before { content: ""; flex: none; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.event p { font-size: 15px; }

/* ===== Our services (reuses the .event card look) ===== */
.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 12px; }
.services-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }

/* ===== FAQ (click a question to open it) ===== */
.faq details { border-bottom: 1px solid var(--smoke); }
.faq details:first-of-type { border-top: 1px solid var(--smoke); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
               font-family: var(--heading); font-size: 23px; color: var(--ivory); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 16px; font-family: var(--body); font-size: 26px; color: var(--gold); }
.faq details[open] summary::after { content: "\2013"; }
.faq summary:hover { color: var(--pale-gold); }
.faq details p { padding: 0 0 22px; max-width: 640px; }

/* ===== How it works ===== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 44px; counter-reset: step; }
.step { border-top: 1px solid var(--gold); padding-top: 22px; }
.step::before { counter-increment: step; content: "0" counter(step); font-family: var(--heading); font-size: 40px; color: var(--gold); display: block; margin-bottom: 6px; }

/* ===== Packages ===== */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.tier { background: var(--green); padding: 36px 32px; color: var(--ivory); }
.tier .name { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--pale-gold); }
.tier .price { font-family: var(--heading); font-size: 64px; font-weight: 600; line-height: 1; margin: 12px 0 8px; }
.tier .guests { font-weight: bold; margin-bottom: 14px; }
.tier ul { list-style: none; }
.tier li { padding: 7px 0; border-top: 1px solid rgba(244,239,228,.18); }
.tier.featured { background: var(--gold); color: var(--black); }
.tier.featured .name { color: var(--black); }
.tier.featured li { border-top-color: rgba(5,5,5,.2); }
/* Launch pricing banner + per-card tag (remove from plan-your-bar.html when launch pricing ends) */
.launch-banner { display: inline-block; margin: 6px auto 0; padding: 8px 20px; background: var(--purple); color: var(--pale-gold);
                 border: 1px solid var(--gold); font-size: 15px; letter-spacing: .04em; }
.launch-banner strong { color: var(--ivory); text-transform: uppercase; letter-spacing: .18em; margin-right: 8px; }
.launch-tag { display: inline-block; margin-top: 12px; padding: 3px 10px; background: var(--purple); color: var(--ivory);
              font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.tier.featured .launch-tag { background: var(--black); color: var(--gold); }
.tier .launch-tag + .price { margin-top: 6px; }
.note { margin-top: 26px; color: var(--grey); font-size: 15px; text-align: center; }

/* ===== Add-ons ===== */
.addons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 48px; margin-top: 12px; }
/* Add-ons dropdown bar */
.addons-drop { margin-top: 32px; border: 1px solid var(--gold); background: var(--charcoal); }
.addons-drop summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
                       padding: 18px 24px; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
                       transition: background .25s ease, color .25s ease; }
.addons-drop summary::-webkit-details-marker { display: none; }
.addons-drop summary::after { content: "+"; font-size: 24px; line-height: 1; letter-spacing: 0; }
.addons-drop[open] summary::after { content: "\2013"; }
.addons-drop summary:hover, .addons-drop summary:focus-visible { background: var(--gold); color: var(--black); }
.addons-drop .when-open { display: none; }
.addons-drop[open] .when-open { display: inline; }
.addons-drop[open] .when-closed { display: none; }
.addons-drop[open] summary { border-bottom: 1px solid var(--smoke); }
.addons-drop .addons { padding: 0 24px 16px; }
/* Meet the Founders */
.founders-intro { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.founders-photo img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.founders-intro .lead { margin-bottom: 14px; }
.founder-bios { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
.founder-bios h3 { font-size: 32px; margin-bottom: 4px; }
.founder-bios .role { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--grey); margin-bottom: 14px; }
/* Booking policies dropdown */
.policy-body { padding: 24px; }
.policy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 32px; margin-bottom: 26px; }
.policy-grid h3 { font-size: 22px; color: var(--gold); margin-bottom: 6px; }
.policy-grid p { font-size: 15px; }
/* English subtitle under a Kreyòl drink name */
.sig h3 .aka { display: block; font-family: var(--body); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--grey); margin-top: 4px; }
.addon { display: flex; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--smoke); }
.addon strong { color: var(--ivory); font-weight: normal; display: block; }
.addon small { color: var(--grey); font-size: 14px; }
.addon .cost { font-family: var(--heading); font-size: 24px; color: var(--gold); white-space: nowrap; }


/* ===== Drink menu ===== */
.menu { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.menu .card p.kind { font-style: italic; color: var(--pale-gold); margin-bottom: 12px; }

/* ===== Signature originals ===== */
.signatures-title { margin-top: 72px; }
.sigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.sig { background: var(--charcoal); border: 1px solid #242320; display: flex; flex-direction: column; }
.sig .body { padding: 28px; }
.sig .tag { display: inline-block; font-size: 11px; letter-spacing: .25em; text-transform: uppercase; color: var(--ivory);
            padding: 4px 10px; margin-bottom: 14px; }
.tag.haiti { background: var(--purple); }
.tag.ireland { background: var(--green); }
.tag.house { background: var(--gold); color: var(--black); }
.sig h3 { color: var(--gold); }
.sig .story { font-style: italic; color: var(--pale-gold); margin-bottom: 12px; font-size: 16px; }
.sig .ingredients { font-size: 15px; color: var(--stone); }
.sig.house { background: var(--green); border-color: var(--gold); }
.sig.house .tag { background: var(--gold); }

/* ===== Bottle estimator (math is in the script at the bottom) ===== */
.estimator { display: grid; grid-template-columns: 1fr 1.3fr; margin-top: 40px; border: 1px solid var(--gold); background: var(--charcoal); }
.est-inputs { padding: 32px; display: grid; gap: 22px; align-content: start; border-right: 1px solid var(--smoke); }
.est-inputs .hint { font-size: 14px; color: var(--grey); margin-top: 8px; }
.est-results { padding: 32px; }
.est-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.est-stat { background: var(--green); padding: 24px 18px; text-align: center; color: var(--ivory); }
.est-stat.bottles { background: var(--gold); color: var(--black); }
.est-stat .count { font-family: var(--heading); font-size: 60px; font-weight: 600; line-height: 1; }
.est-stat .what { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-top: 10px; }
.est-stat small { display: block; font-size: 13px; margin-top: 4px; opacity: .85; }
.est-note { margin-top: 22px; font-size: 15px; border-left: 2px solid var(--purple); padding-left: 14px; }
.est-note + .est-note { margin-top: 12px; }

/* ===== Contact form ===== */
.contact .grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; }
.direct p { margin-bottom: 14px; }
.direct a { font-size: 19px; }
form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-content: start; } /* keep fields packed at the top */
label { display: block; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--pale-gold); margin-bottom: 6px; }
input, select, textarea { width: 100%; padding: 12px 14px; background: var(--charcoal); border: 1px solid var(--smoke); color: var(--ivory); font: inherit; }
textarea { min-height: 120px; resize: vertical; }
fieldset { border: 0; min-width: 0; }
legend { font-size: 13px; letter-spacing: .15em; text-transform: uppercase; color: var(--pale-gold); margin-bottom: 8px; }
.options { display: flex; flex-wrap: wrap; gap: 10px; }
.addon-options { display: grid; grid-template-columns: repeat(3, 1fr); }
label.opt { display: flex; align-items: center; gap: 10px; margin: 0; padding: 11px 14px; cursor: pointer;
            background: var(--charcoal); border: 1px solid var(--smoke); color: var(--ivory);
            font-size: 15px; letter-spacing: normal; text-transform: none; }
label.opt small { color: var(--grey); font-size: 13px; }
label.opt input { width: auto; padding: 0; margin: 0; accent-color: var(--gold); flex: none; }
label.opt:has(input:checked) { border-color: var(--gold); }   /* gold outline on chosen options */
#call-times[hidden] { display: none; }
.full { grid-column: 1 / -1; }
.fine { color: var(--grey); font-size: 14px; }

/* ===== Footer ===== */
footer { border-top: 1px solid var(--gold); padding: 40px 0; text-align: center; color: var(--grey); font-size: 14px; }
footer .brand { display: inline-block; margin-bottom: 6px; font-size: 30px; color: var(--gold); }        /* gold, like the logo */
footer .brand em { color: var(--pale-gold); font-style: italic; }                                        /* softer gold ampersand */

/* ===== Interactivity: hover effects ===== */
.sig, .tier, .event, .btn { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .2s, color .2s; }
.sig:hover, .sig:focus-within { transform: translateY(-8px); border-color: var(--gold);
                                box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 28px rgba(207,172,92,.2); }
.tier:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.55), 0 0 26px rgba(207,172,92,.2); }
.event:hover { transform: translateY(-4px); border-color: rgba(207,172,92,.55); }
.event h3::before { transition: transform .35s ease; }
.event:hover h3::before { transform: rotate(45deg) scale(1.6); }
.btn:hover { transform: translateY(-2px); }
nav a { position: relative; }
nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--gold);
               transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
nav a:hover::after, nav a:focus-visible::after { transform: scaleX(1); }
.heritage .frame { overflow: hidden; border: 1px solid #242320; }
.heritage .frame img { border: 0; display: block; transition: transform 1.2s ease; }
.heritage .frame:hover img { transform: scale(1.05); }
.heritage.reverse .frame { order: 2; }
header { transition: box-shadow .3s ease, border-color .3s ease; }
header.scrolled { border-bottom-color: rgba(207,172,92,.45); box-shadow: 0 6px 24px rgba(0,0,0,.55); }

/* ===== Interactivity: fade-and-rise as sections scroll into view (only when the script is running) ===== */
.js .reveal { opacity: 0; translate: 0 28px;
              transition: opacity .9s ease, translate .9s ease, transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.js .reveal.visible { opacity: 1; translate: 0 0; }

/* Visitors who turn on "reduce motion" in their device settings get a still version */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .js .reveal { opacity: 1; translate: none; }
  .sig:hover, .sig:focus-within, .tier:hover, .event:hover, .btn:hover { transform: none; }
  .heritage .frame:hover img { transform: none; }
}

/* ===== Phones and small screens: stack everything into one column ===== */
@media (max-width: 860px) {
  /* Phone dropdown menu: hidden until the Menu button is tapped */
  .menu-toggle { display: flex; }
  header .btn { padding: 9px 14px; }
  nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--black); border-bottom: 1px solid var(--gold);
        max-height: 0; overflow: hidden; visibility: hidden; transition: max-height .35s ease, visibility 0s linear .35s; }
  header.open nav { max-height: 480px; visibility: visible; transition: max-height .35s ease, visibility 0s; }
  nav ul { flex-direction: column; gap: 0; padding: 6px 20px 14px; }
  nav li a { display: block; padding: 15px 0; border-bottom: 1px solid #1f1e1b; font-size: 15px; }
  nav li:last-child a { border-bottom: 0; }
  nav a::after { display: none; }
  section { padding: 72px 0; }
  .two, .steps, .tiers, .addons, .menu, .sigs, .contact .grid, form, .split, .estimator { grid-template-columns: 1fr; }
  .est-inputs { border-right: 0; border-bottom: 1px solid var(--smoke); }
  .est-inputs, .est-results { padding: 24px; }
  .events, .services { grid-template-columns: 1fr 1fr; }
  .policy-grid { grid-template-columns: 1fr; }
  .founders-intro, .founder-bios { grid-template-columns: 1fr; gap: 28px; }
  .heritage { grid-template-columns: 1fr; gap: 28px; }
  .heritage.reverse img, .heritage.reverse .frame { order: 0; }
  .banner { aspect-ratio: 4 / 3; }
  .sticky { position: static; }
  .photo.tall { aspect-ratio: 4 / 5; }
}
@media (max-width: 860px) { .addon-options { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .events, .services, .addon-options { grid-template-columns: 1fr; } }
@media (max-width: 400px) { .menu-label { display: none; } .brand { font-size: 21px; } }   /* very narrow phones: icon-only menu button */

/* ===== Multi-page additions ===== */
nav a[aria-current="page"] { color: var(--gold); }                   /* the page you're on */
nav a[aria-current="page"]::after { transform: scaleX(1); }
.cta .actions { margin-top: 28px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ===== Service pages (Photography, Event Infrastructure) ===== */
.page-hero { border-top: none; padding: 72px 0 40px; text-align: center; }
.page-hero h1 { font-size: clamp(44px, 7vw, 72px); margin-bottom: 18px; }
.page-hero .lead { margin: 0 auto 30px; }
.page-hero .actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.page-hero .banner { margin: 48px 0 0; }
/* Optional photo at the top of a card. Image slots remove themselves (onerror) until the photo file is added to images/ */
.svc-photo { display: block; width: calc(100% + 48px); max-width: none; margin: -26px -24px 22px; aspect-ratio: 4 / 3; object-fit: cover; }
.event ul.items { list-style: none; margin-top: 12px; }
.event ul.items li { padding: 10px 0; border-top: 1px solid var(--smoke); font-size: 15px; }
.event ul.items strong { display: block; color: var(--ivory); font-weight: normal; }
.event .more { display: inline-block; margin-top: 12px; font-size: 13px; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; }
.event .more:hover { color: var(--pale-gold); }
.offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 44px; }
.offer { background: var(--green); padding: 36px 32px; color: var(--ivory); }
.offer.featured { background: var(--gold); color: var(--black); }
.offer .name { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--pale-gold); }
.offer.featured .name { color: var(--black); }
.offer h3 { font-size: 34px; margin: 10px 0 12px; color: inherit; }
.offer ul { list-style: none; margin-top: 14px; }
.offer li { padding: 7px 0; border-top: 1px solid rgba(244,239,228,.18); }
.offer.featured li { border-top-color: rgba(5,5,5,.2); }
.photo-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 44px; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid #242320; }
.needs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 36px; }
@media (max-width: 860px) {
  .offers { grid-template-columns: 1fr; }
  .needs { grid-template-columns: 1fr 1fr; }
  .page-hero { padding: 48px 0 24px; }
}
@media (max-width: 520px) { .needs { grid-template-columns: 1fr; } }

/* ===== Privacy policy page (privacy.html, added 2026-10-16): narrow column of plain text ===== */
.legal .wrap { max-width: 760px; }
.legal h2 { font-size: clamp(26px, 3.4vw, 32px); margin: 40px 0 12px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 17px; line-height: 1.7; }
.legal p { margin-bottom: 12px; }
.legal ul { padding-left: 22px; margin-bottom: 12px; }
.legal li { margin-bottom: 8px; }
/* ===== Second row of packages on plan-your-bar.html (Golden Hour, The Grand Celebration; added 2026-10-16) ===== */
.tiers.two-up { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; margin-top: 28px; }
@media (max-width: 860px) { .tiers.two-up { grid-template-columns: 1fr; } }
/* ===== Home page "at a glance" strip (added 2026-10-16) ===== */
.glance-band { padding: 0 0 72px; border-top: none; }
.glance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.glance div { position: relative; border: 1px solid #2a2925; border-top: 3px solid var(--gold);
              background: linear-gradient(180deg, rgba(25,73,44,.55) 0%, var(--charcoal) 75%);
              padding: 28px 20px 26px; text-align: center; transition: transform .25s ease, box-shadow .25s ease; }
.glance div:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.55), 0 0 26px rgba(207,172,92,.2); }
.glance svg { width: 34px; height: 34px; margin: 0 auto 14px; display: block; fill: none; stroke: var(--gold);
              stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.glance strong { display: block; font-family: var(--heading); font-size: 25px; font-weight: 500; color: var(--ivory); line-height: 1.15; margin-bottom: 8px; }
.glance span { font-size: 14px; color: var(--pale-gold); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .glance div:hover { transform: none; } }
@media (max-width: 860px) { .glance { grid-template-columns: 1fr 1fr; } }

/* ===== Signature drink drawings on plan-your-bar.html (added 2026-11-08) =====
   When a card scrolls into view: the glass draws itself, the drink fills it, then the garnish lands.
   Each animation only runs its start state beforehand, so the finished drawing is what shows without animation. */
.sig-art { aspect-ratio: 1 / 1; overflow: hidden; border-bottom: 1px solid #242320; }
.sig-art svg { display: block; width: 100%; height: 100%; }
.art-haiti { background: radial-gradient(circle at 50% 42%, rgba(89,34,97,.5), #0c0a0d 74%); }
.art-ireland { background: radial-gradient(circle at 50% 42%, rgba(25,73,44,.7), #090d0a 74%); }
.art-house { background: radial-gradient(circle at 50% 42%, rgba(207,172,92,.2), #0a1c11 74%); border-bottom-color: var(--gold); }
.art-line { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art-motif { fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .3; transition: opacity .4s ease; }
.art-glint { fill: none; stroke: #fff; stroke-opacity: .28; stroke-width: 2.5; stroke-linecap: round; }
.art-bubble { fill: none; stroke: #fff; stroke-width: 1; opacity: .5; }
.art-sugar { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: .1 7.5; }
.art-garnish, .art-wig { transform-box: fill-box; transform-origin: 50% 100%; }
.sig:hover .art-motif, .sig:focus-within .art-motif { opacity: .55; }
.sig:hover .art-wig, .sig:focus-within .art-wig { animation: art-wiggle 1s ease; }

.js .sig.visible .art-motif { animation: art-fade 1.4s ease .2s backwards; }
.js .sig.visible .art-line { stroke-dasharray: 1; animation: art-draw 1.1s ease-out .25s backwards; }
.js .sig.visible .art-glint, .js .sig.visible .art-sugar { animation: art-fade .6s ease 1.8s backwards; }
.js .sig.visible .art-fill { animation: art-pour 1.1s cubic-bezier(.3, .7, .3, 1) .8s backwards; }
.js .sig.visible .art-garnish { animation: art-land .7s cubic-bezier(.3, 1.5, .5, 1) 1.8s backwards; }
.js .sig.visible .art-bubble { animation: art-bubble 3.2s linear 2s infinite backwards; }
.js .sig.visible .art-bubble:nth-of-type(2n) { animation-delay: 3s; animation-duration: 3.8s; }
.js .sig.visible .art-bubble:nth-of-type(3n) { animation-delay: 3.8s; animation-duration: 2.8s; }

@keyframes art-fade { from { opacity: 0; } }
@keyframes art-draw { from { stroke-dashoffset: 1; opacity: 0; } 8% { opacity: 1; } to { stroke-dashoffset: 0; } }
@keyframes art-pour { from { transform: translateY(var(--fill, 120px)); } to { transform: none; } }
@keyframes art-land { from { opacity: 0; transform: translateY(-26px) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes art-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-2deg); } }
@keyframes art-bubble { from { transform: translateY(16px); opacity: 0; } 20% { opacity: .7; } 80% { opacity: .5; } to { transform: translateY(-30px); opacity: 0; } }

/* ===== Drink drawing background motion (added 2026-11-08). To remove it, delete this whole block. =====
   Every piece moves while the card is hovered and pauses where it is afterward, so nothing snaps back.
   Phones have no hover, so there it plays once the card has scrolled into view. */
.art-spin, .art-spin-back, .art-ice { transform-box: fill-box; transform-origin: center; }
.art-spin { animation: art-turn 20s linear infinite; }
.art-spin-back { animation: art-turn 32s linear infinite reverse; }
.art-sway-clover { transform-origin: 116px 156px; animation: art-sway 3.4s ease-in-out infinite; }
.art-sway-cane { transform-origin: 296px 136px; animation: art-sway-cane 2.8s ease-in-out infinite; }
.art-wave { animation: art-wave 4s ease-in-out infinite; }
.art-wave-b { animation: art-wave-b 4.8s ease-in-out infinite; }
.art-cloud { animation: art-cloud 9s ease-in-out infinite; }
.art-cloud-b { animation: art-cloud-b 11s ease-in-out infinite; }
.art-ice { animation: art-ice 3s ease-in-out infinite; }
.art-staff { animation: art-staff 3.6s ease-in-out infinite; }
.art-note { animation: art-note .9s ease-in-out infinite; }
.art-note-b { animation: art-note .9s ease-in-out -.45s infinite; }
.art-loop { animation-play-state: paused; }
.sig:hover .art-loop, .sig:focus-within .art-loop { animation-play-state: running; }
.sig:hover .art-nutmeg, .sig:focus-within .art-nutmeg { animation: art-nutmeg 1s ease; }
@media (hover: none) { .js .sig.visible .art-loop { animation-play-state: running; } }

@keyframes art-turn { to { transform: rotate(360deg); } }
@keyframes art-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(9deg); } 75% { transform: rotate(-9deg); } }
@keyframes art-sway-cane { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
@keyframes art-wave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(18px); } }
@keyframes art-wave-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-18px); } }
@keyframes art-cloud { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
@keyframes art-cloud-b { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-24px); } }
@keyframes art-ice { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes art-staff { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes art-note { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes art-nutmeg { 0%, 100% { transform: translateX(0); } 30% { transform: translateX(4px); } 65% { transform: translateX(-3px); } }

/* ===== Opening pour (pour-intro.js) and clover sprinkle (sprinkle.js), added 2026-11-08 ===== */
html.pour-cover, html.pour-cover body { overflow: hidden; }
html.pour-cover::after { content: ""; position: fixed; inset: 0; background: var(--black); z-index: 10000; }
html.pour-live::after { display: none; }
.intro-layer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 10001; display: block; transition: opacity .35s; }
.intro-skip { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 10002;
              min-height: 40px; padding: 7px 16px; background: rgba(5,5,5,.75); border: 1px solid var(--gold); color: var(--gold);
              font-family: var(--body); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.sprinkle-layer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; z-index: 9000; pointer-events: none; }
.link-btn { background: none; border: 0; padding: 4px; color: var(--grey); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.link-btn:hover { color: var(--gold); }
.link-btn[hidden] { display: none; }
footer p:last-child { margin-top: 6px; }

/* The Book button in the top bar glows a few times when a page opens */
header .btn-gold { animation: book-glow 2.4s ease-out 1s 4; }
@keyframes book-glow { 0% { box-shadow: 0 0 0 0 rgba(207,172,92,.65); } 70%, 100% { box-shadow: 0 0 0 14px rgba(207,172,92,0); } }