/* ============================================================
   KAVA & COMPANY — Dark base + authentic pop-art brand style
   (bubble-outline headers · 70s swirls · comic halftone)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Shrikhand&family=Pacifico&family=Fredoka:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

:root{
  /* dark base */
  --ink:#0e0b14;
  --ink-2:#171226;
  --panel:#1d1730;
  --panel-2:#241c3d;
  --cream:#fff3e0;
  --cream-dim:#e9dcc6;

  /* authentic brand pop palette (from menus) */
  --pink:#ff2e9a;
  --teal:#4fd0da;
  --coral:#ff7a45;
  --orange:#ff8a3d;
  --yellow:#ffd23f;
  --purple:#9a5cff;
  --navy:#12203f;          /* bubble-letter outline */

  /* greenery */
  --green:#3faa6d;
  --green-lt:#5fc97e;

  --radius:22px;
  --radius-lg:34px;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --maxw:1200px;

  --f-display:'Bagel Fat One',system-ui,sans-serif;
  --f-groovy:'Shrikhand',serif;
  --f-script:'Pacifico',cursive;
  --f-head:'Fredoka',system-ui,sans-serif;
  --f-body:'DM Sans',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  color:var(--cream);
  background:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* page-wide groovy backdrop: swirl + glow + halftone */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 45% at 12% 8%, rgba(154,92,255,.20), transparent 60%),
    radial-gradient(55% 50% at 88% 12%, rgba(79,208,218,.16), transparent 60%),
    radial-gradient(70% 55% at 50% 108%, rgba(255,46,154,.18), transparent 60%),
    var(--ink);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("assets/swirl.svg"),
    radial-gradient(rgba(255,243,224,.85) 1.1px, transparent 1.2px);
  background-size:760px 760px, 22px 22px;
  background-position:center;
  opacity:.045;
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:88px 0;position:relative}
.section-sm{padding:56px 0;position:relative}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--f-head);font-weight:700;letter-spacing:.26em;
  text-transform:uppercase;font-size:.82rem;color:var(--teal);
  display:inline-block;margin-bottom:14px;
}
.script{font-family:var(--f-script);color:var(--pink);font-weight:400}
.groovy{font-family:var(--f-groovy)}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.02;letter-spacing:.5px}
h1{font-size:clamp(2.8rem,7vw,5.4rem)}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem)}
h3{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.lead{font-size:clamp(1.05rem,1.7vw,1.28rem);color:var(--cream-dim);max-width:60ch}

.text-pink{color:var(--pink)}
.text-teal{color:var(--teal)}
.text-coral{color:var(--coral)}
.text-orange{color:var(--orange)}
.text-yellow{color:var(--yellow)}
.text-green{color:var(--green-lt)}

.pop-grad{
  background:linear-gradient(92deg,var(--pink),var(--coral) 42%,var(--yellow) 72%,var(--teal));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---- BUBBLE-OUTLINE POP HEADER (the menu look) ---- */
.bubble{
  font-family:var(--f-display);line-height:.98;letter-spacing:.5px;
  color:var(--teal);
  -webkit-text-stroke:.09em var(--navy);
  paint-order:stroke fill;
  text-shadow:.07em .08em 0 var(--navy), .12em .14em 0 rgba(0,0,0,.35);
}
.bubble.pink{color:var(--pink)}
.bubble.coral{color:var(--coral)}
.bubble.yellow{color:var(--yellow)}
.bubble.cream{color:var(--cream)}
.bubble.smblue{color:#6fd8ff}
.bubble.green{color:var(--green-lt)}
h1.bubble{font-size:clamp(3rem,8vw,6rem)}
h2.bubble{font-size:clamp(2.4rem,5.5vw,4.2rem)}

/* comic starburst accent */
.sparkle{color:var(--yellow);display:inline-block;
  width:1em;height:1em;vertical-align:-.12em;
  -webkit-mask:url("assets/starburst.svg") center/contain no-repeat;
          mask:url("assets/starburst.svg") center/contain no-repeat;
  background:currentColor;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--f-head);font-weight:700;font-size:1rem;
  padding:15px 30px;border-radius:100px;border:none;cursor:pointer;
  background:var(--pink);color:#fff;
  box-shadow:0 8px 0 #b81e6e, 0 18px 30px rgba(255,46,154,.35);
  transition:transform .12s ease, box-shadow .12s ease;letter-spacing:.02em;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(6px);box-shadow:0 2px 0 #b81e6e,0 6px 14px rgba(255,46,154,.3)}
.btn-teal{background:var(--teal);color:#052b2e;box-shadow:0 8px 0 #2a9aa3,0 18px 30px rgba(79,208,218,.3)}
.btn-teal:active{box-shadow:0 2px 0 #2a9aa3,0 6px 14px rgba(79,208,218,.3)}
.btn-coral{background:var(--coral);color:#3a1300;box-shadow:0 8px 0 #c4502a,0 18px 30px rgba(255,122,69,.3)}
.btn-coral:active{box-shadow:0 2px 0 #c4502a,0 6px 14px rgba(255,122,69,.3)}
.btn-ghost{background:transparent;color:var(--cream);border:2px solid rgba(255,243,224,.35);box-shadow:none}
.btn-ghost:hover{border-color:var(--yellow);color:var(--yellow)}
.btn-ghost:active{transform:translateY(-2px);box-shadow:none}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(14,11,20,.74);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,243,224,.08);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:78px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:46px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links > a{
  font-family:var(--f-head);font-weight:600;font-size:1rem;color:var(--cream-dim);
  position:relative;padding:4px 0;transition:color .15s;
}
.nav-links > a:hover,.nav-links > a.active{color:var(--yellow)}
.nav-links > a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:-4px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--pink),var(--teal));
}
.nav-cta{padding:10px 20px;font-size:.92rem}

/* nav dropdown (Menu) */
.has-drop{position:relative}
.drop-toggle{
  font-family:var(--f-head);font-weight:600;font-size:1rem;color:var(--cream-dim);
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:4px 0;transition:color .15s;
}
.drop-toggle:hover,.drop-toggle.active{color:var(--yellow)}
.drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--panel);border:1px solid rgba(255,243,224,.12);border-radius:16px;
  padding:8px;min-width:190px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transition:all .18s ease;z-index:60;
}
.has-drop:hover .drop-menu,.has-drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.drop-menu a{
  display:block;font-family:var(--f-head);font-weight:600;font-size:.96rem;
  color:var(--cream-dim);padding:10px 14px;border-radius:10px;transition:all .13s;
}
.drop-menu a:hover{background:rgba(255,46,154,.16);color:var(--cream)}
.nav-toggle{display:none;background:none;border:none;color:var(--cream);cursor:pointer;padding:6px}
.nav-toggle svg{width:30px;height:30px}

/* ---------- hero ---------- */
.hero{position:relative;padding:70px 0 90px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.hero h1{margin-bottom:18px}
.hero .lead{margin-bottom:30px}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
.hero-photo{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);border:3px solid rgba(255,243,224,.12);transform:rotate(1.5deg);
}
.hero-photo img{width:100%;height:520px;object-fit:cover}
.hero-badge{
  position:absolute;top:-22px;right:-14px;z-index:3;
  width:120px;height:120px;display:grid;place-items:center;text-align:center;
  font-family:var(--f-display);font-size:.95rem;line-height:1;color:#2a1500;
  background:var(--yellow);border-radius:50%;
  box-shadow:0 10px 24px rgba(0,0,0,.4);transform:rotate(-12deg);
  animation:spin-badge 18s linear infinite;
}
@keyframes spin-badge{to{transform:rotate(348deg)}}

.star{color:var(--yellow)}

/* ---------- cards / chips ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(255,243,224,.08);border-radius:var(--radius);
  padding:28px;box-shadow:var(--shadow);
  transition:transform .16s ease,border-color .16s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(255,210,63,.4)}
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.chip{
  display:inline-block;font-family:var(--f-head);font-weight:600;font-size:.8rem;
  padding:6px 14px;border-radius:100px;letter-spacing:.04em;
  background:rgba(79,208,218,.14);color:var(--teal);border:1px solid rgba(79,208,218,.3);
}

.sec-head{text-align:center;max-width:760px;margin:0 auto 52px}
.sec-head .lead{margin:14px auto 0}

/* ---------- menu hub cards ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hub-card{
  display:block;text-align:center;padding:40px 22px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(255,243,224,.1);box-shadow:var(--shadow);
  transition:transform .16s,border-color .16s;position:relative;overflow:hidden;
}
.hub-card::before{content:"";position:absolute;inset:0;background:url("assets/swirl.svg") center/300px;opacity:.05}
.hub-card:hover{transform:translateY(-6px) rotate(-1deg);border-color:var(--pink)}
.hub-card .hub-emoji{font-size:2.6rem;display:block;margin-bottom:12px;position:relative}
.hub-card h3{position:relative;margin-bottom:6px}
.hub-card p{position:relative;color:var(--cream-dim);font-size:.95rem}

/* ---------- menu ---------- */
.menu-tabs{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.menu-tab{
  font-family:var(--f-head);font-weight:600;font-size:.98rem;
  padding:11px 22px;border-radius:100px;cursor:pointer;
  background:var(--panel);color:var(--cream-dim);border:1px solid rgba(255,243,224,.12);transition:all .15s;
}
.menu-tab:hover{color:var(--cream)}
.menu-tab.active{background:var(--pink);color:#fff;border-color:transparent;box-shadow:0 6px 18px rgba(255,46,154,.4)}
.menu-search{
  display:block;margin:0 auto 44px;width:min(460px,90%);
  font-family:var(--f-body);font-size:1rem;color:var(--cream);
  background:var(--panel);border:1px solid rgba(255,243,224,.14);border-radius:100px;padding:14px 22px;
}
.menu-search::placeholder{color:rgba(233,220,198,.5)}
.menu-search:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,208,218,.2)}
.menu-cat{margin-bottom:44px}
.menu-cat h3{color:var(--yellow);margin-bottom:6px}
.menu-cat .cat-note{color:var(--cream-dim);font-size:.95rem;margin-bottom:20px}
.menu-item{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px dashed rgba(255,243,224,.14)}
.menu-item .mi-name{font-family:var(--f-head);font-weight:600;font-size:1.06rem;color:var(--cream)}
.menu-item .mi-desc{display:block;font-family:var(--f-body);font-weight:400;font-size:.9rem;color:var(--cream-dim);margin-top:2px}
.menu-item .mi-price{font-family:var(--f-head);font-weight:700;color:var(--teal);white-space:nowrap}
.menu-empty{text-align:center;color:var(--cream-dim);padding:40px;display:none}

/* products */
.prod-price{color:var(--coral)}

/* ---------- events ---------- */
.event-row{
  display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:center;
  padding:22px;border-radius:var(--radius);
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid rgba(255,243,224,.08);margin-bottom:16px;transition:transform .15s,border-color .15s;
}
.event-row:hover{transform:translateX(6px);border-color:rgba(255,138,61,.45)}
.event-day{font-family:var(--f-display);font-size:1.15rem;color:#2a1500;background:var(--coral);border-radius:14px;padding:14px 8px;text-align:center;line-height:1.05}
.event-info h3{font-family:var(--f-head);font-weight:700;font-size:1.2rem;color:var(--cream)}
.event-info p{color:var(--cream-dim);font-size:.95rem}
.event-time{font-family:var(--f-head);font-weight:600;color:var(--teal)}

/* ---------- locations ---------- */
.loc-card{overflow:hidden;padding:0}
.loc-card .loc-body{padding:26px}
.loc-card h3{color:var(--pink);margin-bottom:4px}
.loc-meta{list-style:none;margin:14px 0 20px}
.loc-meta li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;color:var(--cream-dim);font-size:.96rem}
.loc-meta .ic{color:var(--teal);flex:0 0 20px;margin-top:2px}
.loc-hours{font-size:.92rem;color:var(--cream-dim)}
.loc-hours b{color:var(--cream);font-family:var(--f-head)}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.field{margin-bottom:18px}
.field label{display:block;font-family:var(--f-head);font-weight:600;margin-bottom:7px;font-size:.95rem}
.field input,.field textarea,.field select{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--cream);
  background:var(--panel);border:1px solid rgba(255,243,224,.14);border-radius:14px;padding:13px 16px;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(79,208,218,.18)}

