/* ================================================================
   SHARED STYLES — The Hub Sakaki Izakaya
   Common CSS for nav, footer, mobile CTA, buttons, typography,
   responsive breakpoints, and utilities across all pages.
   ================================================================ */

/* Reset */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

/* CSS Variables */
:root{
  --gold:#C4A35A;
  --gold-light:#D4B86A;
  --gold-dark:#A08840;
  --gold-deep:#8B6B30;
  --gold-subtle:rgba(196,163,90,0.08);
  --gold-gradient:linear-gradient(135deg,#C4A35A,#D4B86A);
  --bg:#0a0a0a;
  --bg-alt:#111111;
  --bg-alt2:#0d0d0d;
  --bg-section:#0d0d0d;
  --text:#ffffff;
  --text-secondary:rgba(255,255,255,0.7);
  --text-muted:rgba(255,255,255,0.6);
  --text-mid:rgba(255,255,255,0.7);
  --text-dim:rgba(255,255,255,0.6);
  --card-bg:rgba(255,255,255,0.05);
  --card-border:1px solid rgba(255,255,255,0.1);
  --card-radius:12px;
  --neon-purple:#8B5CF6;
  --neon-pink:#EC4899;
  --footer-bg:#050505;
  --container:1200px;
  --font-sans:'Rubik',sans-serif;
  --font-display:'Rubik',sans-serif;
  --font-ja:'Noto Serif JP',serif;
}

/* Base Typography */
html{scroll-behavior:smooth;overflow-x:hidden;}
body{font-family:var(--font-sans);font-weight:300;background:var(--bg);color:#fff;line-height:1.7;overflow-x:hidden;position:relative;max-width:100vw;letter-spacing:0.02em;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}

/* Typography system — Rubik throughout, differentiated by weight + tracking */
h1,h2{font-family:var(--font-display);letter-spacing:0.08em;font-weight:300;text-transform:uppercase;}
h3,h4{font-family:var(--font-sans);letter-spacing:0.05em;font-weight:400;text-transform:uppercase;}

/* ========== PAPER NOISE TEXTURE OVERLAY ==========
   Subtle tileable SVG fractal noise at ~2.5% opacity to break up solid black
   backgrounds. Fixed so it stays put on scroll. Non-interactive. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='1'/></svg>");
  opacity:0.025;
  pointer-events:none;
  z-index:1;
  mix-blend-mode:overlay;
}
/* Ensure content sits above the noise layer */
body > *{position:relative;z-index:2;}

/* ========== BRAND MARK SYSTEM — 榊 (Sakaki) KANJI =========================
   The 榊 kanji is the client's name in Japanese and a core brand asset.
   These reusable components use it as a visual signature across the site. */

/* 1a. Eyebrow label — appears above section titles */
.section-eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px;}
.section-eyebrow .ja{font-family:var(--font-ja);font-size:18px;font-weight:700;color:var(--gold);line-height:1;letter-spacing:0;}
.section-eyebrow .en{font-family:var(--font-sans);font-size:11px;font-weight:600;color:var(--gold);text-transform:uppercase;letter-spacing:0.3em;line-height:1;}
.section-header .section-eyebrow,.reviews-header .section-eyebrow{justify-content:center;display:flex;}

/* 1b. Divider stamp — between major content sections */
.divider-stamp{display:flex;align-items:center;justify-content:center;gap:20px;margin:48px auto;max-width:400px;padding:0 20px;opacity:0.8;}
.divider-stamp-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(196,163,90,0.5),transparent);}
.divider-stamp-seal{position:relative;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(196,163,90,0.5);border-radius:50%;font-family:var(--font-ja);font-size:18px;font-weight:700;color:var(--gold);opacity:0.8;}

/* 1c. Footer brand seal — bottom-right watermark */
.footer{position:relative;overflow:hidden;}
.footer-brand-seal{position:absolute;bottom:20px;right:24px;width:120px;height:120px;display:flex;align-items:center;justify-content:center;font-family:var(--font-ja);font-size:110px;font-weight:700;color:var(--gold);opacity:0.08;pointer-events:none;line-height:1;user-select:none;}

/* 1d. Hero watermark — large 榊 as ambient background */
.hero-kanji-watermark{position:absolute;right:-2vh;bottom:-4vh;font-family:var(--font-ja);font-size:30vh;font-weight:700;color:var(--gold);opacity:0.05;pointer-events:none;line-height:1;user-select:none;z-index:1;}

/* Brand lockup utility — logo + kanji pairing */
.brand-lockup{display:inline-flex;align-items:center;gap:10px;}
.brand-lockup .ja{font-family:var(--font-ja);color:var(--gold);font-weight:700;}

/* ========== MOTION SYSTEM — SCROLL-REVEAL + MICRO-INTERACTIONS ==========
   Uses opacity/transform only so SEO/GEO crawlers still see full content.
   Respects prefers-reduced-motion. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.8s cubic-bezier(0.22,1,0.36,1),transform 0.8s cubic-bezier(0.22,1,0.36,1);}
.reveal.in-view{opacity:1;transform:none;}
.reveal-stagger > *{opacity:0;transform:translateY(16px);transition:opacity 0.7s cubic-bezier(0.22,1,0.36,1),transform 0.7s cubic-bezier(0.22,1,0.36,1);}
.reveal-stagger.in-view > *:nth-child(1){transition-delay:0ms;opacity:1;transform:none;}
.reveal-stagger.in-view > *:nth-child(2){transition-delay:80ms;opacity:1;transform:none;}
.reveal-stagger.in-view > *:nth-child(3){transition-delay:160ms;opacity:1;transform:none;}
.reveal-stagger.in-view > *:nth-child(4){transition-delay:240ms;opacity:1;transform:none;}
.reveal-stagger.in-view > *:nth-child(5){transition-delay:320ms;opacity:1;transform:none;}
.reveal-stagger.in-view > *:nth-child(6){transition-delay:400ms;opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important;transition:none !important;}
  .page-intro,.page-intro > *{opacity:1 !important;transform:none !important;animation:none !important;}
}

/* Kintsugi-style card hover — gold fissure border on hover */
.card-kintsugi{position:relative;transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);}
.card-kintsugi::before{content:'';position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:linear-gradient(135deg,#C4A35A 0%,transparent 40%,transparent 60%,#D4B86A 100%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.4s;pointer-events:none;}
.card-kintsugi:hover::before{opacity:1;}
.card-kintsugi:hover{transform:translateY(-4px);}

/* Gold radial glow on primary CTA hover */
.btn-gold-primary{position:relative;overflow:hidden;}
.btn-gold-primary::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(212,184,106,0.6) 0%,transparent 70%);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;pointer-events:none;}
.btn-gold-primary:hover::after{width:200%;height:200%;}

