/* TropicalBuzz. Static site styles. No frameworks, no build step.
   Creative direction: sun faded tropical travel poster. Navy + honey + cream.
   See BRAND.md for the token source of truth. */

/* ===== Tokens ===== */
:root{
  --ink:#101A45;
  --ink-deep:#0A1130;
  --cobalt:#1E2F8F;
  --honey:#D79A4E;
  --honey-lt:#EAC493;
  --ice:#BFD6D6;
  --mint:#DCEAE6;
  --paper:#FBF8F1;
  --paper-dim:#F1EBDD;
  --mango:#E8823C;
  --palm:#1F5D4C;

  --ff-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --ff-label:'Oswald',Impact,sans-serif;
  --ff-body:'Inter','Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1180px;
  --gut:24px;
  --radius-sm:10px;
  --radius-md:16px;
  --shadow:0 10px 30px rgba(10,17,48,.16);
  --shadow-lg:0 24px 60px rgba(10,17,48,.28);

  --tb-consent-h:0px;
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p{margin:0}
input,select,textarea{font:inherit}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{font-family:var(--ff-display);color:var(--ink);line-height:1.15;font-weight:800}
h1{font-size:clamp(2.1rem,4.6vw + 1rem,3.6rem)}
h2{font-size:clamp(1.7rem,2.6vw + 1rem,2.5rem)}
h3{font-size:clamp(1.2rem,1vw + 1rem,1.5rem)}

.eyebrow{
  display:inline-block;font-family:var(--ff-label);font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;color:var(--honey);
}
section .eyebrow{color:var(--cobalt)}
.section--navy .eyebrow,.section--navy-deep .eyebrow{color:var(--honey)}

.lede{font-size:1.1rem;color:var(--ink);opacity:.85;max-width:62ch}

/* ===== Layout ===== */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
/* Single consistent section padding scale, used everywhere (hero and footer
   are intentionally special-cased, see their own rules). */
:root{--section-pad:clamp(48px,6vw,84px)}
.section{padding-block:var(--section-pad);position:relative}
.section--paper{background:var(--paper)}
.section--dim{background:var(--paper-dim)}
.section--navy{background:var(--ink);color:var(--paper)}
.section--navy h2,.section--navy h3{color:var(--paper)}
.section--navy-deep{background:var(--ink-deep);color:var(--paper)}
.section--navy-deep h2,.section--navy-deep h3{color:var(--paper)}
.center{text-align:center}
.skip{
  position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);
  padding:12px 20px;z-index:400;border-radius:0 0 var(--radius-sm) 0;font-weight:700;
}
.skip:focus{left:0}

/* Focus ring, everywhere */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid var(--cobalt);outline-offset:2px;border-radius:4px;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:48px;padding:0 26px;border-radius:999px;font-weight:700;font-size:.98rem;
  text-decoration:none;white-space:nowrap;transition:transform .15s ease,box-shadow .2s ease,background .2s ease;
  border:2px solid transparent;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--honey);color:var(--ink-deep);box-shadow:var(--shadow)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--honey-lt)}
.btn--outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn--outline:hover,.btn--outline:focus-visible{background:var(--ink);color:var(--paper)}
.section--navy .btn--outline,.section--navy-deep .btn--outline,.age-gate .btn--outline,.hero .btn--outline{color:var(--paper);border-color:var(--paper)}
.section--navy .btn--outline:hover,.section--navy-deep .btn--outline:hover,.age-gate .btn--outline:hover,.hero .btn--outline:hover{background:var(--paper);color:var(--ink)}
.age-gate .btn--outline:focus-visible,.hero .btn--outline:focus-visible{outline-color:var(--honey)}
.btn--sm{min-height:40px;padding:0 18px;font-size:.88rem}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ===== Chips ===== */
.chip-row{display:flex;flex-wrap:wrap;gap:10px 14px}
.chip{
  display:inline-flex;align-items:center;gap:.4em;background:var(--mint);color:var(--ink);
  font-weight:600;font-size:.85rem;padding:8px 16px;border-radius:999px;
}
.chip--dark{background:rgba(255,255,255,.12);color:var(--paper)}
.chip--21{background:var(--honey);color:var(--ink-deep);font-family:var(--ff-label);letter-spacing:.06em}