/* ---------- footer ---------- */
.site-footer{background:var(--ink-2);border-top:1px solid rgba(255,243,224,.08);padding:60px 0 34px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.footer-grid h4{font-family:var(--f-head);font-weight:700;color:var(--yellow);margin-bottom:14px;font-size:1.05rem}
.footer-grid a{color:var(--cream-dim);display:block;padding:4px 0;transition:color .15s}
.footer-grid a:hover{color:var(--teal)}
.foot-logo{height:60px;width:auto;margin-bottom:14px}
.social{display:flex;gap:14px;margin-top:16px}
.social a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:var(--panel);border:1px solid rgba(255,243,224,.12);color:var(--cream);transition:all .15s}
.social a:hover{background:var(--pink);color:#fff;transform:translateY(-3px)}
.footer-bottom{text-align:center;color:rgba(233,220,198,.5);font-size:.85rem;border-top:1px solid rgba(255,243,224,.08);padding-top:24px}
.leaf{color:var(--green-lt)}

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

/* ---------- responsive ---------- */
@media(max-width:960px){
  .hub-grid{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-photo{transform:none}
  .hero-photo img{height:420px}
  .grid-3{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .nav-links{
    position:fixed;inset:78px 0 auto 0;flex-direction:column;gap:0;align-items:stretch;
    background:rgba(14,11,20,.98);backdrop-filter:blur(14px);
    padding:8px 24px 22px;border-bottom:1px solid rgba(255,243,224,.1);
    transform:translateY(-140%);transition:transform .28s ease;
  }
  .nav-links.open{transform:none}
  .nav-links > a{width:100%;padding:15px 0;border-bottom:1px solid rgba(255,243,224,.07)}
  .nav-links .nav-cta{margin-top:14px;text-align:center}
  /* dropdown becomes inline list on mobile */
  .has-drop{width:100%}
  .drop-menu{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:none;box-shadow:none;padding:0 0 10px 14px;min-width:0}
  .drop-menu a{padding:12px 0}
  .drop-toggle::after{content:" ▾"}
  .nav-toggle{display:block}
}
@media(max-width:560px){
  .section{padding:60px 0}
  .grid-2,.grid-3,.grid-4,.hub-grid{grid-template-columns:1fr}
  .event-row{grid-template-columns:64px 1fr;gap:14px}
  .event-time{grid-column:2;justify-self:start}
  .footer-grid{grid-template-columns:1fr}
  .hero-badge{width:96px;height:96px;font-size:.8rem}
}

/* ============================================================
   V2 ENHANCEMENT LAYER — Lava Lounge + Comic Pop + Conversion
   (appended; overrides only, nothing above removed)
   ============================================================ */

/* ---- bigger transparent logo ---- */
.brand img{height:62px}
.foot-logo{height:86px}

/* ---- halftone drift (comic dots slowly wander) ---- */
body::after{animation:halftone-drift 90s linear infinite alternate}
@keyframes halftone-drift{
  from{background-position:center,0 0}
  to{background-position:center,220px 140px}
}

/* ---- LAVA LOUNGE: drifting lamp blobs ---- */
.lava-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;filter:blur(70px) saturate(1.15)}
.lava-bg span{position:absolute;border-radius:50%;opacity:.32;will-change:transform}
.lava-bg .b1{width:46vmax;height:46vmax;left:-12vmax;top:-10vmax;background:radial-gradient(circle at 35% 35%,var(--purple),transparent 65%);animation:lava-a 38s ease-in-out infinite alternate}
.lava-bg .b2{width:40vmax;height:40vmax;right:-14vmax;top:6vh;background:radial-gradient(circle at 60% 40%,var(--teal),transparent 65%);animation:lava-b 46s ease-in-out infinite alternate;opacity:.24}
.lava-bg .b3{width:44vmax;height:44vmax;left:22vw;bottom:-20vmax;background:radial-gradient(circle at 50% 50%,var(--pink),transparent 65%);animation:lava-c 52s ease-in-out infinite alternate;opacity:.26}
.lava-bg .b4{width:26vmax;height:26vmax;right:18vw;bottom:-8vmax;background:radial-gradient(circle at 50% 50%,var(--orange),transparent 65%);animation:lava-a 33s ease-in-out infinite alternate-reverse;opacity:.18}
@keyframes lava-a{from{transform:translate(0,0) scale(1)}to{transform:translate(9vw,14vh) scale(1.22)}}
@keyframes lava-b{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-11vw,10vh) scale(.92)}}
@keyframes lava-c{from{transform:translate(0,0) scale(1)}to{transform:translate(13vw,-12vh) scale(1.18)}}

