/* ============================================================
   SAVANNAH PIZZERIA — style.css
   Black · Red · White | Franchise Website
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Dancing+Script:wght@400;600;700&family=Montserrat:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap');

/* ── CSS Variables (overridden per restaurant page) ─────── */
:root {
  --red:    #E31E24;
  --red2:   #FF3B41;
  --red3:   #B01018;
  --dark:   #0A0A0A;
  --dark2:  #111111;
  --dark3:  #181818;
  --dark4:  #222222;
  --white:  #FFFFFF;
  --cream:  #F5F0E8;
  --gray:   #888888;
  --lgray:  #CCCCCC;

  /* Restaurant accent — overridden per page */
  --acc:    #E31E24;
  --acc2:   #FF3B41;
  --acc3:   #B01018;
  --acc-rgb: 227,30,36;

  --fscript: 'Great Vibes', cursive;
  --fdeco:   'Dancing Script', cursive;
  --fmain:   'Montserrat', sans-serif;
  --fserif:  'Playfair Display', serif;

  --nav: 70px;
  --gr: linear-gradient(135deg, var(--red) 0%, var(--red3) 100%);
  --grh: linear-gradient(90deg, var(--red2), var(--red), var(--red3));
  --ease: cubic-bezier(.25,.46,.45,.94);
  --eout: cubic-bezier(.16,1,.3,1);
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body { background:var(--dark); color:var(--white); font-family:var(--fmain);
  font-size:15px; line-height:1.65; overflow-x:hidden }
a { color:inherit; text-decoration:none }
img { max-width:100%; display:block; object-fit:cover }
ul { list-style:none }
button { font-family:inherit; cursor:pointer; border:none; background:none }
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:var(--dark2) }
::-webkit-scrollbar-thumb { background:var(--red3); border-radius:2px }

/* ═══════════════════════════════════════════════════════
   LOGO ANIMATION INTRO
═══════════════════════════════════════════════════════ */
#intro-overlay {
  position:fixed; inset:0; z-index:9999;
  background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  transition:opacity .8s ease, visibility .8s ease;
}
#intro-overlay.hidden { opacity:0; visibility:hidden; pointer-events:none }
#intro-canvas { position:absolute; inset:0; width:100%; height:100% }
.intro-logo-wrap {
  position:relative; z-index:2;
  opacity:0; transform:scale(.85);
  transition:opacity .6s ease, transform .6s ease;
}
.intro-logo-wrap.visible { opacity:1; transform:scale(1) }
.intro-skip {
  position:absolute; bottom:2rem; right:2rem; z-index:3;
  font-family:var(--fmain); font-size:.65rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(255,255,255,.35);
  padding:8px 16px; border:1px solid rgba(255,255,255,.15);
  cursor:pointer; transition:all .3s;
  background:none;
}
.intro-skip:hover { color:var(--white); border-color:rgba(255,255,255,.4) }

/* ═══════════════════════════════════════════════════════
   LOGO SVG
═══════════════════════════════════════════════════════ */
.savannah-logo {
  display:block;
  filter:drop-shadow(0 0 20px rgba(227,30,36,.4));
}
.savannah-logo.sm { filter:none }

/* ═══════════════════════════════════════════════════════
   NAVIGATION
═══════════════════════════════════════════════════════ */
nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav);
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(227,30,36,.2);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 5%; z-index:1000;
  transition:border-color .4s, box-shadow .4s;
}
nav.scrolled { border-bottom-color:rgba(227,30,36,.45); box-shadow:0 4px 40px rgba(0,0,0,.8) }
.nav-logo { display:flex; align-items:center; flex-shrink:0 }
.nav-logo svg { height:50px; width:auto }

.nav-links { display:flex; align-items:center; gap:2rem }
.nav-links > li > a {
  font-family:var(--fmain); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  font-weight:600; color:var(--lgray); position:relative; padding-bottom:4px; transition:color .3s;
}
.nav-links > li > a::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:1.5px;
  background:var(--grh); transition:width .4s var(--ease);
}
.nav-links > li > a:hover, .nav-links > li > a.active { color:var(--red2) }
.nav-links > li > a:hover::after, .nav-links > li > a.active::after { width:100% }