/* ===== Dash-dot rule: the universal divider motif ===== */
.dashdot{display:flex;align-items:center;justify-content:center;gap:8px;margin-block:1.4rem}
.dashdot__dash{height:3px;background:currentColor;opacity:.55}
.dashdot__dash--long{width:34px}
.dashdot__dash--short{width:16px}
.dashdot__dots{display:flex;gap:5px}
.dashdot__dots i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55}
.dashdot--honey{color:var(--honey)}
.dashdot--left{justify-content:flex-start}

/* ===== Grain overlay ===== */
.grain{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:140px 140px;
}

/* ===== Sunburst =====
   Thin, sparse rays in the lighter honey, screened onto the navy ground so it
   reads as a warm glow rather than muddy brown, radially masked so rays
   dissolve well before the section edge instead of hard-stopping. */
.sunburst{
  position:absolute;inset:auto;aspect-ratio:1/1;border-radius:50%;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 0deg,var(--honey-lt) 0deg 1.5deg,transparent 1.5deg 26deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 76%);
  mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.55) 45%,transparent 76%);
  mix-blend-mode:screen;
  opacity:.6;animation:spin 120s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sunburst{animation:none}}
@media (max-width:900px){.sunburst{opacity:.32}}

/* ===== Palm silhouettes ===== */
.palm{position:absolute;z-index:0;color:var(--ink);opacity:.1;pointer-events:none}
.section--navy .palm,.section--navy-deep .palm{opacity:.14;color:var(--paper)}
.palm--left{left:clamp(-90px,-6vw,-20px);bottom:-10px;transform-origin:bottom left}
.palm--right{right:clamp(-90px,-6vw,-20px);bottom:-10px;transform:scaleX(-1);transform-origin:bottom right}
@media (prefers-reduced-motion:no-preference){
  .palm--sway{animation:sway 7s ease-in-out infinite}
}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.palm--right.palm--sway{animation:sway-r 7s ease-in-out infinite}
@keyframes sway-r{0%,100%{transform:scaleX(-1) rotate(-2deg)}50%{transform:scaleX(-1) rotate(2deg)}}

/* ===== Bee mark ===== */
.bee{display:block}
.bee--sm{width:38px;height:auto}
.bee--md{width:64px;height:auto}
.bee--lg{width:150px;height:auto}
.bee--xl{width:clamp(160px,22vw,260px);height:auto}
.bee--drift{animation:drift 9s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.bee--drift{animation:none}}
@keyframes drift{
  0%,100%{transform:translate(0,0) rotate(-2deg)}
  50%{transform:translate(0,-14px) rotate(2deg)}
}

/* ===== Arch frame, the recurring container shape ===== */
.arch{
  border-radius:50% 50% 6px 6px/38% 38% 4px 4px;
  overflow:hidden;position:relative;
}
.arch--card{border-radius:40% 40% 10px 10px/22% 22% 8px 8px}

/* ===== Header ===== */
.hdr{
  position:sticky;top:0;z-index:80;background:var(--paper);
  border-bottom:1px solid transparent;transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.hdr--scrolled{box-shadow:0 4px 20px rgba(10,17,48,.12);border-color:var(--paper-dim);background:rgba(251,248,241,.92);backdrop-filter:blur(8px)}
.hdr__bar{display:flex;align-items:center;gap:18px;min-height:76px;padding-block:10px}
.hdr__brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
/* Lockup: TROPICAL in serif caps over BUZZ in condensed slab caps, per
   BRAND.md. Markup keeps natural-case text for screen readers; caps are
   applied visually only. */
.hdr__word{font-family:var(--ff-display);font-weight:800;font-size:1.22rem;letter-spacing:.01em;line-height:1;color:var(--ink);text-transform:uppercase}
.hdr__word small{display:block;font-family:var(--ff-label);font-weight:600;font-size:.62rem;letter-spacing:.2em;color:var(--honey);margin-top:3px;text-transform:uppercase}
.hdr__spacer{flex:1}
.hdr__nav{display:flex;gap:26px}
.hdr__nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--ink);padding:6px 0;border-bottom:2px solid transparent}
.hdr__nav a:hover,.hdr__nav a[aria-current]{border-color:var(--honey)}
.hdr__cta{display:flex;align-items:center;gap:10px}
.hdr__21{font-family:var(--ff-label);font-size:.72rem;font-weight:600;letter-spacing:.1em;background:var(--ink);color:var(--paper);padding:6px 10px;border-radius:999px}
.burger{
  display:none;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--paper);
  align-items:center;justify-content:center;flex-shrink:0;
}
.burger svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.burger__close{display:none}
.burger[aria-expanded="true"] .burger__open{display:none}
.burger[aria-expanded="true"] .burger__close{display:block}

