/* ---------- Self-hosted fonts (no external dependency) ---------- */
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/baloo-2-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/baloo-2-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/baloo-2-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Baloo 2";font-style:normal;font-weight:800;font-display:swap;src:url("../assets/fonts/baloo-2-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/anton-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:400;font-display:swap;src:url("../assets/fonts/sora-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:600;font-display:swap;src:url("../assets/fonts/sora-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-style:normal;font-weight:700;font-display:swap;src:url("../assets/fonts/sora-latin-700-normal.woff2") format("woff2")}

/* ============================================================
   ANTONIA'S PIZZA — Design System & Animations
   Inspired by award-winning pizzeria experiences (Pinza-style
   motion language: marquees, masked reveals, parallax, tilt)
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --cream:#f6eedd;
  --cream-2:#efe3c8;
  --char:#171210;
  --char-2:#221a15;
  --red:#c8361b;
  --red-dark:#9e2612;
  --green:#40632f;
  --gold:#e8a33d;
  --ink:#241a12;
  --white:#fffdf7;

  --font-display:"Anton", Impact, sans-serif;
  --font-body:"Sora", system-ui, -apple-system, sans-serif;

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --shadow-card:0 24px 60px -24px rgba(23,18,16,.45);

  --container:min(1240px, 92vw);
  --radius:26px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;border:none;background:none;cursor:pointer}
::selection{background:var(--red);color:var(--cream)}

.skip-link{
  position:absolute;left:-999px;top:8px;z-index:300;
  background:var(--red);color:var(--cream);padding:.6rem 1.2rem;border-radius:999px;
}
.skip-link:focus{left:8px}

/* Grain overlay */
body::after{
  content:"";position:fixed;inset:0;z-index:98;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
.display{
  font-family:var(--font-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.01em;
}
.h-xl{font-size:clamp(3rem, 8.5vw, 7.5rem)}
.h-lg{font-size:clamp(2.4rem, 6vw, 5rem)}
.h-md{font-size:clamp(1.8rem, 3.6vw, 3rem)}
.text-outline{
  color:transparent;
  -webkit-text-stroke:2px currentColor;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
}
.eyebrow::before{content:"";width:34px;height:2px;background:var(--red)}
.lead{font-size:clamp(1rem,1.4vw,1.2rem);opacity:.85;max-width:56ch}

/* ---------- Layout helpers ---------- */
.container{width:var(--container);margin-inline:auto}
.section{padding:clamp(4.5rem, 9vw, 8.5rem) 0;position:relative}
.section--dark{background:var(--char);color:var(--cream)}
.section--dark .text-outline{-webkit-text-stroke-color:rgba(246,238,221,.85)}
.section--red{background:var(--red);color:var(--cream)}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:clamp(2.5rem,5vw,4.5rem)}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--red);--btn-fg:var(--cream);
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1rem 1.9rem;border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .45s var(--ease-spring), background .3s, color .3s;
  will-change:transform;
}
.btn svg{width:18px;height:18px;transition:transform .4s var(--ease-out)}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn:hover svg{transform:translateX(5px) rotate(-45deg)}
.btn--ghost{--btn-bg:transparent;--btn-fg:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.btn--light{--btn-bg:var(--cream);--btn-fg:var(--ink)}
.btn--gold{--btn-bg:var(--gold);--btn-fg:var(--ink)}
.btn--sm{padding:.7rem 1.3rem;font-size:.8rem}

/* ---------- Preloader ---------- */
html:not(.js) .preloader{display:none}
.preloader{
  position:fixed;inset:0;z-index:200;
  background:var(--char);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  transition:transform .5s var(--ease-out);
  /* CSS-only fallback: never trap the user if JS fails */
  animation:plAutoDismiss .8s var(--ease-out) 4s forwards;
}
@keyframes plAutoDismiss{to{transform:translateY(-101%);visibility:hidden}}
.preloader.done{transform:translateY(-101%)}
.preloader img{width:96px;height:96px;object-fit:contain;animation:pulse 1.2s ease-in-out infinite}
.preloader .pl-word{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.06em;text-transform:uppercase;overflow:hidden}
.preloader .pl-word span{display:inline-block;animation:riseIn .8s var(--ease-out) both .15s}
.preloader .pl-count{font-size:.85rem;letter-spacing:.4em;opacity:.6}
.preloader .pl-bar{width:min(280px,60vw);height:2px;background:rgba(246,238,221,.15)}
.preloader .pl-bar i{display:block;height:100%;width:0;background:var(--red);transition:width .2s linear}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes riseIn{from{transform:translateY(115%)}to{transform:translateY(0)}}

/* ---------- Cursor (desktop) ---------- */
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:180;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cursor-dot{width:8px;height:8px;background:var(--red)}
.cursor-ring{width:38px;height:38px;border:1.5px solid rgba(200,54,27,.6);transition:width .25s,height .25s,background .25s}
.cursor-ring.grow{width:64px;height:64px;background:rgba(200,54,27,.12)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  transition:transform .5s var(--ease-out), background .35s, box-shadow .35s;
}
.site-header.scrolled{
  background:rgba(23,18,16,.92);color:var(--cream);
  backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.site-header.hidden{transform:translateY(-110%)}
.header-inner{
  width:var(--container);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;
}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase}
.brand img{width:52px;height:52px;object-fit:contain;border-radius:50%;background:var(--cream);padding:3px}
.site-header.scrolled .brand img{background:var(--cream)}
.nav-links{display:flex;gap:1.8rem;font-weight:600;font-size:.92rem}
.nav-links a{position:relative;padding:.3rem 0;opacity:.9}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.header-cta{display:flex;align-items:center;gap:.8rem}
.open-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.5rem 1rem;border-radius:999px;
  background:rgba(64,99,47,.15);color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;
}
.open-pill .dot{width:9px;height:9px;border-radius:50%;background:var(--green);animation:blink 1.6s infinite}
.open-pill.closed .dot{background:var(--red)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.nav-toggle{display:none;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 2px currentColor;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";position:absolute;left:13px;right:13px;height:2px;background:currentColor;transition:.35s var(--ease-out);
}
.nav-toggle span{top:50%}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}

@media (max-width:960px){
  .nav-links{
    position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:center;gap:2.2rem;
    background:var(--char);color:var(--cream);font-size:1.6rem;font-family:var(--font-display);text-transform:uppercase;
    clip-path:circle(0 at calc(100% - 46px) 46px);transition:clip-path .7s var(--ease-out);
  }
  body.nav-open .nav-links{clip-path:circle(150% at calc(100% - 46px) 46px)}
  .nav-toggle{display:block;z-index:5}
  .header-cta .btn{display:none}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--char);color:var(--cream);overflow:hidden;
  padding:clamp(7rem,12vh,10rem) 0 clamp(2.5rem,6vh,4.5rem);
}
.hero-bg{
  position:absolute;inset:0;
  background-image:url("../assets/img/pies-1.jpg");
  background-size:cover;background-position:center;
  opacity:.34;transform:scale(1.12);will-change:transform;
  animation:heroZoom 2.2s var(--ease-out) both;
}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,18,16,.75) 0%,rgba(23,18,16,.25) 45%,rgba(23,18,16,.92) 100%)}
@keyframes heroZoom{from{transform:scale(1.28)}to{transform:scale(1.12)}}
.hero-inner{position:relative;z-index:2;width:var(--container);margin-inline:auto}
.hero .eyebrow{color:var(--gold)}
.hero-title{margin:1.2rem 0 1.6rem}
.hero-title .line{display:block;overflow:hidden}
.hero-title .line > span{display:inline-block;transform:translateY(115%)}
/* Hold until the preloader is gone, then play. Without JS the html.js gate
   below never applies and the lines simply sit in place, readable. */
html.js .hero-title .line > span{animation:riseIn .9s var(--ease-out) forwards}
html.js .hero-title .line:nth-child(2) > span{animation-delay:.1s}
html.js .hero-title .line:nth-child(3) > span{animation-delay:.2s}
html:not(.js) .hero-title .line > span{transform:none}
.hero-sub{max-width:52ch;opacity:.85;margin-bottom:2.2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem;margin-top:2.6rem;font-size:.85rem;letter-spacing:.05em;opacity:.85}
.hero-meta strong{font-family:var(--font-display);font-size:1.5rem;display:block;letter-spacing:.03em;color:var(--gold)}
.hero-badge{
  position:absolute;right:clamp(1rem,6vw,7rem);top:clamp(6.5rem,14vh,9.5rem);z-index:3;
  width:clamp(110px,14vw,170px);aspect-ratio:1;display:grid;place-items:center;
  animation:spin 14s linear infinite;
}
.hero-badge svg{width:100%;height:100%}
.hero-badge .badge-center{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;animation:spin 14s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-hint{
  position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3;
  font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;opacity:.6;display:flex;flex-direction:column;align-items:center;gap:.5rem;
}
.scroll-hint::after{content:"";width:1px;height:44px;background:linear-gradient(var(--cream),transparent);animation:drip 1.8s var(--ease-out) infinite}
@keyframes drip{from{transform:scaleY(0);transform-origin:top}to{transform:scaleY(1);transform-origin:top}}

/* ---------- Marquee ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;padding:1.1rem 0;
  background:var(--red);color:var(--cream);
  transform:rotate(-1.2deg) scale(1.02);margin-block:-1.2rem;z-index:5;position:relative;
}
.marquee.alt{background:var(--gold);color:var(--ink);transform:rotate(1.2deg) scale(1.02)}
.marquee-track{display:inline-flex;gap:3rem;animation:marquee 26s linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2.1rem);text-transform:uppercase;letter-spacing:.05em;display:inline-flex;align-items:center;gap:3rem}
.marquee-track span::after{content:"\2022";font-size:1.2em}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Reveal on scroll ---------- */
html.js .reveal{opacity:0;transform:translateY(46px);transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);will-change:opacity,transform}
html.js .reveal.in{opacity:1;transform:none}
html.js .reveal.reveal-left{transform:translateX(-56px)}
html.js .reveal.reveal-right{transform:translateX(56px)}
html.js .reveal.reveal-zoom{transform:scale(.86)}
html.js .reveal.reveal-left.in,html.js .reveal.reveal-right.in,html.js .reveal.reveal-zoom.in{transform:none}
html.js .stagger > *{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out)}
html.js .stagger.in > *{opacity:1;transform:none}
html.js .stagger.in > *:nth-child(1){transition-delay:0.04s}
html.js .stagger.in > *:nth-child(2){transition-delay:0.1s}
html.js .stagger.in > *:nth-child(3){transition-delay:0.16s}
html.js .stagger.in > *:nth-child(4){transition-delay:0.22s}
html.js .stagger.in > *:nth-child(5){transition-delay:0.28s}
html.js .stagger.in > *:nth-child(6){transition-delay:0.34s}

/* ---------- Story / About ---------- */
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.story-media{position:relative}
.story-media .frame{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);transform:rotate(2.5deg);transition:transform .6s var(--ease-out)}
.story-media .frame:hover{transform:rotate(0deg) scale(1.02)}
.story-media .frame--back{
  position:absolute;inset:auto -8% -12% auto;width:56%;transform:rotate(-6deg);
  border:6px solid var(--cream);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);
}
.story-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2.6rem}
.stat{border-top:3px solid var(--red);padding-top:.9rem}
.stat b{font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.8rem);display:block;line-height:1}
.stat span{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
@media (max-width:900px){.story-grid{grid-template-columns:1fr}}

/* ---------- Signature dishes ---------- */
.dish-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
.dish-card{
  position:relative;border-radius:var(--radius);overflow:hidden;background:var(--char-2);color:var(--cream);
  aspect-ratio:3/3.6;display:flex;flex-direction:column;justify-content:flex-end;
  transform-style:preserve-3d;transition:transform .5s var(--ease-out);box-shadow:var(--shadow-card);
}
.dish-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.dish-card:hover img{transform:scale(1.09) rotate(1deg)}
.dish-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(23,18,16,.94) 100%)}
.dish-body{position:relative;z-index:2;padding:1.6rem;display:flex;flex-direction:column;gap:.5rem}
.dish-body .tag{font-size:.72rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.dish-body h3{font-family:var(--font-display);font-size:1.7rem;text-transform:uppercase;line-height:1}
.dish-body p{font-size:.92rem;opacity:.8}
.price-tag{
  position:absolute;top:1.2rem;right:1.2rem;z-index:2;
  background:var(--gold);color:var(--ink);font-family:var(--font-display);
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1rem;
  transform:rotate(8deg) scale(0);transition:transform .5s var(--ease-spring);
}
.dish-card:hover .price-tag{transform:rotate(8deg) scale(1)}
@media (max-width:980px){.dish-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.dish-grid{grid-template-columns:1fr}.dish-card{aspect-ratio:3/3}}

/* ---------- Ajarski feature ---------- */
.ajarski-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.ajarski-media{position:relative}
.ajarski-media .main{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card)}
.ajarski-media .main img{transition:transform 1s var(--ease-out)}
.ajarski-media:hover .main img{transform:scale(1.06)}
.float-chip{
  position:absolute;background:var(--cream);color:var(--ink);border-radius:999px;
  padding:.55rem 1.1rem;font-weight:700;font-size:.85rem;box-shadow:var(--shadow-card);
  animation:floaty 4.5s ease-in-out infinite;
}
.float-chip.b{animation-delay:1.2s;right:-4%;top:18%}
.float-chip.a{left:-5%;bottom:14%}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}
.version-list{display:grid;gap:.9rem;margin-top:2rem}
.version-list li{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-bottom:1px solid rgba(246,238,221,.18);padding-bottom:.9rem;
  font-family:var(--font-display);text-transform:uppercase;font-size:1.25rem;letter-spacing:.04em;
  transition:transform .35s var(--ease-out), color .3s;cursor:default;
}
.version-list li:hover{transform:translateX(1rem);color:var(--gold)}
.version-list li small{font-family:var(--font-body);font-size:.8rem;opacity:.65;letter-spacing:.12em;text-transform:none}
@media (max-width:900px){.ajarski-grid{grid-template-columns:1fr}}

/* ---------- Deals ---------- */
.deal-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.deal-card{
  background:var(--cream);color:var(--ink);border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);transform:rotate(-2deg);transition:transform .5s var(--ease-spring);
}
.deal-card:hover{transform:rotate(0) scale(1.03)}
.deal-card .deal-body{padding:1.6rem 1.8rem}
.deal-card .price{font-family:var(--font-display);font-size:2.6rem;color:var(--red)}
.deal-badge{
  display:inline-block;background:var(--ink);color:var(--gold);border-radius:999px;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:.45rem 1rem;margin-bottom:.8rem;
}
@media (max-width:900px){.deal-wrap{grid-template-columns:1fr}}

/* ---------- Gallery strip ---------- */
.gallery-track{display:flex;gap:1.2rem;animation:marquee 38s linear infinite;will-change:transform;width:max-content}
.gallery-track:hover{animation-play-state:paused}
.gallery-track figure{
  width:clamp(240px,26vw,340px);aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;flex-shrink:0;position:relative;
}
.gallery-track img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.gallery-track figure:hover img{transform:scale(1.1)}
.gallery-track figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1rem;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(transparent,rgba(23,18,16,.85));color:var(--cream);
}

/* ---------- Reviews ---------- */
.review-scroller{
  display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem 4px 2rem;
  scrollbar-width:none;
}
.review-scroller::-webkit-scrollbar{display:none}
.review-card{
  flex:0 0 min(420px,84vw);scroll-snap-align:start;
  background:var(--char-2);border-radius:var(--radius);padding:2rem;color:var(--cream);
  display:flex;flex-direction:column;gap:1.1rem;box-shadow:var(--shadow-card);
  transition:transform .45s var(--ease-out);
}
.review-card:hover{transform:translateY(-8px)}
.review-card .stars{color:var(--gold);letter-spacing:.2em}
.review-card blockquote{font-size:1.02rem;opacity:.9}
.review-card cite{font-style:normal;font-weight:700;color:var(--gold)}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.google-note{display:flex;align-items:center;gap:.6rem;font-size:.9rem;opacity:.75}
.google-note b{font-family:var(--font-display);font-size:1.4rem;color:var(--gold)}

