/* ========================================================================
   AIELLO'S PIZZERIA & SUBS — DESIGN SYSTEM
   "Da Jersey con Amore" — Authentic Italian, since the family said so
   ======================================================================== */

:root{
  /* Palette — Italian warm, NJ pizzeria-modern */
  --cream:#fdf6e3;
  --paper:#f5ead0;
  --warm-white:#fffbf2;
  --tomato:#c8102e;
  --tomato-deep:#9b0c24;
  --basil:#008542;
  --basil-deep:#005c2d;
  --gold:#d4a437;
  --gold-light:#f5c95a;
  --oxblood:#6b1818;
  --wood:#5b3a29;
  --char:#1a1a1a;
  --char-soft:#2a2a2a;
  --char-mute:#4a4a4a;
  --line:rgba(26,26,26,.1);

  /* Typography */
  --font-display:'Anton', 'Oswald', 'Bebas Neue', 'Helvetica Neue Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-serif:'Fraunces', Georgia, serif;
  --font-script:'Caveat', 'Brush Script MT', cursive;
  --font-body:'Inter', system-ui, sans-serif;

  --shadow-sm:0 2px 8px rgba(26,26,26,.08);
  --shadow-md:0 8px 24px rgba(26,26,26,.12);
  --shadow-lg:0 20px 60px rgba(26,26,26,.18);
  --shadow-xl:0 32px 80px rgba(26,26,26,.25);

  --rad-sm:6px;
  --rad-md:12px;
  --rad-lg:20px;
  --rad-pill:999px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--char);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}

/* ----- TYPOGRAPHY ----- */
.display{font-family:var(--font-display);letter-spacing:1.5px;line-height:1}
.serif{font-family:var(--font-serif)}
.italic{font-style:italic}
.script{font-family:var(--font-script);letter-spacing:.5px}

/* ----- SCROLL PROGRESS ----- */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--basil) 0%,var(--cream) 50%,var(--tomato) 100%);
  z-index:9999;transition:width .1s linear;
}

/* ----- HEADER ----- */
header{
  position:fixed;top:0;left:0;right:0;
  padding:18px 32px;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  transition:all .35s ease;
  background:transparent;
}
header.scrolled{
  background:rgba(253,246,227,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:10px 32px;
  box-shadow:0 4px 20px rgba(26,26,26,.08);
}
.nav-logo{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  font-size:24px;letter-spacing:1px;
  color:var(--char);
}
.nav-logo img{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;background:var(--warm-white);
  transition:transform .4s ease;
  box-shadow:0 2px 8px rgba(26,26,26,.15);
}
header.scrolled .nav-logo img{width:40px;height:40px}
.nav-logo:hover img{transform:rotate(-8deg) scale(1.05)}

nav ul{display:flex;list-style:none;gap:32px;align-items:center}
nav a{
  font-weight:500;font-size:14px;
  letter-spacing:.5px;text-transform:uppercase;
  position:relative;padding:6px 0;
  transition:color .3s ease;
}
nav a::after{
  content:'';position:absolute;left:0;bottom:0;
  width:0;height:2px;background:var(--tomato);
  transition:width .3s ease;
}
nav a:hover{color:var(--tomato)}
nav a:hover::after,nav a.active::after{width:100%}
nav a.active{color:var(--tomato)}

.btn-call-nav{
  background:var(--tomato);color:#fff !important;
  padding:10px 22px;border-radius:var(--rad-pill);
  font-weight:600;font-size:13px;
  text-transform:uppercase;letter-spacing:.5px;
  transition:all .3s ease;
  box-shadow:0 4px 14px rgba(200,16,46,.3);
}
.btn-call-nav::after{display:none}
.btn-call-nav:hover{
  background:var(--tomato-deep);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(200,16,46,.45);
}

.menu-toggle{display:none;font-size:28px;color:var(--char);z-index:1001}

/* ----- BUTTONS ----- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 36px;border-radius:var(--rad-pill);
  font-weight:600;font-size:16px;letter-spacing:.5px;
  position:relative;overflow:hidden;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;text-transform:uppercase;
}
.btn-primary{
  background:var(--tomato);color:#fff;
  box-shadow:0 8px 22px rgba(200,16,46,.3);
}
.btn-primary:hover{
  background:var(--tomato-deep);
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(200,16,46,.45);
}
.btn-secondary{
  background:transparent;color:var(--char);
  border:2px solid var(--char);
}
.btn-secondary:hover{
  background:var(--char);color:var(--cream);
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(26,26,26,.25);
}
.btn-gold{
  background:var(--gold);color:var(--char);
  box-shadow:0 8px 22px rgba(212,164,55,.4);
}
.btn-gold:hover{
  background:var(--gold-light);
  transform:translateY(-3px);
  box-shadow:0 14px 32px rgba(212,164,55,.5);
}
.btn-sm{padding:12px 24px;font-size:13px}
.btn .ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.4);
  transform:scale(0);animation:ripple .6s ease-out;
  pointer-events:none;
}
@keyframes ripple{to{transform:scale(4);opacity:0}}

/* ----- ITALIAN FLAG STRIPE ----- */
.flag-stripe{
  background:linear-gradient(90deg,
    var(--basil) 0% 33.3%,
    var(--cream) 33.3% 66.6%,
    var(--tomato) 66.6% 100%);
  height:6px;width:100%;
}
.flag-stripe-thick{height:10px}

/* ----- SECTION ATOMS ----- */
section.block{padding:120px 32px;position:relative}
.container{max-width:1240px;margin:0 auto}
.container-narrow{max-width:880px;margin:0 auto}

.section-eyebrow{
  font-family:var(--font-serif);font-style:italic;
  color:var(--tomato);font-size:18px;
  letter-spacing:1px;margin-bottom:14px;
  font-weight:600;
  display:flex;align-items:center;gap:14px;
}
.section-eyebrow::before{
  content:'';width:32px;height:1px;background:var(--tomato);
}
.section-eyebrow.center{justify-content:center}
.section-eyebrow.center::after{
  content:'';width:32px;height:1px;background:var(--tomato);
}
.section-eyebrow .accent-script{
  font-family:var(--font-script);
  font-size:32px;font-weight:600;
  color:var(--tomato);font-style:normal;
  line-height:1;
}

.section-title{
  font-family:var(--font-display);
  font-size:clamp(44px,7vw,84px);
  line-height:.95;letter-spacing:1px;
  margin-bottom:28px;
}
.section-title .accent{color:var(--tomato)}
.section-title .accent-green{color:var(--basil)}

/* ----- MARQUEE ----- */
.marquee-banner{
  background:var(--char);color:var(--cream);
  padding:22px 0;overflow:hidden;
  border-top:4px solid var(--basil);
  border-bottom:4px solid var(--tomato);
  position:relative;
}
.marquee-track{
  display:flex;gap:64px;
  animation:marquee 42s linear infinite;
  white-space:nowrap;width:max-content;
}
.marquee-track span{
  font-family:var(--font-display);
  font-size:30px;letter-spacing:2px;
  display:flex;align-items:center;gap:32px;
}
.marquee-track .sep{color:var(--gold);font-size:18px}
.marquee-track .sep-italian{color:var(--basil)}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ----- CHECKER PATTERN UTILITY ----- */
.checker-bg{
  background-image:
    linear-gradient(45deg,rgba(200,16,46,.06) 25%,transparent 25%),
    linear-gradient(-45deg,rgba(200,16,46,.06) 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,rgba(200,16,46,.06) 75%),
    linear-gradient(-45deg,transparent 75%,rgba(200,16,46,.06) 75%);
  background-size:24px 24px;
  background-position:0 0,0 12px,12px -12px,-12px 0;
}

/* ----- REVEAL ----- */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal-l{transform:translateX(-40px)}
.reveal-l.in{transform:translateX(0)}
.reveal-r{transform:translateX(40px)}
.reveal-r.in{transform:translateX(0)}
.reveal-zoom{transform:scale(.95)}
.reveal-zoom.in{transform:scale(1)}
.reveal-d-1{transition-delay:.1s}
.reveal-d-2{transition-delay:.2s}
.reveal-d-3{transition-delay:.3s}
.reveal-d-4{transition-delay:.4s}
.reveal-d-5{transition-delay:.5s}

/* ----- FOOTER ----- */
footer{
  background:var(--char);color:rgba(253,246,227,.7);
  padding:64px 32px 28px;
  border-top:6px solid var(--basil);
  position:relative;
}
footer::before{
  content:'';position:absolute;left:0;right:0;top:-6px;height:6px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
}
.footer-grid{
  max-width:1240px;margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  margin-bottom:48px;
}
.footer-brand{display:flex;align-items:flex-start;gap:20px}
.footer-brand img{
  width:80px;height:80px;border-radius:50%;
  background:var(--cream);object-fit:cover;
  flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.3);
}
.footer-brand h4{
  font-family:var(--font-display);
  font-size:26px;letter-spacing:1.5px;
  color:var(--cream);margin-bottom:6px;
}
.footer-brand .tag{
  font-family:var(--font-script);
  font-size:22px;color:var(--gold-light);
  margin-bottom:10px;
}
.footer-brand p{font-size:14px;line-height:1.6;max-width:340px}
footer h5{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:2px;
  color:var(--gold-light);margin-bottom:18px;
}
footer ul{list-style:none}
footer ul li{margin-bottom:10px;font-size:14px}
footer ul a{transition:color .3s ease}
footer ul a:hover{color:var(--gold-light)}
.footer-bottom{
  max-width:1240px;margin:0 auto;
  padding-top:28px;
  border-top:1px solid rgba(253,246,227,.12);
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
  font-size:13px;
}
.footer-bottom .credit{
  font-family:var(--font-serif);font-style:italic;
  font-size:13px;color:rgba(253,246,227,.5);
}
.footer-bottom .credit a{
  color:var(--gold-light);font-weight:600;font-style:normal;
  text-decoration:underline;text-decoration-color:rgba(245,201,90,.4);
  text-underline-offset:3px;
}
.footer-bottom .credit a:hover{text-decoration-color:var(--gold-light)}

