*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0D2B1E;--dark:#132E1F;--mid:#F5F0E8;
  --cream:#F5F0E8;--muted:rgba(8,28,16,0.55);
  --gold:#E8417A;--rust:#8c3a20;
  --text-dark:#2a241c;
  --pink:#E8417A;--green-bright:#3DB56E;--green-deep:#0D2B1E;
  --font-d:'Cormorant Garamond',Georgia,serif;
  --font-b:'Outfit',sans-serif;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--black);color:var(--cream);overflow-x:hidden;}


/* ── LOADER ── */
#loader{position:fixed;inset:0;background:var(--black);z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px}
.l-word{font-family:var(--font-d);font-size:clamp(3rem,9vw,6rem);font-weight:300;letter-spacing:.15em;text-transform:uppercase;overflow:hidden}
.l-word span{display:block;transform:translateY(110%)}
.l-line{width:0;height:1px;background:var(--gold)}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:28px 52px;transition:padding .4s,background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.stuck{background:rgba(10,30,18,.95);backdrop-filter:blur(16px);padding:16px 52px;border-bottom-color:rgba(232,65,122,.2)}
.nav-logo{font-family:var(--font-d);font-size:1.6rem;font-weight:600;letter-spacing:.08em;color:var(--cream);text-decoration:none;text-transform:uppercase}
.nav-links{display:flex;gap:40px;list-style:none}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.75rem;font-weight:300;letter-spacing:.18em;text-transform:uppercase;transition:color .2s;position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1px;background:var(--gold);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{width:100%}
.nav-btn{font-family:var(--font-b);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);background:transparent;border:1px solid var(--gold);padding:10px 22px;cursor:pointer;position:relative;overflow:hidden;transition:color .3s}
.nav-btn::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-btn:hover::before{transform:scaleX(1)}
.nav-btn:hover{color:var(--black)}
.nav-btn span{position:relative;z-index:1}

/* ── HERO ── */
#hero{height:100vh;min-height:620px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:-5%;width:calc(100% + 10%);height:calc(100% + 10%);filter:brightness(.42) saturate(.8);will-change:transform;overflow:hidden}
.hero-bg iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:177.78vh;height:56.25vw;min-width:100%;min-height:100%;pointer-events:none;border:0}
.hero-grain{position:absolute;inset:0;z-index:1;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px}
.hero-content{position:relative;z-index:3;text-align:center;padding:0 24px}
.hero-eyebrow{overflow:hidden;margin-bottom:clamp(18px,2.8vh,30px)}
.hero-eyebrow-i{display:block;font-size:.65rem;letter-spacing:.42em;text-transform:uppercase;color:var(--gold);transform:translateY(105%)}
.hero-h1{font-family:var(--font-d);font-size:clamp(3.8rem,9vw,9.5rem);font-weight:300;line-height:.95;letter-spacing:-.02em;margin-bottom:clamp(22px,3.5vh,42px)}
.hero-line-wrap{overflow:hidden;display:block;padding-bottom:.18em;margin-bottom:-.18em}
.hero-line-i{display:block;transform:translateY(120%)}
.hero-line-i--em{font-style:italic;color:var(--gold)}
.hero-sub{font-size:clamp(.9rem,1.6vw,1.05rem);font-weight:200;letter-spacing:.1em;color:rgba(245,240,232,.52);margin-bottom:clamp(30px,5vh,54px);opacity:0}
.hero-btns{display:flex;gap:14px;justify-content:center;opacity:0;flex-wrap:wrap}
/* ── HERO COVER (scrub overlay) ── */
.hero-cover{position:absolute;inset:0;background:var(--green-deep);opacity:0;z-index:1;pointer-events:none;will-change:opacity}
/* ── HERO BOTTOM EDGE ── */
.hero-edge-glow{position:absolute;bottom:0;left:0;right:0;height:260px;background:linear-gradient(to bottom,transparent 0%,rgba(6,16,10,.45) 55%,rgba(13,43,30,.72) 100%);z-index:2;pointer-events:none}
/* ── SCROLL INVITATION ── */
.hero-scroll{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;cursor:default;user-select:none}
.hs-beacon{position:relative;width:46px;height:46px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hs-beacon::before,.hs-beacon::after{content:'';position:absolute;border-radius:50%}
.hs-beacon::before{inset:0;border:1px solid rgba(61,181,110,.5);animation:hsPulse 2.8s ease-in-out infinite}
.hs-beacon::after{inset:-9px;border:1px solid rgba(61,181,110,.2);animation:hsPulse 2.8s ease-in-out infinite .7s}
.hs-dot{width:10px;height:10px;background:var(--green-bright);border-radius:50%;box-shadow:0 0 14px rgba(61,181,110,.7),0 0 28px rgba(61,181,110,.3);animation:hsDrift 2.8s ease-in-out infinite}
.hs-chevrons{display:flex;flex-direction:column;align-items:center;overflow:hidden;height:30px;gap:1px}
.hs-v{display:block;animation:hsV 1.9s ease-in-out infinite}
.hs-v:nth-child(2){animation-delay:.28s}
.hs-v:nth-child(3){animation-delay:.56s}
.hs-label{font-size:.58rem;letter-spacing:.45em;text-transform:uppercase;color:rgba(245,240,232,.3)}
@keyframes hsPulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.16);opacity:1}}
@keyframes hsDrift{0%,100%{transform:translateY(0)}60%{transform:translateY(5px)}}
@keyframes hsV{0%,100%{transform:translateY(-12px);opacity:0}35%,65%{transform:translateY(0);opacity:1}}
@keyframes fadeUp{to{opacity:1}}

/* ── BUTTONS ── */
.btn-gold{display:inline-block;background:var(--gold);color:var(--black);padding:15px 38px;font-family:var(--font-b);font-size:.75rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(232,65,122,.35)}
.btn-outline{display:inline-block;background:transparent;border:1px solid rgba(8,28,16,.3);color:var(--cream);padding:15px 38px;font-family:var(--font-b);font-size:.75rem;font-weight:300;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .25s,background .25s}
.btn-outline:hover{border-color:var(--cream);background:rgba(242,236,224,.06)}
.btn-gold-outline{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:15px 38px;font-family:var(--font-b);font-size:.75rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:color .3s}
.btn-gold-outline::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.btn-gold-outline:hover::before{transform:scaleX(1)}
.btn-gold-outline:hover{color:var(--black)}
.btn-gold-outline span{position:relative;z-index:1}
.btn-dark{display:inline-block;background:var(--black);color:var(--gold);padding:15px 36px;font-family:var(--font-b);font-size:.75rem;font-weight:400;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .25s,box-shadow .25s}
.btn-dark:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(8,28,16,.3)}

