/* =========================================================================
   WATSON'S COCKTAIL BAR — Design System & Site Styles
   Leicester's private cocktail bar for after-work drinks, client
   entertaining, private hire and classic, expertly crafted cocktails.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Forum&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Comforter&display=swap');

/* ---- Design Tokens ------------------------------------------------------ */
:root{
  /* colours */
  --color-bg:            #0c0c0c;
  --color-bg-alt:        #161616;
  --color-bg-card:       #1c1c1c;
  --color-bg-card-alt:   #202020;
  --color-border:        #2b2b2b;
  --color-text:          #a8a8a8;
  --color-text-muted:    #7a7a7a;
  --color-heading:       #ffffff;
  --color-accent:        #c9a15a;
  --color-accent-light:  #e3c383;
  --color-accent-dark:   #9c7a3f;
  --color-overlay:       rgba(8,8,8,.72);
  --color-overlay-strong:rgba(6,6,6,.86);

  /* type */
  --font-heading: 'Forum', Georgia, 'Times New Roman', serif;
  --font-body: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Comforter', cursive;

  /* layout */
  --container-w: 1240px;
  --container-pad: 20px;
  --header-h: 90px;
  --header-h-scrolled: 76px;
  --radius: 2px;
  --transition: .3s ease;

  color-scheme: dark;
}

/* ---- Reset -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.75;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
input,textarea,select{font:inherit}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  color:var(--color-heading);
  font-weight:400;
  line-height:1.25;
  letter-spacing:.01em;
}
h1{font-size:clamp(2.4rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,4.2vw,3rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
svg{display:block}

.container{
  width:100%;
  max-width:var(--container-w);
  margin-inline:auto;
  padding-inline:var(--container-pad);
}

/* skip link */
.skip-link{
  position:absolute;left:-999px;top:0;background:var(--color-accent);color:#0c0c0c;
  padding:.75em 1.25em;z-index:9999;font-weight:700;
}
.skip-link:focus{left:10px;top:10px}