/* ========================================================================
   PAGE: INDEX (the story)
   ======================================================================== */

/* HERO V2 — pizza scene + cheese drips + kinetic type */
.hero.hero-v2{
  min-height:100vh;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:120px 32px 80px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 28%,rgba(0,133,66,.10) 0%,transparent 55%),
    radial-gradient(ellipse at 82% 72%,rgba(200,16,46,.08) 0%,transparent 55%),
    linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%);
}
.hero.hero-v2 .hero-flag-stripe{
  position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
  z-index:5;
}

/* The big tomato sauce splat behind everything */
.hero-splat{
  position:absolute;
  top:50%;left:30%;
  width:65%;height:80%;
  transform:translate(-50%,-50%);
  z-index:1;pointer-events:none;
  animation:splat-pulse 22s ease-in-out infinite;
}
@keyframes splat-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1) rotate(0deg) }
  50%   { transform:translate(-50%,-50%) scale(1.05) rotate(3deg) }
}

/* One-time intro animation — gooey cheese drop + falling pepperoni */
.hero-intro-fall{
  position:absolute;top:0;left:0;right:0;height:100%;
  z-index:3;pointer-events:none;overflow:hidden;
}

/* The gooey cheese blob — slow, heavy, falls once and stretches */
.goo-drop{
  position:absolute;top:-50px;left:18%;
  width:28px;height:42px;
  background:linear-gradient(180deg,#fef3c1 0%,#f5c95a 50%,#d4a437 100%);
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  filter:drop-shadow(0 4px 10px rgba(212,164,55,.45));
  animation:goo-fall 3.6s cubic-bezier(.55,.05,.5,1) .6s 1 forwards;
  opacity:0;
  transform-origin:center top;
}
.goo-drop::before{
  content:'';position:absolute;top:-100px;left:50%;
  width:5px;height:100px;
  background:linear-gradient(180deg,transparent 0%,rgba(212,164,55,.45) 60%,#d4a437 100%);
  transform:translateX(-50%);
  border-radius:3px;
  opacity:0;
  animation:goo-trail 3.6s cubic-bezier(.55,.05,.5,1) .6s 1 forwards;
}
@keyframes goo-fall{
  0%   { top:-50px;       transform:scale(1) scaleY(1); opacity:0 }
  6%   { opacity:1 }
  60%  { top:calc(100% - 100px); transform:scale(1) scaleY(1.15); opacity:1 }
  78%  { top:calc(100% - 70px);  transform:scale(1.1) scaleY(1.4); opacity:1 }
  86%  { top:calc(100% - 30px);  transform:scaleX(2.6) scaleY(.45); opacity:.85 }
  93%  { transform:scaleX(3.2) scaleY(.3); opacity:.55 }
  100% { top:calc(100% - 30px); transform:scaleX(3.6) scaleY(.18); opacity:0 }
}
@keyframes goo-trail{
  0%,5% { opacity:0 }
  20%   { opacity:.7 }
  78%   { opacity:.5 }
  100%  { opacity:0 }
}

/* Pepperoni dropping in — three of them, plays once */
.goo-pep{
  position:absolute;top:-60px;
  width:34px;height:34px;
  background:radial-gradient(circle at 35% 30%, #c83232 0%, #9b1d1d 60%, #6a0e0e 100%);
  border-radius:50%;
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.18),
    inset -2px -3px 6px rgba(0,0,0,.25),
    0 6px 14px rgba(0,0,0,.18);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.15));
  opacity:0;
  animation:pep-drop 1.8s cubic-bezier(.34,1.56,.64,1) 1 forwards;
  transform-origin:center;
}
.goo-pep::before,.goo-pep::after{
  content:'';position:absolute;
  width:5px;height:5px;
  background:#5a0e0e;border-radius:50%;
}
.goo-pep::before{ top:30%;left:30% }
.goo-pep::after{  top:55%;left:60% }

.goo-pep-1{ left:62%; animation-delay:.2s }
.goo-pep-2{ left:38%; animation-delay:.9s; width:28px; height:28px }
.goo-pep-3{ left:78%; animation-delay:1.4s; width:30px; height:30px }

@keyframes pep-drop{
  0%   { top:-60px;          transform:rotate(0deg)   scale(.6); opacity:0 }
  10%  { opacity:1 }
  60%  { top:60%;            transform:rotate(180deg) scale(1.15) }
  78%  { top:72%;            transform:rotate(290deg) scale(1) }
  90%  { top:78%;            transform:rotate(340deg) scale(.95) }
  100% { top:80%;            transform:rotate(360deg) scale(.9); opacity:.7 }
}

/* Floating background ingredients */
.hero-ingredients{
  position:absolute;inset:0;z-index:2;pointer-events:none;
}
.ing{
  position:absolute;width:38px;height:38px;
  opacity:.55;
  filter:drop-shadow(0 4px 8px rgba(26,26,26,.12));
  animation:bob 6s ease-in-out infinite;
}
.ing-pep-2{animation-delay:.8s;animation-duration:7s;width:32px;height:32px}
.ing-basil{animation-delay:1.4s;animation-duration:8s;width:42px;height:42px;opacity:.45}
.ing-basil-2{animation-delay:2.1s;animation-duration:6.5s;width:36px;height:36px;opacity:.4}
.ing-mush{animation-delay:.5s;animation-duration:7.5s;opacity:.5}
@keyframes bob{
  0%,100% { transform:translateY(0) rotate(0deg) }
  50%     { transform:translateY(-18px) rotate(8deg) }
}

