/* Pizza AMARIS · design concept by KERA Tech Solutions
   Rebuilt section by section after the Pizza Amici site (Awwwards HM): baby blue + navy retro,
   ticket cards, polaroids, tilted ribbons, pinned step tickets, half/half plate.
   Fonts: Bebas Neue (≈ Salo), Instrument Serif (≈ Awesome Serif), Azeret Mono, La Belle Aurore. */

/* ---------- tokens ---------- */
:root {
  --navy: #0f2c56;
  --blue: #c0deee;
  --off: #f2ede9;
  --beige: #eae1da;
  --dough: #ece6e1;
  --brown: #4f3c2c;
  --dark-brown: #2f241a;
  --gold: #ef9e34; /* AMARIS menu orange (reference gold #e3af04) */
  --white: #fff;
  --red: #d42a2f;
  --ink: #111;
  --f-head: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  --f-alt: 'Instrument Serif', 'Times New Roman', serif;
  --f-mono: 'Azeret Mono', ui-monospace, monospace;
  --f-hand: 'La Belle Aurore', cursive;
  --ease-out: cubic-bezier(.19, 1, .22, 1);
  --ease-back: cubic-bezier(.175, .885, .32, 1.275);
  --ease-io: cubic-bezier(.625, .05, 0, 1);
  /* fluid em scale (Osmo scaling, as the reference): 1em = 12px at 1440, 16px at 1920 */
  --size-unit: 16;
  --size-container-ideal: 1920;
  --size-container-min: 992px;
  --size-container-max: 2240px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
  --s96: 6em; --s128: 8em; --s160: 10em;
  --edge-h: .78125vw;
  --bg: var(--off); --fg: var(--navy); --bd: var(--navy);
}
@media (max-width: 991px) { :root { --size-container-ideal: 991; --size-container-min: 768px; --size-container-max: 991px; --s96: 4.75em; --s128: 6.5em; --s160: 8em; } }
@media (max-width: 767px) { :root { --size-container-ideal: 767; --size-container-min: 480px; --size-container-max: 767px; --s96: 4.25em; --s128: 5.5em; --s160: 7em; --edge-h: 1.4vw; } }
@media (max-width: 479px) { :root { --size-container-ideal: 479; --size-container-min: 320px; --size-container-max: 479px; --s96: 3.5em; --s128: 4.75em; --s160: 6em; --edge-h: 2vw; } }

/* themes (reference theme classes) */
.theme-dark { --bg: var(--navy); --fg: var(--blue); --bd: var(--blue); }
.theme-light { --bg: var(--off); --fg: var(--navy); --bd: var(--navy); }
.theme-blue { --bg: var(--blue); --fg: var(--navy); --bd: var(--navy); }
.theme-brown { --bg: var(--brown); --fg: var(--blue); --bd: var(--blue); }
.theme-blue-brown { --bg: var(--blue); --fg: var(--brown); --bd: var(--brown); }
.theme-gold { --bg: var(--gold); --fg: var(--navy); --bd: var(--navy); }
.theme-white { --bg: var(--white); --fg: var(--navy); --bd: var(--navy); }
.theme-beige { --bg: var(--beige); --fg: var(--navy); --bd: var(--navy); }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0; font-family: var(--f-mono); font-size: var(--size-font); font-weight: 500; line-height: 1.3;
  letter-spacing: -.04em; color: var(--navy); background: var(--off);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
main, .footer { overflow-x: clip; }
.nav { max-width: 100vw; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, h4, p, figure, blockquote, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
::selection { background: var(--navy); color: var(--blue); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 1em; top: -10em; z-index: 300; background: var(--navy); color: var(--blue); padding: 1em 1.5em; font-size: 1.125em; }
.skip:focus { top: 1em; }
.o-60 { opacity: .6; } .o-80 { opacity: .8; }

/* type */
.heading-xl, .heading-l, .heading-m, .step-title, .ribbon-title, .tag-card_heading, .dish-card_title, .dd-n, .mq-big, .badge-n {
  font-family: var(--f-head); font-weight: 400; text-transform: uppercase; letter-spacing: -.015em; line-height: .88;
}
.nw { white-space: nowrap; }
.heading-xl { font-size: 8em; }
.heading-l { font-size: 6.5em; }
.heading-m { font-size: 5.5em; }
.p-xl { font-size: 2.5em; line-height: 1; }
.p-l { font-size: 2em; line-height: 1; }
.p-r { font-size: 1.25em; line-height: 1.3; font-weight: 500; }
.p-s { font-size: 1.125em; line-height: 1.3; }
.p-xs { font-size: 1em; line-height: 1.3; }
.p-xxs { font-size: .875em; line-height: 1.4; }
.alt { font-family: var(--f-alt); letter-spacing: 0; line-height: 1.05; }
/* reference "alt O": a perfectly round O (stylistic set of Salo) */
.ao { display: inline-block; position: relative; width: .7em; height: .7em; margin: 0 .015em; -webkit-text-fill-color: transparent; vertical-align: baseline; overflow: hidden; }
.ao::before { content: ""; position: absolute; inset: 0; border: .115em solid currentColor; border-radius: 50%; }
.hand {
  font-family: var(--f-hand); font-size: 2.5em; line-height: .9; letter-spacing: 0; color: var(--navy);
  -webkit-text-stroke: 7px var(--blue); paint-order: stroke fill; text-wrap: pretty;
}
.stars { display: inline-flex; gap: .1em; }
.stars svg { width: 1.125em; height: 1.125em; }

/* layout */
.container-col-11 { width: 100%; max-width: 91.6667%; margin: 0 auto; }
.container-col-08 { width: 100%; max-width: 66.6667%; margin: 0 auto; }
.max-512 { max-width: 32em; }
.btn-group { display: flex; gap: 1em; justify-content: center; align-items: center; flex-wrap: wrap; }
.btn-group.is-stacked { flex-direction: column; align-items: stretch; gap: .5em; }

/* checker edge (reference section-border: 2-row checkerboard, 96/1920 cells) */
.edge { position: relative; z-index: 2; width: 100%; height: calc(var(--edge-h) * 2); color: var(--ec, var(--navy));
  background:
    linear-gradient(90deg, transparent 50%, currentColor 50%) 0 0 / 10vw var(--edge-h) repeat-x,
    linear-gradient(90deg, currentColor 50%, transparent 50%) 0 100% / 10vw var(--edge-h) repeat-x; }
.edge--navy { --ec: var(--navy); }
.edge--light { --ec: var(--off); }
.edge--steps { --ec: var(--blue); }

/* ---------- buttons (reference: notched ticket buttons, text rolls up) ---------- */
.btn, .nav-button {
  --nr: .42em; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  height: 2.75em; padding: 0 1em; font-family: var(--f-alt); font-style: italic; font-size: 1.625em; line-height: 1.4;
  letter-spacing: 0; color: var(--fg); -webkit-text-stroke: .35px currentColor; isolation: isolate; white-space: nowrap;
}
.btn::before, .nav-button::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bg);
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--nr), #000 calc(var(--nr) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--nr), #000 calc(var(--nr) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--nr), #000 calc(var(--nr) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--nr), #000 calc(var(--nr) + .5px)) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 var(--nr), #000 calc(var(--nr) + .5px)) top left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, #0000 var(--nr), #000 calc(var(--nr) + .5px)) top right / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, #0000 var(--nr), #000 calc(var(--nr) + .5px)) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, #0000 var(--nr), #000 calc(var(--nr) + .5px)) bottom right / 51% 51% no-repeat;
  transition: transform .5s var(--ease-back);
}
.btn:hover::before { transform: scale(1.03, 1.06); }
.btn.is-full { width: 100%; }
.btn-t { display: flex; flex-direction: column; height: 1.4em; overflow: hidden; }
.btn-t > span { display: flex; align-items: center; justify-content: center; height: 1.4em; flex: none; line-height: 1; transition: transform .35s var(--ease-back); }
.btn:hover .btn-t > span, .btn:focus-visible .btn-t > span { transform: translateY(-100%); }