/* ── TICKER ── */
.ticker{background:#0D2B1E;padding:13px 0;overflow:hidden;position:relative;z-index:2;border-top:1px solid rgba(232,65,122,.2);border-bottom:1px solid rgba(232,65,122,.2)}
.ticker-track{display:flex;white-space:nowrap;animation:tick 22s linear infinite}
.ticker-track span{font-family:var(--font-d);font-size:.9rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#F5F0E8;padding:0 28px}
.ticker-track .sep{color:var(--gold);padding:0 4px}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── SHARED ── */
.s-label{display:block;font-size:.65rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.s-title{font-family:var(--font-d);font-size:clamp(2.4rem,5vw,4rem);font-weight:300;line-height:1.05}.light-section .s-title{color:var(--text-dark)}.light-section .s-label{color:var(--gold)}
.curtain{position:relative;overflow:hidden}
.curtain::after{content:'';position:absolute;inset:0;background:var(--black);transform-origin:left;transform:scaleX(1);transition:transform 1s var(--ease)}.curtain-light::after{background:#F5F0E8!important}
.curtain.open::after{transform:scaleX(0)}
.fu{opacity:0;transform:translateY(44px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.fu.in{opacity:1;transform:translateY(0)}
.fu.d1{transition-delay:.12s}.fu.d2{transition-delay:.24s}.fu.d3{transition-delay:.38s}.fu.d4{transition-delay:.54s}

/* ── ABOUT ── */
#about{background:#F5F0E8;padding:130px 0}
.about-wrap{max-width:1200px;margin:0 auto;padding:0 52px;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.about-img-stack{position:relative}
.about-img-main{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 55%;display:block;filter:brightness(.88) saturate(.85);transition:filter .5s}
.about-img-main:hover{filter:brightness(1) saturate(1)}
.about-img-over{position:absolute;bottom:-36px;right:-36px;width:48%;aspect-ratio:1;object-fit:cover;border:3px solid #F5F0E8}
.about-badge{position:absolute;top:28px;left:-20px;width:90px;height:90px;background:var(--gold);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:spin 18s linear infinite}
.about-badge .big{font-family:var(--font-d);font-size:1.4rem;font-weight:700;color:#fff;line-height:1}
.about-badge .sm{font-size:.5rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.7)}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.about-body{color:rgba(8,28,16,.65);line-height:1.85;font-size:1rem;font-weight:300;margin-top:28px}
.about-body p+p{margin-top:16px}
.about-stats{display:flex;gap:44px;margin-top:52px;padding-top:44px;border-top:1px solid rgba(8,28,16,.18)}
.stat-n{font-family:var(--font-d);font-size:3rem;font-weight:300;color:var(--gold);line-height:1}
.stat-l{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(8,28,16,.5);margin-top:4px}

/* ── EXPLORE CTA ── */
#explore-cta{position:relative;height:60vh;min-height:380px;overflow:hidden}
.ect-panels{display:flex;width:100%;height:100%}
.ect-panel{flex:1;position:relative;overflow:hidden;text-decoration:none;cursor:pointer}
.ect-panel+.ect-panel{border-left:1px solid rgba(245,240,232,.08)}
.ect-img{position:absolute;inset:-8%;background-size:cover;background-position:center;filter:brightness(.55);transition:transform .8s cubic-bezier(.25,.46,.45,.94),filter .6s}
.ect-panel:hover .ect-img{transform:scale(1.07);filter:brightness(.3)}
.ect-cat-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-b);font-size:.6rem;letter-spacing:.45em;text-transform:uppercase;color:rgba(245,240,232,.3);transition:opacity .35s;z-index:2;pointer-events:none}
.ect-panel:hover .ect-cat-label{opacity:0}
.ect-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(32px,5vh,56px);opacity:0;transition:opacity .45s;z-index:3}
.ect-panel:hover .ect-overlay{opacity:1}
.ect-ov-inner{text-align:center;transform:translateY(22px);transition:transform .45s cubic-bezier(.25,.46,.45,.94)}
.ect-panel:hover .ect-ov-inner{transform:translateY(0)}
.ect-ov-eyebrow{font-family:var(--font-b);font-size:.58rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.ect-ov-title{font-family:var(--font-d);font-size:clamp(1.5rem,2.8vw,2.2rem);font-weight:300;color:var(--cream);letter-spacing:-.01em;margin:0 0 18px;line-height:1}
.ect-ov-link{display:inline-block;font-family:var(--font-b);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);border-bottom:1px solid rgba(245,240,232,.45);padding-bottom:3px}
.ect-text-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10;pointer-events:none;transition:opacity .5s ease}
.ect-text-wrap.faded{opacity:0}
.ect-text{font-family:var(--font-d);font-size:clamp(2.2rem,4.8vw,5rem);font-weight:300;font-style:italic;line-height:1.25;letter-spacing:-.01em;color:#fff;text-align:center;text-shadow:0 2px 40px rgba(0,0,0,.6),0 0 80px rgba(0,0,0,.3)}
.ect-text em{color:var(--gold);font-style:italic}
@media(max-width:768px){
  .ect-panels{flex-direction:column}
  .ect-panel+.ect-panel{border-left:none;border-top:1px solid rgba(245,240,232,.08)}
  #explore-cta{height:auto;min-height:0}
  .ect-panel{height:38vh;min-height:220px}
  .ect-text{font-size:clamp(2.8rem,9vw,5rem)}
  .ect-cat-label{top:20px;left:50%;transform:translateX(-50%)}
  .ect-overlay{opacity:1}
  .ect-ov-inner{transform:translateY(0)}
}

/* ── DRINKS FEATURE ── */
#drinks-feature{position:relative;height:88vh;min-height:520px;overflow:hidden;display:flex;align-items:center}
.df-bg{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:brightness(.32) saturate(.6);will-change:transform}
.df-content{position:relative;z-index:2;max-width:680px;margin:0 auto;text-align:center;padding:0 40px}
.df-quote{font-family:var(--font-d);font-style:italic;font-size:clamp(1.8rem,4vw,3.2rem);font-weight:300;line-height:1.25;margin-bottom:32px}

/* ── GALLERY ── */
#gallery{background:#EDE8DF;padding:130px 0}
.gallery-wrap{max-width:1200px;margin:0 auto;padding:0 52px}
.gallery-header{margin-bottom:60px;display:flex;justify-content:space-between;align-items:flex-end;color:var(--text-dark)}
.gallery-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:320px 320px;gap:6px}
.g-item{overflow:hidden;position:relative;cursor:pointer;z-index:1;transition:transform .38s var(--ease),box-shadow .38s,z-index 0s .38s;will-change:transform}
.g-item:hover{transform:scale(1.06) translateY(-8px);box-shadow:0 32px 72px rgba(13,43,30,.32);z-index:10;transition:transform .3s var(--ease),box-shadow .3s,z-index 0s 0s}
.g-item:nth-child(1){grid-row:span 2}
.g-item img{width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.75);transition:transform .65s var(--ease),filter .45s}
.g-item:hover img{transform:scale(1.12);filter:brightness(1.05) saturate(1.15)}
.g-label{position:absolute;bottom:18px;left:20px;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:0;transition:opacity .3s}
.g-item:hover .g-label{opacity:1}
/* -- GALLERY CAROUSEL -- */
.gal-carousel{position:relative;overflow:hidden;height:600px;background:var(--black)}
.gal-track{position:relative;width:100%;height:100%}
.gal-slide{position:absolute;inset:0;will-change:transform}
.gal-slide img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) saturate(.78)}
.gal-slide .g-label{position:absolute;bottom:28px;left:32px;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:0}
.gal-btn{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;background:rgba(13,43,30,.72);border:1px solid rgba(232,65,122,.35);color:var(--gold);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:10;transition:background .25s,border-color .25s;backdrop-filter:blur(8px)}
.gal-btn:hover{background:rgba(232,65,122,.18);border-color:var(--gold)}
.gal-prev{left:28px}.gal-next{right:28px}
.gal-dots{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:10;align-items:center}
.gal-dot{height:2px;width:24px;background:rgba(245,240,232,.25);transition:background .35s,width .35s;cursor:pointer}
.gal-dot.active{background:var(--gold);width:44px}
.gal-counter{position:absolute;top:24px;right:32px;font-size:.62rem;letter-spacing:.22em;color:rgba(245,240,232,.45);z-index:10;font-family:var(--font-b)}
@media(max-width:900px){.gal-carousel{height:460px}}
@media(max-width:640px){.gal-carousel{height:320px}.gal-btn{width:40px;height:40px}.gal-prev{left:12px}.gal-next{right:12px}.gal-slide .g-label{bottom:16px;left:18px}.gal-counter{top:14px;right:16px}.gal-dots{bottom:16px}}

/* ── SKY SPORTS BOXING BUTTON ── */
.boxing-sky-btn{align-items:center;gap:14px;background:rgba(13,43,30,.85);border:1px solid rgba(232,65,122,.45);padding:13px 22px 13px 16px;text-decoration:none;backdrop-filter:blur(10px);cursor:pointer;transition:border-color .3s,background .3s,transform .25s,box-shadow .3s;position:relative;overflow:hidden}
.boxing-sky-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(232,65,122,.12),transparent);opacity:0;transition:opacity .3s}
.boxing-sky-btn:hover{border-color:rgba(232,65,122,.9);background:rgba(30,5,10,.9);transform:translateY(-2px);box-shadow:0 12px 40px rgba(232,65,122,.3)}
.boxing-sky-btn:hover::before{opacity:1}
.bsb-icon{flex-shrink:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
.bsb-icon svg{width:36px;height:36px;border-radius:4px;filter:drop-shadow(0 2px 8px rgba(232,65,122,.5))}
.bsb-text{display:flex;flex-direction:column;gap:2px}
.bsb-eyebrow{font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(232,65,122,.9)}
.bsb-label{font-family:var(--font-d);font-size:1.05rem;font-weight:300;color:var(--cream);letter-spacing:.04em}
.bsb-arrow{font-size:1.1rem;color:rgba(232,65,122,.8);margin-left:4px;transition:transform .25s,color .25s}
.boxing-sky-btn:hover .bsb-arrow{transform:translateX(4px);color:#E8417A}

/* ── BAR SECTION ── */
#bar-section{background:#F5F0E8;padding:130px 0}
.bar-wrap{max-width:1200px;margin:0 auto;padding:0 52px;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}
.bar-img{position:relative}
.bar-img img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:brightness(.85) saturate(.8);display:block}
.bar-img-over{position:absolute;top:-24px;right:-24px;width:55%;aspect-ratio:3/2;object-fit:cover;border:3px solid #F5F0E8}
.bar-features{margin-top:44px;display:flex;flex-direction:column;gap:20px}
.bar-feat{display:flex;gap:20px;align-items:flex-start;padding:20px;border:1px solid rgba(8,28,16,.08);transition:border-color .3s,background .3s;cursor:pointer}
.bar-feat:hover{border-color:rgba(232,65,122,.3);background:rgba(232,65,122,.06)}
.bar-feat-icon{font-size:1.4rem;flex-shrink:0;margin-top:2px}
.bar-feat-title{font-family:var(--font-d);font-size:1.1rem;font-weight:600;margin-bottom:4px;color:var(--text-dark)}
.bar-feat-desc{font-size:.85rem;font-weight:300;color:rgba(8,28,16,.6);line-height:1.6}

/* ── ATMOSPHERE ── */
#atmosphere{position:relative;height:85vh;min-height:500px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.atm-bg{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:brightness(.28) saturate(.5);will-change:transform}
.atm-content{position:relative;z-index:2;text-align:center;padding:0 40px;max-width:700px}
.atm-big{font-family:var(--font-d);font-size:clamp(3rem,8vw,7rem);font-weight:300;line-height:.95;text-transform:uppercase;margin-bottom:28px}

/* ── BOOK ── */
#book{background:#132E1F;padding:110px 0;position:relative;overflow:hidden;border-top:3px solid var(--gold)}
#book::before{content:'BOBBIN';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-d);font-size:22vw;font-weight:700;color:rgba(245,240,232,.04);white-space:nowrap;pointer-events:none}
.book-wrap{max-width:760px;margin:0 auto;padding:0 52px;text-align:center;position:relative;z-index:2}
.book-wrap .s-label{color:var(--gold)}
.book-wrap .s-title{color:#F5F0E8}
.book-body{color:rgba(245,240,232,.6);font-size:1rem;font-weight:300;line-height:1.8;margin:24px 0 44px}
.book-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.book-hours{margin-top:60px;display:flex;justify-content:center;gap:52px;flex-wrap:wrap;padding-top:48px;border-top:1px solid rgba(245,240,232,.12)}
.h-group{text-align:center}
.h-label{font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(245,240,232,.45);margin-bottom:6px}
.h-time{font-family:var(--font-d);font-size:1.2rem;font-weight:600;color:#F5F0E8}

/* ── FOOTER ── */
footer{background:var(--black);padding:72px 52px 32px;border-top:1px solid rgba(8,28,16,.06)}
.ft-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
.ft-logo{font-family:var(--font-d);font-size:2.2rem;font-weight:300;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.ft-tagline{color:var(--muted);font-size:.9rem;font-weight:300;line-height:1.7}
.ft-col h4{font-size:.65rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.ft-col ul{list-style:none}
.ft-col li+li{margin-top:11px}
.ft-col a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:300;transition:color .2s}
.ft-col a:hover{color:#F5F0E8}
.ft-col p{color:var(--muted);font-size:.9rem;font-weight:300;line-height:1.75}
.ft-bottom{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding-top:24px;border-top:1px solid rgba(8,28,16,.06);color:rgba(242,236,224,.2);font-size:.72rem}
.ft-social{display:flex;gap:20px}
.ft-social a{color:rgba(242,236,224,.3);text-decoration:none;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;transition:color .2s}
.ft-social a:hover{color:var(--gold)}

/* ── HAMBURGER ── */
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;background:none;border:none;cursor:pointer;padding:4px;z-index:1002}
.nav-burger span{display:block;width:24px;height:1.5px;background:var(--cream);transform-origin:center;transition:transform .35s var(--ease),opacity .25s,width .3s}
.nav-burger.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-burger.open span:nth-child(2){opacity:0;width:0}
.nav-burger.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ── MOBILE OVERLAY ── */
#mob-nav{position:fixed;inset:0;background:rgba(10,28,18,.97);backdrop-filter:blur(20px);z-index:1001;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:90px 24px 40px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;gap:0;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
#mob-nav.open{opacity:1;pointer-events:all}
.mob-close{position:absolute;top:22px;right:22px;background:none;border:1.5px solid rgba(245,240,232,.25);color:var(--cream);font-size:18px;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,color .2s,transform .2s;opacity:0;transform:scale(.7)}
#mob-nav.open .mob-close{opacity:1;transform:scale(1);transition:opacity .3s .45s,transform .3s .45s,border-color .2s,color .2s}
.mob-close:hover{border-color:var(--gold);color:var(--gold);transform:scale(1.1) rotate(90deg)}
.mob-link{font-family:var(--font-d);font-size:clamp(2rem,8vw,4.2rem);font-weight:300;color:rgba(245,240,232,.35);text-decoration:none;letter-spacing:.06em;text-transform:uppercase;line-height:1.15;transition:color .25s;transform:translateY(30px);opacity:0;transition:color .25s,transform .5s var(--ease),opacity .5s var(--ease)}
#mob-nav.open .mob-link{opacity:1;transform:translateY(0)}
#mob-nav.open .mob-link:nth-child(2){transition-delay:.05s}
#mob-nav.open .mob-link:nth-child(3){transition-delay:.10s}
#mob-nav.open .mob-link:nth-child(4){transition-delay:.15s}
#mob-nav.open .mob-link:nth-child(5){transition-delay:.20s}
#mob-nav.open .mob-link:nth-child(6){transition-delay:.25s}
#mob-nav.open .mob-link:nth-child(7){transition-delay:.30s}
#mob-nav.open .mob-link:nth-child(8){transition-delay:.35s}
#mob-nav.open .mob-link:nth-child(9){transition-delay:.40s}
#mob-nav.open .mob-link:nth-child(10){transition-delay:.45s}
#mob-nav.open .mob-link:nth-child(11){transition-delay:.50s}
#mob-nav.open .mob-link:nth-child(12){transition-delay:.55s}
.mob-link:hover{color:var(--cream)}
.mob-link .mob-num{font-size:.6rem;letter-spacing:.3em;vertical-align:super;margin-right:10px;color:var(--gold);font-family:var(--font-b)}
.mob-book{margin-top:40px;font-family:var(--font-b);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);background:transparent;border:1px solid var(--gold);padding:14px 36px;text-decoration:none;transform:translateY(30px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease),color .3s,background .3s}
#mob-nav.open .mob-book{opacity:1;transform:translateY(0);transition-delay:.62s}
.mob-book:hover{background:var(--gold);color:var(--black)}
.mob-social{display:flex;gap:28px;margin-top:32px;transform:translateY(20px);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease)}
#mob-nav.open .mob-social{opacity:1;transform:translateY(0);transition-delay:.72s}
.mob-social a{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.3);text-decoration:none;transition:color .2s}
.mob-social a:hover{color:var(--gold)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  nav{padding:20px 24px}
  nav.stuck{padding:14px 24px}
  .nav-links{display:none}
  .nav-btn{display:none}
  .nav-burger{display:flex}
  .about-wrap,.bar-wrap{grid-template-columns:1fr;gap:52px;padding:0 24px}
  .about-img-over,.bar-img-over{display:none}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:240px 240px 240px}
  .gallery-grid .g-item:nth-child(1){grid-row:span 1}
  .ft-inner{grid-template-columns:1fr 1fr;gap:36px}
}
@media(max-width:600px){
  .gallery-wrap,.book-wrap,.about-wrap,.bar-wrap{padding:0 24px}
  .gallery-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .gallery-grid .g-item{height:260px}
  .ft-inner{grid-template-columns:1fr}
  footer{padding:52px 24px 24px}
  .hero-btns{flex-direction:column;align-items:center}
  .book-hours{gap:28px}
}

/* ── DARK SECTION OVERRIDES (hero, nav, atmosphere, footer, drinks) ── */
/* --muted is set for light sections; dark sections need explicit light text */
#hero .scroll-lbl,
#hero .hero-sub,
#atmosphere p,
.df-content,
footer .ft-tagline,
footer .ft-col a,
footer .ft-col p{color:rgba(245,240,232,.55)}
#hero .hero-eyebrow-i,
#hero .scroll-bar{color:rgba(245,240,232,.55)}
nav .nav-links a{color:rgba(245,240,232,.55)}
nav .nav-links a:hover{color:#F5F0E8}
.loader-word{color:#F5F0E8}
/* Light section headings */
.light-section .s-title{color:#2a241c}
.light-section .s-label{color:var(--gold)}
.light-section .gallery-header .s-title{color:#2a241c}
/* Bar section text */
#bar-section .s-title{color:#2a241c}
/* About s-title */
#about .s-title{color:#2a241c}

/* Light section text */
#about .s-title, #gallery .s-title, #bar-section .s-title { color:#2a241c }
#about .s-label, #gallery .s-label, #bar-section .s-label { color:var(--gold) }
#about .stat-l { color:rgba(8,28,16,.5) }
/* Dark section muted text */
#hero .hero-eyebrow-i, .scroll-lbl, #hero .hero-sub,
#atmosphere p, .df-content, footer .ft-tagline,
footer .ft-col a, footer .ft-col p { color:rgba(245,240,232,.55) }
nav .nav-links a { color:rgba(245,240,232,.55) }
nav .nav-links a:hover { color:#F5F0E8 }
.book-hours { border-top:1px solid rgba(245,240,232,.12) }
.h-label { color:rgba(245,240,232,.45) }

/* ╔══════════════════════════════════════════════════════╗
   ║  THE BOBBIN — BOTANICAL DESIGN SYSTEM               ║
   ║  Colours pulled from the King St building & mural   ║
   ╚══════════════════════════════════════════════════════╝ */

/* ── Root overrides matching building photo ── */
:root {
  --green-deep:   #0D2B1E;
  --green-rich:   #1A4A2E;
  --green-bright: #3DB56E;
  --green-vivid:  #52CC80;
  --green-light:  #A8DDB8;  /* fresh botanical mint — student, new growth */
  --pink:         #E8417A;
  --pink-light:   #F4A0C0;
  --orange:       #E8732A;
  --yellow:       #D4A843;
  --yellow-warm:  #E0BC3A;  /* whisky amber — reviews, weekend hours, warmth */
  --cream:        #F5F0E8;
  --teal:         #143C3C;
  --red-deep:     #7C1C1C;  /* deep wine red — spirits, depth, private hire */
  --red-light:    #E86565;  /* vivid coral red — events, urgency, energy */
  --blue-deep:    #0F1E35;  /* Aberdeen night sky — dark sections, depth */
  --blue-dark:    #1C3D6B;  /* North Sea — sports, cold drinks */
  --blue-mid:     #3975B0;  /* TV screen blue — live sport, draught, modern */
  --blue-light:   #7BBCE0;  /* frosted lager — cold, crisp, fresh */
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px }
::-webkit-scrollbar-track { background: var(--green-deep) }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--blue-mid), var(--pink), var(--yellow-warm), var(--green-bright), var(--orange)) }

/* ── Loader line → full-spectrum gradient ── */
.l-line { background: linear-gradient(90deg, var(--blue-mid), var(--green-bright), var(--pink), var(--yellow-warm), var(--orange)) !important }

/* ── Cursor: pink dot, green ring ── */

/* ── Nav: green ring on logo, pink CTA ── */
.nav-logo { letter-spacing: .06em }
.nav-links a::after { background: var(--green-bright) !important }
.nav-btn {
  background: var(--pink) !important;
  border-color: var(--pink) !important;
  color: #fff !important;
}
.nav-btn::before { background: var(--green-rich) !important }
.nav-btn:hover { color: var(--cream) !important }

/* ── Ticker: mural pink with leaf separators ── */
.ticker {
  background: var(--pink) !important;
  border: none !important;
}
.ticker-track span { color: rgba(255,248,242,.95) !important }
.ticker-track .sep { color: rgba(255,255,255,.55) !important }

/* ── Hero: botanical gradient overlay tint ── */
.hero-bg { filter: brightness(.35) saturate(1.1) !important }

/* ── About: green accent bar on stats ── */
.about-stats { border-top-color: rgba(61,181,110,.25) !important }
.stat-n { color: var(--green-bright) !important }
.about-badge { background: var(--pink) !important }

/* ── S-labels → bright botanical green ── */
.s-label { color: var(--green-bright) !important }
#about .s-label,
#gallery .s-label,
#bar-section .s-label { color: var(--green-bright) !important }

/* ── Sports tags ── */
.sports-eyebrow { color: var(--blue-light) !important }
.sports-h em    { color: var(--pink) !important }
.sports-tag::before { background: var(--blue-mid) !important }
.sports-tag:hover { border-color: var(--blue-light) !important; color: #fff !important }
.sports-tag.selected { background: var(--blue-mid) !important; border-color: var(--blue-mid) !important; color: #fff !important }
.sports-stat-n { color: var(--blue-light) !important }
/* Sports section — night-match atmosphere with deep blue undertone */
#sports { background: linear-gradient(175deg, #0D2B1E 0%, #0F1E35 55%, #0D2B1E 100%) !important }

/* ── Menu tabs ── */
.menu-tab:hover { border-color: var(--green-bright) !important; color: var(--green-bright) !important }
.menu-tab.active { background: var(--pink) !important; color: #fff !important; border-color: var(--pink) !important }
.menu-item-price { color: var(--pink) !important }
.menu-section-title { border-left-color: var(--green-bright) !important; color: var(--green-rich) !important }
.menu-item:hover { background: rgba(61,181,110,.04) !important }

/* ── Buttons: pink fill, green outline ── */
.btn-gold {
  background: var(--pink) !important;
  color: #fff !important;
}
.btn-gold:hover { box-shadow: 0 16px 40px rgba(232,65,122,.35) !important }
.btn-gold-outline {
  border-color: var(--green-bright) !important;
  color: var(--green-bright) !important;
}
.btn-gold-outline::before { background: var(--green-bright) !important }
.btn-gold-outline:hover { color: var(--green-deep) !important }
.btn-outline { border-color: rgba(61,181,110,.35) !important; color: var(--cream) !important }
.btn-outline:hover { border-color: var(--green-bright) !important }
.btn-dark { background: var(--green-rich) !important; color: var(--cream) !important }

/* ── Atmosphere section text ── */
.atm-big em { color: var(--pink) !important }

/* ── Book section ── */
#book { border-top-color: var(--pink) !important; background: #0D2318 !important }
#book::before { color: rgba(61,181,110,.04) !important }
.h-label { color: rgba(245,240,232,.45) !important }
.book-hours { border-top-color: rgba(61,181,110,.15) !important }
.scroll-bar { background: linear-gradient(to bottom, var(--green-bright), transparent) !important }

/* ── Student section ── */
.stu-ticker { background: var(--blue-dark) !important }
.stu-ticker-track span { color: rgba(255,248,242,.95) !important }
.stu-ticker-track .stu-dot { color: rgba(123,188,224,.5) !important }
/* Tags alternate: pink / green-light / blue-mid / yellow-warm */
.stu-tag { background: var(--pink) !important; color: #fff !important }
.stu-tag:nth-child(2n)   { background: var(--green-light) !important; color: var(--green-deep) !important }
.stu-tag:nth-child(3n)   { background: var(--blue-mid)    !important; color: #fff !important }
.stu-tag:nth-child(4n)   { background: var(--yellow-warm) !important; color: var(--green-deep) !important }
.stu-number { -webkit-text-stroke: 1px rgba(61,181,110,.25) !important }
.stu-number-fill {
  background: linear-gradient(135deg, var(--pink) 0%, var(--yellow-warm) 30%, var(--orange) 55%, var(--blue-light) 85%, var(--green-bright) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}
.stu-perk-icon { border-color: rgba(123,188,224,.35) !important }
.stu-grid {
  background-image:
    linear-gradient(rgba(57,117,176,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,221,184,.2) 1px, transparent 1px) !important;
  opacity: .06 !important;
}

/* ── Footer ── */
.ft-col h4 { color: var(--green-bright) !important }
.ft-social a:hover { color: var(--pink) !important }
footer { border-top: 1px solid rgba(57,117,176,.18) !important }
.ft-bottom { border-top-color: rgba(57,117,176,.12) !important }

/* ── Gallery image filter ── */
.g-item img { filter: brightness(.78) saturate(.8) !important }
.g-item:hover img { filter: brightness(1) saturate(1.1) !important }
.g-label { color: var(--green-bright) !important }

/* ══════════════════════════════════════════════════
   BOTANICAL FLORA SYSTEM
   Inspired by The Bobbin's King Street mural
   ══════════════════════════════════════════════════ */

/* ─── Base flower + animation ─── */
.flora { position: absolute; pointer-events: none; z-index: 2 }
.flora svg { display: block; width: 100%; height: 100% }

@keyframes sway      { 0%,100%{transform:rotate(-6deg) scale(1)}   50%{transform:rotate(6deg) scale(1.04)} }
@keyframes sway2     { 0%,100%{transform:rotate(4deg)  scale(1)}   50%{transform:rotate(-5deg) scale(.97)} }
@keyframes drift     { 0%,100%{transform:translateY(0) rotate(0)}  50%{transform:translateY(-14px) rotate(4deg)} }
@keyframes drift2    { 0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(3deg)} }
@keyframes spinSlow  { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes petalFall { 0%{opacity:0;transform:translateY(-20px) rotate(0deg)} 20%{opacity:1} 80%{opacity:.6} 100%{opacity:0;transform:translateY(60px) rotate(180deg)} }
@keyframes bloomIn   { from{transform:scale(0) rotate(-30deg);opacity:0} to{transform:scale(1) rotate(0deg);opacity:1} }

/* ─── Section-specific placements ─── */

/* Hero */
.flora-hero-tr { top:7%; right:4%; width:110px; opacity:.5; animation:sway 7s ease-in-out infinite }
.flora-hero-tl { top:10%; left:3%; width:75px; opacity:.35; animation:sway2 9s ease-in-out infinite; animation-delay:.8s }
.flora-hero-br { bottom:16%; right:8%; width:65px; opacity:.3; animation:drift 8s ease-in-out infinite; animation-delay:.4s }
.flora-hero-bl { bottom:20%; left:6%; width:55px; opacity:.28; animation:drift2 10s ease-in-out infinite; animation-delay:1.5s }
.flora-hero-mid { top:40%; right:2%; width:45px; opacity:.22; animation:sway 11s ease-in-out infinite; animation-delay:2s }

/* Ticker flowers between items */
.flora-tick { display:inline-flex; align-items:center; vertical-align:middle; width:22px; height:22px; margin:0 4px }

/* Botanical divider strip between sections */
.flora-divider {
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:10px 0; position:relative; z-index:5; overflow:hidden;
}
.flora-divider-dark { background:var(--green-deep) }
.flora-divider-light { background:var(--cream) }
.flora-divider-line {
  flex:1; height:1px; max-width:220px;
  background:linear-gradient(90deg,transparent,rgba(61,181,110,.4),transparent);
}
.flora-divider-line-pink {
  flex:1; height:1px; max-width:220px;
  background:linear-gradient(90deg,transparent,rgba(232,65,122,.35),transparent);
}
.flora-divider .flora { position:relative; width:32px; height:32px; z-index:1 }

/* About section */
.flora-about-1 { top:15px; right:15px; width:80px; opacity:.22; animation:sway 8s ease-in-out infinite }
.flora-about-2 { bottom:30px; left:10px; width:60px; opacity:.18; animation:drift2 10s ease-in-out infinite; animation-delay:1s }
.flora-about-3 { top:45%; right:-10px; width:50px; opacity:.15; animation:sway2 9s ease-in-out infinite; animation-delay:.6s }
.flora-about-4 { top:25%; left:-5px; width:40px; opacity:.12; animation:drift 12s ease-in-out infinite; animation-delay:1.8s }

/* Drinks feature */
.flora-df-tr { top:8%; right:6%; width:85px; opacity:.35; animation:sway 7s ease-in-out infinite }
.flora-df-tl { top:12%; left:5%; width:65px; opacity:.28; animation:sway2 9s ease-in-out infinite; animation-delay:.7s }
.flora-df-br { bottom:10%; right:5%; width:55px; opacity:.25; animation:drift 8s ease-in-out infinite; animation-delay:1.2s }
.flora-df-bl { bottom:14%; left:4%; width:50px; opacity:.22; animation:drift2 11s ease-in-out infinite; animation-delay:.3s }

/* Gallery */
.flora-gal-1 { top:-18px; right:50px; width:70px; opacity:.28; animation:sway 8s ease-in-out infinite }
.flora-gal-2 { bottom:-12px; left:40px; width:55px; opacity:.22; animation:drift 9s ease-in-out infinite; animation-delay:.9s }
.flora-gal-3 { top:50%; right:-10px; width:45px; opacity:.18; animation:sway2 11s ease-in-out infinite; animation-delay:1.4s; transform:translateY(-50%) }

/* Atmosphere */
.flora-atm-1 { top:10%; left:4%; width:95px; opacity:.3; animation:sway 8s ease-in-out infinite }
.flora-atm-2 { top:10%; right:4%; width:80px; opacity:.25; animation:sway2 9s ease-in-out infinite; animation-delay:.5s }
.flora-atm-3 { bottom:12%; left:7%; width:65px; opacity:.22; animation:drift 10s ease-in-out infinite; animation-delay:1s }
.flora-atm-4 { bottom:12%; right:6%; width:65px; opacity:.22; animation:drift2 10s ease-in-out infinite; animation-delay:.3s }
.flora-atm-5 { top:50%; left:1%; width:45px; opacity:.15; animation:sway 12s ease-in-out infinite; animation-delay:2s; transform:translateY(-50%) }
.flora-atm-6 { top:50%; right:1%; width:45px; opacity:.15; animation:sway2 12s ease-in-out infinite; animation-delay:1.5s; transform:translateY(-50%) }

/* Student */
.flora-stu-1 { top:10%; right:3%; width:85px; opacity:.2; animation:sway 8s ease-in-out infinite }
.flora-stu-2 { bottom:8%; left:2%; width:70px; opacity:.18; animation:drift2 10s ease-in-out infinite; animation-delay:1.2s }
.flora-stu-3 { top:50%; left:1%; width:50px; opacity:.12; animation:sway2 11s ease-in-out infinite; animation-delay:.6s }

/* Book/CTA */
.flora-book-1 { top:18px; left:4%; width:75px; opacity:.2; animation:sway 9s ease-in-out infinite }
.flora-book-2 { top:18px; right:4%; width:70px; opacity:.2; animation:sway2 9s ease-in-out infinite; animation-delay:.6s }
.flora-book-3 { bottom:18px; left:6%; width:55px; opacity:.15; animation:drift 11s ease-in-out infinite; animation-delay:1.3s }
.flora-book-4 { bottom:18px; right:6%; width:55px; opacity:.15; animation:drift2 11s ease-in-out infinite; animation-delay:.4s }

/* Footer */
.flora-ft-1 { top:24px; right:48px; width:55px; opacity:.12; animation:sway 10s ease-in-out infinite }
.flora-ft-2 { bottom:48px; left:44px; width:45px; opacity:.10; animation:drift 12s ease-in-out infinite; animation-delay:1s }

/* Bar/menu */
.flora-menu-1 { top:-8px; right:36px; width:65px; opacity:.2; animation:sway 8s ease-in-out infinite }
.flora-menu-2 { bottom:-8px; left:28px; width:50px; opacity:.16; animation:drift2 10s ease-in-out infinite; animation-delay:.8s }

/* Sports */
.flora-sports-1 { bottom:10%; right:5%; width:70px; opacity:.2; animation:sway 9s ease-in-out infinite }
.flora-sports-2 { bottom:10%; left:5%; width:60px; opacity:.18; animation:sway2 11s ease-in-out infinite; animation-delay:.7s }

/* ─── Scattered petals overlay for light sections ─── */
.petal { position:absolute; pointer-events:none; z-index:1; border-radius:0 50% 50% 50% }
@keyframes petalDrift {
  0%,100% { transform:rotate(45deg) translateY(0) }
  50%      { transform:rotate(55deg) translateY(-10px) }
}

/* ════════════════════════════════════════════════════
   MOBILE OPTIMISATION — v11
   Three passes: quick wins / layout reflow / performance
   ════════════════════════════════════════════════════ */

/* ── PASS 1: Touch device — disable custom cursor ── */
@media (pointer:coarse) {
  body { cursor:auto !important }
    a, button, [onclick], .sports-tag, .ms-tab,
  .ms-panel, .g-item, .bar-feat, .nav-btn,
  .btn-gold, .btn-outline, .btn-gold-outline, .btn-dark,
  .mob-book, .gal-btn, .gal-dot, .pol-card,
  .gal-filter, .ms-cta, .mob-link { cursor:pointer !important }
}

/* ── PASS 1: Minimum tap targets (44px) ── */
@media (pointer:coarse) {
  .sports-tag { min-height:44px; padding:12px 20px !important }
  .ms-tab     { min-height:44px; padding:11px 16px !important }
  .nav-btn    { min-height:44px }
  .nav-burger { min-height:44px; min-width:44px }
  .mob-link   { min-height:52px; display:flex; align-items:center }
  .ms-close   { width:52px; height:52px }
  .hire-submit{ min-height:52px }
  .btn-gold, .btn-outline, .btn-gold-outline, .btn-dark { min-height:48px }
  .gal-btn { min-width:48px; min-height:48px }
  .gal-dot  { padding:18px 4px; box-sizing:content-box }
}

/* ── PASS 2: 960px tablet ── */
@media (max-width:960px) {
  /* sections — reduce vertical padding */
  #about, #gallery, #bar-section, #private-hire { padding:90px 0 }
  #events { padding:80px 0 }
  #reviews { padding:64px 0 }
  #book { padding:80px 0 }

  /* hero */
  .hero-h1 { font-size:clamp(2.6rem,8vw,5rem) }

  /* sports stat row — wrap and tighten */
  .sports-screens { flex-wrap:wrap; justify-content:center; gap:24px; padding:44px 24px }
  .sports-screens .sports-stat { min-width:100px }
  .sports-screens .sports-divider { display:none }

  /* menu split panels on tablet — stacked, fixed height */
  .ms-wrap { height:auto; min-height:auto; flex-direction:column }
  .ms-panel { height:380px; min-height:280px; flex:none !important }

  /* private hire form rows collapse early */
  .ph-row { grid-template-columns:1fr }
}

/* ── PASS 2: 768px ── */
@media (max-width:768px) {
  /* nav */
  nav { padding:18px 20px }
  nav.stuck { padding:12px 20px }
  .nav-logo { font-size:1.3rem }

  /* hero */
  .hero-h1 { font-size:clamp(2.6rem,8vw,5rem); line-height:.95 }
  .hero-sub { font-size:.85rem }
  #hero { min-height:100svh } /* use svh on mobile to avoid browser chrome issue */

  /* about */
  .about-wrap { padding:0 20px; gap:36px }
  .about-badge { left:-10px; width:76px; height:76px }
  .about-stats { gap:28px; flex-wrap:wrap }

  /* gallery */
  .gallery-wrap { padding:0 20px }
  .gallery-header { flex-direction:column; align-items:flex-start; gap:20px; margin-bottom:36px }
  .gallery-header .btn-outline { width:100%; text-align:center; white-space:normal }
  .gallery-grid { gap:4px }

  /* drinks feature */
  .df-quote { font-size:clamp(1.5rem,5vw,2.4rem) }

  /* bar section */
  .bar-wrap { padding:0 20px; gap:36px }
  .bar-features { gap:14px }

  /* atmosphere */
  .atm-big { font-size:clamp(2.4rem,12vw,5rem) }

  /* sports */
  .sports-content { padding:0 20px }
  .sports-h { font-size:clamp(3rem,11vw,6rem) }
  .sports-screens { padding:36px 20px; gap:20px }
  .sports-stat-n { font-size:2rem }

  /* book section */
  .book-wrap { padding:0 20px }
  .book-hours { flex-wrap:wrap; gap:20px; justify-content:flex-start }
  .h-group { min-width:140px }

  /* footer */
  .ft-inner { padding:0 20px }

  /* events */
  .ev-wrap { padding:0 20px }

  /* anchor banner */
  #anchor-banner { padding:80px 20px }
  .ab-heading { font-size:clamp(2.8rem,12vw,5rem) }
  .ab-sub { font-size:.9rem }
  .ab-btns { flex-direction:column; align-items:center }
  .ab-btns a { width:100%; max-width:320px; text-align:center }
}

/* ── PASS 2: 480px small phones ── */
@media (max-width:480px) {
  /* section padding */
  #about, #gallery, #bar-section, #private-hire,
  #events, #reviews, #book, #anchor-banner { padding:64px 0 }
  #student { min-height:auto }

  /* hero — tighten spacing so nothing overlaps */
  #hero { min-height:100svh }
  .hero-content { padding:0 28px }
  .hero-eyebrow-i { font-size:.58rem; letter-spacing:.28em; margin-bottom:10px }
  .hero-h1 { font-size:clamp(2.2rem,7.5vw,3.6rem); margin-bottom:16px; letter-spacing:-.02em }
  .hero-sub { font-size:.82rem; margin-bottom:28px }
  .hero-btns { gap:10px }
  .hero-scroll { bottom:24px }
  /* flora — shrink corner pieces, hide the ones that cut across content */
  .flora-hero-tr  { width:68px; top:6%; right:3% }
  .flora-hero-tl  { display:none }
  .flora-hero-mid { display:none }
  .flora-hero-br  { display:none }
  .flora-hero-bl  { display:none }

  /* ticker */
  .ticker-track span { font-size:.78rem; padding:0 18px }

  /* about */
  .about-wrap { padding:0 16px }
  .stat-n { font-size:2.2rem }
  .about-stats { gap:20px }

  /* gallery */
  .gallery-wrap { padding:0 16px }

  /* sports tags — two per row */
  .sports-tags { gap:6px }
  .sports-tag { flex:1; min-width:calc(50% - 6px); text-align:center; justify-content:center; display:flex; align-items:center }

  /* menu split — fixed heights match the menu section redesign */
  .ms-panel { height:300px !important; min-height:300px !important }
  .ms-title { font-size:2.8rem !important }

  /* menu modal — full screen, slide up from bottom on mobile */
  .ms-modal-inner { border-radius:0 }
  .ms-modal-header { padding:16px 16px 12px }
  .ms-tabs { padding:12px 16px 0; gap:4px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch }
  .ms-tab { flex-shrink:0; font-size:.56rem; padding:9px 12px }
  .ms-modal-body { padding:20px 16px 40px; -webkit-overflow-scrolling:touch }

  /* bar section */
  .bar-wrap { padding:0 16px }
  .bar-feat { padding:14px }

  /* book */
  .book-wrap { padding:0 16px }
  .book-hours { gap:16px }
  .h-group { min-width:120px }
  .book-btns { flex-direction:column; align-items:stretch }
  .book-btns a { text-align:center }

  /* reviews */
  .rev-wrap { padding:0 16px }
  .rev-score { font-size:2.4rem }

  /* private hire */
  .ph-wrap { padding:0 16px }
  .ph-form-wrap { padding:32px 24px }
  .ph-row { grid-template-columns:1fr }

  /* events */
  .ev-wrap { padding:0 16px }
  .ev-day { font-size:2.8rem }
  .ev-cta-row .btn-gold-outline { width:100%; text-align:center }

  /* anchor banner */
  #anchor-banner { padding:64px 16px }
  .ab-heading { font-size:clamp(2.4rem,16vw,4rem) }
  .ab-divider { display:none }

  /* footer */
  .ft-logo { font-size:1.8rem }
  footer { padding:48px 16px 24px }
  .ft-inner { gap:28px; padding:0 }
  .ft-bottom { flex-direction:column; gap:12px; text-align:center }
  .ft-social { justify-content:center }
}

/* ── PASS 2: Very small (SE, 375px) ── */
@media (max-width:375px) {
  .hero-h1 { font-size:clamp(1.9rem,8vw,3rem); margin-bottom:12px; letter-spacing:-.02em }
  .hero-sub { margin-bottom:22px }
  .flora-hero-tr { width:54px }
  .flora-hero-br, .flora-hero-bl { display:none }
  .s-title  { font-size:clamp(2rem,10vw,3.5rem) }
  .sports-h { font-size:clamp(2.4rem,13vw,4rem) }
  .mob-link { font-size:clamp(2.2rem,10vw,4rem) }
  /* carousel — very small screens */
  .gal-counter { display:none }
  .gal-btn { width:34px; height:34px }
  .gal-prev { left:6px }
  .gal-next { right:6px }
  .gal-carousel { height:260px }
}

/* ── PASS 3: prefers-reduced-motion ── */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ticker-track, .stu-marquee-track, .stu-strip-track { animation:none !important }
  .flora, .about-badge { animation:none !important }
  .hero-bg, .df-bg, .atm-bg { will-change:auto }
}

/* ── PASS 3: Safe area insets (notched phones) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  footer { padding-bottom:calc(24px + env(safe-area-inset-bottom)) }
  #mob-nav { padding-bottom:env(safe-area-inset-bottom) }
}

/* ── PASS 3: iOS momentum scroll on modals ── */
.ms-modal-body { -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
#mob-nav { overscroll-behavior:contain }

/* ── PASS 3: Prevent text size inflation on iOS ── */
html { -webkit-text-size-adjust:100% }

/* ════════════════════════════════════════════════════
   MOBILE DELIGHT — v12
   Touch feedback · Menu fix · Parallax disable · UX polish
   ════════════════════════════════════════════════════ */

/* Remove native iOS/Android blue tap flash on all elements */
* { -webkit-tap-highlight-color: transparent; }

/* ── Menu panels: always show CTAs & categories on touch ──
   On desktop these reveal on hover (.expanded class via mouseenter).
   On touch there's no hover — force-show everything. ── */
@media (pointer:coarse) {
  .ms-panel .ms-eyebrow { opacity:1 !important; transform:translateY(0) !important; }
  .ms-panel .ms-cats    { opacity:1 !important; transform:translateY(0) !important; }
  .ms-panel .ms-cta     { opacity:1 !important; transform:translateY(0) !important; pointer-events:all !important; }
  .ms-panel .ms-vert-label { display:none; }
  .ms-panel .ms-flora   { opacity:.3; }
  .ms-panel.expanded .ms-title::after { width:50px; }
}

/* ── Sports tags: horizontal swipe strip on mobile ──
   On desktop tags wrap into a grid. On mobile, swipe sideways
   with a fade-right gradient hinting there are more. ── */
@media (max-width:768px) {
  #sports-tags {
    overflow-x:auto;
    flex-wrap:nowrap !important;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:6px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right, black 80%, transparent 100%);
    mask-image:linear-gradient(to right, black 80%, transparent 100%);
  }
  #sports-tags::-webkit-scrollbar { display:none; }
  .sports-tag {
    flex:none !important;
    flex-shrink:0 !important;
    min-width:auto !important;
    scroll-snap-align:start;
  }
}

/* ── Gallery tap zoom — replaces hover zoom for touch users ── */
@media (pointer:coarse) {
  .g-item:active img {
    transform:scale(1.05) !important;
    filter:brightness(.9) saturate(.95) !important;
    transition:transform .18s ease, filter .18s ease !important;
  }
  .g-label { opacity:1 !important; } /* always show label on touch */
  .gal-slide .g-label { opacity:1 !important; }
  .gal-btn:active { background:rgba(232,65,122,.3) !important; border-color:var(--gold) !important; }
}

/* ── Touch active / pressed states for all interactive elements ── */
@media (pointer:coarse) {

  /* Primary buttons */
  .btn-gold:active  { transform:scale(0.95) !important; box-shadow:none !important; }
  .btn-dark:active  { transform:scale(0.95) !important; box-shadow:none !important; }
  .btn-outline:active { background:rgba(242,236,224,.15) !important; }
  .btn-gold-outline:active::before { transform:scaleX(1) !important; }
  .btn-gold-outline:active { color:var(--black) !important; }

  /* Nav */
  .nav-btn:active   { background:var(--gold) !important; color:var(--black) !important; }
  .nav-burger:active span { background:var(--gold) !important; }

  /* Mobile overlay nav */
  .mob-link:active  { color:var(--cream) !important; }
  .mob-book:active  { background:var(--gold) !important; color:var(--black) !important; }

  /* Sports section */
  .sports-tag:active { transform:scale(0.93) !important; background:rgba(232,65,122,.18) !important; }

  /* Show swipe hint on touch devices */
  .sports-swipe-hint { display:block; }

  /* Menu split */
  .ms-cta:active    { transform:scale(0.96) !important; opacity:.85 !important; }
  .ms-tab:active    { opacity:.6 !important; }
  .ms-close:active  { border-color:var(--pink) !important; color:var(--pink) !important; transform:rotate(90deg) !important; }

  /* Cards & features */
  .ev-card:active              { background:#1A4A2E !important; }
  .ev-card:active::before      { transform:scaleX(1) !important; }
  .rev-card:active             { transform:translateY(-3px) !important; box-shadow:0 10px 28px rgba(8,28,16,.1) !important; }
  .bar-feat:active             { border-color:rgba(232,65,122,.35) !important; background:rgba(232,65,122,.06) !important; }
  .about-img-main:active       { filter:brightness(1) saturate(1) !important; }
  .stu-pill:active             { border-color:#E8732A !important; color:#E8732A !important; }

  /* Form */
  .hire-submit:active          { transform:scale(0.97) !important; }
  .ph-field input:active,
  .ph-field select:active,
  .ph-field textarea:active    { border-color:var(--gold) !important; }
}

/* ── Modals: bottom-sheet style on mobile ──
   Slide up from below with rounded top corners & drag handle. ── */
@media (max-width:768px) {
  .ms-modal-inner {
    border-radius:20px 20px 0 0;
    max-height:92svh;
  }
  /* Drag handle indicator */
  .ms-modal-header { position:relative; }
  .ms-modal-header::before {
    content:'';
    position:absolute;
    top:11px; left:50%;
    transform:translateX(-50%);
    width:38px; height:3px;
    background:rgba(245,240,232,.22);
    border-radius:2px;
    pointer-events:none;
  }
  .ms-modal-header { padding-top:32px; }
}

/* ── Menu panels on touch: content-bottom gap tweak only ──
   Height is now governed by the mobile breakpoint redesign above.
   Do NOT override panel heights here — that was the root cause of
   the DRINK overlap across multiple previous versions. ── */
@media (pointer:coarse) {
  .ms-content-bottom { gap:12px; }
}

/* ── Book section: tap-friendly map link ── */
@media (pointer:coarse) {
  /* make the "Open in Google Maps" link feel like a button on touch */
  .book-map a[href*="maps.google"] {
    display:inline-flex !important;
    align-items:center;
    padding:12px 0 !important;
    font-size:.75rem !important;
  }
}

/* ── ACCESSIBILITY: Respect reduced-motion preference ──
   Users who set "reduce motion" in OS settings get
   instant transitions instead of elaborate animations.
   This also improves performance on low-end devices. ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-scroll { animation:none; opacity:1; }
  .scroll-bar  { animation:none; }
  .ticker-track { animation-duration:0s !important; }
  .fu { opacity:1; transform:none; }
  .curtain::after { transform:scaleX(0) !important; }
  .ms-bg { transition:none !important; }
}


/* ══════════════════════════════════════════════════
   GALLERY UPGRADE — Polaroid / Interactive
   ══════════════════════════════════════════════════ */

#gallery { padding-bottom: 100px }

.gallery-header-new {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 52px; gap: 24px; flex-wrap: wrap;
}

.gal-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.gal-filter {
  font-family: var(--font-b); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; padding: 9px 20px;
  border: 1px solid rgba(13,43,30,.22);
  background: transparent; color: rgba(13,43,30,.5);
  cursor: none; position: relative; overflow: hidden;
  transition: color .3s var(--ease), border-color .3s;
}
.gal-filter::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pink); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.gal-filter span { position: relative; z-index: 1 }
.gal-filter:hover { color: var(--pink); border-color: var(--pink) }
.gal-filter.active::before { transform: scaleX(1) }
.gal-filter.active { border-color: var(--pink) !important; color: #fff !important }

.pol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 16px 8px 8px;
}

.pol-card {
  position: relative; z-index: 1;
  transform: rotate(var(--rot, 0deg));
  transition: transform .55s var(--ease), z-index 0s .55s, filter .4s;
  will-change: transform;
}
.pol-card:hover {
  transform: rotate(0deg) scale(1.05) translateY(-10px) !important;
  z-index: 10 !important;
  transition: transform .4s var(--ease), z-index 0s 0s !important;
  filter: drop-shadow(0 24px 48px rgba(13,43,30,.28));
}
.pol-inner {
  background: #fff;
  padding: 10px 10px 100px;
  box-shadow: 0 4px 20px rgba(13,43,30,.1), 0 1px 4px rgba(13,43,30,.06);
  transform-style: preserve-3d;
  transition: box-shadow .4s, transform .15s;
  will-change: transform;
}
.pol-photo {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(13,43,30,.08);
}
.pol-photo img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
  filter: brightness(.82) saturate(.85);
  transition: transform .65s var(--ease), filter .4s;
}
.pol-card:hover .pol-photo img {
  transform: scale(1.07);
  filter: brightness(1) saturate(1.15);
}
.pol-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 45%, rgba(255,255,255,.06) 100%);
  transition: opacity .3s; mix-blend-mode: overlay;
}
.pol-card:hover .pol-shine { opacity: 1 }

.pol-expand {
  position: absolute; top: 10px; right: 10px; z-index: 5;
  width: 34px; height: 34px; background: var(--pink);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: .9rem; font-weight: 700;
  opacity: 0; transform: scale(.6) rotate(-30deg);
  transition: opacity .3s var(--ease), transform .35s var(--ease);
}
.pol-card:hover .pol-expand { opacity: 1; transform: scale(1) rotate(0deg) }

.pol-caption-wrap {
  position: absolute; bottom: 0; left: 0; right: 0; min-height: 100px;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 10px 14px 12px; background: #fff;
}
.pol-caption { font-family: var(--font-d); font-size: .88rem; color: var(--text-dark); font-weight: 600; line-height: 1.2 }
.pol-memory {
  font-family: 'Caveat', cursive; font-size: 1.1rem; font-weight: 700;
  color: rgba(13,43,30,.82); line-height: 1.35;
}
.pol-cat-tag { display: none; }

.pol-tape {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(-2.5deg);
  width: 54px; height: 18px;
  background: rgba(232,65,122,.22); backdrop-filter: blur(2px); border-radius: 2px;
  z-index: 3;
}
.pol-tape-alt { transform: translateX(-50%) rotate(2.5deg); background: rgba(61,181,110,.22) }

.pol-card.filtered-out {
  opacity: 0; pointer-events: none;
  transform: scale(.84) rotate(0deg) !important;
  transition: opacity .35s, transform .35s var(--ease);
}

.pol-petal {
  position: absolute; pointer-events: none; z-index: 30;
  border-radius: 50% 50% 50% 0;
  animation: polPetalBurst .85s ease-out forwards;
}
@keyframes polPetalBurst {
  0%   { opacity: 1; transform: translate(-50%,-50%) rotate(var(--pr,0deg)) translateY(0) scale(1) }
  70%  { opacity: .7 }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(var(--pr,0deg)) translateY(var(--pd,-80px)) scale(.15) }
}

.gal-cta-strip {
  margin-top: 52px; display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}
.gal-petal-btn {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--green-deep); color: var(--cream);
  padding: 15px 34px; font-family: var(--font-b); font-size: .75rem;
  font-weight: 400; letter-spacing: .15em; text-transform: uppercase;
  cursor: none; position: relative; overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s;
}
.gal-petal-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--pink); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.gal-petal-btn:hover::before { transform: scaleX(1) }
.gal-petal-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(232,65,122,.3) }
.gal-petal-btn > * { position: relative; z-index: 1 }
.gpb-flower { width: 20px; height: 20px; animation: spinSlow 6s linear infinite; flex-shrink: 0 }

.gal-lightbox {
  position: fixed; inset: 0; z-index: 9500;
  background: rgba(8,24,14,.96); backdrop-filter: blur(20px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease);
}
.gal-lightbox.open { opacity: 1; pointer-events: all }

.lb-img-wrap {
  max-width: min(88vw, 1000px); max-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.lb-img-wrap img {
  max-width: 100%; max-height: 78vh; object-fit: contain;
  border: 8px solid #fff; display: block;
  opacity: 0; transform: scale(.9);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.gal-lightbox.open .lb-img-wrap img { opacity: 1; transform: scale(1) }

.lb-close {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--pink); border: none; color: #fff;
  font-size: 1.1rem; cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease), background .25s;
}
.lb-close:hover { transform: rotate(90deg) scale(1.1); background: #c41e5e }
.lb-prev, .lb-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: 1.1rem; cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, border-color .25s, transform .25s;
}
.lb-prev:hover, .lb-next:hover { background: var(--pink); border-color: var(--pink); transform: translateY(-50%) scale(1.1) }
.lb-prev { left: 24px } .lb-next { right: 24px }

.lb-info {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  text-align: center; white-space: nowrap;
}
.lb-caption-text { font-family: var(--font-d); font-size: 1.05rem; font-weight: 300; color: var(--cream); margin-bottom: 6px }
.lb-counter-text { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(245,240,232,.4) }

.lb-corner { position: absolute; width: 40px; height: 40px; border: 1.5px solid rgba(61,181,110,.35); pointer-events: none }
.lb-corner-tl { top: 60px; left: 60px; border-right: none; border-bottom: none }
.lb-corner-tr { top: 60px; right: 60px; border-left: none; border-bottom: none }
.lb-corner-bl { bottom: 60px; left: 60px; border-right: none; border-top: none }
.lb-corner-br { bottom: 60px; right: 60px; border-left: none; border-top: none }

@media(max-width: 900px) {
  .pol-grid { grid-template-columns: repeat(2,1fr); gap: 18px }
  .gallery-header-new { flex-direction: column; align-items: flex-start }
}
@media(max-width: 560px) {
  .pol-grid { grid-template-columns: 1fr; gap: 14px }
  .lb-corner { display: none }
  .lb-prev { left: 10px } .lb-next { right: 10px }
}

/* ══════════════════════════════════════════════════════════════
   SCROLL JOURNEY SYSTEM
   ══════════════════════════════════════════════════════════════ */

/* ── 1. Right-edge scroll progress bar ── */
#scroll-prog {
  position: fixed; top: 0; right: 0; width: 3px; height: 0;
  z-index: 9997; pointer-events: none; will-change: height;
  background: linear-gradient(to bottom, var(--pink), var(--green-bright), var(--orange));
  transform-origin: top center;
}