/* ---- Utility ------------------------------------------------------------ */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--color-accent);
  margin-bottom:1em;
}
.eyebrow::before,.eyebrow::after{content:'';width:28px;height:1px;background:var(--color-accent-dark)}
.eyebrow.center{justify-content:center}
.section-title{margin-bottom:1.1rem}
.section-title em{font-style:italic;color:var(--color-accent)}
.section-lede{
  max-width:640px;
  color:var(--color-text-muted);
  font-size:1.03rem;
}
.center{text-align:center;margin-inline:auto}
.script-tag{
  font-family:var(--font-script);
  font-size:2.1rem;
  color:var(--color-accent);
  line-height:1;
  display:block;
  margin-bottom:.35em;
}
.section{padding:clamp(60px,9vw,110px) 0}
.section--alt{background:var(--color-bg-alt)}
.section--tight{padding:clamp(40px,6vw,64px) 0}
.divider{
  width:70px;height:2px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);
  margin:1.4rem auto;
}
.divider.left{margin-inline:0 auto}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-heading);
  font-size:1rem;
  letter-spacing:.04em;
  padding:.95em 2.1em;
  border:1px solid var(--color-accent);
  color:var(--color-heading);
  background:transparent;
  transition:background var(--transition),color var(--transition),border-color var(--transition),transform var(--transition);
  white-space:nowrap;
}
.btn:hover,.btn:focus-visible{background:var(--color-accent);color:#0c0c0c;transform:translateY(-2px)}
.btn--solid{background:var(--color-accent);color:#0c0c0c}
.btn--solid:hover{background:var(--color-accent-light);border-color:var(--color-accent-light)}
.btn--ghost{border-color:rgba(255,255,255,.35)}
.btn--ghost:hover{border-color:var(--color-accent)}
.btn--block{width:100%}
.btn--sm{padding:.7em 1.5em;font-size:.9rem}

/* ---- Header --------------------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:var(--header-h);
  display:flex;align-items:center;
  background:transparent;
  transition:background var(--transition),height var(--transition),box-shadow var(--transition);
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  height:var(--header-h-scrolled);
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--color-border);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.brand img{height:52px;width:auto;transition:height var(--transition)}
.site-header.is-scrolled .brand img{height:55px}
.brand__text{font-family:var(--font-heading);font-size:1.05rem;letter-spacing:.08em;color:var(--color-heading)}

.nav{display:flex;align-items:center;gap:2.4rem}
.nav__list{display:flex;align-items:center;gap:2.1rem}
.nav__list a{
  font-family:var(--font-heading);
  font-size:.98rem;
  letter-spacing:.05em;
  color:#efefef;
  position:relative;
  padding:.4em 0;
  transition:color var(--transition);
}
.nav__list a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--color-accent);
  transition:width var(--transition);
}
.nav__list a:hover,.nav__list a:focus-visible,.nav__list a[aria-current="page"]{color:var(--color-accent)}
.nav__list a:hover::after,.nav__list a:focus-visible::after,.nav__list a[aria-current="page"]::after{width:100%}

.header-cta{display:flex;align-items:center;gap:1.1rem}
.header-cta .phone{
  display:flex;align-items:center;gap:.5em;font-family:var(--font-heading);font-size:.95rem;color:var(--color-heading);
}
.header-cta .phone svg{width:16px;height:16px;color:var(--color-accent)}

.nav-toggle{
  display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:34px;z-index:1100;
}
.nav-toggle span{display:block;width:100%;height:2px;background:#fff;transition:transform var(--transition),opacity var(--transition)}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Mobile Nav ------------------------------------------------------------ */
@media (max-width:960px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(340px,86vw);height:100vh;
    background:#0a0a0a;border-left:1px solid var(--color-border);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:110px 2rem 2rem;gap:2.5rem;
    transform:translateX(100%);transition:transform .4s ease;
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:flex-start;gap:1.5rem;width:100%}
  .nav__list a{font-size:1.15rem}
  .header-cta{flex-direction:column;align-items:flex-start;gap:1rem}
  .nav-toggle{display:flex}
  .nav-scrim{
    position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity var(--transition);z-index:999;
  }
  .nav-scrim.is-open{opacity:1;pointer-events:auto}
}

/* ---- Hero ------------------------------------------------------------------ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#050505 url('../images/Leicester_Vegan_Bar_UK-1.jpg') center/cover no-repeat fixed;
  padding-top:var(--header-h);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,4,4,.55) 0%,rgba(4,4,4,.55) 40%,rgba(4,4,4,.9) 100%);
  z-index:1;
}
.hero__inner{position:relative;z-index:2;max-width:820px;padding-inline:1.4rem}
.hero__eyebrow{
  font-family:var(--font-body);font-size:.82rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--color-accent-light);margin-bottom:1.4rem;display:block;
}
.hero h1{
  text-transform:uppercase;
  text-shadow:0 4px 30px rgba(0,0,0,.6);
  margin-bottom:1.3rem;
}
.hero p{
  color:#d8d8d8;font-size:1.08rem;max-width:640px;margin-inline:auto;margin-bottom:2.2rem;
}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-bottom:1rem}
.hero__social{display:flex;gap:1.1rem;justify-content:center;margin-top:2.6rem}
.hero__social a{
  width:40px;height:40px;border:1px solid rgba(255,255,255,.25);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all var(--transition);
}
.hero__social a:hover{background:var(--color-accent);border-color:var(--color-accent)}
.hero__social svg{width:16px;height:16px}

.scroll-cue{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6em;
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:#cfcfcf;
}
.scroll-cue__mouse{width:22px;height:36px;border:2px solid rgba(255,255,255,.5);border-radius:12px;position:relative}
.scroll-cue__mouse::before{
  content:'';position:absolute;top:6px;left:50%;width:3px;height:7px;background:var(--color-accent);
  border-radius:2px;transform:translateX(-50%);animation:scrollcue 1.8s infinite;
}
@keyframes scrollcue{0%{opacity:1;top:6px}100%{opacity:0;top:18px}}
@media (prefers-reduced-motion:reduce){.scroll-cue__mouse::before{animation:none}}

/* page (interior) hero banner */
.page-hero{
  position:relative;min-height:52vh;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#050505 center/cover no-repeat;padding-top:var(--header-h);
}
.page-hero::before{content:'';position:absolute;inset:0;background:var(--color-overlay-strong)}
.page-hero__inner{position:relative;z-index:2;max-width:760px;padding-inline:1.4rem}
.breadcrumb{display:flex;gap:.5em;justify-content:center;font-size:.85rem;color:var(--color-text-muted);margin-top:1rem}
.breadcrumb a{color:var(--color-text-muted);transition:color var(--transition)}
.breadcrumb a:hover{color:var(--color-accent)}
.breadcrumb span[aria-current]{color:var(--color-accent-light)}

/* ---- About / Intro grid ----------------------------------------------------- */
.about-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
@media (min-width:900px){.about-grid{grid-template-columns:1fr 1fr;gap:4rem}}
.about-grid__media{position:relative}
.about-grid__media img{width:100%;height:100%;object-fit:cover;border:1px solid var(--color-border)}
.about-grid__media .frame{position:absolute;inset:16px -16px -16px 16px;border:1px solid var(--color-accent);z-index:-1;display:none}
@media (min-width:900px){.about-grid__media .frame{display:block}}

.feature-row{display:grid;grid-template-columns:repeat(1,1fr);gap:1.8rem;margin-top:3rem}
@media (min-width:640px){.feature-row{grid-template-columns:repeat(3,1fr)}}
.feature{text-align:center;padding:1.6rem 1rem;border:1px solid var(--color-border);background:var(--color-bg-card);transition:transform var(--transition),border-color var(--transition)}
.feature:hover{transform:translateY(-6px);border-color:var(--color-accent)}
.feature__icon{width:52px;height:52px;margin:0 auto 1rem;color:var(--color-accent)}
.feature h3{font-size:1.15rem;margin-bottom:.4rem;text-transform:uppercase;letter-spacing:.03em}
.feature p{font-size:.92rem;color:var(--color-text-muted);margin:0}

/* ---- Spiritual / legacy quote block ----------------------------------------- */
.legacy{
  position:relative;background:#0a0a0a url('../images/Leicester_Vegan_Bar_UK-1.jpg') center/cover fixed;
  padding:0;
}
.legacy::before{content:'';position:absolute;inset:0;background:var(--color-overlay-strong)}
.legacy__inner{position:relative;z-index:2;max-width:760px;margin-inline:auto;text-align:center;padding:clamp(70px,10vw,120px) 1.4rem}
.legacy p.lede{font-size:1.15rem;color:#e4e4e4}
.legacy .quote{
  margin-top:2.4rem;padding-top:2.2rem;border-top:1px solid rgba(255,255,255,.15);
}
.legacy .quote q{font-family:var(--font-heading);font-style:italic;font-size:1.3rem;color:var(--color-accent-light)}
.legacy .quote cite{display:block;margin-top:1rem;font-style:normal;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-text-muted)}

/* ---- Stat bars (About) ------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(1,1fr);gap:2.4rem;margin-top:2.5rem}
@media (min-width:700px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat span.value{font-family:var(--font-heading);font-size:2.4rem;color:var(--color-accent)}
.stat p{font-size:.82rem;letter-spacing:.15em;text-transform:uppercase;color:var(--color-text-muted);margin-top:.4rem}
.stat .bar{height:4px;background:var(--color-border);margin-top:.9rem;overflow:hidden}
.stat .bar__fill{height:100%;background:var(--color-accent);width:0;transition:width 1.2s ease}

/* ---- Timeline (About story) --------------------------------------------------- */
.timeline{position:relative;margin-top:3rem;padding-left:0}
.timeline::before{content:'';position:absolute;top:0;bottom:0;left:20px;width:1px;background:var(--color-border)}
@media (min-width:760px){.timeline::before{left:50%}}
.timeline__item{position:relative;padding:0 0 3rem 56px}
@media (min-width:760px){
  .timeline__item{width:50%;padding:0 3rem 3rem 0;text-align:right}
  .timeline__item:nth-child(even){margin-left:50%;padding:0 0 3rem 3rem;text-align:left}
}
.timeline__item::before{
  content:'';position:absolute;left:12px;top:4px;width:17px;height:17px;border-radius:50%;
  background:var(--color-bg);border:2px solid var(--color-accent);
}
@media (min-width:760px){
  .timeline__item::before{left:auto;right:-9px}
  .timeline__item:nth-child(even)::before{left:-9px;right:auto}
}
.timeline__year{font-family:var(--font-heading);color:var(--color-accent);font-size:1.4rem;display:block;margin-bottom:.3rem}
.timeline__item h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}
.timeline__item p{font-size:.93rem}