/* ---------- loader ---------- */
.loader { display: none; }
.js:not(.rm) .loader { display: block; position: fixed; inset: 0; z-index: 200; pointer-events: none; }
.no-loader .loader { display: none !important; }
.loader__bg { position: absolute; inset: 0; background: var(--blue); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.loader__logo { width: 18em; visibility: hidden; }
.stack-logo { display: inline-flex; flex-direction: column; align-items: center; font-family: var(--f-head); font-style: italic; text-transform: uppercase; line-height: .78;
  font-size: 7.5em; color: var(--white); transform: rotate(-8deg) skewX(-6deg); text-shadow: .045em .045em 0 var(--navy); -webkit-text-stroke: .012em var(--navy); letter-spacing: .01em; }
.stack-logo .stripe { margin-top: .12em; }
.stripe { display: block; width: 100%; height: .08em; background: linear-gradient(90deg, var(--red) 0 50%, var(--ink) 50% 100%); transform: skewY(-3deg); }
.loader .stack-logo { font-size: 6.5em; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; flex-direction: column; gap: 1em; pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav-top { height: 3em; width: 100%; display: flex; align-items: center; justify-content: center; gap: 1.5em; background: var(--bg); color: var(--fg); }
.nav-top_sq { width: .375em; height: .375em; background: currentColor; flex: none; }
.nav-top_rating { display: flex; align-items: center; gap: 1em; }
.nav-top .stars svg { width: 1em; height: 1em; }
.nav-container { width: 100%; padding: 0 1.5em; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 5em; position: relative; }
.nav-main { position: relative; display: flex; align-items: center; width: 80%; height: 100%; padding: 0 2em; }
.nav-main::before { content: ""; position: absolute; inset: 0; background: var(--white); z-index: -1;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 .75em, #000 calc(.75em + .5px)) top left / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 .75em, #000 calc(.75em + .5px)) top right / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 .75em, #000 calc(.75em + .5px)) bottom left / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 .75em, #000 calc(.75em + .5px)) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 .75em, #000 calc(.75em + .5px)) top left / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 .75em, #000 calc(.75em + .5px)) top right / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 .75em, #000 calc(.75em + .5px)) bottom left / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 .75em, #000 calc(.75em + .5px)) bottom right / 51% 51% no-repeat; }
.nav-logo { position: relative; z-index: 2; display: inline-flex; flex-direction: column; width: max-content; padding-top: .375em; }
.wordmark { font-family: var(--f-head); font-style: italic; font-size: 2.75em; line-height: .9; text-transform: uppercase; color: var(--navy); letter-spacing: .01em; transform: skewX(-6deg); display: inline-block; }
.wm-dash { margin: 0 .12em; }
.nav-logo .stripe { height: .22em; margin-top: .1em; transform: skewX(-20deg); }
.nav-center { position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; display: flex; align-items: center; justify-content: center; z-index: 1; pointer-events: none; }
.nav-center > * { pointer-events: auto; }
.nav-center__title { display: none; }
.nav-center__list { display: flex; align-items: center; justify-content: center; }
.nav-link { display: flex; align-items: center; padding: .75em 1em; }
.nav-link__label { position: relative; font-size: 1.125em; line-height: 1; padding: .25em 0; }
.nav-link__label::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform .45s var(--ease-io); }
.nav-link:hover .nav-link__label::after, .nav-link:focus-visible .nav-link__label::after, .nav-link.is-current .nav-link__label::after { transform: scaleX(1); transform-origin: left center; }
.lang { position: absolute; right: calc(10vw + 3.5em); display: flex; gap: .25em; border: 1.5px solid var(--navy); padding: .2em; border-radius: 2em; }
.lang-btn { font-size: .95em; padding: .35em .7em; border-radius: 2em; line-height: 1; transition: background .3s, color .3s; }
.lang-btn[aria-pressed="true"] { background: var(--navy); color: var(--blue); }
.lang-btn:hover { background: var(--blue); color: var(--navy); }
.nav-end { position: relative; display: flex; align-items: center; width: 20%; height: 100%; flex: none; transition: width .7s var(--ease-back); }
.nav-end:hover { width: 22.5%; }
.nav-button { width: 100%; height: 100%; font-size: 1.625em; --nr: .5em; }
.nav-button .nb-txt { transition: transform .35s var(--ease-back); display: inline-block; }
.nav-button .nb-txt.nb-short { display: none; }
.nav-button:hover .nb-txt { transform: translateY(-.08em) rotate(-2deg); }
.nav-end_line { position: absolute; left: 0; top: 50%; z-index: 2; width: 1.5em; height: 4px; background: var(--navy); outline: 2px solid var(--off); transform: translate(-50%, -50%); }
.nav-end.is-menu { display: none; }

/* ---------- photo card (polaroid with a deckled edge) ---------- */
.photo-card { --pw: 18em; width: var(--pw); position: relative; display: flex; flex-direction: column; }
.photo-card.is-m { --pw: 20em; } .photo-card.is-l { --pw: 24em; }
.photo-card_inner { position: relative; background: var(--white); padding: .5em 1em 4em; }
.photo-card_inner::before, .photo-card_inner::after { content: ""; position: absolute; left: 0; right: 0; height: .55em;
  background: radial-gradient(circle at 50% 100%, var(--white) .27em, transparent calc(.27em + .6px)) 0 0 / .6em .55em repeat-x; }
.photo-card_inner::before { top: -.5em; }
.photo-card_inner::after { bottom: -.5em; transform: scaleY(-1); }
.photo-card_frame { position: relative; aspect-ratio: 2.5 / 2.8; overflow: hidden; background: var(--dough); }
.photo-card_frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- ticket card (reference .card + .card-shape) ---------- */
.card { position: relative; z-index: 0; color: var(--fg); background: var(--bg); }
.js .card { background: transparent; }
.card-shape { position: absolute; inset: 0; z-index: 0; background: var(--bg); pointer-events: none;
  --cr: 21px;
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--cr), #000 var(--cr)) top left / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--cr), #000 var(--cr)) top right / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--cr), #000 var(--cr)) bottom left / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--cr), #000 var(--cr)) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 var(--cr), #000 var(--cr)) top left / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--cr), #000 var(--cr)) top right / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--cr), #000 var(--cr)) bottom left / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--cr), #000 var(--cr)) bottom right / 51% 51% no-repeat; }
.card-shape svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.card-shape path { fill: none; stroke: var(--bd); stroke-width: 2; }
.card[data-card="small"] .card-shape { --cr: 14px; }
.card-content { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1.5em; padding: 4em; }
.card-button { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; transform: rotate(-1.5deg) translateY(50%); }

/* ---------- tag card (hexagon label) ---------- */
.tag-card { position: relative; width: 40em; aspect-ratio: 4 / 2.1; display: flex; align-items: center; justify-content: center; color: var(--fg); }
.tag-card_bg, .tag-card_border { position: absolute; inset: 0; width: 100%; height: 100%; }
.tag-card_bg { color: var(--bg); }
.tag-card_border { left: .5em; top: .5em; width: calc(100% - 1em); height: calc(100% - 1em); }
.tag-card_border polygon { stroke: var(--bd); stroke-width: 2; }
.tag-card_content { position: relative; z-index: 2; height: 100%; width: 100%; padding: 1.6em 4em 2.1em; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.tag-card_caption { display: flex; align-items: center; gap: .5em; }
.tag-card_caption .stars svg { width: 1em; height: 1em; }
.tag-card_heading { font-size: 5.5em; line-height: .94; text-wrap: balance; }
.tag-card_heading .dot, .tag-card_caption .dot { margin: 0 .35em; }
.tag-dot { position: absolute; top: 50%; width: .5em; height: .5em; border-radius: 50%; background: var(--fg); transform: translateY(-50%); z-index: 2; }
.tag-dot.is-left { left: 2em; } .tag-dot.is-right { right: 2em; }

/* ---------- hero ---------- */
.section_hero { position: relative; }
.hero_wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 10em; }
.padding-hero { width: 100%; padding: 0 1.5em; }
.hero-img_wrapper { width: 100%; height: 40em; overflow: clip; background: var(--navy); }
.hero-img { width: 100%; height: 115%; object-fit: cover; object-position: 50% 12%; margin-top: -2%; }
.hero-content_wrapper { position: relative; width: 100%; display: flex; justify-content: center; transform: translateY(-50%); }
.hero-content_pattern { position: absolute; top: 50%; left: 0; right: 0; margin-top: 1em; z-index: 0; pointer-events: none; }
.hero-content_photo { position: absolute; top: 0; left: 0; }
.hero-content_photo.is-1 { z-index: 0; top: -10em; left: 0; transform: rotate(-4deg); }
.hero-content_photo.is-2 { z-index: 1; left: 17em; transform: rotate(3deg); }
.hero-content_text { position: absolute; z-index: 2; width: 18em; top: -4em; left: 13em; transform: rotate(-6deg); }
.hero-content_tag { position: relative; z-index: 3; transform: rotate(1.5deg); }
.hero-content_card { position: absolute; z-index: 2; top: -2em; right: 11.5em; transform: rotate(3deg); }
.card.is-hero-body { width: 24em; text-align: left; }
.card.is-hero-body .card-content { padding: 2.25em 2.25em 2em; gap: 1.5em; }
.card.is-hero-body .p-s { color: var(--brown); }
.scroll-down { position: absolute; left: -.5em; bottom: -.5em; z-index: 3; width: 3em; height: 3em; border-radius: 50%; border: 1px dashed var(--navy); display: flex; align-items: center; justify-content: center; transform: translate(-50%, 50%); background: var(--off); }
.scroll-down_mask { width: 1em; height: 1.75em; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.scroll-down_mask svg { width: 1em; height: 1.75em; flex: none; transition: transform .35s var(--ease-back); }
.scroll-down:hover .scroll-down_mask svg { transform: translateY(100%); }
.hero-content_pizza { position: absolute; z-index: 1; width: 18em; aspect-ratio: 1; right: 1.5em; bottom: -6em; }
.plate { width: 100%; height: 100%; }
.plate img { width: 100%; height: 100%; object-fit: contain; }
.m-t { will-change: transform; }

/* ---------- marquee (ticket tiles) ---------- */
.section_marquee { position: relative; overflow: clip; padding-bottom: 4em; display: flex; flex-direction: column; align-items: center; gap: 4em; margin-top: -4em; }
.marquee_title { display: flex; justify-content: center; width: 100%; padding: 0 1.5em; text-align: center; }
.marquee { width: 100%; cursor: grab; touch-action: pan-y; }
.marquee:active { cursor: grabbing; }
.marquee-container { display: flex; gap: 1em; width: max-content; padding-left: 1em; user-select: none; -webkit-user-select: none; }
.marquee-card { --cr: 1.75em; position: relative; flex: none; width: 18em; aspect-ratio: 2.9 / 1.6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; padding: 1em; text-align: center; color: var(--navy); background: var(--bg);
  -webkit-mask: radial-gradient(circle at 0 0, #0000 var(--cr), #000 var(--cr)) top left / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--cr), #000 var(--cr)) top right / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--cr), #000 var(--cr)) bottom left / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--cr), #000 var(--cr)) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle at 0 0, #0000 var(--cr), #000 var(--cr)) top left / 51% 51% no-repeat, radial-gradient(circle at 100% 0, #0000 var(--cr), #000 var(--cr)) top right / 51% 51% no-repeat, radial-gradient(circle at 0 100%, #0000 var(--cr), #000 var(--cr)) bottom left / 51% 51% no-repeat, radial-gradient(circle at 100% 100%, #0000 var(--cr), #000 var(--cr)) bottom right / 51% 51% no-repeat; }
.mq-big { font-size: 2.75em; line-height: .9; }
.marquee-card .p-xxs { opacity: .6; }

/* ---------- intro / story ---------- */
.section_intro { position: relative; padding: var(--s160) 1.5em 8em; }
.intro_wrapper { position: relative; display: flex; padding-left: 8em; }
.card.is-intro-card { z-index: 10; width: 44em; text-align: center; transform: rotate(-1.5deg); }
.card.is-intro-card .card-content { padding: 4em 4em 3em; }
.intro-card_caption { padding-top: 1em; display: flex; flex-direction: column; align-items: center; gap: .25em; }
.signature { font-family: var(--f-hand); font-size: 3.5em; line-height: 1; letter-spacing: 0; transform: rotate(-8deg); color: var(--navy); }
.intro_pizza { position: absolute; z-index: 0; width: 18em; aspect-ratio: 1; left: 0; bottom: 10%; }
.intro_content { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; width: 60%; display: flex; align-items: center; }
.intro_photo { position: relative; }
.intro_photo.is-1 { z-index: 1; transform: rotate(4deg); }
.intro_photo.is-2 { top: -4em; left: -2em; transform: rotate(-3deg); }
.intro_photo.is-3 { top: 12em; left: -3em; transform: rotate(4deg); }
.intro_card-text { position: absolute; z-index: 4; width: 12em; right: 12em; bottom: 2em; transform: rotate(-6deg); text-align: center; }
.usp { position: absolute; z-index: 2; width: 22em; height: 22em; display: flex; align-items: center; justify-content: center; color: var(--fg); }
.usp.is-1 { z-index: 3; left: 25%; bottom: 10%; transform: rotate(3deg); }
.usp.is-2 { width: 25em; height: 25em; left: 40%; bottom: 30%; transform: rotate(-4deg); }
.usp-wrap { position: relative; width: 100%; height: 100%; }
.usp-svg { width: 100%; height: 100%; color: var(--bg); }
.usp-svg .ln { fill: none; stroke: var(--bd); stroke-width: 2; }
.usp-content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; padding-top: 1em; text-align: center; }
.usp .heading-xl { font-size: 7.5em; }

/* ---------- navy dishes section ---------- */
.section_dishes { position: relative; z-index: 1; color: var(--fg); }
.section_dishes > .edge { margin-bottom: -2px; }
.dishes_container { background: var(--bg); padding: var(--s160) 0; overflow: clip; }
.dishes_wrapper { display: flex; flex-direction: column; gap: 6em; padding-bottom: 4em; }
.dishes_hero { position: relative; z-index: 10; display: flex; flex-direction: column; gap: 2em; min-width: 52em; max-width: 64em; align-self: flex-start; }
.dishes_hero .heading-xl { color: var(--blue); }
.dishes_button { position: absolute; right: 0; bottom: 0; transform: rotate(-4deg); }
.dishes_text { position: absolute; z-index: 2; width: 16em; top: 3em; right: -20em; transform: rotate(6deg); text-align: center; }
.dishes_text .hand, .slider_text .hand, .steps-title .hand { color: var(--navy); }
.slider { position: relative; }
.slider_pizza { position: absolute; z-index: 0; width: 18em; aspect-ratio: 1; left: -5em; bottom: -5em; }
.slider_nav { display: flex; justify-content: flex-end; gap: .75em; margin: -10em 0 3em; position: relative; z-index: 2; }
.slider-btn { width: 4em; height: 4em; border-radius: 50%; border: 1px dashed var(--blue); color: var(--blue); display: flex; align-items: center; justify-content: center; overflow: hidden; transition: opacity .3s; }
.slider-btn.is-prev svg { transform: scaleX(-1); }
.slider-btn_icons { display: flex; width: 1.5em; overflow: hidden; justify-content: flex-end; }
.slider-btn_icons svg { width: 1.5em; height: 1.5em; flex: none; transition: transform .35s var(--ease-back); }
.slider-btn.is-next:hover .slider-btn_icons svg { transform: translateX(100%); }
.slider-btn.is-prev:hover .slider-btn_icons svg { transform: scaleX(-1) translateX(100%); }
.slider-btn[disabled] { opacity: .5; pointer-events: none; }
.slider_viewport { position: relative; z-index: 1; margin: 0 -1.5em; }
.slider_track { display: flex; touch-action: pan-y; cursor: grab; }
.slider_track:active { cursor: grabbing; }
.slide { flex: none; width: 30%; padding: 0 1.5em; }
.dish-card { border: 1.5px solid var(--blue); padding: 3px; cursor: pointer; }
.dish-card_inner { background: var(--bg); color: var(--fg); padding: 1.5em 1.5em 1em; display: flex; flex-direction: column; gap: 1em; text-align: center; }
.dish-card_title { font-size: 5em; line-height: .88; min-height: 1.8em; display: flex; align-items: center; justify-content: center; text-wrap: balance; }
.dish-card_img { position: relative; aspect-ratio: 1; }
.dish-card_img img { position: absolute; inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); object-fit: cover; }
.dish-card_shape { position: absolute; inset: 0; z-index: 2; border: 1.5px solid var(--navy); pointer-events: none;
  background:
    linear-gradient(90deg, var(--blue) 50%, transparent 50%) 0 0 / 2.4em .9em repeat-x,
    linear-gradient(90deg, transparent 50%, var(--blue) 50%) 0 .9em / 2.4em .9em repeat-x; }
.dish-card_details { display: flex; width: 100%; }
.dd { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em; }
.dd.is-1 { flex: none; padding-right: 1em; border-right: 2px dotted var(--navy); min-width: 38%; }
.dd.is-2 { flex: 1; padding-left: 1em; }
.dd-n { font-size: 3.75em; line-height: .84; }
.slider_text { position: absolute; z-index: 2; width: 12em; left: 46%; bottom: -5em; transform: rotate(-6deg); text-align: center; }
.slider_emoji { position: absolute; z-index: 3; left: 57%; bottom: -1.05em; font-size: 8em; line-height: 1; transform: rotate(-10deg); filter: drop-shadow(.04em .04em 0 var(--white)); }

/* ---------- steps ---------- */
.section_steps { position: relative; color: var(--fg); margin-top: -1em; overflow: hidden; }
.steps-bg { position: absolute; inset: 1em 0 0; background: var(--bg); z-index: 0; }
.edge--steps { margin-bottom: -1em; background-color: transparent; }
.steps-title { position: relative; z-index: 1; padding-top: var(--s160); }
.steps-title .heading-xl { color: var(--blue); }
.steps-pin-height { position: relative; height: 400vh; margin-top: -120vh; margin-bottom: -100vh; }
.steps-container { position: relative; height: 100vh; overflow: hidden; }
.steps-pizza { position: absolute; z-index: 0; width: 30vw; aspect-ratio: 1; left: 50%; bottom: 0; transform: translate(-50%, 65%); }
.steps-pizza img { width: 100%; height: 100%; }
.steps-circle { position: absolute; z-index: 1; width: 300%; aspect-ratio: 1; top: 50%; left: -100%; }
.card.is-step { position: absolute; top: 0; left: 50%; width: 25vw; aspect-ratio: 4 / 3; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; text-align: center; }
.card.is-step .card-content { gap: 1em; padding: 1.5em 2.75em; align-items: center; }
.step-title { font-size: 4em; line-height: .86; }

/* ---------- ribbons ---------- */
.section_ribbons { position: relative; z-index: 3; background: var(--off); padding-bottom: 2em; }
.ribbon-wrap { position: relative; }
.ribbon-wrap.is-top { z-index: 0; transform: translate(-5vw, -2.5em) rotate(2deg); }
.ribbon-wrap.is-center { z-index: 1; transform: translate(-5vw, -2.5em) rotate(-1deg); }
.ribbon-wrap.is-bottom { z-index: 0; transform: translate(-5vw, -2.5em) rotate(2deg); }
.ribbon { position: relative; width: 110vw; display: flex; align-items: center; justify-content: center; gap: 2.5em; padding: 2.5em 0; background: var(--bg); color: var(--navy); overflow: hidden; }
.ribbon-title { font-size: 8em; line-height: .84; white-space: nowrap; }
.ribbon-rating { display: flex; color: var(--navy); }
.ribbon-rating svg { width: 3.5em; height: 3.5em; margin-right: -.25em; }
.ribbon-rating svg:last-child { clip-path: inset(0 0 0 0); }
.ribbon-div { position: absolute; left: -5%; width: 110%; height: 2px; background: var(--navy); top: .5em; }
.ribbon-div.is-bottom { top: auto; bottom: .5em; }

/* ---------- reviews ---------- */
.section_reviews { position: relative; z-index: 1; background: var(--off); padding: var(--s128) 1.5em; }
.reviews_wrapper { position: relative; display: flex; justify-content: center; align-items: center; }
.reviews_list { display: flex; justify-content: center; align-items: center; gap: 2em; }
.reviews_item { flex: 0 1 32em; display: flex; }
.review-card { width: 100%; display: flex; flex-direction: column; gap: 1em; align-items: center; text-align: center; background: var(--dough); border: 1px solid rgba(15, 44, 86, .2); padding: 2em 3em; }
.review-stars { display: flex; gap: .15em; }
.review-stars svg { width: 1.5em; height: 1.5em; }
.review-text { font-family: var(--f-alt); font-size: 2em; line-height: 1.05; letter-spacing: 0; text-wrap: balance; }
.review-card.is-badge { background: var(--blue); border-color: var(--navy); padding: 2.5em 3em; }
.badge-n { font-size: 9em; line-height: .8; }
.u-link { position: relative; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; transition: color .3s; }
.u-link:hover { color: var(--gold); }
.review-card .u-link:hover { color: var(--brown); }
.reviews_text { position: absolute; z-index: 2; width: 18em; text-align: center; }
.reviews_text.is-1 { top: -3em; left: -1em; transform: rotate(-16deg); }
.reviews_text.is-2 { width: 22em; right: -1em; bottom: -4em; transform: rotate(-12deg); }

/* ---------- benefits ---------- */
.section_benefits { position: relative; z-index: 1; background: var(--off); padding: 8em 1.5em 12em; }
.benefits_wrapper { position: relative; display: flex; justify-content: flex-end; padding-left: 8em; }
.benefits_card { position: relative; z-index: 10; transform: rotate(1.5deg); }
.card.is-content-list { width: 44em; text-align: center; }
.check-list { display: flex; flex-direction: column; gap: 1em; }
.check-list li { text-align: left; }
.cl-title { display: flex; align-items: center; gap: 1em; border-bottom: 1px solid var(--navy); padding-bottom: .5em; }
.cl-icon { width: 1.25em; height: 1.25em; flex: none; }
.cl-body { opacity: .6; padding: .75em 0; }
.benefits_photos { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 100%; display: flex; align-items: center; }
.benefits_photo { position: absolute; }
.benefits_photo.is-1 { top: -2em; left: -2em; transform: rotate(-4deg); }
.benefits_photo.is-2 { top: 4em; left: 16em; z-index: 1; transform: rotate(2deg); }
.benefits_photo.is-3 { top: 18em; left: 6em; z-index: 3; transform: rotate(4deg); }

/* ---------- pizza & pasta ---------- */
.section_pp { position: relative; padding: 0 1.5em; overflow: clip; }
.pp_wrapper { position: relative; width: 100%; max-width: 120em; margin: 0 auto; aspect-ratio: 1; }
.pp_ring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; }
.pp_ring-text { font-family: var(--f-head); font-size: 96px; fill: var(--navy); letter-spacing: 2px; }
.pp_ring-text .outline { fill: none; stroke: var(--navy); stroke-width: 1.5px; }
.pp_img { position: absolute; z-index: 0; left: 9%; top: 9%; width: 82%; height: 82%; }
.pp_card { position: absolute; z-index: 2; }
.pp_card.is-pizza { top: 27%; left: 15%; transform: rotate(-3deg); }
.pp_card.is-pasta { bottom: 22%; right: 8%; transform: rotate(6deg); }
.card.is-pp { width: 28em; text-align: center; }
.card.is-pp .card-content { padding: 2em; gap: 1em; }

/* ---------- menu ---------- */
.section_menu { position: relative; margin-top: 4em; }
.menu_bg-wrap { position: absolute; inset: 0; overflow: clip; z-index: 0; background: var(--navy); }
.menu_bg { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; }
.edge--cta { position: absolute; top: -2px; left: 0; right: 0; }
.menu_wrapper { position: relative; z-index: 1; display: flex; justify-content: center; padding: 18em 1.5em var(--s160); }
.card.is-menu { width: 76em; max-width: 100%; text-align: center; }
.card.is-menu .card-content { padding: 4em 4em 5em; gap: 1.25em; align-items: center; }
.menu-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; margin: 1em 0 .5em; }
.menu-tab { font-family: var(--f-alt); font-style: italic; font-size: 1.5em; line-height: 1; padding: .45em 1em .5em; border: 1.5px solid var(--navy); border-radius: 2em; transition: background .3s, color .3s; }
.menu-tab:hover { background: var(--blue); }
.menu-tab.is-active { background: var(--navy); color: var(--blue); }
.menu-panels { width: 100%; text-align: left; }
.js .menu-panel:not(.is-active) { display: none; }
.menu-panel { width: 100%; }
.menu-panel + .menu-panel { margin-top: 2.5em; }
.js .menu-panel + .menu-panel { margin-top: 0; }
.mg + .mg { margin-top: 2.5em; }
.mg-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; border-bottom: 2px solid var(--navy); padding-bottom: .5em; margin-bottom: .5em; }
.mg-t { font-family: var(--f-alt); font-weight: 400; font-size: 2.25em; line-height: 1; letter-spacing: 0; }
.mi-cols { display: flex; gap: 0; font-size: .875em; opacity: .7; }
.mi-cols span { width: 5.6em; text-align: right; }
.mg-l { columns: 2; column-gap: 3em; }
.mi { break-inside: avoid; padding: .75em 0 .6em; border-bottom: 1px solid rgba(15, 44, 86, .25); }
.mi-t { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.mi-n { font-size: 1.125em; font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: -.02em; }
.mi-p { display: flex; gap: 0; font-size: 1.125em; font-weight: 600; white-space: nowrap; }
.mi-p > span { width: 4.5em; text-align: right; }
.mi-d { opacity: .6; font-size: .9375em; padding-top: .3em; padding-right: 2em; }
html[lang="sq"] .l-en, html:not([lang="sq"]) .l-sq { display: none; }

/* ---------- gallery (draggable media marquee) ---------- */
.section_media { position: relative; z-index: 2; background: var(--off); padding: var(--s128) 0 0; overflow: clip; }
.section_media .marquee_title { margin-bottom: 2em; }
.dmarquee { width: 100%; padding: 2em 0 8em; cursor: grab; touch-action: pan-y; }
.dmarquee:active { cursor: grabbing; }
.dmarquee__collection { display: flex; width: max-content; will-change: transform; }
.dmarquee__list { display: flex; flex: none; }
.dm-item { flex: none; width: 32em; aspect-ratio: 4.8 / 6.8; margin-right: 2em; }
.media-card { width: 100%; height: 100%; padding: .25em; }
.media-card_inner { width: 100%; height: 100%; border: 6px solid var(--brown); padding: .5em; background: var(--off); }
.media-card_inner img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* ---------- visit ---------- */
.section_visit { position: relative; }
.visit_container { position: relative; width: 100%; min-height: 120vh; overflow: clip; display: flex; justify-content: flex-end; }
.visit_bg { position: absolute; top: -6%; left: 0; width: 100%; height: 140%; object-fit: cover; object-position: 50% 0; z-index: 0; }
.visit_cards { position: absolute; inset: 0; z-index: 1; }
.visit_text { position: absolute; z-index: 4; width: 12em; top: 10em; right: 3em; transform: rotate(6deg); text-align: center; }
.visit_photo { position: absolute; }
.visit_photo.is-1 { top: 20em; left: 8em; transform: rotate(-4deg); }
.visit_photo.is-2 { top: 34em; left: 26em; transform: rotate(3deg); z-index: 1; }
.visit_usp { position: absolute; z-index: 2; width: 18em; height: 18em; left: 6em; bottom: 6em; transform: rotate(-6deg); color: var(--fg); }
.visit_usp .heading-xl { font-size: 6em; }
.visit_content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-end; padding: 16em 8em 12em 0; }
.visit_tag { position: relative; z-index: 3; margin: 0 4em -3em 0; transform: rotate(-5deg); }
.tag-card.is-visit { width: 35em; }
.tag-card.is-visit .tag-card_heading { font-size: 4.75em; }
.card.is-visit { width: 40em; transform: rotate(1.5deg); text-align: center; }
.card.is-visit .card-content { padding: 5em 4em 3.5em; gap: 2em; align-items: center; }
.visit-list { width: 100%; text-align: left; }
.visit-list > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 1em; padding: .7em 0; border-bottom: 1px solid rgba(192, 222, 238, .35); font-size: 1.0625em; }
.visit-list dt { opacity: .6; }
.visit-social { display: flex; gap: .5em; }
.social { width: 2.75em; height: 2.75em; border: 1.5px solid var(--bd); color: var(--fg); background: var(--bg); display: flex; align-items: center; justify-content: center; transition: background .3s var(--ease-out), color .3s var(--ease-out); }
.social svg { width: 1.2em; height: 1.2em; }
.social:hover { background: var(--fg); color: var(--bg); }