/* ── 2. Chapter badge ── */
.chapter-badge {
  position: fixed; bottom: 36px; left: 36px; z-index: 9996;
  display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateX(-18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
.chapter-badge.visible { opacity: 1; transform: translateX(0) }
.ch-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pink); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(232,65,122,.5);
  animation: chPing 2.2s ease-in-out infinite;
}
@keyframes chPing {
  0%,100% { box-shadow: 0 0 0 0 rgba(232,65,122,.5); transform: scale(1) }
  50%     { box-shadow: 0 0 0 7px rgba(232,65,122,0); transform: scale(1.2) }
}
.ch-text {
  font-family: var(--font-b); font-size: .58rem; letter-spacing: .32em;
  text-transform: uppercase; color: rgba(245,240,232,.7);
  background: rgba(8,24,14,.88); backdrop-filter: blur(10px);
  padding: 7px 14px; border: 1px solid rgba(232,65,122,.22);
}

/* ── 3. Horizontal wipe line ── */
.wipe-line {
  position: fixed; left: 0; width: 100%; height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--pink) 25%,
    var(--green-bright) 60%,
    var(--orange) 85%,
    transparent 100%);
  z-index: 9998; pointer-events: none;
  opacity: 0; transform: scaleX(0); transform-origin: left center;
}