/* Navigation scroll shrink */
.nav{transition:height 0.3s cubic-bezier(0.22,1,0.36,1),background 0.3s;}
.nav-shrunk{height:56px;background:rgba(0,0,0,0.95);}

/* Page load intro choreography */
.page-intro{opacity:0;animation:pageIn 0.9s cubic-bezier(0.22,1,0.36,1) forwards;}
@keyframes pageIn{to{opacity:1;}}
.page-intro > *:not(h1){transform:translateY(8px);opacity:0;animation:pageInStagger 0.9s cubic-bezier(0.22,1,0.36,1) forwards;}
.page-intro > *:not(h1):nth-child(1){animation-delay:120ms;}
.page-intro > *:not(h1):nth-child(2){animation-delay:220ms;}
.page-intro > *:not(h1):nth-child(3){animation-delay:320ms;}
.page-intro > *:not(h1):nth-child(4){animation-delay:420ms;}
@keyframes pageInStagger{to{opacity:1;transform:none;}}

/* ========== UNIVERSAL DARK GRADIENT IMAGE OVERLAY ==========
   Normalizes inconsistent photo lighting across the site and keeps
   white text readable over any photo. Apply .img-overlay to the
   wrapper around content images (hero panels, event cards, KTV room
   cards, gallery images). Do NOT apply to logos, icons, social icons. */
.img-overlay{position:relative;overflow:hidden;}
.img-overlay::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,0.6) 100%);pointer-events:none;z-index:1;}
.img-overlay > .overlay-caption,.img-overlay > .card-overlay,.img-overlay > .hero-panel-inner{position:relative;z-index:2;}