/* ---- Value / offering cards --------------------------------------------------- */
.value-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:3rem}
@media (min-width:720px){.value-grid{grid-template-columns:repeat(2,1fr)}}
.value-card{padding:2rem;background:var(--color-bg-card);border-left:2px solid var(--color-accent)}
.value-card h3{margin-bottom:.6rem;font-size:1.15rem;text-transform:uppercase}
.value-card p{font-size:.93rem;margin:0}

.checklist{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2.5rem}
@media (min-width:700px){.checklist{grid-template-columns:1fr 1fr}}
.checklist li{display:flex;gap:.8em;align-items:flex-start;font-size:.95rem;color:var(--color-text)}
.checklist svg{width:20px;height:20px;flex-shrink:0;color:var(--color-accent);margin-top:.15em}

/* ---- Cocktail Showcase ------------------------------------------------------- */
.cocktail-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:3rem}
@media (min-width:600px){.cocktail-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cocktail-grid{grid-template-columns:repeat(3,1fr)}}
.cocktail-card{
  position:relative;overflow:hidden;background:var(--color-bg-card);border:1px solid var(--color-border);
  transition:border-color var(--transition),transform var(--transition);
}
.cocktail-card:hover{border-color:var(--color-accent);transform:translateY(-6px)}
.cocktail-card__media{aspect-ratio:4/5;overflow:hidden}
.cocktail-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cocktail-card:hover .cocktail-card__media img{transform:scale(1.08)}
.cocktail-card__body{padding:1.4rem 1.5rem 1.7rem}
.cocktail-card__body h3{font-size:1.2rem;margin-bottom:.5rem}
.cocktail-card__body p{font-size:.9rem;margin:0}
.cocktail-card__tag{
  position:absolute;top:14px;left:14px;z-index:2;background:rgba(10,10,10,.75);border:1px solid var(--color-accent);
  color:var(--color-accent-light);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.35em .8em;
}