/* Hero grid layout */
.hero-grid{
  position:relative;z-index:4;
  max-width:1300px;width:100%;
  display:grid;grid-template-columns:1.25fr 1fr;
  gap:48px;align-items:center;
}

/* LEFT: content */
.hero-v2 .hero-content{text-align:left;max-width:none}

.hero-v2 .hero-eyebrow{
  display:inline-block;
  font-family:var(--font-script);
  color:var(--tomato);font-size:32px;
  letter-spacing:.5px;margin-bottom:14px;
  font-weight:600;line-height:1;
}
.hero-v2 .hero-eyebrow::before{
  content:'';display:inline-block;width:36px;height:1px;
  background:var(--tomato);margin:0 14px 9px 0;vertical-align:middle;
}
.hero-v2 .hero-eyebrow::after{
  content:'';display:inline-block;width:36px;height:1px;
  background:var(--tomato);margin:0 0 9px 14px;vertical-align:middle;
}

.hero-v2 h1{
  font-family:var(--font-display);
  font-size:clamp(40px,4.8vw,68px);
  line-height:1.05;letter-spacing:1px;
  color:var(--char);
  margin-bottom:22px;
}
.hero-v2 h1 .word-italian{
  display:inline-block;
  position:relative;
  color:var(--char);
}
.hero-v2 h1 .word-italian::after{
  content:'';position:absolute;left:-2%;right:-2%;bottom:6%;
  height:18%;background:rgba(0,133,66,.28);
  z-index:-1;border-radius:3px;
  transform:skewX(-4deg);
}
.hero-v2 h1 .accent{color:var(--tomato);position:relative}
.hero-v2 h1 .accent-green{color:var(--basil)}
.hero-v2 h1 .word-toss{
  display:inline-block;
  animation:toss 8s ease-in-out infinite;
  transform-origin:center;
}
@keyframes toss{
  0%,100% { transform:rotate(0deg) }
  46%     { transform:rotate(0deg) }
  50%     { transform:rotate(-2.5deg) translateY(-3px) }
  54%     { transform:rotate(0deg) }
}

.hero-v2 .hero-tag{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(18px,2vw,22px);
  color:var(--char-soft);
  margin-bottom:8px;
  font-weight:400;line-height:1.5;
  max-width:560px;
}
.hero-v2 .hero-jersey{
  font-family:var(--font-script);
  color:var(--basil);font-size:26px;
  margin-bottom:32px;
  line-height:1.2;
}
.hero-v2 .hero-cta{
  display:flex;gap:14px;flex-wrap:wrap;
  margin-bottom:28px;
  justify-content:flex-start;
}
.hero-v2 .hero-meta{
  display:flex;gap:24px;flex-wrap:wrap;
  font-size:13px;color:var(--char-soft);font-weight:500;
  letter-spacing:.5px;justify-content:flex-start;
}
.hero-v2 .hero-meta span{display:flex;align-items:center;gap:8px}
.hero-v2 .hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--basil)}

/* RIGHT: pizza scene */
.hero-pizza-scene{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:100%;aspect-ratio:1;
  max-width:580px;margin:0 auto;
}
.hero-video{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  border-radius:var(--rad-lg);
  box-shadow:var(--shadow-xl);
  z-index:5;
}
.hero-video ~ .pizza-svg,
.hero-video ~ .pizza-img,
.hero-video ~ .pizza-steam{display:none}
.hero-video ~ .hero-logo-stamp{display:none}

/* Steam — separate overlay, sits ABOVE pizza visual whether SVG or image */
.pizza-steam{
  position:absolute;
  top:-4%;left:0;right:0;
  width:100%;height:38%;
  z-index:4;pointer-events:none;
}
.pizza-steam path{
  animation:steam-rise 3s ease-out infinite;
  transform-origin:center bottom;
  transform-box:fill-box;
  opacity:0;
}
.pizza-steam .steam-1{animation-delay:0s}
.pizza-steam .steam-2{animation-delay:1s}
.pizza-steam .steam-3{animation-delay:2s}
@keyframes steam-rise{
  0%   { transform:translateY(20px) scaleY(.6); opacity:0 }
  20%  { opacity:.7 }
  100% { transform:translateY(-30px) scaleY(1.2); opacity:0 }
}

/* Grok pizza image — when present, hides the SVG fallback below it */
.pizza-img{
  width:100%;height:auto;
  filter:drop-shadow(0 18px 40px rgba(26,26,26,.18));
  animation:pizza-bob 9s ease-in-out infinite;
  transform-origin:center;
  display:block;
  position:relative;
  z-index:2;
}
/* Auto-hide SVG when img sibling is present (uncommented) */
.pizza-img ~ .pizza-svg{display:none}

.pizza-svg{
  width:100%;height:auto;
  filter:drop-shadow(0 18px 40px rgba(26,26,26,.15));
  animation:pizza-bob 9s ease-in-out infinite;
  transform-origin:center;
  position:relative;
  z-index:2;
}
@keyframes pizza-bob{
  0%,100% { transform:translateY(0) rotate(0deg) }
  50%     { transform:translateY(-12px) rotate(1.5deg) }
}

/* Pizza pie - very subtle pulse */
.pizza-pie{
  animation:pie-pulse 6s ease-in-out infinite;
  transform-origin:270px 290px;
}
@keyframes pie-pulse{
  0%,100% { transform:scale(1) }
  50%     { transform:scale(1.015) }
}

/* Pizza slice - subtle wiggle (the "lifted" energy) */
.pizza-slice{
  animation:slice-lift 5s ease-in-out infinite;
  transform-origin:270px 290px;
}
@keyframes slice-lift{
  0%,100% { transform:translate(0,0) rotate(0deg) }
  50%     { transform:translate(8px,-6px) rotate(-1.5deg) }
}

/* Cheese pull strings — stretch loop */
.cheese-pull{
  stroke-dasharray:160 200;
  animation:cheese-stretch 4s ease-in-out infinite;
}
.cheese-1{animation-delay:0s}
.cheese-2{animation-delay:.5s;stroke-dasharray:180 200}
.cheese-3{animation-delay:1s;stroke-dasharray:170 200}
@keyframes cheese-stretch{
  0%   { stroke-dashoffset:160; opacity:.4 }
  35%  { stroke-dashoffset:0;   opacity:.95 }
  65%  { stroke-dashoffset:-30; opacity:.95 }
  100% { stroke-dashoffset:-160;opacity:.4 }
}

/* Hot honey drizzle - reveal animation */
.honey-drizzle{
  stroke-dasharray:600;
  stroke-dashoffset:600;
  animation:honey-flow 6s ease-in-out infinite;
}
@keyframes honey-flow{
  0%   { stroke-dashoffset:600 }
  40%  { stroke-dashoffset:0 }
  85%  { stroke-dashoffset:0 }
  100% { stroke-dashoffset:-600 }
}

/* Logo stamp - small badge in bottom corner */
.hero-logo-stamp{
  position:absolute;
  bottom:-2%;right:-4%;
  width:130px;height:auto;
  z-index:6;
  filter:drop-shadow(0 8px 20px rgba(26,26,26,.2));
  animation:stamp-bob 7s ease-in-out infinite;
  transform-origin:center;
}
@keyframes stamp-bob{
  0%,100% { transform:rotate(0deg) translateY(0) }
  50%     { transform:rotate(-3deg) translateY(-4px) }
}