/* ---------- Locations ---------- */
.loc-tabs{display:inline-flex;background:rgba(246,238,221,.08);border-radius:999px;padding:.4rem;gap:.4rem;margin-bottom:2.4rem}
.loc-tabs button{
  padding:.75rem 1.7rem;border-radius:999px;color:var(--cream);font-weight:700;font-size:.9rem;letter-spacing:.05em;
  transition:background .35s,color .35s;
}
.loc-tabs button.active{background:var(--red)}
.loc-panel{display:none;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.loc-panel.active{display:grid;animation:fadeUp .7s var(--ease-out)}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.loc-info h3{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.6rem);text-transform:uppercase}
.loc-rows{margin-top:1.4rem;display:grid;gap:1rem}
.loc-rows .row{display:flex;gap:1rem;align-items:baseline;border-bottom:1px solid rgba(246,238,221,.15);padding-bottom:.9rem}
.loc-rows .row b{min-width:92px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.loc-map{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:16/11}
.loc-map img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.loc-map:hover img{transform:scale(1.05)}
.hours-table{width:100%;font-size:.92rem;border-collapse:collapse;margin-top:.6rem}
.hours-table td{padding:.35rem 0;opacity:.85}
.hours-table td:last-child{text-align:right;font-weight:600;opacity:1}
@media (max-width:900px){.loc-panel{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto}
.faq-item{border-bottom:1px solid rgba(246,238,221,.16)}
.faq-item button{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1.5rem 0;text-align:left;color:inherit;
  font-family:var(--font-display);font-size:clamp(1.1rem,2vw,1.5rem);text-transform:uppercase;letter-spacing:.03em;
}
.faq-item .ico{
  flex-shrink:0;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--red);
  display:grid;place-items:center;transition:transform .4s var(--ease-spring),background .3s;
}
.faq-item .ico::before{content:"+";font-size:1.3rem;line-height:1}
.faq-item.open .ico{transform:rotate(225deg);background:var(--red)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .55s var(--ease-out)}
.faq-a p{padding:0 0 1.5rem;opacity:.8;max-width:64ch}

/* ---------- CTA band ---------- */
.cta-band{text-align:center}
.cta-band .display{margin-bottom:1.6rem}
.cta-band .btn{margin:.4rem}

/* ---------- Footer ---------- */
.site-footer{background:var(--char);color:var(--cream);padding:clamp(3.5rem,7vw,6rem) 0 2rem}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-grid h2{font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.footer-grid li{margin-bottom:.55rem;font-size:.95rem;opacity:.85}
.footer-grid a{display:inline-block;transition:color .25s,transform .3s var(--ease-out)}
.footer-grid a:hover{color:var(--gold);transform:translateX(.35rem)}
.footer-brand img{width:84px;height:84px;object-fit:contain;background:var(--cream);border-radius:50%;padding:5px;margin-bottom:1rem}
.footer-word{
  font-family:var(--font-display);text-transform:uppercase;text-align:center;line-height:.85;
  font-size:clamp(3.4rem,12.5vw,11rem);letter-spacing:.02em;margin:3rem 0 1.5rem;
  color:transparent;-webkit-text-stroke:1.5px rgba(246,238,221,.35);
  user-select:none;white-space:nowrap;overflow:hidden;
}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.8rem;opacity:.55;border-top:1px solid rgba(246,238,221,.12);padding-top:1.4rem}
@media (max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr}}

/* ---------- Sticky mobile order bar ---------- */
.sticky-order{
  position:fixed;left:50%;bottom:1rem;transform:translate(-50%,140%);z-index:110;
  display:flex;gap:.6rem;align-items:center;
  background:var(--char);color:var(--cream);border-radius:999px;padding:.5rem .5rem .5rem 1.2rem;
  box-shadow:0 18px 50px rgba(0,0,0,.4);transition:transform .55s var(--ease-spring);
}
.sticky-order.show{transform:translate(-50%,0)}
.sticky-order span{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-right:.4rem}

/* ---------- Menu page bits ---------- */
.menu-hero{padding-top:clamp(8rem,16vh,11rem)}
.menu-section{border-top:1px dashed rgba(36,26,18,.25);padding:2.6rem 0}
.menu-section .head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.6rem}
.menu-items{display:grid;grid-template-columns:1fr 1fr;gap:1rem 2.6rem}
.menu-item{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:.65rem 0;border-bottom:1px solid rgba(36,26,18,.09)}
.menu-item .mi-name{font-weight:700}
.menu-item .mi-desc{font-size:.85rem;opacity:.65;display:block}
.menu-item--feature{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:1.4rem;align-items:center;background:var(--char-2);color:var(--cream);border-radius:var(--radius);padding:1.2rem;margin-top:1rem}
.menu-item--feature img{border-radius:16px;aspect-ratio:1;object-fit:cover;width:100%}
@media (max-width:820px){.menu-items{grid-template-columns:1fr}}
@media (max-width:560px){
  .menu-item--feature{grid-template-columns:1fr;text-align:left}
  .menu-item--feature img{max-width:240px}
}
.deal-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem}
.deal-mini{background:var(--char);color:var(--cream);border-radius:var(--radius);padding:1.8rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .4s var(--ease-spring)}
.deal-mini:hover{transform:translateY(-6px) rotate(-1deg)}
.deal-mini .price{font-family:var(--font-display);font-size:2.2rem;color:var(--gold)}

/* ---------- Location sub-pages ---------- */
.loc-hero{padding:clamp(9rem,18vh,12rem) 0 clamp(3rem,7vw,5rem);background:var(--char);color:var(--cream);position:relative;overflow:hidden}
.loc-hero .hero-bg{opacity:.28}
.info-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem}
.info-card{background:var(--white);border-radius:var(--radius);padding:2rem;box-shadow:var(--shadow-card);transition:transform .4s var(--ease-out)}
.info-card:hover{transform:translateY(-6px)}
.info-card h3,.info-card h2{font-family:var(--font-display);text-transform:uppercase;font-size:1.25rem;margin-bottom:.7rem}
.info-card .big{font-family:var(--font-display);font-size:1.4rem;color:var(--red)}

/* ---------- Focus ---------- */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:3px solid var(--navy);
  outline-offset:3px;
  border-radius:6px;
}
.section--dark :where(a,button,[tabindex]):focus-visible,
.hero :where(a,button,[tabindex]):focus-visible{outline-color:var(--sun)}

/* ---------- Press states ----------
   28 hover states existed and not one press state, so a click landed with no
   acknowledgement. One shared rule, keyed off the same tokens as hover. */
.btn:active,.wheel-btn:active,.loc-tabs button:active,.nav-toggle:active{
  transform:translateY(1px) scale(.975) !important;
  transition-duration:.06s !important;
}
.dish-card:active,.deal-card:active,.deal-mini:active,.slice:active{
  transform:scale(.985);
  transition-duration:.08s;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001s !important;animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;transition-delay:0s !important;
  }
  html{scroll-behavior:auto !important}
  /* These must out-weigh `html.js .reveal` (0,2,1), so match it and use
     !important -- a bare `.reveal` (0,1,0) loses and the whole block no-ops. */
  html.js .reveal,html.js .reveal.in,
  html.js .stagger > *,html.js .stagger.in > *{
    opacity:1 !important;transform:none !important;filter:none !important;
  }
}

/* ============================================================
   PINZA-STYLE PIE WHEEL — rotating slice carousel
   (extracted & rebuilt from pinza.com's signature interaction)
   ============================================================ */
.wheel-section{background:var(--gold);color:var(--ink);overflow:hidden}
.wheel-section .eyebrow::before{background:var(--char)}
.wheel-head{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.wheel-head .lead{margin:1rem auto 0}
.craving-word{
  display:inline-block;color:var(--red);
  border-bottom:6px solid var(--char);
  transform:rotate(-2deg);
}
.craving-word.swap{animation:craveSwap .55s var(--ease-spring)}
@keyframes craveSwap{0%{transform:rotate(-2deg) translateY(20px) scale(.8);opacity:0}100%{transform:rotate(-2deg) translateY(0) scale(1);opacity:1}}

.pie-wheel{
  position:relative;
  width:min(540px, 88vw, 62vh);
  aspect-ratio:1;
  margin-inline:auto;
  touch-action:pan-y;
}
.pie-rotor{
  position:absolute;inset:0;border-radius:50%;
  background:var(--cream);
  box-shadow:0 40px 90px -30px rgba(23,18,16,.5), inset 0 0 0 10px var(--cream), inset 0 0 0 14px rgba(23,18,16,.08);
  transition:transform .9s var(--ease-out);
  will-change:transform;cursor:grab;
}
.pie-rotor:active{cursor:grabbing}
.slice{
  position:absolute;inset:0;
  clip-path:polygon(50% 50%, 30.46% 4.02%, 69.54% 4.02%);
  cursor:pointer;outline:none;
}
.slice img{
  width:100%;height:100%;object-fit:cover;
  filter:brightness(.68) saturate(.85);
  transform:rotate(var(--r,0deg)) scale(1.02);
  transition:filter .5s, transform .7s var(--ease-out);
}
.slice.active img{filter:brightness(1.02) saturate(1.05);transform:rotate(var(--r,0deg)) scale(1.09)}
.slice:focus-visible img{filter:brightness(.95)}
.slice .slice-label{
  position:absolute;left:50%;top:12%;transform:translateX(-50%);
  font-family:var(--font-display);font-size:.95rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--cream);text-shadow:0 2px 10px rgba(0,0,0,.7);opacity:0;transition:opacity .4s;
  pointer-events:none;white-space:nowrap;
}
.slice.active .slice-label{opacity:1}

.pie-center{
  position:absolute;left:50%;top:50%;z-index:5;
  transform:translate(-50%,-50%);
  width:44%;aspect-ratio:1;border-radius:50%;
  background:var(--cream);color:var(--ink);
  display:grid;place-items:center;text-align:center;
  box-shadow:0 24px 60px -18px rgba(23,18,16,.55), inset 0 0 0 6px var(--char);
  padding:1.2rem;
}
.pie-center .kicker{font-size:.68rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;opacity:.55}
.pie-center .dish-name{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.25rem, 4vw, 2rem);line-height:1.05;margin:.4rem 0 .8rem;
}
.pie-center .dish-name.swap{animation:nameSwap .6s var(--ease-out)}
@keyframes nameSwap{0%{opacity:0;transform:translateY(16px) rotate(1.5deg)}100%{opacity:1;transform:none}}

.wheel-nav{display:flex;justify-content:center;gap:.9rem;margin-top:2rem}
.wheel-btn{
  width:56px;height:56px;border-radius:50%;
  background:var(--char);color:var(--cream);
  display:grid;place-items:center;
  transition:transform .4s var(--ease-spring), background .3s;
}
.wheel-btn:hover{transform:scale(1.12) rotate(-6deg);background:var(--red)}
.wheel-btn svg{width:22px;height:22px}
.wheel-hint{
  text-align:center;margin-top:1.2rem;font-size:.78rem;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;opacity:.55;
}
@media (max-width:640px){
  .pie-center .kicker{display:none}
  .slice .slice-label{font-size:.7rem}
}

/* ---------- Local map fallback (no external tile dependency) ---------- */
.map-fallback{
  width:100%;aspect-ratio:16/7;display:grid;place-items:center;text-align:center;gap:.4rem;
  background:
    radial-gradient(circle at 30% 40%, rgba(232,163,61,.14) 0 22%, transparent 23%),
    radial-gradient(circle at 72% 65%, rgba(200,54,27,.12) 0 18%, transparent 19%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(246,238,221,.06) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(246,238,221,.06) 46px 47px),
    var(--char-2);
  color:var(--cream);
}
.map-fallback .pin svg{width:52px;height:52px;animation:floaty 3.5s ease-in-out infinite}
.map-fallback b{font-family:var(--font-display);text-transform:uppercase;font-size:1.15rem;letter-spacing:.04em;display:block}
.map-fallback small{opacity:.7;letter-spacing:.14em;text-transform:uppercase;font-size:.72rem}
.on-light .map-fallback{
  background:
    radial-gradient(circle at 30% 40%, rgba(232,163,61,.16) 0 22%, transparent 23%),
    radial-gradient(circle at 72% 65%, rgba(200,54,27,.12) 0 18%, transparent 19%),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(36,26,18,.05) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(36,26,18,.05) 46px 47px),
    var(--cream-2);
  color:var(--ink);
}

@media (min-width:960px){.sticky-order{display:none}}

/* ============================================================
   PINZA IDENTITY OVERRIDE — sky blue · sunshine yellow · navy
   rounded extra-bold type · joyful tilt · sticker badges
   ============================================================ */
:root{
  --sky:#bfe3f2;
  --sky-2:#d8eff9;
  --sun:#ffd23f;
  --sun-2:#ffde6b;
  --navy:#0e3a52;
  --navy-2:#0a2c3f;
  --paper:#fffdf7;
  --ink:var(--navy);
  --cream:var(--paper);
  --red:#c83b25;
  --font-display:"Baloo 2","Sora",system-ui,sans-serif;
  --font-body:"Baloo 2","Sora",system-ui,sans-serif;
  --shadow-card:0 18px 44px -18px rgba(14,58,82,.35);
  --radius:32px;
}
body{background:var(--sky);color:var(--navy)}
body::after{opacity:.03}
::selection{background:var(--sun);color:var(--navy)}

.display{line-height:.98;letter-spacing:0}
.h-xl{font-weight:800}
.h-lg{font-weight:800}
.h-md{font-weight:800}
.text-outline{-webkit-text-stroke-width:2.5px}
.eyebrow{color:var(--navy)}
.eyebrow::before{background:var(--sun);height:5px;border-radius:3px;width:40px}
.lead{opacity:.92}

/* buttons: sunshine pill + navy pill */
.btn{--btn-bg:var(--sun);--btn-fg:var(--navy);border-radius:999px;font-weight:700;letter-spacing:.02em;box-shadow:0 10px 0 -4px rgba(14,58,82,.18)}
.btn:hover{box-shadow:0 14px 0 -4px rgba(14,58,82,.22)}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--navy);box-shadow:inset 0 0 0 3px var(--navy)}
.btn--light{--btn-bg:var(--paper);--btn-fg:var(--navy)}
.btn--gold{--btn-bg:var(--sun);--btn-fg:var(--navy)}
.site-header.scrolled{background:rgba(255,253,247,.95);color:var(--navy);backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(14,58,82,.12)}
.brand{font-family:var(--font-display);font-weight:800}
.open-pill{background:rgba(255,253,247,.7)}
.nav-links a{opacity:.85}
.nav-links a::after{background:var(--sun);height:4px;border-radius:2px}

/* HERO — pinza style: sky bg, huge rounded statement, photo card right */
.hero{min-height:92svh;background:var(--sky);color:var(--navy);align-items:center;padding:clamp(8rem,16vh,11rem) 0 clamp(3rem,7vh,5rem)}
.hero-bg{display:none}
.hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-title{margin:1.4rem 0 1.8rem}
.hero-title .line>span{transform:translateY(115%)}
.hero-title .hl{position:relative;display:inline-block;color:var(--navy)}
.hero-title .hl::after{content:"";position:absolute;left:-2%;right:-2%;bottom:.04em;height:.32em;background:var(--sun);z-index:-1;border-radius:6px;transform:rotate(-1.2deg)}
.hero-sub{max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.25rem);margin-bottom:2.2rem}
.hero-actions .btn--ghost{box-shadow:inset 0 0 0 3px var(--navy)}
.hero-meta{gap:2rem}
.hero-meta strong{color:var(--red);font-size:1.7rem;font-weight:800}
.hero-photo{position:relative;justify-self:center}
.hero-photo .ph-main{
  width:min(560px,44vw);aspect-ratio:4/4.4;border-radius:calc(var(--radius) + 10px);overflow:hidden;
  box-shadow:var(--shadow-card);transform:rotate(2.5deg);
  border:10px solid var(--paper);
  transition:transform .6s var(--ease-out);
}
.hero-photo .ph-main img{width:100%;height:100%;object-fit:cover}
.hero-photo:hover .ph-main{transform:rotate(0deg) scale(1.02)}
.hero-photo .ph-back{
  position:absolute;left:-14%;bottom:-9%;width:46%;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;
  border:8px solid var(--paper);box-shadow:var(--shadow-card);transform:rotate(-7deg);
}
.hero-photo .ph-back img{width:100%;height:100%;object-fit:cover}
.sticker{
  position:absolute;z-index:6;background:var(--sun);color:var(--navy);
  font-weight:800;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.65rem 1.25rem;border-radius:999px;box-shadow:0 10px 24px rgba(14,58,82,.22);
  transform:rotate(-8deg);
}
.hero-photo .sticker{top:-1.2rem;right:-4%;animation:floaty 4.5s ease-in-out infinite}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-photo{margin-top:1rem}
  .hero-photo .ph-main{width:min(440px,86vw)}
}