/* ---- Menu (food/drink) tabs & cards -------------------------------------------- */
.menu-tabs{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin:2.6rem 0}
.menu-tab{
  padding:.75em 1.6em;border:1px solid var(--color-border);font-family:var(--font-heading);font-size:.95rem;
  letter-spacing:.04em;transition:all var(--transition);
}
.menu-tab[aria-selected="true"],.menu-tab:hover{border-color:var(--color-accent);color:var(--color-accent-light);background:rgba(201,161,90,.08)}

.dish-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media (min-width:640px){.dish-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.dish-grid{grid-template-columns:repeat(3,1fr)}}
.dish-card{border:1px solid var(--color-border);background:var(--color-bg-card);overflow:hidden;transition:transform var(--transition),border-color var(--transition)}
.dish-card:hover{transform:translateY(-5px);border-color:var(--color-accent)}
.dish-card__media{aspect-ratio:16/11;overflow:hidden;background:#111}
.dish-card__media img{width:100%;height:100%;object-fit:cover}
.dish-card__body{padding:1.3rem 1.4rem}
.dish-card__body h3{font-size:1.08rem;margin-bottom:.4rem}
.dish-card__body p{font-size:.88rem;margin:0}
.dish-card--vegan{position:relative}
.dish-card__badge{
  display:inline-flex;align-items:center;gap:.4em;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:#8fbf7e;border:1px solid #3c5a34;padding:.25em .6em;margin-bottom:.6em;
}

.menu-panel{display:none}
.menu-panel.is-active{display:block;animation:fadeIn .4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.menu-cta{
  margin-top:4rem;padding:3rem 2rem;text-align:center;border:1px solid var(--color-border);
  background:linear-gradient(180deg,var(--color-bg-card),var(--color-bg-alt));
}
.menu-cta h3{margin-bottom:.6rem}
.menu-cta p{max-width:560px;margin-inline:auto;margin-bottom:1.6rem;font-size:.95rem}

/* ---- Reservation banner ------------------------------------------------------- */
.reserve-banner{
  position:relative;background:#0a0a0a url('../images/Vegan-bar-uk-drinks.jpg') center 30%/cover fixed;
  text-align:center;
}
.reserve-banner::before{content:'';position:absolute;inset:0;background:var(--color-overlay-strong)}
.reserve-banner__inner{position:relative;z-index:2;padding:clamp(60px,8vw,90px) 1.4rem;max-width:700px;margin-inline:auto}
.reserve-banner h2{margin-bottom:1rem}
.reserve-banner p{margin-bottom:2rem;color:#ddd}

/* ---- Testimonials --------------------------------------------------------------- */
.testimonial-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:3rem}
@media (min-width:760px){.testimonial-grid{grid-template-columns:repeat(2,1fr)}}
.testimonial{padding:2rem;background:var(--color-bg-card);border:1px solid var(--color-border);position:relative}
.testimonial .stars{color:var(--color-accent);font-size:.9rem;letter-spacing:.15em;margin-bottom:1rem}
.testimonial p.quote{font-size:.98rem;font-style:italic;color:#cfcfcf}
.testimonial__meta{display:flex;align-items:center;gap:1em;margin-top:1.4rem}
.testimonial__meta img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.testimonial__meta strong{display:block;color:var(--color-heading);font-size:.92rem;font-weight:600}
.testimonial__meta span{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted)}

/* ---- FAQ (accordion) ------------------------------------------------------------ */
.faq-list{max-width:820px;margin:3rem auto 0}
.faq-item{border-bottom:1px solid var(--color-border)}
.faq-item__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  text-align:left;padding:1.4rem 0;font-family:var(--font-heading);font-size:1.05rem;color:var(--color-heading);
}
.faq-item__q .icon{flex-shrink:0;width:22px;height:22px;position:relative}
.faq-item__q .icon::before,.faq-item__q .icon::after{
  content:'';position:absolute;background:var(--color-accent);top:50%;left:50%;transform:translate(-50%,-50%);
}
.faq-item__q .icon::before{width:14px;height:2px}
.faq-item__q .icon::after{width:2px;height:14px;transition:transform var(--transition)}
.faq-item__q[aria-expanded="true"] .icon::after{transform:translate(-50%,-50%) rotate(90deg) scaleY(0)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item__a p{padding-bottom:1.4rem;font-size:.95rem;max-width:700px}

/* ---- Info / hours / contact strip ------------------------------------------------ */
.info-grid{display:grid;grid-template-columns:1fr;gap:3rem;margin-top:1rem}
@media (min-width:900px){.info-grid{grid-template-columns:1.1fr .9fr}}
.hours-table{width:100%;border-collapse:collapse}
.hours-table tr{border-bottom:1px solid var(--color-border)}
.hours-table tr:last-child{border-bottom:none}
.hours-table td{padding:.85em .2em;font-size:.95rem}
.hours-table td:first-child{color:var(--color-heading);font-family:var(--font-heading);letter-spacing:.03em}
.hours-table td:last-child{text-align:right;color:var(--color-text-muted)}
.hours-table tr.today td{color:var(--color-accent-light)}
.hours-table tr.today td:first-child{color:var(--color-accent)}

.contact-cards{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:520px){.contact-cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:900px){.contact-cards{grid-template-columns:1fr}}
.contact-card{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem;background:var(--color-bg-card);border:1px solid var(--color-border)}
.contact-card svg{width:22px;height:22px;color:var(--color-accent);flex-shrink:0;margin-top:.2em}
.contact-card h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.12em;margin-bottom:.35em;color:var(--color-text-muted)}
.contact-card p,.contact-card a{font-size:1rem;color:var(--color-heading)}
.contact-card a:hover{color:var(--color-accent)}

/* ---- Map ---------------------------------------------------------------------------- */
.map-wrap{border:1px solid var(--color-border);height:340px}
.map-wrap iframe{width:100%;height:100%;border:0;display:block}

/* ---- Contact form --------------------------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.form-grid .full{grid-column:1/-1}
.field label{display:block;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:.6em}
.field input,.field textarea,.field select{
  width:100%;background:var(--color-bg-card);border:1px solid var(--color-border);color:var(--color-heading);
  padding:.9em 1em;transition:border-color var(--transition);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--color-accent)}
.field textarea{resize:vertical;min-height:140px}
.form-note{font-size:.8rem;color:var(--color-text-muted);margin-top:1rem}
.form-status{margin-top:1rem;font-size:.9rem}
.form-status[data-state="success"]{color:#8fbf7e}
.form-status[data-state="error"]{color:#d98f8f}

/* ---- Private hire specific -------------------------------------------------------------- */
.occasion-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:3rem}
@media (min-width:700px){.occasion-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.occasion-grid{grid-template-columns:repeat(4,1fr)}}
.occasion-card{padding:1rem 0}
.occasion-card .num{font-family:var(--font-heading);font-size:2.2rem;color:var(--color-accent);display:block;margin-bottom:.4rem}
.occasion-card h3{font-size:1rem;text-transform:uppercase;letter-spacing:.04em}