/* Responsive — hero v2 */
@media (max-width:1100px){
  .hero-grid{grid-template-columns:1fr;gap:32px;text-align:center}
  .hero-v2 .hero-content{text-align:center}
  .hero-v2 .hero-cta{justify-content:center}
  .hero-v2 .hero-meta{justify-content:center}
  .hero-v2 .hero-eyebrow::before,
  .hero-v2 .hero-eyebrow::after{display:inline-block}
  .hero-pizza-scene{max-width:420px;order:-1}
  .hero-logo-stamp{width:100px;bottom:-2%;right:-2%}
}
@media (max-width:600px){
  .hero.hero-v2{padding:100px 20px 60px}
  .hero-pizza-scene{max-width:320px}
  .hero-logo-stamp{width:80px}
  .hero-v2 .hero-meta{gap:14px;font-size:12px}
  .ing-basil-2,.ing-mush{display:none}
  .goo-pep-3{display:none}
}

/* Reduced motion — kill all hero motion */
@media (prefers-reduced-motion:reduce){
  .goo-drop,.goo-pep,.ing,.pizza-pie,.pizza-slice,.cheese-pull,.honey-drizzle,
  .pizza-steam path,.pizza-svg,.pizza-img,.hero-logo-stamp,.hero-splat,.word-toss{
    animation:none !important;
  }
  .goo-drop,.goo-pep{opacity:0 !important}
  .cheese-pull{stroke-dashoffset:0}
  .honey-drizzle{stroke-dashoffset:0}
}

/* HERO (legacy) — kept for any other page that might use it */
.hero{
  min-height:100vh;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:120px 32px 80px;
  text-align:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 28%,rgba(0,133,66,.10) 0%,transparent 55%),
    radial-gradient(ellipse at 82% 72%,rgba(200,16,46,.10) 0%,transparent 55%),
    linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%);
}
.hero-bg-pattern{
  position:absolute;inset:0;
  background-image:
    radial-gradient(circle at 20% 20%,rgba(212,164,55,.14) 0%,transparent 1.4%),
    radial-gradient(circle at 80% 40%,rgba(212,164,55,.14) 0%,transparent 1.4%),
    radial-gradient(circle at 50% 70%,rgba(212,164,55,.14) 0%,transparent 1.4%),
    radial-gradient(circle at 30% 90%,rgba(212,164,55,.14) 0%,transparent 1.4%);
  background-size:380px 380px;
  opacity:.7;pointer-events:none;
}
.hero-flag-stripe{
  position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
}
.hero-content{position:relative;z-index:2;max-width:980px;width:100%}
.hero-eyebrow{
  display:inline-block;
  font-family:var(--font-script);
  color:var(--tomato);font-size:32px;
  letter-spacing:.5px;margin-bottom:14px;
  font-weight:600;
}
.hero-eyebrow::before,.hero-eyebrow::after{
  content:'';display:inline-block;width:32px;height:1px;
  background:var(--tomato);margin:0 14px 8px;vertical-align:middle;
}
.hero-logo{
  width:min(340px,68vw);height:auto;margin:0 auto 4px;
  filter:drop-shadow(0 12px 30px rgba(26,26,26,.18));
}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(56px,10vw,128px);
  line-height:.92;letter-spacing:1px;
  color:var(--char);
  margin-bottom:14px;
}
.hero h1 .accent{color:var(--tomato)}
.hero h1 .accent-green{color:var(--basil)}
.hero-tag{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(20px,3vw,28px);
  color:var(--char-soft);
  margin-bottom:14px;
  font-weight:400;
}
.hero-jersey{
  font-family:var(--font-script);
  color:var(--basil);font-size:28px;
  margin-bottom:32px;
}
.hero-cta{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  margin-bottom:32px;
}
.hero-meta{
  display:flex;justify-content:center;gap:32px;flex-wrap:wrap;
  font-size:14px;color:var(--char-soft);font-weight:500;
  letter-spacing:.5px;
}
.hero-meta span{display:flex;align-items:center;gap:8px}
.hero-meta .dot{width:6px;height:6px;border-radius:50%;background:var(--basil)}

/* STORY (la famiglia) */
.story{background:var(--warm-white);position:relative;border-top:6px solid;border-image:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%) 1}
.story::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
}
.story-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:80px;
  align-items:center;
}
.story-text .section-title{color:var(--char)}
.story-text p{
  font-size:18px;line-height:1.8;
  color:var(--char-soft);margin-bottom:20px;
}
.story-text p.lead{
  font-family:var(--font-serif);
  font-size:24px;line-height:1.5;
  color:var(--char);font-weight:500;
}
.story-signature{
  margin-top:36px;padding-top:28px;
  border-top:1px solid var(--line);
}
.story-signature .signed{
  font-family:var(--font-script);
  font-size:36px;color:var(--tomato);
  line-height:1;margin-bottom:6px;
}
.story-signature .role{
  font-family:var(--font-serif);font-style:italic;
  font-size:15px;color:var(--char-mute);
  letter-spacing:.5px;
}
.story-visual{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:520px;
}
.story-frame{
  width:100%;max-width:480px;aspect-ratio:1;
  background:
    radial-gradient(circle at 30% 30%,rgba(212,164,55,.20) 0%,transparent 50%),
    linear-gradient(135deg,var(--paper) 0%,var(--cream) 100%);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  box-shadow:var(--shadow-lg),inset 0 0 0 1px rgba(212,164,55,.4);
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.story-frame:hover{transform:scale(1.02)}
.story-frame img{
  width:78%;height:auto;
  filter:drop-shadow(0 16px 40px rgba(26,26,26,.18));
}
.story-frame::before{
  content:'';position:absolute;inset:-22px;
  border:2px dashed rgba(212,164,55,.5);
  border-radius:50%;
  animation:rotate 60s linear infinite;
}
.story-frame::after{
  content:'EST. INVERNESS · DA JERSEY · LA FAMIGLIA AIELLO ·';
  position:absolute;inset:-50px;
  font-family:var(--font-display);font-size:13px;
  letter-spacing:4px;color:var(--gold);
  /* circular text trick using path: too complex, fall back to subtle ring text */
  display:none;
}
@keyframes rotate{to{transform:rotate(360deg)}}

.heritage-badge{
  position:absolute;top:8%;right:-2%;
  width:140px;height:140px;
  background:var(--tomato);color:var(--cream);
  border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:var(--shadow-lg);
  font-family:var(--font-display);
  text-align:center;line-height:1;letter-spacing:1px;
  transform:rotate(-12deg);
  border:4px solid var(--cream);
}
.heritage-badge .small{font-size:10px;letter-spacing:2px;opacity:.85}
.heritage-badge .big{font-size:32px;margin:6px 0}
.heritage-badge .med{font-size:13px;letter-spacing:1px}

/* PHILOSOPHY (the pizza) */
.philosophy{
  background:var(--char);color:var(--cream);
  position:relative;overflow:hidden;
}
.philosophy::before,.philosophy::after{
  content:'';position:absolute;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
}
.philosophy::before{top:0}
.philosophy::after{bottom:0}
.philosophy-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 80% 30%,rgba(212,164,55,.08) 0%,transparent 50%),
    radial-gradient(circle at 20% 70%,rgba(200,16,46,.08) 0%,transparent 50%);
  pointer-events:none;
}
.philosophy-content{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto}
.philosophy .section-eyebrow{color:var(--gold-light)}
.philosophy .section-eyebrow::before,
.philosophy .section-eyebrow::after{background:var(--gold-light)}
.philosophy .section-title{color:var(--cream)}
.philosophy-quote{
  font-family:var(--font-serif);font-style:italic;
  font-size:clamp(24px,3.5vw,36px);
  line-height:1.45;color:var(--cream);
  margin:0 auto 36px;
  max-width:760px;
}
.philosophy-quote .quote-mark{
  font-family:var(--font-display);
  font-size:80px;color:var(--gold);
  line-height:.5;display:block;
  margin-bottom:8px;font-style:normal;
}
.philosophy-attribution{
  font-family:var(--font-script);
  font-size:28px;color:var(--gold-light);
  margin-bottom:60px;
}
.philosophy-pillars{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;
  margin-top:60px;
}
.philosophy-pillar{
  text-align:center;padding:32px 16px;
  border-top:3px solid var(--gold);
  background:rgba(253,246,227,.04);
  border-radius:0 0 var(--rad-md) var(--rad-md);
  transition:transform .35s ease,background .35s ease;
}
.philosophy-pillar:hover{
  transform:translateY(-6px);
  background:rgba(253,246,227,.07);
}
.philosophy-pillar .num{
  font-family:var(--font-display);
  font-size:48px;color:var(--gold);letter-spacing:1px;
  margin-bottom:8px;
}
.philosophy-pillar h4{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:1.5px;
  color:var(--cream);margin-bottom:12px;
}
.philosophy-pillar p{
  font-size:14px;line-height:1.6;
  color:rgba(253,246,227,.7);
}