/* ── 4. Section number stamps ── */
.journey-stamp {
  position: absolute;
  font-family: var(--font-d); font-weight: 700;
  font-size: 28vw; line-height: 1;
  top: 50%; left: 50%;
  white-space: nowrap; pointer-events: none;
  z-index: 0; opacity: 0;
  letter-spacing: -.04em;
  will-change: transform, opacity;
  user-select: none;
}

/* ── 5. Ambient colour overlay ── */
.journey-ambient {
  position: fixed; inset: 0; z-index: 9;
  pointer-events: none; mix-blend-mode: overlay;
  opacity: 0; will-change: background-color, opacity;
}

/* ── 6. Drinks feature word spans ── */
.df-w { display: inline-block }

/* ── 7. Section-level clip-path for content blocks ── */
.sj-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path .0s;
}
.sj-clip.open {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 1s var(--ease);
}

/* ── 8. About/bar image parallax wrappers ── */
.sj-parallax-wrap { overflow: visible !important }

/* ── 9. Section-divider "beam" that draws between each section ── */
.sj-beam {
  position: absolute; bottom: 0; left: 0; width: 0; height: 2px;
  background: linear-gradient(to right, var(--pink), var(--green-bright));
  z-index: 5; pointer-events: none;
}

/* ── 10. Atmosphere reveal ── */
.atm-big { will-change: transform, filter, opacity }