/* ---------- footer ---------- */
.footer { position: relative; z-index: 3; margin-top: -2em; color: var(--fg); }
.footer > .edge { margin-bottom: -2px; }
.footer_container { background: var(--bg); }
.footer_wrapper { display: flex; padding: 12em 1.5em; position: relative; }
.footer-logo_wrapper { width: 27.5%; display: flex; align-items: center; justify-content: center; padding-right: 2em; }
.footer-logo { display: inline-block; transition: transform .3s var(--ease-back); }
.footer-logo .stack-logo { font-size: 8em; color: var(--off); text-shadow: .045em .045em 0 var(--gold); -webkit-text-stroke: 0; }
.footer-links { position: relative; width: 72.5%; display: flex; }
.footer-links_div { position: absolute; left: 0; top: 0; width: 85%; height: 2px; background: var(--fg); }
.footer-links_div.is-bottom { top: 4.75em; }
.footer-col { display: flex; flex-direction: column; gap: 2.5em; padding-right: 6em; }
.footer-col_title { font-family: var(--f-alt); font-weight: 400; font-size: 2.25em; line-height: 1; letter-spacing: 0; padding: .55em 0; }
.footer-col_list { display: flex; flex-direction: column; gap: .9em; }
.f-link { position: relative; align-self: flex-start; display: inline-block; padding-bottom: .125em; }
.f-link::after { content: ""; position: absolute; left: 0; bottom: -.0625em; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-io); }
.f-link:hover::after, .f-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.footer-socials { display: flex; gap: .5em; margin-top: -1em; }
.footer-card { position: absolute; z-index: 2; top: -3em; right: 3em; transform: rotate(4deg); }
.footer-bottom { border-top: 1px solid var(--bd); padding: 1.25em 1.5em; display: grid; grid-template-columns: 27.5% 1fr auto; gap: 2em; }
.f-small { font-size: .875em; opacity: .75; transition: opacity .3s; }
.f-small:hover { opacity: 1; }