.package-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:3rem}
@media (min-width:760px){.package-grid{grid-template-columns:repeat(3,1fr)}}
.package-card{background:var(--color-bg-card);border:1px solid var(--color-border);padding:2.2rem 1.8rem;text-align:center;transition:transform var(--transition),border-color var(--transition)}
.package-card:hover{transform:translateY(-6px);border-color:var(--color-accent)}
.package-card__icon{width:46px;height:46px;margin:0 auto 1.1rem;color:var(--color-accent)}
.package-card h3{font-size:1.15rem;margin-bottom:.6rem;text-transform:uppercase}
.package-card p{font-size:.92rem;margin:0}

/* ---- Footer ------------------------------------------------------------------------------- */
.site-footer{background:#080808;border-top:1px solid var(--color-border);padding-top:clamp(50px,7vw,80px)}
.footer-top{display:grid;grid-template-columns:1fr;gap:2.6rem;padding-bottom:3rem}
@media (min-width:760px){.footer-top{grid-template-columns:1.3fr 1fr 1fr}}
@media (min-width:1080px){.footer-top{grid-template-columns:1.4fr .8fr .9fr 1fr}}
.footer-brand img{height:56px;margin-bottom:1.2rem}
.footer-brand p{font-size:.9rem;max-width:320px}
.footer-social{display:flex;gap:.9rem;margin-top:1.4rem}
.footer-social a{
  width:36px;height:36px;border:1px solid var(--color-border);border-radius:50%;display:flex;align-items:center;justify-content:center;
  transition:all var(--transition);
}
.footer-social a:hover{border-color:var(--color-accent);background:var(--color-accent);color:#0c0c0c}
.footer-social svg{width:15px;height:15px}
.footer-col h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.15em;color:var(--color-heading);margin-bottom:1.3rem}
.footer-col ul{display:flex;flex-direction:column;gap:.75rem}
.footer-col a{font-size:.92rem;color:var(--color-text-muted);transition:color var(--transition)}
.footer-col a:hover{color:var(--color-accent)}
.footer-col address{font-style:normal;font-size:.92rem;color:var(--color-text-muted);line-height:1.8}
.footer-hours td{padding:.3em 0;font-size:.88rem;color:var(--color-text-muted)}
.footer-hours td:last-child{text-align:right}
.footer-bottom{
  border-top:1px solid var(--color-border);padding:1.6rem 0;display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;font-size:.82rem;color:var(--color-text-muted);
}
.footer-bottom a{color:var(--color-text-muted)}
.footer-bottom a:hover{color:var(--color-accent)}
.footer-legal{display:flex;gap:1.4rem;flex-wrap:wrap}

/* back to top */
.to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;
  background:var(--color-accent);color:#0c0c0c;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);transition:all var(--transition);z-index:900;
}
.to-top.is-visible{opacity:1;pointer-events:auto;transform:translateY(0)}
.to-top svg{width:18px;height:18px}