/* Dropdown */
.nav-dd { position:relative }
.nav-dd > a { display:flex; align-items:center; gap:5px }
.nav-dd > a::after { display:none }
.caret { font-size:.45rem; transition:transform .3s; opacity:.6 }
.nav-dd:hover .caret { transform:rotate(180deg) }
.dd-menu {
  position:absolute; top:calc(100% + 12px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  background:rgba(10,10,10,.98); border:1px solid rgba(227,30,36,.2);
  min-width:220px; padding:6px 0;
  opacity:0; visibility:hidden;
  transition:opacity .28s, transform .28s var(--ease), visibility .28s;
  backdrop-filter:blur(20px); z-index:100;
}
.nav-dd:hover .dd-menu { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0) }
.dd-menu a {
  display:block; padding:9px 20px;
  font-family:var(--fmain); font-size:.8rem; font-weight:500; color:var(--lgray);
  border-left:2px solid transparent;
  transition:color .22s, border-color .22s, background .22s, padding-left .22s;
}
.dd-menu a:hover { color:var(--red2); border-left-color:var(--red3); background:rgba(227,30,36,.06); padding-left:26px }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; z-index:1002; -webkit-tap-highlight-color:transparent }
.hamburger span { display:block; width:24px; height:1.5px; background:var(--red); transition:transform .35s var(--ease), opacity .3s }
.hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg) }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0) }
.hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg) }

/* Mobile nav */
.mob-nav {
  position:fixed; inset:0; top:var(--nav);
  background:rgba(0,0,0,.99);
  display:flex; flex-direction:column; align-items:center;
  padding:2rem 2rem 4rem; overflow-y:auto;
  opacity:0; pointer-events:none; transition:opacity .35s; z-index:999;
}
.mob-nav.open { opacity:1; pointer-events:all }
.mob-nav a {
  display:block; width:100%; max-width:320px; text-align:center; padding:14px 0;
  font-family:var(--fmain); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--lgray); border-bottom:1px solid rgba(227,30,36,.1);
  transition:color .25s; -webkit-tap-highlight-color:transparent;
}
.mob-nav a:hover { color:var(--red2) }
.mob-sec-label {
  font-family:var(--fmain); font-size:.6rem; letter-spacing:.3em;
  color:rgba(227,30,36,.4); text-transform:uppercase; font-weight:600;
  text-align:center; padding:16px 0 4px; width:100%;
}

/* ═══════════════════════════════════════════════════════
   HOME HERO
═══════════════════════════════════════════════════════ */
.home-hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav)+2rem) 2rem 4rem; overflow:hidden;
}
.home-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(227,30,36,.12) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 20% 80%, rgba(227,30,36,.06) 0%, transparent 100%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(227,30,36,.06) 0%, transparent 100%);
}
canvas#particles { position:absolute; inset:0; pointer-events:none }
.home-hero-logo { opacity:0; animation:fadeScale 1s var(--eout) .2s forwards; position:relative; z-index:2; margin-bottom:1.5rem }
.home-tagline {
  font-family:var(--fdeco); font-size:clamp(1rem,3vw,1.6rem);
  color:var(--red2); position:relative; z-index:2;
  opacity:0; animation:fadeUp .9s var(--eout) .8s forwards;
}
.home-sub {
  font-family:var(--fmain); font-size:.8rem; letter-spacing:.25em; text-transform:uppercase;
  color:rgba(255,255,255,.45); margin-top:.8rem; position:relative; z-index:2;
  opacity:0; animation:fadeUp .9s var(--eout) 1s forwards;
}
.hero-orn {
  display:flex; align-items:center; gap:1rem; margin:1.6rem auto; width:min(220px,60vw);
  opacity:0; animation:fadeUp .9s var(--eout) 1.1s forwards; position:relative; z-index:2;
}
.hero-orn::before, .hero-orn::after { content:''; flex:1; height:1px; background:var(--grh); opacity:.5 }
.hero-dot { width:5px; height:5px; background:var(--red); border-radius:50%; flex-shrink:0 }
.scroll-hint {
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:0; animation:fadeIn 1s ease 2s forwards;
}
.scroll-hint p { font-family:var(--fmain); font-size:.5rem; letter-spacing:.4em; color:rgba(227,30,36,.45); text-transform:uppercase; font-weight:600 }
.scroll-line { width:1px; height:32px; background:var(--grh); animation:scrollPulse 2s ease infinite }