/* ---------- modal ---------- */
.modal { position: fixed; top: 0; right: 0; bottom: 0; z-index: 150; width: 45vw; padding: 1em; background: var(--bg); color: var(--fg); visibility: hidden; }
.modal[hidden] { display: none; }
.modal-inner { position: relative; width: 100%; height: 100%; border: 2px solid var(--bd); }
.modal-scroll { height: 100%; overflow-y: auto; padding: 3em 4em; display: flex; flex-direction: column; gap: 2em; text-align: center; align-items: center; }
.modal-close { position: absolute; z-index: 2; top: 2em; right: 2em; width: 4em; height: 4em; border-radius: 50%; border: 2px solid var(--bd); display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease-back), background .3s; background: var(--bg); }
.modal-close svg { width: 1.25em; height: 1.25em; }
.modal-close:hover { transform: rotate(90deg); background: var(--white); }
.modal-media { transform: rotate(-2deg); }
.modal-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bd); border-left: 1px solid var(--bd); }
.modal-col { display: flex; flex-direction: column; gap: .5em; align-items: center; justify-content: center; padding: 1em; border-right: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.modal-body { display: flex; flex-direction: column; gap: 2em; align-items: center; text-align: left; }
.modal-scrim { position: fixed; inset: 0; z-index: 140; background: rgba(15, 44, 86, .35); opacity: 0; pointer-events: none; transition: opacity .4s; }
.modal-scrim.is-on { opacity: 1; pointer-events: auto; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 1em; bottom: 1em; z-index: 160; max-width: 34em; display: flex; align-items: flex-start; gap: 1em; padding: 1em 1em 1em 1.25em; background: var(--navy); color: var(--blue); border: 1.5px solid var(--blue); outline: 3px solid var(--navy); font-size: 1em; line-height: 1.35; box-shadow: 0 .6em 1.6em rgba(15, 44, 86, .25); }
.toast[hidden] { display: none; }
.toast-x { flex: none; width: 1.75em; height: 1.75em; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--blue); border-radius: 50%; }
.toast-x svg { width: .8em; height: .8em; }