/* FEATURED MENU */
.featured{background:var(--cream);position:relative}
.featured-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}
.featured-card{
  background:var(--warm-white);
  border-radius:var(--rad-md);
  overflow:hidden;
  position:relative;
  border-top:5px solid var(--tomato);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;
  display:flex;flex-direction:column;
}
.featured-card:nth-child(2){border-top-color:var(--basil)}
.featured-card:nth-child(3){border-top-color:var(--gold)}
.featured-card:nth-child(4){border-top-color:var(--char)}
.featured-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
}
.featured-card .badge-fav{
  position:absolute;top:12px;right:12px;
  background:var(--gold);color:var(--char);
  font-family:var(--font-display);
  font-size:11px;letter-spacing:1.2px;
  padding:6px 12px;border-radius:var(--rad-pill);
  z-index:2;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
}
.featured-card .header{
  padding:32px 28px 0;
}
.featured-card .icon{
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);border-radius:50%;
  margin-bottom:18px;font-size:32px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.featured-card:hover .icon{transform:rotate(-12deg) scale(1.1)}
.featured-card h3{
  font-family:var(--font-display);
  font-size:26px;letter-spacing:1px;line-height:1.05;
  margin-bottom:10px;color:var(--char);
}
.featured-card .body{
  padding:0 28px 28px;
  display:flex;flex-direction:column;
  flex:1;
}
.featured-card .desc{
  font-size:14px;line-height:1.65;color:var(--char-soft);
  flex:1;margin-bottom:18px;
}
.featured-card .price{
  font-family:var(--font-display);
  font-size:28px;color:var(--tomato);
  letter-spacing:1px;
}
.featured-card .price .from{
  font-family:var(--font-serif);font-style:italic;
  font-size:13px;color:var(--char-mute);
  letter-spacing:0;margin-right:6px;font-weight:400;
}

/* THE AIELLO WAY (pillars) */
.way{background:var(--warm-white);border-top:6px solid var(--gold)}
.way-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;margin-top:48px;
}
.way-pillar{
  padding:32px 28px;background:var(--cream);
  border-radius:var(--rad-md);
  border-left:4px solid var(--tomato);
  transition:transform .3s ease,box-shadow .3s ease;
}
.way-pillar:nth-child(2){border-left-color:var(--basil)}
.way-pillar:nth-child(3){border-left-color:var(--gold)}
.way-pillar:nth-child(4){border-left-color:var(--oxblood)}
.way-pillar:hover{
  transform:translateX(4px) translateY(-2px);
  box-shadow:var(--shadow-md);
}
.way-pillar .icon{
  font-size:36px;margin-bottom:14px;
  display:inline-block;
}
.way-pillar h4{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:1px;
  margin-bottom:10px;color:var(--char);
}
.way-pillar p{
  font-size:14px;line-height:1.65;color:var(--char-soft);
}

/* VISIT */
.visit{background:var(--char);color:var(--cream);position:relative;overflow:hidden}
.visit::before{
  content:'';position:absolute;top:0;left:0;right:0;height:6px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
}
.visit-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  align-items:start;
}
.visit-info .section-eyebrow{color:var(--gold-light)}
.visit-info .section-eyebrow::before{background:var(--gold-light)}
.visit-info .section-title{color:var(--cream)}
.visit-info > p{
  font-family:var(--font-serif);font-style:italic;
  font-size:20px;color:rgba(253,246,227,.75);
  margin-bottom:36px;line-height:1.6;
}

.info-block{
  display:flex;gap:20px;padding:24px 0;
  border-bottom:1px solid rgba(253,246,227,.12);
}
.info-block:last-child{border-bottom:none}
.info-block .label{
  font-family:var(--font-display);
  font-size:13px;letter-spacing:2px;
  color:var(--gold-light);
  flex-shrink:0;width:90px;padding-top:4px;
}
.info-block .content{flex:1}
.info-block .content strong{
  display:block;font-size:20px;font-weight:600;
  margin-bottom:4px;color:var(--cream);
}
.info-block .content span{
  font-size:15px;color:rgba(253,246,227,.7);display:block;
}
.info-block.phone .content strong{
  font-family:var(--font-display);
  font-size:32px;letter-spacing:1px;
  color:var(--gold-light);
}
.info-block.phone .content strong a:hover{color:var(--gold)}

.find-map{
  width:100%;aspect-ratio:1.05;
  border-radius:var(--rad-md);overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:3px solid var(--gold);
  position:relative;
}
.find-map iframe{width:100%;height:100%;border:0;filter:contrast(1.05) saturate(.95)}

/* BIG CTA */
.order-cta{
  background:var(--tomato);color:#fff;
  padding:96px 32px;text-align:center;
  position:relative;overflow:hidden;
}
.order-cta::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 18% 50%,rgba(212,164,55,.22) 0%,transparent 40%),
    radial-gradient(ellipse at 82% 50%,rgba(0,0,0,.16) 0%,transparent 40%);
  pointer-events:none;
}
.order-cta-content{position:relative;z-index:2;max-width:820px;margin:0 auto}
.order-cta-eyebrow{
  font-family:var(--font-script);
  font-size:32px;color:rgba(255,255,255,.85);
  margin-bottom:6px;
}
.order-cta h2{
  font-family:var(--font-display);
  font-size:clamp(40px,7vw,80px);
  line-height:1;letter-spacing:1px;
  margin-bottom:16px;
}
.order-cta p{
  font-family:var(--font-serif);font-style:italic;
  font-size:22px;margin-bottom:40px;
  opacity:.92;
}
.order-cta-buttons{
  display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
}
.btn-cta-light{
  background:#fff;color:var(--tomato);
  padding:20px 40px;font-size:18px;
  border-radius:var(--rad-pill);font-weight:700;
  display:inline-flex;align-items:center;gap:12px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  text-transform:uppercase;letter-spacing:.5px;
}
.btn-cta-light:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 36px rgba(0,0,0,.3);
}
.btn-cta-dark{
  background:var(--char);color:#fff;
  padding:20px 40px;font-size:18px;
  border-radius:var(--rad-pill);font-weight:700;
  display:inline-flex;align-items:center;gap:12px;
  transition:all .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  text-transform:uppercase;letter-spacing:.5px;
}
.btn-cta-dark:hover{
  background:#000;
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 14px 36px rgba(0,0,0,.4);
}