/* ═══════════════════════════════════════════════════════
   RESTAURANT CARDS GRID (homepage)
═══════════════════════════════════════════════════════ */
.restaurants-section { padding:6rem 4%; background:var(--dark) }
.sec-header { text-align:center; margin-bottom:3.5rem }
.sec-eyebrow {
  font-family:var(--fmain); font-size:.65rem; letter-spacing:.42em; text-transform:uppercase;
  font-weight:700; color:var(--red); margin-bottom:.8rem;
}
.sec-title {
  font-family:var(--fdeco); font-size:clamp(1.8rem,4vw,3rem); color:var(--white);
  margin-bottom:1.2rem; line-height:1.1;
}
.sec-line { width:48px; height:2px; background:var(--gr); margin:0 auto }

.resto-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(290px,1fr));
  gap:2px; background:rgba(227,30,36,.08); border:1px solid rgba(227,30,36,.1);
}
.resto-card {
  position:relative; background:var(--dark2);
  display:flex; flex-direction:column; overflow:hidden;
  text-decoration:none; min-height:320px;
  transition:background .4s; -webkit-tap-highlight-color:transparent;
}
.resto-card:hover, .resto-card:active { background:var(--dark3) }
.resto-card::after {
  content:''; position:absolute; bottom:0; left:0; width:0; height:2px;
  background:var(--grh); transition:width .5s var(--ease);
}
.resto-card:hover::after, .resto-card:active::after { width:100% }

/* Media area */
.rc-media {
  width:100%; height:200px; background:var(--dark3); position:relative; overflow:hidden; flex-shrink:0;
}
.rc-media img, .rc-media video {
  width:100%; height:100%; object-fit:cover; object-position:center;
  transition:transform .6s var(--ease);
}
.rc-media video { pointer-events:none }
.resto-card:hover .rc-media img, .resto-card:hover .rc-media video { transform:scale(1.05) }
.rc-media-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--dark3), var(--dark4));
}
.rc-media-placeholder svg { width:60px; height:60px; opacity:.12 }

/* Card badge */
.rc-badge {
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--fmain); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--white);
  background:var(--red); padding:4px 10px;
}

/* Card body */
.rc-body { padding:1.4rem 1.6rem 1.8rem; flex:1; display:flex; flex-direction:column; gap:.5rem }
.rc-city { font-family:var(--fmain); font-size:.58rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--red) }
.rc-name { font-family:var(--fdeco); font-size:1.4rem; color:var(--white); line-height:1.1; transition:color .3s }
.resto-card:hover .rc-name { color:var(--red2) }
.rc-phone { font-family:var(--fmain); font-size:.78rem; color:var(--gray); margin-top:.2rem }
.rc-addr { font-family:var(--fmain); font-size:.75rem; color:rgba(204,204,204,.5); font-style:italic; line-height:1.4 }
.rc-cta {
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--fmain); font-size:.65rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--red);
  padding-top:.8rem; border-top:1px solid rgba(227,30,36,.12);
  transition:gap .3s, color .3s;
}
.resto-card:hover .rc-cta { gap:14px; color:var(--red2) }