/* ========== NAVIGATION ========== */
/* Note: backdrop-filter may cause jank on older mobile GPUs. Consider will-change:transform on parent elements if performance issues arise. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(0,0,0,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid rgba(255,255,255,0.06);}
.nav-logo{color:#fff;font-size:16px;font-weight:600;letter-spacing:0.5px;display:flex;align-items:center;gap:10px;}
.nav-logo img{height:36px;width:auto;}
.nav-logo span{color:var(--gold);}
.nav-brand{display:flex;align-items:center;gap:8px;}
.nav-social-icons{display:flex;gap:0;align-items:center;}
.nav-social-icons a{display:flex;align-items:center;padding:0 3px;opacity:0.85;transition:opacity 0.2s;}
.nav-social-icons a:hover{opacity:1;}
.nav-social-icons a:hover svg{stroke:#fff;}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center;}
.nav-links > li{position:relative;}
.nav-links > li > a{color:rgba(255,255,255,0.7);font-size:13px;font-weight:500;letter-spacing:2px;text-transform:uppercase;transition:color 0.3s;position:relative;}
.nav-links > li > a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:1px;background:var(--gold);transition:width 0.3s;}
.nav-links > li > a:hover,.nav-links > li > a.active{color:var(--gold);}
.nav-links > li > a:hover::after,.nav-links > li > a.active::after{width:100%;}
.dropdown-arrow{font-size:10px;margin-left:4px;display:inline-block;transition:transform 0.2s;}
.nav-dropdown{position:relative;}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:200px;background:rgba(10,10,10,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(196,163,90,0.2);border-radius:8px;padding:8px 0;margin-top:16px;list-style:none;box-shadow:0 12px 40px rgba(0,0,0,0.5);z-index:200;}
.nav-dropdown-menu::before{content:'';position:absolute;top:-16px;left:0;right:0;height:16px;}
.nav-dropdown-menu li a{display:block;padding:12px 20px;color:rgba(255,255,255,0.7);font-size:13px;font-weight:400;letter-spacing:1.5px;text-transform:uppercase;transition:all 0.2s;white-space:nowrap;}
.nav-dropdown-menu li a:hover,.nav-dropdown-menu li a.active{color:#C4A35A;background:rgba(196,163,90,0.08);}
.nav-dropdown:hover .nav-dropdown-menu{display:block;}
.nav-dropdown:hover .dropdown-arrow{transform:rotate(180deg);}
.nav-dropdown.kb-open .nav-dropdown-menu{display:block;}
.nav-dropdown.kb-open .dropdown-arrow{transform:rotate(180deg);}
.nav-toggle{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:12px;min-height:44px;min-width:44px;position:relative;z-index:10;}
.nav-toggle span{width:28px;height:3px;background:#fff;transition:0.3s;}
.nav-order-btn{background:linear-gradient(135deg,#C4A35A,#D4B86A);color:#0a0a0a !important;padding:8px 20px;border-radius:4px;font-weight:600;letter-spacing:1.5px;font-size:12px;text-transform:uppercase;transition:all 0.3s;box-shadow:0 2px 12px rgba(196,163,90,0.25);}
.nav-order-btn:hover{box-shadow:0 4px 20px rgba(196,163,90,0.4);transform:translateY(-1px);}
.nav-order-btn::after{display:none !important;}

/* ========== MOBILE CTA BAR ========== */
.mobile-cta{display:none;position:fixed;bottom:0;left:0;right:0;z-index:99;background:rgba(0,0,0,0.95);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 12px;border-top:1px solid rgba(196,163,90,0.3);will-change:transform;}
.mobile-cta-inner{display:flex;gap:10px;}
.mobile-cta .sticky-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 6px;border-radius:6px;text-align:center;text-decoration:none;color:#fff;line-height:1.3;}
.mobile-cta .sticky-btn .sticky-label{font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;}
.mobile-cta .sticky-btn .sticky-phone{font-size:14px;font-weight:700;letter-spacing:0.5px;}
.mobile-cta .restaurant-btn{background:linear-gradient(135deg, var(--gold), #D4B86A);color:#0a0a0a;}
.mobile-cta .order-btn{background:linear-gradient(135deg, #C4A35A, #D4B86A);color:#0a0a0a;}
.mobile-cta .order-btn .sticky-label{font-size:12px;font-weight:700;}
.mobile-cta .ktv-btn{background:linear-gradient(135deg, #8B5CF6, #EC4899);}
/* Hide Order Online on mobile CTA, keep in DOM for re-enabling */
.mobile-cta .order-btn{display:none;}
/* With 2 buttons: bigger padding, larger fonts, premium feel */
.mobile-cta .sticky-btn{padding:14px 8px;border-radius:8px;}
.mobile-cta .sticky-btn .sticky-label{font-size:13px;}
.mobile-cta .sticky-btn .sticky-phone{font-size:15px;}
/* Gold top border glow */
.mobile-cta{box-shadow:0 -2px 12px rgba(196,163,90,0.15);}
/* Separator between the two visible buttons */
.mobile-cta .restaurant-btn{border-right:1px solid rgba(255,255,255,0.12);}

/* ========== FOOTER — Premium Minimal ========== */
.footer{background:#050505;color:rgba(255,255,255,0.6);padding:0;border-top:none;position:relative;overflow:hidden;}
.footer-kanji{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:280px;color:rgba(196,163,90,0.03);font-weight:300;pointer-events:none;user-select:none;line-height:1;}
.footer-top-line{height:1px;background:linear-gradient(90deg,transparent,rgba(196,163,90,0.3),transparent);margin:0 auto;max-width:120px;}
.footer-inner{max-width:900px;margin:0 auto;padding:80px 40px 60px;text-align:center;position:relative;z-index:1;}
.footer-brand{margin-bottom:48px;}
.footer-brand-name{font-size:22px;font-weight:300;letter-spacing:8px;text-transform:uppercase;color:rgba(255,255,255,0.9);}
.footer-brand-sub{font-size:11px;letter-spacing:4px;text-transform:uppercase;color:rgba(196,163,90,0.6);margin-top:8px;font-weight:400;}
.footer-nav{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-bottom:48px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,0.06);}
.footer-nav a{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,0.45);text-decoration:none;transition:color 0.3s;font-weight:400;}
.footer-nav a:hover{color:#C4A35A;}
.footer-contact{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-bottom:40px;}
.footer-contact-item{text-align:center;}
.footer-contact-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(196,163,90,0.5);margin-bottom:6px;font-weight:500;}
.footer-contact-value{font-size:14px;color:rgba(255,255,255,0.7);letter-spacing:0.5px;}
.footer-contact-value a{color:rgba(255,255,255,0.7);text-decoration:none;transition:color 0.3s;}
.footer-contact-value a:hover{color:#C4A35A;}
.footer-hours{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.06);}
.footer-hours-col{text-align:center;}
.footer-hours-col .footer-contact-label{margin-bottom:10px;}
.footer-hours-col p{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.8;margin:0;}
.footer-social{display:flex;justify-content:center;gap:24px;margin-bottom:48px;}
.footer-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid rgba(255,255,255,0.08);border-radius:50%;transition:border-color 0.3s,transform 0.3s;}
.footer-social a:hover{border-color:rgba(196,163,90,0.4);transform:translateY(-2px);}
.footer-social a svg{stroke:rgba(255,255,255,0.4);transition:stroke 0.3s;}
.footer-social a:hover svg{stroke:#C4A35A;}
.footer-bottom{font-size:10px;color:rgba(255,255,255,0.25);letter-spacing:2px;text-transform:uppercase;padding-top:0;margin-top:0;border-top:none;}
.footer-peblla{margin-top:12px;opacity:0.45;transition:opacity 0.35s ease;}
.footer-peblla:hover{opacity:1;}
.footer-peblla-link{display:inline-flex;align-items:center;gap:7px;text-decoration:none;cursor:pointer;}
.footer-peblla-dot{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,0.15);flex-shrink:0;}
.footer-peblla-by{font-size:9px;font-weight:400;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.25);}
.footer-peblla-brand{font-size:10px;font-weight:500;letter-spacing:3px;text-transform:uppercase;color:rgba(196,163,90,0.5);transition:text-shadow 0.3s ease,color 0.3s ease;}
.footer-peblla-link:hover .footer-peblla-brand{color:#C4A35A;text-shadow:0 0 14px rgba(196,163,90,0.4);}

/* ========== SVG ICONS ========== */
.svg-icon{display:inline-block;width:28px;height:28px;vertical-align:middle;}
.svg-icon svg{width:100%;height:100%;}

/* ========== SOCIAL LINKS ========== */
.social-link{display:inline-flex;align-items:center;justify-content:center;opacity:0.7;transition:opacity 0.3s;}
.social-link:hover{opacity:1;}

/* ========== COMMON ANIMATION ========== */
.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease, transform 0.8s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* ========== RESPONSIVE: FOOTER ========== */
@media(max-width:768px){
  .footer-inner{padding:60px 24px 48px;}
  .footer-nav{gap:20px;}
  .footer-contact{flex-direction:column;gap:24px;}
  .footer-kanji{font-size:180px;}
  .footer-brand-name{font-size:18px;letter-spacing:6px;}
}

/* ========== RESPONSIVE: TABLET NAV (≤1200px) — hamburger activation ========== */
@media(max-width:1200px){
  .nav-brand{position:relative;z-index:10000;}
  .nav-toggle{display:flex;position:relative;z-index:10000;}
  .nav-toggle span{transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),opacity 0.2s;}
  .nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav-open .nav-toggle span:nth-child(2){opacity:0;}
  .nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  .nav-links{display:flex;position:fixed;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;height:100dvh;background:#050505;background-image:radial-gradient(circle at 50% 0%,rgba(196,163,90,0.10) 0%,transparent 55%),linear-gradient(180deg,#0a0a0a 0%,#050505 100%);flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;padding:88px 28px 40px;border-bottom:none;z-index:9999;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1),transform 0.3s cubic-bezier(0.22,1,0.36,1),visibility 0s linear 0.3s;}
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1),transform 0.3s cubic-bezier(0.22,1,0.36,1),visibility 0s linear 0s;}
  .nav-links::before{content:'';position:absolute;top:64px;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,rgba(196,163,90,0.4),transparent);}
  .nav-links > li{padding:0;border-bottom:1px solid rgba(196,163,90,0.08);opacity:0;transform:translateY(12px);transition:opacity 0.4s cubic-bezier(0.22,1,0.36,1),transform 0.4s cubic-bezier(0.22,1,0.36,1);}
  .nav-links.open > li{opacity:1;transform:translateY(0);}
  .nav-links.open > li:nth-child(1){transition-delay:60ms;}
  .nav-links.open > li:nth-child(2){transition-delay:110ms;}
  .nav-links.open > li:nth-child(3){transition-delay:160ms;}
  .nav-links.open > li:nth-child(4){transition-delay:210ms;}
  .nav-links.open > li:nth-child(5){transition-delay:260ms;}
  .nav-links.open > li:nth-child(6){transition-delay:310ms;}
  .nav-links.open > li:nth-child(7){transition-delay:360ms;}
  .nav-links.open > li:nth-child(8){transition-delay:410ms;}
  .nav-links > li > a{display:flex;align-items:center;justify-content:space-between;padding:18px 4px;font-size:15px;letter-spacing:2.5px;color:rgba(255,255,255,0.88);min-height:56px;}
  .nav-links > li > a::after{display:none;}
  .nav-links > li > a:active,.nav-links > li > a:hover{color:var(--gold);}
  .nav-links > li.nav-dropdown > a::after{display:none;}
  .nav-dropdown-menu{display:none;position:static;transform:none;background:transparent;border:none;border-radius:0;padding:4px 0 8px 14px;margin-top:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;min-width:auto;}
  .nav-dropdown-menu::before{display:none;}
  .nav-dropdown-menu li a{padding:14px 8px;font-size:13px;color:rgba(255,255,255,0.65);letter-spacing:1.8px;min-height:48px;display:flex;align-items:center;}
  .nav-dropdown.mobile-open .nav-dropdown-menu{display:block;}
  .nav-dropdown.mobile-open .dropdown-arrow{transform:rotate(180deg);}
  .nav-links > li:has(> .nav-order-btn){border-bottom:none;margin-top:12px;}
  .nav-order-btn{display:flex;align-items:center;justify-content:center;width:100%;padding:16px 20px !important;font-size:13px !important;border-radius:8px;min-height:52px;}
  body.nav-open{overflow:hidden;touch-action:none;}
  .mobile-cta{display:block;}
  body{padding-bottom:88px;}
}

/* ========== RESPONSIVE: MOBILE NAV + FOOTER (768px) ========== */
@media(max-width:768px){
  .nav-brand{gap:6px;}
  /* Keep social icons visible on mobile, compacted and pushed right next to hamburger */
  .nav-social-icons{display:flex;gap:0;margin-left:auto;margin-right:8px;}
  .nav-social-icons a{min-height:44px;min-width:24px;padding:0 2px;display:flex;align-items:center;justify-content:center;}
  .nav-social-icons svg{width:17px;height:17px;}
  .nav{padding:0 16px;height:64px;width:100vw;max-width:100vw;border-bottom:1px solid rgba(196,163,90,0.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-sizing:border-box;}
  .nav-logo img{height:32px;}

  /* ===== FULL-SCREEN MOBILE MENU PANEL =====
     Uses position:fixed + full viewport height to eliminate layer bleed-through.
     Pairs with body.nav-open scroll lock (set by JS toggle). */
  .nav-links{
    display:flex;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100vh;
    height:100dvh; /* dynamic viewport for mobile safari */
    background:#050505;
    background-image:radial-gradient(circle at 50% 0%,rgba(196,163,90,0.10) 0%,transparent 55%),linear-gradient(180deg,#0a0a0a 0%,#050505 100%);
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:88px 28px 40px;
    border-bottom:none;
    z-index:9999;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1),transform 0.3s cubic-bezier(0.22,1,0.36,1),visibility 0s linear 0.3s;
  }
  .nav-links.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity 0.3s cubic-bezier(0.22,1,0.36,1),transform 0.3s cubic-bezier(0.22,1,0.36,1),visibility 0s linear 0s;
  }
  /* Gold top seam inside menu */
  .nav-links::before{
    content:'';
    position:absolute;
    top:64px;
    left:24px;
    right:24px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(196,163,90,0.4),transparent);
  }
  .nav-links > li{
    padding:0;
    border-bottom:1px solid rgba(196,163,90,0.08);
    opacity:0;
    transform:translateY(12px);
    transition:opacity 0.4s cubic-bezier(0.22,1,0.36,1),transform 0.4s cubic-bezier(0.22,1,0.36,1);
  }
  .nav-links.open > li{opacity:1;transform:translateY(0);}
  .nav-links.open > li:nth-child(1){transition-delay:60ms;}
  .nav-links.open > li:nth-child(2){transition-delay:110ms;}
  .nav-links.open > li:nth-child(3){transition-delay:160ms;}
  .nav-links.open > li:nth-child(4){transition-delay:210ms;}
  .nav-links.open > li:nth-child(5){transition-delay:260ms;}
  .nav-links.open > li:nth-child(6){transition-delay:310ms;}
  .nav-links.open > li:nth-child(7){transition-delay:360ms;}
  .nav-links.open > li:nth-child(8){transition-delay:410ms;}
  .nav-links > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 4px;
    font-size:15px;
    letter-spacing:2.5px;
    color:rgba(255,255,255,0.88);
    min-height:56px;
  }
  .nav-links > li > a::after{display:none;}
  .nav-links > li > a:active,.nav-links > li > a:hover{color:var(--gold);}
  .nav-links > li.nav-dropdown > a::after{display:none;}

  /* Nested dropdown inline */
  .nav-dropdown-menu{
    display:none;
    position:static;
    transform:none;
    background:transparent;
    border:none;
    border-radius:0;
    padding:4px 0 8px 14px;
    margin-top:0;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    min-width:auto;
  }
  .nav-dropdown-menu::before{display:none;}
  .nav-dropdown-menu li a{
    padding:14px 8px;
    font-size:13px;
    color:rgba(255,255,255,0.65);
    letter-spacing:1.8px;
    min-height:48px;
    display:flex;
    align-items:center;
  }
  .nav-dropdown.mobile-open .nav-dropdown-menu{display:block;}
  .nav-dropdown.mobile-open .dropdown-arrow{transform:rotate(180deg);}

  /* Order inside mobile menu — full-width gold button */
  .nav-links > li:has(> .nav-order-btn){
    border-bottom:none;
    margin-top:12px;
  }
  .nav-order-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    padding:16px 20px !important;
    font-size:13px !important;
    border-radius:8px;
    min-height:52px;
  }

  /* Hamburger toggle — stays above overlay */
  .nav-toggle{
    display:flex;
    position:relative;
    z-index:10000;
  }
  .nav-toggle span{transition:transform 0.3s cubic-bezier(0.22,1,0.36,1),opacity 0.2s;}
  .nav-open .nav-toggle span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .nav-open .nav-toggle span:nth-child(2){opacity:0;}
  .nav-open .nav-toggle span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* Body scroll lock while menu is open */
  body.nav-open{overflow:hidden;touch-action:none;}

  .mobile-cta{display:block;bottom:12px;left:12px;right:12px;border-radius:16px;background:rgba(10,10,10,0.95);border:1px solid rgba(196,163,90,0.25);box-shadow:0 8px 32px rgba(0,0,0,0.6),0 0 0 1px rgba(196,163,90,0.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:12px;border-top:none;}
  .mobile-cta::before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#D4B86A,transparent);opacity:0.6;pointer-events:none;}
  /* Hide floating bottom CTA while mobile menu is open */
  body.nav-open .mobile-cta{opacity:0;pointer-events:none;transition:opacity 0.2s;}
  body{padding-bottom:88px;}
  .footer{padding:48px 20px 24px;}
  .footer-inner{grid-template-columns:1fr;}
  h1,h2,h3{overflow-wrap:break-word;word-wrap:break-word;}

  /* ===== MOBILE: Hero CTA button safety — prevent overflow/truncation ===== */
  .hero-cta,.hero-video-ctas,.hero-buttons,.btn-row,.cta-row{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    width:100%;
  }
  .hero-cta a,.hero-video-ctas a,.hero-buttons a,.btn-row a,.cta-row a,
  .hero-cta .btn-primary,.hero-cta .btn-secondary,
  .btn-hero,.btn-hero-primary,.btn-hero-outline{
    width:100%;
    max-width:340px;
    margin:0 auto;
    padding:14px 20px;
    white-space:normal;
    word-break:keep-all;
    font-size:13px;
    letter-spacing:1.5px;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
  }
}

