/* Rollzoni's v3: colors, fonts and artwork from the flyer */
:root {
  --orange: #de8027;
  --cream: #efd693;
  --cream-light: #f8ecc8;
  --red: #cf1f23;
  --red-dark: #a3161a;
  --ink: #140c06;
  --slab: "Rokkitt", Rockwell, Georgia, serif;
  --condensed: "Stint Ultra Condensed", "Rockwell Condensed", "Rokkitt", serif;
  --wrap: min(1200px, 100% - 3rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; background: var(--cream-light); color: var(--ink); font: 400 1.25rem/1.45 var(--slab); overflow-x: clip; }
/* Film grain over everything */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.wave { display: block; width: 100%; height: clamp(24px, 4vw, 56px); margin-bottom: -1px; }

h1, h2, .display { font-weight: 800; line-height: .98; text-transform: uppercase; }
.h-xl { font-size: clamp(2.6rem, 6.4vw, 5.2rem); }
.condensed { font-family: var(--condensed); font-size: 1.75em; line-height: 1.25; letter-spacing: .03em; }
.kicker { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

.btn { display: inline-block; padding: .65em 1.3em; border-radius: 999px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; transition: background .2s ease, color .2s ease, box-shadow .3s ease; will-change: transform; }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-ink { background: var(--ink); color: var(--cream); }
.btn-ink:hover { box-shadow: 0 12px 30px -8px rgb(0 0 0 / .6); }
.btn-cream { background: var(--cream); color: var(--ink); }
.btn-cream:hover { background: #fff; box-shadow: 0 0 40px rgb(239 214 147 / .5); }
.btn-line { box-shadow: inset 0 0 0 3px currentColor; }

/* Floating pill header */
.site-header { position: fixed; top: .85rem; left: 50%; translate: -50% 0; z-index: 50; width: min(1240px, 100% - 1.5rem); background: rgb(248 236 200 / .94); backdrop-filter: blur(10px); border-radius: 999px; box-shadow: 0 14px 40px -14px rgb(0 0 0 / .7); }
.site-header .wrap { width: 100%; display: flex; align-items: center; gap: 2rem; padding: .4rem .5rem .4rem 1.5rem; }
.site-header .logo { width: 162px; }
.site-header nav { display: flex; gap: 1.75rem; margin-left: auto; font-weight: 800; text-transform: uppercase; }
.site-header nav a { position: relative; }
.site-header nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.site-header nav a:hover, .site-header nav a[aria-current] { color: var(--red); }
.site-header nav a:hover::after, .site-header nav a[aria-current]::after { transform: scaleX(1); }
.site-header .btn { font-size: 1.05rem; }
.site-header .btn:hover { background: var(--orange); color: var(--ink); }

/* Opening curtain: CSS dismisses it even if the script never runs */
.curtain { display: none; }
.js .curtain { display: grid; position: fixed; inset: 0; z-index: 80; place-items: center; background: var(--red); pointer-events: none; animation: lift .9s var(--ease) 1s forwards; }
.curtain img { width: 200px; padding: 22px; background: #fff; border-radius: 50%; animation: pop .7s var(--ease) both, fade .3s ease .8s forwards; }
@keyframes pop { from { transform: scale(.3) rotate(-120deg); opacity: 0; } }
@keyframes fade { to { opacity: 0; } }
@keyframes lift { to { transform: translateY(-101%); visibility: hidden; } }

/* Home hero: the pie rolls along the flyer's dashed line */
.stage { position: relative; height: 240vh; background: var(--ink); }
.stage-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; color: var(--cream); --pie: min(56vh, 46vw); background: radial-gradient(60% 70% at 50% 78%, rgb(222 128 39 / .5), rgb(207 31 35 / .16) 48%, transparent 72%), var(--ink); }
.embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-title { position: absolute; z-index: 1; top: 11vh; left: 0; right: 0; text-align: center; font-weight: 800; }
.hero-title .sm { display: block; font-size: clamp(1.8rem, 4.4vw, 3.6rem); letter-spacing: .04em; }
.hero-title .big { display: block; color: #fff; font-size: min(17vw, 36vh); line-height: .95; white-space: nowrap; }
.mask { display: block; overflow: hidden; padding-bottom: .04em; }
.mask > i { display: block; font-style: normal; }
.js .mask > i { transform: translateY(110%); animation: rise 1.1s var(--ease) var(--d, 1.25s) forwards; }
@keyframes rise { to { transform: none; } }
.hero-side { position: absolute; z-index: 3; bottom: 11vh; width: calc(50% - var(--pie) / 2 - 3rem); max-width: 420px; }
.hero-side.left { left: 2.5rem; }
.hero-side.right { right: 2.5rem; text-align: right; }
.brush { display: grid; gap: .55rem; }
.brush img:first-child { width: 80%; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.cta .btn { font-size: 1.15rem; }
.hero-side.right .condensed { font-size: 1.65rem; }
.beat2 { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; font-weight: 800; font-size: min(13.5vw, 30vh); line-height: .92; text-transform: uppercase; color: var(--orange); opacity: 0; pointer-events: none; }
.road { position: absolute; z-index: 2; left: 0; right: 0; bottom: 6.5vh; height: 4px; background: repeating-linear-gradient(90deg, var(--red) 0 34px, transparent 34px 54px, var(--red) 54px 66px, transparent 66px 86px); }
.pie-roll { position: absolute; z-index: 4; left: calc(50% - var(--pie) * .465); bottom: calc(6.5vh - var(--pie) * .018); width: var(--pie); max-width: none; transform-origin: 46.5% 50.5%; filter: drop-shadow(0 26px 34px rgb(0 0 0 / .65)); will-change: transform; }
.float { position: absolute; z-index: 5; will-change: transform; filter: drop-shadow(0 18px 18px rgb(0 0 0 / .55)); pointer-events: none; }
.f1 { width: 6vw; top: 45%; left: 5%; }
.f2 { width: 10vw; top: 44%; right: 4%; filter: blur(2px) drop-shadow(0 18px 18px rgb(0 0 0 / .55)); }
.f3 { width: 3.4vw; top: 49%; left: 26%; }
.f4 { width: 4vw; top: 47%; right: 23%; }
.f5 { z-index: 2; width: 13vw; bottom: -14%; left: 24%; filter: blur(5px); }
.f6 { width: 15vw; top: -9%; right: -5%; filter: blur(4px); }

/* Crossed ribbons */
.ribbons { position: relative; z-index: 2; height: clamp(120px, 15vw, 210px); margin-block: -3vw; overflow: clip; }
.ribbon { position: absolute; left: -5%; right: -5%; top: 50%; overflow: hidden; padding-block: .45rem .6rem; background: var(--orange); }
.ribbon.one { rotate: -2.6deg; translate: 0 -50%; }
.ribbon.two { rotate: 2.2deg; translate: 0 -50%; background: var(--cream); }
.ticker-track { display: flex; width: max-content; animation: slide 46s linear infinite; font-size: 1.6rem; font-weight: 800; text-transform: uppercase; white-space: nowrap; }
.ribbon.two .ticker-track { animation-direction: reverse; }
.ticker-track span { padding-inline: 1.5rem; }
.ticker-track span::after { content: "\2022"; margin-left: 3rem; color: var(--red); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Pinned horizontal showcase */
.reel { position: relative; height: 420vh; background: var(--ink); color: var(--cream); }
.reel-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; }
.reel-track { display: flex; align-items: center; gap: 2.5vw; padding-inline: 6vw; will-change: transform; }
.reel-intro { flex: none; width: 46vw; }
.reel-intro .kicker { color: var(--orange); }
.reel-intro h2 { font-size: min(8vw, 20vh); }
.reel-intro p:last-child { margin-top: 1rem; }
.dish { position: relative; flex: none; width: 66vw; height: 76vh; overflow: hidden; border-radius: 34px; background: #000; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .9); }
.dish img { position: absolute; inset: 0; width: 118%; max-width: none; height: 100%; object-fit: cover; will-change: transform; }
.dish::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(10 5 2 / .9), transparent 58%); }
.dish-copy { position: absolute; z-index: 1; left: 2.5rem; right: 2.5rem; bottom: 2rem; }
.dish h3 { color: #fff; font-size: min(7.4vw, 15vh); font-weight: 800; line-height: .95; text-transform: uppercase; }
.dish p { margin-top: .4rem; }
.stamp { position: absolute; z-index: 1; top: 1.75rem; right: 1.75rem; display: grid; place-content: center; width: clamp(104px, 11vw, 150px); aspect-ratio: 1; background: var(--red); color: #fff; border-radius: 50%; font-weight: 800; line-height: 1.05; text-align: center; rotate: 10deg; box-shadow: 0 10px 24px rgb(0 0 0 / .5); }
.stamp small { font-size: .9rem; text-transform: uppercase; }
.stamp b { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.dish.more { display: grid; place-content: center; gap: 1.25rem; justify-items: center; width: 40vw; background: var(--orange); color: var(--ink); text-align: center; }
.dish.more::after { display: none; }
.dish.more img { position: static; width: 72%; mix-blend-mode: multiply; }

/* Make it yours */
.yours { position: relative; overflow: clip; background: var(--red); color: var(--cream); padding-block: clamp(4rem, 9vw, 8rem); }
.yours .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 3rem; }
.yours .kicker { color: var(--cream); }
.yours h2 { color: #fff; font-size: clamp(3rem, 8vw, 6.6rem); }
.yours-price { margin-top: 1rem; font-size: 1.5rem; }
.yours-price b { color: #fff; font-size: 3.4rem; font-weight: 800; line-height: 1; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.chips li { padding: .15em .8em; background: var(--cream); color: var(--ink); border-radius: 999px; font-size: 1.1rem; font-weight: 600; transition: transform .25s var(--ease), background .2s ease; }
.chips li:hover { background: #fff; transform: translateY(-4px) rotate(-3deg) scale(1.08); }
.yours .btn { margin-top: 1.75rem; font-size: 1.2rem; }
.yours-art { width: 118%; max-width: 680px; margin-block: -3rem; filter: drop-shadow(0 34px 34px rgb(60 0 0 / .6)); will-change: transform; }

/* Roll-N-Bake statement */
.claim { overflow: clip; background: var(--cream); padding-block: clamp(5rem, 11vw, 10rem); text-align: center; }
.seal { position: relative; width: 300px; aspect-ratio: 1; margin: 0 auto 2.25rem; }
.seal svg { position: absolute; inset: 0; animation: turn 26s linear infinite; }
.seal text { font: 800 15.5px var(--slab); letter-spacing: .13em; text-transform: uppercase; fill: var(--ink); }
.seal div { position: absolute; inset: 38px; display: grid; place-items: center; background: #fff; border: 4px solid var(--red); border-radius: 50%; }
.seal img { width: 76%; }
@keyframes turn { to { transform: rotate(360deg); } }
.claim h2 { font-size: clamp(2.8rem, 8.4vw, 7.2rem); }
.claim h2 .w { white-space: nowrap; }
.js .claim h2 .w { opacity: .13; transition: opacity .3s linear; }
.js .claim h2 .w.on { opacity: 1; }
.claim p { margin-top: 1rem; }

/* Catering teaser */
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.cater-cta { position: relative; overflow: hidden; background: var(--orange); padding-block: clamp(4rem, 9vw, 8rem); }
.cater-cta .wrap { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 2.5rem; }
.cater-cta .kicker { color: var(--ink); }
.cater-cta p.body { margin-top: 1rem; max-width: 32em; }
.cater-cta .btn { margin-top: 1.5rem; font-size: 1.25rem; }
.cater-cta .sketch { mix-blend-mode: multiply; }

/* Inner page heads */
.page-head { position: relative; overflow: hidden; background: radial-gradient(70% 90% at 70% 100%, rgb(222 128 39 / .45), rgb(207 31 35 / .18) 50%, transparent 76%), var(--ink); color: var(--cream); padding-top: clamp(8rem, 15vw, 12rem); }
.page-head .wrap { position: relative; z-index: 1; padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { font-size: clamp(3.2rem, 11vw, 9.5rem); color: #fff; }
.page-head p { max-width: 34em; margin-top: .75rem; }
.page-head .wave { position: relative; z-index: 1; color: var(--cream-light); }

/* Menu page */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 2rem; margin-bottom: 2.25rem; }
.pizza-block { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
.pizza-block .pie { width: 100%; filter: drop-shadow(0 26px 30px rgb(40 15 0 / .4)); transform-origin: 46.5% 50.5%; will-change: transform; }
.item { display: flex; justify-content: space-between; gap: 1.5rem; padding-block: 1.1rem; border-bottom: 3px dashed var(--orange); }
.item h3 { font-size: 1.75rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.item p { margin-top: .25rem; font-size: 1.15rem; line-height: 1.3; }
.price { flex: none; color: var(--red); font-size: 2rem; font-weight: 800; line-height: 1.1; }
.block-title { margin: clamp(3.5rem, 7vw, 5rem) 0 1.75rem; }
.side-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; perspective: 1400px; }
.side { position: relative; grid-column: span 2; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 4px solid var(--ink); border-radius: 22px; }
.side.wide { grid-column: span 3; }
.side img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-bottom: 4px solid var(--ink); }
.side-body { flex: 1; display: flex; flex-direction: column; padding: 1rem 1.15rem 1.2rem; }
.side-top { display: flex; justify-content: space-between; gap: 1rem; }
.side h3 { font-size: 1.6rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.side .hook { margin-top: .35rem; font-size: 1rem; font-weight: 800; text-transform: uppercase; }
.side .desc { font-size: 1.15rem; line-height: 1.3; }
.tiers { display: flex; justify-content: space-between; gap: .75rem; margin-top: auto; padding-top: .9rem; }
.tiers li { display: flex; flex-direction: column; font-size: .95rem; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.tiers .price { font-size: 1.75rem; }
.side.orange { background: var(--orange); }
.side.orange .price { color: var(--ink); }
.side.red { background: var(--red); color: var(--cream); }
.side.red .price { color: #fff; }

/* Catering page */
.occasions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; perspective: 1000px; }
.occasions li { display: grid; place-items: center; padding: 1.5rem 1.25rem; background: var(--orange); border: 4px solid var(--ink); border-radius: 20px; font-size: 1.6rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; text-align: center; }
.occasions li:nth-child(even) { background: var(--cream); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 3.4rem; height: 3.4rem; margin-bottom: .75rem; background: var(--red); color: #fff; border-radius: 50%; font-size: 1.9rem; font-weight: 800; }
.steps h3 { font-size: 1.7rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.steps p { margin-top: .3rem; }
.dark { background: var(--ink); color: var(--cream); }
.dark .kicker { color: var(--orange); }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ease), filter .4s ease; }
.gallery img:hover { transform: scale(1.06); filter: saturate(1.25); }

/* Menu page: cinematic head */
.page-head.cine { min-height: 82vh; display: flex; flex-direction: column; justify-content: flex-end; --hp: min(50vh, 36vw); }
.page-head.cine .wrap { padding-bottom: 7vh; }
.page-head.cine h1 { font-size: clamp(3.4rem, 9vw, 9rem); }
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; max-width: 56%; }
.jump a { display: block; padding: .2em .85em; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--cream); font-weight: 800; text-transform: uppercase; font-size: 1.05rem; transition: background .2s ease, color .2s ease; }
.jump a:hover { background: var(--cream); color: var(--ink); }
.page-head .road { bottom: calc(clamp(24px, 4vw, 56px) + 3vh); z-index: 0; }
.head-pie { position: absolute; z-index: 1; right: 5vw; bottom: calc(clamp(24px, 4vw, 56px) + 3vh - var(--hp) * .018); width: var(--hp); max-width: none; transform-origin: 46.5% 50.5%; filter: drop-shadow(0 26px 34px rgb(0 0 0 / .65)); will-change: transform; }
.head-f1 { width: 6vw; top: 22%; right: 42%; }
.head-f2 { width: 3.4vw; top: 30%; right: 6%; }

/* Menu page: pizza */
.mega { font-size: clamp(3rem, 8.4vw, 7.4rem); font-weight: 800; line-height: .95; text-transform: uppercase; }
.pizza-sec { overflow: clip; padding-block: clamp(4rem, 8vw, 7rem); }
.pizza-sec .pizza-block { grid-template-columns: 1fr 1fr; align-items: start; width: min(1320px, 100%); margin-inline: auto; padding-right: 2.5rem; }
.pizza-sec .pie { position: sticky; top: 14vh; width: 134%; max-width: none; margin-left: -38%; }
.pizza-sec .item { padding-block: 1.5rem; }
.pizza-sec .item h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.pizza-sec .price { font-size: clamp(2.1rem, 3.4vw, 3rem); }
.item.has-chips { flex-wrap: wrap; row-gap: .45rem; }
.pizza-sec .chips { flex-basis: 100%; gap: .35rem; margin-top: .1rem; }
.pizza-sec .chips li { padding: .1em .65em; font-size: 1rem; }

/* Menu page: full-screen features */
.feat { display: grid; grid-template-columns: 1.15fr 1fr; min-height: 92vh; }
.feat.flip { grid-template-columns: 1fr 1.15fr; }
.feat.flip .feat-photo { order: 2; }
.feat-photo { position: relative; overflow: hidden; min-height: 54vh; }
.feat-photo img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; will-change: transform; }
.feat-copy { align-self: center; padding: clamp(2.5rem, 5vw, 4.5rem); }
.feat-copy > p:not(.kicker) { margin-top: .75rem; font-size: 1.4rem; }
.feat .mega { font-size: clamp(3rem, 6.8vw, 6rem); margin-top: .3rem; }
.feat.ink, .duo-panel.ink { background: var(--ink); color: var(--cream); }
.feat.ink .kicker, .duo-panel.ink .kicker { color: var(--orange); }
.feat.cream { background: var(--cream); }
.feat.red { background: var(--red); color: var(--cream); }
.feat.red .kicker { color: #fff; }
.feat.red .mega { color: #fff; }
.stamps { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.75rem; }
.stamps li { display: grid; place-content: center; justify-items: center; width: clamp(112px, 11vw, 150px); aspect-ratio: 1; background: var(--red); color: #fff; border-radius: 50%; font-size: .95rem; font-weight: 800; line-height: 1.1; text-align: center; text-transform: uppercase; box-shadow: 0 12px 24px -8px rgb(0 0 0 / .55); }
.stamps li:nth-child(odd) { rotate: -6deg; }
.stamps li:nth-child(even) { rotate: 5deg; }
.stamps b { font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.feat.red .stamps li { background: var(--cream); color: var(--ink); }
.feat.red .stamps b { color: var(--red); }

.duo { display: grid; grid-template-columns: 1fr 1fr; }
.duo-panel { display: flex; flex-direction: column; justify-content: center; min-height: 66vh; padding: clamp(2.5rem, 5vw, 4.5rem); }
.duo-panel.orange { background: var(--orange); }
.duo-panel.orange .kicker { color: var(--ink); }
.duo-panel .mega { margin-top: .3rem; font-size: clamp(2.6rem, 5.4vw, 4.8rem); }
.duo-panel > p:not(.kicker, .duo-price) { margin-top: .75rem; }
.duo-price { margin-top: 1.25rem; font-size: clamp(4rem, 9vw, 8rem); font-weight: 800; line-height: 1; color: #fff; }
.duo-panel.ink .duo-price { color: var(--orange); }

/* Catering page: collage head */
.page-head.collage { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; background: radial-gradient(55% 60% at 50% 55%, rgb(222 128 39 / .42), rgb(207 31 35 / .16) 55%, transparent 80%), var(--ink); }
.page-head.collage .wrap { margin-block: auto; padding-bottom: 0; z-index: 6; }
.page-head.collage h1 { font-size: clamp(3rem, 10.4vw, 8.8rem); }
.page-head.collage p { margin-inline: auto; }
.page-head.collage .cta { justify-content: center; }
.page-head.collage .cta .btn { font-size: 1.3rem; }
.c1, .c2, .c3, .c4 { object-fit: cover; aspect-ratio: 4 / 5; border: 6px solid var(--cream); border-radius: 20px; }
.c1 { width: 19vw; top: 13%; left: -3vw; }
.c2 { width: 16vw; top: 11%; right: 1vw; }
.c3 { width: 16vw; bottom: 3%; left: 4vw; }
.c4 { width: 20vw; bottom: 5%; right: -4vw; }

/* Catering page: occasions as giant rows */
.occ-sec { padding-block: clamp(4rem, 8vw, 7rem); }
.occ-sec .occasions { display: block; margin-top: 1.25rem; perspective: none; }
.occ-sec .occasions li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .28em 0; background: none; border: 0; border-top: 3px solid var(--ink); border-radius: 0; font-size: clamp(2.3rem, 8.2vw, 7rem); line-height: 1; text-align: left; transition: color .25s ease, padding .4s var(--ease); }
.occ-sec .occasions li:last-child { border-bottom: 3px solid var(--ink); }
.occ-sec .occasions img { width: 1.5em; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.occ-foot { margin-top: 1.5rem; }
@media (hover: hover) and (pointer: fine) {
  .occ-sec .occasions li:hover { color: var(--red); padding-left: .35em; }
  .occ-sec .occasions img { position: fixed; z-index: 30; left: 0; top: 0; width: 320px; aspect-ratio: 4 / 3; margin: -120px 0 0 44px; border: 6px solid var(--cream); border-radius: 18px; box-shadow: 0 30px 50px -14px rgb(0 0 0 / .6); pointer-events: none; opacity: 0; transform: translate(var(--px, 50vw), var(--py, 50vh)) rotate(-5deg) scale(.7); transition: opacity .25s ease, scale .3s ease; }
  .occ-sec .occasions li:hover img { opacity: 1; transform: translate(var(--px, 50vw), var(--py, 50vh)) rotate(-5deg) scale(1); }
}

/* Catering page: pie rolls through the steps */
.roll-steps { position: relative; height: 330vh; background: var(--ink); color: var(--cream); margin-top: -3vw; }
.roll-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; padding-top: 15vh; --sp: min(30vh, 22vw); background: radial-gradient(70% 60% at 50% 72%, rgb(222 128 39 / .3), transparent 72%), var(--ink); }
.roll-sticky .wrap { position: relative; z-index: 1; }
.roll-sticky .kicker { color: var(--orange); }
.roll-sticky h2 { font-size: min(6.2vw, 12vh); }
.roll-sticky .road { top: calc(15vh + min(12.4vw, 24vh) + 2.2rem + var(--sp) + 2vh); bottom: auto; }
.step-pie { position: absolute; z-index: 3; left: 0; top: calc(15vh + min(12.4vw, 24vh) + 2.2rem + 2vh); width: var(--sp); max-width: none; transform-origin: 46.5% 50.5%; filter: drop-shadow(0 16px 20px rgb(0 0 0 / .6)); will-change: transform; }
.roll-sticky .steps { position: absolute; left: 50%; translate: -50% 0; top: calc(15vh + min(12.4vw, 24vh) + 2.2rem + var(--sp) + 5vh); }
.js .roll-sticky .steps li { opacity: .28; transition: opacity .4s ease; }
.js .roll-sticky .steps li.on { opacity: 1; }
.steps li.on::before { background: var(--orange); color: var(--ink); }

/* Catering page: final call */
.phone-cta { position: relative; overflow: hidden; background: var(--red); color: var(--cream); padding-block: clamp(5rem, 10vw, 9rem); text-align: center; }
.phone-cta .wrap { position: relative; z-index: 1; }
.phone-cta .kicker { color: var(--cream); }
.big-phone { display: block; margin-top: .4rem; color: #fff; font-size: min(11.6vw, 9.6rem); font-weight: 800; line-height: 1; white-space: nowrap; transition: color .2s ease; }
.big-phone:hover { color: var(--cream); }
.phone-cta .pitch { max-width: 34em; margin: 1.25rem auto 0; }
.phone-cta .sketch { position: absolute; right: -4vw; bottom: -6vw; width: 34vw; opacity: .3; mix-blend-mode: multiply; }


/* Download section */
.takeout { position: relative; overflow: clip; color: var(--cream); padding-block: clamp(4rem, 9vw, 8rem); background: radial-gradient(60% 75% at 28% 55%, rgb(222 128 39 / .46), rgb(207 31 35 / .2) 52%, transparent 78%), var(--ink); }
.takeout::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--red) 0 34px, transparent 34px 54px, var(--red) 54px 66px, transparent 66px 86px); }
.takeout-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; width: var(--wrap); margin-inline: auto; }
.fan { --fan: 1; position: relative; aspect-ratio: 1 / 1; }
.fan img { position: absolute; left: 20%; top: 2%; width: 60%; border-radius: 10px; box-shadow: 0 34px 50px -16px rgb(0 0 0 / .85); transition: translate .5s var(--ease), scale .5s var(--ease); }
.sheet-b { transform: rotate(calc(-2deg - 11deg * var(--fan))) translateX(calc(-22% * var(--fan))); }
.sheet-f { transform: rotate(calc(2deg + 9deg * var(--fan))) translate(calc(20% * var(--fan)), calc(5% * var(--fan))); }
.takeout-in:hover .sheet-b { translate: -14px -12px; }
.takeout-in:hover .sheet-f { translate: 14px -12px; scale: 1.03; }
.takeout .kicker { color: var(--orange); }
.takeout h2 { color: #fff; font-size: clamp(3rem, 7vw, 6rem); }
.takeout .condensed { margin-top: .75rem; font-size: 2rem; }
.dl { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.75rem; }
.dl-seal { position: relative; flex: none; display: grid; place-items: center; width: 150px; aspect-ratio: 1; transition: transform .45s var(--ease); }
.takeout-in:hover .dl-seal { transform: scale(1.1) rotate(-8deg); }
.dl-ring { position: absolute; inset: 0; animation: turn 18s linear infinite; }
.dl-ring text { font: 800 15px var(--slab); letter-spacing: .1em; text-transform: uppercase; fill: var(--cream); }
.dl-arrow { width: 92px; aspect-ratio: 1; padding: 22px; background: var(--red); color: #fff; border-radius: 50%; box-shadow: 0 0 34px rgb(207 31 35 / .7); }
.dl-text { font-size: 1.9rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; }
.dl-text small { display: block; margin-top: .3rem; color: var(--orange); font-size: 1.05rem; letter-spacing: .06em; }

/* Mobile slide-out menu, built by script.js */
.burger, .drawer, .scrim { display: none; }
html.menu-open { overflow: hidden; }

/* Scroll reveals, set up by script.js */
.js .reveal { opacity: 0; transform: translateY(44px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }
.js [data-tilt].in { transition: opacity .9s var(--ease), transform .25s ease-out; transition-delay: 0s; }

/* Footer */
.site-footer { overflow: hidden; background: var(--ink); color: var(--cream); padding-top: 3rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2.25rem; }
.site-footer strong { display: block; font-size: 1.5rem; font-weight: 800; text-transform: uppercase; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-top: .6rem; font-weight: 800; text-transform: uppercase; color: var(--orange); }
.site-footer nav a:hover { color: #fff; }
.phones { text-align: right; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.15; color: var(--orange); }
.phones a { display: block; }
.phones a:hover { color: #fff; }
.footer-word { margin-top: 1rem; color: var(--orange); font-size: 17.4vw; font-weight: 800; line-height: .78; text-align: center; text-transform: uppercase; white-space: nowrap; transform: translateY(.12em); }

.call-bar { display: none; position: fixed; z-index: 40; inset: auto 0 0 0; padding: .85rem; background: var(--red); color: #fff; font-size: 1.25rem; font-weight: 800; text-align: center; text-transform: uppercase; }

@media (max-width: 980px) {
  .occasions { grid-template-columns: repeat(2, 1fr); }
  .side, .side.wide { grid-column: span 3; }
}
/* Phones and short screens: no pinning, native swipe for the reel */
@media (max-width: 760px), (max-height: 600px) {
  .stage { height: auto; }
  .stage-sticky { position: relative; height: auto; display: flex; flex-direction: column; padding-top: 6.5rem; --pie: 84vw; }
  .hero-title { position: relative; top: 0; }
  .hero-title .sm { font-size: 7.6vw; }
  .hero-side { position: relative; bottom: auto; width: auto; max-width: none; padding-inline: 1.5rem; text-align: left !important; }
  .hero-side.left { left: 0; margin-top: 1.5rem; }
  .hero-side.right { right: 0; margin-top: 1rem; }
  .beat2 { display: none; }
  .pie-roll { position: relative; bottom: auto; left: calc(50% - var(--pie) * .465); margin-top: 1.5rem; margin-bottom: 1.5rem; flex: none; }
  .road { bottom: 1.5rem; }
  .f1, .f2, .f3, .f4, .f5 { display: none; }
  .f6 { width: 26vw; top: 52%; right: -12vw; }
  .reel { height: auto; padding-block: 3.5rem; }
  .reel-sticky { position: static; height: auto; display: block; overflow: visible; }
  .reel-track { flex-direction: column; align-items: stretch; gap: 1.25rem; padding-inline: 1.25rem; }
  .reel-intro { width: auto; margin-bottom: .5rem; }
  .reel-intro h2 { font-size: 15vw; }
  .dish { width: 100%; height: auto; aspect-ratio: 4 / 5; max-height: 88vh; border-radius: 24px; }
  .dish img { width: 100%; }
  .dish.more { width: 100%; aspect-ratio: auto; padding: 2.5rem 1rem; }
  .dish.more img { width: 62%; }
  .dish h3 { font-size: 11.5vw; }
  .dish-copy { left: 1.25rem; right: 1.25rem; bottom: 1.25rem; }
  .stamp { top: 1rem; right: 1rem; width: 96px; }
  .stamp b { font-size: 1.6rem; }
}
@media (max-width: 760px), (max-height: 600px) {
  .roll-steps { height: auto; }
  .roll-sticky { position: relative; height: auto; padding-block: 5rem 3.5rem; }
  .roll-sticky h2 { font-size: 9vw; }
  .roll-sticky .road, .step-pie { display: none; }
  .roll-sticky .steps { position: relative; left: 0; translate: none; top: 0; margin: 2rem auto 0; }
  .js .roll-sticky .steps li { opacity: 1; }
}
@media (max-width: 760px) {
  .page-head.cine { min-height: 0; padding-top: 7rem; --hp: 56vw; }
  .page-head.cine .wrap { padding-bottom: 0; }
  .jump { max-width: 100%; }
  .page-head .road { bottom: calc(clamp(24px, 4vw, 56px) + 1rem); }
  .head-pie { position: relative; right: auto; bottom: auto; align-self: flex-end; margin: 1.5rem 6vw calc(clamp(24px, 4vw, 56px) + .6rem) 0; }
  .head-f1, .head-f2 { display: none; }
  .pizza-sec .pizza-block { display: block; padding-inline: 1.5rem; }
  .pizza-sec .pie { position: relative; top: auto; width: 96vw; margin: -2rem 0 1rem -32vw; }
  .feat, .feat.flip { grid-template-columns: 1fr; min-height: 0; }
  .feat.flip .feat-photo { order: 0; }
  .feat-photo { min-height: 62vw; }
  .feat-copy { padding: 2rem 1.5rem 2.75rem; }
  .duo { grid-template-columns: 1fr; }
  .duo-panel { min-height: 0; padding: 2.75rem 1.5rem; }
  .page-head.collage { min-height: 0; padding-top: 7rem; }
  .page-head.collage .wrap { margin-block: 0 2rem; }
  .page-head.collage .cta .btn { font-size: clamp(.9rem, 4.7vw, 1.05rem); white-space: nowrap; }
  .c1, .c2, .c3, .c4 { position: relative; display: none; }
  main .btn { display: block; width: fit-content; margin-inline: auto; }
  .dl { justify-content: center; }
  .js .site-header nav { display: none; }
  .burger { display: grid; gap: 5px; flex: none; width: 44px; height: 44px; align-content: center; justify-items: center; padding: 0; background: var(--red); border: 0; border-radius: 50%; cursor: pointer; }
  .burger span { display: block; width: 20px; height: 3px; background: #fff; border-radius: 2px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 60; background: rgb(10 5 2 / .65); opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; }
  .scrim.open { opacity: 1; visibility: visible; }
  .drawer { display: flex; flex-direction: column; position: fixed; z-index: 70; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); padding: 1.25rem 1.5rem 1.75rem; overflow-y: auto; color: var(--cream); background: radial-gradient(90% 55% at 80% 100%, rgb(222 128 39 / .42), rgb(207 31 35 / .16) 55%, transparent 80%), var(--ink); border-left: 6px solid var(--orange); box-shadow: -20px 0 50px rgb(0 0 0 / .55); transform: translateX(105%); visibility: hidden; transition: transform .5s var(--ease), visibility .5s; }
  .drawer.open { transform: none; visibility: visible; }
  .drawer-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; background: var(--red); border: 0; border-radius: 50%; cursor: pointer; }
  .drawer-close::before, .drawer-close::after { content: ""; position: absolute; left: 12px; top: 20px; width: 20px; height: 3px; background: #fff; border-radius: 2px; rotate: 45deg; }
  .drawer-close::after { rotate: -45deg; }
  .drawer-logo { display: grid; place-items: center; width: 132px; aspect-ratio: 1; margin-top: .5rem; background: #fff; border: 3px solid var(--red); border-radius: 50%; }
  .drawer-logo img { width: 76%; }
  .drawer-nav { display: grid; margin-top: 1.5rem; }
  .drawer-nav a { padding: .35rem 0; border-bottom: 2px dashed rgb(222 128 39 / .55); font-size: 2.3rem; font-weight: 800; line-height: 1.1; text-transform: uppercase; opacity: 0; transform: translateX(30px); transition: opacity .5s var(--ease), transform .5s var(--ease), color .2s ease; transition-delay: 0s; }
  .drawer.open .drawer-nav a { opacity: 1; transform: none; transition-delay: calc(.12s + var(--i) * .07s); }
  .drawer-nav a[aria-current] { color: var(--orange); }
  .drawer-contact { margin-top: auto; padding-top: 1.75rem; }
  .drawer-contact .kicker { color: var(--orange); }
  .drawer-contact a { display: block; color: #fff; font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
  .drawer-contact p:last-child { margin-top: .5rem; }
  .stamps { flex-wrap: nowrap; justify-content: center; gap: .6rem; }
  .stamps li { flex: none; width: min(104px, calc((100vw - 4.2rem) / 3)); font-size: .8rem; white-space: nowrap; }
  .stamps b { font-size: 1.5rem; }
  .hero-side .cta { justify-content: center; }
  .hero-side .cta .btn { font-size: clamp(.9rem, 4.7vw, 1.15rem); white-space: nowrap; }
  .occ-sec .occasions li { font-size: 9.4vw; }
  .cater-cta .btn.cta-center { display: block; width: fit-content; margin-inline: auto; font-size: clamp(.9rem, 4.3vw, 1.25rem); white-space: nowrap; }
  .takeout-in { grid-template-columns: 1fr; }
  .takeout .condensed { font-size: 1.6rem; }
  .dl-seal { width: 118px; }
  .dl-arrow { width: 72px; padding: 17px; }
  .dl-text { font-size: 1.35rem; }
  .phone-cta .sketch { width: 56vw; }
  body { font-size: 1.15rem; padding-bottom: 3.3rem; }
  .site-header .wrap { gap: .75rem; padding: .35rem 1.1rem; justify-content: space-between; }
  .js .site-header .logo { width: 176px; }
  .site-header nav { margin-left: 0; gap: .8rem; font-size: .92rem; }
  .site-header .btn { display: none; }
  .yours .wrap, .cater-cta .wrap, .pizza-block { grid-template-columns: 1fr; gap: 1.5rem; }
  .yours-art { order: -1; width: 74%; margin: -1rem auto 0; }
  .claim h2 { font-size: 12.4vw; }
  .seal { width: 240px; }
  .seal div { inset: 30px; }
  .side, .side.wide { grid-column: span 6; }
  .occasions { gap: .75rem; }
  .occasions li { padding: 1.1rem .5rem; font-size: 1.2rem; }
  .steps { grid-template-columns: 1fr; gap: 1.5rem; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .site-footer .wrap { grid-template-columns: 1fr; gap: 1.25rem; }
  .phones { text-align: left; }
  .call-bar { display: block; }
}
@media (max-width: 360px) {
  .site-header .wrap { gap: .4rem; padding-inline: .75rem; }
  .js .site-header .logo { width: 150px; }
  .site-header nav { gap: .5rem; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .curtain { display: none; }
  .js .mask > i { transform: none; animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .claim h2 .w { opacity: 1; }
  .ticker-track, .seal svg, .dl-ring { animation: none; }
  .drawer, .drawer-nav a, .scrim { transition: none !important; }
  .stage { height: auto; min-height: 100vh; }
  .roll-steps { height: auto; }
  .roll-sticky { position: relative; height: auto; padding-block: 6rem 4rem; }
  .roll-sticky .road, .step-pie { display: none; }
  .roll-sticky .steps { position: relative; left: 0; translate: none; top: 0; margin: 2rem auto 0; }
  .js .roll-sticky .steps li { opacity: 1; }
  .reel { height: auto; }
  .reel-sticky { position: static; height: auto; overflow-x: auto; }
  .beat2 { display: none; }
}