/* ---- Misc responsive tweaks ------------------------------------------------------------------- */
@media (max-width:600px){
  .container{padding-inline:16px}
}

/* Print */
@media print{
  .site-header,.to-top,.nav-toggle,.nav-scrim{display:none}
}

/* =========================================================================
   NAV DROPDOWN (Private Hire cluster)
   ========================================================================= */
.nav__list li.has-dropdown{position:relative}
.nav__list .dropdown-toggle{display:inline-flex;align-items:center;gap:.4em}
.nav__list .dropdown-toggle svg{width:11px;height:11px;transition:transform var(--transition)}
.nav__dropdown{
  list-style:none;margin:0;padding:.6rem 0;
  position:absolute;top:100%;left:-1.2rem;min-width:260px;
  background:#0d0d0d;border:1px solid var(--color-border);
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition);
  z-index:50;
}
li.has-dropdown:hover .nav__dropdown,
li.has-dropdown:focus-within .nav__dropdown{opacity:1;visibility:visible;transform:translateY(0)}
li.has-dropdown:hover .dropdown-toggle svg{transform:rotate(180deg)}
.nav__dropdown li a{
  display:block;padding:.65em 1.4rem;font-size:.88rem;letter-spacing:.02em;color:#d8d8d8;
}
.nav__dropdown li a::after{display:none}
.nav__dropdown li a:hover,.nav__dropdown li a:focus-visible{background:rgba(201,161,90,.08);color:var(--color-accent-light)}
@media (max-width:960px){
  .nav__dropdown{
    position:static;opacity:1;visibility:visible;transform:none;border:none;background:transparent;
    box-shadow:none;padding:.4rem 0 .2rem 1rem;display:none;
  }
  li.has-dropdown.is-open .nav__dropdown{display:block}
  .nav__list .dropdown-toggle svg{transition:transform var(--transition)}
  li.has-dropdown.is-open .dropdown-toggle svg{transform:rotate(180deg)}
}

/* =========================================================================
   BLOG
   ========================================================================= */
.blog-grid{display:grid;grid-template-columns:1fr;gap:1.8rem;margin-top:3rem}
@media (min-width:640px){.blog-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.blog-grid{grid-template-columns:repeat(3,1fr)}}
.blog-card{
  display:flex;flex-direction:column;background:var(--color-bg-card);border:1px solid var(--color-border);
  overflow:hidden;transition:transform var(--transition),border-color var(--transition);
}
.blog-card:hover{transform:translateY(-6px);border-color:var(--color-accent)}
.blog-card__media{aspect-ratio:16/10;overflow:hidden;background:#111}
.blog-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.blog-card:hover .blog-card__media img{transform:scale(1.06)}
.blog-card__body{padding:1.5rem 1.5rem 1.7rem;display:flex;flex-direction:column;flex:1}
.blog-card__meta{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent);margin-bottom:.7em}
.blog-card__body h3{font-size:1.12rem;margin-bottom:.6rem;line-height:1.4}
.blog-card__body p{font-size:.9rem;margin-bottom:1.1rem}
.blog-card__link{margin-top:auto;font-family:var(--font-heading);font-size:.9rem;color:var(--color-accent-light);display:inline-flex;align-items:center;gap:.4em}
.blog-card__link svg{width:14px;height:14px;transition:transform var(--transition)}
.blog-card:hover .blog-card__link svg{transform:translateX(4px)}

.blog-featured{
  display:grid;grid-template-columns:1fr;gap:2rem;background:var(--color-bg-card);border:1px solid var(--color-border);
  overflow:hidden;margin-top:3rem;
}
@media (min-width:800px){.blog-featured{grid-template-columns:1.1fr 1fr;gap:0}}
.blog-featured__media{aspect-ratio:16/10;overflow:hidden}
.blog-featured__media img{width:100%;height:100%;object-fit:cover}
.blog-featured__body{padding:2rem 2.2rem}
@media (min-width:800px){.blog-featured__body{padding:2.6rem}}
.blog-featured__body h2{margin-bottom:.8rem}
.blog-featured__body p{font-size:.98rem}

.tag-pill{
  display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent-light);
  border:1px solid var(--color-accent-dark);padding:.3em .8em;margin:0 .4em .4em 0;
}

/* article / long-form post typography */
.post-hero{
  position:relative;min-height:44vh;display:flex;align-items:flex-end;
  background:#050505 center/cover no-repeat;padding-top:var(--header-h);
}
.post-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,4,4,.35),rgba(4,4,4,.92))}
.post-hero__inner{position:relative;z-index:2;max-width:840px;margin-inline:auto;padding:0 1.4rem 3.2rem;width:100%}
.post-meta{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-top:1rem}
.post-meta span{display:inline-flex;align-items:center;gap:.4em}
.post-meta svg{width:14px;height:14px;color:var(--color-accent)}