/* ---- floating leaves & starbursts w/ parallax ---- */
.floaters{position:fixed;inset:0;z-index:-1;pointer-events:none}
.floater{position:absolute;will-change:transform;opacity:.5}
.floater .fl-inner{display:block;animation:bob 7s ease-in-out infinite alternate}
.floater.f-star .fl-inner{width:26px;height:26px;background:var(--yellow);
  -webkit-mask:url("assets/starburst.svg") center/contain no-repeat;mask:url("assets/starburst.svg") center/contain no-repeat;
  animation:bob 8s ease-in-out infinite alternate, twirl 26s linear infinite}
.floater.f-leaf .fl-inner{font-size:26px;filter:saturate(.8)}
@keyframes bob{from{transform:translateY(-10px)}to{transform:translateY(12px)}}
@keyframes twirl{to{rotate:360deg}}

/* ---- neon flicker on hero pink words ---- */
.hero .bubble.pink{animation:neon-flick 7s linear infinite}
@keyframes neon-flick{
  0%,18%,22%,100%{text-shadow:.07em .08em 0 var(--navy),.12em .14em 0 rgba(0,0,0,.35),0 0 26px rgba(255,46,154,.55)}
  19%,21.5%{text-shadow:.07em .08em 0 var(--navy),.12em .14em 0 rgba(0,0,0,.35),0 0 8px rgba(255,46,154,.15)}
  20%{text-shadow:.07em .08em 0 var(--navy),.12em .14em 0 rgba(0,0,0,.35),0 0 40px rgba(255,46,154,.9)}
}

/* ---- COMIC POP: marquee ticker ---- */
.ticker{overflow:hidden;position:relative;z-index:5;
  background:linear-gradient(90deg,var(--pink),var(--coral) 35%,var(--purple) 70%,var(--pink));
  border-top:1px solid rgba(255,243,224,.15);border-bottom:2px solid var(--navy)}
.ticker-track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker span{font-family:var(--f-display);font-size:.98rem;letter-spacing:.14em;color:#fff;
  text-shadow:1px 2px 0 var(--navy);padding:9px 0;white-space:nowrap}
.ticker .tick-star{color:var(--yellow);padding:9px 18px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---- sticker chips + pop-in on reveal ---- */
.card .chip{transform:rotate(-2deg);box-shadow:2px 3px 0 rgba(0,0,0,.35)}
.reveal.in .chip{animation:pop-in .55s cubic-bezier(.5,1.8,.4,1) both}
.reveal.in .eyebrow{animation:pop-in .5s cubic-bezier(.5,1.8,.4,1) both}
@keyframes pop-in{0%{transform:scale(.4) rotate(-10deg);opacity:0}100%{transform:scale(1) rotate(-2deg);opacity:1}}
.reveal.in .eyebrow{transform:none;animation-name:pop-in-flat}
@keyframes pop-in-flat{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

/* ---- squishy buttons ---- */
.btn:hover{animation:squish .35s ease}
@keyframes squish{0%{transform:scale(1,1)}35%{transform:scale(1.06,.9) translateY(-2px)}70%{transform:scale(.97,1.04) translateY(-2px)}100%{transform:scale(1) translateY(-2px)}}

/* ---- comic halftone corner on cards ---- */
.card{position:relative}
.card::after{content:"";position:absolute;right:10px;bottom:10px;width:86px;height:56px;pointer-events:none;
  background:radial-gradient(rgba(255,243,224,.5) 1.3px, transparent 1.4px);background-size:9px 9px;
  opacity:.12;-webkit-mask:radial-gradient(circle at 100% 100%,#000 30%,transparent 75%);mask:radial-gradient(circle at 100% 100%,#000 30%,transparent 75%)}

/* ---- wavy divider above footer ---- */
.site-footer{position:relative;margin-top:70px}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-30px;height:32px;background:var(--ink-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0 16 Q15 32 30 16 T60 16 T90 16 T120 16 V32 H0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/120px 32px;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 32'%3E%3Cpath d='M0 16 Q15 32 30 16 T60 16 T90 16 T120 16 V32 H0 Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom/120px 32px}

/* ---- menu pages: match printed menu look (dark) ---- */
.menu-item .mi-name{color:var(--pink)}
.menu-cat h3{color:var(--teal);text-shadow:2px 3px 0 var(--navy)}

/* ---- CONVERSION: open-now pill ---- */
.open-pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:700;font-size:.82rem;
  padding:7px 14px;border-radius:100px;letter-spacing:.03em;white-space:nowrap;
  background:rgba(63,170,109,.14);color:var(--green-lt);border:1px solid rgba(95,201,126,.35)}
.open-pill.closed{background:rgba(255,122,69,.12);color:var(--coral);border-color:rgba(255,122,69,.35)}
.open-pill .dot{width:9px;height:9px;border-radius:50%;background:currentColor;animation:pulse-dot 1.8s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{box-shadow:0 0 0 0 rgba(95,201,126,.5)}50%{box-shadow:0 0 0 6px rgba(95,201,126,0)}}
@media(max-width:1080px){.open-pill{display:none}}

/* ---- CONVERSION: sticky mobile CTA bar ---- */
.mobile-cta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(14,11,20,.9);backdrop-filter:blur(14px);border-top:1px solid rgba(255,243,224,.14)}
.mobile-cta .btn{flex:1;justify-content:center;padding:13px 10px;font-size:.95rem}
@media(max-width:900px){
  .mobile-cta{display:flex}
  body{padding-bottom:70px}
}

/* ---- footer gains 4th column (newsletter, injected by JS) ---- */
.footer-grid{grid-template-columns:1.4fr .8fr .8fr 1.3fr}

/* ---- accessibility: honor reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .lava-bg,.floaters,.ticker{display:none}
  body::after,.hero .bubble.pink,.hero-badge,.btn:hover,.reveal.in .chip,.reveal.in .eyebrow{animation:none!important}
}

/* ============================================================
   V3 — PHOTO LAYER (real photos pulled from the old site)
   ============================================================ */

/* polaroid-style photo grid */
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.photo-grid.two{grid-template-columns:repeat(2,1fr)}
.photo-grid .ph{position:relative;border-radius:18px;overflow:hidden;border:3px solid var(--navy);box-shadow:6px 8px 0 rgba(0,0,0,.35);background:var(--navy)}
.photo-grid .ph img{width:100%;height:255px;object-fit:cover;display:block;transition:transform .45s ease}
.photo-grid.two .ph img{height:320px}
.photo-grid .ph:hover img{transform:scale(1.06)}
.photo-grid .ph:nth-child(odd){transform:rotate(-1.1deg)}
.photo-grid .ph:nth-child(even){transform:rotate(1.1deg)}
.photo-grid .ph:hover{z-index:2}
.ph-cap{position:absolute;left:12px;bottom:12px;background:var(--navy);color:var(--cream);font-family:"Fredoka",sans-serif;font-weight:600;letter-spacing:.04em;padding:5px 14px;border-radius:999px;font-size:.8rem;border:1.5px solid rgba(255,243,224,.25)}

/* location card photos */
.loc-photo{width:100%;height:185px;object-fit:cover;display:block;border-radius:16px;border:3px solid var(--navy);margin-bottom:16px;box-shadow:4px 5px 0 rgba(0,0,0,.3)}

/* press card photo */
.press-photo{width:100%;border-radius:14px;margin:0 0 16px;border:3px solid var(--navy);display:block}

@media(max-width:900px){
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .photo-grid.two{grid-template-columns:1fr}
}
@media(max-width:560px){
  .photo-grid{grid-template-columns:1fr}
  .photo-grid .ph img{height:230px}
}

/* ============================================================
   V4 — SLEEK PASS (heavy trim: calm, minimal, less busy)
   Decorative layer below is disabled via overrides, not removed.
   ============================================================ */

/* kill the loud stuff */
.ticker{display:none}
.floaters{display:none}
body::after{display:none}          /* halftone page texture */
.card::after{display:none}         /* halftone card corner dots */

/* stop novelty animations */
.hero .bubble.pink{animation:none} /* neon flicker */
.hero-badge{animation:none}
.sparkle{animation:none}
.btn:hover{animation:none;transform:translateY(-2px)}
.reveal.in .chip,.reveal.in .eyebrow{animation:none}

/* straighten everything */
.hero-photo{transform:none!important}
.card .chip{transform:none;box-shadow:none}
.photo-grid .ph:nth-child(odd),.photo-grid .ph:nth-child(even){transform:none}
.photo-grid .ph{border-width:2px;box-shadow:0 14px 34px rgba(0,0,0,.4)}
.photo-grid .ph:hover img{transform:scale(1.03)}
.loc-photo{box-shadow:0 10px 26px rgba(0,0,0,.35)}

/* quieter background + cleaner cards */
.lava-bg{opacity:.45}
.site-header{backdrop-filter:blur(14px)}

/* breathing room */
.sec-head{margin-bottom:40px}
.lead{max-width:640px}

/* ============================================================
   V5 — SLEEK NAV (slimmer header, no pills, quiet CTA)
   ============================================================ */
.open-pill{display:none!important}
.nav{height:96px}
.brand img{height:76px}
.nav-links{gap:30px}
.nav-links > a,.drop-toggle{font-size:.95rem;font-weight:500;letter-spacing:.01em}
.nav-links > a.active::after{height:2px;bottom:-6px;background:var(--teal)}
.nav-cta{
  background:transparent;border:1px solid rgba(255,243,224,.28);color:var(--cream);
  box-shadow:none;padding:8px 18px;font-size:.88rem;font-weight:600;
}
.nav-cta:hover{border-color:var(--teal);color:var(--teal);background:transparent;box-shadow:none}
.drop-menu{border-radius:12px;padding:6px}
.drop-menu a{border-radius:8px;font-weight:500}
@media(max-width:900px){
  .nav-links{inset:96px 0 auto 0}
  .nav-links > a,.drop-toggle{font-size:1rem}
}

/* ============================================================
   V5 — HERO: tropical greenery background
   ============================================================ */
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/photos/hero-jungle.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,rgba(14,11,20,.84) 0%,rgba(14,11,20,.58) 45%,rgba(14,11,20,.18) 100%),
             linear-gradient(to bottom,rgba(14,11,20,.15),rgba(14,11,20,.9));
}
.hero .wrap{position:relative;z-index:1}