/* Responsive */
@media(max-width: 600px) {
  .chapter-badge { bottom: 20px; left: 20px }
  .journey-stamp { font-size: 42vw }
}
@media(max-width: 960px) {
  .chapter-badge { display: none }
}

/* ══════════════════════════════════════════════════
   FEELING SECTION — cinematic emotional hook
   ══════════════════════════════════════════════════ */
#feeling {
  position: relative;
  min-height: 100vh;
  background: #060e08;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#feeling::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(13,43,30,.6) 0%, transparent 70%);
  pointer-events: none;
}
.feel-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(24px, 8vw, 120px);
  max-width: 860px;
}
.feel-line {
  font-family: var(--font-d);
  font-size: clamp(2rem, 5vw, 4.2rem);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--cream);
  margin: 0 0 clamp(16px, 3vh, 36px);
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
}
.feel-line:last-child { margin-bottom: 0 }
.feel-line em {
  font-style: italic;
  color: var(--pink);
}
.feel-line--quiet {
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  color: rgba(245,240,232,.4);
  letter-spacing: .06em;
  font-style: italic;
  font-weight: 300;
}
.feel-grain {
  position: absolute;
  inset: 0;
  opacity: .04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px;
}
.feel-rule {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(232,65,122,.5), transparent);
  margin: clamp(32px, 6vh, 64px) auto;
  opacity: 0;
}

/* ══════════════════════════════════════════════════
   ABOUT — cinematic reframe
   ══════════════════════════════════════════════════ */
.about-reveal-title {
  font-family: var(--font-d);
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight: 300;
  line-height: 1.0;
  color: #2a241c;
  overflow: hidden;
}
.about-reveal-title em {
  font-style: italic;
  color: var(--pink);
}

/* ══════════════════════════════════════════════════
   ATMOSPHERE — PEAK — upgraded intensity
   ══════════════════════════════════════════════════ */
#atmosphere {
  height: 100vh;
  min-height: 640px;
}
.atm-bg {
  filter: brightness(.18) saturate(.4) !important;
}
.atm-content {
  max-width: 900px !important;
}
.atm-big {
  font-size: clamp(4rem, 12vw, 11rem) !important;
  letter-spacing: -.04em !important;
  line-height: .88 !important;
}
.atm-sub {
  font-size: clamp(.95rem, 1.8vw, 1.15rem);
  font-weight: 200;
  letter-spacing: .12em;
  color: rgba(245,240,232,.38);
  margin-top: 36px;
  line-height: 2;
}
.atm-rule {
  width: 60px;
  height: 1px;
  background: var(--pink);
  margin: 32px auto;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
}

/* ══════════════════════════════════════════════════
   BOOK — emotional redesign
   ══════════════════════════════════════════════════ */
.book-prelude {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 3.5vw, 2.8rem);
  font-weight: 300;
  font-style: italic;
  color: rgba(245,240,232,.55);
  line-height: 1.3;
  margin-bottom: 52px;
  opacity: 0;
  transform: translateY(28px);
}
.book-prelude em {
  font-style: normal;
  color: var(--cream);
}
.book-btns-delayed {
  opacity: 0;
  transform: translateY(22px);
}

/* ════ ADDITIONAL SECTION STYLES ════ */


#sports{position:relative}
.sports-hero{position:relative;height:90vh;min-height:580px;display:flex;align-items:center;overflow:hidden}
.sports-bg-layer{position:absolute;inset:-5%;background-size:cover;background-position:center;filter:brightness(.46) saturate(.75);will-change:transform,opacity;opacity:0;}
.sports-bg-layer.active{opacity:1}
.sports-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,30,18,.78) 0%,rgba(10,30,18,.28) 60%,transparent 100%);z-index:1}
.sports-content{position:relative;z-index:3;max-width:1200px;margin:0 auto;padding:0 52px;width:100%}
.sports-eyebrow{font-size:.65rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);margin-bottom:20px;display:block;overflow:hidden}
.sports-eyebrow span{display:block;transform:translateY(100%)}
.sports-h{font-family:var(--font-d);font-size:clamp(3.5rem,9vw,8rem);font-weight:300;line-height:.92;text-transform:uppercase;color:#F5F0E8;margin-bottom:36px}
.sports-h em{font-style:italic;color:var(--gold)}
.sports-sub{font-size:clamp(.9rem,1.6vw,1.1rem);font-weight:300;color:rgba(245,240,232,.55);max-width:480px;line-height:1.75;margin-bottom:36px}
.sports-active-label{font-family:var(--font-d);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin-bottom:12px;min-height:1.2em;opacity:.8;transition:opacity .2s}
.sports-tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.sports-swipe-hint{display:none;font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:rgba(245,240,232,.3);margin-bottom:24px}
.sports-tag{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;padding:11px 22px;border:1px solid rgba(245,240,232,.18);color:rgba(245,240,232,.45);cursor:pointer;opacity:0;transform:translateY(20px);transition:border-color .25s,color .25s,background .25s;user-select:none;position:relative;overflow:hidden;}
.sports-tag::before{content:'';position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(0.16,1,0.3,1);z-index:0;}
.sports-tag span{position:relative;z-index:1}
.sports-tag:hover{border-color:var(--gold);color:#F5F0E8}
.sports-tag:hover::before{transform:scaleX(1)}
.sports-tag.selected{background:var(--gold);border-color:var(--gold);color:#0D2B1E}
.sports-tag.selected::before{transform:scaleX(1)}
.sports-screens{display:flex;gap:32px;padding:60px 52px;max-width:1200px;margin:0 auto}
.sports-stat{text-align:center;flex:1}
.sports-stat-n{font-family:var(--font-d);font-size:clamp(2.5rem,5vw,4.5rem);font-weight:300;color:var(--gold);line-height:1;display:block}
.sports-stat-l{font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.4);display:block;margin-top:8px}
.sports-divider{width:1px;background:rgba(245,240,232,.08);align-self:stretch}
@media(max-width:768px){
  .sports-content{padding:0 24px}
  .sports-screens{padding:40px 24px;gap:20px}
  .sports-stat-n{font-size:2.2rem}
  .sports-tags{gap:8px}
  .sports-tag{font-size:.58rem;padding:9px 16px}
}


/* ════════════════════ */


/* ══════════════════════════════════════════════════
   INTERACTIVE MENU SPLIT — Food & Drink
   ══════════════════════════════════════════════════ */

/* ── SPLIT PANELS ── */
#menu-split { position:relative; background:var(--green-deep); overflow:hidden }

.ms-wrap {
  display:flex; height:88vh; min-height:560px;
  position:relative; z-index:2;
}

.ms-panel {
  flex:1;
  position:relative; overflow:hidden;
  cursor:pointer;
  transition:flex 0.7s cubic-bezier(0.16,1,0.3,1);
}

/* JS-driven expand/shrink — both panels handled explicitly and identically */
.ms-panel.expanded { flex:1.45 !important }
.ms-panel.shrunk   { flex:0.55 !important }

/* Background layers */
.ms-bg {
  position:absolute; inset:-8%;
  background-size:cover; background-position:center;
  transition:transform 0.9s cubic-bezier(0.16,1,0.3,1),
             filter 0.6s ease;
  will-change:transform;
}
.ms-panel.expanded .ms-bg {
  transform:scale(1.06);
  filter:brightness(.55) saturate(1.2);
}
.ms-food .ms-bg {
  background-color:#1A3A22;
  filter:brightness(.38) saturate(.85);
}
.ms-drink .ms-bg {
  background-color:#0D2B1E;
  filter:brightness(.32) saturate(.8);
}

/* Gradient overlays */
.ms-overlay-grad {
  position:absolute; inset:0; z-index:1;
  transition:opacity 0.5s;
}
.ms-food .ms-overlay-grad {
  background:linear-gradient(
    135deg,
    rgba(13,43,30,.85) 0%,
    rgba(13,43,30,.4)  50%,
    rgba(232,65,122,.15) 100%
  );
}
.ms-drink .ms-overlay-grad {
  background:linear-gradient(
    225deg,
    rgba(13,43,30,.88) 0%,
    rgba(13,43,30,.42) 50%,
    rgba(61,181,110,.12) 100%
  );
}
.ms-panel.expanded .ms-overlay-grad { opacity:0.7 }

/* Vertical divider line */
/* Divider lives on the right edge of the food panel — moves with flex */
.ms-food::after {
  content:'';
  position:absolute; top:0; right:0; bottom:0;
  width:1px; z-index:10; pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(232,65,122,.55) 30%,
    rgba(61,181,110,.55) 70%,
    transparent 100%
  );
}

/* Panel content */
/* ─── Content: title pinned to vertical centre,
       cats+CTA pinned to bottom — no overlap possible ─── */
/* ═══════════════════════════════════════════════════
   PANEL CONTENT — 3-row CSS Grid.
   Eyebrow (fixed height) | Title (fills middle) | Bottom (auto).
   Grid rows physically cannot overlap — problem solved.
   ═══════════════════════════════════════════════════ */
.ms-content {
  position:absolute; inset:0; z-index:4;
  display:grid;
  grid-template-rows: 80px 1fr 190px;
  /* row 1: eyebrow zone   */
  /* row 2: title zone      */
  /* row 3: cats + CTA zone */
  align-items:center;
  padding:0 28px 52px;
  text-align:center;
  pointer-events:none;
}

/* Row 1 — eyebrow */
.ms-eyebrow {
  grid-row:1;
  align-self:center; justify-self:center;
  font-size:.65rem; letter-spacing:.45em; text-transform:uppercase;
  color:rgba(245,240,232,.5);
  opacity:0; transform:translateY(-6px);
  transition:opacity 0.5s 0.05s, transform 0.5s 0.05s;
  pointer-events:none; white-space:nowrap;
}
.ms-panel.expanded .ms-eyebrow { opacity:1; transform:translateY(0) }

/* Row 2 — title (centred inside its 1fr row) */

.ms-title-wrap {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center; pointer-events:none;
  z-index:5;
  width:90%; max-width:560px;
}
.ms-title {
  font-family:var(--font-d);
  font-size:clamp(4rem,11vw,9.5rem);
  font-weight:300; line-height:1;
  text-transform:uppercase; letter-spacing:-0.02em;
  color:var(--cream); display:block;
  position:relative; padding-bottom:24px;
  transition:transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
.ms-title::after {
  content:'';
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:0; height:2px;
  transition:width 0.55s cubic-bezier(0.16,1,0.3,1) 0.1s;
}
.ms-food  .ms-title::after { background:var(--pink) }
.ms-drink .ms-title::after { background:var(--green-bright) }
.ms-panel.expanded .ms-title { transform:scale(1.05) }
.ms-panel.expanded .ms-title::after { width:70px }
.ms-title-line { display:none }

/* Row 3 — cats + CTA (always below the title row) */
.ms-content-bottom {
  grid-row:3;
  align-self:end; justify-self:center;
  width:100%;
  display:flex; flex-direction:column; align-items:center;
  gap:0; pointer-events:all;
  overflow:hidden;
}

.ms-cats {
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;
  opacity:0; transform:translateY(16px);
  transition:opacity 0.4s 0.1s, transform 0.4s 0.1s;
}
.ms-panel.expanded .ms-cats { opacity:1; transform:translateY(0) }

.ms-cat {
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  padding:5px 12px;
  border:1px solid rgba(245,240,232,.2);
  color:rgba(245,240,232,.6);
  transition:border-color .3s, color .3s; cursor:default;
}
.ms-panel.ms-food.expanded  .ms-cat:hover { border-color:var(--pink); color:var(--pink) }
.ms-panel.ms-drink.expanded .ms-cat:hover { border-color:var(--green-bright); color:var(--green-bright) }

.ms-cta {
  margin-top:20px;
  font-family:var(--font-b);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  padding:13px 38px; border:none; cursor:pointer;
  opacity:0; transform:translateY(14px);
  transition:opacity 0.38s 0.2s, transform 0.38s 0.2s,
             background .25s, box-shadow .25s;
  position:relative; z-index:2; pointer-events:none;
}
.ms-panel.expanded .ms-cta { opacity:1; transform:translateY(0); pointer-events:all }
.ms-food  .ms-cta { background:var(--pink); color:#fff }
.ms-drink .ms-cta { background:var(--green-bright); color:var(--green-deep) }
.ms-food  .ms-cta:hover { background:#d43570; box-shadow:0 12px 32px rgba(232,65,122,.4) }
.ms-drink .ms-cta:hover { background:#52CC80; box-shadow:0 12px 32px rgba(61,181,110,.35) }

/* Panel label (vertical) */
.ms-vert-label {
  position:absolute; top:50%; right:28px;
  transform:translateY(-50%) rotate(90deg);
  transform-origin:center;
  font-size:.58rem; letter-spacing:.5em; text-transform:uppercase;
  color:rgba(245,240,232,.2);
  transition:opacity 0.4s; white-space:nowrap; z-index:3;
}
.ms-panel.expanded .ms-vert-label { opacity:0 }

/* Flower decorations on panels */
.ms-flora {
  position:absolute; z-index:0; pointer-events:none; opacity:.18;
  transition:opacity 0.5s, transform 0.5s;
}
.ms-panel.expanded .ms-flora { opacity:.6 }

.ms-f-tl { top:5%; left:4%; width:80px; opacity:.25; animation:sway 8s ease-in-out infinite }
.ms-f-br { bottom:6%; right:4%; width:70px; opacity:.2; animation:sway2 10s ease-in-out infinite; animation-delay:.8s }
.ms-f-tr { top:6%; right:5%; width:65px; opacity:.22; animation:drift 9s ease-in-out infinite }
.ms-f-bl { bottom:8%; left:4%; width:60px; opacity:.2; animation:drift2 11s ease-in-out infinite; animation-delay:1.2s }

/* ══════════════════════════════════════════════════
   FULL SCREEN OVERLAY MODALS
   ══════════════════════════════════════════════════ */

.ms-modal {
  position:fixed; inset:0; z-index:5000;
  display:flex; flex-direction:column;
  pointer-events:none;
  visibility:hidden;
}
.ms-modal.open { pointer-events:all; visibility:visible }

/* Backdrop */
.ms-modal-backdrop {
  position:absolute; inset:0;
  background:rgba(8,20,12,.97);
  backdrop-filter:blur(12px);
  opacity:0; transition:opacity 0.45s;
}
.ms-modal.open .ms-modal-backdrop { opacity:1 }

/* Modal inner */
.ms-modal-inner {
  position:relative; z-index:2;
  height:100%; display:flex; flex-direction:column;
  transform:translateY(60px); opacity:0;
  transition:transform 0.55s cubic-bezier(0.16,1,0.3,1) 0.1s,
             opacity 0.4s 0.1s;
}
.ms-modal.open .ms-modal-inner { transform:translateY(0); opacity:1 }

/* Modal header */
.ms-modal-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 52px 20px;
  border-bottom:1px solid rgba(61,181,110,.12);
  flex-shrink:0;
}
.ms-modal-title {
  font-family:var(--font-d);
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:300; letter-spacing:.05em;
  color:var(--cream);
}
.ms-modal-title span { font-style:italic }
.ms-modal-sub {
  font-size:.7rem; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(245,240,232,.35); margin-top:4px;
}

.ms-close {
  width:48px; height:48px;
  border:1px solid rgba(245,240,232,.15);
  background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:rgba(245,240,232,.6); font-size:1.4rem;
  transition:border-color .25s, color .25s, transform .25s;
  flex-shrink:0;
}
.ms-close:hover { border-color:var(--pink); color:var(--pink); transform:rotate(90deg) }
.ms-food-modal .ms-close:hover { border-color:var(--pink); color:var(--pink) }
.ms-drink-modal .ms-close:hover { border-color:var(--green-bright); color:var(--green-bright) }

/* Tab bar */
.ms-tabs {
  display:flex; flex-wrap:wrap; gap:4px;
  padding:20px 52px 0;
  flex-shrink:0;
}
.ms-tab {
  font-family:var(--font-b);
  font-size:.65rem; letter-spacing:.18em; text-transform:uppercase;
  padding:9px 18px;
  border:1px solid rgba(245,240,232,.12);
  background:transparent; color:rgba(245,240,232,.4);
  cursor:pointer;
  transition:all .25s;
}
.ms-tab:hover { border-color:rgba(245,240,232,.35); color:rgba(245,240,232,.75) }
.ms-food-modal  .ms-tab.active { background:var(--pink); border-color:var(--pink); color:#fff }
.ms-drink-modal .ms-tab.active { background:var(--green-bright); border-color:var(--green-bright); color:var(--green-deep) }

/* Scrollable content area */
.ms-modal-body {
  flex:1; overflow-y:auto; padding:36px 52px 52px;
  scrollbar-width:thin; scrollbar-color:rgba(232,65,122,.4) transparent;
}
.ms-modal-body::-webkit-scrollbar { width:3px }
.ms-modal-body::-webkit-scrollbar-thumb { background:var(--pink) }
.ms-drink-modal .ms-modal-body::-webkit-scrollbar-thumb { background:var(--green-bright) }

/* Panel display */
.ms-mpanel { display:none; animation:fadeSlideUp .4s cubic-bezier(0.16,1,0.3,1) }
.ms-mpanel.active { display:block }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* Menu grid */
.ms-mgrid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
  gap:1px;
  background:rgba(61,181,110,.07);
  border:1px solid rgba(61,181,110,.07);
}
.ms-drink-modal .ms-mgrid {
  background:rgba(61,181,110,.07);
  border-color:rgba(61,181,110,.07);
}

/* Menu item */
.ms-mi {
  padding:22px 26px;
  background:rgba(13,43,30,.6);
  transition:background .2s;
  backdrop-filter:blur(4px);
}
.ms-mi:hover { background:rgba(13,43,30,.9) }
.ms-food-modal  .ms-mi:hover { background:rgba(232,65,122,.06) }
.ms-drink-modal .ms-mi:hover { background:rgba(61,181,110,.06) }

.ms-mi-top {
  display:flex; justify-content:space-between;
  align-items:baseline; gap:16px; margin-bottom:6px;
}
.ms-mi-name {
  font-family:var(--font-d);
  font-size:1.1rem; font-weight:600;
  color:var(--cream); line-height:1.2;
}
.ms-mi-price {
  font-family:var(--font-d);
  font-size:1.1rem; font-weight:600;
  white-space:nowrap; flex-shrink:0;
}
.ms-food-modal  .ms-mi-price { color:var(--pink) }
.ms-drink-modal .ms-mi-price { color:var(--green-bright) }

.ms-mi-desc {
  font-size:.8rem; color:rgba(245,240,232,.45);
  line-height:1.65; font-weight:300;
}
.ms-mi-badges { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap }
.ms-badge {
  font-size:.56rem; letter-spacing:.1em; text-transform:uppercase;
  padding:2px 7px; border:1px solid currentColor; border-radius:2px;
}
.ms-badge-v   { color:rgba(82,183,136,.7) }
.ms-badge-ve  { color:rgba(61,181,110,.75) }
.ms-badge-gf  { color:rgba(212,168,67,.7) }

/* Section title within panel */
.ms-stitle {
  font-family:var(--font-d); font-size:1.5rem;
  font-weight:300; font-style:italic;
  margin:36px 0 8px;
  grid-column:1/-1; padding:0 0 10px;
}
.ms-food-modal  .ms-stitle { color:var(--pink); border-bottom:1px solid rgba(232,65,122,.15) }
.ms-drink-modal .ms-stitle { color:var(--green-bright); border-bottom:1px solid rgba(61,181,110,.15) }
.ms-stitle:first-child { margin-top:0 }

/* Drink card — bigger, more atmospheric */
.ms-drink-card {
  padding:26px 28px;
  background:rgba(13,43,30,.55);
  border-bottom:1px solid rgba(61,181,110,.06);
  transition:background .2s;
}
.ms-drink-card:hover { background:rgba(61,181,110,.06) }
.ms-drink-card .ms-mi-name { font-size:1.15rem }
.ms-drink-card .ms-dc-cat {
  font-size:.58rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--green-bright); margin-bottom:8px; display:block;
}

/* Botanical accents in modal */
.ms-modal-flora {
  position:absolute; pointer-events:none; z-index:1; opacity:.1;
}
.ms-mf-1 { top:10px; right:60px; width:80px; animation:sway 9s ease-in-out infinite }
.ms-mf-2 { bottom:20px; left:50px; width:65px; animation:drift 11s ease-in-out infinite; animation-delay:1s }

/* ══════════════════════════════════════════
   MOBILE MENU — complete redesign ≤768px
   Panels stack vertically, fixed height so
   content never overflows regardless of
   viewport height / orientation.
   ══════════════════════════════════════════ */
@media(max-width:768px) {

  /* ── Wrap: vertical stack, natural height ── */
  .ms-wrap {
    flex-direction:column;
    height:auto;
    min-height:auto;
  }

  /* ── Each panel: fixed px height (not 50vh)
        so portrait & landscape phones both work ── */
  .ms-panel {
    flex:none !important;
    height:340px;
    width:100%;
    overflow:hidden;
  }

  /* Expanded / shrunk states disabled on mobile —
     both panels always display at equal full width */
  .ms-panel.expanded,
  .ms-panel.shrunk {
    flex:none !important;
    height:340px;
  }

  /* ── Divider: becomes a horizontal hairline ── */
  .ms-divider {
    position:absolute;
    top:340px; left:0; right:0; bottom:auto;
    width:100%; height:1px;
  }

  /* ── Content grid: shrink eyebrow row,
        keep 1fr middle, keep auto bottom ── */
  .ms-content {
    grid-template-rows: 48px 1fr 160px;
    padding:0 20px 36px;
  }

  /* ── Title: fixed size — NO vw units, NO scale transform ──
        This is the definitive fix for "DRINK" overflow.
        56px is the safe maximum that fits every panel. ── */
  .ms-title {
    font-size:3.2rem !important;   /* 51px — safe ceiling */
    line-height:1;
    padding-bottom:14px;
    letter-spacing:-0.01em;
  }

  /* Disable scale() on mobile — scale causes visual overflow
     because transformed element bleeds into adjacent row */
  .ms-panel.expanded .ms-title {
    transform:none !important;
  }

  /* ── Category pills: smaller on mobile ── */
  .ms-cat {
    font-size:.54rem;
    padding:4px 10px;
  }

  /* ── CTA button: full-width for easy tap target ── */
  .ms-cta {
    width:100%;
    text-align:center;
    margin-top:14px;
  }

  /* ── Vertical label: hidden on mobile (no space) ── */
  .ms-vert-label { display:none }

  /* ── Modal overrides ── */
  .ms-modal-header { padding:20px 24px 16px }
  .ms-tabs { padding:16px 24px 0 }
  .ms-modal-body { padding:24px 24px 40px }
  .ms-mgrid { grid-template-columns:1fr }
}

@media(max-width:480px) {
  .ms-panel,
  .ms-panel.expanded,
  .ms-panel.shrunk {
    height:300px;
  }
  .ms-title {
    font-size:2.8rem !important;  /* 45px */
    padding-bottom:10px;
  }
  .ms-content {
    grid-template-rows: 44px 1fr 140px;
    padding:0 16px 28px;
  }
  .ms-modal-header { padding:16px 16px 12px }
  .ms-tabs { padding:12px 16px 0; gap:3px }
  .ms-tab { font-size:.58rem; padding:8px 12px }
  .ms-modal-body { padding:20px 16px 36px }
}


/* ════════════════════ */


/* ══ STUDENT — LuckyFolks editorial style ══ */
#student {
  position: relative;
  min-height: 100vh;
  background: #0a1208;
  display: flex;
  flex-direction: column;
}

/* Full-bleed photo layer */
.stu-photo {
  position: absolute;
  inset: 0;
  background:
    url('https://images.unsplash.com/photo-1575037614876-c38a4d44f5b8?w=1800&q=80') center/cover no-repeat;
  filter: brightness(.45) saturate(.7);
  will-change: transform;
  z-index: 0;
}
/* warm amber colour wash over the photo */
.stu-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(232,115,42,.18) 0%, rgba(61,181,110,.08) 60%, rgba(232,65,122,.12) 100%);
}