.post-body{max-width:760px;margin:0 auto;padding:clamp(50px,7vw,80px) 1.4rem}
.post-body p{font-size:1.03rem;color:#c4c4c4;margin-bottom:1.4em}
.post-body h2{margin-top:2.2em;margin-bottom:.7em;font-size:1.7rem}
.post-body h3{margin-top:1.8em;margin-bottom:.6em}
.post-body ul,.post-body ol{margin:0 0 1.4em 1.3em;color:#c4c4c4}
.post-body li{margin-bottom:.5em;font-size:1.02rem}
.post-body blockquote{
  border-left:2px solid var(--color-accent);margin:2em 0;padding:.2em 0 .2em 1.6em;
  font-family:var(--font-heading);font-size:1.3rem;font-style:italic;color:var(--color-accent-light);
}
.post-body a:not(.btn){color:var(--color-accent-light);text-decoration:underline;text-underline-offset:3px}
.post-body img{margin:2em 0;border:1px solid var(--color-border)}
.post-cta{
  margin-top:3rem;padding:2.4rem;text-align:center;background:var(--color-bg-card);border:1px solid var(--color-border);
}
.post-cta h3{margin-bottom:.6rem}
.post-share{display:flex;align-items:center;gap:1rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--color-border)}
.post-share span{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--color-text-muted)}
.author-box{
  display:flex;gap:1.2rem;align-items:center;margin-top:3rem;padding:1.6rem;background:var(--color-bg-card);border:1px solid var(--color-border);
}
.author-box img{width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0}
.author-box strong{display:block;color:var(--color-heading);font-size:.95rem}
.author-box span{font-size:.82rem;color:var(--color-text-muted)}

.related-posts{max-width:960px;margin:0 auto;padding:0 1.4rem clamp(50px,7vw,80px)}
.related-posts h2{margin-bottom:1.6rem;text-align:center}

/* pillar hub intro card (used on private-hire / tasting pillar pages linking to sub-pages) */
.hub-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin-top:3rem}
@media (min-width:700px){.hub-grid{grid-template-columns:repeat(2,1fr)}}
.hub-card{
  display:flex;flex-direction:column;background:var(--color-bg-card);border:1px solid var(--color-border);overflow:hidden;
  transition:transform var(--transition),border-color var(--transition);
}
.hub-card:hover{transform:translateY(-6px);border-color:var(--color-accent)}
.hub-card__media{aspect-ratio:16/10;overflow:hidden}
.hub-card__media img{width:100%;height:100%;object-fit:cover}
.hub-card__body{padding:1.7rem 1.8rem}
.hub-card__body h3{font-size:1.25rem;margin-bottom:.6rem}
.hub-card__body p{font-size:.93rem;margin-bottom:1.2rem}
.hub-card{position:relative}