/* ========== RESPONSIVE: SMALL PHONES (480px) ========== */
@media(max-width:480px){
  .nav{padding:0 14px;}
  .nav-logo img{height:28px;}
  .nav-links{padding:80px 22px 32px;}
  .nav-links > li > a{font-size:14px;letter-spacing:2px;padding:16px 4px;}
}

/* ============================================= */
/* Page Transitions — smooth fade between pages  */
/* ============================================= */
html{transition:opacity 0.28s ease-out;}
html.page-leaving{opacity:0;}

.nav-links > li > a:active{transform:scale(0.96);transition:transform 0.1s;}

@media (prefers-reduced-motion: reduce){
  html,body{transition:none !important;animation:none !important;}
  html.page-leaving{opacity:1;}
}

/* ================================================================
   READ MORE / EXPANDABLE PARAGRAPHS — text-density relief
   Wrap long <p> blocks in <div class="readmore"><div class="readmore-clip"><p>...</p></div><button class="readmore-btn">Read more</button></div>
   ================================================================ */
.readmore{position:relative;margin-bottom:14px;}
.readmore-clip{max-height:5.4em;overflow:hidden;position:relative;transition:max-height 0.4s cubic-bezier(0.22,1,0.36,1);}
.readmore-clip::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2.4em;background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,0.92) 80%,rgba(10,10,10,1) 100%);pointer-events:none;transition:opacity 0.3s;}
.readmore.expanded .readmore-clip{max-height:none;}
.readmore.expanded .readmore-clip::after{opacity:0;}
.readmore-btn{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:none;border:none;color:var(--gold);font-size:13px;font-weight:600;cursor:pointer;padding:0;font-family:var(--font-sans);letter-spacing:2.5px;text-transform:uppercase;transition:color 0.25s;outline:none;-webkit-appearance:none;appearance:none;}
.readmore-btn::after{content:'';display:inline-block;width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4A35A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:transform 0.3s cubic-bezier(0.22,1,0.36,1);}
.readmore-btn:hover{color:var(--gold-light);}
.readmore.expanded .readmore-btn::after{transform:rotate(180deg);}
.readmore-btn:focus-visible{outline:1px dashed var(--gold);outline-offset:4px;border-radius:2px;}