/* ---------- pre-reveal states (only with JS + motion) ---------- */

/* =========================================================
   TABLET ≤ 991
   ========================================================= */
@media (max-width: 991px) {
  .heading-xl { font-size: 6em; }
  .nav { gap: .75em; }
  .nav-top { height: 2.5em; gap: 1.25em; }
  .nav-container { padding: 0 .75em; }
  .nav-inner { height: 4em; }
  .nav-main { padding: 0 1.5em; }
  .wordmark { font-size: 2.25em; }
  .nav-link { padding: .75em .6em; }
  .nav-link__label { font-size: 1em; }
  .lang { right: calc(10vw + 1.25em); }
  .nav-end:hover { width: 20%; }
  .nav-button { font-size: 1.25em; }
  .hero_wrapper { padding-top: 8em; padding-bottom: 4em; }
  .padding-hero { padding: 0 .75em; }
  .hero-img_wrapper { height: 24em; }
  .hero-content_wrapper { transform: translateY(-4em); }
  .hero-content_photo.is-1 { top: -5em; left: .5em; }
  .hero-content_photo.is-2 { display: none; }
  .hero-content_text { width: 12em; top: -3em; left: 10em; }
  .hero-content_tag { margin-left: -2em; transform: rotate(-1.5deg); }
  .tag-card { width: 32em; }
  .tag-card_heading { font-size: 4.25em; }
  .hero-content_card { top: 2em; right: 0; }
  .card.is-hero-body { width: 20em; }
  .hero-content_pizza { display: none; }
  .section_marquee { margin-top: 0; gap: 2.5em; }
  .marquee-card { width: 13em; }
  .mq-big { font-size: 2.1em; }
  .intro_wrapper { justify-content: center; padding: 4em 0 16em; }
  .card.is-intro-card { width: 40em; }
  .intro_pizza { display: none; }
  .intro_content { position: absolute; inset: 0; width: 100%; display: block; }
  .intro_photo { position: absolute; }
  .intro_photo .photo-card.is-l { --pw: 20em; }
  .intro_photo.is-1 { left: 3em; bottom: -2em; top: auto; transform: rotate(-4deg); }
  .intro_photo.is-2 { right: -1em; left: auto; top: 40%; transform: rotate(3deg); }
  .intro_photo.is-3 { left: -2em; top: -4em; transform: rotate(-4deg); }
  .intro_card-text { width: 10em; left: auto; right: 2em; bottom: -10em; }
  .usp.is-1 { width: 16em; height: 16em; left: auto; right: 14em; bottom: -4em; }
  .usp.is-2 { width: 18em; height: 18em; left: auto; right: -1em; bottom: 2em; }
  .usp .heading-xl { font-size: 5em; }
  .dishes_wrapper { gap: 5em; }
  .dishes_hero { min-width: 0; width: 100%; gap: 1.5em; }
  .dishes_button { position: static; align-self: flex-start; }
  .dishes_text { width: 12em; top: -4em; right: -1em; }
  .slider_nav { margin-top: -2em; }
  .slide { width: 50%; }
  .slider_pizza { display: none; }
  .dish-card_title { font-size: 4.25em; }
  .dd-n { font-size: 3.25em; }
  .slider_text { left: 42%; width: 9em; }
  .slider_emoji { font-size: 6.5em; }
  .steps-title { background: var(--bg); padding-bottom: 2em; }
  .steps-pin-height { height: auto; margin: 0; background: var(--bg); }
  .steps-container { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em; padding: 2em 4em 18em; }
  .steps-circle { position: static; width: 100%; aspect-ratio: auto; }
  .card.is-step { position: relative; top: auto; left: auto; width: 100%; aspect-ratio: 4 / 2.8; transform: none; }
  .steps-circle.is-01 .card { transform: rotate(-2deg); } .steps-circle.is-02 .card { transform: rotate(1.5deg); }
  .steps-circle.is-03 .card { transform: rotate(-1deg); } .steps-circle.is-04 .card { transform: rotate(2deg); }
  .steps-pizza { width: 50vw; transform: translate(-50%, 60%); }
  .step-title { font-size: 3.5em; }
  .ribbon { gap: 1.5em; padding: 2em 0; }
  .ribbon-title { font-size: 5em; }
  .ribbon-rating svg { width: 3em; height: 3em; }
  .reviews_list { gap: 1em; }
  .review-card { padding: 1.5em; gap: .75em; }
  .review-text { font-size: 1.5em; }
  .badge-n { font-size: 6.5em; }
  .reviews_text { width: 12em; }
  .reviews_text.is-1 { top: -4em; left: 0; }
  .reviews_text.is-2 { width: 16em; bottom: -5em; }
  .container-col-08 { max-width: 80%; }
  .benefits_wrapper { justify-content: center; padding: 4em 0 10em; }
  .card.is-content-list { width: 40em; }
  .benefits_photo .photo-card.is-l { --pw: 20em; }
  .benefits_photo.is-1 { top: auto; left: auto; right: -4em; bottom: -4em; transform: rotate(4deg); }
  .benefits_photo.is-2 { display: none; }
  .benefits_photo.is-3 { top: -4em; left: -4em; transform: rotate(-4deg); }
  .card.is-pp { width: 20em; }
  .card.is-pp .card-content { padding: 1.5em; }
  .pp_card.is-pizza { top: 10%; left: 6%; }
  .pp_card.is-pasta { bottom: 8%; right: 4%; }
  .card.is-menu .card-content { padding: 3em 2.5em 5em; }
  .mg-l { columns: 1; }
  .dm-item { width: 24em; }
  .visit_content { padding: 8em 4em 10em 0; }
  .visit_photo.is-1 { top: 6em; left: 2em; }
  .visit_photo.is-2 { display: none; }
  .visit_usp { width: 14em; height: 14em; left: 4em; bottom: 4em; }
  .visit_usp .heading-xl { font-size: 4.5em; }
  .visit_text { top: auto; bottom: 3em; right: auto; left: 22em; }
  .card.is-visit { width: 34em; }
  .tag-card.is-visit { width: 28em; }
  .tag-card.is-visit .tag-card_heading { font-size: 3.75em; }
  .footer_wrapper { flex-direction: column; gap: 4em; padding: 6em 1.5em; }
  .footer-logo_wrapper { width: 100%; padding-right: 0; }
  .footer-links { width: 100%; padding: 0 1em; }
  .footer-col { width: 33.33%; padding-right: 1em; }
  .footer-col_title { font-size: 2em; }
  .footer-links_div { width: 100%; }
  .footer-card { display: none; }
  .modal { width: 70vw; }
}