/* Grain texture */
.stu-grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
}

/* ── MARQUEE TEXT ROWS (the LuckyFolks thing) ── */
.stu-marquee-wrap {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  pointer-events: none;
}
.stu-marquee-row {
  overflow: hidden;
  line-height: 1;
  padding: 2px 0;
}
.stu-marquee-track {
  display: flex;
  white-space: nowrap;
  will-change: transform;
}
.stu-marquee-row:nth-child(odd)  .stu-marquee-track { animation: stuMarqL 28s linear infinite }
.stu-marquee-row:nth-child(even) .stu-marquee-track { animation: stuMarqR 32s linear infinite }
@keyframes stuMarqL { 0%{transform:translateX(0)}   100%{transform:translateX(-50%)} }
@keyframes stuMarqR { 0%{transform:translateX(-50%)} 100%{transform:translateX(0)}   }
.stu-marquee-word {
  font-family: var(--font-d);
  font-size: clamp(4.5rem, 12vw, 10rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(232,115,42,.75);
  padding: 0 clamp(16px, 3vw, 36px);
  user-select: none;
  transition: -webkit-text-stroke-color .3s;
}
/* alternating colour strokes like LuckyFolks */
.stu-marquee-row:nth-child(1) .stu-marquee-word { -webkit-text-stroke-color: rgba(232,115,42,.8) }
.stu-marquee-row:nth-child(2) .stu-marquee-word { -webkit-text-stroke-color: rgba(61,181,110,.65) }
.stu-marquee-row:nth-child(3) .stu-marquee-word { -webkit-text-stroke-color: rgba(232,65,122,.7) }
.stu-marquee-row:nth-child(4) .stu-marquee-word { -webkit-text-stroke-color: rgba(232,115,42,.6) }

/* The filled hero word — solid gold, stands out from outlines */
.stu-marquee-word.filled {
  color: #E8732A;
  -webkit-text-stroke: 0;
}

/* ── CENTRE CONTENT CARD ── */
.stu-card-wrap {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 52px;
}
.stu-card {
  background: rgba(9,21,8,.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(232,115,42,.25);
  padding: 56px 60px;
  max-width: 560px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
/* corner accent line */
.stu-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, #E8732A, #E8417A);
}
.stu-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 60px;
  background: linear-gradient(180deg, #E8732A, transparent);
}

.stu-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .6rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #E8732A;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(12px);
}
.stu-card-badge::before {
  content: '';
  display: block;
  width: 24px;
  height: 1px;
  background: #E8732A;
}

.stu-card-big {
  font-family: var(--font-d);
  font-size: clamp(5rem, 14vw, 9rem);
  font-weight: 700;
  line-height: .85;
  color: #E8732A;
  margin-bottom: 4px;
  opacity: 0;
  transform: translateY(20px);
}
.stu-card-sub {
  font-family: var(--font-d);
  font-size: clamp(1.4rem, 4vw, 2.6rem);
  font-weight: 300;
  color: #F5F0E8;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(16px);
}
.stu-card-body {
  font-size: .9rem;
  font-weight: 300;
  color: rgba(245,240,232,.55);
  line-height: 1.85;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(14px);
}

/* perk pills */
.stu-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
  opacity: 0;
  transform: translateY(12px);
}
.stu-pill {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(245,240,232,.75);
  border: 1px solid rgba(232,115,42,.3);
  padding: 7px 14px;
  transition: border-color .25s, color .25s;
}
.stu-pill:hover {
  border-color: #E8732A;
  color: #E8732A;
}

.stu-card-btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
}

/* bottom strip ticker */
.stu-strip {
  position: relative;
  z-index: 6;
  background: #E8732A;
  padding: 11px 0;
  overflow: hidden;
}
.stu-strip-track {
  display: flex;
  white-space: nowrap;
  animation: stuStrip 20s linear infinite;
}
.stu-strip-track span {
  font-family: var(--font-d);
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(9,21,8,.85);
  padding: 0 20px;
}
.stu-strip-dot { color: rgba(9,21,8,.35) !important; padding: 0 4px !important }
@keyframes stuStrip { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

@media(max-width:760px){
  .stu-card-wrap { padding: 80px 20px }
  .stu-card { padding: 40px 28px }
  .stu-marquee-word { font-size: clamp(3.5rem, 16vw, 6rem) }
}


/* ════════════════════ */


#reviews{background:#F5F0E8;padding:80px 0;overflow:hidden;position:relative}
.rev-wrap{max-width:1200px;margin:0 auto;padding:0 52px}
.rev-header{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:52px}
.rev-rating{display:flex;align-items:center;gap:16px}
.rev-stars{color:#E8732A;font-size:1.4rem;letter-spacing:2px}
.rev-score{font-family:var(--font-d);font-size:3.2rem;font-weight:300;color:var(--text-dark);line-height:1}
.rev-meta{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(8,28,16,.45);margin-top:4px}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rev-card{background:#fff;padding:32px 28px;position:relative;border:1px solid rgba(8,28,16,.06);transition:transform .3s var(--ease),box-shadow .3s}
.rev-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(8,28,16,.08)}
.rev-card-stars{color:#E8732A;font-size:.9rem;letter-spacing:2px;margin-bottom:16px}
.rev-card-body{font-size:.9rem;font-weight:300;color:rgba(8,28,16,.7);line-height:1.8;font-style:italic;margin-bottom:20px}
.rev-card-footer{display:flex;align-items:center;justify-content:space-between}
.rev-card-name{font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dark)}
.rev-card-src{font-size:.65rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold)}
.rev-cta{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dark);text-decoration:none;transition:color .2s}
.rev-cta:hover{color:var(--gold)}
.rev-cta::after{content:'→';transition:transform .25s}
.rev-cta:hover::after{transform:translateX(4px)}
@media(max-width:768px){.rev-grid{grid-template-columns:1fr}.rev-header{flex-direction:column;align-items:flex-start;gap:20px}.rev-wrap{padding:0 24px}}

/* ── Mobile hero: YouTube iframes cannot autoplay on mobile browsers.
   Hide the iframe and show a static image (home page) or preserve the
   existing CSS background-image (all other pages). ── */
.hero-img-mob{display:none}
@media(max-width:768px){
  .hero-bg iframe{display:none}
  #hero{background:#0D2B1E}
  .hero-img-mob{
    display:block;
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center;
    filter:brightness(.5);
  }
}


/* ════════════════════ */