.mnav{
  display:none;flex-direction:column;gap:2px;padding:10px var(--gut) 22px;background:var(--paper);
  border-top:1px solid var(--paper-dim);
}
.mnav[data-open="true"]{display:flex;position:relative;z-index:160}
.mnav a{padding:12px 4px;font-weight:600;text-decoration:none;border-bottom:1px solid var(--paper-dim)}
.mnav__cta{display:flex;flex-direction:column;gap:10px;margin-top:14px}

@media (max-width:900px){
  .hdr__nav,.hdr__cta{display:none}
  .burger{display:flex}
}

/* ===== Age gate ===== */
.age-gate{
  position:fixed;inset:0;z-index:300;background:var(--ink-deep);color:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:24px;overflow:hidden;
}
.age-gate[hidden]{display:none}
.age-gate__card{
  position:relative;z-index:1;max-width:440px;width:100%;text-align:center;
  background:var(--ink);border-radius:var(--radius-md);padding:clamp(32px,6vw,52px) clamp(24px,5vw,40px);
  box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.08);
}
.age-gate__bee{margin-inline:auto;margin-bottom:14px}
.age-gate h2{color:var(--paper);font-size:clamp(1.5rem,3vw,2rem);margin-bottom:10px}
.age-gate p{color:var(--ice);margin-bottom:22px}
.age-gate__actions{display:flex;flex-direction:column;gap:12px}
.age-gate__decline{
  display:none;text-align:center;
}
.age-gate__decline[data-show="true"]{display:block}
.age-gate__yes{display:flex;flex-direction:column;gap:12px}
.age-gate__yes[data-show="false"]{display:none}

/* ===== Hero =====
   Note: the header is position:sticky, which still reserves its own space in
   normal flow, so the hero does NOT need extra top padding to "clear" it.
   Keep hero padding modest and consistent with the site-wide scale below. */
.hero{
  background:var(--ink-deep);color:var(--paper);position:relative;overflow:hidden;
  min-height:100svh;min-height:100vh;display:flex;align-items:center;
  padding-block:clamp(32px,5vw,56px) clamp(40px,5vw,60px);
}
@supports (height:100svh){.hero{min-height:100svh}}
.hero__inner{
  position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,60px);
  align-items:center;width:100%;
}
.hero__copy .eyebrow{margin-bottom:14px}
.hero h1{color:var(--paper);margin-bottom:16px}
.hero__sub{color:var(--ice);font-size:1.08rem;max-width:52ch;margin-bottom:26px}
.hero__chips{margin-top:28px}
.hero__art{position:relative}
/* Sunburst lives INSIDE the art column so it only ever glows behind the arch,
   never behind body copy, chips, or buttons (mobile included, since the art
   column simply stacks below the copy there). */
.hero__art .sunburst{width:145%;left:50%;top:50%;transform:translate(-50%,-50%)}
.hero__arch{
  background:linear-gradient(180deg,var(--mint) 0%,var(--ice) 100%);
  aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  border:6px solid var(--honey);
}
.hero__arch .bee{position:relative;z-index:1}
.hero__arch::before{
  content:"";position:absolute;inset:14px;border:2px solid rgba(16,26,69,.18);border-radius:inherit;z-index:0;
}
@media (max-width:900px){
  .hero__inner{grid-template-columns:1fr;text-align:center}
  .hero__copy .lede,.hero__sub{margin-inline:auto}
  .hero__art{max-width:340px;margin-inline:auto}
  .hero .btn-row,.hero__chips{justify-content:center}
}

/* ===== Buzz (intro) ===== */
.buzz__inner{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,70px);align-items:center}
.buzz__body{margin-top:16px}
.buzz__stats{display:flex;flex-direction:column;gap:18px;margin-top:6px}
/* Three genuinely different treatments, not three identical boxes: card 1 is
   a dominant filled block, card 2 carries its accent on the right, card 3 is
   the smallest with the accent on the left. */