/* =========================================================
   MOBILE ≤ 767
   ========================================================= */
@media (max-width: 767px) {
  .heading-xl { font-size: 4.75em; }
  .heading-l { font-size: 5em; }
  .heading-m { font-size: 4em; }
  .p-s { font-size: 1.0625em; }
  .hide-m { display: none; }
  .nav-top { gap: .75em; font-size: .85em; padding: 0 .75em; white-space: nowrap; }
  .nav-inner { display: grid; grid-template-columns: 1fr 2fr 1fr; }
  .nav-inner > * { min-width: 0; }
  .nav-button .nb-txt.nb-long { display: none; } .nav-button .nb-txt.nb-short { display: inline-block; }
  .nav-top_sq { width: .25em; height: .25em; }
  .nav-inner { height: 4em; }
  .nav-end { order: -1; width: auto; z-index: 2; }
  .nav-end:hover { width: auto; }
  .nav-end_line { left: auto; right: 0; width: 1em; height: 2px; transform: translate(50%, -50%); }
  .nav-main { width: auto; justify-content: center; padding: 0 .5em; position: static; }
  .nav-main::before { left: 25%; right: 25%; }
  .nav-logo { z-index: 3; }
  .wordmark { font-size: 1.9em; }
  .nav-end.is-menu { display: flex; order: 9; }
  .nav-button { font-size: 1.25em; }
  .menu-button { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-family: var(--f-alt); font-style: italic; font-size: 1.35em; color: var(--blue); }
  .menu-button::before { content: ""; position: absolute; inset: 0; background: var(--navy); z-index: -1; border-radius: 0 .6em .6em 0; }
  .menu-button_wrap { display: flex; flex-direction: column; height: 1.3em; overflow: hidden; }
  .menu-button_text { height: 1.3em; flex: none; display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease-back); }
  .nav[data-menu="open"] .menu-button_text { transform: translateY(-100%); }
  .nav-center { position: absolute; left: 0; right: 0; top: 4.75em; width: auto; transform: translateY(1em); flex-direction: column; gap: 2em; padding: 3em 2em 2.5em; background: var(--white); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease-io), transform .5s var(--ease-back), visibility 0s .5s; z-index: 1;
    border-radius: .6em; box-shadow: 0 1em 2em rgba(15, 44, 86, .2); }
  .nav[data-menu="open"] .nav-center { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .35s var(--ease-io), transform .5s var(--ease-back); }
  .nav-center__title { display: block; font-family: var(--f-head); font-size: 4em; text-transform: uppercase; text-align: center; line-height: .9; }
  .nav-center__list { flex-direction: column; align-items: stretch; width: 100%; }
  .nav-link { width: 100%; justify-content: space-between; padding: 1em 0 .5em; border-bottom: 1px solid var(--navy); }
  .nav-link__label { font-size: 1.5em; }
  .lang { position: static; }
  .lang-btn { font-size: 1.1em; padding: .5em 1em; }
  .hero_wrapper { padding-top: 7.5em; padding-bottom: 18em; }
  .hero-img_wrapper { height: 24em; }
  .hero-img { object-position: 52% 20%; height: 112%; }
  .hero-content_wrapper { flex-direction: column; align-items: center; gap: 1.5em; transform: translateY(-4em); }
  .hero-content_pattern { top: 3em; margin-top: 1.5em; overflow: clip; }
  .tag-card_content { padding: 2em 3.5em 2.9em; }
  .hero-content_photo.is-1 { top: auto; bottom: -17em; left: 1em; display: block; z-index: 1; }
  .hero-content_photo.is-1 .photo-card { --pw: 14em; }
  .hero-content_photo.is-2 { display: none; }
  .hero-content_text { top: auto; bottom: -6.5em; left: auto; right: 1em; width: 12em; z-index: 5; }
  .hero-content_tag { z-index: 10; margin-left: 0; }
  .hero-content_card { position: relative; top: 0; right: -4em; z-index: 4; }
  .hero-content_pizza { display: block; width: 12em; top: auto; bottom: -16em; right: 1em; z-index: 2; }
  .section_intro { padding-left: 1em; padding-right: 1em; }
  .intro_wrapper { padding-bottom: 20em; }
  .card.is-intro-card { width: 100%; }
  .intro_photo.is-1 { bottom: -12em; left: 0; }
  .intro_photo .photo-card.is-l { --pw: 15em; }
  .intro_photo.is-2 { display: none; }
  .intro_photo.is-3 { display: none; }
  .intro_card-text { bottom: -14em; left: auto; right: 0; }
  .usp.is-1 { width: 13em; height: 13em; right: 1em; bottom: -9em; }
  .usp.is-2 { width: 14em; height: 14em; right: 9em; bottom: -2em; display: none; }
  .usp .heading-xl { font-size: 4em; }
  .usp .p-l { font-size: 1.6em; }
  .dishes_text { top: -6em; right: -1em; }
  .slide { width: 72%; }
  .slider_viewport { margin: 0 -.75em; }
  .slide { padding: 0 .75em; }
  .dish-card_title { font-size: 3.5em; }
  .slider_text { left: 30%; bottom: -6em; }
  .slider_emoji { left: 62%; bottom: -1.3em; font-size: 5.5em; }
  .steps-container { grid-template-columns: 1fr; padding: 2em 2em 18em; }
  .card.is-step { aspect-ratio: auto; }
  .card.is-step .card-content { padding: 3em 2.5em; }
  .step-title { font-size: 3em; }
  .ribbon { padding: 1.75em 0; }
  .ribbon-title { font-size: 3.75em; }
  .ribbon-div.is-top { top: .25em; } .ribbon-div.is-bottom { bottom: .25em; }
  .ribbon-rating svg { width: 2.25em; height: 2.25em; }
  .reviews_list { flex-direction: column; }
  .reviews_item { flex: 1 1 auto; width: 100%; }
  .reviews_text.is-1 { top: -6em; left: -.5em; }
  .reviews_text.is-2 { bottom: -9em; right: -.5em; }
  .section_reviews { padding-top: calc(var(--s128) + 3em); padding-bottom: calc(var(--s128) + 6em); }
  .container-col-08 { max-width: 100%; }
  .section_benefits { padding: 6em 1em 12em; }
  .benefits_wrapper { padding-bottom: 16em; }
  .card.is-content-list { width: 100%; transform: rotate(-1deg); }
  .card.is-content-list .card-content { padding: 3em 2em 4em; }
  .benefits_photo.is-1 { right: -1em; bottom: 0; }
  .benefits_photo .photo-card.is-l { --pw: 15em; }
  .benefits_photo.is-3 { display: none; }
  .section_pp { padding: 0 .5em; }
  .pp_wrapper { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 1.5em; padding-bottom: 2em; }
  .pp_ring, .pp_img { position: relative; inset: auto; }
  .pp_img { order: 1; width: 92%; height: auto; margin: 0 auto; }
  .pp_ring { display: none; }
  .pp_card { position: relative; inset: auto !important; order: 2; }
  .pp_card.is-pizza { margin-top: -6em; transform: rotate(-2deg); }
  .pp_card.is-pasta { transform: rotate(2deg); }
  .card.is-pp { width: 24em; max-width: 92vw; }
  .menu_wrapper { padding: 12em .75em var(--s160); }
  .card.is-menu .card-content { padding: 3em 1.5em 5em; }
  .mi-p > span { width: 3.6em; }
  .mi-cols span { width: 4.6em; }
  .mi-d { padding-right: 0; }
  .dm-item { width: 18em; margin-right: 1em; }
  .visit_container { min-height: 0; flex-direction: column; }
  .visit_content { padding: 8em 1em 4em; align-items: center; }
  .visit_tag { margin: 0 0 -2.5em 0; align-self: center; }
  .tag-card.is-visit { width: 26em; }
  .tag-card.is-visit .tag-card_heading { font-size: 3.25em; }
  .card.is-visit { width: 100%; }
  .card.is-visit .card-content { padding: 4em 1.75em 2.5em; }
  .visit-list > div { grid-template-columns: 1fr; gap: .2em; }
  .visit_cards { position: relative; inset: auto; height: 26em; order: 2; }
  .visit_photo.is-1 { top: 1em; left: 1em; }
  .visit_photo .photo-card.is-l { --pw: 15em; }
  .visit_usp { width: 12em; height: 12em; left: auto; right: 1em; bottom: 2em; }
  .visit_usp .heading-xl { font-size: 3.75em; }
  .visit_text { left: auto; right: 1em; top: 1em; bottom: auto; }
  .footer_wrapper { padding: 4em 1em; }
  .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2em 1em; padding: 0; }
  .footer-col { width: 100%; gap: 1.5em; padding: 0; }
  .footer-col.is-contact { grid-column: 1 / -1; }
  .footer-col_title { font-size: 1.75em; border-top: 1.5px solid var(--bd); border-bottom: 1.5px solid var(--bd); padding: .5em 0; }
  .footer-links_div { display: none; }
  .footer-logo .stack-logo { font-size: 6em; }
  .footer-bottom { grid-template-columns: 1fr; gap: .75em; padding-bottom: 6em; }
  .modal { width: 100vw; }
  .modal-scroll { padding: 5em 1.5em 3em; }
  .toast { right: 1em; max-width: none; }
}
@media (max-width: 479px) {
  .heading-xl { font-size: 4em; }
  .heading-l { font-size: 4.5em; }
  .nav-inner { height: 3.75em; }
  .tag-card { width: 95vw; }
  .tag-card_heading { font-size: 4em; }
  .hero-content_card { right: auto; }
  .card.is-hero-body { width: 88vw; }
  .tag-card_caption .p-xxs { font-size: .8em; }
  .cap-b { display: none; }
  .toast { font-size: .85em; padding: .8em .8em .8em 1em; }
  .nav-top .stars { display: none; }
  .p-s { font-size: 1em; }
  .slide { width: 86%; }
  .dishes_text { display: none; }
  .ribbon { gap: .9em; }
  .ribbon-title { font-size: 2.6em; }
  .ribbon-rating svg { width: 1.5em; height: 1.5em; }
  .card.is-pp { width: 92vw; }
  .marquee-card { width: 12em; }
  .mq-big { font-size: 1.9em; }
  .tag-card.is-visit { width: 92vw; }
}

/* ---------- reduced motion / no JS fallbacks ---------- */
.rm .marquee, .rm .dmarquee, html:not(.js) .marquee, html:not(.js) .dmarquee { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .loader { display: none !important; }
}