/* ============================================================
   Exxotik Hookah
   Static luxury site · dark + gold · electric-coil hookah
   ============================================================ */

:root{
  --bg:            #0a0806;
  --bg-2:          #100d09;
  --bg-3:          #16120c;
  --panel:         #14110c;
  --text:          #f4ede1;
  --text-dim:      #c9bfae;
  --muted:         #948871;
  --line:          rgba(201,168,106,.16);
  --line-soft:     rgba(201,168,106,.09);

  --gold:          #c9a86a;
  --gold-bright:   #e4c98c;
  --gold-deep:     #a9834b;
  --gold-grad:     linear-gradient(135deg,#e6cd96 0%,#c9a86a 45%,#a9834b 100%);

  --serif:         "Playfair Display", Georgia, "Times New Roman", serif;
  --body:          "Cormorant Garamond", Georgia, serif;
  --sans:          "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap:          1240px;
  --pad:           clamp(20px, 5vw, 64px);
  --ease:          cubic-bezier(.22,1,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:clamp(1.05rem,.55vw + .95rem,1.22rem);
  font-weight:500;
  line-height:1.72;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:0; }
ul,ol{ list-style:none; }

/* ---------- layout helpers ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(88px,12vw,176px); position:relative; }

/* hairline rule with a centred gold diamond */
.rule{
  position:relative;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
  width:100%;
  margin-block:clamp(30px,4vw,52px);
}
.rule::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:6px; height:6px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 12px 1px rgba(201,168,106,.4);
}

/* fine film grain over the whole page */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > *{ position:relative; z-index:2; }

/* ---------- typography atoms ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:400;
  font-size:.74rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.4rem;
  display:inline-flex;
  align-items:center;
  gap:.7rem;
}
.eyebrow::before{
  content:"";
  display:inline-block;
  width:5px; height:5px;
  border-radius:50%;
  background:var(--gold-bright);
  box-shadow:0 0 8px var(--gold-bright);
  animation:eyebrowPulse 2.8s ease-in-out infinite;
}
@keyframes eyebrowPulse{
  0%, 100%{ opacity:.4; transform:scale(.85); }
  50%{ opacity:1; transform:scale(1.25); box-shadow:0 0 10px var(--gold-bright); }
}
.section-title{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.04;
  letter-spacing:-.01em;
  font-size:clamp(2.3rem,5.2vw,4.4rem);
  color:var(--text);
}
.script{
  font-style:italic;
  font-weight:500;
  background:linear-gradient(
    115deg,
    #c9a86a 0%,
    #f4ede1 20%,
    #ffd885 42%,
    #c9a86a 65%,
    #f2dfbe 82%,
    #cca96a 100%
  );
  background-size:240% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:goldSmokeShine 7s ease-in-out infinite;
  filter:drop-shadow(0 2px 14px rgba(201,168,106,.20));
  transition:filter .4s var(--ease);
}
.script:hover,
.section-title:hover .script,
.hero__title:hover .script{
  filter:drop-shadow(0 0 24px rgba(228,201,140,.6));
}
@keyframes goldSmokeShine{
  0%, 100%{ background-position:0% center; }
  50%{ background-position:100% center; }
}

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); white-space:nowrap; }
.btn--pill{
  position:relative;
  overflow:hidden;
  padding:1.05em 2.4em;
  border-radius:999px;
  background:var(--gold-grad);
  color:#241a0d;
  font-weight:500;
  font-size:.86rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 10px 40px -12px rgba(201,168,106,.5);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), filter .3s var(--ease);
}
.btn--pill::after{
  content:"";
  position:absolute;
  top:-50%; left:-75%;
  width:45%; height:200%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform:rotate(25deg);
  pointer-events:none;
  opacity:0;
}
.btn--pill:hover{ transform:translateY(-3px); box-shadow:0 20px 55px -14px rgba(201,168,106,.6); filter:brightness(1.06); }
.btn--pill:hover::after{
  animation:btnShimmer .85s var(--ease);
}
@keyframes btnShimmer{
  0%{ left:-75%; opacity:0; }
  35%{ opacity:1; }
  100%{ left:135%; opacity:0; }
}
.btn--link{
  padding:1.05em .2em;
  font-size:.82rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text);
  border-bottom:1px solid var(--gold);
  border-radius:0;
  transition:color .35s var(--ease), border-color .35s var(--ease), letter-spacing .35s var(--ease);
}
.btn--link:hover{ color:var(--gold-bright); letter-spacing:.2em; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:rgba(10,8,6,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(1rem, 2vw, 2rem); padding-block:.75rem;
}
.brand{ display:inline-flex; align-items:center; flex-shrink:0; }
.brand__logo{
  height:clamp(60px, 5.5vw, 84px); width:auto;
  display:block;
  filter:drop-shadow(0 6px 26px rgba(201,168,106,.32));
  transition:height .45s var(--ease), transform .5s var(--ease), filter .5s var(--ease);
  animation:hookahVapor 6s ease-in-out infinite alternate;
}
@keyframes hookahVapor{
  0%{ filter:drop-shadow(0 6px 22px rgba(201,168,106,.28)); }
  100%{ filter:drop-shadow(0 8px 32px rgba(228,201,140,.50)); }
}
.site-header.is-stuck .brand__logo{ height:56px; }
.brand:hover .brand__logo{ transform:translateY(-1px) scale(1.03); filter:drop-shadow(0 10px 30px rgba(228,201,140,.5)); }
.brand__text{ display:none; }           /* shown by onerror if logo file missing */
.brand--footer .brand__logo{ height:140px; }

.wordmark{
  font-family:var(--serif);
  font-size:1.4rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--text);
  white-space:nowrap;
  align-items:center;
}
.wordmark em{ font-style:italic; font-weight:500; color:var(--gold); margin-left:.3em; }
.nav{ display:flex; align-items:center; gap:clamp(0.65rem, 1.25vw, 1.6rem); margin-left:auto; }
.nav a{
  font-family:var(--sans);
  font-size:clamp(0.8rem, 0.85vw, 0.88rem);
  letter-spacing:.04em;
  color:var(--text-dim);
  white-space:nowrap;
  position:relative;
  padding-block:.3rem;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--gold); transition:width .4s var(--ease);
}
.nav a:hover{ color:var(--text); }
.nav a:hover::after{ width:100%; }
.header__cta{ padding:.7em 1.4em; font-size:.84rem; white-space:nowrap; flex-shrink:0; }