.stat-card{
  background:var(--paper-dim);border-radius:var(--radius-md);padding:16px 20px;border-left:5px solid var(--palm);
}
.stat-card h3{font-size:1.02rem;margin-bottom:4px}
.stat-card p{font-size:.9rem;opacity:.8;margin:0}

.stat-card:nth-child(1){
  background:var(--honey);color:var(--ink-deep);border-left:none;padding:28px 26px;
}
.stat-card:nth-child(1) h3{font-size:1.3rem;color:var(--ink-deep)}
.stat-card:nth-child(1) p{color:var(--ink-deep);opacity:.85}

.stat-card:nth-child(2){
  margin-inline-start:clamp(0px,6vw,52px);border-left:none;border-right:5px solid var(--cobalt);padding:18px 22px;
}

.stat-card:nth-child(3){
  margin-inline-start:clamp(0px,3vw,26px);padding:13px 18px;
}
.stat-card:nth-child(3) h3{font-size:.94rem}
.stat-card:nth-child(3) p{font-size:.85rem}

@media (max-width:820px){
  .buzz__inner{grid-template-columns:1fr}
  .stat-card:nth-child(2),.stat-card:nth-child(3){margin-inline-start:0}
}

/* ===== Flavors =====
   Wider, shorter cards on a shallow dome (not a tall narrow arch, which read
   as a headstone). Each flavor gets its own palette-family tint instead of a
   near-random alternation; every tint keeps ink text well above 4.5:1
   contrast (verified: all sit between 12.4:1 and 14.6:1). */