/* ========================================================================
   PAGE: MENU (la cucina)
   ======================================================================== */

.menu-hero{
  padding:160px 32px 80px;
  background:
    radial-gradient(ellipse at 50% 100%,rgba(200,16,46,.08) 0%,transparent 60%),
    linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%);
  text-align:center;position:relative;
  overflow:hidden;
}
.menu-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
}
.menu-hero-eyebrow{
  font-family:var(--font-script);
  font-size:36px;color:var(--tomato);
  margin-bottom:8px;
}
.menu-hero h1{
  font-family:var(--font-display);
  font-size:clamp(56px,9vw,112px);
  line-height:.95;letter-spacing:1.5px;
  margin-bottom:18px;
}
.menu-hero h1 .accent{color:var(--tomato)}
.menu-hero p{
  font-family:var(--font-serif);font-style:italic;
  font-size:22px;color:var(--char-soft);
  max-width:680px;margin:0 auto 32px;
}

/* Sticky category nav */
.cat-nav{
  position:sticky;top:80px;z-index:50;
  background:var(--cream);
  border-top:2px solid var(--tomato);
  border-bottom:2px solid var(--tomato);
  padding:16px 0;
  margin-bottom:60px;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}
.cat-nav-track{
  display:flex;gap:6px;justify-content:center;
  overflow-x:auto;padding:0 16px;
  scrollbar-width:thin;
}
.cat-nav a{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:1.5px;
  padding:8px 18px;border-radius:var(--rad-pill);
  color:var(--char);white-space:nowrap;
  transition:all .25s ease;
  border:2px solid transparent;
}
.cat-nav a:hover,.cat-nav a.active{
  background:var(--tomato);color:var(--cream);
}

/* Menu category sections */
.menu-section{
  padding:60px 32px;
  scroll-margin-top:160px;
}
.menu-section.alt{background:var(--warm-white)}
.menu-section-header{
  text-align:center;
  max-width:780px;margin:0 auto 60px;
}
.menu-section-header .italian{
  font-family:var(--font-script);
  font-size:30px;color:var(--tomato);
  margin-bottom:6px;
}
.menu-section-header h2{
  font-family:var(--font-display);
  font-size:clamp(40px,6vw,72px);
  letter-spacing:1.5px;line-height:1;
  margin-bottom:18px;
}
.menu-section-header p{
  font-family:var(--font-serif);font-style:italic;
  font-size:18px;color:var(--char-soft);
}

.menu-items{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:36px;
  max-width:1200px;margin:0 auto;
}
.menu-item{
  display:flex;flex-direction:column;gap:8px;
  padding-bottom:24px;
  border-bottom:1px dashed rgba(26,26,26,.18);
  position:relative;
}
.menu-item.featured-item{
  background:var(--paper);
  padding:24px;border-radius:var(--rad-md);
  border:1px solid var(--gold);
  border-bottom:1px solid var(--gold);
}
.menu-item-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;
}
.menu-item-name{
  font-family:var(--font-display);
  font-size:22px;letter-spacing:1px;
  color:var(--char);flex:1;
}
.menu-item-fav{
  display:inline-block;margin-left:8px;
  font-family:var(--font-script);
  font-size:18px;color:var(--tomato);
  letter-spacing:0;
}
.menu-item-price{
  font-family:var(--font-display);
  font-size:22px;color:var(--tomato);
  letter-spacing:.5px;flex-shrink:0;
}
.menu-item-desc{
  font-size:14px;line-height:1.6;
  color:var(--char-soft);
}
.menu-item-meta{
  font-family:var(--font-serif);font-style:italic;
  font-size:13px;color:var(--char-mute);
  margin-top:4px;
}
.menu-toppings{
  margin-top:18px;padding:20px;
  background:var(--cream);border-radius:var(--rad-sm);
  border-left:3px solid var(--basil);
  font-size:14px;
}
.menu-toppings strong{
  font-family:var(--font-display);
  font-size:13px;letter-spacing:1.2px;
  color:var(--char);display:block;margin-bottom:6px;
}
.menu-section-divider{
  display:flex;justify-content:center;align-items:center;
  gap:18px;padding:40px 0 0;
}
.menu-section-divider::before,
.menu-section-divider::after{
  content:'';height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent,var(--tomato),transparent);
}
.menu-section-divider span{
  font-family:var(--font-script);
  font-size:24px;color:var(--tomato);
}

.menu-cta-strip{
  background:var(--char);color:var(--cream);
  padding:60px 32px;text-align:center;
}
.menu-cta-strip h3{
  font-family:var(--font-display);
  font-size:clamp(32px,5vw,56px);
  letter-spacing:1px;margin-bottom:12px;
}
.menu-cta-strip h3 .accent{color:var(--gold-light)}
.menu-cta-strip p{
  font-family:var(--font-serif);font-style:italic;
  font-size:18px;margin-bottom:30px;
  color:rgba(253,246,227,.75);
}
.menu-cta-strip .btn-cta-light{padding:16px 32px;font-size:16px}

/* ========================================================================
   PAGE: ORDER (vieni a mangiare)
   ======================================================================== */

.order-page{padding-top:80px}
.order-hero{
  padding:80px 32px 40px;
  text-align:center;
  background:
    linear-gradient(180deg,var(--cream) 0%,var(--paper) 100%);
  position:relative;
}
.order-hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:8px;
  background:linear-gradient(90deg,var(--basil) 0% 33.3%,var(--cream) 33.3% 66.6%,var(--tomato) 66.6% 100%);
}
.order-hero .italian-eyebrow{
  font-family:var(--font-script);
  font-size:34px;color:var(--tomato);
  margin-bottom:6px;
}
.order-hero h1{
  font-family:var(--font-display);
  font-size:clamp(44px,8vw,84px);
  letter-spacing:1.5px;line-height:1;
  margin-bottom:14px;
}
.order-hero p{
  font-family:var(--font-serif);font-style:italic;
  font-size:18px;color:var(--char-soft);
  max-width:620px;margin:0 auto;
}

.order-layout{
  display:grid;
  grid-template-columns:1fr 380px;
  gap:40px;
  max-width:1320px;margin:0 auto;
  padding:40px 32px 80px;
  align-items:start;
}

/* Category tabs (horizontal scroll on mobile) */
.order-cats{
  position:sticky;top:80px;z-index:30;
  background:var(--cream);
  padding:14px 0;
  margin-bottom:24px;
  border-bottom:2px solid var(--tomato);
}
.order-cats-track{
  display:flex;gap:8px;overflow-x:auto;padding:0 4px;
}
.order-cats button{
  font-family:var(--font-display);
  font-size:13px;letter-spacing:1.5px;
  padding:8px 16px;border-radius:var(--rad-pill);
  background:transparent;color:var(--char);
  white-space:nowrap;border:2px solid transparent;
  transition:all .25s ease;
}
.order-cats button:hover{background:rgba(200,16,46,.1)}
.order-cats button.active{
  background:var(--tomato);color:var(--cream);
}