/* ================================================================
   INFO ACCORDION — collapsible feature/policy lists
   ================================================================ */
.info-accordion{background:rgba(196,163,90,0.04);border:1px solid rgba(196,163,90,0.18);border-left:3px solid var(--gold);border-radius:10px;margin-bottom:12px;overflow:hidden;transition:border-color 0.3s;}
.info-accordion[open]{border-color:rgba(196,163,90,0.4);}
.info-accordion summary{list-style:none;cursor:pointer;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-sans);font-size:14px;font-weight:600;letter-spacing:0.8px;color:var(--text);text-transform:none;}
.info-accordion summary::-webkit-details-marker{display:none;}
.info-accordion summary::after{content:'+';font-size:20px;color:var(--gold);font-weight:300;line-height:1;transition:transform 0.3s;}
.info-accordion[open] summary::after{transform:rotate(45deg);}
.info-accordion summary:hover{color:var(--gold);}
.accordion-body{padding:0 20px 18px;font-size:14px;color:var(--text-secondary);line-height:1.75;}
.accordion-body p{margin:0 0 10px;}
.accordion-body p:last-child{margin-bottom:0;}
.accordion-body ul{padding-left:18px;margin:0;}
.accordion-body li{margin-bottom:6px;}

/* ================================================================
   QUICK RESERVE WIDGET — homepage inline reservation bar
   Glass morphism gold accent. Submits to phone for now.
   ================================================================ */