/* ============================================================
   V6 — SECTION BACKGROUNDS (pop art · kava · neon greenery)
   ============================================================ */
.bg-jungle{
  background:linear-gradient(rgba(14,11,20,.84),rgba(14,11,20,.88)),
             url("assets/photos/bg-jungle-pop.jpg") center/cover no-repeat!important;
}
.bg-kava{
  background:linear-gradient(rgba(14,11,20,.86),rgba(14,11,20,.94)),
             url("assets/photos/bg-kava-shell.jpg") center/cover no-repeat;
}
.bg-neon{
  background:linear-gradient(rgba(14,11,20,.72),rgba(14,11,20,.92)),
             url("assets/photos/bg-neon-leaves.jpg") center/cover no-repeat;
}
.bg-neon-card{
  background:linear-gradient(rgba(14,11,20,.78),rgba(14,11,20,.84)),
             url("assets/photos/bg-neon-leaves.jpg") center/cover no-repeat!important;
}

/* V7 — POP ART VISIT US BUTTON (teal comic) */
.nav-cta{
  background:var(--teal);color:#052b2e;
  border:3px solid var(--cream);border-radius:100px;
  padding:12px 26px;font-family:"Fredoka",sans-serif;
  font-weight:800;font-size:.95rem;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:5px 5px 0 var(--pink);transform:rotate(1.5deg);
}
.nav-cta:hover{
  background:var(--teal);color:#052b2e;border-color:var(--cream);
  box-shadow:2px 2px 0 var(--pink);transform:rotate(0deg) translate(2px,2px);
}

/* V7 — HERO "OPEN DAILY" BADGE (pop art corner burst) */
.hero-badge{
  width:118px;height:118px;top:-26px;right:-26px;left:auto;bottom:auto;
  background:var(--yellow);color:#1a1430;
  border:3px solid #1a1430;border-radius:50%;
  font-family:"Fredoka",sans-serif;font-weight:800;font-size:1.02rem;
  letter-spacing:.06em;line-height:1.15;text-align:center;
  display:flex;align-items:center;justify-content:center;
  box-shadow:5px 5px 0 var(--pink);
  transform:rotate(10deg);animation:none;z-index:3;
}
@media(max-width:900px){
  .hero-badge{width:92px;height:92px;top:-18px;right:-14px;font-size:.82rem;box-shadow:4px 4px 0 var(--pink)}
}
.hero-photo{overflow:visible}
.hero-photo img{border-radius:calc(var(--radius-lg) - 3px)}

/* V7 — POP ART STICKER ACCENTS */
.pop-rel{position:relative}
.pop-sticker{position:absolute;pointer-events:none;z-index:4;filter:drop-shadow(0 10px 18px rgba(0,0,0,.4))}
@media(max-width:900px){.pop-sticker{display:none}}
/* V7 fix — stickers keep natural ratio (override .hero-photo img sizing) */
img.pop-sticker{height:auto!important;object-fit:contain!important;border-radius:0!important}

/* ============================================================
   V8 — DISTINCT MENU CATEGORY PANELS
   Each category becomes its own color-coded card so sections
   read as clearly separate menus.
   ============================================================ */
.menu-cat{position:relative;border-radius:22px;padding:26px 28px 16px;margin-bottom:38px;
  border:1.5px solid rgba(255,243,224,.12);border-top:5px solid var(--mc,var(--teal));
  background:linear-gradient(160deg,var(--mc-bg,rgba(255,243,224,.04)),rgba(255,243,224,.02) 55%)}
.menu-cat[data-cat="coffee"]{--mc:var(--yellow);--mc-bg:rgba(255,210,63,.08)}
.menu-cat[data-cat="build"]{--mc:var(--teal);--mc-bg:rgba(79,208,218,.08)}
.menu-cat[data-cat="cocktails"]{--mc:var(--pink);--mc-bg:rgba(255,46,154,.08)}
.menu-cat[data-cat="sodas"]{--mc:var(--coral);--mc-bg:rgba(255,122,69,.08)}
.menu-cat[data-cat="shots"]{--mc:var(--purple);--mc-bg:rgba(154,92,255,.09)}
.menu-cat[data-cat="booch"]{--mc:var(--green-lt);--mc-bg:rgba(95,201,126,.08)}
.menu-cat[data-cat="munchies"]{--mc:var(--yellow);--mc-bg:rgba(255,210,63,.08)}
.menu-cat[data-cat="happy"]{--mc:var(--pink);--mc-bg:rgba(255,46,154,.08)}
.menu-cat h3{color:var(--mc,var(--teal));text-shadow:none;display:inline-block;
  padding:5px 18px;border-radius:999px;font-size:1.22rem;margin-bottom:10px;
  background:rgba(18,32,63,.55);border:1.5px solid var(--mc,var(--teal))}
.menu-cat .cat-note{margin-bottom:16px}
.menu-cat .menu-item:last-of-type{border-bottom:none}
.menu-item .mi-price{color:var(--mc,var(--teal))}
@media(max-width:900px){.menu-cat{padding:20px 18px 10px}}

/* ============================================================
   V9 — POP-ART SOCIAL ICONS
   Footer social links become pop-art sticker icons.
   ============================================================ */
.social a{background:none;border:none;width:44px;height:44px;padding:0}
.social a:hover{background:none;transform:translateY(-3px) rotate(-6deg)}
.social a img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.35))}

/* ============================================================
   V10 — AUDIT FIX & POLISH PASS
   (impeccable audit + taste-skill: responsive, a11y, polish)
   ============================================================ */