/* order-now spinning badge button */
.order-badge{
  position:absolute;right:clamp(.5rem,3vw,3rem);top:clamp(5.5rem,12vh,8.5rem);z-index:7;
  width:clamp(120px,13vw,168px);aspect-ratio:1;display:grid;place-items:center;text-decoration:none;
}
.order-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 16s linear infinite}
.order-badge .ob-center{
  width:58%;aspect-ratio:1;border-radius:50%;background:var(--sun);display:grid;place-items:center;
  box-shadow:0 12px 30px rgba(14,58,82,.3);transition:transform .4s var(--ease-spring);
}
.order-badge:hover .ob-center{transform:scale(1.12) rotate(-8deg)}
.order-badge .ob-center svg{position:static;width:44%;height:44%;animation:none}

/* marquee: sunshine + navy */
.marquee{background:var(--sun);color:var(--navy);transform:rotate(-1.4deg) scale(1.03);padding:1.25rem 0}
.marquee.alt{background:var(--navy);color:var(--sun)}
.marquee-track span{font-weight:800}
.marquee-track span::after{content:"•";color:var(--red)}

/* sections recolor */
.section--dark{background:var(--navy);color:var(--paper)}
.section--dark .text-outline{-webkit-text-stroke-color:rgba(255,253,247,.9)}
.section--red{background:var(--sun);color:var(--navy)}
.section--red .eyebrow{color:var(--navy)}
.section--red .lead{opacity:.95}
.wheel-section{background:var(--sky)}
.on-light .map-fallback,.section:not(.section--dark) .map-fallback{color:var(--navy)}

/* wheel: paper rotor on sky, navy text */
.pie-rotor{background:var(--paper);box-shadow:0 34px 70px -28px rgba(14,58,82,.45), inset 0 0 0 10px var(--paper), inset 0 0 0 14px rgba(14,58,82,.08)}
.pie-center{background:var(--paper);color:var(--navy);box-shadow:0 22px 50px -18px rgba(14,58,82,.5), inset 0 0 0 6px var(--sun)}
.craving-word{color:var(--red);border-bottom:6px solid var(--sun);border-radius:4px}
.wheel-btn{background:var(--navy);color:var(--paper)}
.wheel-btn:hover{background:var(--red)}
.wheel-head .lead{margin-inline:auto}

/* feature (ajarski) on paper */
.feature-paper{background:var(--paper)}
.feature-paper .display .under-sun{position:relative;display:inline-block}
.feature-paper .display .under-sun::after{content:"";position:absolute;left:-1%;right:-1%;bottom:.03em;height:.3em;background:var(--sun);z-index:-1;border-radius:6px;transform:rotate(-1deg)}
.version-list li{border-bottom:1px solid rgba(14,58,82,.16)}
.version-list li:hover{color:var(--red);transform:translateX(1rem)}
.price-chip{display:inline-block;background:var(--sun);border-radius:999px;font-weight:800;padding:.15rem .8rem;color:var(--navy);font-size:.9rem}

/* deals on navy w/ yellow cards */
.deal-mini{background:var(--sun);color:var(--navy)}
.deal-mini .price{color:var(--red)}
.deal-card{background:var(--paper);color:var(--navy)}
.deal-badge{background:var(--red);color:var(--paper)}

/* gallery strip on navy */
.gallery-track figcaption{color:var(--paper)}

/* reviews: sky bg, paper cards */
.section--dark#reviews{background:var(--sky);color:var(--navy)}
.section--dark#reviews .text-outline{-webkit-text-stroke-color:var(--navy)}
.review-card{background:var(--paper);color:var(--navy)}
.review-card cite{color:var(--red)}
.google-note b{color:var(--red)}
.section--dark#reviews .google-note{opacity:.8}

/* locations: paper bg */
.section--dark#locations{background:var(--paper);color:var(--navy)}
.section--dark#locations .text-outline{-webkit-text-stroke-color:var(--navy)}
.loc-tabs{background:rgba(14,58,82,.08)}
.loc-tabs button{color:var(--navy)}
.loc-rows .row{border-bottom:1px solid rgba(14,58,82,.14)}
.loc-rows .row b{color:var(--red)}

/* FAQ on paper */
.section--dark:not(#reviews):not(#locations){background:var(--paper);color:var(--navy)}
.section--dark:not(#reviews):not(#locations) .text-outline{-webkit-text-stroke-color:var(--navy)}
.faq-item{border-bottom:1px solid rgba(14,58,82,.15)}
.faq-item .ico{box-shadow:inset 0 0 0 2.5px var(--sun)}

/* CTA band navy */
.cta-band{background:var(--navy);color:var(--paper)}
.cta-band .lead{opacity:.85}

/* footer */
.site-footer{background:var(--navy-2)}
.footer-word{-webkit-text-stroke-color:rgba(255,210,63,.4)}
.footer-grid h2{color:var(--sun)}
.footer-grid a:hover{color:var(--sun)}

/* dish cards (used on SLO/Paso pages): sticker style */
.dish-card{background:var(--navy);color:var(--paper);border-radius:var(--radius)}
.price-tag{background:var(--sun);color:var(--navy)}
.menu-item--feature{background:var(--navy);color:var(--paper)}
.deal-strip .deal-mini{box-shadow:var(--shadow-card)}
.info-card{border-radius:var(--radius)}
.info-card .big{color:var(--red)}

/* sticky bar */
.sticky-order{background:var(--navy);color:var(--paper)}

/* preloader: navy + sun */
.preloader{background:var(--navy-2);color:var(--paper)}
.preloader .pl-bar i{background:var(--sun)}

/* cursor */
.cursor-dot{background:var(--red)}
.cursor-ring{border-color:rgba(226,73,47,.55)}
.cursor-ring.grow{background:rgba(255,210,63,.25)}

/* ---------- sub-page heroes: pinza light style ---------- */
.loc-hero{background:var(--sky);color:var(--navy)}
.loc-hero .hero-bg{display:none}
.loc-hero .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.loc-hero .hero-photo{position:relative;justify-self:center}
.loc-hero .hero-photo .ph-main{width:min(520px,42vw);aspect-ratio:4/3.4;border-radius:calc(var(--radius) + 8px);overflow:hidden;border:10px solid var(--paper);box-shadow:var(--shadow-card);transform:rotate(2deg);transition:transform .6s var(--ease-out)}
.loc-hero .hero-photo .ph-main:hover{transform:rotate(0) scale(1.02)}
.loc-hero .hero-photo .ph-main img{width:100%;height:100%;object-fit:cover}
.loc-hero .sticker{top:-1rem;right:-3%}
.loc-hero .lead{max-width:46ch}
@media (max-width:900px){.loc-hero .container{grid-template-columns:1fr}.loc-hero .hero-photo .ph-main{width:min(440px,86vw)}}

/* ---------- real logo badge ---------- */
.logo-badge{width:56px;height:56px;object-fit:contain;border-radius:50%;flex-shrink:0}
.preloader .logo-badge{width:110px;height:110px;animation:pulse 1.2s ease-in-out infinite}
.footer-brand .logo-badge{width:92px;height:92px}

/* ---------- wheel stage + vertical side name (pinza extract) ---------- */
.wheel-stage{position:relative;width:fit-content;margin-inline:auto}
.wheel-side-name{position:absolute;top:50%;right:clamp(-5.5rem,-8vw,-3.2rem);transform:translateY(-50%);pointer-events:none;z-index:1}
.wheel-side-name span{
  display:block;writing-mode:vertical-rl;
  font-family:var(--font-display);font-weight:800;text-transform:uppercase;
  font-size:clamp(1.5rem,3vw,2.6rem);letter-spacing:.06em;color:var(--navy);opacity:.9;white-space:nowrap;
}
.pie-shade{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:2;
  background:radial-gradient(circle at 50% 50%, rgba(14,58,82,.17) 24%, rgba(14,58,82,.06) 40%, transparent 47%);
}
.slice{filter:drop-shadow(0 14px 20px rgba(14,58,82,.28))}
@media (max-width:900px){.wheel-side-name{display:none}}

/* ---------- navy marquee variant ---------- */
.marquee--navy{background:var(--navy);color:var(--paper);transform:rotate(1.2deg) scale(1.03)}
.marquee--navy .marquee-track span::after{color:var(--sun)}

/* ---------- fresh steps (pinza extract) ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.step{position:relative;background:var(--paper);border-radius:var(--radius);padding:1.1rem 1.1rem 1.4rem;box-shadow:var(--shadow-card);transition:transform .45s var(--ease-spring)}
.step:hover{transform:translateY(-8px) rotate(-1deg)}
.step-img{border-radius:calc(var(--radius) - 12px);overflow:hidden;aspect-ratio:1;margin-bottom:1rem}
.step-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.step:hover .step-img img{transform:scale(1.08)}
.step-num{
  position:absolute;top:-14px;left:-8px;width:52px;height:52px;border-radius:50%;
  background:var(--sun);color:var(--navy);display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  box-shadow:0 8px 20px rgba(14,58,82,.25);transform:rotate(-8deg);
}
.step h3{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:1.15rem}
.step p{font-size:.9rem;opacity:.8}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* ============================================================
   MAGIC UI PORT — signature effects, vanilla rebuild
   shimmer-btn · border-beam · meteors · orbiting-circles
   blur-fade · dot/grid-pattern · word-rotate · spotlight
   ============================================================ */

/* ---- Shimmer Button ---- */
.btn{position:relative;overflow:hidden}
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);
  transform:translateX(-130%);animation:muShimmer 3.6s ease-in-out infinite;
}
@keyframes muShimmer{55%,100%{transform:translateX(130%)}}

/* ---- Border Beam (conic light running around the border) ---- */
@property --bb-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.bb{position:relative}
.bb::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;pointer-events:none;
  background:conic-gradient(from var(--bb-a),transparent 0turn .9turn,var(--sun) .965turn,transparent 1turn);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:bbSpin 4.5s linear infinite;
}
@keyframes bbSpin{to{--bb-a:360deg}}

/* ---- Meteors (shooting stars, for navy bands) ---- */
.meteors{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.meteor{
  position:absolute;top:0;width:2px;height:2px;border-radius:50%;
  background:rgba(255,253,247,.9);box-shadow:0 0 8px 2px rgba(255,210,63,.55);
}
.meteor::before{
  content:"";position:absolute;top:50%;left:0;transform:translateY(-50%);
  width:90px;height:1.5px;background:linear-gradient(90deg,rgba(255,210,63,.85),transparent);
}
.meteor{transform:rotate(215deg)}
@keyframes muMeteor{
  0%{transform:rotate(215deg) translateX(0);opacity:0}
  8%{opacity:1}
  72%{opacity:1}
  100%{transform:rotate(215deg) translateX(-520px);opacity:0}
}
.meteor.m1{left:12%;animation:muMeteor 4.6s linear infinite;animation-delay:.2s}
.meteor.m2{left:32%;animation:muMeteor 5.8s linear infinite;animation-delay:1.6s}
.meteor.m3{left:55%;animation:muMeteor 4.2s linear infinite;animation-delay:3s}
.meteor.m4{left:72%;animation:muMeteor 6.4s linear infinite;animation-delay:.9s}
.meteor.m5{left:88%;animation:muMeteor 5s linear infinite;animation-delay:2.2s}

/* ---- Orbiting circles (around the ORDER NOW badge) ---- */
.order-badge .orbit{position:absolute;inset:-4px;animation:spin 12s linear infinite;pointer-events:none}
.order-badge .orbit--rev{animation:spin 19s linear infinite reverse}
.order-badge .sat{
  position:absolute;top:-6px;left:calc(50% - 5.5px);width:11px;height:11px;border-radius:50%;
  background:var(--navy);box-shadow:0 0 0 2.5px var(--sun);
}
.order-badge .sat--sun{background:var(--sun);box-shadow:0 0 0 2.5px var(--navy)}

/* ---- Blur-fade reveals (upgrade) ---- */
html.js .reveal{filter:blur(10px)}
html.js .reveal.in{filter:blur(0)}
html.js .stagger>*{filter:blur(8px)}
html.js .stagger.in>*{filter:blur(0)}
/* reduced-motion neutralisation lives in the single block above */

/* ---- Dot pattern (sky sections) + grid pattern (navy band) ---- */
.hero,.wheel-section,.loc-hero,.feature-paper{
  background-image:radial-gradient(rgba(14,58,82,.12) 1.5px,transparent 1.6px);
  background-size:24px 24px;
}
.cta-band{
  background-image:
    linear-gradient(rgba(255,253,247,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,253,247,.05) 1px,transparent 1px);
  background-size:34px 34px;
}
.cta-band .container{position:relative;z-index:1}

/* ---- Word rotate (vertical flip words) ---- */
.word-rotate{display:inline-block;position:relative;height:1.12em;overflow:hidden;vertical-align:bottom;color:var(--sun)}
.wr-track{display:flex;flex-direction:column;animation:wrUp 9s cubic-bezier(.76,0,.24,1) infinite}
.wr-track span{height:1.12em;line-height:1.12em;white-space:nowrap}
@keyframes wrUp{
  0%,17%{transform:translateY(0)}
  24%,41%{transform:translateY(-1.12em)}
  48%,65%{transform:translateY(-2.24em)}
  72%,89%{transform:translateY(-3.36em)}
  100%{transform:translateY(-4.48em)}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Spotlight hover (mouse-follow glow on cards) ---- */
.spot{position:relative}
.spot::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(255,210,63,.2),transparent 62%);
  opacity:0;transition:opacity .35s;
}
.spot:hover::before{opacity:1}

/* ---- Shiny text (craving word) ---- */
.craving-word{
  color:transparent;
  background:linear-gradient(110deg,#e2492f 42%,#ff9d6b 50%,#e2492f 58%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  animation:shinyText 3.2s linear infinite;
}
@keyframes shinyText{to{background-position:-250% 0}}

/* ============================================================
   SCROLL CHOREOGRAPHY
   Native scroll-driven animations: these run on the compositor,
   off the main thread, so they stay smooth while the page scrolls.
   Everything here is additive and wrapped in @supports -- browsers
   without animation-timeline simply get the static layout, and the
   existing IntersectionObserver reveals still carry the page.
   ============================================================ */

:root{
  /* one duration + easing scale the whole site can agree on */
  --dur-1:.18s; --dur-2:.34s; --dur-3:.6s; --dur-4:.9s;
  --ease-soft:cubic-bezier(.22,1,.36,1);
  --ease-snap:cubic-bezier(.34,1.56,.64,1);
}

/* --- reading-progress rail, driven by document scroll --- */
.scroll-rail{
  position:fixed;inset:0 0 auto 0;height:4px;z-index:120;
  background:transparent;pointer-events:none;
}
.scroll-rail i{
  display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--sun),var(--red));
}

@supports (animation-timeline: scroll()){
  .scroll-rail i{
    animation:railGrow linear both;
    animation-timeline:scroll(root block);
  }
}
@keyframes railGrow{ to{ transform:scaleX(1) } }