.quick-reserve{background:rgba(196,163,90,0.08);border:1px solid rgba(196,163,90,0.25);border-radius:14px;padding:18px 22px;margin:32px auto;max-width:760px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 32px rgba(0,0,0,0.4);}
.quick-reserve label{font-size:11px;color:var(--gold);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;display:block;margin-bottom:6px;}
.quick-reserve-field{display:flex;flex-direction:column;flex:1;min-width:140px;}
.quick-reserve input,.quick-reserve select{background:rgba(0,0,0,0.55);color:#fff;border:1px solid rgba(196,163,90,0.25);border-radius:8px;padding:11px 12px;font-family:var(--font-sans);font-size:14px;font-weight:500;outline:none;transition:border-color 0.2s;color-scheme:dark;width:100%;}
.quick-reserve input:focus,.quick-reserve select:focus{border-color:var(--gold);}
.quick-reserve input::-webkit-calendar-picker-indicator{filter:invert(0.7) sepia(1) saturate(3) hue-rotate(10deg);cursor:pointer;}
.quick-reserve-btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#C4A35A,#D4B86A);color:#0a0a0a !important;padding:13px 26px;border-radius:999px;font-weight:700;letter-spacing:1.5px;font-size:13px;text-transform:uppercase;text-decoration:none;transition:all 0.3s;box-shadow:0 4px 16px rgba(196,163,90,0.35);white-space:nowrap;align-self:flex-end;}
.quick-reserve-btn:hover{box-shadow:0 6px 24px rgba(196,163,90,0.5);transform:translateY(-2px);}
@media(max-width:680px){
  .quick-reserve{flex-direction:column;align-items:stretch;padding:16px 18px;}
  .quick-reserve-field{min-width:0;}
  .quick-reserve-btn{width:100%;}
}

/* ================================================================
   QUICK BOOKING 3-CARD SECTION — karaoke page "Pick Your Party Size"
   ================================================================ */
.quick-booking{padding:60px 20px;background:rgba(196,163,90,0.04);}
.quick-booking .container{max-width:1100px;margin:0 auto;}
.quick-booking h2{text-align:center;font-family:var(--font-display);font-size:32px;margin-bottom:12px;color:#fff;font-weight:300;letter-spacing:0.1em;}
.quick-booking .qb-sub{text-align:center;color:rgba(255,255,255,0.6);margin-bottom:40px;font-size:15px;}
.quick-booking-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.quick-card{display:flex;flex-direction:column;justify-content:space-between;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:28px 24px;color:#fff;text-decoration:none;transition:all 0.35s cubic-bezier(0.22,1,0.36,1);position:relative;overflow:hidden;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-height:200px;}
.quick-card::before{content:'';position:absolute;inset:0;border:1px solid transparent;border-radius:inherit;background:linear-gradient(135deg,#C4A35A 0%,transparent 50%,#D4B86A 100%) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity 0.4s;pointer-events:none;}
.quick-card:hover{transform:translateY(-6px);background:rgba(196,163,90,0.06);box-shadow:0 16px 40px rgba(0,0,0,0.4);}
.quick-card:hover::before{opacity:1;}
.quick-card h3{font-family:var(--font-display);font-size:22px;color:#fff;margin-bottom:8px;font-weight:300;letter-spacing:0.06em;}
.quick-card p{color:rgba(255,255,255,0.7);font-size:14px;margin-bottom:18px;}
.quick-card .price{font-size:22px;font-weight:400;color:var(--gold);margin-bottom:14px;letter-spacing:0.05em;font-family:var(--font-display);}
.quick-card .qb-cta{font-size:12px;font-weight:600;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px;}
@media(max-width:900px){
  .quick-booking-grid{grid-template-columns:1fr;}
  .quick-booking h2{font-size:28px;}
}

/* ================================================================
   MOBILE QUICK ACTION SHEET — bottom slide-up modal
   Triggered by the mobile floating CTA Restaurant or Karaoke buttons.
   ================================================================ */
.quick-action-sheet{display:none;position:fixed;left:0;right:0;bottom:0;z-index:200;background:rgba(8,8,8,0.98);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(196,163,90,0.25);border-radius:18px 18px 0 0;padding:24px 20px 32px;transform:translateY(100%);transition:transform 0.32s cubic-bezier(0.22,1,0.36,1);box-shadow:0 -12px 40px rgba(0,0,0,0.6);}
.quick-action-sheet.open{display:block;transform:translateY(0);}
.quick-action-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:199;opacity:0;transition:opacity 0.28s ease;}
.quick-action-backdrop.open{display:block;opacity:1;}
.qas-handle{width:40px;height:4px;background:rgba(255,255,255,0.25);border-radius:2px;margin:0 auto 16px;}
.qas-title{font-family:var(--font-display);font-size:16px;color:#fff;text-align:center;margin-bottom:18px;font-weight:400;letter-spacing:0.06em;}
.qas-options{display:flex;flex-direction:column;gap:10px;}
.qas-option{display:flex;align-items:center;gap:14px;padding:14px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:12px;color:#fff;text-decoration:none;font-size:15px;font-weight:500;transition:all 0.25s;}
.qas-option:hover,.qas-option:active{background:rgba(196,163,90,0.1);border-color:rgba(196,163,90,0.4);}
.qas-option .qas-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(196,163,90,0.15);color:var(--gold);}
.qas-option .qas-label{flex:1;}
.qas-option .qas-meta{font-size:12px;color:rgba(255,255,255,0.5);}
.qas-close{display:block;width:100%;margin-top:14px;background:transparent;color:rgba(255,255,255,0.5);border:none;padding:10px;font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;cursor:pointer;font-family:var(--font-sans);}
@media (prefers-reduced-motion: reduce){
  .quick-action-sheet{transition:none !important;}
  .quick-action-backdrop{transition:none !important;}
}

/* ================================================================
   CITY PAGE — DEEP UX UTILITIES (visual breathing, image breaks)
   Pattern set: section-grid (text+image), usecase chip cards,
   distance stat row, divider-thin, h2 underline accent.
   ================================================================ */
.city-section-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;margin:48px 0 24px;}
.city-section-grid .city-text{min-width:0;}
.city-section-grid .city-text p{margin-bottom:14px;}
.city-image{position:relative;}
.city-image img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid rgba(196,163,90,0.2);display:block;box-shadow:0 12px 36px rgba(0,0,0,0.45);}
.city-image::after{content:'';position:absolute;inset:0;border-radius:12px;background:linear-gradient(135deg,rgba(196,163,90,0.06),transparent 60%);pointer-events:none;}
@media(max-width:880px){
  .city-section-grid{grid-template-columns:1fr;gap:24px;margin:32px 0 16px;}
  .city-image{order:-1;}
  .city-image img{aspect-ratio:16/10;}
}

.usecase-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:24px 0 8px;}
.usecase-card{padding:24px 20px;background:rgba(255,255,255,0.03);border:1px solid rgba(196,163,90,0.18);border-radius:12px;transition:all 0.3s cubic-bezier(0.22,1,0.36,1);text-align:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}
.usecase-card:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(196,163,90,0.06);box-shadow:0 10px 28px rgba(0,0,0,0.35);}
.usecase-card .usecase-icon{width:28px;height:28px;stroke:var(--gold);margin:0 auto 12px;display:block;}
.usecase-card h3{font-family:var(--font-display);font-size:15px;font-weight:400;color:#fff;margin:0 0 6px;letter-spacing:0.05em;}
.usecase-card .usecase-context{font-size:12px;color:rgba(255,255,255,0.6);line-height:1.5;margin:0;}
@media(max-width:980px){.usecase-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.usecase-grid{grid-template-columns:1fr;}}

.distance-stats{display:flex;gap:14px;flex-wrap:wrap;margin:24px 0 8px;}
.distance-card{flex:1;min-width:120px;padding:18px 14px;background:rgba(196,163,90,0.05);border:1px solid rgba(196,163,90,0.15);border-radius:10px;text-align:center;transition:border-color 0.3s,background 0.3s,transform 0.3s;position:relative;overflow:hidden;}
.distance-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(196,163,90,0.14),transparent 60%);opacity:0;transition:opacity 0.4s;pointer-events:none;}
.distance-card:hover{border-color:rgba(196,163,90,0.4);background:rgba(196,163,90,0.08);transform:translateY(-2px);}
.distance-card:hover::before{opacity:1;}
.distance-card .distance-icon{width:18px;height:18px;color:rgba(196,163,90,0.65);display:block;margin:0 auto 10px;}
.distance-num{display:block;font-family:var(--font-display);font-size:34px;font-weight:300;color:var(--gold);line-height:1;letter-spacing:0.04em;}
.distance-unit{display:block;font-size:11px;color:rgba(255,255,255,0.6);letter-spacing:1.5px;text-transform:uppercase;margin-top:2px;}
.distance-label{display:block;font-size:12px;color:rgba(255,255,255,0.75);letter-spacing:1.2px;margin-top:8px;font-weight:500;}

/* ================================================================
   GETTING HERE — glass panel with badge, distance grid, quick facts, Google Maps CTA
   ================================================================ */
.gh-wrap{max-width:1100px;margin:0 auto;padding:0 30px;}
.gh-panel{background:linear-gradient(180deg,rgba(196,163,90,0.05),rgba(196,163,90,0.02));border:1px solid rgba(196,163,90,0.2);border-radius:18px;padding:44px 44px 36px;position:relative;overflow:hidden;backdrop-filter:blur(10px);}
.gh-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,163,90,0.6),transparent);}
.gh-panel::after{content:'';position:absolute;top:-40%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,rgba(196,163,90,0.08) 0%,transparent 70%);pointer-events:none;}
.gh-header{display:flex;align-items:flex-start;gap:22px;margin-bottom:28px;position:relative;z-index:1;}
.gh-badge{flex-shrink:0;width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,rgba(196,163,90,0.18),rgba(196,163,90,0.06));border:1px solid rgba(196,163,90,0.3);display:flex;align-items:center;justify-content:center;color:var(--gold);box-shadow:0 4px 20px rgba(196,163,90,0.12);}
.gh-badge svg{width:28px;height:28px;}
.gh-header-text{flex:1;}
.gh-h2{margin-top:0!important;margin-bottom:12px!important;font-size:28px!important;}
.gh-lede{font-size:15px;color:rgba(255,255,255,0.7);line-height:1.7;margin:0;max-width:620px;}
.gh-distance{margin:0 0 24px;gap:12px;position:relative;z-index:1;}
.gh-distance .distance-card{padding:22px 14px 18px;}
.gh-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 28px;padding-top:24px;border-top:1px solid rgba(196,163,90,0.12);position:relative;z-index:1;}
.gh-fact{display:flex;align-items:center;gap:12px;padding:12px 14px;background:rgba(0,0,0,0.2);border-radius:10px;border:1px solid rgba(255,255,255,0.04);}
.gh-fact svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;}
.gh-fact strong{display:block;font-size:13px;color:#fff;font-weight:600;letter-spacing:0.2px;margin-bottom:2px;}
.gh-fact span{display:block;font-size:12px;color:rgba(255,255,255,0.55);line-height:1.3;}
.gh-cta{display:inline-flex;align-items:center;gap:12px;padding:14px 24px;background:var(--gold);color:#0a0a0a;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;text-decoration:none;transition:all 0.3s cubic-bezier(0.22,1,0.36,1);box-shadow:0 6px 24px rgba(196,163,90,0.2);position:relative;z-index:1;}
.gh-cta svg{width:16px;height:16px;}
.gh-cta svg:first-child{color:#0a0a0a;}
.gh-cta svg:last-child{transition:transform 0.3s;}
.gh-cta:hover{background:var(--gold-light,#D4B86A);transform:translateY(-2px);box-shadow:0 10px 32px rgba(196,163,90,0.3);}
.gh-cta:hover svg:last-child{transform:translateX(4px);}
@media(max-width:880px){
  .gh-panel{padding:32px 24px 28px;border-radius:14px;}
  .gh-header{flex-direction:column;gap:16px;}
  .gh-badge{width:48px;height:48px;}
  .gh-h2{font-size:24px!important;}
  .gh-facts{grid-template-columns:1fr;}
  .gh-cta{width:100%;justify-content:center;font-size:12px;}
}

/* Inline variant for city pages — smaller, fits in text column */
.gh-cta-inline{margin-top:18px;padding:12px 20px;font-size:12px;gap:10px;box-shadow:0 4px 16px rgba(196,163,90,0.18);}
.gh-cta-inline svg{width:14px;height:14px;}
@media(max-width:880px){.gh-cta-inline{width:100%;justify-content:center;}}

.divider-thin{height:1px;background:linear-gradient(90deg,transparent,rgba(196,163,90,0.4),transparent);margin:64px auto;max-width:600px;border:0;}
@media(max-width:880px){.divider-thin{margin:40px auto;}}

h2.city-h2{position:relative;display:inline-block;padding-bottom:14px;margin-bottom:18px;}
h2.city-h2::after{content:'';position:absolute;bottom:0;left:0;width:40px;height:2px;background:var(--gold);}

/* ================================================================
   HOURS LIVE CARD — today's hours + live open/closed status
   ================================================================ */
.hours-live-card{background:rgba(196,163,90,0.04);border:1px solid rgba(196,163,90,0.18);border-radius:12px;padding:24px 24px 18px;}
.hours-live-card .ic-label{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.7);font-weight:600;margin-bottom:6px;}
.hours-live-card .ic-label span{color:var(--gold);}
.hours-today-time{font-family:var(--font-display);font-size:28px;font-weight:300;color:var(--gold);line-height:1.2;margin:6px 0 14px;letter-spacing:0.04em;}
.hours-status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;background:rgba(52,199,89,0.1);border:1px solid rgba(52,199,89,0.3);border-radius:999px;font-size:12px;font-weight:600;color:#34C759;letter-spacing:0.5px;text-transform:uppercase;}
.hours-status-pill.closed{background:rgba(255,77,0,0.08);border-color:rgba(255,77,0,0.3);color:#FF7A4D;}
.hours-status-pill .status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;animation:livePulse 2s ease-in-out infinite;}
@keyframes livePulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.hours-weekly{margin-top:14px;padding-top:14px;border-top:1px solid rgba(196,163,90,0.15);}
.hours-weekly summary{cursor:pointer;font-size:12px;color:var(--gold);letter-spacing:1.5px;text-transform:uppercase;font-weight:600;list-style:none;padding:0;display:inline-flex;align-items:center;gap:6px;}
.hours-weekly summary::-webkit-details-marker{display:none;}
.hours-weekly summary::after{content:'';width:12px;height:12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C4A35A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;transition:transform 0.3s;}
.hours-weekly[open] summary::after{transform:rotate(180deg);}
.hours-weekly ul{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:rgba(255,255,255,0.75);}
.hours-weekly ul li{display:flex;justify-content:space-between;}
.hours-weekly ul li span:first-child{color:rgba(255,255,255,0.55);}

/* =================================================================
   Accessibility: Underline inline gold links in body copy so links are
   distinguishable without relying on color alone (WCAG 1.4.1).
   Button-like anchors (nav, CTA buttons, footer links) are excluded.
   ================================================================= */
main p a,
.content a:not(.btn):not(.btn-hero):not(.btn-gold):not(.btn-gold-glow):not(.btn-outline):not(.btn-secondary):not(.quick-reserve-btn):not(.nav-link):not(.footer-link){
  text-decoration: underline;
  text-decoration-color: rgba(196, 163, 90, 0.5);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
main p a:hover,
.content a:not(.btn):hover{
  text-decoration-color: var(--gold, #C4A35A);
}