.order-items-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}
.order-item-card{
  background:var(--warm-white);
  border-radius:var(--rad-md);
  padding:24px;
  border:1px solid var(--line);
  display:flex;flex-direction:column;gap:10px;
  position:relative;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.order-item-card:hover{
  transform:translateY(-3px);
  border-color:var(--tomato);
  box-shadow:var(--shadow-md);
}
.order-item-card.fav{
  border:1px solid var(--gold);
  background:var(--paper);
}
.order-item-card .fav-badge{
  position:absolute;top:-10px;right:16px;
  background:var(--gold);color:var(--char);
  font-family:var(--font-display);
  font-size:11px;letter-spacing:1.2px;
  padding:4px 12px;border-radius:var(--rad-pill);
}
.order-item-card .name{
  font-family:var(--font-display);
  font-size:20px;letter-spacing:1px;line-height:1.1;
  color:var(--char);
}
.order-item-card .desc{
  font-size:13px;line-height:1.55;color:var(--char-soft);
  flex:1;
}
.order-item-card .footer{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:6px;
}
.order-item-card .price{
  font-family:var(--font-display);
  font-size:22px;color:var(--tomato);
  letter-spacing:.5px;
}
.order-item-card .price .from{
  font-family:var(--font-serif);font-style:italic;
  font-size:11px;color:var(--char-mute);
  letter-spacing:0;font-weight:400;margin-right:4px;
}
.order-item-card .add-btn{
  background:var(--char);color:var(--cream);
  padding:8px 18px;border-radius:var(--rad-pill);
  font-family:var(--font-display);
  font-size:12px;letter-spacing:1.2px;
  transition:all .25s ease;
}
.order-item-card .add-btn:hover{
  background:var(--tomato);
  transform:scale(1.05);
}

/* Cart sidebar */
.cart{
  position:sticky;top:96px;
  background:var(--char);color:var(--cream);
  border-radius:var(--rad-md);
  padding:24px;
  box-shadow:var(--shadow-lg);
  max-height:calc(100vh - 120px);
  display:flex;flex-direction:column;
}
.cart-header{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:16px;
  border-bottom:1px solid rgba(253,246,227,.15);
  margin-bottom:16px;
}
.cart-header h3{
  font-family:var(--font-display);
  font-size:24px;letter-spacing:1.2px;
}
.cart-header .count{
  font-family:var(--font-serif);font-style:italic;
  font-size:14px;color:rgba(253,246,227,.7);
}
.cart-items{
  flex:1;overflow-y:auto;
  margin:-8px -4px 16px;padding:8px 4px;
  scrollbar-width:thin;
}
.cart-empty{
  text-align:center;padding:40px 16px;
  color:rgba(253,246,227,.5);
  font-family:var(--font-serif);font-style:italic;
  font-size:15px;
}
.cart-empty .icon{font-size:48px;display:block;margin-bottom:12px;opacity:.4}

.cart-line{
  padding:14px 0;
  border-bottom:1px solid rgba(253,246,227,.08);
  display:grid;grid-template-columns:1fr auto;gap:12px;
}
.cart-line:last-child{border-bottom:none}
.cart-line .name{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:.8px;
  color:var(--cream);margin-bottom:3px;
}
.cart-line .opts{
  font-size:11px;color:rgba(253,246,227,.55);
  line-height:1.4;
}
.cart-line .right{
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
}
.cart-line .price{
  font-family:var(--font-display);
  font-size:14px;color:var(--gold-light);
}
.cart-line .qty{
  display:flex;gap:4px;align-items:center;
}
.cart-line .qty button{
  width:22px;height:22px;border-radius:4px;
  background:rgba(253,246,227,.1);color:var(--cream);
  font-size:14px;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.cart-line .qty button:hover{background:var(--tomato)}
.cart-line .qty span{
  font-family:var(--font-display);
  font-size:13px;min-width:20px;text-align:center;
}
.cart-line .remove{
  font-size:11px;color:rgba(253,246,227,.4);
  margin-top:2px;text-decoration:underline;
  background:none;padding:0;
}
.cart-line .remove:hover{color:var(--tomato)}

.cart-totals{
  padding:16px 0;
  border-top:1px solid rgba(253,246,227,.15);
}
.cart-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:6px 0;font-size:14px;color:rgba(253,246,227,.75);
}
.cart-row.total{
  padding-top:14px;margin-top:6px;
  border-top:1px solid rgba(253,246,227,.15);
}
.cart-row.total .label{
  font-family:var(--font-display);
  font-size:16px;letter-spacing:1.2px;color:var(--cream);
}
.cart-row.total .value{
  font-family:var(--font-display);
  font-size:24px;color:var(--gold-light);
  letter-spacing:1px;
}
.btn-checkout{
  width:100%;margin-top:14px;
  background:var(--tomato);color:#fff;
  padding:16px;border-radius:var(--rad-pill);
  font-family:var(--font-display);
  font-size:16px;letter-spacing:1.5px;
  transition:all .3s ease;
}
.btn-checkout:hover{
  background:var(--tomato-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(200,16,46,.4);
}
.btn-checkout:disabled{
  background:rgba(253,246,227,.1);
  color:rgba(253,246,227,.3);
  cursor:not-allowed;transform:none;box-shadow:none;
}

/* ----- Modals (item builder + checkout) ----- */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.75);
  z-index:2000;
  display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.modal-overlay.open{display:flex;animation:fadein .3s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.modal{
  background:var(--cream);
  border-radius:var(--rad-lg);
  width:100%;max-width:560px;max-height:88vh;
  overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-xl);
  animation:slideup .35s cubic-bezier(.2,.8,.2,1);
  border-top:6px solid var(--tomato);
}
@keyframes slideup{
  from{transform:translateY(40px) scale(.96);opacity:0}
  to{transform:translateY(0) scale(1);opacity:1}
}
.modal-large{max-width:680px}
.modal-header{
  padding:24px 28px;
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:flex-start;
}
.modal-header h3{
  font-family:var(--font-display);
  font-size:28px;letter-spacing:1px;line-height:1;
  color:var(--char);
}
.modal-header .sub{
  font-family:var(--font-serif);font-style:italic;
  font-size:14px;color:var(--char-soft);
  margin-top:6px;
}
.modal-close{
  background:none;color:var(--char-mute);
  font-size:28px;line-height:1;padding:0 0 0 16px;
  flex-shrink:0;
}
.modal-close:hover{color:var(--tomato)}

.modal-body{
  padding:24px 28px;overflow-y:auto;flex:1;
}
.modal-section{margin-bottom:24px}
.modal-section:last-child{margin-bottom:0}
.modal-section h4{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:1.5px;
  color:var(--char);margin-bottom:12px;
}
.modal-section h4 .req{color:var(--tomato);font-size:11px;margin-left:6px}

.opt-group{display:flex;flex-direction:column;gap:8px}
.opt-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:var(--warm-white);
  border-radius:var(--rad-sm);
  border:2px solid transparent;
  cursor:pointer;
  transition:all .2s ease;
}
.opt-row:hover{border-color:var(--gold)}
.opt-row.selected{
  border-color:var(--tomato);
  background:rgba(200,16,46,.05);
}
.opt-row input[type="radio"],
.opt-row input[type="checkbox"]{
  accent-color:var(--tomato);
  width:18px;height:18px;flex-shrink:0;
}
.opt-row .label{
  flex:1;font-size:15px;font-weight:500;
}
.opt-row .label .meta{
  display:block;font-size:12px;color:var(--char-mute);
  font-weight:400;font-style:italic;margin-top:2px;
}
.opt-row .price{
  font-family:var(--font-display);
  color:var(--tomato);font-size:14px;
  letter-spacing:.5px;
}

.opt-toppings-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px;
}
.opt-toppings-grid .opt-row{padding:10px 12px}
.opt-toppings-grid .opt-row .label{font-size:13px}