/* ── EVENTS ── */
#events{background:#06100A;position:relative}
.ev-wrap{max-width:1340px;margin:0 auto;padding:0 52px}
.ev-top{padding:100px 0 56px;border-bottom:1px solid rgba(245,240,232,.07);display:flex;align-items:baseline;gap:20px}
.ev-top-label{font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:var(--pink)}
.ev-top-title{font-family:var(--font-d);font-size:clamp(1.4rem,2.5vw,2rem);font-weight:300;color:rgba(245,240,232,.22);letter-spacing:.02em;word-spacing:.06em}
.ev-list{position:relative}
.ev-item{position:relative;border-bottom:1px solid rgba(245,240,232,.07);overflow:hidden;cursor:pointer}
/* Colour flood */
.ev-flood{position:absolute;inset:0;opacity:0;pointer-events:none;will-change:opacity}
.ev-item[data-col="pink"]  .ev-flood{background:linear-gradient(110deg,rgba(232,65,122,.2) 0%,rgba(232,65,122,.05) 100%)}
.ev-item[data-col="green"] .ev-flood{background:linear-gradient(110deg,rgba(61,181,110,.2) 0%,rgba(61,181,110,.05) 100%)}
.ev-item[data-col="red"]   .ev-flood{background:linear-gradient(110deg,rgba(232,54,44,.2) 0%,rgba(232,54,44,.05) 100%)}
/* Cursor glow */
.ev-glow{position:absolute;width:560px;height:560px;border-radius:50%;pointer-events:none;opacity:0;transform:translate(-50%,-50%);will-change:transform,opacity}
.ev-item[data-col="pink"]  .ev-glow{background:radial-gradient(circle,rgba(232,65,122,.22) 0%,transparent 68%)}
.ev-item[data-col="green"] .ev-glow{background:radial-gradient(circle,rgba(61,181,110,.22) 0%,transparent 68%)}
.ev-item[data-col="red"]   .ev-glow{background:radial-gradient(circle,rgba(232,54,44,.22) 0%,transparent 68%)}
/* Top accent line */
.ev-accent{position:absolute;top:0;left:0;right:0;height:2px;transform:scaleX(0);transform-origin:left;pointer-events:none}
.ev-item[data-col="pink"]  .ev-accent{background:linear-gradient(90deg,var(--pink),transparent)}
.ev-item[data-col="green"] .ev-accent{background:linear-gradient(90deg,var(--green-bright),transparent)}
.ev-item[data-col="red"]   .ev-accent{background:linear-gradient(90deg,#E8362C,transparent)}
/* Row layout */
.ev-inner{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(16px,3vw,52px);padding:clamp(26px,4vh,46px) 0}
.ev-day-big{font-family:var(--font-d);font-size:clamp(2.8rem,7vw,8rem);font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:-.03em;white-space:nowrap;flex-shrink:0;will-change:transform;padding-right:clamp(12px,2vw,32px)}
.ev-item[data-col="pink"]  .ev-day-big{color:var(--pink)}
.ev-item[data-col="green"] .ev-day-big{color:var(--green-bright)}
.ev-item[data-col="red"]   .ev-day-big{color:#E8362C}
.ev-name{font-family:var(--font-d);font-size:clamp(2rem,5vw,5.8rem);font-weight:300;color:var(--cream);flex:1;line-height:1;text-transform:uppercase;letter-spacing:.01em;word-spacing:.08em;will-change:transform}
.ev-meta{font-size:clamp(.62rem,.8vw,.82rem);letter-spacing:.3em;text-transform:uppercase;color:rgba(245,240,232,.35);text-align:right;flex-shrink:0;line-height:2;will-change:opacity}
.ev-meta-dot{margin:0 .4em;opacity:.4}
.ev-item[data-col="pink"]  .ev-free{color:var(--pink);opacity:.85}
.ev-item[data-col="green"] .ev-free{color:var(--green-bright);opacity:.85}
.ev-item[data-col="red"]   .ev-free{color:#E8362C;opacity:.85}
/* Footer */
.ev-foot{padding:48px 0 96px;display:flex;justify-content:flex-end}
/* Responsive */
@media(max-width:900px){
  .ev-wrap{padding:0 24px}
  .ev-meta{display:none}
}
@media(max-width:600px){
  .ev-top{padding:68px 0 36px}
  .ev-day-big{width:clamp(82px,20vw,120px)}
  .ev-foot{padding:36px 0 64px}
}


/* ════════════════════ */


#private-hire{background:#F5F0E8;padding:130px 0;position:relative;overflow:hidden}
.ph-wrap{max-width:1200px;margin:0 auto;padding:0 52px;display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.ph-sticky{position:sticky;top:120px}
.ph-perks{margin-top:44px;display:flex;flex-direction:column;gap:0}
.ph-perk{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-bottom:1px solid rgba(8,28,16,.08)}
.ph-perk:first-child{border-top:1px solid rgba(8,28,16,.08)}
.ph-perk-icon{font-size:1.3rem;flex-shrink:0;margin-top:2px;width:28px;text-align:center}
.ph-perk-title{font-family:var(--font-d);font-size:1.05rem;font-weight:600;color:var(--text-dark);margin-bottom:3px}
.ph-perk-desc{font-size:.82rem;font-weight:300;color:rgba(8,28,16,.55);line-height:1.6}

/* FORM */
.ph-form-wrap{background:#fff;padding:48px 44px;border:1px solid rgba(8,28,16,.07)}
.ph-form-title{font-family:var(--font-d);font-size:2rem;font-weight:600;color:var(--text-dark);margin-bottom:8px}
.ph-form-sub{font-size:.85rem;font-weight:300;color:rgba(8,28,16,.5);line-height:1.7;margin-bottom:36px}
.ph-field{margin-bottom:20px}
.ph-field label{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(8,28,16,.5);margin-bottom:8px}
.ph-field input,.ph-field select,.ph-field textarea{width:100%;padding:13px 16px;background:#F9F6F0;border:1px solid rgba(8,28,16,.1);font-family:var(--font-b);font-size:.9rem;font-weight:300;color:var(--text-dark);outline:none;transition:border-color .25s;cursor:text}
.ph-field input:focus,.ph-field select:focus,.ph-field textarea:focus{border-color:var(--gold)}
.ph-field textarea{resize:vertical;min-height:100px}
.ph-field select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(8,28,16,.4)'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.ph-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.hire-submit{width:100%;padding:17px;background:var(--gold);color:#fff;border:none;font-family:var(--font-b);font-size:.75rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;margin-top:8px;transition:transform .25s var(--ease),box-shadow .25s}
.hire-submit:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(232,65,122,.3)}
@media(max-width:960px){.ph-wrap{grid-template-columns:1fr;gap:52px;padding:0 24px}.ph-sticky{position:static}}


/* ════════════════════ */


#anchor-banner{
  position:relative;
  background:var(--green-deep);
  overflow:hidden;
  padding:110px 52px;
  text-align:center;
  border-top:1px solid rgba(61,181,110,.15);
  border-bottom:1px solid rgba(61,181,110,.15);
}
#anchor-banner::before{
  content:'BOBBIN';
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  font-family:var(--font-d);
  font-size:26vw;font-weight:700;
  color:rgba(245,240,232,.025);
  white-space:nowrap;pointer-events:none;letter-spacing:-.02em;
}
.ab-inner{position:relative;z-index:2;max-width:760px;margin:0 auto}
.ab-pre{font-size:.65rem;letter-spacing:.38em;text-transform:uppercase;color:var(--green-bright);margin-bottom:20px;display:block}
.ab-heading{font-family:var(--font-d);font-size:clamp(3rem,8vw,6.5rem);font-weight:300;line-height:.95;text-transform:uppercase;color:var(--cream);margin-bottom:16px}
.ab-heading em{font-style:italic;color:var(--pink)}
.ab-sub{font-size:1rem;font-weight:300;color:rgba(245,240,232,.5);line-height:1.8;max-width:500px;margin:0 auto 52px}
.ab-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ab-divider{width:1px;height:44px;background:rgba(245,240,232,.12);margin:0 auto 52px}

/* botanical corner accents on banner */
.ab-flora-tl{position:absolute;top:24px;left:32px;width:80px;opacity:.15;animation:sway 12s ease-in-out infinite}
.ab-flora-tr{position:absolute;top:24px;right:32px;width:70px;opacity:.12;animation:drift 14s ease-in-out infinite;animation-delay:.8s}
.ab-flora-bl{position:absolute;bottom:24px;left:32px;width:60px;opacity:.12;animation:sway2 10s ease-in-out infinite;animation-delay:.4s}
.ab-flora-br{position:absolute;bottom:24px;right:32px;width:75px;opacity:.14;animation:drift2 13s ease-in-out infinite;animation-delay:1.2s}

@media(max-width:600px){
  #anchor-banner{padding:80px 24px}
  .ab-flora-tl,.ab-flora-tr,.ab-flora-bl,.ab-flora-br{display:none}
}


/* ════════════════════ */


:root { --red:#dd0229; }

/* ── Warm off-white: replace harsh #fff on UI surfaces ── */
.rev-card                      { background:#FBF7F0 }
.about-badge .big              { color:var(--cream) }
.about-badge .sm               { color:rgba(245,240,232,.72) }
.btn-gold,
.mob-book:hover,
.menu-tab.active,
.ms-food .ms-cta,
.ms-food-modal .ms-tab.active,
.stu-tag                       { color:var(--cream) !important }

/* ── Red: scroll line + book border + ticker ── */
.scroll-bar                    { background:linear-gradient(to bottom,var(--red),transparent) !important }
#book                          { border-top-color:var(--red) !important }
.ticker-track .sep             { color:var(--red) !important }
.nav-links a::after            { background:var(--red) !important }

/* ── Sports tags: red on hover / selected ── */
.sports-tag::before            { background:var(--red) !important }
.sports-tag:hover              { border-color:var(--red) !important }
.sports-tag.selected           { background:var(--red) !important; border-color:var(--red) !important; color:var(--cream) !important }

/* ── Sports-screens stats bar: full-bleed red, cream text ── */
/* pseudo-element bleeds the red to full section width;            */
/* max-width:1200px on .sports-screens keeps stats content centred */
.sports-screens {
  position: relative;
}
.sports-screens::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--red);
  z-index: 0;
}
.sports-screens > * {
  position: relative;
  z-index: 1;
}
.sports-stat-n                 { color:var(--cream) !important }
.sports-stat-l                 { color:rgba(245,240,232,.82) !important }
.sports-divider                { background:rgba(245,240,232,.28) !important }
/* Reserve a Spot button stays legible on the red bar */
.sports-screens .btn-gold      { background:var(--cream) !important; color:var(--red) !important }
.sports-screens .btn-gold:hover{ opacity:.88 }


/* ════════════════════ */




/* ════════════════════ */


#deals-overlay{
  position:fixed;inset:0;
  background:rgba(8,28,16,.72);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:9997;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  opacity:0;pointer-events:none;
}
#deals-popup{
  background:var(--cream);
  max-width:460px;width:100%;
  padding:52px 44px 40px;
  position:relative;
  text-align:center;
  transform:scale(0.88) translateY(24px);
}
.deals-badge{
  display:inline-block;
  font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);
  padding:5px 14px;margin-bottom:22px;
}
.deals-heading{
  font-family:var(--font-d);
  font-size:clamp(2.6rem,5.5vw,3.8rem);
  font-weight:300;line-height:.98;
  color:var(--black);
  margin-bottom:18px;
}
.deals-body{
  font-size:.95rem;font-weight:300;line-height:1.82;
  color:rgba(8,28,16,.65);
  margin-bottom:32px;
}
.deals-btn{
  display:inline-block;
  background:var(--black);color:var(--cream);
  padding:15px 42px;
  font-family:var(--font-b);font-size:.72rem;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;
  transition:background .3s;
  margin-bottom:18px;
}
.deals-btn:hover{background:var(--gold);color:var(--black)}
#deals-dismiss{
  display:block;background:none;border:none;
  font-family:var(--font-d);font-style:italic;font-size:.95rem;
  color:rgba(8,28,16,.4);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
  margin:0 auto;
  transition:color .2s;
}
#deals-dismiss:hover{color:var(--black)}
#deals-close{
  position:absolute;top:14px;right:14px;
  background:var(--red);border:none;
  color:var(--cream);
  width:30px;height:30px;border-radius:50%;
  font-size:.85rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s, transform .2s;
}
#deals-close:hover{background:var(--black);transform:rotate(90deg)}
@media(max-width:480px){
  #deals-popup{padding:44px 28px 36px}
  .deals-heading{font-size:2.4rem}
}


/* ════════════════════ */


.jc{display:inline-block;will-change:transform}


/* ════════════════════ */


.burst-item{
  position:fixed;
  pointer-events:none;
  z-index:99999;
  user-select:none;
  line-height:1;
  will-change:transform;
}

/* ══════════════════════════════════════════════════════════════
   COLOUR EXPANSION — Reds · Blues · Light Green · Yellow
   Applied contextually: each colour earns its place
   ══════════════════════════════════════════════════════════════ */

/* ─── REVIEWS — warm amber/yellow stars, natural for ratings ─── */
.rev-stars,
.rev-card-stars { color: var(--yellow-warm) !important }
.rev-score      { color: var(--text-dark) }
/* Google source badge gets a soft red, TripAdvisor a blue */
.rev-card-src   { color: var(--red-light) !important }

/* ─── EVENTS — richer reds for the "red" night items ─── */
.ev-item[data-col="red"] .ev-day-big  { color: var(--red-light) !important }
.ev-item[data-col="red"] .ev-flood    { background: linear-gradient(110deg, rgba(124,28,28,.25) 0%, rgba(232,101,101,.06) 100%) !important }
.ev-item[data-col="red"] .ev-glow     { background: radial-gradient(circle, rgba(232,101,101,.2) 0%, transparent 68%) !important }
.ev-item[data-col="red"] .ev-accent   { background: linear-gradient(90deg, var(--red-light), transparent) !important }
.ev-item[data-col="red"] .ev-free     { color: var(--red-light) !important }
/* "What's On" label in warm red too */
.ev-top-label { color: var(--red-light) !important }

/* ─── OPENING HOURS — weekends glow warm yellow (golden night out) ─── */
/* We target the 2nd h-group (Fri–Sat) via CSS structural selector */
.book-hours .h-group:nth-child(2) .h-time { color: var(--yellow-warm) !important }
.book-hours .h-group:nth-child(2) .h-label { color: rgba(224,188,58,.55) !important }

/* ─── SPORTS SECTION — blue atmosphere throughout ─── */
.sports-screens { border-color: rgba(57,117,176,.2) !important }
.sports-divider { background: rgba(57,117,176,.25) !important }
/* The "pick your sport" label gets a blue-light glow */
.sports-active-label { color: var(--blue-light) !important }
/* Stat labels in light blue */
.sports-stat-l { color: rgba(123,188,224,.65) !important }

/* ─── DRINKS FEATURE — cold blue shimmer on cocktail names ─── */
.df-quote em,
.df-quote strong { color: var(--blue-light) !important }

/* ─── BAR FEATURES — icon row gets colour variety ─── */
.bar-feat:nth-child(1) .bar-feat-icon { color: var(--green-bright) }
.bar-feat:nth-child(2) .bar-feat-icon { color: var(--blue-mid) }
.bar-feat:nth-child(3) .bar-feat-icon { color: var(--yellow-warm) }
.bar-feat:nth-child(4) .bar-feat-icon { color: var(--red-light) }

/* ─── PRIVATE HIRE PERKS — each type gets a meaningful colour ─── */
.ph-perk:nth-child(1) .ph-perk-title { color: var(--pink) }       /* 🎉 Birthday */
.ph-perk:nth-child(2) .ph-perk-title { color: var(--blue-mid) }   /* 🏆 Sports */
.ph-perk:nth-child(3) .ph-perk-title { color: var(--blue-dark) }  /* 💼 Corporate */
.ph-perk:nth-child(4) .ph-perk-title { color: var(--red-deep) }   /* 🍺 Full buyout */

/* ─── FORM — blue focus states (clean, trustworthy) ─── */
.ph-field input:focus,
.ph-field select:focus,
.ph-field textarea:focus { border-color: var(--blue-mid) !important; box-shadow: 0 0 0 3px rgba(57,117,176,.12) !important }

/* ─── GALLERY — nav buttons and dots pick up blue ─── */
.gal-btn  { border-color: rgba(57,117,176,.45) !important; color: var(--blue-light) !important }
.gal-btn:hover { background: rgba(57,117,176,.22) !important; border-color: var(--blue-light) !important }
.gal-dot.active { background: var(--blue-light) !important }

/* ─── ABOUT STATS — mix green and blue for variety ─── */
.about-stats .stat-n:nth-child(odd)  { color: var(--green-bright) !important }
.about-stats .stat-n:nth-child(even) { color: var(--blue-light) !important }

/* ─── MENU — drink prices in blue-light (cold, refreshing), food in pink ─── */
/* Drinks panel prices */
.ms-panel[data-panel="drinks"] .menu-item-price { color: var(--blue-light) !important }

/* ─── ANCHOR BANNER — richer, multi-tone gradient wordmark ─── */
#anchor-banner { border-top-color: rgba(57,117,176,.2) !important; border-bottom-color: rgba(57,117,176,.2) !important }

/* ─── NAV — dark blue border when scrolled (instead of pink) ─── */
nav.stuck { border-bottom-color: rgba(57,117,176,.25) !important }