/* ═══════════════════════════════════════════════════════
   RESTAURANT PAGE — HERO
═══════════════════════════════════════════════════════ */
.resto-hero {
  position:relative; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:calc(var(--nav)+2rem) 2rem 4rem; overflow:hidden;
}
.resto-hero-bg {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--acc-rgb),.14) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(var(--acc-rgb),.07) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(var(--acc-rgb),.07) 0%, transparent 100%);
}
/* Video/image hero media */
.hero-media-bg {
  position:absolute; inset:0; z-index:0;
}
.hero-media-bg video, .hero-media-bg img {
  width:100%; height:100%; object-fit:cover; opacity:.18;
  filter:grayscale(.4);
}
.hero-media-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,.6) 0%, rgba(10,10,10,.85) 100%);
}
canvas#rparticles { position:absolute; inset:0; pointer-events:none; z-index:1 }
.rh-content { position:relative; z-index:2 }
.rh-badge {
  display:inline-block; font-family:var(--fmain); font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; font-weight:700; color:var(--white);
  background:var(--acc); padding:5px 16px; margin-bottom:1.4rem;
}
.rh-num {
  font-family:var(--fmain); font-size:.65rem; letter-spacing:.3em; color:rgba(255,255,255,.3);
  text-transform:uppercase; font-weight:700; margin-bottom:.5rem;
}
.rh-name {
  font-family:var(--fscript); font-size:clamp(3rem,9vw,7rem);
  color:var(--white); line-height:1; margin-bottom:.4rem;
  text-shadow:0 0 40px rgba(var(--acc-rgb),.35);
}
.rh-city {
  font-family:var(--fmain); font-size:clamp(.8rem,2vw,1rem);
  letter-spacing:.22em; text-transform:uppercase; font-weight:700;
  color:var(--acc); margin-bottom:2rem;
}
.rh-orn { display:flex; align-items:center; gap:1rem; margin:0 auto 2rem; width:min(200px,55vw) }
.rh-orn::before, .rh-orn::after { content:''; flex:1; height:1px; background:var(--grh); opacity:.5 }
.rh-gem { width:5px; height:5px; background:var(--acc); border-radius:50%; flex-shrink:0 }
.rh-btns { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap }
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:13px 32px; background:var(--acc);
  font-family:var(--fmain); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--white);
  transition:background .3s, transform .2s; min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.btn-primary:hover, .btn-primary:active { background:var(--acc2); transform:translateY(-1px) }
.btn-outline {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 32px; border:2px solid var(--acc);
  font-family:var(--fmain); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--acc);
  transition:all .3s; min-height:48px; -webkit-tap-highlight-color:transparent;
}
.btn-outline:hover, .btn-outline:active { background:var(--acc); color:var(--white) }

/* ═══════════════════════════════════════════════════════
   RESTAURANT PAGE — INFO SECTIONS
═══════════════════════════════════════════════════════ */

/* About section */
.about-section {
  padding:5rem 7%; background:var(--dark2); position:relative;
}
.about-section::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--acc), transparent);
}
.about-inner { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start }
.about-label { font-family:var(--fmain); font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; font-weight:700; color:var(--acc); margin-bottom:1rem }
.about-title { font-family:var(--fdeco); font-size:clamp(1.6rem,3.5vw,2.8rem); color:var(--white); line-height:1.15; margin-bottom:1.4rem }
.about-text { font-family:var(--fserif); font-size:1.05rem; color:var(--lgray); line-height:2; direction:rtl; text-align:right }
.about-text.ltr { direction:ltr; text-align:left; font-family:var(--fmain); font-size:.9rem }

/* Info cards */
.info-cards { display:flex; flex-direction:column; gap:1px; background:rgba(227,30,36,.08) }
.info-card {
  background:var(--dark3); padding:1.4rem 1.6rem;
  display:flex; align-items:flex-start; gap:1.2rem;
  border-left:2px solid transparent; transition:border-color .3s, background .3s;
}
.info-card:hover { border-left-color:var(--acc); background:var(--dark4) }
.info-icon {
  width:36px; height:36px; flex-shrink:0;
  border:1px solid rgba(227,30,36,.3);
  display:flex; align-items:center; justify-content:center;
  color:var(--acc); font-size:.9rem;
}
.info-content { flex:1 }
.info-label { font-family:var(--fmain); font-size:.56rem; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--acc); margin-bottom:.3rem }
.info-value { font-family:var(--fmain); font-size:.9rem; color:var(--white); line-height:1.5 }
.info-value a { color:var(--white); transition:color .3s }
.info-value a:hover { color:var(--acc2) }

/* Media gallery */
.gallery-section { padding:4rem 5%; background:var(--dark) }
.gallery-label { font-family:var(--fmain); font-size:.6rem; letter-spacing:.35em; text-transform:uppercase; font-weight:700; color:var(--acc); text-align:center; margin-bottom:2rem }
/* ── MEDIA SLOT — leave URL here ── */
.media-slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:3px; background:rgba(227,30,36,.06) }
.media-slot { position:relative; overflow:hidden; background:var(--dark3); aspect-ratio:16/9 }
.media-slot img, .media-slot video { width:100%; height:100%; object-fit:cover }
.media-slot video { pointer-events:none; cursor:pointer }
.media-slot.play-video video { pointer-events:all }
.media-slot-empty {
  width:100%; height:100%; min-height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem;
  background:var(--dark3);
}
.media-slot-empty .slot-icon { font-size:1.8rem; color:rgba(227,30,36,.2) }
.media-slot-empty p { font-family:var(--fmain); font-size:.6rem; letter-spacing:.2em; color:rgba(204,204,204,.25); text-transform:uppercase }