.qty-stepper{
  display:flex;align-items:center;gap:10px;
}
.qty-stepper button{
  width:40px;height:40px;border-radius:50%;
  background:var(--warm-white);
  border:1px solid var(--line);
  font-family:var(--font-display);
  font-size:20px;color:var(--char);
  transition:all .2s ease;
}
.qty-stepper button:hover{
  background:var(--tomato);color:#fff;border-color:var(--tomato);
}
.qty-stepper .val{
  font-family:var(--font-display);font-size:22px;
  min-width:36px;text-align:center;letter-spacing:1px;
}

.modal-footer{
  padding:20px 28px;
  background:var(--paper);
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
  border-top:1px solid var(--line);
}
.modal-footer .total-display{
  font-family:var(--font-display);
  font-size:26px;letter-spacing:.8px;
  color:var(--char);
}
.modal-footer .total-display .lbl{
  font-family:var(--font-serif);font-style:italic;
  font-size:13px;color:var(--char-mute);
  letter-spacing:0;font-weight:400;display:block;
  margin-bottom:-2px;
}
.btn-add-cart{
  background:var(--tomato);color:#fff;
  padding:14px 28px;border-radius:var(--rad-pill);
  font-family:var(--font-display);
  font-size:14px;letter-spacing:1.5px;
  transition:all .25s ease;
}
.btn-add-cart:hover{
  background:var(--tomato-deep);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(200,16,46,.4);
}

/* Checkout form */
.form-row{margin-bottom:16px}
.form-row label{
  display:block;
  font-family:var(--font-display);
  font-size:12px;letter-spacing:1.5px;
  color:var(--char);margin-bottom:6px;
}
.form-row input,.form-row select,.form-row textarea{
  width:100%;
  padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:var(--rad-sm);
  background:var(--warm-white);
  font-size:15px;font-family:var(--font-body);
  transition:border-color .2s ease;
}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:none;border-color:var(--tomato);
}
.form-row textarea{resize:vertical;min-height:80px;font-family:var(--font-body)}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.success-state{
  padding:40px 28px;text-align:center;
}
.success-state .icon{
  font-size:64px;margin-bottom:20px;
  display:block;animation:bounce 1s ease;
}
@keyframes bounce{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
.success-state h3{
  font-family:var(--font-display);
  font-size:36px;letter-spacing:1px;
  margin-bottom:12px;
}
.success-state p{
  font-family:var(--font-serif);font-style:italic;
  font-size:18px;color:var(--char-soft);
  margin-bottom:8px;
}
.success-state .order-num{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:2px;
  color:var(--tomato);margin-top:16px;
  padding:10px 16px;background:var(--paper);
  display:inline-block;border-radius:var(--rad-sm);
  border:1px dashed var(--tomato);
}

/* Floating cart button (mobile) */
.cart-fab{
  display:none;
  position:fixed;bottom:24px;right:24px;
  background:var(--tomato);color:#fff;
  padding:16px 22px;border-radius:var(--rad-pill);
  font-family:var(--font-display);
  font-size:14px;letter-spacing:1.5px;
  z-index:100;box-shadow:0 12px 30px rgba(200,16,46,.45);
  align-items:center;gap:10px;
}
.cart-fab .count{
  background:#fff;color:var(--tomato);
  border-radius:50%;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:1000px){
  .order-layout{grid-template-columns:1fr}
  .cart{
    position:fixed;top:auto;left:0;right:0;bottom:0;
    border-radius:var(--rad-lg) var(--rad-lg) 0 0;
    transform:translateY(calc(100% - 60px));
    transition:transform .35s cubic-bezier(.2,.8,.2,1);
    max-height:80vh;z-index:90;
  }
  .cart.open{transform:translateY(0)}
  .cart-handle{
    display:flex;justify-content:center;
    padding:8px 0;cursor:pointer;
  }
  .cart-handle::before{
    content:'';width:40px;height:4px;
    background:rgba(253,246,227,.3);
    border-radius:2px;
  }
  .cart-fab{display:flex}
}

@media (max-width:900px){
  header{padding:14px 20px}
  header.scrolled{padding:10px 20px}
  nav ul{
    position:fixed;top:0;right:-100%;
    flex-direction:column;
    background:var(--cream);
    width:280px;height:100vh;
    padding:100px 32px 32px;
    gap:24px;
    box-shadow:-20px 0 40px rgba(26,26,26,.2);
    transition:right .4s cubic-bezier(.2,.8,.2,1);
    align-items:flex-start;
  }
  nav ul.open{right:0}
  nav a{font-size:18px}
  .menu-toggle{display:block}
  .btn-call-nav{display:none}

  section.block{padding:80px 20px}
  .story-grid{grid-template-columns:1fr;gap:48px}
  .story-visual{min-height:auto;order:-1}
  .heritage-badge{width:120px;height:120px;right:0%;top:0%}
  .visit-grid{grid-template-columns:1fr;gap:40px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1 / -1;flex-direction:column}

  .marquee-track span{font-size:24px;gap:24px}
  .hero{padding:100px 20px 60px}
  .hero-meta{gap:16px;font-size:13px}
  .order-cta{padding:72px 20px}
  .order-cta-buttons{flex-direction:column;align-items:stretch}
  .btn-cta-light,.btn-cta-dark{justify-content:center}

  .menu-section{padding:48px 20px}
  .menu-items{grid-template-columns:1fr;gap:24px}

  .order-hero{padding:64px 20px 24px}
  .order-layout{padding:24px 20px 100px}
  .order-cats{top:60px}
  .form-row-2{grid-template-columns:1fr}
}

@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr}
  .modal{max-width:96vw}
  .heritage-badge{display:none}
  .opt-toppings-grid{grid-template-columns:1fr 1fr}
  .modal-footer{flex-direction:column;align-items:stretch}
  .modal-footer .total-display{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .marquee-track{animation:none}
  .story-frame::before{animation:none}
  .reveal{opacity:1;transform:none}
}

/* ============= LUNCH SPECIAL STRIP ============= */
.lunch-strip{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  background:linear-gradient(135deg,#fdf6e3,#f5e9c8);
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);
  padding:16px 24px;text-align:center;
}
.lunch-strip .ls-tag{
  font-family:var(--font-display);background:var(--tomato);color:#fff;
  padding:6px 14px;border-radius:8px;font-size:15px;letter-spacing:1px;
  transform:rotate(-2deg);box-shadow:0 4px 10px rgba(200,16,46,.3);
}
.lunch-strip .ls-deal{font-family:var(--font-serif);font-weight:600;font-size:20px;color:var(--char);}
.lunch-strip .ls-deal strong{font-family:var(--font-display);color:var(--basil);font-size:26px;margin-left:4px;}
.lunch-strip .ls-fine{font-family:var(--font-body);font-weight:600;font-size:13.5px;color:var(--char-mute);}
@media(max-width:700px){.lunch-strip{gap:8px;flex-direction:column;}}

/* ============= MENU EXTRAS ============= */
.fav-tag{
  font-family:var(--font-script);font-weight:700;color:var(--basil);
  font-size:17px;white-space:nowrap;display:inline-block;transform:rotate(-2deg);margin-left:6px;
}
.size-split{color:var(--char-mute);font-weight:400;padding:0 2px;}
.menu-item-price .from{font-family:var(--font-body);font-size:12px;font-weight:600;color:var(--char-mute);display:block;line-height:1;margin-bottom:2px;text-transform:uppercase;letter-spacing:1px;}

/* ===== CONSUMER ADVISORY (health code) ===== */
.footer-advisory{max-width:1200px;margin:0 auto;padding:18px 32px 0;font-size:11px;line-height:1.5;color:rgba(253,246,227,.42);font-style:italic;text-align:center;letter-spacing:.2px;}