@supports (animation-timeline: view()){
  /* Photos drift against the scroll. Small numbers on purpose: parallax that
     you consciously notice reads as a gimmick, parallax you feel reads as depth. */
  .story-media .frame img,
  .ajarski-media .main img,
  .feature-paper .frame img{
    animation:driftUp linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
    will-change:transform;
  }
  @keyframes driftUp{
    from{ transform:translateY(5%)  scale(1.09) }
    to  { transform:translateY(-5%) scale(1.09) }
  }

  /* Section headlines lift and settle as they arrive, then hold. */
  .section-head h2,.wheel-head h2{
    animation:headRise var(--ease-soft) both;
    animation-timeline:view();
    animation-range:entry 10% entry 75%;
  }
  @keyframes headRise{
    from{ opacity:0; transform:translateY(34px) }
    to  { opacity:1; transform:none }
  }

  /* Cards scale up out of the fold rather than hard-popping. */
  .dish-card,.deal-card,.info-card,.review-card{
    animation:cardIn var(--ease-snap) both;
    animation-timeline:view();
    animation-range:entry 0% entry 55%;
  }
  /* scale .92 + 16px rise with a slight overshoot on settle */
  @keyframes cardIn{
    from{ opacity:0; transform:translateY(16px) scale(.92) }
    to  { opacity:1; transform:none }
  }

  /* The marquee bands counter-rotate slightly through the viewport, which
     makes the flat colour blocks feel like they are sliding past each other. */
  .marquee{
    animation:bandTilt linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
  }
  @keyframes bandTilt{
    from{ transform:rotate(-1.6deg) }
    to  { transform:rotate(1.6deg) }
  }
  .marquee.alt{ animation-name:bandTiltAlt }
  @keyframes bandTiltAlt{
    from{ transform:rotate(1.8deg) scale(1.02) }
    to  { transform:rotate(-1.8deg) scale(1.02) }
  }

  /* The hero recedes as you leave it, so the next section feels layered over it. */
  .hero-media{
    animation:heroSettle linear both;
    animation-timeline:view();
    animation-range:exit 0% exit 100%;
  }
  @keyframes heroSettle{
    from{ opacity:1; transform:none }
    to  { opacity:.55; transform:translateY(-7%) scale(.94) }
  }
}

/* Scroll choreography is decoration. Under reduced motion none of it runs and
   every element sits at its resting state. */
@media (prefers-reduced-motion:reduce){
  .scroll-rail{display:none}
  .story-media .frame img,.ajarski-media .main img,.feature-paper .frame img,
  .section-head h2,.wheel-head h2,
  .dish-card,.deal-card,.info-card,.review-card,
  .marquee,.marquee.alt,.hero-media{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* ============================================================
   MENU PAGE — category rail + list choreography
   No prices anywhere by design; the rail and the stagger are what
   make a long list scannable instead of a wall of text.
   ============================================================ */

/* --- sticky category rail --- */
.menu-rail{
  position:sticky;top:var(--header-h,76px);z-index:40;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(10px);
  border-block:1px solid rgba(14,58,82,.12);
}
.menu-rail-inner{
  display:flex;gap:.5rem;overflow-x:auto;padding:.6rem 0;
  scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.menu-rail-inner::-webkit-scrollbar{display:none}
.menu-chip{
  flex:0 0 auto;scroll-snap-align:start;
  /* 44px min target: the guideline is 44x44, and these sit close together */
  min-height:44px;display:inline-flex;align-items:center;
  padding:.5rem 1.05rem;border-radius:999px;
  font-family:var(--font-display);font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em;
  color:var(--navy);background:transparent;
  border:2px solid rgba(14,58,82,.18);
  transition:background var(--dur-1) var(--ease-soft),
             color var(--dur-1) var(--ease-soft),
             border-color var(--dur-1) var(--ease-soft);
}
.menu-chip:hover{border-color:var(--navy)}
.menu-chip:active{transform:translateY(1px) scale(.97);transition-duration:.06s}
.menu-chip[aria-current="true"]{
  background:var(--navy);color:var(--paper);border-color:var(--navy);
}

/* A sticky rail plus the fixed header must not land on top of the heading
   you just jumped to. */
.menu-section,#deals{scroll-margin-top:calc(var(--header-h,76px) + 72px)}

/* --- staggered item reveal ---
   0.03s per item, 300ms each: the guidance is 0.02-0.04s for lists past ten
   items, and never beyond 0.1s or the tail of the list feels sluggish. */
html.js .menu-items .menu-item{opacity:0;transform:translateY(10px)}
html.js .menu-section.in .menu-items .menu-item{
  animation:miIn .3s cubic-bezier(.33,1,.68,1) forwards;
  animation-delay:calc(var(--i,0) * .03s);
}
@keyframes miIn{ to{ opacity:1; transform:none } }

.menu-item{
  transition:background var(--dur-1) var(--ease-soft),
             transform var(--dur-1) var(--ease-soft);
  border-radius:8px;
}
.menu-item:hover{background:rgba(14,58,82,.05);transform:translateX(4px)}
.menu-item .mi-desc{max-width:60ch}   /* keep descriptions inside a readable measure */

@media (prefers-reduced-motion:reduce){
  html.js .menu-items .menu-item{opacity:1 !important;transform:none !important;animation:none !important}
  .menu-chip,.menu-item{transition:none}
}

/* ============================================================
   SPIN-TO-DECIDE WHEELS
   Two eight-segment wheels. The pizza picker is built from real photos:
   each wedge is a slice cut from a whole top-down pie, and a pizza cutter
   rolls over the slices as they pass. The prize wheel is game-show
   hardware: a bulb rim that chases while it spins and flashes on a win,
   and a flapper that clicks on every segment. Nothing here moves on its
   own; every motion answers someone pressing Spin.
   ============================================================ */

.spin-section{background:var(--sky-2)}
.spin-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(1.6rem,4vw,3rem);margin-top:clamp(2rem,5vw,3.4rem);
}
.spin-card{
  background:var(--paper);border-radius:var(--radius);
  padding:clamp(1.6rem,3.4vw,2.4rem) clamp(1.2rem,3vw,2.2rem);box-shadow:var(--shadow-card);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.spin-title{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.1rem);letter-spacing:.01em;color:var(--navy);
}
.spin-sub{opacity:.72;margin:.35rem 0 2.2rem;max-width:34ch}

/* --- shared disc geometry --- */
.spin-wheel{
  --size:min(360px,70vw);
  --seg:45deg;
  position:relative;width:var(--size);height:var(--size);
  display:grid;place-items:center;
}
.spin-wheel--pies{margin-top:calc(var(--size) * .16)}
.spin-wheel--prize{margin-top:calc(var(--size) * .12)}
.sw-disc{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:var(--navy);
  transform:rotate(0deg);
  transition:transform 4.8s cubic-bezier(.12,.72,.12,1);
  will-change:transform;
  box-shadow:0 0 0 6px var(--paper), 0 0 0 11px var(--navy), 0 28px 54px -20px rgba(14,58,82,.6);
}

/* --- pizza picker: photo wedges --- */
.sw-seg{position:absolute;inset:0;pointer-events:none}
.sw-seg img{width:100%;height:100%;object-fit:cover;display:block}
/* cut lines between the slices, drawn over the photos, kept clear of the hub */
.spin-wheel--pies .sw-disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from -.45deg, rgba(255,253,247,.92) 0 .9deg, transparent .9deg 45deg);
  -webkit-mask:radial-gradient(circle, transparent 0 16%, #000 16.5%);
          mask:radial-gradient(circle, transparent 0 16%, #000 16.5%);
}

/* --- prize wheel: painted segments inside a bulb rim --- */
.spin-wheel--prize .sw-disc{
  background:conic-gradient(
    var(--red) 0 45deg, var(--navy) 45deg 90deg, var(--sun) 90deg 135deg, var(--navy) 135deg 180deg,
    var(--red) 180deg 225deg, var(--navy) 225deg 270deg, var(--sun) 270deg 315deg, var(--navy) 315deg 360deg);
  box-shadow:0 0 0 5px var(--paper);
}
.spin-wheel--prize .sw-disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 28%, rgba(255,255,255,.22), transparent 60%);
}
.sw-rim{
  position:absolute;inset:calc(var(--size) * -.075);border-radius:50%;
  background:var(--navy);
  box-shadow:inset 0 0 0 3px rgba(255,210,63,.35), 0 30px 60px -22px rgba(14,58,82,.65);
}
.sw-bulb{
  position:absolute;left:50%;top:50%;
  width:clamp(7px,2vw,10px);aspect-ratio:1;border-radius:50%;
  background:#fff6d1;box-shadow:0 0 6px 2px rgba(255,210,63,.75);
  transform:translate(-50%,-50%) rotate(calc(var(--b) * 15deg)) translateY(calc(var(--size) * -.537));
}
.sw-bulb:nth-child(even){opacity:.5}
.spin-wheel.is-spinning .sw-bulb{animation:swChase .72s linear infinite;animation-delay:calc(var(--b) * -.03s)}
@keyframes swChase{0%,100%{opacity:1}45%{opacity:.18}}
.spin-wheel.is-win .sw-bulb{animation:swFlash .3s steps(1,end) 7}
@keyframes swFlash{50%{opacity:.12}}
.spin-wheel.is-miss .sw-bulb{opacity:.28;transition:opacity .5s}

/* --- labels: orbit to the segment centre, then un-rotate so they read level --- */
.sw-label{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%)
            rotate(calc(var(--s) * var(--seg) + (var(--seg) / 2)))
            translateY(calc(var(--size) * -0.335))
            rotate(calc((var(--s) * var(--seg) + (var(--seg) / 2)) * -1));
  width:calc(var(--size) * 0.26);
  font-family:var(--font-display);font-size:clamp(.6rem,1.5vw,.8rem);
  line-height:1.12;text-transform:uppercase;letter-spacing:.02em;
  text-align:center;pointer-events:none;
  color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.55);
}
.sw-label:nth-child(odd){color:var(--navy);text-shadow:none}
/* red segments 1 and 5: navy ink is 2.99:1 there and fails AA; paper is 3.95:1 */
.spin-wheel--prize .sw-label:nth-child(1),
.spin-wheel--prize .sw-label:nth-child(5){color:var(--paper);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.sw-label--big{
  font-family:"Anton",var(--font-display);
  font-size:clamp(.92rem,2.3vw,1.22rem);letter-spacing:.015em;line-height:1;
}
/* photo labels sit on a navy chip so they read on any topping */
.spin-wheel--pies .sw-disc .sw-label{
  width:auto;max-width:calc(var(--size) * .3);white-space:nowrap;
  padding:.28em .62em;border-radius:999px;
  background:rgba(14,58,82,.86);color:var(--paper);text-shadow:none;
  font-size:clamp(.56rem,1.3vw,.72rem);
  transform:translate(-50%,-50%)
            rotate(calc(var(--s) * var(--seg) + (var(--seg) / 2)))
            translateY(calc(var(--size) * -0.36))
            rotate(calc((var(--s) * var(--seg) + (var(--seg) / 2)) * -1));
}

/* --- pointers: a rolling pizza cutter, a clicking flapper --- */
.sw-pointer{position:absolute;left:50%;top:0;z-index:4;pointer-events:none;transform:translateX(-50%)}
.sw-pointer svg{display:block;width:100%;height:auto;overflow:visible}
.spin-wheel--pies .sw-pointer{width:calc(var(--size) * .15);top:calc(var(--size) * -.2);
  filter:drop-shadow(0 4px 6px rgba(14,58,82,.35))}
.spin-wheel--prize .sw-pointer{width:calc(var(--size) * .1);top:calc(var(--size) * -.11);
  filter:drop-shadow(0 3px 5px rgba(14,58,82,.45))}
.sw-blade{transform-box:fill-box;transform-origin:center;transition:transform .14s var(--ease-soft)}
.sw-flap{transform-box:view-box;transform-origin:50% 30%}

/* --- hub --- */
.sw-hub{
  position:relative;z-index:3;
  width:calc(var(--size) * 0.30);aspect-ratio:1;border-radius:50%;
  background:var(--paper);color:var(--navy);
  border:4px solid var(--navy);
  font-family:var(--font-display);font-size:clamp(.85rem,2vw,1.05rem);
  text-transform:uppercase;letter-spacing:.06em;cursor:pointer;
  box-shadow:0 8px 18px -8px rgba(14,58,82,.5);
  transition:transform var(--dur-1) var(--ease-snap), background var(--dur-1);
}
.sw-hub:hover:not(:disabled){background:var(--sun)}
.sw-hub:active:not(:disabled){transform:scale(.93)}
.sw-hub:disabled{
  /* not opacity: a translucent hub shows the segments through it and reads as a bug */
  cursor:default;background:var(--sky-2);color:var(--navy);border-color:var(--navy);box-shadow:none;
}

/* --- win celebration (big prizes only) --- */
.sw-confetti{position:absolute;inset:0;pointer-events:none;z-index:6}
.sw-confetti i{
  position:absolute;left:50%;top:50%;width:9px;height:14px;border-radius:2px;background:var(--c);
  transform:translate(-50%,-50%);opacity:0;
  animation:swConfetti 1.25s cubic-bezier(.16,.8,.3,1) forwards;animation-delay:var(--d);
}
@keyframes swConfetti{
  0%{opacity:1;transform:translate(-50%,-50%) rotate(0deg)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r))}
}

/* --- result --- */
.sw-result{
  margin-top:1.5rem;min-height:5.5rem;width:100%;
  display:flex;align-items:center;justify-content:center;
}
.sw-result:empty{min-height:0}
.sw-card{
  display:flex;align-items:center;gap:.9rem;text-align:left;
  background:var(--navy);color:var(--paper);
  border-radius:20px;padding:.7rem .95rem;width:100%;max-width:360px;
  animation:swPop .42s var(--ease-snap) both;
}
.sw-card img{width:62px;height:62px;border-radius:14px;object-fit:cover;flex:0 0 auto}
.sw-card .sw-k{font-family:var(--font-display);text-transform:uppercase;font-size:1.02rem;line-height:1.15}
.sw-card .sw-n{font-size:.82rem;opacity:.78;margin-top:.15rem}
.sw-card .btn{margin-left:auto;flex:0 0 auto}
.sw-card--miss{background:var(--sky);color:var(--navy)}
.sw-card--big{background:var(--sun);color:var(--navy)}
@keyframes swPop{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}

.sw-fineprint{font-size:.72rem;opacity:.6;margin-top:.9rem;max-width:40ch}

@media (prefers-reduced-motion:reduce){
  .sw-disc,.sw-blade{transition:none !important}
  .sw-card,.sw-bulb,.sw-confetti i{animation:none !important}
  .sw-confetti{display:none}
}

/* ============================================================
   HERO OVERTURE
   One sequence, not six independent effects. Everything waits for
   the first paint and then arrives in reading
   order: eyebrow, headline, sub, buttons, stats, photo. The photo
   comes last on purpose -- the words are the promise, the picture
   is the proof.
   ============================================================ */

html.js .hero .eyebrow,
html.js .hero-sub,
html.js .hero-actions,
html.js .hero-meta,
html.js .hero-photo{ opacity:0 }

html.js .hero .eyebrow,
html.js .hero-sub,
html.js .hero-actions,
html.js .hero-meta,
html.js .hero-photo{
  animation:heroIn .62s var(--ease-soft) both;
}
/* The headline owns 0-0.5s; everything else falls in behind it. */
html.js .hero .eyebrow { animation-delay:.04s }
html.js .hero-sub      { animation-delay:.46s }
html.js .hero-actions  { animation-delay:.56s }
html.js .hero-meta     { animation-delay:.66s }
html.js .hero-photo    { animation-delay:.30s; animation-duration:.85s }