/* status badges — Offers & Sponsorship pages */
.status-badge{
  display:inline-flex;align-items:center;gap:.5em;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.35em .9em;font-family:var(--font-body);font-weight:700;
}
.status-badge::before{content:'';width:7px;height:7px;border-radius:50%;flex-shrink:0}
.status-badge--live{color:#8fbf7e;border:1px solid #3c5a34;background:rgba(143,191,126,.08)}
.status-badge--live::before{background:#8fbf7e;box-shadow:0 0 0 3px rgba(143,191,126,.18)}
.status-badge--soon{color:var(--color-accent-light);border:1px solid var(--color-accent-dark);background:rgba(201,161,90,.08)}
.status-badge--soon::before{background:var(--color-accent)}
.hub-card .status-badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(10,10,10,.85)}

.coming-soon-note{
  margin-top:1.6rem;padding:1.4rem 1.6rem;border:1px dashed var(--color-border);background:var(--color-bg-card);
  font-size:.92rem;color:var(--color-text-muted);
}
.coming-soon-note strong{color:var(--color-heading);font-weight:600}


/* ---- Intro screen (homepage) — mirrors live site: dark bar shelf, logo zoom-in, hanging mouse + SCROLL ---- */
.intro{
  position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#181818 url('../images/pexels-rachel-claire-5490965-1-scaled.jpg') center/cover no-repeat;
  overflow:hidden;text-align:center;
}
.intro::before{content:"";position:absolute;inset:0;background:#181818;opacity:.78;z-index:1}
.intro__inner{position:relative;z-index:2;padding-inline:1.4rem;width:100%}
.intro__logo{
  width:min(463px,78vw);height:auto;margin-inline:auto;
  animation:introZoom 1.3s cubic-bezier(.22,.61,.36,1) both;
  transition:transform .3s ease-in-out;
}
.intro__logo:hover{transform:scale(1.1)}
.intro__scroll{
  position:absolute;left:50%;bottom:clamp(20px,5vh,48px);transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
}
.intro__mouse{width:25px;height:auto;animation:introHang 1.4s ease-in-out infinite alternate}
.intro__scroll-text{
  font-family:var(--font-body);font-size:.875rem;font-weight:700;letter-spacing:5px;text-transform:uppercase;color:#fff;
}
@keyframes introZoom{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}to{opacity:1;transform:scale3d(1,1,1)}}
@keyframes introHang{from{transform:translateY(0)}to{transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.intro__logo,.intro__mouse{animation:none}}

/* ---- Full-width map (contact page) ---- */
.map-full{width:100%;height:clamp(320px,50vw,503px);margin-top:2rem;border-block:1px solid var(--color-border)}
.map-full iframe{width:100%;height:100%;border:0;display:block}

/* ---- AEO: quick-answer box, facts table ---- */
.quick-answer{margin:0 0 2.2rem;padding:1.3rem 1.5rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-left:3px solid var(--color-accent)}
.quick-answer__label{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent-light);margin-bottom:.5rem;font-weight:700}
.quick-answer p{margin:0 !important;font-size:1.02rem !important;color:#e0e0e0 !important;text-align:left}
.quick-answer--page{max-width:860px;margin:0 auto;text-align:left}
.facts-table{width:100%;border-collapse:collapse;text-align:left}
.facts-table th,.facts-table td{padding:.95rem 1rem;border-bottom:1px solid var(--color-border);vertical-align:top;font-size:.96rem}
.facts-table th{width:34%;color:var(--color-heading);font-weight:700;letter-spacing:.04em}
.facts-table a{color:var(--color-accent-light);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.facts-table th,.facts-table td{display:block;width:100%;padding:.4rem 0}.facts-table th{padding-top:1rem;border-bottom:0}}
.post-body .faq-list{margin-top:1.4rem}
.post-body .faq-item__q span:first-child{font-size:1rem}

/* ---- Blog index filter ---- */
.blog-filter{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:2.4rem 0 1rem}
.blog-filter__chip{
  background:transparent;border:1px solid var(--color-border);color:var(--color-text);font:inherit;font-size:.8rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.55em 1.1em;cursor:pointer;transition:all var(--transition)
}
.blog-filter__chip:hover,.blog-filter__chip.is-active{border-color:var(--color-accent);color:var(--color-accent-light);background:rgba(201,161,90,.08)}
.blog-count{text-align:center;font-size:.8rem;color:var(--color-text-muted);margin-bottom:1.4rem}
.blog-card[hidden]{display:none}
a.value-card{display:block;transition:transform var(--transition),border-color var(--transition)}a.value-card:hover{transform:translateY(-4px);background:#1a1a1a}

/* ---- Header fit: nine nav items need tighter spacing on small desktops ---- */
@media (min-width:961px){.nav__list a{white-space:nowrap}}
@media (min-width:961px) and (max-width:1359px){
  .nav{gap:1.1rem}
  .nav__list{gap:1.05rem}
  .nav__list a{font-size:.72rem;letter-spacing:.07em}
}

/* ---- Footer: five columns (brand+address, explore, private hire, offers & events, guides) ---- */
@media (min-width:1080px){.footer-top{grid-template-columns:1.5fr .8fr 1fr .95fr 1fr}}
.footer-address{font-style:normal;font-size:.9rem;color:var(--color-text-muted);line-height:1.8;margin-top:1.4rem}
.footer-address a{color:var(--color-text-muted)}
.footer-address a:hover{color:var(--color-accent)}

/* ---- Consent bar ---- */
.consent-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:200;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  padding:1rem clamp(1rem,4vw,2.4rem);background:#101010;border-top:1px solid var(--color-border);box-shadow:0 -10px 30px rgba(0,0,0,.5)
}
.consent-bar p{margin:0;font-size:.85rem;max-width:760px;color:#cfcfcf}
.consent-bar a{color:var(--color-accent-light);text-decoration:underline}
.consent-bar div{display:flex;gap:.6rem}

/* ---- Header: phone number always on one line; Menu now lives under "Menu & Tastings" ---- */
.header-cta .phone,.header-cta .phone span{white-space:nowrap}
@media (min-width:961px) and (max-width:1179px){.header-cta .btn{display:none}.nav{gap:.9rem}.nav__list{gap:.9rem}.nav__list a{font-size:.72rem;letter-spacing:.03em}.header-cta .phone{font-size:.85rem}}
@media (min-width:961px) and (max-width:1359px){.nav{gap:1.3rem}.nav__list{gap:1.2rem}.nav__list a{font-size:.76rem}}
.footer-bottom{flex-wrap:wrap;gap:.4rem 1.6rem}
.powered-by{font-size:.85rem;color:var(--color-text-muted);margin:0}
.powered-by a{color:var(--color-accent-light);text-decoration:underline;text-underline-offset:3px}
.powered-by a:hover{color:var(--color-accent)}