/* P0: footer grid must collapse on small screens (late 4-col
   override above was winning over the old media queries) */
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:620px){.footer-grid{grid-template-columns:1fr;gap:26px}}

/* P1: visible keyboard focus everywhere, brand teal ring */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-color:var(--yellow)}

/* P1: comprehensive reduced-motion support */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .lava-bg .b1,.lava-bg .b2,.lava-bg .b3{animation:none!important}
}

/* Polish: smooth anchor scrolling + brand text selection */
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
::selection{background:var(--pink);color:#fff}

/* Menu pages: tighter desktop layout to cut empty space.
   Long sections get items in 2 columns; short sections pair up
   side by side (sodas+shots, booch+munchies). */
@media(min-width:901px){
  .menu-cat{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:start}
  .menu-cat>h3,.menu-cat>.cat-note{grid-column:1/-1}
  .menu-cat .menu-item{align-self:start}
  .menu-cat .menu-item:nth-last-of-type(2){border-bottom:none}
  .wrap:has(>.menu-cat[data-cat]){display:grid;grid-template-columns:1fr 1fr;column-gap:28px;align-items:start}
  .wrap>.menu-cat[data-cat]{grid-column:1/-1}
  .wrap>.menu-cat[data-cat="sodas"],.wrap>.menu-cat[data-cat="shots"]{
    grid-column:auto;display:block}
  /* booch + munchies: full width, items in a single column */
  .wrap>.menu-cat[data-cat="booch"],.wrap>.menu-cat[data-cat="munchies"]{display:block}
  .wrap>.menu-cat[data-cat="sodas"] .menu-item:nth-last-of-type(2),
  .wrap>.menu-cat[data-cat="shots"] .menu-item:nth-last-of-type(2),
  .wrap>.menu-cat[data-cat="booch"] .menu-item:nth-last-of-type(2),
  .wrap>.menu-cat[data-cat="munchies"] .menu-item:nth-last-of-type(2){
    border-bottom:1px dashed rgba(255,243,224,.14)}
}

/* ============================================================
   V11 — DRINK PHOTO STRIP
   Auto-scrolling marquee of drink photos from the old site
   gallery. Pauses on hover; static scrollable row when the
   user prefers reduced motion.
   ============================================================ */
.drink-strip{overflow:hidden;padding:34px 0;position:relative}
.drink-strip::before,.drink-strip::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.drink-strip::before{left:0;background:linear-gradient(90deg,var(--ink,#12111f),transparent)}
.drink-strip::after{right:0;background:linear-gradient(-90deg,var(--ink,#12111f),transparent)}
.drink-track{display:flex;gap:18px;width:max-content;animation:drinkScroll 45s linear infinite}
.drink-strip:hover .drink-track{animation-play-state:paused}
.drink-track img{height:230px;width:auto;border-radius:16px;object-fit:cover;
  border:2px solid rgba(255,243,224,.12);box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .25s ease}
.drink-track img:hover{transform:scale(1.04) rotate(-1deg)}
@keyframes drinkScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){.drink-track img{height:160px}}
@media(prefers-reduced-motion:reduce){
  .drink-track{animation:none;width:auto;overflow-x:auto}
  .drink-strip{overflow-x:auto}
  .drink-track .dup{display:none}
}

/* ============================================================
   V12 — DESIGN TOKEN SYSTEM & POLISH
   (10-list items 1, 2, 4, 5, 6, 7: type scale, color tokens,
   8px spacing rhythm, interactive states, card + motion polish)
   ============================================================ */
:root{
  /* type scale (strict): 12 / 14 / 16 / 17 / 20 / 28 / 40 / 56+ */
  --fs-xs:.75rem;    /* 12 - fine print */
  --fs-sm:.875rem;   /* 14 - captions, meta */
  --fs-base:1.0625rem; /* 17 - body */
  --fs-md:1.25rem;   /* 20 - lead */
  --fs-lg:1.75rem;   /* 28 - h3 */
  --fs-xl:2.5rem;    /* 40 - h2 */
  --fs-2xl:3.5rem;   /* 56 - h1 */
  --lh-tight:1.05;--lh-head:1.2;--lh-body:1.6;
  /* 8px spacing scale */
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;
  --sp-6:48px;--sp-8:64px;--sp-10:80px;--sp-12:96px;
  /* color tints/shades (derived from brand palette) */
  --pink-dk:#b81e6e;--pink-tint:rgba(255,46,154,.16);
  --teal-dk:#2a9aa3;--teal-tint:rgba(79,208,218,.14);
  --coral-dk:#c4502a;--coral-tint:rgba(255,122,69,.14);
  --yellow-tint:rgba(255,210,63,.16);
  /* semantic */
  --success:#5fc97e;--warning:#ffd23f;--danger:#ff5d5d;--info:#4fd0da;
  /* elevation + motion */
  --shadow-sm:0 4px 14px rgba(0,0,0,.3);
  --shadow-hover:0 24px 60px rgba(0,0,0,.5);
  --ease:cubic-bezier(.2,.7,.3,1);--t-fast:150ms;--t-med:220ms;
}

/* Item 1 — body text 17px / 1.6 for readability */
body{font-size:var(--fs-base);line-height:var(--lh-body)}
.lead{line-height:1.62}
h1,h2,h3{line-height:var(--lh-tight)}
.menu-item .mi-desc,.cat-note,.hub-card p{line-height:1.5}

/* Item 2 — AA contrast: brighter placeholder + dim text floor */
.menu-search::placeholder,input::placeholder,textarea::placeholder{color:rgba(233,220,198,.66)}

/* Item 4 — consistent vertical rhythm: 96px desktop / 64px mobile */
.section{padding:var(--sp-12) 0}
.section-sm{padding:var(--sp-8) 0}
@media(max-width:700px){
  .section{padding:var(--sp-8) 0}
  .section-sm{padding:var(--sp-6) 0}
}

/* Item 5 — standardized interactive states */
.btn{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),opacity var(--t-fast)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
p a,.lead a,li a{color:var(--teal);border-bottom:1px solid rgba(79,208,218,.35);transition:color var(--t-fast),border-color var(--t-fast)}
p a:hover,.lead a:hover,li a:hover{color:var(--yellow);border-color:var(--yellow)}
input,select,textarea{transition:border-color var(--t-fast),box-shadow var(--t-fast)}

/* Item 6 — card polish: consistent hover elevation */
.card,.hub-card{transition:transform var(--t-med) var(--ease),border-color var(--t-med),box-shadow var(--t-med)}
.card:hover{box-shadow:var(--shadow-hover)}
.hub-card:hover{box-shadow:var(--shadow-hover)}
.press-photo{border-radius:12px}

/* Item 7 — motion: keep everything under 400ms (all site
   transitions are 120-250ms; reveal + reduced-motion in V10) */

/* ============================================================
   V13 — CINEMATIC HERO (chosen layout, option 2)
   Full-bleed drink photo, gradient overlay for legibility,
   centered headline + dual CTAs.
   ============================================================ */
.hero-cine{min-height:min(88vh,860px);display:grid;place-items:center;text-align:center;
  padding:110px 0 120px;overflow:hidden}
.hero-cine-bg{position:absolute;inset:0;z-index:0;
  background:url("assets/photos/drink-06.webp") 78% 30%/cover no-repeat;
  animation:heroZoom 24s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-cine::after{content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(58% 58% at 50% 52%, rgba(14,11,20,.7), transparent 100%),
    linear-gradient(180deg,rgba(14,11,20,.82),rgba(14,11,20,.68) 45%,var(--ink) 97%)}
.hero-cine-inner{position:relative;z-index:2;max-width:840px}
.hero-cine-inner .lead{color:var(--cream);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-cine-inner h1{font-size:clamp(3.2rem,8.5vw,6.4rem);margin:14px 0 20px}
.hero-cine-inner .lead{margin:0 auto 34px;max-width:56ch}
.hero-cine-inner .hero-cta{justify-content:center}
.hero-cine-badge{position:absolute;top:-8px;right:-30px;animation:spin-badge 18s linear infinite}
@media(max-width:900px){
  .hero-cine{padding:80px 0 90px;min-height:78vh}
  .hero-cine-badge{display:none}
}
@media(prefers-reduced-motion:reduce){.hero-cine-bg{animation:none}}

/* ============================================================
   V14 — IMAGERY CONSISTENCY (10-list item 8)
   One photographic treatment across all content photos:
   gentle saturation lift + consistent radius & border.
   ============================================================ */
.ph img,.press-photo,.drink-track img,.hero-photo img{
  filter:saturate(1.06) contrast(1.02)}
.press-photo{border:2px solid rgba(255,243,224,.12)}
/* tap targets: keep all footer links comfortably tappable */
.site-footer .footer-grid a{display:block;padding:6px 0;min-height:32px}
.social a{min-width:44px;min-height:44px}

/* ============================================================
   V15 — PRIVATE EVENTS PAGE (events-private.html)
   Video frame + booking-form extras. Appended; nothing above
   was modified.
   ============================================================ */
.event-video{max-width:880px;margin:0 auto}
.event-video video{display:block;width:100%;height:auto;border-radius:22px;
  border:2px solid rgba(255,243,224,.14);box-shadow:var(--shadow-hover,0 18px 44px rgba(0,0,0,.45));
  background:var(--panel)}
.field-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
@media(max-width:560px){.field-2col{grid-template-columns:1fr}}
.check-group{border:1px solid rgba(255,243,224,.14);border-radius:14px;
  padding:14px 16px 12px;margin-bottom:18px}
.check-group legend{font-family:var(--f-head);font-size:.92rem;color:var(--cream);
  padding:0 8px}
.check-group .check{display:inline-flex;align-items:center;gap:8px;
  margin:4px 18px 6px 0;min-height:32px;cursor:pointer;color:var(--cream-dim);
  font-size:.97rem}
.check-group .check input{width:18px;height:18px;accent-color:var(--pink);cursor:pointer}
.check-group .check:hover{color:var(--cream)}

/* ============================================================
   V16 — ABOUT PAGE (about.html)
   Story split, kava-tender cards, crew location heads.
   Appended; nothing above was modified.
   ============================================================ */
.about-story{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.about-story .hero-photo img{height:460px}
@media(max-width:900px){
  .about-story{grid-template-columns:1fr;gap:34px}
  .about-story .hero-photo img{height:340px}
}
.crew-loc{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin:42px 0 20px;padding-bottom:10px;border-bottom:1px dashed rgba(255,243,224,.16)}
.crew-loc h3{margin:0}
.crew-note{color:var(--cream-dim);font-size:.92rem}
.tender{text-align:center}
.tender h3{font-family:var(--f-head);font-weight:700;font-size:1.15rem;color:var(--cream)}
.t-avatar{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  font-size:2.1rem;margin:0 auto 14px;border:3px solid var(--navy);
  box-shadow:4px 5px 0 rgba(0,0,0,.3)}
.av-pink{background:rgba(255,46,154,.22)}
.av-teal{background:rgba(79,208,218,.2)}
.av-yellow{background:rgba(255,210,63,.2)}
.av-coral{background:rgba(255,122,69,.22)}
.av-purple{background:rgba(154,92,255,.22)}
.t-role{font-family:var(--f-head);font-weight:600;font-size:.85rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);margin:2px 0 10px}
.t-tag{color:var(--cream-dim);font-size:.93rem;font-style:italic}
@media(max-width:700px){.tender-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tender-grid{grid-template-columns:1fr}}

/* ============================================================
   V17 — FAINT PHOTO BACKGROUNDS PER MENU CATEGORY
   Each .menu-cat panel gets a very faint, relevant photo behind
   its items via ::before. Appended; nothing above was modified.
   ============================================================ */
.menu-cat::before{content:"";position:absolute;inset:0;border-radius:20px;
  background-size:cover;background-position:center;
  opacity:var(--mbg-op,.09);filter:saturate(.55);pointer-events:none}
.menu-cat>:not(.pop-sticker){position:relative;z-index:1}
.menu-cat[data-cat="coffee"]::before{background-image:url("assets/photos/drink-06.webp")}
.menu-cat[data-cat="build"]::before{background-image:url("assets/photos/bg-kava-shell.jpg")}
.menu-cat[data-cat="cocktails"]::before{background-image:url("assets/photos/drink-02.jpg")}
.menu-cat[data-cat="sodas"]::before{background-image:url("assets/photos/drink-03.jpg")}
.menu-cat[data-cat="shots"]::before{background-image:url("assets/photos/drink-09.jpg")}
.menu-cat[data-cat="booch"]::before{background-image:url("assets/photos/kratom-taps.webp")}
.menu-cat[data-cat="munchies"]::before{background-image:url("assets/photos/bar-vibe.webp")}
.menu-cat[data-cat="happy"]::before{background-image:url("assets/photos/happy-hour.jpg")}
.menu-cat[data-cat="merch"]::before{background-image:url("assets/photos/mural-1.jpg")}
.menu-cat[data-cat="takehome"]::before{background-image:url("assets/photos/bg-kava-shell.jpg")}
.menu-cat[data-cat="togo"]::before{background-image:url("assets/photos/drink-08.jpg")}

/* ============================================================
   V18 — CUSTOM POP-ART SECTION BACKGROUNDS (Higgsfield)
   On-brand illustrated backgrounds per menu category, replacing
   the V17 photos. Appended; nothing above was modified.
   ============================================================ */
.menu-cat::before{opacity:.14;filter:none}
.menu-cat[data-cat="coffee"]::before{background-image:url("assets/photos/menu-bg-coffee.webp")}
.menu-cat[data-cat="build"]::before{background-image:url("assets/photos/menu-bg-build.webp")}
.menu-cat[data-cat="cocktails"]::before{background-image:url("assets/photos/menu-bg-cocktails.webp")}
.menu-cat[data-cat="sodas"]::before{background-image:url("assets/photos/menu-bg-sodas.webp")}
.menu-cat[data-cat="shots"]::before{background-image:url("assets/photos/menu-bg-shots.webp")}
.menu-cat[data-cat="booch"]::before{background-image:url("assets/photos/menu-bg-booch.webp")}
.menu-cat[data-cat="munchies"]::before{background-image:url("assets/photos/menu-bg-munchies.webp")}
.menu-cat[data-cat="happy"]::before{background-image:url("assets/photos/menu-bg-happy.webp")}

/* ============================================================
   V19 — SOFTER MENU BACKGROUNDS
   Fade the V18 illustrated backgrounds further for readability.
   Appended; nothing above was modified.
   ============================================================ */
.menu-cat::before{opacity:.07}

/* ============================================================
   V20 — SODAS + SHOTS FULL-WIDTH STACKED
   Dirty Sodas and Shots become two full-width rows (1 column),
   matching booch/munchies. Appended; nothing above was modified.
   ============================================================ */
@media(min-width:901px){
  .wrap>.menu-cat[data-cat="sodas"],.wrap>.menu-cat[data-cat="shots"]{grid-column:1/-1}
}

/* V20b — sodas/shots: full-width row, items back in 2 columns */
@media(min-width:901px){
  .wrap>.menu-cat[data-cat="sodas"],.wrap>.menu-cat[data-cat="shots"]{
    display:grid;grid-template-columns:1fr 1fr;column-gap:48px;align-items:start}
}

/* ============================================================
   V21 — ANCHOR SCROLL OFFSET
   Anchored sections (e.g. #kavatenders) land below the sticky
   header. Appended; nothing above was modified.
   ============================================================ */
section[id]{scroll-margin-top:90px}

/* ============================================================
   V22 — DEDICATED LOCATION PAGES
   Styles for location-san-marco / location-mandarin /
   location-beaches heroes, feature grids & the Explore
   Location button on locations.html. Appended; nothing above
   was modified.
   ============================================================ */
.loc-quick{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:20px;font-size:.98rem;color:var(--cream-dim)}
.loc-quick a{color:var(--teal)}
.feat-card{text-align:center;padding:28px 20px}
.feat-card h3{font-size:1.08rem;margin:0 0 8px}
.feat-card p{margin:0;font-size:.94rem;color:var(--cream-dim)}
.feat-ic{display:block;font-size:2.1rem;line-height:1;margin-bottom:12px}
.btn-explore{display:block;width:max-content;margin-top:14px}

/* ============================================================
   V23 — VISIT US POP-ART STICKER NAV CTA
   Replaces the teal Visit Us button with the pop-art sticker
   (assets/photos/pop-visitus.webp). Appended; nothing above
   was modified.
   ============================================================ */
.nav-cta-sticker{display:inline-flex;align-items:center;padding:0;background:none;border:none;box-shadow:none;line-height:0}
.nav-cta-sticker img{height:58px;width:auto;transform:rotate(-6deg);filter:drop-shadow(0 3px 8px rgba(0,0,0,.45));transition:transform .18s ease}
.nav-cta-sticker:hover img{transform:rotate(2deg) scale(1.12)}
@media(max-width:900px){.nav-cta-sticker{margin-top:8px}.nav-cta-sticker img{height:64px}}

/* ============================================================
   V24 — MENU HUB POP-ART TEXT STICKERS
   ============================================================ */
.hub-sticker{background:none;border:none;box-shadow:none;padding:18px 10px;display:flex;align-items:center;justify-content:center}
.hub-sticker img{width:100%;max-width:290px;height:auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45));transition:transform .2s ease}
.hub-sticker:nth-child(odd) img{transform:rotate(-4deg)}
.hub-sticker:nth-child(even) img{transform:rotate(3deg)}
.hub-sticker:hover img{transform:rotate(0) scale(1.08)}
.hub-sticker:hover{background:none;border:none;box-shadow:none;transform:none}

/* ============================================================
   V25 — NEON HEADER LOGO 33% BIGGER
   ============================================================ */
.brand img{height:101px}

/* ============================================================
   V26 — REVERT HEADER LOGO SIZE + MANDARIN HERO NEON SIGN
   ============================================================ */
.brand img{height:76px}
.hero-neon-sign{display:block;margin:0 auto 10px;width:min(360px,80vw);height:auto}

/* ============================================================
   V27 — MANDARIN HERO VIDEO BACKGROUND
   ============================================================ */
.loc-hero-video{position:relative;overflow:hidden}
.loc-hero-video .loc-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.loc-hero-video .loc-hero-shade{position:absolute;inset:0;background:rgba(0,0,0,.55);z-index:1}
.loc-hero-video .wrap{position:relative;z-index:2}

/* ============================================================
   V28 — MANDARIN MENU CTA MOCKTAIL BACKGROUND
   ============================================================ */
.menu-cta-mocktail{background:linear-gradient(rgba(12,10,24,.78),rgba(12,10,24,.78)),url("assets/photos/menu-bg-cocktails.webp") center/cover no-repeat!important}

/* ============================================================
   V29 — LOCATION HERO: CINEMATIC + GLASS INFO BAR
   ============================================================ */
.loc2-hero{position:relative;min-height:600px;display:flex;flex-direction:column;overflow:hidden}
.loc2-hero .loc-hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.loc2-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(7,20,23,.55) 0%,rgba(7,20,23,.25) 40%,rgba(7,20,23,.88) 100%)}
.loc2-mid{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 20px 26px;text-align:center}
.loc2-mid .hero-neon-sign{width:min(560px,88vw);margin:0;filter:drop-shadow(0 0 30px rgba(251,30,194,.35))}
.loc2-tag{margin-top:16px;font-family:var(--f-display);font-size:.8rem;color:var(--cream);letter-spacing:2.5px;text-shadow:0 2px 10px rgba(0,0,0,.8)}
.loc2-tag i{font-style:normal;color:var(--yellow)}
.loc2-bar{position:relative;z-index:2;margin:26px auto 34px;width:min(1000px,94%);display:flex;align-items:center;background:rgba(12,42,48,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(69,219,224,.35);border-radius:100px;padding:14px 14px 14px 28px}
.loc2-cell{flex:1;padding:0 18px;border-right:1px solid rgba(255,243,224,.15)}
.loc2-cell:last-of-type{border-right:none}
.loc2-cell b{display:block;font-family:var(--f-display);font-size:.58rem;color:var(--teal);letter-spacing:1.5px;margin-bottom:3px}
.loc2-cell span{font-size:.88rem;color:var(--cream)}
.loc2-cell a{color:var(--cream);text-decoration:none}
.loc2-cell a:hover{color:var(--teal)}
.loc2-actions{display:flex;gap:10px;margin-left:14px}
.loc2-actions .btn{white-space:nowrap}
@media(max-width:860px){
  .loc2-hero{min-height:520px}
  .loc2-mid{padding-top:84px}
  .loc2-bar{flex-direction:column;border-radius:22px;gap:12px;padding:18px;align-items:stretch;text-align:center}
  .loc2-cell{border-right:none;padding:0}
  .loc2-actions{margin-left:0;justify-content:center;flex-wrap:wrap}
}

/* ============================================================
   V29 — LOCATION INFO STRIP (thin bar under hero)
   ============================================================ */
.loc-info-strip{padding:14px 0;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.loc-info-strip .loc-quick{margin-top:0;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center}

/* ============================================================
   V30 — LOCATIONS HERO POP STICKER
   ============================================================ */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero-vibe-sticker{display:block;margin:0 auto;width:min(520px,86vw);height:auto;filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}

/* ============================================================
   V31 — LAB TESTED CARD, LOGO PINK
   ============================================================ */
.lab-tested-card{background:linear-gradient(120deg,rgba(255,46,154,.32),rgba(255,46,154,.18))!important;border-color:var(--pink)!important}
.lab-tested-card .lead{color:var(--cream)}

/* ============================================================
   V32 — POP-ART CONTACT ICONS + OPEN DAILY HERO STICKER
   ============================================================ */
.loc-meta .ic-img{flex:0 0 26px;width:26px;height:auto;margin-top:0;filter:drop-shadow(0 2px 5px rgba(0,0,0,.35))}
.hero-badge-sticker{position:absolute;top:-30px;right:-22px;width:150px;height:auto;z-index:3;transform:rotate(8deg);filter:drop-shadow(0 8px 18px rgba(0,0,0,.45))}
@media (max-width:720px){
  .hero-badge-sticker{width:104px;top:-20px;right:-12px}
}

/* V32.1 — OPEN DAILY sticker sized/positioned like old badge */
.hero-badge-sticker{width:118px;top:-26px;right:-26px;transform:rotate(10deg)}
@media(max-width:900px){
  .hero-badge-sticker{width:92px;top:-18px;right:-14px}
}

/* V32.2 — badge sticker beats .hero-photo img sizing; larger loc-card titles */
.hero-photo img.hero-badge-sticker{width:118px;height:auto;object-fit:contain;border-radius:0;position:absolute;top:-26px;right:-26px;z-index:3;transform:rotate(10deg);box-shadow:none}
@media(max-width:900px){
  .hero-photo img.hero-badge-sticker{width:92px;top:-18px;right:-14px}
}
.loc-card h3{font-size:1.65rem}

/* V32.3 — OPEN DAILY sticker: bottom-left, a bit larger */
.hero-photo img.hero-badge-sticker{width:150px;top:auto;right:auto;bottom:-26px;left:-26px;transform:rotate(-8deg)}
@media(max-width:900px){
  .hero-photo img.hero-badge-sticker{width:110px;top:auto;right:auto;bottom:-18px;left:-14px}
}

/* ============================================================
   V33 — ABOUT: LOCATION HUB STICKERS ON CREW HEADINGS
   ============================================================ */
.crew-loc{align-items:center}
.crew-loc-sticker{width:170px;height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.4))}
@media(max-width:720px){.crew-loc-sticker{width:130px}}

/* V33.1 — normalize crew sticker size by height */
.crew-loc-sticker{width:auto;height:120px}
@media(max-width:720px){.crew-loc-sticker{width:auto;height:96px}}

/* V34 — ABOUT: pop-art bubble titles on botanical cards */
.botanical-bubble{font-size:1.7rem;display:inline-block}

/* V35 — EVENT LOCATION TAGS + MANDARIN FEATURE PHOTO CARDS */
.event-row{grid-template-columns:120px 1fr auto auto}
.event-loc{font-family:var(--f-head);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 13px;border-radius:999px;border:1.5px solid;white-space:nowrap;justify-self:end}
.event-loc:empty{display:none}
.event-loc.loc-sanmarco{color:var(--teal);border-color:rgba(79,208,218,.55)}
.event-loc.loc-mandarin{color:var(--pink);border-color:rgba(255,46,154,.55)}
.event-loc.loc-jaxbeach{color:var(--yellow);border-color:rgba(255,210,63,.55)}
@media (max-width:640px){.event-row{grid-template-columns:64px 1fr}.event-loc{grid-column:2;justify-self:start}}
.feat-photo{background-size:cover;background-position:center}

/* V36 — KAVA TENDER PHOTO CARDS */
.tender{padding:14px 14px 20px}
.t-photo{width:100%;aspect-ratio:4/5;border-radius:16px;overflow:hidden;margin-bottom:14px;background:linear-gradient(160deg,rgba(79,208,218,.16),rgba(255,46,154,.12));display:flex;align-items:center;justify-content:center}
.t-photo img{width:100%;height:100%;object-fit:cover;display:block}
.t-photo-empty{font-size:2.2rem;opacity:.75}

/* V37 — POP-ART FEATURE CARD ICONS */
img.feat-ic{width:72px;height:72px;object-fit:contain;font-size:0;filter:drop-shadow(0 5px 12px rgba(0,0,0,.4))}

/* ============================================================
   V38 — LOCATION ADDRESS + HOURS SIDE STICKERS (Hangout Spot)
   ============================================================ */
.loc-side-stk{width:238px;top:50px}
.loc-side-stk.stk-l{left:calc(50% - 620px)}
.loc-side-stk.stk-r{right:calc(50% - 620px)}
@media(max-width:1250px){.loc-side-stk{display:none}}

/* ============================================================
   V39 — HANGOUT SPOT CARD ICONS CENTERED ABOVE TEXT
   ============================================================ */
.feat-card img.feat-ic{display:block;margin:0 auto 12px}
.feat-card{text-align:center}

/* ============================================================
   V40 — SLOGAN MARQUEE (replaces location info strip)
   ============================================================ */
.slogan-strip{overflow:hidden;padding:14px 0;background:rgba(255,255,255,.04);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.slogan-track{display:inline-flex;white-space:nowrap;animation:slogan-drift 30s linear infinite;will-change:transform}
.slogan-half{display:inline-flex;white-space:nowrap}
.slogan-half span{display:inline-block;padding:0 34px;font-family:var(--f-head);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:3px;color:var(--yellow)}
.slogan-half .sep{color:var(--pink)}
@keyframes slogan-drift{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.slogan-track{animation:none}}

/* ============================================================
   V41 — HANGOUT SECTION TITLES ON ONE LINE
   ============================================================ */
h2.hangout-title{white-space:nowrap;font-size:clamp(2rem,4.4vw,3.3rem)}
@media(max-width:820px){h2.hangout-title{font-size:5.6vw}}

/* ============================================================
   V42 — EVENTS H1 "WHAT'S GOING ON" ON ONE LINE
   ============================================================ */
h1.oneline-title{white-space:nowrap;font-size:clamp(2rem,7vw,5.2rem)}

/* ============================================================
   V43 — LOCATIONS HERO BANNER STICKER (grid-width, shorter)
   ============================================================ */
.hero-vibe-banner{width:min(880px,84vw);max-width:none;position:relative;left:50%;transform:translateX(-50%)}

/* ============================================================
   V44 — (superseded) San Marco feature cards now use the
   Mandarin .feat-photo background-image card pattern
   ============================================================ */

/* ============================================================
   V45 — PER-LOCATION HOVER HIGHLIGHT COLORS
   San Marco = blue, Jax Beach = pink, Mandarin = green
   ============================================================ */
body.loc-page-sanmarco .card:hover,
body.loc-page-sanmarco .event-row:hover{border-color:rgba(111,216,255,.6)}
body.loc-page-beaches .card:hover,
body.loc-page-beaches .event-row:hover{border-color:rgba(255,46,154,.6)}
body.loc-page-mandarin .card:hover,
body.loc-page-mandarin .event-row:hover{border-color:rgba(95,201,126,.6)}

/* ============================================================
   V46 — POP ART BACKGROUNDS ON KAVA TENDER CARDS (per location)
   purple hue overlay keeps name/role readable
   ============================================================ */
body.loc-page-sanmarco .tender,.crew-sanmarco .tender{background:linear-gradient(rgba(23,18,38,.8),rgba(23,18,38,.86)),url("assets/photos/tender-bg-sanmarco.jpg") center/cover no-repeat}
body.loc-page-mandarin .tender,.crew-mandarin .tender{background:linear-gradient(rgba(23,18,38,.8),rgba(23,18,38,.86)),url("assets/photos/tender-bg-mandarin.jpg") center/cover no-repeat}
body.loc-page-beaches .tender,.crew-beaches .tender{background:linear-gradient(rgba(23,18,38,.86),rgba(23,18,38,.86) 62%,rgba(23,18,38,.4)),url("assets/photos/tender-bg-beaches.jpg") center/100% 100% no-repeat}

/* ============================================================
   V47 — FOOTER: DARK TROPICAL LEAVES PHOTO + INK-2 HUE
   ============================================================ */
.site-footer{background:linear-gradient(rgba(23,18,38,.88),rgba(23,18,38,.88)),url("assets/photos/footer-leaves.jpg") center/cover no-repeat}

/* ============================================================
   V48 — TENDER NAMES: ALL CAPS NEON SIGN TEXT (per location)
   ============================================================ */
.tender h3{text-transform:uppercase;letter-spacing:.07em}
body.loc-page-sanmarco .tender h3,.crew-sanmarco .tender h3{color:#6fd8ff;text-shadow:0 0 4px rgba(111,216,255,.85),0 0 12px rgba(111,216,255,.65),0 0 26px rgba(111,216,255,.4)}
body.loc-page-mandarin .tender h3,.crew-mandarin .tender h3{color:#5fc97e;text-shadow:0 0 4px rgba(95,201,126,.85),0 0 12px rgba(95,201,126,.65),0 0 26px rgba(95,201,126,.4)}
body.loc-page-beaches .tender h3,.crew-beaches .tender h3{color:#ff2e9a;text-shadow:0 0 4px rgba(255,46,154,.85),0 0 12px rgba(255,46,154,.65),0 0 26px rgba(255,46,154,.4)}

/* ============================================================
   V49 — INSTAGRAM FEED EMBED (location pages)
   ============================================================ */
.ig-feed-wrap{max-width:540px;margin:0 auto;border:1px solid rgba(255,243,224,.14);border-radius:22px;overflow:hidden;background:var(--panel)}
.ig-feed{display:block;width:100%;height:620px;border:0}
body.loc-page-sanmarco .ig-feed-wrap{border-color:rgba(111,216,255,.45)}
body.loc-page-mandarin .ig-feed-wrap{border-color:rgba(95,201,126,.45)}
body.loc-page-beaches .ig-feed-wrap{border-color:rgba(255,46,154,.45)}

/* ============================================================
   V50 — INSTAGRAM POST SLIDER (location pages)
   ============================================================ */
.ig-strip{overflow:hidden;padding:10px 0;position:relative}
.ig-strip::before,.ig-strip::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.ig-strip::before{left:0;background:linear-gradient(90deg,var(--ink,#12111f),transparent)}
.ig-strip::after{right:0;background:linear-gradient(-90deg,var(--ink,#12111f),transparent)}
.ig-track{display:flex;gap:18px;width:max-content;animation:drinkScroll 55s linear infinite}
.ig-strip:hover .ig-track{animation-play-state:paused}
.ig-track img{height:320px;width:320px;border-radius:16px;object-fit:cover;display:block;
  border:2px solid rgba(255,243,224,.12);box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .25s ease;filter:saturate(1.06) contrast(1.02)}
.ig-track a:hover img{transform:scale(1.04) rotate(-1deg)}
body.loc-page-sanmarco .ig-track img{border-color:rgba(111,216,255,.45)}
body.loc-page-mandarin .ig-track img{border-color:rgba(95,201,126,.45)}
body.loc-page-beaches .ig-track img{border-color:rgba(255,46,154,.45)}
@media(max-width:700px){.ig-track img{height:200px;width:200px}}
@media(prefers-reduced-motion:reduce){
  .ig-track{animation:none;width:auto;overflow-x:auto}
  .ig-strip{overflow-x:auto}
  .ig-track .dup{display:none}
}