@keyframes heroIn{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
/* The photo arrives with a touch more travel and a slight settle. */
html.js .hero-photo{ animation-name:heroPhotoIn }
@keyframes heroPhotoIn{
  from{ opacity:0; transform:translateY(34px) scale(.94) }
  to  { opacity:1; transform:none }
}

/* ---- Shine sweep on the primary call to action ----
   Fires on hover and once, unprompted, when the hero settles, so the
   button announces itself without the visitor having to find it. */
.btn{position:relative;overflow:hidden}
.btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform:translateX(-120%);
}
.btn:hover::after{ animation:btnShine .75s var(--ease-soft) }
html.js .hero-actions .btn:first-child::after{
  animation:btnShine .9s var(--ease-soft) 1.35s;
}
@keyframes btnShine{ to{ transform:translateX(120%) } }

@media (prefers-reduced-motion:reduce){
  html.js .hero .eyebrow,html.js .hero-sub,html.js .hero-actions,
  html.js .hero-meta,html.js .hero-photo,
  html.js .hero-title .line > span{
    opacity:1 !important;transform:none !important;animation:none !important;
  }
  .btn::after{display:none}
}

/* ============================================================
   SIZE COMPARER — 10" to 28"
   The 28-incher is the thing people repeat to their friends, and a
   number on a menu does not convey it. A dinner plate sits beside the
   pie at true relative scale so the jump is felt, not read.
   ============================================================ */

.sizer-section{background:var(--sky)}
.sizer{
  margin-top:clamp(1.8rem,4vw,3rem);
  background:var(--paper);border-radius:var(--radius);
  padding:clamp(1.4rem,3.5vw,2.6rem);box-shadow:var(--shadow-card);
}
.sizer-stage{
  position:relative;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(1rem,4vw,3rem);
  min-height:clamp(230px,42vw,360px);
  padding-bottom:.5rem;
}

/* The canvas stays fixed; the cutout scales to the selected diameter. */
.sizer-pie{
  --in:10;
  width:clamp(150px,34vw,320px);
  aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--sun-2) 0 62%, var(--sun) 62% 82%, #e8b96a 82% 100%);
  box-shadow:inset 0 0 0 max(3px, calc(var(--in) * 0.35px)) #d99a3f,
             0 18px 36px -14px rgba(14,58,82,.45);
  display:grid;place-items:center;
  transition:none;
  will-change:auto;
}
.sizer-inches{
  font-family:var(--font-display);color:var(--navy);
  font-size:clamp(1rem,calc(.5rem + 1.6vw),2rem);
  letter-spacing:.01em;
}