/* ─── MOBILE HERO fallback (no video) — blue-tinted night gradient ─── */
@media(max-width:768px){
  .hero-bg { background: radial-gradient(ellipse at 55% 45%, #1a3550 0%, #0D2B1E 65%) !important }
}

/* ─── STUDENT PERK alternating border accents ─── */
.stu-perk:nth-child(odd)  { border-left: 2px solid rgba(168,221,184,.4) }
.stu-perk:nth-child(even) { border-left: 2px solid rgba(57,117,176,.35) }

/* ─── SCROLLBAR — full spectrum ─── */
::-webkit-scrollbar-thumb {
  background: linear-gradient(
    var(--blue-mid),
    var(--pink),
    var(--yellow-warm),
    var(--green-bright)
  ) !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PAGE IDENTITY SYSTEM
   Each page has a dominant accent. Applied hard across every key element.
   ══════════════════════════════════════════════════════════════════════

   HOME     → pink + green (brand signature, the full experience)
   FOOD     → red-light + yellow-warm (kitchen heat, appetite, wine)
   SPORTS   → blue-mid + blue-light (screens, night matches, North Sea)
   ABOUT    → yellow-warm + green-light (warmth, community, local)
   CONTACT  → red-light + red-deep (energy, party, action, urgency)
   ══════════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   HOME — pink/green stays. Push green harder on
   key moments that other pages won't share.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-home .hero-line-i--em         { color: var(--green-bright) !important }
.page-home .hero-eyebrow-i          { color: var(--green-bright) !important }
.page-home .hero-scroll .hs-dot     { background: var(--pink) !important }
.page-home .ticker                  { background: var(--pink) !important }
.page-home .about-badge             { background: var(--pink) !important }
.page-home .stat-n                  { color: var(--green-bright) !important }
.page-home .df-quote                { color: var(--cream) }
.page-home .s-label                 { color: var(--green-bright) !important }
.page-home .nav-links a::after      { background: var(--green-bright) !important }
.page-home #book                    { border-top-color: var(--pink) !important }
.page-home .gal-dot.active          { background: var(--pink) !important }
.page-home .gal-btn                 { border-color: rgba(232,65,122,.4) !important; color: var(--pink) !important }
.page-home .gal-btn:hover           { background: rgba(232,65,122,.18) !important; border-color: var(--pink) !important }
/* CTA cards on home — give each a coloured eyebrow line */
.page-home #page-ctas a:nth-child(1)::before { content:''; display:block; height:3px; background:var(--pink); width:40px; margin-bottom:16px }
.page-home #page-ctas a:nth-child(2)::before { content:''; display:block; height:3px; background:var(--blue-mid); width:40px; margin-bottom:16px }
.page-home #page-ctas a:nth-child(3)::before { content:''; display:block; height:3px; background:var(--red-light); width:40px; margin-bottom:16px }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FOOD & DRINK — golden amber and whisky yellow.
   Appetite, kitchen warmth, rich flavours, wine.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-food .nav-btn                 { background: var(--yellow-warm) !important; border-color: var(--yellow-warm) !important }
.page-food .nav-btn::before         { background: #7A6000 !important }
.page-food .nav-links a::after      { background: var(--yellow-warm) !important }
.page-food .ticker                  { background: #7A6000 !important }
.page-food .hero-eyebrow-i          { color: var(--yellow-warm) !important }
.page-food .hero-line-i--em         { color: var(--yellow-warm) !important }
.page-food .hero-scroll .hs-dot     { background: var(--yellow-warm) !important }
.page-food .hs-beacon::before       { border-color: rgba(224,188,58,.5) !important }
.page-food .hs-beacon::after        { border-color: rgba(224,188,58,.2) !important }
.page-food .s-label                 { color: var(--yellow-warm) !important }
.page-food .btn-gold                { background: var(--yellow-warm) !important }
.page-food .btn-gold:hover          { box-shadow: 0 16px 40px rgba(224,188,58,.4) !important }
.page-food .btn-gold-outline        { border-color: var(--yellow-warm) !important; color: var(--yellow-warm) !important }
.page-food .btn-gold-outline::before{ background: var(--yellow-warm) !important }
.page-food .btn-gold-outline:hover  { color: var(--green-deep) !important }
.page-food .menu-tab.active         { background: var(--yellow-warm) !important; border-color: var(--yellow-warm) !important }
.page-food .menu-tab:hover          { border-color: var(--yellow-warm) !important; color: var(--yellow-warm) !important }
.page-food .menu-item-price         { color: var(--yellow-warm) !important }
.page-food .ms-panel[data-panel="drinks"] .menu-item-price { color: var(--blue-light) !important }
.page-food .menu-section-title      { border-left-color: var(--yellow-warm) !important }
.page-food .menu-item:hover         { background: rgba(224,188,58,.05) !important }
.page-food #book                    { border-top-color: var(--yellow-warm) !important }
.page-food #book::before            { color: rgba(224,188,58,.04) !important }
.page-food .book-hours              { border-top-color: rgba(224,188,58,.18) !important }
.page-food .l-line                  { background: linear-gradient(90deg, #7A6000, var(--yellow-warm), #F5E87A) !important }
.page-food .ft-col h4               { color: var(--yellow-warm) !important }
.page-food .ft-social a:hover       { color: var(--yellow-warm) !important }
.page-food nav.stuck                { border-bottom-color: rgba(224,188,58,.3) !important }
/* Food feeling section headline em */
.page-food #food-feeling em         { color: var(--yellow-warm) !important }
/* Section headings em gets yellow too */
.page-food .s-title em              { color: var(--yellow-warm) !important }
.page-food .atm-big em              { color: var(--yellow-warm) !important }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SPORTS — full blue takeover.
   TV screens, night kick-off, North Sea, Aberdeen.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-sports .nav-btn               { background: var(--blue-mid) !important; border-color: var(--blue-mid) !important }
.page-sports .nav-btn::before       { background: var(--blue-dark) !important }
.page-sports .nav-links a::after    { background: var(--blue-light) !important }
.page-sports .ticker                { background: var(--blue-dark) !important }
.page-sports .hero-eyebrow-i        { color: var(--blue-light) !important }
.page-sports .hero-line-i--em       { color: var(--blue-light) !important }
.page-sports .hero-scroll .hs-dot   { background: var(--blue-light) !important }
.page-sports .hs-beacon::before     { border-color: rgba(123,188,224,.5) !important }
.page-sports .hs-beacon::after      { border-color: rgba(123,188,224,.2) !important }
.page-sports .s-label               { color: var(--blue-light) !important }
.page-sports .btn-gold              { background: var(--blue-mid) !important }
.page-sports .btn-gold:hover        { box-shadow: 0 16px 40px rgba(57,117,176,.45) !important }
.page-sports .btn-gold-outline      { border-color: var(--blue-light) !important; color: var(--blue-light) !important }
.page-sports .btn-gold-outline::before { background: var(--blue-light) !important }
.page-sports .btn-gold-outline:hover { color: var(--blue-deep) !important }
.page-sports .sports-tag::before    { background: var(--blue-mid) !important }
.page-sports .sports-tag:hover      { border-color: var(--blue-light) !important }
.page-sports .sports-tag.selected   { background: var(--blue-mid) !important; border-color: var(--blue-mid) !important }
.page-sports .sports-eyebrow        { color: var(--blue-light) !important }
.page-sports .sports-h em           { color: var(--blue-light) !important }
.page-sports .sports-stat-n         { color: var(--blue-light) !important }
.page-sports .sports-stat-l         { color: rgba(123,188,224,.65) !important }
.page-sports .sports-divider        { background: rgba(57,117,176,.3) !important }
.page-sports #book                  { border-top-color: var(--blue-mid) !important }
.page-sports #book::before          { color: rgba(57,117,176,.04) !important }
.page-sports .book-hours            { border-top-color: rgba(57,117,176,.2) !important }
/* Sports intro (Aberdeen scene section) */
.page-sports #sports-intro .s-title { color: var(--text-dark) }
.page-sports #sports-intro .s-label { color: var(--blue-mid) !important }
.page-sports #sports-intro .btn-gold{ background: var(--blue-mid) !important }
.page-sports #screens-info .s-label { color: var(--blue-light) !important }
/* Screens info stat numbers in blue */
.page-sports #screens-info [style*="3.5rem"] { color: var(--blue-light) !important }
.page-sports .l-line                { background: linear-gradient(90deg, var(--blue-deep), var(--blue-mid), var(--blue-light)) !important }
.page-sports .ft-col h4             { color: var(--blue-light) !important }
.page-sports .ft-social a:hover     { color: var(--blue-mid) !important }
.page-sports nav.stuck              { border-bottom-color: rgba(57,117,176,.35) !important }
.page-sports .s-title em            { color: var(--blue-light) !important }
/* Subtle scan-line texture on sports dark sections */
.page-sports #sports::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(57,117,176,.015) 3px,
    rgba(57,117,176,.015) 4px
  );
  pointer-events: none;
  z-index: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ABOUT — orange + light green.
   Community, local warmth, botanical, student life.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-about .nav-btn                { background: var(--orange) !important; border-color: var(--orange) !important; color: var(--green-deep) !important }
.page-about .nav-btn::before        { background: var(--green-bright) !important }
.page-about .nav-btn:hover          { color: var(--green-deep) !important }
.page-about .nav-links a::after     { background: var(--orange) !important }
.page-about .ticker                 { background: var(--green-rich) !important }
.page-about .ticker-track .sep      { color: rgba(168,221,184,.6) !important }
.page-about .hero-eyebrow-i         { color: var(--green-light) !important }
.page-about .hero-line-i--em        { color: var(--orange) !important }
.page-about .hero-scroll .hs-dot    { background: var(--orange) !important }
.page-about .hs-beacon::before      { border-color: rgba(232,115,42,.5) !important }
.page-about .hs-beacon::after       { border-color: rgba(232,115,42,.2) !important }
.page-about .s-label                { color: var(--orange) !important }
.page-about #about .s-label         { color: var(--green-bright) !important }
.page-about .btn-gold               { background: var(--orange) !important; color: var(--green-deep) !important }
.page-about .btn-gold:hover         { box-shadow: 0 16px 40px rgba(232,115,42,.4) !important }
.page-about .btn-gold-outline       { border-color: var(--green-light) !important; color: var(--green-light) !important }
.page-about .btn-gold-outline::before { background: var(--green-light) !important }
.page-about .btn-gold-outline:hover { color: var(--green-deep) !important }
.page-about .stat-n                 { color: var(--orange) !important }
.page-about .about-badge            { background: var(--orange) !important }
.page-about .about-badge .big       { color: var(--green-deep) !important }
.page-about .about-badge .sm        { color: rgba(13,43,30,.6) !important }
.page-about .about-stats            { border-top-color: rgba(232,115,42,.25) !important }
.page-about .stu-ticker             { background: var(--green-rich) !important }
.page-about .stu-ticker-track .stu-dot { color: rgba(168,221,184,.5) !important }
.page-about .stu-number-fill        {
  background: linear-gradient(135deg, var(--orange) 0%, var(--green-bright) 40%, var(--green-light) 100%) !important;
  -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.page-about .stu-perk-icon          { border-color: rgba(168,221,184,.35) !important }
.page-about .atm-big em             { color: var(--orange) !important }
.page-about #bar-section .s-label   { color: var(--green-bright) !important }
.page-about #book                   { border-top-color: var(--orange) !important }
.page-about #book::before           { color: rgba(232,115,42,.04) !important }
.page-about .book-hours             { border-top-color: rgba(232,115,42,.18) !important }
.page-about .l-line                 { background: linear-gradient(90deg, var(--green-rich), var(--green-bright), var(--orange)) !important }
.page-about .ft-col h4              { color: var(--orange) !important }
.page-about .ft-social a:hover      { color: var(--orange) !important }
.page-about nav.stuck               { border-bottom-color: rgba(232,115,42,.3) !important }
.page-about .s-title em             { color: var(--orange) !important }
.page-about .rev-cta:hover          { color: var(--orange) !important }
/* Gallery section on about gets green-light dots */
.page-about .gal-dot.active         { background: var(--green-light) !important }
.page-about .gal-btn                { border-color: rgba(168,221,184,.45) !important; color: var(--green-light) !important }
.page-about .gal-btn:hover          { background: rgba(168,221,184,.15) !important; border-color: var(--green-light) !important }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CONTACT / EVENTS — punchy reds.
   Energy, party, action, private hire urgency.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.page-contact .nav-btn              { background: var(--red-light) !important; border-color: var(--red-light) !important }
.page-contact .nav-btn::before      { background: var(--red-deep) !important }
.page-contact .nav-links a::after   { background: var(--red-light) !important }
.page-contact .ticker               { background: var(--red-deep) !important }
.page-contact .hero-eyebrow-i       { color: var(--red-light) !important }
.page-contact .hero-line-i--em      { color: var(--red-light) !important }
.page-contact .hero-scroll .hs-dot  { background: var(--red-light) !important }
.page-contact .hs-beacon::before    { border-color: rgba(232,101,101,.5) !important }
.page-contact .hs-beacon::after     { border-color: rgba(232,101,101,.2) !important }
.page-contact .s-label              { color: var(--red-light) !important }
.page-contact .btn-gold             { background: var(--red-light) !important }
.page-contact .btn-gold:hover       { box-shadow: 0 16px 40px rgba(232,101,101,.45) !important }
.page-contact .btn-gold-outline     { border-color: var(--red-light) !important; color: var(--red-light) !important }
.page-contact .btn-gold-outline::before { background: var(--red-light) !important }
.page-contact .btn-gold-outline:hover { color: #fff !important }
/* Events section — red drives everything */
.page-contact .ev-top-label         { color: var(--red-light) !important }
.page-contact .ev-item[data-col="pink"] .ev-day-big  { color: var(--red-light) !important }
.page-contact .ev-item[data-col="pink"] .ev-flood    { background: linear-gradient(110deg, rgba(232,101,101,.22) 0%, rgba(124,28,28,.05) 100%) !important }
.page-contact .ev-item[data-col="pink"] .ev-accent   { background: linear-gradient(90deg, var(--red-light), transparent) !important }
.page-contact .ev-item[data-col="pink"] .ev-free     { color: var(--red-light) !important }
.page-contact .ev-item[data-col="green"] .ev-day-big { color: var(--green-bright) !important }
/* Private hire perk titles colour-coded by type */
.page-contact .ph-perk:nth-child(1) .ph-perk-title  { color: var(--red-light) !important }
.page-contact .ph-perk:nth-child(2) .ph-perk-title  { color: var(--blue-mid) !important }
.page-contact .ph-perk:nth-child(3) .ph-perk-title  { color: var(--yellow-warm) !important }
.page-contact .ph-perk:nth-child(4) .ph-perk-title  { color: var(--red-deep) !important }
.page-contact .hire-submit          { background: var(--red-light) !important }
.page-contact .hire-submit:hover    { box-shadow: 0 12px 32px rgba(232,101,101,.4) !important }
.page-contact .ph-field input:focus,
.page-contact .ph-field select:focus,
.page-contact .ph-field textarea:focus { border-color: var(--red-light) !important; box-shadow: 0 0 0 3px rgba(232,101,101,.12) !important }
.page-contact #book                 { border-top-color: var(--red-deep) !important }
.page-contact #book::before         { color: rgba(232,101,101,.04) !important }
.page-contact .book-hours           { border-top-color: rgba(232,101,101,.18) !important }
.page-contact .l-line               { background: linear-gradient(90deg, var(--red-deep), var(--red-light)) !important }
.page-contact .ft-col h4            { color: var(--red-light) !important }
.page-contact .ft-social a:hover    { color: var(--red-light) !important }
.page-contact nav.stuck             { border-bottom-color: rgba(232,101,101,.3) !important }
.page-contact .s-title em           { color: var(--red-light) !important }

/* ── HERO: per-page scroll cover tint & base bloom ── */
.page-food   #hero-cover   { background: #1C1400 !important }
.page-about  #hero-cover   { background: #0E1A0C !important }
.page-contact #hero-cover  { background: #1C0808 !important }

/* Subtle colour bloom rising from the base of each hero */
.page-food   #hero::after  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(224,188,58,.22) 0%,transparent 58%); z-index:2; pointer-events:none }
.page-about  #hero::after  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(232,115,42,.16) 0%,transparent 52%); z-index:2; pointer-events:none }
.page-contact #hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 100%,rgba(180,30,30,.22) 0%,transparent 58%); z-index:2; pointer-events:none }

/* ── PAGE TRANSITION ── */
#pt{position:fixed;inset:0;z-index:99999;background:var(--black);display:flex;align-items:center;justify-content:center;transform:translateY(100%);will-change:transform;pointer-events:none}
.pt-in #pt{transform:translateY(0%)}
.pt-inner{text-align:center}
.pt-row{overflow:hidden}
.pt-eyebrow{font-family:var(--font-b);font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(245,240,232,.38);display:block;margin-bottom:10px;transform:translateY(110%)}
.pt-word{font-family:var(--font-d);font-size:clamp(2.8rem,9vw,7rem);font-weight:300;text-transform:uppercase;letter-spacing:.08em;color:var(--cream);display:block;transform:translateY(110%);line-height:.9}
.pt-rule{width:0;height:1px;margin:18px auto 0;background:linear-gradient(90deg,var(--blue-mid),var(--green-bright),var(--pink),var(--yellow-warm),var(--orange))}