@media (max-width: 1200px) and (min-width: 981px) {
  .nav { gap: clamp(0.45rem, 0.9vw, 0.9rem); }
  .nav a { font-size: 0.78rem; letter-spacing: 0.02em; }
  .header__cta { padding: 0.65em 1.1em; font-size: 0.78rem; }
}

.nav-toggle{ display:none; width:34px; height:24px; position:relative; }
.nav-toggle span{
  position:absolute; left:0; height:1.5px; width:100%; background:var(--text);
  transition:transform .4s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span:nth-child(1){ top:2px; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ top:20px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-block:clamp(140px,18vh,220px) clamp(60px,10vh,120px);
  background:
    radial-gradient(120% 80% at 78% 30%, rgba(201,168,106,.10), transparent 60%),
    linear-gradient(180deg,#0c0a07 0%, var(--bg) 55%, #080604 100%);
  overflow:hidden;
}
/* hero background photo — drops behind the gradient.
   Swap images/hero.png (see index.html) to change it. */
.hero__media{
  position:absolute; inset:0; z-index:0;
  overflow:hidden;
  pointer-events:none;
  background-color:#0a0806;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}
.hero__media::after{
  content:"";
  position:absolute; inset:0;
  /* dark only on the left third — lets the skyline & guests read on the right */
  background:
    linear-gradient(102deg,
      rgba(6,5,3,.92) 0%,
      rgba(6,5,3,.62) 30%,
      rgba(6,5,3,.22) 55%,
      rgba(6,5,3,0) 78%),
    linear-gradient(180deg, rgba(6,5,3,0) 42%, rgba(6,5,3,.4) 82%, #080604 100%);
}
.hero__glow{
  position:absolute; right:-10%; top:8%; z-index:1;
  width:min(50vw,620px); aspect-ratio:1;
  background:radial-gradient(circle at center, rgba(228,201,140,.12), transparent 62%);
  filter:blur(20px);
  pointer-events:none;
  animation:ambientGlow 7s ease-in-out infinite alternate;
}
.hero__glow::before,
.hero__glow::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(48px);
}
.hero__glow::before{
  left:-35%; top:20%;
  width:85%; height:85%;
  background:radial-gradient(circle, rgba(204,169,106,.14) 0%, rgba(228,201,140,.05) 50%, transparent 72%);
  animation:smokeDrift1 12s ease-in-out infinite alternate;
}
.hero__glow::after{
  left:-10%; top:50%;
  width:75%; height:75%;
  background:radial-gradient(circle, rgba(235,208,150,.10) 0%, rgba(204,169,106,.03) 45%, transparent 70%);
  animation:smokeDrift2 15s ease-in-out infinite alternate;
}
@keyframes ambientGlow{
  0%{ opacity:.65; transform:scale(.95); }
  100%{ opacity:1.15; transform:scale(1.08); }
}
@keyframes smokeDrift1{
  0%{ transform:translate(0, 0) scale(0.92) rotate(0deg); opacity:.5; }
  50%{ transform:translate(-35px, -50px) scale(1.12) rotate(12deg); opacity:.85; }
  100%{ transform:translate(25px, -90px) scale(1.25) rotate(-8deg); opacity:.4; }
}
@keyframes smokeDrift2{
  0%{ transform:translate(0, 0) scale(1.08) rotate(0deg); opacity:.4; }
  50%{ transform:translate(45px, -40px) scale(0.96) rotate(-10deg); opacity:.8; }
  100%{ transform:translate(-25px, -80px) scale(1.2) rotate(15deg); opacity:.35; }
}
/* hero content hugs the left edge (breaks out of the centred .wrap) */
.hero .wrap{ max-width:none; padding-inline:clamp(20px,6vw,96px); }
.hero__inner{ position:relative; z-index:2; max-width:44rem; }
.hero__title{
  position:relative;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(3.3rem,9.5vw,7.8rem);
  line-height:.94;
  letter-spacing:-.02em;
  margin-bottom:clamp(1.4rem,3.4vw,2.2rem);
  transform-style:preserve-3d;
  transition:transform .22s cubic-bezier(0.2, 0, 0, 1), letter-spacing .6s var(--ease);
  will-change:transform;
}
.hero__brand{
  display:block;
  background:linear-gradient(
    115deg,
    #ffffff 0%,
    #f8f1e3 20%,
    #ffe6b5 45%,
    #f4ede1 70%,
    #ffffff 100%
  );
  background-size:240% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:exxotikLuster 8s ease-in-out infinite;
  filter:drop-shadow(0 2px 20px rgba(0,0,0,.65));
  transition:filter .5s var(--ease), letter-spacing .5s var(--ease), transform .5s var(--ease);
}
@keyframes exxotikLuster{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.hero__title:hover .hero__brand{
  letter-spacing:.015em;
  filter:drop-shadow(0 0 30px rgba(228,201,140,.45));
}
.hero__title::before{
  content:"";
  position:absolute;
  left:-10%; top:-25%;
  width:125%; height:150%;
  background:radial-gradient(ellipse 65% 55% at 35% 55%, rgba(204,169,106,.15), transparent 72%);
  filter:blur(36px);
  pointer-events:none;
  z-index:-1;
  animation:vaporBreathe 9s ease-in-out infinite alternate;
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.hero__title:hover::before{
  opacity:1;
  transform:scale(1.12);
}
@keyframes vaporBreathe{
  0%{ transform:scale(.92) translateY(0); opacity:.5; }
  50%{ transform:scale(1.06) translateY(-10px); opacity:.95; }
  100%{ transform:scale(1) translateY(-18px); opacity:.55; }
}
.hero__title .script{
  display:block;
  font-size:1.02em;
  transition:filter .5s var(--ease), letter-spacing .5s var(--ease), transform .5s var(--ease);
}
.hero__title:hover .script{
  letter-spacing:.02em;
  filter:drop-shadow(0 0 35px rgba(228,201,140,.75));
}
.hero__lede{
  max-width:31rem;
  color:var(--text-dim);
  font-size:clamp(1.1rem,.6vw + 1rem,1.4rem);
  margin-bottom:clamp(1.8rem,3.4vw,2.6rem);
}
.hero__actions{ display:flex; align-items:center; gap:clamp(1rem,3vw,2.4rem); flex-wrap:wrap; }

/* ============================================================
   PRODUCTS / HOOKAHS
   ============================================================ */
.products{ background:linear-gradient(180deg,#080604,#0c0a07 45%,#080604); }

.product-slider-wrap{
  position:relative;
  margin-top:clamp(1rem, 2vw, 1.8rem);
}
.product-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  gap:clamp(1.5rem, 2.5vw, 2.5rem);
  padding-block:1rem 1.4rem;
  padding-inline:4px;
  scrollbar-width:none;
  cursor:grab;
}
.product-grid::-webkit-scrollbar{ display:none; }
.product-grid.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.product-card{
  flex:0 0 clamp(310px, 34vw, 440px);
  max-width:460px;
  min-width:280px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom:.4rem;
  transition:transform .5s var(--ease);
  opacity:1;
  transform:none;
}
.product-card:hover{ transform:translateY(-8px); }

/* Product slider circular nav buttons */
.product-nav{
  position:absolute;
  top:42%;
  transform:translateY(-50%);
  z-index:20;
  width:46px;
  height:46px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(12, 10, 7, 0.88);
  border:1px solid var(--line);
  color:var(--gold-bright);
  backdrop-filter:blur(12px);
  cursor:pointer;
  box-shadow:0 12px 35px rgba(0,0,0,.7);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.product-nav--prev{ left:-22px; }
.product-nav--next{ right:-22px; }
.product-nav:hover{
  border-color:var(--gold);
  background:rgba(22, 18, 13, 0.98);
  color:#fff;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 0 25px rgba(201,168,106,.45);
}
.product-nav:disabled{
  opacity:0.25;
  cursor:not-allowed;
  transform:translateY(-50%);
  box-shadow:none;
}

/* Product slider progress bar */
.product-progress{
  width:min(280px, 60%);
  height:3px;
  background:rgba(255, 255, 255, 0.08);
  border-radius:999px;
  margin:1.6rem auto 0;
  overflow:hidden;
  position:relative;
}
.product-progress__bar{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:33.33%;
  background:var(--gold-grad);
  border-radius:inherit;
  transition:transform .12s cubic-bezier(0.2, 0, 0, 1);
  box-shadow:0 0 12px 1px rgba(201,168,106,.5);
}
.product-card__media{
  position:relative;
  aspect-ratio:4/3;
  border-radius:12px;
  overflow:hidden;
  background-color:#0c0a07;
  background-image:var(--img,
    radial-gradient(55% 60% at 35% 25%, rgba(228,201,140,.26), transparent 70%),
    radial-gradient(60% 70% at 85% 95%, rgba(201,168,106,.14), transparent 72%),
    linear-gradient(180deg,#13100b,#0a0806));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .6s var(--ease);
}
.product-card:hover .product-card__media{
  box-shadow:inset 0 0 0 1px var(--gold), 0 34px 74px -36px rgba(201,168,106,.5);
}
.product-card__media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 62%, rgba(8,6,4,.5));
}
.product-card__ghost{
  position:absolute; right:1rem; bottom:.9rem; z-index:1;
  font-family:var(--serif); font-style:italic; font-size:1.4rem;
  color:rgba(244,237,225,.5);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.product-card__body{ padding:1.3rem .15rem 0; }
.product-card__tag{
  font-family:var(--sans);
  font-size:.68rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-deep);
}
.product-card__name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.5rem,1.8vw,1.9rem);
  line-height:1.15; color:var(--text);
  margin:.5rem 0 .7rem;
}
.product-card__desc{ color:var(--muted); font-size:1.02rem; line-height:1.6; max-width:34rem; }
.product-card__price{
  margin-top:.9rem;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}

/* Multi-image gallery inside product / variant card */
.product-card__gallery,
.product-images,
.variant-images,
.multi-images{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:.65rem;
  margin-top:.85rem;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:.4rem;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}
.product-gallery__item{
  width:72px;
  height:72px;
  flex:0 0 72px;
  border-radius:8px;
  background-size:cover;
  background-position:center;
  border:1px solid var(--line-soft);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  scroll-snap-align:start;
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.product-gallery__item:hover{
  border-color:var(--gold);
  transform:scale(1.04);
}

.products__foot{
  margin-top:clamp(2rem,4vw,3rem);
  font-family:var(--sans); font-size:.82rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); text-align:center;
}

/* ============================================================
   FLAVOURS
   ============================================================ */
.flavours{ background:linear-gradient(180deg,#080604,#0d0a07 40%,#080604); }
.section-head{
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:clamp(2rem,6vw,5rem);
  align-items:end;
}
.flavours .section-head{
  align-items:start;
  grid-template-columns:1.15fr 1fr;
  gap:clamp(1.5rem,3.5vw,3.5rem);
}
.section-head__note{
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.8;
  text-align:right;
  max-width:26rem;
  justify-self:end;
}

/* Flavour section head right side & toggle */
.section-head__side{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1.6rem;
  justify-self:end;
}
.section-head__side .section-head__note{
  margin:0;
  text-align:right;
  max-width:36rem;
  text-wrap:pretty;
}

.flavour-switch{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.35rem;
  border-radius:999px;
  background:rgba(10, 8, 6, 0.92);
  border:1px solid rgba(255, 255, 255, 0.05);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.45);
}
.flavour-switch__btn{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:.54rem 1.45rem;
  border-radius:999px;
  font-family:var(--serif);
  font-size:1.04rem;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(244, 237, 225, 0.92);
  background:transparent;
  transition:color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease), transform .2s var(--ease);
}
.flavour-switch__btn:hover{ color:#ffffff; }
.flavour-switch__btn.is-active{
  color:#000000;
  background:linear-gradient(135deg, #ebd49d 0%, #d8b672 50%, #c59f5b 100%);
  font-weight:600;
  box-shadow:0 0 25px 2px rgba(228, 201, 140, 0.45);
}
.flavour-switch__btn:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:2px;
}

/* Keep the script word ("flavours") on its own line for every mode */
.flavours .section-title .script{ display:block; }

/* Vape cards carry portrait product renders rather than square shots */
.flavour-card--vape .flavour-card__media{ aspect-ratio:3/4; }

.flavour-slider-wrap{
  position:relative;
  margin-top:clamp(1rem, 2vw, 1.8rem);
}
.flavour-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  gap:clamp(1.2rem, 1.8vw, 1.8rem);
  padding-block:1rem 1.4rem;
  padding-inline:4px;
  scrollbar-width:none;
  cursor:grab;
}
.flavour-grid::-webkit-scrollbar{ display:none; }
.flavour-grid.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.flavour-card{
  flex:0 0 clamp(230px, 21vw, 275px);
  max-width:285px;
  min-width:215px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom:.4rem;
  transition:transform .5s var(--ease);
  opacity:1;
  transform:none;
}
.flavour-card:hover{ transform:translateY(-8px); }

/* Flavour slider circular nav buttons */
.flavour-nav{
  position:absolute;
  top:42%;
  transform:translateY(-50%);
  z-index:20;
  width:46px;
  height:46px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(12, 10, 7, 0.88);
  border:1px solid var(--line);
  color:var(--gold-bright);
  backdrop-filter:blur(12px);
  cursor:pointer;
  box-shadow:0 12px 35px rgba(0,0,0,.7);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.flavour-nav--prev{ left:-22px; }
.flavour-nav--next{ right:-22px; }
.flavour-nav:hover{
  border-color:var(--gold);
  background:rgba(22, 18, 13, 0.98);
  color:#fff;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 0 25px rgba(201,168,106,.45);
}
.flavour-nav:disabled{
  opacity:0.25;
  cursor:not-allowed;
  transform:translateY(-50%);
  box-shadow:none;
}

/* Flavour slider progress bar */
.flavour-progress{
  width:min(280px, 60%);
  height:3px;
  background:rgba(255, 255, 255, 0.08);
  border-radius:999px;
  margin:1.6rem auto 0;
  overflow:hidden;
  position:relative;
}
.flavour-progress__bar{
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:25%;
  background:var(--gold-grad);
  border-radius:inherit;
  transition:transform .12s cubic-bezier(0.2, 0, 0, 1);
  box-shadow:0 0 12px 1px rgba(201,168,106,.5);
}

.flavour-card__media{
  position:relative;
  aspect-ratio:1/1;
  border-radius:10px;
  overflow:hidden;
  background-color:#0c0a07;
  background-image:
    radial-gradient(60% 42% at 50% 24%, rgba(228,201,140,.12), transparent 72%),
    radial-gradient(90% 70% at 50% 105%, rgba(0,0,0,.6), transparent 60%),
    var(--img, none);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .6s var(--ease), transform .9s var(--ease);
}
.flavour-card__media::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  border-radius:inherit;
  background:linear-gradient(180deg, transparent 45%, rgba(8,6,4,.82));
}
.flavour-card:hover .flavour-card__media{
  box-shadow:inset 0 0 0 1px var(--gold), 0 30px 70px -34px rgba(201,168,106,.5);
}
.flavour-card__idx{
  position:absolute; left:0; top:0; z-index:2;
  width:2.6rem; height:2.6rem;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif);
  font-size:.9rem;
  letter-spacing:.05em;
  color:var(--gold-bright);
  background:rgba(8,6,4,.55);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-bottom-right-radius:10px;
  backdrop-filter:blur(2px);
}
.flavour-card__body{ padding:1.15rem .15rem 0; }
.flavour-card__name{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(1.3rem,1.4vw,1.55rem);
  line-height:1.15;
  color:var(--text);
  letter-spacing:.005em;
}
.flavour-card__hr{
  display:block;
  width:1.6rem; height:1px;
  background:var(--gold);
  margin:.7rem 0 .8rem;
  transition:width .6s var(--ease);
}
.flavour-card:hover .flavour-card__hr{ width:3rem; }
.flavour-card__desc{
  color:var(--muted);
  font-style:italic;
  font-size:1rem;
  line-height:1.6;
}

/* ============================================================
   SERVICES
   ============================================================ */
.services{ background:var(--bg-2); }
.services__inner{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem,7vw,6rem);
  align-items:start;
}
.services__intro{ position:sticky; top:120px; }
.services__text{ color:var(--text-dim); margin-block:1.6rem 2rem; max-width:24rem; }

.steps{ border-top:1px solid var(--line); }
.step{
  display:flex; gap:clamp(1.2rem,3vw,2.4rem);
  padding-block:clamp(1.8rem,4vw,2.6rem);
  border-bottom:1px solid var(--line);
}
.step__num{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.6rem;
  color:var(--gold);
  min-width:2.5rem;
  line-height:1.2;
}
.step__body h3{
  font-family:var(--serif);
  font-weight:600;
  font-size:1.5rem;
  margin-bottom:.5rem;
  color:var(--text);
}
.step__body p{ color:var(--muted); font-size:1rem; line-height:1.65; max-width:34rem; }

/* ============================================================
   IMAGE BREAK  (full-bleed band between Services & Experience)
   Swap images/break.jpg to change it.
   ============================================================ */
.image-break{
  position:relative;
  min-height:clamp(340px,58vh,640px);
  background-color:#0c0a07;
  /* real photo on top; gold gradient shows through if the file is missing */
  background-image:
    var(--img, none),
    radial-gradient(50% 60% at 25% 30%, rgba(228,201,140,.22), transparent 70%),
    radial-gradient(60% 70% at 85% 90%, rgba(201,168,106,.12), transparent 72%),
    linear-gradient(180deg,#13100b,#0a0806);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  background-attachment:fixed;        /* gentle parallax on desktop */
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.image-break::after{                  /* blend the edges into the dark sections */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(8,6,4,.55) 0%, rgba(8,6,4,.12) 22%,
    rgba(8,6,4,.12) 78%, rgba(8,6,4,.7) 100%);
  pointer-events:none;
}
.image-break__ghost{
  position:absolute; right:clamp(20px,5vw,64px); bottom:clamp(18px,4vw,40px);
  z-index:1;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.1rem,1.6vw,1.5rem);
  color:rgba(244,237,225,.6);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
}

/* ============================================================
   EXPERIENCE
   ============================================================ */
.experience{ background:linear-gradient(180deg,var(--bg-2),#080604); }
.experience__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,7vw,6rem);
  align-items:center;
}
.experience__text{ color:var(--text-dim); max-width:30rem; }
.stats{ display:flex; gap:clamp(1.5rem,4vw,3.5rem); flex-wrap:wrap; }
.stat{ display:flex; flex-direction:column; }
.stat__num{
  font-family:var(--serif);
  font-size:clamp(1.9rem,3.4vw,2.7rem);
  font-weight:500;
  color:var(--gold-bright);
  line-height:1.05;
}
.stat__label{
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.6rem;
}
.media-frame{
  position:relative;
  aspect-ratio:4/4.4;
  border-radius:18px;
  border:1px solid var(--line);
  background-color:#0c0a07;
  /* photo shows untouched; the gold gradient is ONLY the fallback
     for the empty state (no --img set) */
  background-image:var(--img,
    radial-gradient(60% 40% at 30% 20%, rgba(228,201,140,.28), transparent 70%),
    radial-gradient(80% 60% at 80% 95%, rgba(201,168,106,.14), transparent 72%),
    linear-gradient(180deg, #14100b, #0a0806));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.85);
  overflow:hidden;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.media-frame:hover{
  transform:translateY(-4px);
  border-color:rgba(201,168,106,.35);
  box-shadow:0 45px 90px -35px rgba(0,0,0,.92), 0 0 35px -10px rgba(201,168,106,.2);
}
.media-frame::after{           /* just a soft bottom fade so the caption stays legible */
  content:"";
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, transparent 68%, rgba(8,6,4,.45));
  pointer-events:none;
}
.media-frame__ghost{
  position:absolute; left:1.4rem; bottom:1.4rem; z-index:2;
  font-family:var(--serif); font-style:italic; font-size:1.3rem;
  color:rgba(244,237,225,.55);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ background:#080604; }
.contact__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem,7vw,6rem);
  align-items:start;
}
.contact__text{ color:var(--text-dim); margin-bottom:2.4rem; max-width:26rem; }
.contact__details{ display:grid; gap:1rem; }
.contact__details li{
  display:grid;
  grid-template-columns:6rem 1fr;
  gap:1rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--line-soft);
  color:var(--text-dim);
  font-size:1rem;
}
.contact__details span{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  align-self:center;
}

.booking{
  background:var(--panel);
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:clamp(1.5rem,4vw,2.6rem);
  display:grid;
  gap:1.2rem;
}
.field{ display:flex; flex-direction:column; gap:.5rem; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.field label{
  font-family:var(--sans);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.field input,
.field textarea{
  font-family:var(--body);
  font-size:1.05rem;
  color:var(--text);
  background:#0c0a07;
  border:1px solid var(--line);
  border-radius:9px;
  padding:.85em 1em;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,168,106,.14);
}
.field textarea{ resize:vertical; }
.booking__submit{ margin-top:.4rem; width:100%; }
.booking__status{
  font-family:var(--sans);
  font-size:.85rem;
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--gold-bright);
  min-height:1.2em;
  text-align:center;
}
.booking__status[data-kind="error"]{ color:#e6a15c; }
.booking__status[data-kind="ok"]{ color:var(--gold-bright); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:#080604; border-top:1px solid var(--line-soft); padding-block:clamp(3rem,6vw,5rem); }
.footer__inner{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; text-align:center; }
.footer__nav{ display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; }
.footer__nav a{
  font-family:var(--sans); font-size:.82rem; letter-spacing:.1em;
  color:var(--text-dim); transition:color .3s var(--ease);
}
.footer__nav a:hover{ color:var(--gold); }
.footer__contact{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; justify-content:center;
  font-family:var(--sans); font-size:.9rem; letter-spacing:.04em;
}
.footer__contact a{ color:var(--gold); transition:color .3s var(--ease); }
.footer__contact a:hover{ color:var(--gold-bright); }
.footer__contact span{ color:var(--muted); }
.footer__social{ display:flex; justify-content:center; }
.footer__social-link{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.55em 1.1em;
  border:1px solid var(--line-soft);
  border-radius:999px;
  font-family:var(--sans); font-size:.85rem; letter-spacing:.06em;
  color:var(--text-dim);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.footer__social-link svg{ flex:none; color:#ee2a7b; transition:color .3s var(--ease); }
.footer__social-link:hover svg{ color:var(--gold-bright); }
.footer__social-link:hover{
  color:var(--gold-bright);
  border-color:var(--gold);
  transform:translateY(-2px);
}
.footer__fine{ color:var(--muted); font-size:.9rem; letter-spacing:.02em; }

.social-link{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--gold); transition:color .3s var(--ease);
}
.social-link:hover{ color:var(--gold-bright); }
.social-link__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.6em; height:1.6em; border-radius:8px; flex:none;
  background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7);
  color:#fff;
}

/* ============================================================
   ROOFTOP LIVE / VENUES SLIDER
   ============================================================ */
.rooftop{ background:linear-gradient(180deg,#080604,#0d0a07 45%,#080604); }

.venue-slider-wrap{
  position:relative;
  margin-top:clamp(1rem, 2vw, 1.8rem);
}
.venue-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
  gap:clamp(1.5rem, 2.5vw, 2.5rem);
  padding-block:1rem 1.4rem;
  padding-inline:4px;
  scrollbar-width:none;
  cursor:grab;
}
.venue-grid::-webkit-scrollbar{ display:none; }
.venue-grid.is-dragging{
  cursor:grabbing;
  scroll-snap-type:none;
  scroll-behavior:auto;
}
.venue-card{
  flex:0 0 clamp(280px, 30vw, 380px);
  max-width:400px;
  min-width:260px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  position:relative;
  padding-bottom:.4rem;
  transition:transform .5s var(--ease);
  opacity:1;
  transform:none;
}
.venue-card:hover{ transform:translateY(-8px); }

/* Venue slider circular nav buttons */
.venue-nav{
  position:absolute;
  top:42%;
  transform:translateY(-50%);
  z-index:20;
  width:46px;
  height:46px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(12, 10, 7, 0.88);
  border:1px solid var(--line);
  color:var(--gold-bright);
  backdrop-filter:blur(12px);
  cursor:pointer;
  box-shadow:0 12px 35px rgba(0,0,0,.7);
  transition:border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.venue-nav--prev{ left:-22px; }
.venue-nav--next{ right:-22px; }
.venue-nav:hover{
  border-color:var(--gold);
  background:rgba(22, 18, 13, 0.98);
  color:#fff;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 0 25px rgba(201,168,106,.45);
}
.venue-nav:disabled{
  opacity:0.25;
  cursor:not-allowed;
  transform:translateY(-50%);
  box-shadow:none;
}

/* Venue slider progress bar */
.venue-progress{
  width:min(280px, 60%);
  height:3px;
  background:rgba(255, 255, 255, 0.08);
  border-radius:999px;
  margin:1.6rem auto 0;
  overflow:hidden;
  position:relative;
}
.venue-progress__bar{
  position:absolute;
  left:0; top:0; bottom:0;
  width:50%;
  background:var(--gold-grad);
  border-radius:inherit;
  transition:transform .12s cubic-bezier(0.2, 0, 0, 1);
  box-shadow:0 0 12px 1px rgba(201,168,106,.5);
}

.venue-card__media{
  position:relative;
  aspect-ratio:1003/1568;
  border-radius:14px;
  overflow:hidden;
  background-color:#0c0a07;
  background-image:var(--img,
    radial-gradient(55% 60% at 35% 25%, rgba(228,201,140,.26), transparent 70%),
    linear-gradient(180deg,#13100b,#0a0806));
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  transition:box-shadow .6s var(--ease);
}
.venue-card:hover .venue-card__media{
  box-shadow:inset 0 0 0 1px var(--gold), 0 34px 74px -36px rgba(201,168,106,.5);
}
.venue-card__ghost{
  display:none;
  position:absolute; right:1.2rem; bottom:.9rem; z-index:2;
  font-family:var(--serif); font-style:italic; font-size:1.3rem;
  color:rgba(244,237,225,.55);
  text-shadow:0 2px 12px rgba(0,0,0,.7);
}
.venue-card__media.is-empty .venue-card__ghost{
  display:block;
}
.venue-card__body{ padding:1.4rem .2rem 0; flex:1; display:flex; flex-direction:column; }
.venue-card__tag{
  font-family:var(--sans);
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
}
.venue-card__name{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.6rem,2vw,2.1rem);
  line-height:1.2;
  margin:.4rem 0 .7rem;
  background:linear-gradient(
    115deg,
    #c9a86a 0%,
    #f4ede1 20%,
    #ffd885 42%,
    #c9a86a 65%,
    #f2dfbe 82%,
    #cca96a 100%
  );
  background-size:240% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:goldSmokeShine 7s ease-in-out infinite;
  filter:drop-shadow(0 2px 14px rgba(201,168,106,.20));
  transition:filter .4s var(--ease);
}
.venue-card:hover .venue-card__name{
  filter:drop-shadow(0 0 24px rgba(228,201,140,.6));
}
.venue-card__desc{ color:var(--text-dim); font-size:1.02rem; line-height:1.65; margin-bottom:1.2rem; flex:1; }
.venue-card__meta{
  display:flex; gap:1.4rem; flex-wrap:wrap;
  margin-bottom:1.4rem;
  font-family:var(--sans); font-size:.8rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
  padding-top:.8rem;
  border-top:1px solid var(--line-soft);
}
.venue-card__meta strong{
  display:block; font-family:var(--serif); font-weight:500;
  font-size:1.15rem; letter-spacing:normal; text-transform:none;
  color:var(--gold-bright); margin-bottom:.15rem;
}
.venue-card__cta{ align-self:flex-start; }

.venue-card__actions{
  display:flex;
  align-items:center;
  gap:.8rem;
  margin-top:auto;
  flex-wrap:wrap;
}

.btn--outline{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.65rem 1.2rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(16, 13, 9, 0.6);
  color:var(--text-dim);
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
  transition:all .3s var(--ease);
}
.btn--outline:hover{
  border-color:var(--gold);
  color:var(--gold-bright);
  background:rgba(22, 18, 13, 0.95);
  box-shadow:0 0 20px rgba(201,168,106,.25);
}

.btn--coming-soon,
.btn--disabled{
  opacity:.65;
  cursor:not-allowed;
  background:rgba(255, 255, 255, 0.06);
  border:1px solid rgba(255, 255, 255, 0.12);
  color:var(--muted);
  box-shadow:none;
  pointer-events:none;
}
.btn--coming-soon:hover,
.btn--disabled:hover{
  transform:none !important;
  background:rgba(255, 255, 255, 0.06) !important;
  border-color:rgba(255, 255, 255, 0.12) !important;
  color:var(--muted) !important;
  box-shadow:none !important;
}

.venue-card__media[data-venue-gallery]{
  cursor:pointer;
}
.venue-card__media-overlay{
  position:absolute; inset:0; z-index:3;
  background:rgba(10,8,6,.45);
  display:flex; align-items:center; justify-content:center;
  opacity:0;
  transition:opacity .35s var(--ease);
  backdrop-filter:blur(3px);
}
.venue-card__media:hover .venue-card__media-overlay{
  opacity:1;
}
.venue-card__gallery-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1.2rem;
  border-radius:999px;
  background:rgba(16,13,9,.88);
  border:1px solid var(--gold);
  color:var(--gold-bright);
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 10px 25px rgba(0,0,0,.6);
  transform:translateY(6px);
  transition:transform .35s var(--ease);
}
.venue-card__media:hover .venue-card__gallery-badge{
  transform:translateY(0);
}

/* ============================================================
   EVENTS SECTION & CAROUSEL
   ============================================================ */
.events {
  background: linear-gradient(180deg, #0d0a07, #080604 50%, #0c0a07);
}

.events-venue-switch {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem;
  border-radius: 999px;
  background: rgba(10, 8, 6, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.7), 0 8px 24px rgba(0,0,0,.45);
}
.events-venue-switch__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: .54rem 1.35rem;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: rgba(244, 237, 225, 0.92);
  background: transparent;
  transition: color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.events-venue-switch__btn:hover:not(:disabled) {
  color: #ffffff;
}
.events-venue-switch__btn.is-active {
  color: #000000;
  background: linear-gradient(135deg, #ebd49d 0%, #d8b672 50%, #c59f5b 100%);
  box-shadow: 0 0 25px 2px rgba(228, 201, 140, 0.45);
}
.events-venue-switch__btn.is-disabled {
  opacity: .5;
  cursor: not-allowed;
}

.event-slider-wrap {
  position: relative;
  margin-top: clamp(1rem, 2vw, 1.8rem);
}
.event-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
  padding-block: 1rem 1.4rem;
  padding-inline: 4px;
  scrollbar-width: none;
  cursor: grab;
}
.event-grid::-webkit-scrollbar { display: none; }
.event-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.event-card {
  flex: 0 0 clamp(270px, 28vw, 360px);
  max-width: 380px;
  min-width: 250px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: .4rem;
  transition: transform .5s var(--ease);
  opacity: 1;
  transform: none;
}
.event-card:hover {
  transform: translateY(-8px);
}

.event-card__media {
  position: relative;
  aspect-ratio: 9/15;
  border-radius: 14px;
  overflow: hidden;
  background-color: #0c0a07;
  background-image: var(--img,
    radial-gradient(55% 60% at 35% 25%, rgba(228,201,140,.26), transparent 70%),
    linear-gradient(180deg,#13100b,#0a0806));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px var(--line-soft);
  transition: box-shadow .6s var(--ease);
}
.event-card:hover .event-card__media {
  box-shadow: inset 0 0 0 1px var(--gold), 0 34px 74px -36px rgba(201,168,106,.5);
}
.event-card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8,6,4,.75));
}

.event-card__badge {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  font-family: var(--sans);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0a0806;
  background: linear-gradient(135deg, #ebd49d 0%, #d8b672 100%);
  padding: .35em .8em;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}

.event-card__ghost {
  position: absolute;
  right: 1rem;
  bottom: .8rem;
  z-index: 2;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.25rem;
  color: rgba(244,237,225,.7);
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
}

.event-card__body {
  padding: 1.3rem .2rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.event-card__meta-time {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: .6rem;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .05em;
  color: var(--gold-bright);
}
.event-card__date,
.event-card__time {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.event-card__date svg,
.event-card__time svg {
  color: var(--gold);
  flex: none;
}

.event-card__name {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.45rem, 1.8vw, 1.85rem);
  line-height: 1.2;
  color: var(--text);
  margin: .2rem 0 .6rem;
}

.event-card__desc {
  color: var(--text-dim);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1.3rem;
  flex: 1;
}

.event-card__actions {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: auto;
  flex-wrap: wrap;
}

/* Event slider circular nav buttons */
.event-nav {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  z-index: 20;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 10, 7, 0.88);
  border: 1px solid var(--line);
  color: var(--gold-bright);
  backdrop-filter: blur(12px);
  cursor: pointer;
  box-shadow: 0 12px 35px rgba(0,0,0,.7);
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease), opacity .3s var(--ease);
}
.event-nav--prev { left: -22px; }
.event-nav--next { right: -22px; }
.event-nav:hover {
  border-color: var(--gold);
  background: rgba(22, 18, 13, 0.98);
  color: #fff;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 25px rgba(201,168,106,.45);
}
.event-nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  transform: translateY(-50%);
  box-shadow: none;
}

/* Event slider progress bar */
.event-progress {
  width: min(280px, 60%);
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin: 1.6rem auto 0;
  overflow: hidden;
  position: relative;
}
.event-progress__bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 33.33%;
  background: var(--gold-grad);
  border-radius: inherit;
  transition: transform .12s cubic-bezier(0.2, 0, 0, 1);
  box-shadow: 0 0 12px 1px rgba(201,168,106,.5);
}

.event-grid__empty {
  padding: 3rem 1.5rem;
  text-align: center;
  width: 100%;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-style: italic;
  border: 1px dashed var(--line-soft);
  border-radius: 12px;
}

/* ============================================================
   VENUE LIGHTBOX GALLERY MODAL
   ============================================================ */
.venue-gallery-modal{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.venue-gallery-modal.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
}

.venue-gallery-modal__backdrop{
  position:absolute; inset:0;
  background:rgba(6,4,3,.96);
  backdrop-filter:blur(14px);
}

.venue-gallery-modal__dialog{
  position:relative; z-index:2;
  width:100%; max-width:100vw; height:100dvh; min-height:100vh;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:1rem 1.5rem 1.2rem;
  box-sizing:border-box;
  overflow:hidden;
}

/* Modal Header */
.venue-gallery-modal__header{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:100%; flex-shrink:0;
  padding:1rem 1.8rem .6rem;
  box-sizing:border-box;
  z-index:10;
}
.venue-gallery-modal__info{
  display:flex; align-items:center; flex:1; min-width:0; padding-right:1.2rem; overflow:hidden;
}
.venue-gallery-modal__title{
  font-family:var(--serif);
  font-size:clamp(1.2rem, 2.5vw, 1.65rem);
  font-weight:400;
  line-height:1.35;
  color:#ffffff;
  margin:0;
  letter-spacing:0.01em;
  max-width:100%;
  overflow:hidden;
}
.venue-gallery-modal__name{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.venue-gallery-modal__tagline,
.venue-gallery-modal__subtitle,
.venue-gallery-modal__counter{
  display:none !important;
}
.venue-gallery-modal__close{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  min-width:44px; min-height:44px;
  flex:0 0 44px; flex-shrink:0;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  color:#ffffff;
  cursor:pointer;
  transition:all .3s var(--ease);
  box-sizing:border-box;
}
.venue-gallery-modal__close:hover{
  background:rgba(201,168,106,.25);
  border-color:var(--gold);
  color:var(--gold-bright);
  transform:scale(1.08);
}

/* Modal Main Stage */
.venue-gallery-modal__stage{
  position:relative; flex:1;
  display:flex; align-items:center; justify-content:center;
  margin-block:.5rem;
  overflow:hidden;
}
.venue-gallery-modal__img-wrap{
  position:relative;
  max-width:min(1200px, 86vw);
  max-height:calc(100vh - 200px);
  display:flex; align-items:center; justify-content:center;
}
.venue-gallery-modal__img{
  max-width:100%;
  max-height:calc(100vh - 200px);
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 25px 60px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.venue-gallery-modal__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  z-index:10;
  width:52px; height:52px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(10,8,6,.75);
  border:1px solid rgba(255,255,255,.15);
  color:#ffffff;
  backdrop-filter:blur(10px);
  cursor:pointer;
  transition:all .3s var(--ease);
}
.venue-gallery-modal__nav--prev{ left:1rem; }
.venue-gallery-modal__nav--next{ right:1rem; }
.venue-gallery-modal__nav:hover{
  background:rgba(22,18,13,.95);
  border-color:var(--gold);
  color:var(--gold-bright);
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 0 25px rgba(201,168,106,.4);
}

/* Modal Bottom Thumbnail Strip (Reference design match) */
.venue-gallery-modal__thumbs-wrap{
  width:100%; max-width:100%;
  overflow:hidden;
  padding-block:.4rem;
  z-index:10;
}
.venue-gallery-modal__thumbs{
  display:flex; align-items:center; justify-content:center;
  gap:.6rem;
  overflow-x:auto; overflow-y:hidden;
  padding:.4rem 1rem;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) transparent;
}
.venue-gallery-modal__thumbs::-webkit-scrollbar{ height:4px; }
.venue-gallery-modal__thumbs::-webkit-scrollbar-thumb{
  background:var(--gold);
  border-radius:4px;
}
.venue-gallery-modal__thumb{
  flex:0 0 68px; width:68px; height:52px;
  border-radius:6px; overflow:hidden;
  border:2px solid transparent;
  opacity:.45;
  cursor:pointer;
  background-size:cover; background-position:center;
  transition:all .25s var(--ease);
}
.venue-gallery-modal__thumb:hover{
  opacity:.85; transform:translateY(-2px);
}
.venue-gallery-modal__thumb.is-active{
  opacity:1;
  border-color:#ffffff;
  box-shadow:0 0 16px rgba(255,255,255,.6), 0 0 0 1px var(--gold-bright);
  transform:scale(1.06);
}

@media (max-width:768px){
  .venue-gallery-modal{ height:100dvh; }
  .venue-gallery-modal__dialog{ height:100dvh; max-height:100dvh; padding:.5rem .4rem; }
  .venue-gallery-modal__header{ padding:.6rem .8rem; width:100%; max-width:100%; box-sizing:border-box; }
  .venue-gallery-modal__info{ flex:1; min-width:0; overflow:hidden; padding-right:.5rem; }
  .venue-gallery-modal__title{ font-size:clamp(1.05rem, 4.5vw, 1.3rem); max-width:100%; }
  .venue-gallery-modal__name{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .venue-gallery-modal__tagline,
  .venue-gallery-modal__subtitle,
  .venue-gallery-modal__counter{ display:none !important; }
  .venue-gallery-modal__controls{ flex-shrink:0; margin-left:auto; z-index:12; }
  .venue-gallery-modal__close{
    width:42px; height:42px; min-width:42px; min-height:42px;
    border-radius:50%; flex:0 0 42px; flex-shrink:0;
    position:relative; z-index:15;
  }
  .venue-gallery-modal__nav--prev{ left:.4rem; }
  .venue-gallery-modal__nav--next{ right:.4rem; }
  .venue-gallery-modal__nav{ width:42px; height:42px; }
  .venue-gallery-modal__thumb{ flex:0 0 54px; width:54px; height:42px; }
  .venue-gallery-modal__thumbs{ justify-content:flex-start; }
}

/* Booking form venue switch pills */
.venue-switch{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:.4rem;
}
.venue-switch__btn{
  appearance:none;
  border:1px solid var(--line-soft);
  cursor:pointer;
  padding:.55rem 1.2rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.85rem;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--text-dim);
  background:#0c0a07;
  transition:all .3s var(--ease);
}
.venue-switch__btn:hover{
  border-color:var(--gold);
  color:var(--text);
}
.venue-switch__btn.is-active{
  color:#241a0d;
  background:var(--gold-grad);
  border-color:var(--gold-bright);
  font-weight:600;
  box-shadow:0 0 20px rgba(201,168,106,.35);
}
.venue-switch__btn.is-disabled,
.venue-switch__btn:disabled{
  opacity:.45;
  cursor:not-allowed;
  border-color:rgba(255,255,255,.08);
  color:var(--muted);
  background:rgba(12,10,7,.5);
  box-shadow:none;
  pointer-events:none;
}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change:opacity, transform;
}
.reveal.is-in{
  opacity:1;
  transform:none;
}
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .btn--pill::after, .btn--pill:hover::after{ animation:none; display:none; }
  .hero__glow, .hero__glow::before, .hero__glow::after{ animation:none; }
  .hero__title::before{ animation:none; }
  .hero__brand{ animation:none; }
  .script{ animation:none; }
  .brand__logo{ animation:none; }
  .eyebrow::before{ animation:none; }
  html{ scroll-behavior:auto; }
}

@media (max-width:980px){
  .nav, .header__cta{ display:none; }
  .brand__logo{ height:64px; }
  .site-header.is-stuck .brand__logo{ height:52px; }
  .brand--footer .brand__logo{ height:104px; }
  .nav-toggle{ display:block; }
  .site-header.nav-open{ background:rgba(10,8,6,.97); backdrop-filter:blur(14px); }
  .nav.is-open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; left:0; right:0; top:100%;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:1rem var(--pad) 2rem;
  }
  .nav.is-open a{ padding-block:1rem; border-bottom:1px solid var(--line-soft); font-size:1rem; }

  .section-head{ grid-template-columns:1fr; align-items:start; }
  .section-head__note{ text-align:left; justify-self:start; }
  .section-head__side{ align-items:flex-start; justify-self:start; width:100%; gap:1.2rem; }
  .vape-br{ display:none; }
  .services__inner,
  .experience__inner,
  .rooftop__inner,
  .contact__inner{ grid-template-columns:1fr; }
  .services__intro{ position:static; }
  .experience__media{ order:-1; }
  .rooftop__poster{ order:-1; }
}
@media (max-width:768px){
  .product-nav,
  .flavour-nav,
  .venue-nav{ display:none; }
  .product-slider-wrap,
  .flavour-slider-wrap,
  .venue-slider-wrap{
    margin-inline:calc(var(--pad) * -1);
    padding-inline:var(--pad);
  }
  .product-grid,
  .flavour-grid,
  .venue-grid{
    gap:1.25rem;
    padding-inline:var(--pad);
    margin-inline:calc(var(--pad) * -1);
    padding-bottom:1.4rem;
    padding-top:0.4rem;
  }
  .product-card{
    flex:0 0 clamp(270px, 82vw, 360px);
    max-width:380px;
    min-width:260px;
    scroll-snap-align:center;
  }
  .venue-card{
    flex:0 0 clamp(280px, 84vw, 420px);
    max-width:440px;
    min-width:260px;
    scroll-snap-align:center;
  }
  .product-grid .product-card,
  .venue-grid .venue-card{
    opacity:1;
    transform:none;
  }
  .product-card:hover,
  .venue-card:hover{
    transform:none;
  }
}
@media (max-width:640px){
  .field-row{ grid-template-columns:1fr; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
  .image-break{ background-attachment:scroll; min-height:44vh; }
  .newsletter__input-wrap { flex-direction: column; gap: 0.8rem; }
  .newsletter__submit { width: 100%; }
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.newsletter-section {
  padding-block: clamp(3rem, 6vw, 5.5rem);
  position: relative;
  overflow: hidden;
}

.newsletter__box {
  background: var(--panel);
  background: radial-gradient(80% 120% at 50% 0%, rgba(201, 168, 106, 0.12) 0%, rgba(20, 17, 12, 0.95) 100%);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  backdrop-filter: blur(12px);
}

.newsletter__box::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
}

.newsletter__desc {
  color: var(--text-dim);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.6;
  max-width: 580px;
  margin: 0.8rem auto 2rem;
}

.newsletter__form {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.newsletter__input-wrap {
  display: flex;
  width: 100%;
  gap: 0.6rem;
  position: relative;
}

.newsletter__input {
  flex: 1;
  background: #0c0a07;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 0.85rem 1.4rem;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.newsletter__input:focus {
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(201, 168, 106, 0.25);
}

.newsletter__input::placeholder {
  color: var(--muted);
}

.newsletter__submit {
  flex: none;
  padding-inline: 1.8rem;
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
}

.newsletter__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.newsletter__status {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.4;
  min-height: 1.4em;
  transition: opacity 0.3s ease;
}

.newsletter__status[data-kind="ok"] {
  color: #ebd49d;
  text-shadow: 0 0 10px rgba(235, 212, 157, 0.3);
}

.newsletter__status[data-kind="error"] {
  color: #f87171;
  text-shadow: 0 0 10px rgba(248, 113, 113, 0.3);
}

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