/* A 7.5in (19cm) side plate, drawn at the same scale as the pie. */
.sizer-human{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.sizer-plate{
  width:calc(clamp(150px,34vw,320px) * (7.5 / 28));
  aspect-ratio:1;border-radius:50%;
  background:var(--sky-2);box-shadow:inset 0 0 0 6px #fff, 0 8px 18px -10px rgba(14,58,82,.4);
}
.sizer-cap{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
  opacity:.6;color:var(--navy);
}

.sizer-control{display:block;margin-top:1.4rem}
.sizer-label{
  display:block;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.14em;opacity:.6;margin-bottom:.5rem;
}
.sizer input[type=range]{
  width:100%;height:44px;               /* full 44px touch target */
  accent-color:var(--red);cursor:pointer;background:transparent;
}
.sizer input[type=range]:focus-visible{outline:3px solid var(--navy);outline-offset:4px;border-radius:8px}
.sizer-out{
  margin-top:.4rem;font-size:1.02rem;color:var(--navy);
  min-height:1.5em;font-weight:600;
}

@media (prefers-reduced-motion:reduce){
  .sizer-pie{transition:none}
}

/* ---- Word-by-word headline reveal ----
   0.045s per word: far enough apart to read as a cascade, close enough
   that a six-word headline finishes in under half a second. */
html.js .w{
  display:inline-block;
  opacity:0;transform:translateY(0.5em) rotate(1.5deg);
  transition:opacity .42s var(--ease-soft), transform .42s var(--ease-soft);
  transition-delay:calc(var(--w,0) * .045s);
}
html.js .words-in .w{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html.js .w{opacity:1 !important;transform:none !important;transition:none !important}
}

/* ============================================================
   PRINT / SAVE-AS-PDF
   Ctrl+P (or Cmd+P) -> "Save as PDF" should produce something you could
   hand to a landlord or a supplier: the words, the menu, the addresses
   and the hours. Everything that only makes sense on a screen goes.
   ============================================================ */
@media print{
  @page{ margin:14mm 12mm }

  html,body{
    background:#fff !important;color:#000 !important;
    font-size:11pt;line-height:1.45;
  }

  /* Screen-only furniture */
  .preloader,.cursor-dot,.cursor-ring,.scroll-rail,.sticky-order,
  .site-header,.nav-toggle,.marquee,.scroll-hint,.orbit,.ob-center,
  .order-badge,.wheel-nav,.wheel-hint,.spin-section,.sizer-control,
  .menu-rail,.skip-link,.gallery-track,.review-scroller{
    display:none !important;
  }

  /* Nothing animates, nothing hides, nothing is mid-transition */
  *,*::before,*::after{
    animation:none !important;transition:none !important;
    opacity:1 !important;transform:none !important;filter:none !important;
    box-shadow:none !important;text-shadow:none !important;
  }

  .section{padding:10mm 0 !important;break-inside:avoid}
  .container{width:100% !important;max-width:none !important}

  /* Dark sections would burn a print cartridge for no reason */
  .section--dark,.wheel-section,.spin-section,.cta-band,.site-footer,
  .loc-hero,.hero{
    background:#fff !important;color:#000 !important;
  }
  .text-outline{-webkit-text-stroke:0 !important;color:#000 !important}

  h1,h2,h3{break-after:avoid;color:#000 !important}
  h1{font-size:22pt} h2{font-size:16pt} h3{font-size:12pt}

  /* The menu is the reason to print this at all */
  .menu-items{grid-template-columns:1fr 1fr !important;gap:2mm 8mm !important}
  .menu-section{break-inside:avoid}
  .menu-item{border-bottom:1px solid #ccc !important;padding:1.5mm 0 !important}
  .menu-item--feature{border:1px solid #999 !important;background:#fff !important;color:#000 !important}

  img{max-width:100% !important;break-inside:avoid}
  .hero-photo,.story-media,.ajarski-media,.feature-paper img{display:none !important}

  /* A printed page cannot be clicked, so spell the links out */
  a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size:8pt;word-break:break-all;color:#444;
  }
  a[href^="#"]::after,a[href$=".html"]::after{content:""}

  /* Size comparer: keep the fact, drop the toy */
  .sizer-stage{display:none !important}
  .sizer-out{font-size:12pt;font-weight:700}
}

/* ---- Marquee lean, driven by scroll velocity from main.js ---- */
.marquee-track span{transform:skewX(var(--mq-skew,0deg))}
@media (prefers-reduced-motion:reduce){.marquee-track span{transform:none !important}}

/* ---- Photo curtain reveal ----
   The photo rises out of its frame from the bottom edge, like a pie coming
   up out of the oven, instead of fading in. The end state is a NEGATIVE
   inset: clip-path also clips box-shadow, and inset(0) would leave every
   framed photo permanently shadowless. The transform transition is kept
   in the list because this rule out-weighs the one that declared it, and
   dropping it would kill the frames' hover tilt. */
html.js .story-media .frame,
html.js .ajarski-media .main{
  clip-path:inset(100% 0 0 0 round var(--radius));
  transition:clip-path 1.05s cubic-bezier(.77,0,.18,1), transform .6s var(--ease-out);
}
html.js .story-media .frame.clip-in,
html.js .ajarski-media .main.clip-in{
  clip-path:inset(-60px -60px -60px -60px round var(--radius));
}
@media (prefers-reduced-motion:reduce){
  html.js .story-media .frame,
  html.js .ajarski-media .main{clip-path:none !important;transition:none !important}
}

/* ============================================================
   LATE-NIGHT MODE  (html.late, set by main.js)
   Open till 2AM is who this place is. After 10PM, while the doors are
   actually open, the hero turns to night and a strip says how late.
   Every colour here was chosen against the navy ground, not the sky:
   the day-mode red stats measure 2.99:1 on navy and fail, the ghost
   button and header text are navy and would vanish outright.
   ============================================================ */
.late-bar:not([hidden]){
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--navy-2);color:var(--sun);
  font-family:var(--font-display);font-size:.78rem;line-height:1.2;
  letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem 1rem;
}
.late-moon{width:15px;height:15px;flex:0 0 auto;animation:moonGlow 3.2s ease-in-out infinite}
@keyframes moonGlow{0%,100%{filter:none}50%{filter:drop-shadow(0 0 5px var(--sun))}}

/* A light bar over a dark hero, in both header states: the unscrolled
   header is transparent, so its navy links would sit on navy. */
html.late .site-header{
  background:rgba(255,253,247,.96);color:var(--navy);
  box-shadow:0 8px 30px rgba(10,44,63,.35);
}
html.late .hero{
  background-color:var(--navy);
  background-image:radial-gradient(rgba(255,253,247,.09) 1.5px,transparent 1.6px);
  color:var(--paper);
}
html.late .hero .eyebrow{color:var(--sun)}
html.late .hero-meta strong{color:var(--sun)}
html.late .hero-actions .btn--ghost{
  --btn-fg:var(--paper);
  box-shadow:inset 0 0 0 3px var(--paper);
}
@media (prefers-reduced-motion:reduce){.late-moon{animation:none}}
@media print{html.late .hero-meta strong,html.late .hero .eyebrow{color:#000 !important}}

/* Late mode: the .hl highlighter is a thin sun band under the words, not a
   background behind them, so its navy ink sat mostly on the navy hero and
   the whole middle line vanished. At night the words go sun and the band
   becomes a soft paper glow: sun on navy measures 8.33:1, sun on the glow
   band about 4.8:1. */
html.late .hero-title .hl{color:var(--sun)}
html.late .hero-title .hl::after{background:rgba(255,253,247,.18)}
@media print{html.late .hero-title .hl{color:#000 !important}}

.sw-odds{display:block;margin-top:.4rem;opacity:.85;font-variant-numeric:tabular-nums}

/* Location cards show the real storefront instead of an illustrated pin */
.loc-map{position:relative;display:block}
.loc-map-chip{
  position:absolute;left:1rem;bottom:1rem;padding:.45rem .85rem;border-radius:999px;
  background:var(--paper);color:var(--navy);font-family:var(--font-display);
  font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  box-shadow:0 6px 16px -8px rgba(14,58,82,.5);
}

/* Final responsive and accessibility refinements. */
[hidden]{display:none!important}
body{cursor:auto}
body::after{display:none}
button,a,input{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid #ce3d23;outline-offset:5px}
.site-header{backdrop-filter:none;background:var(--sky);color:var(--navy)}
.site-header.hidden{transform:none}
.header-inner{gap:1.2rem}
.brand{flex-shrink:0}
.nav-links{gap:clamp(.65rem,1.4vw,1.4rem)}
.open-pill{font-size:.75rem;letter-spacing:.02em}
.hours-link{white-space:nowrap}
.hero-photo .ph-main img{object-position:50% 56%}
.hero-photo .ph-back img{object-position:center}
.hero-title .line>span{transform:none}
html:not(.js) .reveal,html:not(.js) .stagger>*{opacity:1;transform:none;filter:none}
html:not(.js) .loc-panel{display:grid}
html:not(.js) .faq-a{max-height:none}
html:not(.js) .spin-wheel{display:none}
html:not(.js) .nav-toggle,html:not(.js) .motion-toggle{display:none}
html:not(.js) .story-media .frame,html:not(.js) .ajarski-media .main{clip-path:none;transform:none}
.faq-a{transition:none}
.faq-a p{padding-bottom:1.2rem}
.hours-note,.menu-note{font-size:.9rem;line-height:1.6;color:var(--navy);margin:1rem 0}
.menu-note{padding:1rem 1.25rem;border-left:4px solid var(--red);background:var(--paper);border-radius:0 12px 12px 0}
.menu-category-photo{width:100%;height:clamp(240px,35vw,400px);object-fit:cover;object-position:50% 58%;border-radius:24px;margin-bottom:1.75rem}
.menu-rail{scroll-margin-top:var(--header-h,100px)}
section[id],.menu-section[id]{scroll-margin-top:calc(var(--header-h,100px) + 85px)}
.motion-toggle{position:fixed;left:14px;bottom:14px;z-index:110;background:var(--paper);color:var(--navy);border:2px solid var(--navy);border-radius:99px;padding:.45rem .8rem;font-size:.76rem;font-weight:700;min-height:38px;box-shadow:0 3px 14px #0e3a521f}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important;scroll-behavior:auto!important;transition-duration:0s!important}
.motion-paused .reveal,.motion-paused .stagger>*,.motion-paused .hero-title .line>span,.motion-paused .hero-sub,.motion-paused .hero-actions,.motion-paused .hero-meta,.motion-paused .hero-photo{opacity:1!important;filter:none!important;transform:none!important}
.motion-paused .story-media .frame,.motion-paused .ajarski-media .main{clip-path:none!important}
.motion-paused .hero .eyebrow{opacity:1!important;transform:none!important}
.gallery-track{animation:none!important;transform:none!important;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.2rem 4vw 2.2rem;scrollbar-width:thin;will-change:auto}
.gallery-track figure{flex:0 0 clamp(210px,27vw,340px);width:auto;scroll-snap-align:center}
.gallery-track img{width:100%;height:360px;object-fit:cover;object-position:50% 55%}
.gallery-track figcaption{font-size:1rem;letter-spacing:.04em}
.btn,.reveal,.stagger>*,.sizer-pie{will-change:auto}
.order-card{justify-content:center;gap:1.15rem;text-align:left;align-items:flex-start}
.order-card-photo{width:100%;height:clamp(230px,28vw,330px);object-fit:cover;object-position:50% 55%;border-radius:22px;margin-bottom:.5rem}
.order-card .lead{font-size:1.1rem}
.order-card .btn{margin-top:.5rem}
.spin-card{min-width:0}
.sw-card{align-items:center;flex-wrap:wrap;text-align:left}
.sw-card img{width:80px;height:80px;object-fit:cover;object-position:50% 60%;border-radius:16px}
.sw-card>.btn{margin-top:.5rem}
.sw-result{min-height:120px;margin-top:2rem}
.spin-wheel--pies .sw-pointer{font-size:35px;line-height:1;color:var(--red);width:auto;top:-23px;text-shadow:0 2px var(--paper)}
.spin-wheel--pies{margin-top:2rem}
.spin-wheel--pies .sw-disc{background:conic-gradient(var(--sun) 0 45deg,var(--sky) 45deg 90deg,var(--paper) 90deg 135deg,var(--sun) 135deg 180deg,var(--sky) 180deg 225deg,var(--paper) 225deg 270deg,var(--sun) 270deg 315deg,var(--sky) 315deg 360deg)}
.picker-photo{position:absolute;left:36%;top:36%;width:28%;height:28%;transform:rotate(var(--angle)) translateY(-119%) rotate(calc(-1 * var(--angle)));border-radius:50%;overflow:hidden;box-shadow:0 0 0 3px var(--paper)}
.picker-photo img{width:100%;height:100%;object-fit:cover;object-position:center 56%}
.sw-hub{width:24%;height:24%;font-size:1rem;min-width:0}
.pie-wheel{width:min(570px,88vw);height:auto;aspect-ratio:1}
.pie-rotor{background:var(--sun);box-shadow:0 20px 50px -28px #0e3a5299,inset 0 0 0 2px #0e3a5220}
.slice{inset:auto;left:36.5%;top:36.5%;width:27%;height:27%;clip-path:none;border-radius:50%;overflow:hidden;transform:rotate(var(--angle)) translateY(-130%) rotate(calc(-1 * var(--angle) - var(--wheel-rotation,0deg)));border:4px solid var(--paper);box-shadow:0 7px 18px #0e3a5226;transition:box-shadow .3s,border-color .3s,transform .65s cubic-bezier(.22,1,.36,1)}
.slice img,.slice.active img{width:100%;height:100%;transform:none;filter:none;object-fit:cover;object-position:50% 58%}
.slice.active{border-color:var(--navy);box-shadow:0 0 0 4px var(--paper),0 7px 20px #0e3a5233}
.slice:focus-visible{outline:4px solid var(--red);outline-offset:4px}
.slice .slice-label{display:none}
.pie-center{width:37%;height:37%;aspect-ratio:1;min-width:0;min-height:0;padding:.75rem;display:flex;flex-direction:column;justify-content:center;gap:.35rem}
.pie-center .dish-name{font-size:clamp(.92rem,2.4vw,1.5rem);margin:0;line-height:1.05;overflow-wrap:anywhere}
.pie-center .kicker{font-size:.56rem;letter-spacing:.14em}
.pie-center .btn{font-size:.65rem;padding:.5rem .75rem;min-height:34px}
.wheel-side-name{display:none}
.wheel-hint{letter-spacing:.1em;opacity:.8}
.sizer-plate{width:calc(clamp(150px,34vw,320px) * (10.6 / 28))}
.sizer-pie{background-image:url('../assets/img/food/pepperoni-480.webp');background-size:cover;background-position:center;box-shadow:0 8px 22px #0e3a5233}
.sizer-inches{background:var(--paper);border-radius:99px;padding:.1rem .5rem;font-size:1rem}
.sizer-stage{align-items:center;min-height:340px}
.hero-meta strong{color:var(--navy)}
.loc-map img{object-position:center}
@media(min-width:961px){.header-cta{gap:.8rem}.header-cta .btn{font-size:.72rem;padding:.8rem 1rem}.logo-badge{width:76px;height:76px}.open-pill{font-size:.65rem}}
@media(max-width:1100px) and (min-width:961px){.hours-link{display:none}.nav-links{font-size:.75rem}}
@media(max-width:960px){
 .nav-links{position:fixed;inset:var(--header-h,90px) 0 auto;height:calc(100dvh - var(--header-h,90px));background:var(--navy);color:var(--paper);clip-path:none;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s;overflow:auto;padding:2rem;gap:1.5rem;z-index:20}
 body.nav-open{overflow:hidden}
 body.nav-open .nav-links{visibility:visible;opacity:1;pointer-events:auto;clip-path:none}
 .nav-toggle{flex-shrink:0;z-index:25}.nav-toggle span::before,.nav-toggle span::after{left:0;right:0}
 .header-inner{gap:.8rem}.header-cta{gap:.6rem}.logo-badge{width:64px;height:64px}
 .order-badge{display:none}.hero{padding-top:calc(var(--header-h,90px) + 2rem)}
 .hero-photo{margin-top:2rem}.hero-photo .sticker{right:2%}
 html:not(.js) .nav-links{position:static;height:auto;visibility:visible;opacity:1;pointer-events:auto;display:flex;flex-wrap:wrap;flex-direction:row;gap:1rem;font-size:.8rem;padding:.7rem;background:none;color:var(--navy)}
 html:not(.js) .header-inner{flex-wrap:wrap}html:not(.js) .site-header{position:relative}html:not(.js) .hero{padding-top:3rem}
}
@media(max-width:640px){
 .hero-title{font-size:clamp(3rem,12vw,4.6rem)}.hero-photo .ph-main{width:86vw;max-height:500px}.hero-photo .ph-back{width:36vw;right:0}
 .hero-sub{font-size:1.08rem}.hero-meta{gap:1rem}.hero-meta>div{font-size:.7rem}.hero-meta strong{font-size:2rem}
 .pie-center .kicker{display:none}.pie-center .btn{padding:.4rem .6rem;font-size:.6rem}.slice{border-width:3px}
 .spin-grid{gap:1.5rem}.spin-card{padding:1.5rem 1.1rem}.spin-wheel{--size:min(330px,74vw)}
 .order-card-photo{height:290px}.sizer-stage{min-height:250px}.sizer-cap{max-width:100px;text-align:center}
 .gallery-track img{height:290px}.section-head{gap:1.2rem}
 .motion-toggle{left:8px;bottom:8px;font-size:.67rem;padding:.35rem .6rem;min-height:34px}
 .sticky-order{left:auto;right:8px;bottom:8px;width:auto;max-width:60%;padding:.45rem;border-radius:99px}.sticky-order>span,.sticky-order>div{display:none}.sticky-order .btn{font-size:.7rem;padding:.6rem .9rem}
 .footer-bottom{padding-bottom:3rem}.hours-link{font-size:.65rem}.open-pill{font-size:.65rem;padding:.45rem .6rem}
 .nav-links{font-size:1.25rem;gap:1.35rem}
}
@media(prefers-reduced-motion:reduce){.reveal,.stagger>*{opacity:1!important;filter:none!important;transform:none!important}.story-media .frame,.ajarski-media .main{clip-path:none!important}.slice,.pie-rotor{transition:none!important}}
@media print{.motion-toggle,.order-card,.sw-result{display:none!important}.gallery-track{flex-wrap:wrap}.loc-panel[hidden],.faq-a[hidden]{display:block!important}.site-footer{page-break-inside:avoid}}

.hero .hero-title{font-size:clamp(3.2rem,5.7vw,5.1rem);line-height:1.02;letter-spacing:-.025em}
.hero-title .line>span{white-space:nowrap}
.hero .hero-inner{gap:clamp(2rem,4vw,4rem)}
.hero .hero-photo .ph-main{max-height:540px}
@media(max-width:980px){.hero .hero-title{font-size:clamp(3rem,9vw,5.8rem)}}
@media(max-width:640px){.hero .hero-title{font-size:clamp(2.35rem,10vw,4rem);line-height:1.03}.hero .hero-photo .ph-main{max-height:430px}.hero-meta{margin-top:1.6rem}}

/* Approved daily offers — painted wheel, readable labels and saved ticket. */
.offer-card{scroll-margin-top:calc(var(--header-h,100px) + 20px)}
.offer-card>.eyebrow{margin-bottom:.6rem}
.offer-card .spin-sub{margin-bottom:1.2rem}
.offer-card .spin-wheel{margin-bottom:.5rem}
.offer-card .offer-pointer{width:auto;font-size:40px;line-height:1;top:-33px;color:var(--sun);text-shadow:0 3px var(--navy)}
.offer-label strong{display:block;font-family:var(--font-display);font-size:clamp(1.05rem,3vw,1.7rem);line-height:1.05}
.offer-label small{display:block;font-size:.6rem;letter-spacing:.12em;margin-top:.2rem}
.offer-card .sw-label{transform:translate(-50%,-50%) rotate(calc(var(--s) * 45deg + 22.5deg)) translateY(calc(var(--size) * -.34)) rotate(calc((var(--s) * 45deg + 22.5deg) * -1 - var(--offer-turn,0deg)));transition:transform 4.8s cubic-bezier(.12,.72,.12,1)}
.offer-card .sw-label:nth-child(1),.offer-card .sw-label:nth-child(5){color:#fff}
.offer-result{width:100%;min-height:145px;margin-top:2rem}
.offer-ticket{position:relative;width:100%;padding:1.25rem 1rem;background:var(--sun);border:2px dashed var(--navy);border-radius:16px;color:var(--navy)}
.offer-ticket .eyebrow{display:block;font-size:.65rem}
.offer-value{display:block;font-family:var(--font-display);font-size:clamp(2.4rem,5vw,3.4rem);line-height:1.1;margin:.4rem 0}
.offer-ticket p{margin:.5rem 0 0;font-size:.8rem;line-height:1.5}
.offer-ticket .offer-keep{font-size:.73rem}
.offer-ticket .offer-requirements{font-size:.95rem;font-weight:700;line-height:1.5;padding-top:.75rem;border-top:1px solid #0e3a5240}
.offer-ticket .offer-eligibility{font-size:.85rem;font-weight:600}
.offer-terms{max-width:390px;font-size:.82rem;line-height:1.65;margin:1rem 0 0;color:var(--ink-2)}
.offer-terms strong{display:block;font-size:1rem;line-height:1.5;color:var(--navy)}
.offer-terms strong:last-of-type{margin-bottom:.55rem}
.motion-paused .section-head h2,.motion-paused .wheel-head h2,.motion-paused .dish-card,.motion-paused .deal-card,.motion-paused .info-card,.motion-paused .review-card{animation:none!important;opacity:1!important;transform:none!important}
.motion-paused .offer-label{transition:none!important}
html:not(.js) [data-offer-go]{display:none}
@media(max-width:640px){.spin-grid{grid-template-columns:minmax(0,1fr)}.offer-card .spin-wheel{--size:min(290px,70vw)}.offer-label strong{font-size:1.15rem}.offer-card .offer-pointer{font-size:33px;top:-28px}.offer-terms{font-size:.82rem}}

.scroll-rail{z-index:130}
html:not(.js) .faq-q .faq-icon{display:none}
.motion-toggle:disabled{cursor:default;opacity:.8}

/* Keep outlined headings readable and off-screen reveals inside the page. */
.text-outline{color:var(--navy);-webkit-text-fill-color:transparent;-webkit-text-stroke:1.5px var(--navy)}
.section--dark .text-outline,.wheel-section .text-outline{color:var(--paper);-webkit-text-stroke-color:var(--paper)}
main{overflow-x:clip}
.motion-paused{scroll-behavior:auto}
@media(max-width:640px){.story-media .frame--back{right:0;max-width:88%}}

/* Six whole pizzas on round plates; no triangular segments or dividers. */
.spin-wheel--pies .sw-disc{background:radial-gradient(circle, var(--paper) 0 27%,var(--sky) 27.5% 58%,var(--paper) 58.5% 100%);box-shadow:inset 0 0 0 3px var(--navy),0 18px 36px -24px #0e3a5255}
.spin-wheel--pies .sw-disc::after{content:none;background:none;mask:none;-webkit-mask:none}
.spin-wheel--pies .picker-photo{left:35.5%;top:35.5%;width:29%;height:29%;padding:3%;background:#fff8e9;border:1px solid #0e3a5220;box-shadow:0 3px 9px #0e3a5228;transform:rotate(var(--angle)) translateY(-112%) rotate(calc(-1 * var(--angle)))}
.spin-wheel--pies .picker-photo img{object-fit:contain;object-position:center;filter:drop-shadow(0 2px 2px #4e2e1828)}
[data-spin-result] .sw-card img{object-fit:contain;object-position:center;background:#fff8e9;border-radius:50%;padding:4px}
.spin-wheel--prize{--seg:60deg}
.spin-wheel--prize .sw-disc{background:conic-gradient(var(--red) 0 60deg,var(--navy) 60deg 120deg,var(--sun) 120deg 180deg,var(--red) 180deg 240deg,var(--navy) 240deg 300deg,var(--sun) 300deg 360deg)}
.offer-card .sw-label{transform:translate(-50%,-50%) rotate(calc(var(--s) * 60deg + 30deg)) translateY(calc(var(--size) * -.335)) rotate(calc((var(--s) * 60deg + 30deg) * -1 - var(--offer-turn,0deg)))}
.offer-card .sw-label{color:var(--paper);text-shadow:none}
.offer-card .sw-label:nth-child(3),.offer-card .sw-label:nth-child(6){color:var(--navy)}
.offer-label small{font-size:clamp(.48rem,1vw,.65rem);letter-spacing:.025em}
.offer-label--slice strong{font-size:clamp(.9rem,2.2vw,1.3rem)}
.offer-ticket .offer-value{font-size:clamp(1.8rem,4vw,3.4rem);overflow-wrap:normal}
.footer-word{font-size:clamp(1.75rem,8.4vw,6.8rem);line-height:1.2;letter-spacing:.01em;white-space:normal;overflow:visible;overflow-wrap:normal;padding:.1em 0;-webkit-text-stroke:1.2px #ffd23f;color:transparent;margin:2.5rem 0 1.5rem}

/* Visible page trail for visitors and search engines. */
.seo-breadcrumb{padding-top:1.25rem;font-size:.85rem}.seo-breadcrumb ol{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none}.seo-breadcrumb li+li::before{content:"/";margin-right:.5rem;opacity:.6}.seo-breadcrumb a{text-decoration:underline;text-underline-offset:3px}
.section--cream{background:var(--paper);color:var(--navy)}.section--cream h2{margin-bottom:1rem}.section--cream .lead{margin-bottom:1.5rem}.section--cream .info-cards{margin-bottom:1.5rem}.section--cream p+p{margin-top:.8rem}.section--cream a{text-decoration:underline;text-underline-offset:3px}

/* Menu discovery and clear navigation. */
[data-menu-search][hidden],[data-menu-empty][hidden],.menu-section[hidden],.menu-item[hidden],.dish-grid[hidden],.menu-item--feature[hidden],.back-to-top[hidden]{display:none!important}
.menu-search{margin-block:2.5rem 0;padding:clamp(1.2rem,3vw,2rem);border:1px solid rgba(14,58,82,.2);border-radius:20px;background:var(--cream);display:grid;grid-template-columns:1fr 1.2fr;gap:1rem 2rem;align-items:center;box-shadow:0 12px 35px rgba(14,58,82,.05)}
.menu-search label{display:block;font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);color:var(--navy);margin-top:.35rem}
.menu-search-field{display:flex;border:2px solid var(--navy);border-radius:12px;background:white;overflow:hidden}
.menu-search-field:focus-within{outline:3px solid var(--red);outline-offset:3px}
.menu-search input{width:100%;min-width:0;border:0;background:transparent;padding:1rem;color:var(--navy);font:inherit;font-size:16px;outline:none}
.menu-search button{border:0;border-left:1px solid rgba(14,58,82,.15);background:transparent;color:var(--navy);font:inherit;padding:.7rem 1rem;cursor:pointer}
.menu-search button:disabled{opacity:.45;cursor:default}
.menu-search [role=status]{grid-column:1/-1;margin:0;color:var(--navy);font-size:.9rem}
.menu-empty{padding-block:2rem;color:var(--navy)}
.nav-links a[aria-current=page]{text-decoration:underline;text-decoration-color:var(--red);text-underline-offset:6px;text-decoration-thickness:2px}
.back-to-top{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom,0px));right:20px;z-index:50;width:46px;height:46px;border:2px solid var(--cream);border-radius:50%;background:var(--navy);color:var(--cream);font-size:26px;cursor:pointer;box-shadow:0 5px 20px rgba(14,58,82,.2)}
.back-to-top:focus-visible{outline:3px solid var(--red);outline-offset:3px}
@media(max-width:640px){.menu-search{grid-template-columns:1fr;max-width:calc(100% - 2rem)}.back-to-top{right:12px}}
@media print{.menu-search,.menu-empty,.back-to-top{display:none!important}.menu-section[hidden],.menu-item[hidden],.dish-grid[hidden],.menu-item--feature[hidden]{display:block!important}}
/* Menu cutouts share the overhead photography of the pizza picker. */
.menu-cutout-page .menu-category-photo{display:block;width:min(100%,520px);height:auto;aspect-ratio:1;object-fit:contain;object-position:center;border-radius:0;margin:0 auto 1.75rem;filter:drop-shadow(0 12px 12px rgba(14,58,82,.09))}
.menu-cutout-page .menu-item--feature img{object-fit:contain;border-radius:0;filter:drop-shadow(0 8px 10px rgba(14,58,82,.09))}
.menu-cutout-page .dish-card{background:var(--cream);color:var(--navy);aspect-ratio:auto;justify-content:start;border:1px solid rgba(14,58,82,.15)}
.menu-cutout-page .dish-card::after{display:none}
.menu-cutout-page .dish-card img{position:relative;inset:auto;height:auto;aspect-ratio:1;width:100%;object-fit:contain;padding:1rem;filter:drop-shadow(0 8px 8px rgba(14,58,82,.1))}
.menu-cutout-page .dish-card:hover img{transform:scale(1.035)}
.menu-cutout-page .dish-body{padding:0 1.3rem 1.5rem}
.menu-cutout-page .dish-body .tag{color:var(--red)}
.menu-cutout-page .hero-photo img[src*="pizza-picker"]{object-fit:contain;padding:1rem;filter:drop-shadow(0 14px 15px rgba(14,58,82,.15))}
@media(prefers-reduced-motion:reduce){.menu-cutout-page .dish-card:hover img{transform:none}}
/* A food-first discovery experience with local saved dishes. */
[data-discovery][hidden],[data-party-planner][hidden]{display:none!important}
.discovery-section{background:var(--cream)}
.craving-filters{display:flex;flex-wrap:wrap;gap:.65rem;margin-bottom:1.7rem}
.craving-filters button{padding:.8rem 1.1rem;border:1px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font:inherit;font-weight:700;cursor:pointer;min-height:44px}
.craving-filters button[aria-pressed=true]{background:var(--navy);color:var(--cream)}
.craving-filters button:focus-visible,.craving-actions button:focus-visible,.saved-dishes button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.craving-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.craving-card{padding:1.2rem;border:1px solid rgba(14,58,82,.17);border-radius:22px;background:var(--paper);display:flex;flex-direction:column;align-items:start}
.craving-card img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 9px 10px rgba(14,58,82,.1));margin-bottom:1rem}
.craving-card h3{font-family:var(--font-display);font-size:1.7rem;color:var(--navy);line-height:1.15}
.craving-card p{font-size:.95rem;line-height:1.6;margin:.6rem 0 1.2rem}
.craving-actions{margin-top:auto;display:flex;align-items:center;justify-content:space-between;width:100%;gap:.7rem;flex-wrap:wrap}
.craving-actions a{font-weight:700;text-underline-offset:4px;font-size:.9rem;color:var(--navy)}
.craving-actions button,.saved-dishes button{border:1px solid rgba(14,58,82,.3);background:transparent;color:var(--navy);font:inherit;border-radius:999px;padding:.6rem .8rem;cursor:pointer;min-height:44px}
.craving-actions button[aria-pressed=true]{background:var(--navy);color:var(--cream)}
.saved-dishes{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.6rem;border:1px dashed rgba(14,58,82,.3);border-radius:20px;margin-top:1.5rem;color:var(--navy)}
.saved-dishes h3,.party-planner h3{font-family:var(--font-display);font-size:1.8rem;margin:.4rem 0}
.saved-dishes p{font-size:.9rem;margin:.5rem 0}
[data-favorites]>div{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 0;border-bottom:1px solid rgba(14,58,82,.1)}
[data-favorites] a{text-underline-offset:4px;font-weight:700}
.party-planner{padding:clamp(1.3rem,3vw,2rem);margin-top:2rem;background:var(--cream);border:1px solid rgba(14,58,82,.2);border-radius:22px;color:var(--navy)}

.party-note{font-size:.85rem;margin:.7rem 0 1rem}
@media(max-width:780px){.craving-grid{grid-template-columns:1fr}.craving-card{display:grid;grid-template-columns:130px 1fr;gap:0 1rem}.craving-card img{grid-row:1/4;margin:0;align-self:center}.craving-card h3{font-size:1.4rem}.craving-card p{margin-bottom:.7rem}.saved-dishes{grid-template-columns:1fr;gap:1rem}}
@media(max-width:380px){.craving-card{grid-template-columns:100px 1fr;padding:.8rem}.craving-actions{grid-column:1/-1;margin-top:.8rem}}
@media print{.craving-filters,.craving-actions button,.saved-dishes,.party-planner{display:none!important}}
/* Fine motion for hover and keyboard interaction; no layout shifts. */
.nav-links a,.footer-main a,.seo-breadcrumb a{transition:color .2s,text-decoration-color .2s}
.nav-links a:hover,.footer-main a:hover{color:var(--red)}
.craving-card,.info-card,.review-card,.deal-mini,.saved-dishes{transition:box-shadow .3s,border-color .3s}
.craving-card:focus-within,.info-card:focus-within,.saved-dishes:focus-within{border-color:var(--red);box-shadow:0 10px 24px rgba(14,58,82,.09)}
.craving-card img,.menu-category-photo,.menu-item--feature img{transition:scale .5s cubic-bezier(.2,.75,.25,1),filter .5s}
.craving-filters button,.craving-actions button,.saved-dishes button,.menu-search button,.back-to-top{transition:background-color .22s,color .22s,box-shadow .22s}
.craving-filters button:hover,.craving-actions button:hover,.saved-dishes button:hover{box-shadow:0 4px 12px rgba(14,58,82,.15)}
.menu-search-field{transition:border-color .25s,box-shadow .25s}
.menu-search-field:focus-within{box-shadow:0 5px 18px rgba(14,58,82,.12)}
.menu-item .mi-name{transition:color .2s}
.menu-item:hover .mi-name{color:var(--red)}
.faq-item button svg{transition:rotate .28s}
.faq-item button[aria-expanded=true] svg{rotate:180deg}
@media(hover:hover) and (pointer:fine){
 .craving-card:hover,.info-card:hover,.review-card:hover,.deal-mini:hover{box-shadow:0 14px 30px rgba(14,58,82,.12)}
 .craving-card:hover img{scale:1.045}
 .menu-category-photo:hover,.menu-item--feature img:hover{scale:1.025}
 .gallery-track figure img{transition:scale .5s cubic-bezier(.2,.75,.25,1)}
 .gallery-track figure:hover img{scale:1.035}
}
@media(prefers-reduced-motion:reduce){
 .craving-card img,.menu-category-photo,.menu-item--feature img,.gallery-track figure img{scale:1!important}
 .faq-item button svg{rotate:none!important}
}
.reduce-motion .craving-card img,.reduce-motion .menu-category-photo,.reduce-motion .menu-item--feature img,.reduce-motion .gallery-track figure img{scale:1!important}
.reduce-motion .faq-item button svg{rotate:none!important}
@media print{*{translate:none!important;scale:1!important}}
/* The current badge gets finite gold-light feedback and a gentle hover tilt. */
.logo-badge{object-fit:contain;transition:scale .4s ease,rotate .4s ease;animation:logoGoldGlow 3s ease-in-out 2}
@keyframes logoGoldGlow{0%,100%{filter:drop-shadow(0 0 0 rgba(229,179,52,0))}50%{filter:drop-shadow(0 0 7px rgba(229,179,52,.45))}}
@media(hover:hover) and (pointer:fine){.brand:hover .logo-badge,.footer-brand:hover .logo-badge{scale:1.065;rotate:-4deg}}
.brand:focus-visible .logo-badge{scale:1.04;rotate:-3deg}
.reduce-motion .logo-badge,.motion-paused .logo-badge{animation:none!important;scale:1!important;rotate:0deg!important;filter:none!important}
@media(prefers-reduced-motion:reduce){.logo-badge{animation:none!important;transition:none!important;scale:1!important;rotate:0deg!important}}

.footer-grid address{font-style:normal;font-size:.85rem;line-height:1.6;opacity:.85;margin:.35rem 0 1rem}
.visit-guide{background:var(--cream);color:var(--navy)}
.visit-guide h2{margin:1rem 0 2rem}
.visit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}
.visit-grid h3{font-family:var(--font-display);font-size:1.4rem;margin-bottom:.8rem}
.visit-grid p{line-height:1.7;margin:.8rem 0}
.visit-grid address{font-style:normal;font-weight:700;line-height:1.7}
.visit-grid a:not(.btn){text-underline-offset:4px;font-weight:700}
@media(max-width:800px){.visit-grid{grid-template-columns:1fr;gap:1.5rem}}
/* More expressive food motion, kept finite and easy to pause. */
.btn,.craving-filters button,.wheel-btn,.back-to-top{position:relative;isolation:isolate}
.motion-ripple{position:absolute;border-radius:50%;background:currentColor;pointer-events:none;z-index:-1;contain:strict}
.craving-filters button,.wheel-btn,.back-to-top{overflow:hidden}
.gallery-track figure{transition:translate .4s ease,box-shadow .4s ease}
.step-img img,.dish-card img,.deal-card img{transition:scale .65s cubic-bezier(.2,.75,.25,1)}
.visit-grid article{transition:translate .3s,box-shadow .3s}
.faq-item .ico{transition:rotate .3s ease}
.faq-item.open .ico{rotate:90deg}
.menu-chip{transition:background-color .25s,color .25s,scale .25s}
.menu-chip[aria-current=true]{scale:1.035}
.craving-filters button[aria-pressed=true]{animation:choiceSettle .36s ease}
.craving-actions button[aria-pressed=true]{animation:saveSettle .45s ease}
@keyframes choiceSettle{0%{scale:.94}65%{scale:1.04}100%{scale:1}}
@keyframes saveSettle{0%,100%{rotate:0deg}30%{rotate:-6deg}65%{rotate:5deg}}
@media(hover:hover) and (pointer:fine){
 .gallery-track figure:hover{translate:0 -7px;box-shadow:0 16px 28px rgba(14,58,82,.16)}
 .step-img:hover img{scale:1.06}
 .deal-card:hover img{scale:1.045}
 .menu-chip:hover{scale:1.04}
 .visit-grid article:hover{translate:0 -4px}
}
.reduce-motion .motion-ripple,.motion-paused .motion-ripple{display:none!important}
.reduce-motion .gallery-track figure,.reduce-motion .visit-grid article{translate:none!important}
.reduce-motion .step-img img,.reduce-motion .dish-card img,.reduce-motion .deal-card img,.reduce-motion .menu-chip{scale:1!important}
.reduce-motion .faq-item .ico{rotate:0deg!important}
.reduce-motion .craving-filters button,.reduce-motion .craving-actions button{animation:none!important}
@media(prefers-reduced-motion:reduce){.motion-ripple{display:none!important}.gallery-track figure,.visit-grid article{translate:none!important}.step-img img,.dish-card img,.deal-card img,.menu-chip{scale:1!important}.faq-item .ico{rotate:0deg!important}.craving-filters button,.craving-actions button{animation:none!important}}
/* Restored old-site visual language, composed with current interactions. */
.legacy-word{display:inline-block;transform-origin:50% 100%}
.legacy-tilt{transform:var(--legacy-base,) perspective(900px) rotateX(var(--legacy-rx,0deg)) rotateY(var(--legacy-ry,0deg)) translateY(-4px)!important}
.btn{transition:translate .24s ease,transform .3s ease,box-shadow .3s ease}
.hero-photo{transition:translate .35s ease}
.marquee-track span{transform:skewX(var(--mq-skew,0deg));transition:transform .2s ease}
.legacy-pointer{position:fixed;inset:0 auto auto 0;width:26px;height:26px;border:1px solid rgba(229,179,52,.9);border-radius:50%;margin:-13px 0 0 -13px;pointer-events:none;z-index:250;transition:translate .09s ease,width .2s,height .2s,margin .2s,opacity .2s}
.legacy-pointer.over-control{width:42px;height:42px;margin:-21px 0 0 -21px;background:rgba(229,179,52,.08)}
.legacy-pointer[hidden]{display:none!important}
.reduce-motion .legacy-word,.motion-paused .legacy-word{opacity:1!important;translate:none!important;rotate:0deg!important}
.reduce-motion .legacy-pointer,.motion-paused .legacy-pointer{display:none!important}
.reduce-motion .legacy-tilt,.motion-paused .legacy-tilt{transform:var(--legacy-base,none)!important}
@media(prefers-reduced-motion:reduce){.legacy-word{opacity:1!important;translate:none!important;rotate:0deg!important}.legacy-pointer{display:none!important}.legacy-tilt{transform:var(--legacy-base,none)!important}}
@media(hover:none),(pointer:coarse){.legacy-pointer{display:none!important}}
@media print{.legacy-pointer{display:none!important}.legacy-word{opacity:1!important;translate:none!important;rotate:0deg!important}}
.wheel-auto-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:.65rem 1rem;border:1px solid var(--navy);border-radius:999px;background:var(--cream);color:var(--navy);font:inherit;font-weight:700;cursor:pointer;margin-top:1rem}
.wheel-auto-toggle:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.wheel-auto-toggle:disabled{opacity:.55;cursor:default}
.pie-wheel.is-arriving .slice,.pie-wheel.is-dragging .slice{transition:box-shadow .3s,border-color .3s}
@media print{.wheel-auto-toggle{display:none!important}}
/* A warm, food-led motion system: depth, photo focus, and page continuity. */
@media(prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}
.site-header .brand .logo-badge{view-transition-name:antonia-header-logo}
::view-transition-group(antonia-header-logo){animation-duration:.4s}
::view-transition-old(root){animation:pageAway .18s ease both}
::view-transition-new(root){animation:pizzaPageOpen .48s cubic-bezier(.22,1,.36,1) both}
@keyframes pageAway{to{opacity:0;scale:.99}}
@keyframes pizzaPageOpen{from{opacity:.25;clip-path:circle(15% at 75% 30%)}to{opacity:1;clip-path:circle(150% at 75% 30%)}}
.hero-photo .ph-main,.hero-photo .ph-back,.hero-photo .sticker{translate:var(--depth-x,0px) var(--depth-y,0px);transition:translate .35s cubic-bezier(.2,.7,.25,1)}
.oven-aura{position:absolute;inset:10% 0;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,rgba(229,179,52,.35),rgba(226,73,47,.12) 45%,transparent 70%);filter:blur(22px);pointer-events:none;animation:ovenBreathe 4s ease-in-out 2}
@keyframes ovenBreathe{0%,100%{opacity:.45;scale:.9}50%{opacity:1;scale:1.08}}
.gallery-photo-button{display:block;width:100%;padding:0;border:0;background:transparent;color:inherit;cursor:zoom-in;overflow:hidden;border-radius:inherit}
.gallery-photo-button:focus-visible{outline:3px solid var(--gold);outline-offset:-4px}
.photo-open{overflow:hidden}
.food-lightbox{width:min(980px,96vw);max-width:96vw;max-height:94dvh;border:1px solid rgba(246,238,221,.3);border-radius:24px;background:var(--navy);color:var(--cream);padding:3.3rem 3.7rem 1.2rem;overflow:auto;box-shadow:0 25px 80px rgba(0,0,0,.4)}
.food-lightbox::backdrop{background:rgba(5,20,30,.85);backdrop-filter:blur(7px)}
.food-lightbox img{display:block;max-height:72dvh;width:100%;object-fit:contain;border-radius:14px}
.food-lightbox p{font-family:var(--font-display);font-size:1.4rem;text-align:center;margin:.8rem 0 0}
.food-lightbox button{position:absolute;min-width:44px;min-height:44px;border:1px solid rgba(246,238,221,.4);background:var(--navy);color:var(--cream);border-radius:999px;cursor:pointer;font:inherit}
.food-lightbox button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.lightbox-close{right:1rem;top:.5rem;padding:.4rem .9rem}
.lightbox-previous{left:.5rem;top:48%;font-size:1.5rem!important}.lightbox-next{right:.5rem;top:48%;font-size:1.5rem!important}
.food-celebration{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:230}
.food-celebration i{position:absolute;width:7px;height:12px;border-radius:2px}
.reduce-motion .oven-aura,.motion-paused .oven-aura{animation:none!important;opacity:.5;scale:1}
.reduce-motion .hero-photo .ph-main,.reduce-motion .hero-photo .ph-back,.reduce-motion .hero-photo .sticker{translate:none!important}
.reduce-motion .hero-media,.reduce-motion .story-media .frame img,.reduce-motion .ajarski-media .main img,.reduce-motion .feature-paper .frame img,.reduce-motion .marquee{animation:none!important;transform:none!important;opacity:1!important}
.reduce-motion .scroll-rail{display:none!important}
.reduce-motion::view-transition-old(root),.reduce-motion::view-transition-new(root),.reduce-motion::view-transition-group(antonia-header-logo){animation:none!important}
@media(prefers-reduced-motion:reduce){.oven-aura{animation:none!important}.hero-photo .ph-main,.hero-photo .ph-back,.hero-photo .sticker{translate:none!important}::view-transition-old(root),::view-transition-new(root),::view-transition-group(antonia-header-logo){animation:none!important}}
@media(max-width:600px){.food-lightbox{padding:3.2rem 2.7rem 1rem;border-radius:16px}.food-lightbox img{max-height:65dvh}.food-lightbox p{font-size:1.2rem}}
@media print{.oven-aura,.food-celebration,.food-lightbox{display:none!important}}

/* Ordering feedback keeps the surrounding layout steady. */
.sizer-pie.sizer-photo{position:relative;flex:0 0 auto;width:clamp(150px,34vw,320px);background:none;box-shadow:none;border-radius:0;transition:none}
.sizer-photo>img{grid-area:1/1;display:block;width:100%;height:100%;object-fit:contain;scale:calc(var(--in,10)/28);transform-origin:center;transition:scale .4s cubic-bezier(.2,.75,.25,1);pointer-events:none}
.sizer-photo>.sizer-inches{grid-area:1/1;position:relative;z-index:1}
.pizza-size-options{display:flex;flex-wrap:wrap;gap:.6rem;margin:.5rem 0 1rem}
.pizza-size-options button{min-width:52px;min-height:44px;padding:.55rem .85rem;border:1px solid var(--navy);border-radius:999px;background:transparent;color:var(--navy);font:inherit;font-weight:700;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .2s}
.pizza-size-options button[aria-pressed=true]{background:var(--navy);color:var(--cream)}
.pizza-size-options button:hover{box-shadow:0 4px 12px rgba(14,58,82,.12)}
.pizza-size-options button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
html:not(.js) .pizza-size-options{display:none}
.saved-count{display:inline-grid;place-items:center;min-width:1.8em;height:1.8em;margin-inline-start:.3em;padding:0 .35em;border-radius:999px;background:var(--navy);color:var(--cream);font-family:var(--font-body);font-size:.6em;font-weight:700;vertical-align:middle}
.menu-rail-inner.has-selection-indicator,.craving-filters.has-selection-indicator{position:relative;isolation:isolate}
.selection-indicator{position:absolute;left:0;top:0;background:var(--navy);border-radius:999px;pointer-events:none;z-index:0;transform-origin:0 0}
.selection-indicator[hidden]{display:none!important}
.has-selection-indicator>.menu-chip,.craving-filters.has-selection-indicator>button{position:relative;z-index:1}
.menu-rail-inner.has-selection-indicator>.menu-chip[aria-current=true],.craving-filters.has-selection-indicator>button[aria-pressed=true]{background:transparent;color:var(--cream)}
.menu-rail-inner.has-selection-indicator>.menu-chip[aria-current=true]{scale:1}
.saved-flight{position:fixed;object-fit:contain;pointer-events:none;z-index:220;transform-origin:center}
.reduce-motion .sizer-photo>img,.motion-paused .sizer-photo>img{transition:none!important}
@media(prefers-reduced-motion:reduce){.sizer-photo>img{transition:none!important}}
@media(max-width:640px){.pizza-size-options{gap:.45rem}.pizza-size-options button{min-width:44px;padding:.5rem .7rem}}
@media print{.pizza-size-options,.party-pizzas,.saved-flight,.selection-indicator{display:none!important}}
.reduce-motion .menu-items .menu-item,.motion-paused .menu-items .menu-item{opacity:1!important;animation:none!important}
html.js.menu-motion-owned .menu-items .menu-item{opacity:1;animation:none!important}
.reduce-motion .menu-items .menu-item:not(:hover),.motion-paused .menu-items .menu-item:not(:hover),.menu-motion-owned .menu-items .menu-item:not(:hover){transform:none!important}

/* ============================================================
   OCTOBER 2026 UPGRADE
   Size comparer panel, group planner (up to 100 people),
   mobile order bar, faster hero text, contrast fixes.
   ============================================================ */

/* ---- Size comparer: stage on the left, facts and controls on the right ---- */
.sizer-panel{min-width:0}
.sizer-readout{font-family:var(--font-display);font-weight:800;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1;color:var(--navy);margin:0 0 1.1rem}
.sizer-readout .sizer-inches{display:inline-block;background:none;padding:0;border-radius:0;font-size:clamp(3.4rem,8vw,5.6rem);line-height:.9;color:var(--navy);margin-right:.15em}
.sizer-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:0 0 .4rem}
.sizer-facts>div{background:var(--sky-2);border-radius:18px;padding:.85rem 1rem}
.sizer-facts dt{font-size:.85rem;font-weight:600;opacity:.75}
.sizer-facts dd{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.15}
.sizer-panel .sizer-control{margin-top:.9rem}
.sizer-next{margin:.2rem 0 .8rem;font-weight:700;color:var(--navy)}
.sizer-plan-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.sizer-plan-link:hover{text-decoration-color:var(--red)}
.sizer-plan-link:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
@media(min-width:900px){
  .sizer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
  .sizer-stage{min-height:360px}
}
@media(max-width:640px){.sizer-facts{gap:.55rem}.sizer-facts>div{padding:.7rem .8rem}.sizer-stage{min-height:210px}}

/* ---- Group planner ---- */
.party-planner{scroll-margin-top:calc(var(--header-h,100px) + 24px);padding:clamp(1.3rem,3.5vw,2.6rem)}
.party-head{max-width:60ch;margin-bottom:1.4rem}
.party-head h3{margin-top:0}
.party-body{display:grid;gap:clamp(1.2rem,3vw,2.4rem)}
@media(min-width:900px){.party-body{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start}}
.party-controls{display:grid;gap:1.3rem;margin:0}
.party-field{border:0;margin:0;padding:0;min-width:0}
.party-label{display:block;font-weight:800;font-size:1.05rem;margin-bottom:.55rem;padding:0}
.party-stepper{display:inline-flex;align-items:center;gap:.5rem;background:var(--paper);border:2px solid var(--navy);border-radius:999px;padding:.3rem}
.party-stepper button{width:48px;height:48px;border:0;border-radius:50%;background:var(--navy);color:var(--paper);font:inherit;font-size:1.6rem;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center}
.party-stepper button:disabled{opacity:.35;cursor:not-allowed}
.party-stepper button:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.party-controls .party-stepper input{width:4.2ch;border:0;background:transparent;padding:0;text-align:center;font-family:var(--font-display);font-weight:800;font-size:1.9rem;color:var(--navy);-moz-appearance:textfield;appearance:textfield;box-shadow:none}
.party-stepper input::-webkit-outer-spin-button,.party-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.party-controls .party-stepper input:focus-visible{outline:3px solid var(--red);outline-offset:4px;border-radius:8px}
.party-limit{margin-top:.6rem;font-weight:700;color:var(--red)}
.party-limit[hidden],.party-hint[hidden]{display:none}
.party-choices{display:flex;flex-wrap:wrap;gap:.5rem}
.party-choices label{position:relative;display:inline-flex}
.party-choices input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.party-choices span{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1rem;border:2px solid var(--navy);border-radius:999px;font-weight:700;color:var(--navy);background:var(--paper);transition:background-color .2s,color .2s}
.party-choices input:checked+span{background:var(--navy);color:var(--paper)}
.party-choices input:hover+span{box-shadow:0 4px 12px rgba(14,58,82,.15)}
.party-choices input:focus-visible+span{outline:3px solid var(--red);outline-offset:3px}
.party-result{background:var(--navy);color:var(--paper);border-radius:26px;padding:clamp(1.2rem,3vw,2rem);min-width:0}
.party-order{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin:0 0 .3rem;font-family:var(--font-display);font-weight:800;font-size:clamp(2.1rem,5vw,3.3rem);line-height:1.05;color:var(--sun)}
.party-order b{font-weight:800}
.party-order span+span::before{content:"+";margin-right:.9rem;opacity:.7}
.party-planner .party-summary{font-weight:700;font-size:1.08rem;margin:0}
.party-pizzas{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:1.2rem 0}
.party-pizzas img{--d:16;display:block;width:calc(var(--pie-max,92px) * var(--pie-scale,1) * var(--d) / 28);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.3))}
.party-more{display:grid;place-items:center;min-width:52px;height:52px;padding:0 .7rem;border-radius:999px;background:var(--sun);color:var(--navy);font-weight:800}
.party-hint{margin:0 0 1rem;padding:.8rem 1rem;border-radius:16px;background:rgba(255,253,247,.1);font-weight:600}
.party-hint button{margin-top:.35rem;display:inline-flex;align-items:center;min-height:40px;padding:.35rem .9rem;border:2px solid var(--sun);border-radius:999px;background:transparent;color:var(--sun);font:inherit;font-weight:700;cursor:pointer}
.party-hint button:hover{background:var(--sun);color:var(--navy)}
.party-hint button:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.party-result .party-note{opacity:.8}
.party-result .btn:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
@media(max-width:640px){.party-pizzas{--pie-scale:.72;gap:6px}}
@media print{.party-stepper button,.party-choices input,.party-hint{display:none!important}.party-result{background:none;color:inherit}}

/* ---- Mobile order bar: both branches beside a centered order action ---- */
@media(max-width:959px){
  .sticky-order{left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom,0px));width:auto;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);direction:ltr;align-items:stretch;gap:.35rem;padding:.45rem;border-radius:999px;background:var(--navy);color:var(--paper);box-shadow:0 14px 40px rgba(14,58,82,.35);transform:translateY(calc(100% + 28px))}
  .sticky-order.show{transform:none}
  .sticky-order a{min-width:0;min-height:44px;white-space:nowrap}
  .sticky-order .btn{justify-content:center;font-size:clamp(.75rem,2.7vw,.85rem);padding:.85rem .35rem;letter-spacing:0}
  .sticky-call{display:flex;align-items:center;justify-content:center;padding:0 .25rem;border-radius:999px;color:var(--paper);font-weight:700;font-size:clamp(.72rem,2.5vw,.85rem);text-align:center;text-decoration:none;box-shadow:inset 0 0 0 2px rgba(255,253,247,.5)}
  .sticky-call:focus-visible,.sticky-order .btn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
  .sticky-order-on .motion-toggle{bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 70px)}
  .sticky-order-on .back-to-top{bottom:calc(max(12px,env(safe-area-inset-bottom,0px)) + 124px)}
  body{padding-bottom:84px}
}
@media(max-width:959px) and (prefers-reduced-motion:reduce){.sticky-order{transition:none}}
.reduce-motion .sticky-order,.motion-paused .sticky-order{transition:none}

/* ---- Hero text is readable from the first paint; only its position animates ---- */
html.js .hero-sub{opacity:.92}
html.js .hero-sub{animation-name:heroRise}
@keyframes heroRise{from{transform:translateY(20px)}to{transform:none}}

/* ---- Contrast ---- */
.loc-tabs button.active{color:var(--paper)}

/* ---- Deals: the heading stays in view beside the long column of offers ---- */
@media(min-width:901px){
  .deal-wrap{align-items:start}
  .deal-wrap>.reveal-left{position:sticky;top:calc(var(--header-h,100px) + 2rem)}
}
.deal-wrap .lead+.btn{margin-top:1.2rem}

/* ---- Reviews: real Yelp reviews in a grid (nothing cut off), Google ratings beside the heading ---- */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.brand-mark{flex:0 0 auto;display:inline-block;vertical-align:middle}
.section--dark#reviews .eyebrow{color:var(--navy)}
.rating-badges{display:flex;flex-wrap:wrap;gap:.8rem}
.rating-badge{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.1rem .75rem .85rem;border-radius:18px;background:var(--paper);color:var(--navy);text-decoration:none;box-shadow:0 8px 24px -12px rgba(14,58,82,.45);transition:transform .25s var(--ease-out),box-shadow .25s}
.rating-badge:hover{transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(14,58,82,.55)}
.rating-badge:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.rating-badge-text{display:flex;flex-direction:column;line-height:1.2;font-size:.9rem;font-weight:600}
.rating-badge-score{display:flex;align-items:center;gap:.4rem}
.rating-badge-score b{font-family:var(--font-display);font-weight:800;font-size:1.45rem;line-height:1}
.rating-badge-stars{color:#f4b400;letter-spacing:.08em;font-size:.95rem}
.rating-badge small{font-size:.8rem;font-weight:500;opacity:.75}
.review-intro{display:flex;align-items:center;gap:.5rem;margin:0 0 1.2rem;font-weight:700;color:var(--navy)}
.review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1.2rem;align-items:start}
.review-embed{min-width:0;min-height:230px;padding:8px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow-card)}
.review-embed iframe{display:block;max-width:100%}
.review-embed span.yelp-review{display:block;padding:1rem;font-weight:600;color:var(--navy)}
.review-embed span.yelp-review a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.review-more{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;margin-top:1.6rem}
.review-more a{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;font-weight:700;color:var(--navy);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.review-more a:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:6px}
@media(max-width:640px){.rating-badges{width:100%}.rating-badge{flex:1 1 100%}}
@media print{.review-embed{box-shadow:none;break-inside:avoid}}

/* Designer signature: separate from restaurant information and navigation. */
.designer-credit-v2{width:min(720px,calc(100% - 2rem));margin:1.75rem auto .25rem;padding:clamp(1.1rem,3vw,1.6rem);border:1px solid rgba(255,210,63,.42);border-radius:24px;background:rgba(255,253,247,.055);color:var(--paper,#fffdf7);text-align:center}
.container>.designer-credit-v2{width:min(100%,720px)}
.designer-credit-v2 .designer-credit-v2__eyebrow{margin:0;color:var(--sun,#ffd23f);font-size:.72rem;font-weight:700;line-height:1.4;letter-spacing:.12em;text-transform:uppercase}
.designer-credit-v2 .designer-credit-v2__name{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:.25rem 0 0;font-family:var(--font-display,inherit);font-size:clamp(1.55rem,3vw,1.85rem);font-weight:800;line-height:1.2;color:var(--paper,#fffdf7);text-decoration:none;text-wrap:balance}
.designer-credit-v2__links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin-top:1.1rem}
.designer-credit-v2 .designer-credit-v2__social{display:flex;align-items:center;gap:.75rem;min-width:0;min-height:76px;padding:.75rem 1rem;border:1px solid rgba(255,253,247,.45);border-radius:16px;background:var(--paper,#fffdf7);color:var(--navy,#0e3a52);text-decoration:none;transition:background-color .18s,border-color .18s}
.designer-credit-v2__icon{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;color:white}
.designer-credit-v2__icon--facebook{background:#1877f2}
.designer-credit-v2__icon--instagram{background:linear-gradient(135deg,#6333c8,#c13584 58%,#e87a36)}
.designer-credit-v2__icon svg{display:block;width:24px;height:24px}
.designer-credit-v2__label{display:flex;flex-direction:column;min-width:0;gap:.2rem;text-align:left;line-height:1.25}
.designer-credit-v2__label strong{font-size:1.05rem;font-weight:800}
.designer-credit-v2__label>span{font-size:.85rem;font-weight:600;overflow-wrap:anywhere}
.designer-credit-v2__arrow{flex:0 0 18px;margin-left:auto;opacity:.7}
.designer-credit-v2 .designer-credit-v2__name:hover{color:var(--sun,#ffd23f)}
.designer-credit-v2 .designer-credit-v2__social:hover{border-color:var(--sun,#ffd23f);background:#fff9eb}
.designer-credit-v2 a:focus-visible{outline:3px solid var(--sun,#ffd23f);outline-offset:4px;border-radius:8px}
@media(max-width:560px){.designer-credit-v2{border-radius:20px;margin-top:1.35rem}.designer-credit-v2__links{grid-template-columns:1fr;gap:.65rem}.designer-credit-v2 .designer-credit-v2__social{min-height:72px;padding:.75rem .9rem}}
@media(prefers-reduced-motion:reduce){.designer-credit-v2 .designer-credit-v2__social{transition:none}}
.reduce-motion .designer-credit-v2 .designer-credit-v2__social,.motion-paused .designer-credit-v2 .designer-credit-v2__social{transition:none}
@media print{.designer-credit-v2{border-color:#777;background:none;color:#222}.designer-credit-v2 .designer-credit-v2__eyebrow,.designer-credit-v2 .designer-credit-v2__name{color:inherit}}