/* Socials */
.socials-section { padding:4rem 7%; background:var(--dark2) }
.socials-grid { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-top:2rem }
.soc-btn {
  display:flex; align-items:center; gap:10px; padding:12px 22px;
  border:1.5px solid rgba(227,30,36,.3);
  font-family:var(--fmain); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--lgray); text-decoration:none; min-height:48px;
  transition:all .3s; -webkit-tap-highlight-color:transparent;
}
.soc-btn:hover, .soc-btn:active { background:var(--acc); border-color:var(--acc); color:var(--white) }
.soc-btn i { font-size:1.1rem }

/* Map */
.map-section { padding:4rem 5%; background:var(--dark) }
.map-wrap { width:100%; max-width:900px; height:380px; margin:0 auto; border:2px solid rgba(227,30,36,.25); position:relative; overflow:hidden }
.map-wrap::before { content:''; position:absolute; inset:8px; border:1px solid rgba(227,30,36,.08); z-index:2; pointer-events:none }
.map-wrap iframe { width:100%; height:100%; border:0; filter:grayscale(1) invert(1) contrast(.9) brightness(.8) }

/* Menu preview on restaurant page */
.menu-preview { padding:5rem 5%; background:var(--dark3) }
.menu-sections-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:2px; background:rgba(227,30,36,.08); border:1px solid rgba(227,30,36,.1) }
.ms-card {
  background:var(--dark2); padding:2.2rem 2rem;
  display:flex; flex-direction:column; gap:.6rem;
  text-decoration:none; position:relative; overflow:hidden;
  transition:background .3s; -webkit-tap-highlight-color:transparent;
}
.ms-card::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--grh); transition:width .5s var(--ease) }
.ms-card:hover, .ms-card:active { background:var(--dark4) }
.ms-card:hover::after, .ms-card:active::after { width:100% }
.ms-icon { width:30px; height:30px; border:1px solid rgba(227,30,36,.25); display:flex; align-items:center; justify-content:center; color:var(--acc); font-size:.85rem; margin-bottom:.3rem }
.ms-name { font-family:var(--fmain); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--red2) }
.ms-desc { font-family:var(--fmain); font-size:.78rem; color:var(--gray); line-height:1.5 }
.ms-count { font-family:var(--fmain); font-size:.56rem; letter-spacing:.18em; color:rgba(227,30,36,.28); text-transform:uppercase; margin-top:auto }

/* ═══════════════════════════════════════════════════════
   MENU SECTION PAGES
═══════════════════════════════════════════════════════ */
.menu-hero {
  padding-top:var(--nav); min-height:22vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:var(--dark2); position:relative; overflow:hidden;
  padding-bottom:2.5rem; padding-left:1.5rem; padding-right:1.5rem;
}
.menu-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 60% at 50% 100%, rgba(227,30,36,.08) 0%, transparent 100%); pointer-events:none }
.menu-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--red),transparent); opacity:.4 }
.mh-label { font-family:var(--fmain); font-size:.62rem; letter-spacing:.4em; color:var(--red3); text-transform:uppercase; font-weight:700; margin-bottom:.8rem }
.mh-title { font-family:var(--fdeco); font-size:clamp(1.5rem,5vw,3.2rem); color:var(--white); letter-spacing:.04em; margin-bottom:1.4rem }
.mh-orn { display:flex; align-items:center; gap:1rem; margin:0 auto }
.mh-orn::before, .mh-orn::after { content:''; width:40px; height:1px; background:var(--grh); opacity:.45 }
.mh-gem { width:6px; height:6px; border:1.5px solid var(--red3); transform:rotate(45deg) }
.back-link {
  display:inline-flex; align-items:center; gap:8px; margin-top:1.6rem;
  font-family:var(--fmain); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
  color:var(--red3); padding:10px 20px; border:1px solid rgba(227,30,36,.25);
  transition:all .3s; position:relative; z-index:2; min-height:44px; -webkit-tap-highlight-color:transparent;
}
.back-link:hover, .back-link:active { background:rgba(227,30,36,.07); border-color:var(--red) }