.flavor-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;
}
.flavor-card{
  background:var(--paper);border:2px solid var(--ink);padding:22px 22px 20px;text-align:center;
  aspect-ratio:1.4/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.flavor-card h3{font-size:1.1rem;margin-bottom:6px}
.flavor-card p{font-size:.88rem;opacity:.82;margin:0;max-width:32ch}
.flavor-card .dashdot{margin-block:8px 10px}

/* Palette-family tints, one per flavor (mango / honey / palm / ice mixed into paper) */
.flavor-card--miami{background:#F3E9DC;background:color-mix(in srgb, color-mix(in srgb, var(--mango) 50%, var(--ice) 50%) 20%, var(--paper) 80%)}
.flavor-card--honeybee{background:#F5E7D4;background:color-mix(in srgb, var(--honey) 18%, var(--paper) 82%)}
.flavor-card--mango{background:#F6D9C2;background:color-mix(in srgb, var(--mango) 26%, var(--paper) 74%)}
.flavor-card--guava{background:#E2E7E0;background:color-mix(in srgb, color-mix(in srgb, var(--palm) 50%, var(--ice) 50%) 18%, var(--paper) 82%)}
.flavor-card--passion{background:#F6E5D2;background:color-mix(in srgb, color-mix(in srgb, var(--mango) 50%, var(--honey) 50%) 18%, var(--paper) 82%)}
.flavor-card--strawberry{background:#F9EDE1;background:color-mix(in srgb, var(--mango) 9%, var(--paper) 91%)}
.flavor-card--pina{background:#E9E7DA;background:color-mix(in srgb, color-mix(in srgb, var(--honey) 50%, var(--palm) 50%) 14%, var(--paper) 86%)}
.flavor-card--watermelon{background:#D9E1DA;background:color-mix(in srgb, color-mix(in srgb, var(--palm) 50%, var(--ice) 50%) 24%, var(--paper) 76%)}

.flavors__foot{margin-top:40px;text-align:center}
.flavors__foot p{max-width:60ch;margin-inline:auto 0;margin-inline:auto}
.flavors__foot .btn{margin-top:18px}
@media (max-width:980px){.flavor-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.flavor-grid{grid-template-columns:1fr}.flavor-card{aspect-ratio:auto;padding:26px 22px}}

/* ===== Steps (how it works) ===== */
.steps{margin-top:36px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:start}
.step{padding:0 6px}
.step__num{font-family:var(--ff-display);font-weight:800;font-size:3rem;color:var(--honey);line-height:1;margin-bottom:12px}
.step h3{margin-bottom:8px;font-size:1.2rem}
.step p{margin:0;opacity:.85;font-size:.96rem}
/* A proper horizontal dash-dot connector, sitting at the numeral's height,
   between each pair of steps. Previously this was a stacked vertical column
   of tiny marks that read as a rendering glitch; now it is the same
   horizontal rule used everywhere else on the site. */
.steps__connector{display:flex;align-items:center;justify-content:center;padding-top:22px}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:6px}
  .steps__connector{padding-top:0;padding-block:8px}
}

/* ===== Events & Catering ===== */
.events__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
.tag-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.tag-grid li{
  display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.14);
  font-weight:600;
}
.tag-grid li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--honey);flex-shrink:0}
.events .btn-row{margin-top:26px}
@media (max-width:820px){.events__inner{grid-template-columns:1fr}}

/* ===== Real fruit story ===== */
.fruit-story{text-align:center}
.fruit-story__inner{max-width:680px;margin-inline:auto}
.fruit-story .bee{margin-inline:auto;margin-bottom:6px}

/* ===== FAQ ===== */
.faq-list{max-width:820px;margin-inline:auto;margin-top:22px;border-top:1px solid var(--paper-dim)}
.faq-item{border-bottom:1px solid var(--paper-dim)}
.faq-item summary{
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;font-weight:700;font-size:1.05rem;cursor:pointer;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";font-size:1.6rem;font-weight:400;color:var(--honey);flex-shrink:0;
  transition:transform .2s ease;line-height:1;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 4px 22px;margin:0;max-width:70ch;opacity:.86}

/* ===== Final CTA ===== */
.cta-final{text-align:center;overflow:hidden;position:relative}
.cta-final__sunburst{width:min(56vw,460px);left:50%;top:50%;transform:translate(-50%,-50%)}
.cta-final__inner{position:relative;z-index:1}
.cta-final .btn-row{justify-content:center;margin-top:30px}
.cta-final .chip-row{justify-content:center;margin-top:26px}

/* ===== Footer ===== */
.ftr{background:var(--ink-deep);color:var(--paper);padding-block:56px 28px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
.ftr__brand .hdr__word{color:var(--paper)}
.ftr__brand p{margin-top:12px;color:var(--ice);font-size:.92rem;max-width:36ch}
.ftr h3{color:var(--paper);font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;font-family:var(--ff-label);font-weight:600;margin-bottom:14px}
.ftr ul{display:flex;flex-direction:column;gap:9px}
.ftr a{color:var(--ice);text-decoration:none;font-size:.94rem}
.ftr a:hover{color:var(--paper);text-decoration:underline}
.ftr__bottom{
  margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:.85rem;color:var(--ice);
}
.ftr__legal-line{margin-top:14px;font-size:.82rem;color:var(--ice);opacity:.85;max-width:70ch}
.ftr__legal-nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ftr__legal-nav a{color:var(--ice)}
.ftr__legal-btn{color:var(--ice);text-decoration:underline;background:none}
@media (max-width:900px){.ftr__grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr__grid{grid-template-columns:1fr}}

/* ===== Scroll reveal (JS-only; everything visible without JS or with reduced motion) ===== */
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
}

/* ===== Utilities ===== */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===================================================================
   Consent + accessibility widget (ported from autentica-taqueria,
   restyled to TropicalBuzz palette). Storage keys renamed to
   tb_a11y / tb_consent. Behavior and ARIA unchanged.
   =================================================================== */

/* ---- Accessibility button + panel ---- */
.a11y-fab{
  position:fixed;left:16px;bottom:calc(16px + var(--tb-consent-h,0px));z-index:140;
  width:48px;height:48px;border-radius:50%;border:2px solid transparent;
  background:var(--ink);color:var(--paper);display:grid;place-items:center;
  box-shadow:var(--shadow);cursor:pointer;transition:background .18s ease,transform .15s ease;
}
.a11y-fab svg{width:26px;height:26px}
.a11y-fab:hover,.a11y-fab:focus-visible{background:var(--cobalt)}
.a11y-fab:active{transform:translateY(1px)}
.a11y-fab[aria-expanded="true"]{background:var(--honey);color:var(--ink-deep)}

.a11y-panel{
  position:fixed;left:16px;bottom:calc(16px + 48px + 12px + var(--tb-consent-h,0px));z-index:140;
  width:min(320px,calc(100vw - 32px));max-height:min(520px,calc(100vh - 140px));overflow-y:auto;
  background:var(--paper);border:1px solid var(--paper-dim);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);padding:18px;
}
.a11y-panel[hidden]{display:none}
.a11y-panel__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.a11y-panel__head h2{font-family:var(--ff-body);font-size:1.02rem;font-weight:800;color:var(--ink);margin:0}
.a11y-close{
  width:44px;height:44px;border-radius:50%;border:0;flex-shrink:0;
  background:var(--paper-dim);color:var(--ink);display:grid;place-items:center;cursor:pointer;
}
.a11y-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.a11y-close:hover,.a11y-close:focus-visible{background:var(--ice)}

.a11y-group{margin-bottom:12px}
.a11y-group__label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);opacity:.6;margin-bottom:8px}
.a11y-seg{display:flex;gap:6px}
.a11y-seg button{
  flex:1;min-height:44px;border-radius:10px;border:1px solid var(--paper-dim);
  background:var(--paper-dim);color:var(--ink);font-weight:700;cursor:pointer;
}
.a11y-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.a11y-seg button:hover{border-color:var(--ink)}

.a11y-item{
  display:flex;align-items:center;justify-content:space-between;width:100%;min-height:46px;
  margin-bottom:8px;padding:10px 14px;border-radius:10px;border:1px solid var(--paper-dim);
  background:var(--paper-dim);color:var(--ink);font-weight:600;font-size:.95rem;cursor:pointer;text-align:left;
}
.a11y-item::after{content:"Off";font-size:.78rem;font-weight:700;color:var(--ink);opacity:.55}
.a11y-item[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.a11y-item[aria-pressed="true"]::after{content:"On";color:var(--paper)}
.a11y-item:hover{border-color:var(--ink)}

.a11y-reset{
  width:100%;min-height:44px;margin:6px 0 12px;border-radius:10px;border:1px solid var(--ink);
  background:var(--ink);color:var(--paper);font-weight:700;cursor:pointer;
}
.a11y-reset:hover{background:var(--cobalt);border-color:var(--cobalt)}

.a11y-statement{display:block;text-align:center;font-size:.85rem;color:var(--cobalt);text-decoration:underline}

/* ---- Accessibility state classes (applied to <html> by site.js) ---- */
html.a11y-text-large{font-size:112.5%}
html.a11y-text-larger{font-size:125%}
html.a11y-font{--ff-display:var(--ff-body);--ff-label:var(--ff-body)}
html.a11y-underline a{text-decoration:underline!important;text-underline-offset:.14em}
html.a11y-contrast{filter:contrast(1.3) saturate(1.15)}
html.a11y-contrast :focus-visible{outline:3px solid var(--honey);outline-offset:2px}
html.a11y-motion,html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important;
}

/* ---- Cookie consent banner ----
   A compact card anchored bottom-left (not a full-width bar), so it can
   never cover the primary hero CTA. Shares the accessibility button's left
   edge; --tb-consent-h (measured from this card's real height in site.js)
   pushes that button up clear of it. */
.tb-consent{
  position:fixed;left:16px;bottom:16px;z-index:150;
  max-width:min(400px,calc(100vw - 32px));
  background:var(--paper);border:1px solid var(--paper-dim);border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
}
.tb-consent[hidden]{display:none}
.tb-consent__body{
  padding:12px 14px;display:flex;flex-direction:column;gap:9px;
}
.tb-consent p{margin:0;color:var(--ink);font-size:.78rem;line-height:1.4}
.tb-consent a{color:var(--cobalt)}
.tb-consent__actions{display:flex;gap:8px}
.tb-consent__actions .btn{flex:1;min-height:36px;font-size:.82rem}

/* ===== Prose (legal pages) ===== */
.prose{max-width:760px;margin-inline:auto}
.prose h2{margin-top:2.2em;margin-bottom:.6em;font-size:1.4rem}
.prose p{margin-bottom:1.1em}
.prose ul{margin-bottom:1.1em;padding-left:1.2em;list-style:disc}
.prose li{margin-bottom:.5em}

/* ===== Responsive safety ===== */
@media (max-width:340px){
  .btn{padding:0 18px;font-size:.9rem}
}