/* Price selector */
.price-bar {
  background:var(--dark3); border-bottom:1px solid rgba(227,30,36,.12);
  display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:wrap;
  padding:0 2%; position:sticky; top:var(--nav); z-index:50;
}
.price-bar-label { font-family:var(--fmain); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:rgba(227,30,36,.5); padding:0 1.2rem 0 .5rem; font-style:italic }
.p-tab {
  font-family:var(--fmain); font-size:.65rem; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
  color:var(--gray); padding:14px 22px; border-bottom:2px solid transparent;
  cursor:pointer; transition:color .3s, border-color .3s; background:none; min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.p-tab.active, .p-tab:hover { color:var(--red2); border-bottom-color:var(--red) }

/* Dish cards */
.dishes-wrap { padding:2rem 3%; background:var(--dark) }
.dishes-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:2px; background:rgba(227,30,36,.06) }
.dish-card { background:var(--dark2); display:flex; flex-direction:column; overflow:hidden; position:relative; transition:background .4s }
.dish-card:hover, .dish-card:focus-within { background:var(--dark3) }
.dish-card::before { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--grh); transition:width .5s var(--ease); z-index:2 }
.dish-card:hover::before, .dish-card:focus-within::before { width:100% }

/* 3D viewer area */
.dish-3d { width:100%; height:230px; background:var(--dark3); position:relative; overflow:hidden; flex-shrink:0 }
.btn-layer {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem; z-index:3;
  background:linear-gradient(135deg,rgba(10,8,5,.97) 0%, rgba(6,4,2,.93) 100%);
}
.btn-layer::before {
  content:''; position:absolute; width:100px; height:100px;
  border:1px solid rgba(227,30,36,.12); transform:rotate(45deg);
  animation:rotateSlow 14s linear infinite;
}
.btn-layer::after {
  content:''; position:absolute; width:65px; height:65px;
  border:1px solid rgba(227,30,36,.08); transform:rotate(45deg);
  animation:rotateSlow 9s linear infinite reverse;
}
@keyframes rotateSlow { to { transform:rotate(calc(45deg + 360deg)) } }
.cube-icon { position:relative; z-index:1; width:34px; height:34px; opacity:.2; flex-shrink:0 }
.cube-icon svg { width:100%; height:100% }
.voir-btn {
  position:relative; z-index:2;
  display:inline-flex; align-items:center; gap:9px; padding:11px 24px;
  border:1.5px solid rgba(227,30,36,.5);
  font-family:var(--fmain); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--red2); background:rgba(0,0,0,.5);
  transition:all .35s; min-height:44px; -webkit-tap-highlight-color:transparent; cursor:pointer; overflow:hidden;
}
.voir-btn::before { content:''; position:absolute; inset:0; background:var(--gr); transform:translateX(-101%); transition:transform .4s var(--ease) }
.voir-btn:hover::before, .voir-btn:active::before { transform:translateX(0) }
.voir-btn:hover, .voir-btn:active { color:var(--white); border-color:transparent }
.voir-btn .vb-t, .voir-btn .vb-i { position:relative; z-index:1 }

.dish-3d model-viewer {
  position:absolute; inset:0; width:100%; height:100%;
  background:transparent; --poster-color:transparent;
  --progress-bar-color:var(--red3); --progress-bar-height:2px;
  opacity:0; transition:opacity .6s ease; z-index:2;
}
.dish-3d.loaded model-viewer { opacity:1 }
.dish-3d.loaded .btn-layer { display:none }

/* Dish info */
.dish-info { padding:1.2rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column; gap:.4rem; border-top:1px solid rgba(227,30,36,.07) }
.dish-name { font-family:var(--fmain); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--white); line-height:1.5; transition:color .3s }
.dish-card:hover .dish-name, .dish-card:focus-within .dish-name { color:var(--red2) }
.dish-desc { font-family:var(--fmain); font-size:.76rem; color:var(--gray); line-height:1.5 }

/* Price display — 3 sizes */
.dish-prices { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem }
.price-tag {
  display:flex; flex-direction:column; align-items:center;
  padding:5px 10px; border:1px solid rgba(227,30,36,.18);
  min-width:60px;
}
.price-size { font-family:var(--fmain); font-size:.5rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:rgba(227,30,36,.6) }
.price-val { font-family:var(--fmain); font-size:.8rem; font-weight:800; color:var(--red2) }
/* Single price (burgers etc) */
.price-single { font-family:var(--fmain); font-size:.85rem; font-weight:800; color:var(--red2); margin-top:.5rem }

/* Section subheader */
.subsec-hdr { padding:2.2rem 3% .5rem; background:var(--dark) }
.subsec-hdr h2 {
  font-family:var(--fmain); font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; font-weight:700;
  color:var(--red2); display:flex; align-items:center; gap:1rem;
}
.subsec-hdr h2::after { content:''; flex:1; height:1px; background:rgba(227,30,36,.12) }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
footer {
  background:var(--dark2); border-top:2px solid rgba(227,30,36,.15);
  padding:4rem 7% 2rem; position:relative;
}
footer::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--red), transparent); opacity:.4;
}
.ft-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:3rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(227,30,36,.08); margin-bottom:1.8rem }
.ft-logo { margin-bottom:1rem }
.ft-logo svg { height:55px; width:auto }
.ft-tagline { font-family:var(--fdeco); font-size:1rem; color:var(--red2); margin-bottom:.5rem }
.ft-sub { font-family:var(--fmain); font-size:.75rem; color:var(--gray); margin-bottom:1.2rem }
.ft-soc { display:flex; gap:.6rem; flex-wrap:wrap }
.ft-soc a {
  width:34px; height:34px; border:1.5px solid rgba(227,30,36,.28);
  display:flex; align-items:center; justify-content:center;
  color:var(--red3); font-size:.85rem; transition:all .3s; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.ft-soc a:hover, .ft-soc a:active { background:var(--red); color:var(--white); border-color:var(--red) }
.ft-hd { font-family:var(--fmain); font-size:.58rem; letter-spacing:.32em; text-transform:uppercase; font-weight:700; color:var(--red3); margin-bottom:1.2rem }
.ft-links { display:flex; flex-direction:column; gap:.6rem }
.ft-links a { font-family:var(--fmain); font-size:.82rem; color:var(--gray); transition:color .3s }
.ft-links a:hover { color:var(--red2) }
.ft-contact p { font-family:var(--fmain); font-size:.82rem; color:var(--gray); margin-bottom:4px }
.ft-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem }
.ft-copy { font-family:var(--fmain); font-size:.72rem; color:rgba(136,136,136,.4) }
.ft-copy span { color:var(--red3) }

/* ═══════════════════════════════════════════════════════
   WHITE LINE DIVIDER
═══════════════════════════════════════════════════════ */
.red-line { height:2px; background:linear-gradient(90deg,transparent,rgba(227,30,36,.4),transparent) }
.dark-line { height:1px; background:rgba(255,255,255,.04) }

/* ═══════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════ */
@keyframes fadeScale { from{opacity:0;transform:scale(.9)} to{opacity:1;transform:scale(1)} }
@keyframes fadeUp { from{opacity:0;transform:translateY(26px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scrollPulse { 0%{transform:scaleY(0);transform-origin:top}48%{transform:scaleY(1);transform-origin:top}52%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom} }
@keyframes float { 0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)} }
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s var(--eout), transform .7s var(--eout) }
.reveal.in { opacity:1; transform:translateY(0) }

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .about-inner { grid-template-columns:1fr; gap:2.5rem }
  .ft-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:900px) {
  .ft-grid { grid-template-columns:1fr; gap:2rem }
}
@media(max-width:768px) {
  :root { --nav:62px }
  .nav-links { display:none }
  .hamburger { display:flex }
  .dishes-grid { grid-template-columns:repeat(2,1fr) }
  .resto-grid { grid-template-columns:repeat(2,1fr) }
  .menu-sections-grid { grid-template-columns:repeat(2,1fr) }
}
@media(max-width:540px) {
  :root { --nav:58px }
  .dishes-grid { grid-template-columns:1fr }
  .resto-grid { grid-template-columns:1fr }
  .menu-sections-grid { grid-template-columns:1fr }
  .dish-3d { height:210px }
  .about-section { padding:4rem 5% }
  .restaurants-section { padding:4rem 3% }
}
@media(max-width:380px) {
  .rh-name { font-size:2.6rem }
}