/* ==========================================================================
   MYSTIC PIZZA — style.css
   Brand palette: logo blue #53A2DA and logo brown #402311,
   tomato red for orders and prices, near-black ink for dark sections.
   Mobile-first, shared by every page of the site.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("assets/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Metric-matched fallbacks: while the web fonts load, local fonts are scaled to the same widths
   and line metrics, so headings wrap on the same lines and nothing jumps when the fonts swap (CLS).
   Widths measured on the site's headings: Archivo 900 at 64% width, Instrument Serif italic. */
@font-face {
  font-family: "Archivo Fallback Impact";
  src: local("Impact");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  size-adjust: 101%;
  ascent-override: 87%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Arial";
  src: local("Arial Bold"), local("Arial-BoldMT");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  size-adjust: 75%;
  ascent-override: 117%;
  descent-override: 28%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Archivo Fallback Roboto";
  src: local("Roboto Bold"), local("Roboto-Bold");
  font-weight: 100 900;
  font-stretch: 50% 200%;
  size-adjust: 80%;
  ascent-override: 110%;
  descent-override: 26%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback";
  src: local("Georgia Italic"), local("Georgia-Italic"), local("Noto Serif Italic"), local("NotoSerif-Italic");
  font-weight: 400;
  font-style: italic;
  size-adjust: 79.6%;
  ascent-override: 124%;
  descent-override: 39%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Instrument Serif Fallback Times";
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT");
  font-weight: 400;
  font-style: italic;
  size-adjust: 88.6%;
  ascent-override: 112%;
  descent-override: 35%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */
:root {
  /* Logo colours */
  --brown: #402311;          /* logo brown: logo, small details */
  --blue: #53a2da;           /* logo blue: brand accent (water, waves, details) */
  --white: #ffffff;

  /* Darks: near-black espresso, not brown */
  --ink: #15100d;
  --ink-2: #1e1612;
  --ink-3: #2c221c;

  /* Tomato red: order buttons, prices, energy */
  --red: #c8261a;            /* white text on it: 5.6:1 */
  --red-hover: #a61d13;
  --red-bright: #ff4a2e;     /* red text on dark backgrounds */

  /* Derived shades */
  --blue-hover: #74b6e4;
  --blue-light: #9fd0f0;
  --blue-deep: #1f6ea8;      /* blue text on light backgrounds (AA) */
  --blue-tint: #eaf4fb;
  --gold: #f2b632;
  --cream: #faf5ec;
  --sand: #f1e7d6;
  --sand-2: #e6d9c3;
  --line: rgba(31, 20, 14, 0.14);

  --text: #1f140e;
  --muted: #65554a;
  --on-dark: #faf5ec;
  --muted-dark: #c9b8a6;
  --line-dark: rgba(250, 245, 236, 0.15);
  --shade: 21, 16, 13;       /* rgb of --ink, for overlays */

  --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Archivo", "Archivo Fallback Impact", "Archivo Fallback Arial", "Archivo Fallback Roboto", sans-serif;
  --font-serif: "Instrument Serif", "Instrument Serif Fallback", "Instrument Serif Fallback Times", serif;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --maxw: 1400px;
  --header-h: 64px;
  --mobile-cta-h: 64px;
  --radius-s: 10px;
  --radius: 18px;
  --radius-l: 28px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --section-y: clamp(4.5rem, 9vw, 7.5rem);

  /* Brand wave: height of .wave, and a mask that cuts the top of a block to the same curve */
  --wave-h: clamp(32px, min(6vw, 9svh), 80px);
  --wave-top-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 70C240 104 480 108 720 76S1200 20 1440 42V90H0Z'/%3E%3C/svg%3E") 0 0 / 100% var(--wave-h) no-repeat,
    linear-gradient(#000, #000) 0 calc(var(--wave-h) - 1px) / 100% calc(100% - var(--wave-h) + 1px) no-repeat;

  /* Pizza-slice pattern (open-source icons, see assets/icons/LICENSES.txt) for every cream surface */
  --pizza-pattern: url("assets/icons/pizza-pattern.svg") 0 0 / 240px 240px;
}
@media (min-width: 900px) {
  :root { --header-h: 76px; }
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  padding-bottom: calc(var(--mobile-cta-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; }
strong, b { font-weight: 750; }

:focus-visible {
  outline: 3px solid var(--focus, var(--blue-deep));
  outline-offset: 3px;
  border-radius: 4px;
}
/* Focus ring colour per surface: deep blue on light, logo blue on dark, white on red */
:is(.site-header, .mobile-menu, .hero, .page-hero, .section--dark, .section--dark2, .site-footer, .mobile-cta, .lightbox,
  .dish--novita, .teaser-card--dark, .route-card--dark, .zones__visual, .map__bar, .review--feature, .review--dark) { --focus: var(--blue); }
:is(.hungry, .mode--red, .maxi-card--red, .review--red) { --focus: var(--white); }
.review--blue { --focus: var(--ink); }
.mode:not(.mode--red), .maxi-card:not(.maxi-card--red) { --focus: var(--blue-deep); }
::selection { background: var(--blue); color: var(--ink); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--fill, .review__stars .icon, .hero__rating .icon { fill: currentColor; stroke: none; }

.skip-link {
  position: fixed;
  left: 1rem; top: 1rem;
  z-index: 200;
  padding: 0.75rem 1.1rem;
  background: var(--blue);
  color: var(--ink);
  font-weight: 750;
  border-radius: 999px;
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: none; }

.container {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}
.hide-mobile { display: none; }
@media (min-width: 560px) { .hide-mobile { display: inline; } }

/* Grid children may shrink below their min-content (no horizontal overflow on phones) */
.intro__grid > *, .section-head--split > *, .specials__layout > *, .versus > *,
.maxi__cards > *, .maxi__foot > *, .modes > *, .zones > *, .why__grid > *, .reviews__grid > *,
.visit__grid > *, .visit__col > *, .footer__top > *, .platforms > *,
.menu-cta__inner > *, .teaser-grid > *, .route-grid > *, .facts > *, .steps > *, .faq-layout > *,
.classic-list > *, .hero__inner > *, .bento > *, .seals__list > *, .delivery__split > *, .how__row > * { min-width: 0; }

/* ---------- Typography helpers ---------- */
.h1, .h2 {
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 68%;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.h1 { font-size: clamp(3.2rem, 1.6rem + 7vw, 8rem); font-weight: 900; font-stretch: 64%; }
.h2 { font-size: clamp(2.6rem, 1.4rem + 5.4vw, 5.8rem); }
.h2--xl { font-size: clamp(3rem, 1.2rem + 8vw, 8.5rem); }

.h1 em, .h2 em, .h3 em, .hero__script, .formula__result em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  text-transform: none;
  letter-spacing: -0.01em;
}
.h1 em, .h2 em { display: inline-block; font-size: 1.04em; line-height: 0.9; color: var(--red); }
:is(.on-dark, .section--dark, .section--dark2, .page-hero) .h1 em, :is(.on-dark, .section--dark, .section--dark2, .page-hero) .h2 em { color: var(--red-bright); }
.dough .h2 em, .accent-blue em { color: var(--blue) !important; }

.h3 {
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 72%;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.2rem);
  line-height: 0.95;
}
.h3 em { color: var(--blue-deep); font-size: 1.05em; }
:is(.on-dark, .section--dark, .section--dark2, .page-hero) .h3 em { color: var(--blue); }

.lead {
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
  line-height: 1.55;
  max-width: 40ch;
}
.small { font-size: 0.85rem; color: var(--muted); line-height: 1.5; }
:is(.on-dark, .section--dark, .section--dark2, .page-hero) .small { color: var(--muted-dark); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.eyebrow span {
  display: inline-grid;
  place-items: center;
  min-width: 2.4em;
  padding: 0.25em 0.6em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
:is(.on-dark, .section--dark, .section--dark2, .page-hero) .eyebrow { color: var(--blue-light); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.link-arrow .icon { transition: transform 0.3s var(--ease); }
.link-arrow:hover .icon { transform: translateX(4px); }

.prose { display: grid; gap: 1rem; max-width: 62ch; }
.prose p { color: var(--muted); }
:is(.on-dark, .section--dark, .section--dark2, .page-hero) .prose p { color: var(--muted-dark); }
.prose strong { color: inherit; }

/* ---------- Sections ---------- */
.section { padding-block: var(--section-y); position: relative; }
.section--cream { background: var(--pizza-pattern), var(--cream); color: var(--text); }
/* A cream section right after a cream wave (sub-page heroes, the blue seals band): its pattern
   climbs under the wave and is cut to the curve, so the wave is never a plain band */
:is(.page-hero, .seals) + .section--cream { isolation: isolate; }
:is(.page-hero, .seals) + .section--cream::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: calc(-1 * var(--wave-h));
  z-index: -1;
  background: var(--pizza-pattern), var(--cream);
  -webkit-mask: var(--wave-top-mask);
  mask: var(--wave-top-mask);
  pointer-events: none;
}
.section--white { background: var(--white); color: var(--text); }
.section--sand { background: var(--sand); color: var(--text); }
.section--tint { background: var(--blue-tint); color: var(--text); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--dark2 { background: var(--ink-2); color: var(--on-dark); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.section-head--split { display: grid; gap: 1.25rem; align-items: end; }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1.35fr 1fr; gap: 3rem; }
  .section-head--split .lead { justify-self: end; }
}
.section-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Brand wave, taken from the logo: blue crest + fill of the next section */
.wave {
  display: block;
  width: 100%;
  height: clamp(36px, 6vw, 80px);
  margin-top: -1px;
}
.wave__line { fill: none; stroke: var(--blue); stroke-width: 6; vector-effect: non-scaling-stroke; }
.wave__fill { fill: var(--wave-fill, var(--cream)); }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-bd: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 48px;
  padding: 0.8em 1.35em;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-weight: 750;
  font-stretch: 90%;
  font-size: 0.92rem;
  line-height: 1.1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn .btn__arrow { transition: transform 0.3s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Primary = tomato red (orders); blue = logo colour */
.btn--primary { --btn-bg: var(--red); --btn-fg: var(--white); }
.btn--primary:hover { --btn-bg: var(--red-hover); box-shadow: 0 12px 30px -14px rgba(200, 38, 26, 0.75); }
.btn--blue { --btn-bg: var(--blue); --btn-fg: var(--ink); }
.btn--blue:hover { --btn-bg: var(--blue-hover); box-shadow: 0 12px 30px -14px rgba(31, 110, 168, 0.8); }
.btn--dark { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--dark:hover { --btn-bg: var(--ink-3); }
.btn--outline { --btn-bd: var(--ink); --btn-fg: var(--ink); }
.btn--outline:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--ghost { --btn-bd: rgba(250, 245, 236, 0.55); --btn-fg: var(--on-dark); }
.btn--ghost:hover { --btn-bg: var(--on-dark); --btn-fg: var(--ink); --btn-bd: var(--on-dark); }
.btn--light { --btn-bg: var(--white); --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }
.btn--ghost-light { --btn-bd: rgba(255, 255, 255, 0.75); --btn-fg: var(--white); }
.btn--ghost-light:hover { --btn-bg: var(--white); --btn-fg: var(--red); --btn-bd: var(--white); }
/* Deliveroo: the platform's own teal and mark on the buttons that open it (dark text: white on teal is not readable) */
.btn--deliveroo { --btn-bg: #00ccbc; --btn-fg: #0c1f1d; }
.btn--deliveroo:hover { --btn-bg: #00b3a5; box-shadow: 0 12px 30px -14px rgba(0, 204, 188, 0.8); }
.icon--deliveroo { width: 1.4em; height: 1.4em; }
/* in the heroes and the navigation bars the order button keeps the brand red (the Deliveroo mark stays, in white) */
:is(.hero, .page-hero, .site-header, .mobile-menu) .btn--deliveroo { --btn-bg: var(--red); --btn-fg: var(--white); }
:is(.hero, .page-hero, .site-header, .mobile-menu) .btn--deliveroo:hover { --btn-bg: var(--red-hover); box-shadow: 0 12px 30px -14px rgba(200, 38, 26, 0.75); }

.btn--sm { min-height: 42px; padding: 0.6em 1.05em; font-size: 0.82rem; }
.btn--lg { min-height: 54px; padding: 0.9em 1.6em; font-size: 0.98rem; }
.btn--xl { min-height: 58px; padding: 1em 1.7em; font-size: 1rem; }
.btn--mega {
  min-height: clamp(72px, 9vw, 96px);
  padding: 0.9em 1.6em;
  font-size: clamp(1.15rem, 0.9rem + 1.3vw, 1.9rem);
  font-weight: 850;
  font-stretch: 78%;
}
.btn--block { width: 100%; }
/* very narrow phones: long labels wrap instead of pushing the page sideways */
@media (max-width: 379px) { .btn { white-space: normal; text-align: center; } }

/* ---------- Status pill (open / closed, computed in JS) ---------- */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.85rem 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(var(--shade), 0.6);
  border: 1px solid var(--line-dark);
  color: var(--on-dark);
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.2;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.status__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted-dark); flex: none; }
.status.is-open .status__dot { background: #43c774; animation: pulse 2s infinite; }
.status.is-soon .status__dot { background: var(--blue); }
.status.is-closed .status__dot { background: var(--red-bright); }
.status--solid { background: var(--ink); }
.status--on-red { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.35); color: var(--white); }
.status--on-red.is-closed .status__dot { background: var(--white); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(67, 199, 116, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(67, 199, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(67, 199, 116, 0); }
}

/* ==========================================================================
   HEADER + NAVIGATION
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  color: var(--on-dark);
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--shade), 0.72), rgba(var(--shade), 0));
  transition: opacity 0.35s var(--ease);
}
.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(var(--shade), 0.93);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 1px 0 var(--line-dark);
}
.site-header.is-scrolled::before, .site-header.is-solid::before { opacity: 0; }

.header__inner { display: flex; align-items: center; gap: 0.75rem; height: var(--header-h); }

/* The official mark (vector, light version) + MYSTIC PIZZA, tagline underneath */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand__mark { width: 48px; height: 48px; flex: none; transition: transform 0.5s var(--ease); }
/* Home: the big logo is in the hero, so the header shows only MYSTIC PIZZA while that logo is on screen.
   Once it scrolls away (script.js adds .is-past-hero) the round logo spins into the header and, as it grows,
   pushes the name to the right. Without JS the logo is always there. */
.site-header.has-hero-brand .brand { transition: gap 0.55s var(--ease); }
.site-header.has-hero-brand .brand__mark { transition: width 0.55s var(--ease), opacity 0.35s var(--ease) 0.12s, transform 0.7s var(--ease); }
.js .site-header.has-hero-brand:not(.is-past-hero):not(.is-solid) .brand { gap: 0; }
.js .site-header.has-hero-brand:not(.is-past-hero):not(.is-solid) .brand__mark { width: 0; opacity: 0; transform: scale(0.3) rotate(-140deg); }
@media (prefers-reduced-motion: reduce) {
  .site-header.has-hero-brand .brand, .site-header.has-hero-brand .brand__mark { transition: none; }
}
.brand:hover .brand__mark { transform: rotate(-10deg); }
.brand__text { display: block; line-height: 1; }
.brand__text b {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 64%;
  font-size: 1.55rem;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__text b span { color: var(--red-bright); }
.brand__text small { display: none; margin-top: 0.28rem; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; white-space: nowrap; color: var(--blue-light); }
@media (min-width: 480px) { .brand__text small { display: block; } }
@media (min-width: 900px) {
  .brand__mark { width: 56px; height: 56px; }
  .brand__text b { font-size: 1.9rem; }
  .brand__text small { font-size: 0.64rem; }
}
/* between 1080 and 1299px the full navigation needs the room */
@media (min-width: 1080px) and (max-width: 1299px) {
  .brand__text small { display: none; }
  .brand__text b { font-size: 1.5rem; }
  .header__order .hide-mobile { display: none; }
}

.nav { display: none; }
@media (min-width: 1080px) {
  .nav { display: block; }
  .nav__list { display: flex; gap: clamp(0.8rem, 1.5vw, 1.5rem); }
  .nav__list a {
    position: relative;
    display: inline-block;
    padding-block: 0.6rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.86;
    transition: opacity 0.2s;
  }
  .nav__list a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0.25rem;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
  }
  .nav__list a:hover, .nav__list a[aria-current] { opacity: 1; }
  .nav__list a:hover::after, .nav__list a[aria-current]::after { transform: scaleX(1); }
}

.header__order { margin-left: 0.25rem; }
@media (min-width: 1080px) { .header__order { margin-left: 1.25rem; } }

.burger {
  display: inline-grid;
  place-items: center;
  width: 46px; height: 46px;
  border: 1.5px solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
}
.burger__lines, .burger__lines::before, .burger__lines::after {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.35s var(--ease), background-color 0.2s;
}
.burger__lines { position: relative; }
.burger__lines::before, .burger__lines::after { content: ""; position: absolute; left: 0; }
.burger__lines::before { transform: translateY(-6px); }
.burger__lines::after { transform: translateY(6px); }
.burger[aria-expanded="true"] .burger__lines { background: transparent; }
.burger[aria-expanded="true"] .burger__lines::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: rotate(-45deg); }
@media (min-width: 1080px) { .burger { display: none; } }

@media (max-width: 420px) {
  .header__inner { gap: 0.5rem; }
  .brand { gap: 0.45rem; }
  .brand__mark { width: 42px; height: 42px; }
  .brand__text b { font-size: 1.35rem; }
  .header__order { min-height: 40px; padding-inline: 0.85em; }
  .burger { width: 42px; height: 42px; }
}
@media (max-width: 349px) { .header__order { display: none; } }

.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 58;
  background: var(--ink);
  color: var(--on-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: menuIn 0.4s var(--ease);
}
.mobile-menu[hidden] { display: none; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-12px); } }
.mobile-menu__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-height: 100%;
  padding-block: 1.5rem calc(2rem + env(safe-area-inset-bottom));
}
.mobile-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-block: 0.55rem;
  border-bottom: 1px solid var(--line-dark);
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 68%;
  font-size: clamp(2rem, 9vw, 3rem);
  line-height: 1.05;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-menu__list a[aria-current] { color: var(--blue); }
.mobile-menu__list span {
  font-family: var(--font-sans);
  font-stretch: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0.1em;
}
.mobile-menu__foot { display: grid; gap: 0.75rem; margin-top: auto; }
.mobile-menu__foot .status { justify-self: start; }
body.menu-open { overflow: hidden; }
@media (min-width: 1080px) { .mobile-menu { display: none !important; } }

/* ==========================================================================
   HOME — HERO
   The logo, big: the pizza above, the mineral water rising below with the
   logo's blue wave. On every screen the whole hero fits the first view:
   sizes follow the screen height (svh), so zoom and short windows keep it whole.
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
}
/* photo + words, then the water right below */
.hero__top { position: relative; isolation: isolate; display: grid; align-items: center; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture, .hero__media img { width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 60% 35%; filter: saturate(1.15) contrast(1.05); }
/* dark behind the words, the pizza stays vivid towards the edges */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(62% 52% at 50% 42%, rgba(var(--shade), 0.82), rgba(var(--shade), 0.42) 72%, rgba(var(--shade), 0.18) 100%),
    linear-gradient(180deg, rgba(var(--shade), 0.75) 0%, rgba(var(--shade), 0.08) 22%);
}

/* ---------- Above the water: logo, claim, actions ---------- */
.hero__inner {
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  padding-top: calc(var(--header-h) + clamp(0.25rem, 1.8svh, 1.5rem));
  /* room for the water surface that rises over the photo */
  padding-bottom: calc(var(--wave-h) * 0.8 + clamp(0.25rem, 1.5svh, 1rem));
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: clamp(0.3rem, 1.4svh, 0.9rem);
  font-size: clamp(0.64rem, 0.55rem + 0.5vw, 0.74rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* a blue rule on both sides of the eyebrow (when there is room for it) */
.hero__eyebrow-line, .hero__eyebrow::after { width: 2.2rem; height: 2px; background: var(--blue); }
.hero__eyebrow::after { content: ""; }
@media (max-width: 599px) {
  .hero__eyebrow { letter-spacing: 0.1em; }
  .hero__eyebrow-line, .hero__eyebrow::after { display: none; }
}
/* The logo, big */
.hero__brand { margin-bottom: clamp(0.3rem, 1.6svh, 1.1rem); line-height: 0; }
.hero__logo {
  display: block;
  width: clamp(5.5rem, min(42vw, 21svh), 15rem);
  height: auto;
  filter: drop-shadow(0 14px 34px rgba(var(--shade), 0.6));
}
/* The claim, one line: PIZZA DI QUALITÀ dal 1995. */
.hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(1.6rem, min(8.4vw, 5.2svh), 3.8rem);
  line-height: 0.9;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 4px 30px rgba(var(--shade), 0.55);
}
.hero__line > span { display: inline-block; }
/* "qualità": brand red, underlined by the wave of the logo */
.hero__hl { position: relative; display: inline-block; color: var(--red-bright); }
.hero__swash {
  position: absolute;
  left: -2%; right: -2%; bottom: -0.14em;
  width: 104%; height: 0.2em;
  overflow: visible;
}
/* stroke in viewBox units: it scales with the title size */
.hero__swash path { fill: none; stroke: var(--blue); stroke-width: 9; stroke-linecap: round; }
.hero__script {
  display: inline-block;
  margin-left: 0.2em;
  font-size: 0.66em;
  line-height: 1;
  color: var(--blue);
  transform: rotate(-4deg);
  transform-origin: left center;
}
.hero__script, .hero__eyebrow { text-shadow: 0 1px 14px rgba(var(--shade), 0.8), 0 0 2px rgba(var(--shade), 0.45); }
/* the two buttons side by side (they stack only on the narrowest phones) */
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; width: min(100%, 34rem); margin-top: clamp(0.6rem, 2.4svh, 1.6rem); }
.hero__actions .btn { min-height: clamp(44px, 6.6svh, 58px); padding-block: 0.4em; font-size: clamp(0.8rem, 0.7rem + 0.5vw, 1rem); }
@media (max-width: 559px) {
  .hero__actions .btn--deliveroo { flex: 1 1 auto; padding-inline: 1.1em; }
  .hero__actions .btn--ghost { padding-inline: 1.1em; }
  .hero__btn-extra { display: none; }
}
@media (max-width: 399px) { .hero__actions .btn--deliveroo .btn__arrow { display: none; } }
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin-top: clamp(0.3rem, 1.6svh, 1.3rem);
  font-size: 0.88rem;
}
/* phones: the address is in the header menu and further down the page */
@media (max-width: 559px) { .hero__meta-address { display: none; } }
.hero__rating { display: inline-flex; align-items: center; gap: 0.35rem; }
.hero__rating .icon { color: var(--gold); width: 1.1em; height: 1.1em; }
.hero__rating span { color: var(--muted-dark); }
.hero__address { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; text-decoration: none; border-bottom: 1px solid transparent; }
.hero__address:hover { border-color: currentColor; }

/* ---------- Deep water: the mineral water under the logo's wave, bubbles, light rays ---------- */
.hero__sea {
  --deep: #1f6ea8;
  position: relative;
  z-index: 1;
  isolation: isolate;
  /* bottom: room for the logo's wave that opens the seals band */
  padding: clamp(0.25rem, 1.6svh, 1rem) 0 calc(var(--wave-h) * 0.95 + clamp(0.25rem, 1.4svh, 1rem));
  background: linear-gradient(180deg, var(--deep) 0%, #185c8f 100%);
  color: var(--on-dark);
  --focus: var(--white);
}
/* light rays from the surface, fading in below it */
.hero__sea::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(104deg, transparent 12%, rgba(255, 255, 255, 0.07) 17%, transparent 25%),
    linear-gradient(98deg, transparent 44%, rgba(255, 255, 255, 0.05) 50%, transparent 58%),
    linear-gradient(80deg, transparent 70%, rgba(255, 255, 255, 0.06) 76%, transparent 84%);
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 45%);
  mask: linear-gradient(180deg, transparent 0, #000 45%);
}
/* surface: the wave of the logo with its white line, drifting (the svg is two periods wide); above it, only the photo */
.hero__surface {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  display: block;
  width: 200%;
  max-width: none; /* the base reset caps svg at 100% */
  height: var(--wave-h);
  overflow: visible;
}
.hero__surface-front { fill: var(--deep); }
.hero__surface-line { fill: none; stroke: var(--white); stroke-width: 3; vector-effect: non-scaling-stroke; }
/* the logo's wave between the deep water and the (lighter) seals band */
.hero > .wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 2; }
.hero > .wave .wave__line { stroke: var(--white); }

/* phones and portrait tablets: centred, one under the other, compact */
.hero__sea-inner { display: grid; justify-items: center; gap: clamp(0.45rem, 1.6svh, 1rem); text-align: center; }
/* the promise: ALLE ACQUE MINERALI, in cream (one line on phones) */
.hero__promise {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(1.55rem, min(8.4vw, 6svh), 4rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--on-dark);
}
.hero__promise .icon { display: inline-block; width: 0.66em; height: 0.66em; margin-right: 0.14em; vertical-align: -0.02em; color: var(--blue-light); stroke-width: 2.4; }
.hero__fact { display: grid; justify-items: center; gap: clamp(0.35rem, 1.2svh, 0.7rem); max-width: 30rem; }
/* 37,65% with its label beside it */
.hero__fact-num { display: flex; align-items: center; gap: 0.7rem; text-align: left; }
.hero__fact-num strong {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(2rem, min(10vw, 6.6svh), 4.8rem);
  line-height: 0.82;
  color: var(--blue-light);
}
.hero__fact-num span { max-width: 22ch; font-size: clamp(0.62rem, 0.55rem + 0.35vw, 0.8rem); font-weight: 750; letter-spacing: 0.12em; line-height: 1.4; text-transform: uppercase; }
.hero__dough { font-size: clamp(0.88rem, 2svh, 1.1rem); line-height: 1.45; color: rgba(250, 245, 236, 0.9); text-wrap: balance; }
.hero__dough strong { font-weight: 800; color: var(--white); }
.hero__dough-link { color: var(--on-dark); }
/* bubbles of mineral water, rising in the deep water */
.hero__bubbles { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__bubbles span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  border: 1.5px solid rgba(159, 208, 240, 0.8);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.85) 0 9%, transparent 12%),
    radial-gradient(circle, transparent 52%, rgba(159, 208, 240, 0.3) 100%);
  opacity: 0;
}
.hero__bubbles span.is-big { border-color: rgba(159, 208, 240, 0.5); border-width: 1px; }

/* ---------- Wide screens (desktops at any zoom, tablets and phones held sideways) ----------
   The water in one row: promise | figure | dough, thin water lines between */
@media (min-width: 1000px), (min-width: 700px) and (orientation: landscape) {
  .hero__sea-inner { grid-template-columns: auto auto; justify-content: center; align-items: center; justify-items: start; gap: 0 clamp(1.5rem, 3.5vw, 3.5rem); text-align: left; }
  .hero__promise { font-size: clamp(2rem, min(5.4vw, 7.4svh), 6.2rem); white-space: normal; }
  .hero__promise-line { display: block; }
  .hero__fact {
    grid-template-columns: auto minmax(0, 18rem);
    grid-template-areas: "num dough" "num link";
    align-items: center;
    justify-items: start;
    gap: 0.35rem clamp(1.25rem, 3vw, 2.75rem);
    max-width: none;
    padding-left: clamp(1.25rem, 3vw, 3rem);
    border-left: 2px solid rgba(159, 208, 240, 0.45);
  }
  .hero__fact-num { grid-area: num; display: grid; justify-items: start; gap: 0.35rem; padding-right: clamp(1.25rem, 3vw, 2.75rem); border-right: 2px solid rgba(159, 208, 240, 0.45); }
  .hero__fact-num strong { font-size: clamp(2rem, min(4.2vw, 6.6svh), 4.8rem); }
  .hero__fact-num span { max-width: 24ch; font-size: clamp(0.62rem, 1.35svh, 0.8rem); }
  .hero__dough { grid-area: dough; align-self: end; }
  .hero__dough-link { grid-area: link; align-self: start; }
}

/* ---------- Short screens: the smallest details make room, so nothing is cut ---------- */
/* phones held upright */
@media (orientation: portrait) and (max-height: 720px) { .hero__dough { display: none; } }
@media (orientation: portrait) and (max-height: 620px) { .hero__eyebrow { display: none; } }
@media (orientation: portrait) and (max-width: 359px) and (max-height: 580px) { .hero__meta { display: none; } }
/* strong zoom, phones held sideways */
@media (min-width: 700px) and (orientation: landscape) and (max-height: 600px) {
  .hero__eyebrow { display: none; }
}
@media (min-width: 700px) and (orientation: landscape) and (max-height: 470px) {
  .hero__meta, .hero__dough { display: none; }
  .hero__logo { width: 4rem; }
  .hero__promise-line { display: inline; }
  .hero__fact-num span { max-width: 32ch; }
  .hero__actions .btn { min-height: 40px; }
}

/* Rotating badge with the logo (subpage heroes) */
.hero__badge {
  display: none;
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 7vh, 5rem);
  width: 170px; height: 170px;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  text-decoration: none;
  transition: transform 0.4s var(--ease), background-color 0.3s;
}
.hero__badge:hover { transform: scale(1.06); background: var(--red-hover); }
.hero__badge img { width: 92px; height: 92px; grid-area: 1 / 1; }
.hero__badge-ring { grid-area: 1 / 1; width: 100%; height: 100%; animation: spin 22s linear infinite; }
.hero__badge-ring text { fill: currentColor; font-family: var(--font-sans); font-size: 15px; font-weight: 800; letter-spacing: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) and (min-height: 640px) { .hero__badge { display: grid; } }

@media (prefers-reduced-motion: no-preference) {
  .hero__media img { animation: heroZoom 2.2s var(--ease) both; }
  .hero__logo { animation: logoIn 1.1s var(--ease) both; }
  .hero__line > span { animation: titleIn 1s var(--ease) 0.15s both; }
  .hero__swash path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawSwash 1.1s var(--ease) 0.75s forwards; }
  .hero__eyebrow, .hero__script, .hero__actions, .hero__meta { animation: fadeUp 0.9s var(--ease) both; }
  .hero__eyebrow { animation-delay: 0.05s; }
  .hero__script { animation-delay: 0.3s; }
  .hero__actions { animation-delay: 0.45s; }
  .hero__meta { animation-delay: 0.55s; }
  /* the water stays put (nothing behind it shows): its wave swells up from the surface, the words float in */
  .hero__surface { transform-origin: 50% 100%; animation: surfaceSwell 1.3s var(--ease) 0.15s both; }
  .hero__sea-inner { animation: fadeUp 0.9s var(--ease) 0.4s both; }
  .hero__surface-front, .hero__surface-line { animation: surfaceDrift 11s linear infinite; }
  .hero__bubbles span { animation: bubbleRise var(--d) linear var(--delay) infinite; }
}
@media (prefers-reduced-motion: reduce) { .hero__bubbles { display: none; } }
@keyframes heroZoom { from { transform: scale(1.09); } }
@keyframes titleIn { from { opacity: 0; transform: translateY(0.25em) scale(0.96); } }
@keyframes logoIn { from { opacity: 0; transform: scale(0.9) rotate(-8deg); } }
@keyframes drawSwash { to { stroke-dashoffset: 0; } }
@keyframes surfaceSwell { from { transform: scaleY(0.12); } }
/* one period = 1440 user units of the surface svg */
@keyframes surfaceDrift { to { transform: translateX(-1440px); } }
@keyframes rise { from { transform: translateY(105%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } }

/* ==========================================================================
   SUBPAGE HERO + BREADCRUMB
   ========================================================================== */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-dark);
  padding-top: calc(var(--header-h) + clamp(2rem, 6vw, 4.5rem));
}
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media picture, .page-hero__media img { width: 100%; height: 100%; }
.page-hero__media img { object-fit: cover; opacity: 0.4; }
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(var(--shade), 0.95) 0%, rgba(var(--shade), 0.72) 55%, rgba(var(--shade), 0.45) 100%);
}
.page-hero__inner { display: grid; gap: 1.2rem; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.page-hero__inner .lead { max-width: 52ch; color: rgba(250, 245, 236, 0.92); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
.page-hero .wave { --wave-fill: var(--cream); }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; list-style: none; padding: 0; margin: 0; font-size: 0.82rem; font-weight: 600; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted-dark); }
.breadcrumb li + li::before { content: "/"; color: var(--blue); }
.breadcrumb a { color: var(--on-dark); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* Quick facts under a page hero */
.facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.fact {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(250, 245, 236, 0.06);
  border: 1px solid var(--line-dark);
}
.fact strong {
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 70%;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1;
  color: var(--blue);
}
.fact span { font-size: 0.85rem; color: var(--muted-dark); line-height: 1.35; }
@media (min-width: 1200px) { .facts { grid-template-columns: repeat(4, 1fr); } }
/* leave room for the rotating order badge (bottom right, visible from 900px) */
@media (min-width: 900px) and (min-height: 640px) { .page-hero .facts { margin-right: 180px; } }

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.intro__text { display: grid; gap: 1.2rem; align-content: start; }
.intro__text .lead { max-width: 44ch; }
.intro__cta { justify-self: start; margin-top: 0.3rem; }
.intro__figure { position: relative; }
.intro__figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
.intro__figure figcaption {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--on-dark);
  font-size: 0.8rem;
  font-weight: 600;
}
/* Compact counters under the button: 2 x 2 on phones, one row of 4 when there is room */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.8rem; border-top: 1px solid var(--line); }
.stat { display: grid; gap: 0.3rem; align-content: start; padding: 0.95rem 0.9rem 0.95rem 0; border-bottom: 1px solid var(--line); }
.stat:nth-child(even) { padding-left: 0.9rem; border-left: 1px solid var(--line); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(2.3rem, 1.8rem + 1.4vw, 3.1rem);
  line-height: 0.85;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.stat span { font-size: 0.8rem; color: var(--muted); line-height: 1.35; max-width: 20ch; }
@media (min-width: 560px) and (max-width: 999px), (min-width: 1200px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .stat { padding: 1rem 0.9rem; border-bottom: 0; border-left: 1px solid var(--line); }
  .stat:first-child { padding-left: 0; border-left: 0; }
}
/* Portrait photo (storefront): caption at the top, clear of the window logo */
.intro__figure--portrait img { aspect-ratio: 4 / 5; }
.intro__figure--portrait figcaption { top: 1rem; bottom: auto; }
@media (min-width: 1000px) {
  .intro__grid { grid-template-columns: 1.15fr 0.85fr; column-gap: 5rem; align-items: center; }
  .intro__figure img { aspect-ratio: 5 / 4; }
  .intro__figure--portrait img { aspect-ratio: 4 / 5; }
}

/* ==========================================================================
   L'IMPASTO — MYSTIC DOUGH
   ========================================================================== */
.dough { overflow: hidden; }
.dough__wave {
  position: absolute;
  inset: auto -10% -1px -10%;
  height: 38%;
  background: radial-gradient(120% 100% at 50% 100%, rgba(83, 162, 218, 0.2), transparent 70%);
  /* fade out before the section edge: no hard seam with the next (darker) section */
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  pointer-events: none;
}
.dough .container { position: relative; }
.dough .lead { color: rgba(250, 245, 236, 0.9); }
.formula { display: grid; }
.formula__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 1rem;
  align-items: center;
  padding: 1.15rem 0;
  border-top: 1px solid var(--line-dark);
}
.formula__item:last-child { border-bottom: 1px solid var(--line-dark); }
/* Recipe bar: the six ingredients in proportion (percent of total dough weight) */
.recipe { margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.recipe__bar { display: flex; gap: 3px; height: 14px; }
.recipe__bar span { flex: var(--w) 1 0; min-width: 6px; border-radius: 999px; background: var(--c); }
.recipe__caption { margin-top: 0.7rem; font-size: 0.8rem; color: var(--muted-dark); }
.formula__pct {
  position: absolute;
  right: 0; top: 1.05rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 66%;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
  line-height: 1;
  color: var(--c, var(--on-dark));
  font-variant-numeric: tabular-nums;
}
.formula__pct small { font-size: 0.55em; margin-left: 0.05em; }
.formula__icon {
  grid-row: 1 / 3;
  width: 2.8rem; height: 2.8rem;
  padding: 0.6rem;
  border-radius: 50%;
  border: 1px solid var(--line-dark);
  color: var(--on-dark);
  stroke-width: 1.5;
}
.formula__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 75%;
  font-size: clamp(1.35rem, 1rem + 1.6vw, 2rem);
  line-height: 1;
  text-transform: uppercase;
  padding-right: 5.5rem;
}
.formula__detail { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--muted-dark); }
.formula__item--water .formula__icon { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.formula__item--water .formula__name { color: var(--blue); }
.formula__result {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 0.3em;
  margin-top: clamp(1.8rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(3.4rem, 1.5rem + 9vw, 10rem);
  line-height: 0.85;
  text-transform: uppercase;
}
.formula__result em { color: var(--blue); font-size: 0.62em; }
.formula__equals { display: inline-block; color: var(--red-bright); margin-right: 0.1em; }
.formula__num { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Motion: bar fill, icon pop, hover link between bar and ingredients, rising bubbles --- */
.recipe__bar span { transition: opacity 0.25s, box-shadow 0.25s; }
.recipe__bar.has-focus span:not(.is-hot) { opacity: 0.25; }
.recipe__bar span.is-hot { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85); }
.formula__icon { transition: border-color 0.25s, color 0.25s, background-color 0.25s; }
.formula__pct { transition: transform 0.35s var(--ease); transform-origin: right center; }
.formula__item.is-hot .formula__icon { border-color: var(--c); color: var(--c); }
.formula__item--water.is-hot .formula__icon { color: var(--ink); }
.formula__item.is-hot .formula__pct { transform: scale(1.14); }

.dough__bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dough__bubbles span {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  border-radius: 50%;
  /* an air bubble: clear centre, light-blue rim, small highlight */
  border: 1.5px solid rgba(159, 208, 240, 0.75);
  background:
    radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.75) 0 9%, transparent 12%),
    radial-gradient(circle, transparent 52%, rgba(83, 162, 218, 0.3) 100%);
  opacity: 0;
}
.dough__bubbles span.is-big { border-color: rgba(159, 208, 240, 0.45); border-width: 1px; }
@media (prefers-reduced-motion: no-preference) {
  .dough__bubbles span { animation: bubbleRise var(--d) linear var(--delay) infinite; animation-play-state: paused; }
  .dough.is-live .dough__bubbles span { animation-play-state: running; }
  .dough.is-live .formula__item--water .formula__icon { animation: ripple 2.8s ease-out infinite; }

  .js .recipe__bar span {
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1s var(--ease) calc(var(--i) * 110ms + 0.2s), opacity 0.25s, box-shadow 0.25s;
  }
  .js .recipe.is-in .recipe__bar span { transform: none; }

  .js .formula__item[data-reveal] .formula__icon {
    opacity: 0;
    transform: scale(0.4) rotate(-25deg);
    transition: opacity 0.5s, transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s, color 0.25s;
    transition-delay: calc(var(--reveal-delay, 0s) + 0.25s), calc(var(--reveal-delay, 0s) + 0.25s), 0s, 0s;
  }
  .js .formula__item.is-in .formula__icon { opacity: 1; transform: none; }

  .js .formula__result[data-reveal] .formula__equals { transform: scale(0) rotate(-90deg); transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s; }
  .js .formula__result.is-in .formula__equals { transform: none; }
}
@keyframes bubbleRise {
  0% { transform: translate(0, 0); opacity: 0; }
  15% { opacity: 0.9; }
  50% { transform: translate(var(--sway), -22vh); }
  85% { opacity: 0.55; }
  100% { transform: translate(0, -45vh); opacity: 0; }
}
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(83, 162, 218, 0.55); }
  100% { box-shadow: 0 0 0 16px rgba(83, 162, 218, 0); }
}
@media (prefers-reduced-motion: reduce) { .dough__bubbles { display: none; } }
@media (min-width: 760px) {
  .formula { grid-template-columns: repeat(2, 1fr); column-gap: 2.5rem; }
  .formula__item:nth-last-child(2) { border-bottom: 1px solid var(--line-dark); }
}
@media (min-width: 1100px) {
  .formula { grid-template-columns: repeat(3, 1fr); column-gap: 0; }
  .formula__item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 0.75rem;
    align-content: start;
    padding: 1.6rem 2.2rem 1.8rem 0;
    border-bottom: 1px solid var(--line-dark);
  }
  .formula__item:not(:nth-child(3n + 1)) { padding-left: 2.2rem; border-left: 1px solid var(--line-dark); }
  .formula__icon { grid-row: auto; }
  .formula__pct { top: 1.6rem; right: 1.2rem; }
  .formula__name { padding-right: 0; }
  .formula__item:not(:nth-child(3n))::after {
    content: "+";
    position: absolute;
    right: -0.8rem; top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.6rem; height: 1.6rem;
    border-radius: 50%;
    background: var(--red);
    color: var(--white);
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
  }
}
/* ==========================================================================
   SPECIALITÀ
   ========================================================================== */
.specials .lead { color: rgba(250, 245, 236, 0.88); }
.specials__layout { display: grid; gap: 2rem; }
.special-cover {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--ink-3);
  min-height: 520px;
  display: grid;
  align-items: end;
}
.special-cover picture { position: absolute; inset: 0; }
.special-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.special-cover:hover img { transform: scale(1.04); }
.special-cover__card {
  position: relative;
  margin: 1rem;
  padding: 1.4rem;
  border-radius: var(--radius);
  background: rgba(var(--shade), 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.special-cover__tag {
  position: absolute;
  top: -0.9rem; left: 1.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.special__brand { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue-light); }
.special-cover__name { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(3.4rem, 2.4rem + 4vw, 6rem); line-height: 0.85; text-transform: uppercase; margin-top: 0.2rem; }
.special-cover__ingr { margin-top: 0.7rem; color: var(--muted-dark); max-width: 40ch; }
.special-cover__card { min-width: 0; }
.special-cover__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 1.1rem; }
.special-cover__price { font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: 2.2rem; line-height: 1; color: var(--red-bright); }
.special-list { display: grid; }
.special {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1rem;
  padding: 1.25rem 0.25rem;
  border-top: 1px solid var(--line-dark);
  transition: background-color 0.3s var(--ease);
}
.special:last-child { border-bottom: 1px solid var(--line-dark); }
.special__n { font-family: var(--font-display); font-weight: 800; font-stretch: 70%; font-size: 1.1rem; color: var(--muted-dark); padding-top: 0.2rem; transition: color 0.3s; }
.special__name { font-family: var(--font-display); font-weight: 850; font-stretch: 68%; font-size: clamp(2rem, 1.5rem + 2vw, 2.9rem); line-height: 0.92; text-transform: uppercase; }
.special__ingr { margin-top: 0.4rem; color: var(--muted-dark); font-size: 0.95rem; }
.special__side { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; }
.special__price { font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: 1.7rem; line-height: 1; color: var(--red-bright); }
.special__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--line-dark);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.special__cta:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.special:hover { background: rgba(250, 245, 236, 0.04); }
.special:hover .special__n { color: var(--red-bright); }
@media (min-width: 700px) {
  .special { grid-template-columns: 3rem 1fr auto; align-items: center; padding: 1.4rem 0.75rem; }
  .special__side { grid-column: 3; flex-direction: column; align-items: flex-end; margin-top: 0; }
}
@media (min-width: 1000px) {
  .specials__layout { grid-template-columns: 1fr 1.05fr; gap: 3.5rem; align-items: start; }
  /* short list next to the tall cover: keep it vertically centred */
  .special-list { align-self: center; }
  .special-cover { position: sticky; top: calc(var(--header-h) + 1.5rem); min-height: min(78vh, 720px); }
}

/* ==========================================================================
   CLASSICHE
   ========================================================================== */
.classics__head { display: grid; justify-items: center; gap: 1rem; max-width: 46rem; margin: 0 auto clamp(4.5rem, 8vw, 6.5rem); text-align: center; }
.classics__head .eyebrow { margin-bottom: 0; }
.classics__head .lead { max-width: 44ch; }

/* Two menu boards face to face, with the photo as a round pizza on top */
.versus { position: relative; display: grid; gap: 6.5rem; }
@media (min-width: 900px) { .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); } }
.board {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(6.5rem, 9vw, 8rem) clamp(1.3rem, 3.5vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-l);
}
.board--red { background: var(--red); color: var(--white); --focus: var(--white); }
.board--white { background: var(--white); color: var(--text); box-shadow: inset 0 0 0 2px var(--blue); }
.board__photo {
  position: absolute;
  left: 50%; top: 0;
  width: clamp(9.5rem, 16vw, 13rem);
  transform: translate(-50%, -45%);
}
.board__photo img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--cream), 0 18px 34px -18px rgba(var(--shade), 0.7);
  transition: transform 1.2s var(--ease);
}
.board:hover .board__photo img { transform: rotate(14deg); }
.board__photo figcaption {
  position: absolute;
  left: 50%; bottom: -0.35rem;
  transform: translateX(-50%);
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 750;
  white-space: nowrap;
}
.board--red .board__photo figcaption { background: var(--ink); color: var(--white); }
.board--white .board__photo figcaption { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--blue); }
.board__title {
  margin-bottom: 0.6rem;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(2.6rem, 1.8rem + 3vw, 4rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.board__title small { display: block; margin-top: 0.15rem; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: 0.4em; text-transform: none; }
.board--white .board__title small { color: var(--blue-deep); }

/* The "o" between the boards: a small ring like the logo */
.versus__mark {
  position: absolute;
  left: 50%; top: calc(50% - 0.5rem);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.4rem; height: 4.4rem;
  border-radius: 50%;
  background: var(--cream);
  box-shadow: inset 0 0 0 4px var(--brown);
  color: var(--brown);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 2.3rem;
  line-height: 1;
  transform: translate(-50%, -50%);
}
.versus__mark span { margin-top: -0.3rem; }
/* on phones the boards are stacked and the round photo already marks the change */
@media (max-width: 899px) { .versus__mark { display: none; } }
@media (min-width: 900px) { .versus__mark { top: clamp(6.5rem, 9vw, 8rem); transform: translate(-50%, 0.4rem); } }

.classic-list { display: grid; }
.classic { padding: 0.95rem 0; border-top: 1px dashed currentColor; border-top-color: rgba(var(--shade), 0.16); }
.board--red .classic { border-top-color: rgba(255, 255, 255, 0.3); }
.classic__row { display: flex; align-items: baseline; gap: 0.6rem; }
.classic__name { font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: clamp(1.45rem, 1.15rem + 1vw, 1.9rem); line-height: 0.95; text-transform: uppercase; overflow-wrap: break-word; min-width: 0; }
.classic__name small { font-family: var(--font-serif); font-style: italic; font-stretch: 100%; font-weight: 400; font-size: 0.62em; text-transform: none; }
.classic__dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted currentColor; opacity: 0.35; transform: translateY(-0.3rem); }
.classic__price { flex: none; font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.8rem); line-height: 1; white-space: nowrap; }
.board--white .classic__price { color: var(--red); }
.classic__ingr { margin-top: 0.3rem; font-size: 0.92rem; line-height: 1.45; }
.board--red .classic__ingr { color: rgba(255, 255, 255, 0.9); }
.board--white .classic__ingr { color: var(--muted); }
/* pushed to the bottom: the two links line up even when the lists differ in height */
.board__more { align-self: center; margin-top: auto; }
.board .classic-list { margin-bottom: 1.4rem; }
.classics__foot { justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }

/* ==========================================================================
   MAXI
   ========================================================================== */
.maxi { overflow: hidden; }
.maxi__word {
  position: absolute;
  right: -2vw; top: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(14rem, 44vw, 42rem);
  line-height: 0.75;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 74, 46, 0.2);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}
.maxi .container { position: relative; }
.maxi .lead { color: rgba(250, 245, 236, 0.9); }
.maxi__cards { display: grid; gap: 1.25rem; }
.maxi-card {
  position: relative;
  /* photo and text side by side only when the text fits; otherwise they stack */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 2rem;
  container-type: inline-size;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: var(--radius-l);
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  transition: transform 0.4s var(--ease);
}
.maxi-card:hover { transform: translateY(-4px); }
.maxi-card--red { background: var(--red); color: var(--white); }
/* Round photo (stock photo, see the note in the menu) */
.maxi-card__media { position: relative; flex: none; width: clamp(8rem, 26vw, 13rem); }
.maxi-card__media picture { display: block; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 5px var(--white), 0 18px 40px -22px rgba(var(--shade), 0.8); }
.maxi-card__media img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 0.9s var(--ease); }
.maxi-card:hover .maxi-card__media img { transform: rotate(8deg) scale(1.06); }
.maxi-card__body { flex: 1 1 15rem; }
.maxi-card__name { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); font-size: clamp(2.4rem, 10cqi, 4.6rem); line-height: 0.85; text-transform: uppercase; }
.maxi-card__name span { display: block; color: var(--red); }
.maxi-card--red .maxi-card__name span { color: var(--ink); }
.maxi-card__desc { margin-top: 0.8rem; max-width: 32ch; }
.maxi-card__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.maxi-card__price { font-family: var(--font-display); font-weight: 900; font-stretch: 66%; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; }
.maxi__foot { display: grid; gap: 1.25rem; margin-top: 2.5rem; align-items: center; }
.maxi__quote p { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); line-height: 1.15; max-width: 30ch; }
.maxi__quote footer { margin-top: 0.6rem; font-size: 0.85rem; color: var(--muted-dark); }
.maxi__note { display: inline-flex; gap: 0.5rem; align-items: center; color: var(--blue); font-weight: 600; font-size: 0.92rem; }
@media (min-width: 760px) { .maxi__cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .maxi__foot { grid-template-columns: 1fr auto; } }

/* ==========================================================================
   HOME — MENU CALL-TO-ACTION BAND
   ========================================================================== */
.menu-cta { position: relative; overflow: hidden; }
.menu-cta__inner { display: grid; gap: 2rem; align-items: center; }
.menu-cta__title { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(3rem, 1.6rem + 6vw, 7rem); line-height: 0.85; text-transform: uppercase; }
.menu-cta__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; color: var(--blue-deep); }
.menu-cta .prose p { max-width: 42ch; font-size: 1.1rem; color: var(--muted); }
.menu-cta .eyebrow { color: var(--blue-deep); }
.menu-cta__word {
  position: absolute;
  right: -2vw; top: 50%;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(10rem, 34vw, 30rem);
  line-height: 0.75;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(83, 162, 218, 0.35);
  transform: translateY(-50%);
  pointer-events: none;
  user-select: none;
}
.menu-cta .container { position: relative; }
.wave-sep { background: var(--ink); line-height: 0; }
.cat-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cat-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--blue);
  background: var(--blue-tint);
  color: var(--blue-deep);
  font-weight: 750;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.cat-link small { font-weight: 700; font-size: 0.75rem; color: var(--ink); opacity: 0.7; }
.cat-link:hover { background: var(--blue); color: var(--ink); }
.cat-link:hover small { opacity: 1; }
@media (min-width: 1000px) { .menu-cta__inner { grid-template-columns: 1fr 1fr; gap: 4rem; } }

/* ==========================================================================
   MENU PAGE
   ========================================================================== */
.menu-tools {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  display: grid;
  gap: 0.7rem;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.75rem var(--gutter);
  background: rgba(250, 245, 236, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.menu-tools__row { display: grid; gap: 0.7rem; }

/* Open now? Delivery areas: first thing on the menu page */
.menu-info { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin-bottom: 1rem; }
.menu-info__caps { font-size: 0.9rem; line-height: 1.5; color: var(--muted); }
.menu-info__caps .icon { display: inline-block; width: 1.15rem; height: 1.15rem; margin-right: 0.4rem; vertical-align: -0.22em; color: var(--blue-deep); }
.menu-info__caps a { font-weight: 700; color: var(--text); }

.filters {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-block: 0.15rem;
}
.filters::-webkit-scrollbar { display: none; }
.chip {
  flex: none;
  scroll-snap-align: start;
  min-height: 44px;
  padding: 0.5rem 1.05rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background-color 0.2s, color 0.2s;
}
.chip:hover { background: rgba(31, 20, 14, 0.08); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--white); }

.search { position: relative; }
.search .icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 1rem 0.7rem 2.9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 1rem;
  transition: border-color 0.2s;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(83, 162, 218, 0.5); }
.menu-status { margin: 1rem 0 0.5rem; font-size: 0.88rem; color: var(--muted); }

@media (min-width: 900px) {
  .menu-tools {
    margin-inline: 0;
    padding-inline: 0;
    box-shadow: 0 0 0 100vmax rgba(250, 245, 236, 0.95);
    clip-path: inset(0 -100vmax);
  }
  .menu-tools__row { grid-template-columns: 1fr 320px; align-items: center; }
  .filters { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; }
}

.menu-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 4.5rem); margin-top: 1.5rem; }
/* content-visibility clips paint to the box: keep room for accents (NOVITÀ) */
.menu-group { content-visibility: auto; contain-intrinsic-block-size: auto 1200px; padding-top: 0.35rem; scroll-margin-top: calc(var(--header-h) + 150px); }
.menu-group[hidden] { display: none; }
.menu-group__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 3px solid var(--ink);
}
.menu-group__title { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); line-height: 0.85; text-transform: uppercase; }
.menu-group__count { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.menu-group__lead { grid-column: 1 / -1; color: var(--muted); font-size: 0.95rem; }
.menu-group__note { margin-top: 1rem; font-size: 0.82rem; color: var(--muted); }
.menu-group--novita .menu-group__head { border-color: var(--red); }
.menu-group--maxi .menu-group__head, .menu-group--bianche .menu-group__head { border-color: var(--blue); }

.menu-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }

/* Pizza card */
.dish {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.25s, box-shadow 0.35s var(--ease);
}
.dish[hidden] { display: none; }
.dish:hover { transform: translateY(-3px); border-color: rgba(31, 20, 14, 0.45); box-shadow: 0 18px 40px -28px rgba(var(--shade), 0.6); }
.dish__body { display: flex; flex-direction: column; flex: 1; padding: 1.1rem 1.15rem 1rem; }
.dish__head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.9rem; }
.dish__name { font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: 1.55rem; line-height: 0.95; text-transform: uppercase; text-wrap: balance; }
.dish__price { display: grid; justify-items: end; text-align: right; line-height: 1; }
.dish__amount { font-family: var(--font-display); font-weight: 850; font-stretch: 74%; font-size: 1.45rem; color: var(--red); white-space: nowrap; }
.dish__ingr { flex: 1; margin: 0.55rem 0 1rem; font-size: 0.93rem; line-height: 1.45; color: var(--muted); }
.dish__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dish__badges { display: flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; padding: 0; margin: 0; }
.dish__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  min-height: 44px;
  margin-left: auto;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s, color 0.25s;
}
.dish__cta .icon { width: 1.05em; height: 1.05em; transition: transform 0.3s var(--ease); }
.dish__cta:hover { background: var(--red); color: var(--white); }
.dish__cta:hover .icon { transform: translate(2px, -2px); }

.dish--rosse .dish__name::after,
.dish--bianche .dish__name::after {
  content: "";
  display: inline-block;
  width: 0.42em; height: 0.42em;
  margin-left: 0.3em;
  border-radius: 50%;
  vertical-align: 0.18em;
  background: var(--red);
}
.dish--bianche .dish__name::after { background: var(--white); box-shadow: inset 0 0 0 2px var(--blue-deep); }
.dish--bianche { background: #fdfbf8; }

.dish--novita { background: var(--ink); color: var(--on-dark); border-color: transparent; }
.dish--novita .dish__ingr { color: var(--muted-dark); }
.dish--novita .dish__amount { color: var(--red-bright); }
.dish--novita .dish__cta { background: var(--red); color: var(--white); }
.dish--novita .dish__cta:hover { background: var(--red-hover); }
.dish--novita:hover { border-color: transparent; box-shadow: 0 18px 40px -24px rgba(var(--shade), 0.9); }

.dish__media { position: relative; overflow: hidden; }
/* Every pizza card: photo on top, same 4:3 frame so the grid stays even */
.dish__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--sand); transition: transform 0.8s var(--ease); }
.dish--novita .dish__media img { background: var(--ink-3); }
.dish--photo:hover .dish__media img { transform: scale(1.05); }

.dish--maxi { background: var(--white); border: 1.5px solid var(--line); border-top: 6px solid var(--red); }
.dish--maxi .dish__name { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); }
.dish--maxi .dish__amount { color: var(--red); font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.5rem); }
.dish--maxi .dish__head { flex-wrap: wrap; }
.dish--maxi .dish__price { margin-left: auto; }
@media (min-width: 700px) { .dish--maxi { grid-column: span 2; } }

@media (min-width: 700px) {
  /* Maxi: wide card, photo on the left; it never dictates the row height */
  .dish--maxi { flex-direction: row; }
  .dish--maxi .dish__media { position: relative; flex: 0 0 40%; min-height: 190px; }
  .dish--maxi .dish__media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .dish--maxi .dish__body { padding: 1.6rem; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3em 0.6em;
  border-radius: 999px;
  background: var(--sand);
  color: var(--text);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.badge .icon { width: 1.1em; height: 1.1em; }
.badge--new { background: var(--red); color: var(--white); }
.badge--hot { background: #fde1d9; color: #9a1b10; }
.badge--calzone, .badge--maxi { background: var(--ink); color: var(--white); }
.badge--signature { background: var(--blue-deep); color: var(--white); }
.dish--novita .badge--hot { background: rgba(255, 74, 46, 0.18); color: #ffb3a4; }
.dish--maxi .badge--maxi { background: var(--ink); }

/* Drinks */
.drinks { display: grid; column-gap: 3rem; list-style: none; padding: 0; margin: 0; }
@media (min-width: 760px) { .drinks { grid-template-columns: 1fr 1fr; } }
.drink { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.8rem 0; border-bottom: 1px dashed var(--line); }
.drink[hidden] { display: none; }
.drink__name { font-weight: 650; }
.drink__name small { display: inline-block; margin-left: 0.25rem; font-size: 0.8rem; font-weight: 500; color: var(--muted); }
.drink__dots { flex: 1; border-bottom: 2px dotted rgba(31, 20, 14, 0.22); transform: translateY(-0.3rem); min-width: 1rem; }
.drink__price { font-family: var(--font-display); font-weight: 850; font-stretch: 74%; font-size: 1.25rem; color: var(--red); white-space: nowrap; }

.menu-empty { display: grid; justify-items: start; gap: 1rem; margin-top: 2rem; padding: 2rem; border: 1.5px dashed var(--line); border-radius: var(--radius); }
.menu-empty[hidden] { display: none; }
.menu-foot { display: grid; gap: 0.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }

/* ==========================================================================
   DELIVERY (home teaser + delivery page)
   ========================================================================== */
.modes { display: grid; gap: 1rem; }
.mode {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--white);
  color: var(--text);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mode:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -34px rgba(var(--shade), 0.6); }
.mode__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--ink); color: var(--white); }
.mode__icon .icon { width: 1.6rem; height: 1.6rem; }
.mode__title { font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); line-height: 0.95; text-transform: uppercase; }
.mode p { color: var(--muted); }
.mode__time { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--text) !important; }
.mode__time .icon { margin-top: 0.1rem; color: var(--blue-deep); }
.mode--red { background: var(--red); color: var(--white); border-color: transparent; }
.mode--red p { color: rgba(255, 255, 255, 0.92); }
.mode--red .mode__icon { background: var(--white); color: var(--red); }
.mode--red .btn { margin-top: 0.4rem; }
@media (min-width: 900px) { .modes { grid-template-columns: repeat(3, 1fr); } }

/* Home delivery teaser: photo + three rows */
.delivery__split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 1000px) { .delivery__split { grid-template-columns: 0.95fr 1.05fr; } }
.delivery__photo { position: relative; }
.delivery__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-l); }
@media (max-width: 999px) { .delivery__photo img { aspect-ratio: 4 / 3; } }
.delivery__sticker {
  position: absolute;
  right: clamp(-0.5rem, -1vw, 0rem); top: clamp(1rem, 3vw, 2rem);
  display: grid;
  place-items: center;
  align-content: center;
  width: clamp(6.5rem, 12vw, 8.5rem); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
  box-shadow: 0 0 0 6px var(--blue-tint), 0 14px 30px -14px rgba(31, 110, 168, 0.8);
  text-align: center;
  transform: rotate(8deg);
}
.delivery__sticker b { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(2.8rem, 5vw, 3.8rem); line-height: 0.8; }
.delivery__sticker span { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; line-height: 1.15; text-transform: uppercase; }
.delivery__body .lead { margin-top: 1rem; }
.how { display: grid; gap: 0.7rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.how__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1rem;
  align-items: start;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--line);
}
.how__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--ink); color: var(--white); }
.how__icon .icon { width: 1.35rem; height: 1.35rem; }
.how__title { font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: 1.55rem; line-height: 1; text-transform: uppercase; }
.how__row p { margin-top: 0.3rem; color: var(--muted); font-size: 0.93rem; }
.how__row b { color: var(--text); font-variant-numeric: tabular-nums; }
.how__row .caps { margin-top: 0.6rem; }
.how__row--red { background: var(--red); color: var(--white); border-color: transparent; --focus: var(--white); }
.how__row--red p { color: rgba(255, 255, 255, 0.92); }
.how__row--red .how__icon { background: var(--white); color: var(--red); }
.how__row--red .btn { grid-column: 2; justify-self: start; margin-top: 0.4rem; }
@media (min-width: 560px) {
  .how__row--red { grid-template-columns: auto 1fr auto; align-items: center; }
  .how__row--red .btn { grid-column: 3; margin-top: 0; }
}

/* small "Ordina" links of the cards: the Deliveroo mark instead of the arrow */
.dish__cta .icon--deliveroo, .special__cta .icon--deliveroo { width: 1.25em; height: 1.25em; }
.dish__cta:hover .icon--deliveroo { transform: none; }

.caps { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.caps li {
  padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--blue-deep);
  border-radius: 999px;
  color: var(--blue-deep);
  font-family: var(--font-display);
  font-weight: 850;
  font-stretch: 74%;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.25s, color 0.25s;
}
.caps li:hover, .caps li.is-match { background: var(--blue-deep); color: var(--white); }
.caps--small li { font-size: 1.2rem; padding: 0.25rem 0.75rem; }

.zones { display: grid; gap: 1.5rem; }
.zones__text { display: grid; gap: 1.1rem; align-content: start; }
.cap-check { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.cap-check label { font-weight: 700; }
.cap-check__row { display: flex; gap: 0.5rem; max-width: 26rem; }
.cap-check input {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 1.1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: 0.08em;
}
.cap-check input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(83, 162, 218, 0.5); }
.cap-check__result { min-height: 1.5em; font-weight: 650; }
.cap-check__result.is-yes { color: #1d6b3a; }
.cap-check__result.is-no { color: var(--red); }
.cap-check__result a { color: inherit; }
.zones__visual {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  gap: 0.5rem 1.2rem;
  min-height: 320px;
  padding: 2rem 2rem 7.5rem;
  border-radius: var(--radius-l);
  background: var(--ink);
  color: var(--on-dark);
  overflow: hidden;
}
.zones__big { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(9rem, 20vw, 16rem); line-height: 0.8; color: var(--blue); }
.zones__label { position: relative; z-index: 1; padding-bottom: 0.4rem; font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); line-height: 0.95; text-transform: uppercase; }
.zones__wave { position: absolute; inset: auto 0 0 0; width: 100%; height: 6.5rem; fill: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .zones__wave path { animation: wave 6s ease-in-out infinite alternate; transform-origin: center bottom; }
}
@keyframes wave { to { transform: scaleY(1.25) translateX(-3%); } }
@media (min-width: 900px) { .zones { grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: stretch; } }
.zones__areas { color: var(--muted); max-width: 60ch; }
.zones__areas strong { color: var(--text); }

/* Delivery page: the two ways to get the pizza. Real photo on top, then title, hours,
   two numbered steps and the action. Dark card = home delivery, light card = pickup. */
.ways { display: grid; gap: 1.25rem; }
/* about 10% narrower than the container on wide screens */
@media (min-width: 900px) { .ways { grid-template-columns: repeat(2, 1fr); gap: 1.35rem; width: 90%; margin-inline: auto; } }
.way {
  display: grid;
  grid-template-rows: auto 1fr;
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.way:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -36px rgba(var(--shade), 0.7); }
.way--home { background: var(--ink); color: var(--on-dark); --way-accent: var(--red-bright); --way-muted: var(--muted-dark); --focus: var(--blue); }
.way--shop { background: var(--white); color: var(--text); border: 1px solid var(--line); --way-accent: var(--red); --way-muted: var(--muted); --focus: var(--blue-deep); }
.way__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.way__media picture, .way__media img { width: 100%; height: 100%; }
.way__media img { object-fit: cover; transition: transform 0.9s var(--ease); }
.way--shop .way__media img { object-position: 50% 4%; }
.way:hover .way__media img { transform: scale(1.05); }
.way__tag {
  position: absolute; left: clamp(1.25rem, 3vw, 2rem); top: clamp(1rem, 2.5vw, 1.5rem); z-index: 1;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(var(--shade), 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--white);
  font-size: 0.78rem; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase;
}
.way__tag .icon { width: 1.2em; height: 1.2em; }
.way__body { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 1.05rem; padding: clamp(1rem, 2vw, 1.4rem) clamp(1.15rem, 2.7vw, 1.8rem) clamp(1.35rem, 2.7vw, 2rem); position: relative; }
.way__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 64%;
  font-size: clamp(2.35rem, 1.7rem + 2.3vw, 3.8rem);
  line-height: 0.88;
  text-transform: uppercase;
}
.way__title em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; text-transform: none; font-size: 1.04em; color: var(--way-accent); }
.way__time {
  display: inline-flex; align-items: center; gap: 0.5rem; justify-self: start;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  font-size: clamp(0.78rem, 0.66rem + 0.55vw, 0.88rem);
}
.way__time .icon { flex: none; width: 1.15em; height: 1.15em; }
.way__time b { white-space: nowrap; }
/* big numbered steps */
.way__steps { display: grid; gap: 0.9rem; }
/* number in a circle, centred on the two lines of the step */
.way__steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.1rem; align-items: center; }
.way__n {
  grid-row: span 2;
  display: grid; place-items: center;
  width: clamp(2.6rem, 2.2rem + 1vw, 3rem); height: clamp(2.6rem, 2.2rem + 1vw, 3rem);
  border-radius: 50%;
  border: 2px solid var(--way-accent);
  font-family: var(--font-display); font-weight: 900; font-stretch: 64%;
  font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem); line-height: 1;
  color: var(--way-accent);
}
.way__steps b { align-self: end; font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); line-height: 1; text-transform: uppercase; }
.way__steps li > span:last-child { align-self: start; font-size: 0.95rem; color: var(--way-muted); }
.way__note { align-self: end; font-size: 0.82rem; color: var(--way-muted); }

/* FAQ */
.faq-layout { display: grid; gap: 2rem; }
.faq { display: grid; gap: 0.6rem; }
.faq details { border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); overflow: hidden; }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 1.2rem;
  font-weight: 750;
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  font-weight: 800;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.2rem 1.2rem; color: var(--muted); }
.faq details > div a { color: var(--blue-deep); font-weight: 700; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: 4rem; align-items: start; } }

/* ==========================================================================
   QUALITY SEALS (built like the logo: ring, blue wave, curved tagline)
   ========================================================================== */
/* The band uses only the logo colours: blue field, brown ink, white discs */
.seals {
  /* the band slides under the hero's wave and is cut to its shape, so the pattern reaches both edges */
  margin-top: calc(-1 * var(--wave-h));
  padding-block: calc(var(--wave-h) + clamp(1.5rem, 4vw, 3rem)) calc(var(--wave-h) + clamp(2.5rem, 5vw, 4rem));
  background: var(--blue);
  color: var(--brown);
  --focus: var(--brown);
  isolation: isolate;
  overflow: hidden;
  -webkit-mask: var(--wave-top-mask);
  mask: var(--wave-top-mask);
}
/* bottom edge: the cream wave drawn inside the band, over the pattern */
.seals > .wave { position: absolute; left: 0; right: 0; bottom: -1px; }
.seals > .wave .wave__line { stroke: var(--white); }
/* Water: wavy lines ("Waves - 2", Pattern Monster, MIT) drifting slowly, lighter at the surface */
.seals::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: -128px; /* one tile wider than the band, for a seamless drift */
  z-index: -2;
  background: url("assets/icons/wave-pattern.svg") 0 0 / 128px 128px;
}
.seals::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, 0.2), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(31, 110, 168, 0.28) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .seals::before { animation: waveDrift 16s linear infinite; }
}
@keyframes waveDrift { to { transform: translateX(-128px); } }
.seals__head { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.seals__head .eyebrow { color: var(--brown); }
.seals .h2, .seals .h2 em { color: var(--brown); }
.seals__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem 1rem; }
@media (min-width: 700px) { .seals__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .seals__list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.5rem; } }
.seals__item { display: grid; justify-items: center; align-content: start; gap: 0.75rem; text-align: center; }
/* a soft halo in the band's blue hides the wave lines behind the letters, without a visible box */
.seals__item p {
  max-width: 21ch;
  font-size: 0.93rem;
  font-weight: 620;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
  text-shadow: 0 0 3px #4d99d0, 0 0 8px #4d99d0, 0 0 14px #4d99d0, 0 0 20px #4d99d0;
}
.seal { filter: drop-shadow(0 10px 18px rgba(31, 110, 168, 0.45)); }
.seal { display: block; width: min(100%, 12.5rem); height: auto; overflow: visible; transition: transform 0.6s var(--ease); }
.seals__item:hover .seal { transform: rotate(-7deg) scale(1.03); }
.seal__disc { fill: var(--white); }
.seal__wave { fill: var(--blue); }
.seal__ring { fill: none; stroke: var(--brown); stroke-width: 7; }
.seal__arc { fill: var(--brown); font-family: var(--font-sans); font-size: 12.5px; font-weight: 800; letter-spacing: 1.9px; }
.seal__arc--out { font-size: 12px; letter-spacing: 1.6px; }
.seal__big { fill: var(--brown); font-family: var(--font-display); font-size: 60px; font-weight: 900; font-stretch: 62%; }
.seal__small { fill: var(--brown); font-family: var(--font-sans); font-size: 12px; font-weight: 800; letter-spacing: 3px; }
.seal__word { fill: var(--brown); font-family: var(--font-serif); font-size: 38px; font-style: italic; }

/* ==========================================================================
   QUALITY INGREDIENTS
   ========================================================================== */
/* Bento: real photos + typographic colour tiles, each opens the menu searched on that ingredient */
.bento { display: grid; gap: 0.9rem; }
@media (min-width: 700px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(230px, auto); }
  .bento__tile:nth-child(1) { grid-column: 1 / 8; grid-row: 1 / 3; }
  .bento__tile:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .bento__tile:nth-child(3) { grid-column: 8 / 13; grid-row: 2; }
  .bento__tile:nth-child(4) { grid-column: 1 / 6; grid-row: 3 / 5; }
  .bento__tile:nth-child(5) { grid-column: 6 / 13; grid-row: 3; }
  .bento__tile:nth-child(6) { grid-column: 6 / 13; grid-row: 4; }
}
.bento__tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 230px;
  padding: clamp(1.3rem, 2.5vw, 2rem);
  overflow: hidden;
  border-radius: var(--radius-l);
}
.bento__title { font-family: var(--font-display); font-weight: 900; font-stretch: 66%; font-size: clamp(2rem, 1.4rem + 2vw, 3.1rem); line-height: 0.9; text-transform: uppercase; }
.bento__title em { display: block; margin-top: 0.08em; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-stretch: 100%; font-size: 0.78em; text-transform: none; letter-spacing: -0.01em; }
.bento__where { margin-top: 0.7rem; max-width: 46ch; font-size: 0.9rem; line-height: 1.45; }
.bento__link { display: inline-flex; align-items: center; gap: 0.4rem; align-self: flex-start; min-height: 44px; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid currentColor; }
/* the whole tile is clickable (stretched link) */
.bento__link::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.bento__link .icon { transition: transform 0.3s var(--ease); }
.bento__tile:hover .bento__link .icon { transform: translateX(4px); }
.bento__link:focus-visible { outline: none; }
.bento__tile:has(.bento__link:focus-visible) { outline: 3px solid var(--blue-deep); outline-offset: 3px; }

.bento__tile--photo { color: var(--white); background: var(--ink-3); min-height: 320px; }
.bento__photo { position: absolute; inset: 0; z-index: -2; }
.bento__photo picture, .bento__photo img { width: 100%; height: 100%; }
.bento__photo img { object-fit: cover; transition: transform 1.2s var(--ease); }
.bento__tile--photo:hover .bento__photo img { transform: scale(1.05); }
.bento__tile--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--shade), 0) 30%, rgba(var(--shade), 0.85) 100%); }
.bento__tile--photo .bento__title em { color: var(--blue-light); }
.bento__tile--photo .bento__where { color: rgba(255, 255, 255, 0.9); }

.bento__icon { position: absolute; top: clamp(1rem, 2vw, 1.6rem); right: clamp(1rem, 2vw, 1.6rem); z-index: -1; }
.bento__icon .icon { width: clamp(5rem, 9vw, 7.5rem); height: clamp(5rem, 9vw, 7.5rem); stroke-width: 1.1; opacity: 0.35; transition: transform 0.8s var(--ease); }
.bento__tile:hover .bento__icon .icon { transform: rotate(-10deg) scale(1.06); }
.bento__tile--red { background: var(--red); color: var(--white); }
.bento__tile--red .bento__title em { color: #ffd9d2; }
.bento__tile--blue { background: var(--blue); color: var(--ink); }
/* same wavy-line water pattern as the seals band, drifting slowly */
.bento__tile--blue::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: -128px;
  z-index: -2;
  background: url("assets/icons/wave-pattern.svg") 0 0 / 128px 128px;
}
@media (prefers-reduced-motion: no-preference) {
  .bento__tile--blue::before { animation: waveDrift 16s linear infinite; }
}
.bento__tile--blue .bento__title em { color: var(--brown); }
.bento__tile--ink { background: var(--ink); color: var(--on-dark); }
.bento__tile--ink .bento__title em { color: var(--gold); }
/* blue tile: the logo wave, in white, along the bottom */
.bento__tile--blue::after {
  content: "";
  position: absolute;
  left: -10%; right: -10%; bottom: -60px;
  z-index: -1;
  height: 120px;
  border-radius: 50% 50% 0 0 / 40% 60% 0 0;
  background: rgba(255, 255, 255, 0.28);
  transform: rotate(-3deg);
}
.quality__note { margin-top: 1.25rem; }
.quality__note a { color: var(--blue-deep); }

/* ==========================================================================
   RECENSIONI
   ========================================================================== */
.reviews__head { display: grid; gap: 1.5rem; align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.scores { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.score { display: flex; align-items: center; gap: 0.8rem; }
.score strong { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(3.4rem, 2.4rem + 3vw, 5rem); line-height: 0.85; color: var(--red); }
.score span { display: grid; font-size: 0.85rem; color: var(--muted); line-height: 1.3; }
.score b { font-size: 1rem; color: var(--text); }
@media (min-width: 900px) { .reviews__head { grid-template-columns: 1fr auto; } }
.reviews__grid { display: grid; gap: 1rem; }
.review { display: grid; gap: 1rem; align-content: space-between; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-l); background: var(--white); border: 1px solid var(--line); }
.review__stars { display: flex; gap: 0.15rem; color: var(--gold); }
.review__stars .icon { width: 1.15rem; height: 1.15rem; }
.review blockquote p { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); font-weight: 500; line-height: 1.5; text-wrap: pretty; }
.review__who { font-size: 0.85rem; color: var(--muted); }
.review__who b { color: var(--text); }
.review--feature { background: var(--ink); color: var(--on-dark); border-color: transparent; }
.review--feature blockquote p { font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; }
.review--feature .review__stars, .review--dark .review__stars { color: var(--gold); }
.review--feature .review__who, .review--dark .review__who { color: var(--muted-dark); }
.review--feature .review__who b, .review--dark .review__who b { color: var(--on-dark); }
.review--dark { background: var(--ink-3); color: var(--on-dark); border-color: transparent; }
.review--blue { background: var(--blue); color: var(--ink); border-color: transparent; }
.review--blue .review__stars, .review--blue .review__who, .review--blue .review__who b { color: var(--ink); }
.review--red { background: var(--red); color: var(--white); border-color: transparent; }
.review--red .review__stars, .review--red .review__who, .review--red .review__who b { color: var(--white); }
.reviews__note { margin-top: 1.5rem; }
@media (min-width: 700px) {
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .review--feature { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  .reviews__grid { grid-template-columns: repeat(3, 1fr); }
  .review--feature { grid-column: span 2; grid-row: span 2; }
}

/* ==========================================================================
   GALLERY + LIGHTBOX
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 42vw;
  grid-auto-flow: dense;
  gap: 0.6rem;
}
@media (max-width: 899px) { .g.m--wide { grid-column: span 2; } }
.g__btn { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--ink-3); }
.g__btn picture, .g__btn img { width: 100%; height: 100%; }
.g__btn img { object-fit: cover; transition: transform 0.9s var(--ease); }
.g__btn:hover img, .g__btn:focus-visible img { transform: scale(1.06); }
.g__zoom {
  position: absolute;
  right: 0.7rem; bottom: 0.7rem;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  background: var(--blue);
  color: var(--ink);
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s, transform 0.3s var(--ease);
}
.g__btn:hover .g__zoom, .g__btn:focus-visible .g__zoom { opacity: 1; transform: none; }
@media (hover: none) { .g__zoom { opacity: 1; transform: none; width: 2.2rem; height: 2.2rem; } }
/* Link card in the logo blue with the drawn waves: fills the free cell of the two-column grid */
.g__card {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: space-between;
  height: 100%;
  padding: clamp(0.85rem, 3vw, 1.25rem);
  border-radius: var(--radius);
  overflow: hidden;
  background: url("assets/icons/wave-pattern.svg") 0 0 / 96px 96px, var(--blue);
  color: var(--brown);
  text-decoration: none;
  transition: background-color 0.3s;
}
.g__card:hover { background-color: var(--blue-hover); }
.g__card-icon { width: 1.9rem; height: 1.9rem; }
.g__card-text { display: grid; gap: 0.3rem; }
.g__card-kicker { font-size: 0.68rem; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase; }
.g__card strong { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(1.55rem, 7vw, 2.4rem); line-height: 0.9; text-transform: uppercase; }
.g__card-handle { font-size: clamp(0.62rem, 3.1vw, 0.85rem); font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.g__card-arrow { position: absolute; top: clamp(0.85rem, 3vw, 1.25rem); right: clamp(0.85rem, 3vw, 1.25rem); width: 1.4rem; height: 1.4rem; transition: transform 0.3s var(--ease); }
.g__card:hover .g__card-arrow { transform: translate(3px, -3px); }
@media (min-width: 900px) { .g--card { display: none; } }
@media (min-width: 900px) {
  .gallery { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(110px, 12vw, 190px); gap: 0.9rem; }
  .g--L { grid-column: span 4; grid-row: span 3; }
  .g--T { grid-column: span 2; grid-row: span 3; }
  .g--S { grid-column: span 2; grid-row: span 2; }
  .g--W { grid-column: span 3; grid-row: span 2; }
}

/* Gallery page: captioned figures */
.photo-group + .photo-group { margin-top: clamp(3rem, 6vw, 5rem); }
.photo-group__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1.25rem; padding-bottom: 0.9rem; border-bottom: 3px solid var(--ink); }
.photo-group__head h2 { font-family: var(--font-display); font-weight: 900; font-stretch: 64%; font-size: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem); line-height: 0.9; text-transform: uppercase; }
.photo-group__head p { color: var(--muted); max-width: 48ch; }
.photo-grid { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .photo-grid--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.photo { display: grid; gap: 0.6rem; }
.photo .g__btn { aspect-ratio: 4 / 3; height: auto; }
.photo--tall .g__btn { aspect-ratio: 3 / 4; }
.photo figcaption { font-size: 0.92rem; color: var(--muted); }
.photo figcaption strong { display: block; color: var(--text); font-size: 1rem; }
.photo-grid--wide > li:first-child { grid-column: 1 / -1; }
.photo-grid--wide > li:first-child .g__btn { aspect-ratio: 16 / 9; }
@media (min-width: 1000px) { .photo-grid--wide > li:first-child .g__btn { aspect-ratio: 21 / 9; } }
@media (max-width: 699px) { .photo-grid--wide > li:first-child .g__btn { aspect-ratio: 4 / 3; } }

.lightbox {
  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(var(--shade), 0.97);
  color: var(--on-dark);
}
.lightbox::backdrop { background: rgba(var(--shade), 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox[open] { display: grid; animation: lbIn 0.35s var(--ease); }
@keyframes lbIn { from { opacity: 0; } }
.lightbox__inner { position: relative; display: grid; place-items: center; width: 100%; height: 100%; padding: 4.5rem 1rem 5.5rem; }
.lightbox__figure { display: grid; justify-items: center; gap: 1rem; max-width: 100%; max-height: 100%; }
.lightbox__figure img { max-width: min(92vw, 1400px); max-height: calc(100svh - 11rem); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); transition: opacity 0.3s; }
.lightbox__figure img.is-loading { opacity: 0.25; }
.lightbox__caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 1rem; max-width: 60ch; text-align: center; font-size: 0.95rem; }
.lightbox__count { color: var(--muted-dark); font-variant-numeric: tabular-nums; }
.lightbox__close, .lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border: 1.5px solid var(--line-dark);
  border-radius: 50%;
  background: rgba(var(--shade), 0.7);
  color: var(--on-dark);
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--red); border-color: var(--red); color: var(--white); }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__nav { bottom: 1.2rem; }
.lightbox__nav--prev { left: calc(50% - 64px); }
.lightbox__nav--next { right: calc(50% - 64px); }
@media (min-width: 900px) {
  .lightbox__nav { top: 50%; bottom: auto; transform: translateY(-50%); }
  .lightbox__nav--prev { left: 1.5rem; }
  .lightbox__nav--next { right: 1.5rem; }
  .lightbox__inner { padding: 4.5rem 6rem 3rem; }
}
body.lightbox-open { overflow: hidden; }

/* ==========================================================================
   HAI FAME?
   ========================================================================== */
.hungry {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5rem, 12vw, 10rem);
  background: var(--red);
  color: var(--white);
  text-align: center;
  isolation: isolate;
}
.hungry::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* pizzeria tablecloth: gingham ("Plaid Pattern - 2", Pattern Monster, MIT) */
  background: url("assets/icons/tablecloth-pattern.svg") 0 0 / 72px 72px;
}
.hungry__inner { display: grid; justify-items: center; gap: 1.5rem; }
.hungry__title { font-family: var(--font-display); font-weight: 900; font-stretch: 62%; font-size: clamp(5rem, 22vw, 17rem); line-height: 0.8; text-transform: uppercase; letter-spacing: -0.01em; }
.hungry__lead { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem); max-width: 36ch; text-wrap: balance; }
.hungry__actions { display: grid; gap: 0.8rem; justify-items: stretch; width: min(100%, 34rem); margin-top: 0.5rem; }
@media (min-width: 760px) { .hungry__actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: auto; } }

/* ==========================================================================
   DOVE SIAMO (home teaser + page)
   ========================================================================== */
.visit__grid { display: grid; gap: 1rem; }
.visit__col { display: grid; gap: 1rem; align-content: start; }
.visit-card, .hours, .card {
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--radius-l);
  background: var(--white);
  border: 1px solid var(--line);
}
.visit-card { display: grid; gap: 1rem; justify-items: start; }
.visit-card__logo { width: 96px; height: 96px; border-radius: 12px; }
.visit-card__address { font-size: 1.1rem; line-height: 1.5; }
.visit-card__address strong { display: block; font-family: var(--font-display); font-weight: 900; font-stretch: 66%; font-size: 2.4rem; line-height: 0.95; text-transform: uppercase; }
.visit-card__phone { font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: clamp(2.2rem, 1.6rem + 2vw, 3rem); line-height: 1; color: var(--red); text-decoration: none; }
.visit-card__phone:hover { text-decoration: underline; }
.visit-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.socials { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; padding-top: 0.6rem; border-top: 1px solid var(--line); width: 100%; }
.socials a { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; font-weight: 650; text-decoration: none; }
.socials a:hover { color: var(--red); }

.hours__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; }
.hours__head .h3 { font-size: 2.2rem; }
.hours__scroll { overflow-x: auto; }
.hours__table { width: 100%; font-size: 0.95rem; }
.hours__table th, .hours__table td { padding: 0.65rem 0.5rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.hours__table thead th { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hours__table tbody th { font-weight: 700; white-space: nowrap; }
.hours__table td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours__table tr.is-today { background: var(--blue-tint); }
.hours__table tr.is-today th::after {
  content: "Oggi";
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--red);
  color: var(--white);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.15em;
}
.hours__table tr.is-closed td { color: var(--red); font-weight: 700; }
.hours .small { margin-top: 0.9rem; }
@media (max-width: 420px) {
  .visit-card, .hours { padding: 1.25rem 1rem; }
  .hours__table { font-size: 0.86rem; }
  .hours__table th, .hours__table td { padding: 0.55rem 0.3rem; }
  .hours__table tr.is-today th::after { display: block; width: max-content; margin: 0.25rem 0 0; }
}

.map { display: flex; flex-direction: column; min-height: 420px; border-radius: var(--radius-l); overflow: hidden; background: var(--ink); border: 1px solid var(--line); }
/* The address bar sits below the map so the Google attribution stays visible */
.map__canvas { position: relative; flex: 1; min-height: 320px; background: var(--blue-tint); }
.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Before the Google map is loaded: a decorative street-map drawing (sea on the left), brand pin, load button */
.map__placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end center;
  padding: 1.25rem;
  background:
    linear-gradient(104deg, #bfdcef 0 21%, transparent 21.3%),
    repeating-linear-gradient(28deg, transparent 0 58px, rgba(255, 255, 255, 0.95) 58px 66px),
    repeating-linear-gradient(-62deg, transparent 0 84px, rgba(255, 255, 255, 0.95) 84px 90px),
    repeating-linear-gradient(28deg, transparent 0 17px, rgba(31, 20, 14, 0.035) 17px 18px),
    #e9eef0;
}
.map__consent {
  display: grid;
  justify-items: center;
  gap: 0.6rem;
  max-width: 26rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px -18px rgba(var(--shade), 0.6);
  text-align: center;
}
.map__note { font-size: 0.8rem; line-height: 1.45; color: var(--muted); }
.map__note a { color: var(--text); font-weight: 650; }
.no-js [data-map-load] { display: none; }
.map__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 56px; height: 56px;
  padding: 4px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 10px 25px -8px rgba(var(--shade), 0.7);
  transform: translate(-50%, -100%);
  pointer-events: none;
}
.map__pin::after { content: ""; position: absolute; left: 50%; bottom: -9px; border: 7px solid transparent; border-top: 10px solid var(--red); border-bottom: 0; transform: translateX(-50%); }
.map__pin img { width: 100%; height: 100%; border-radius: 50%; }
.map__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.7rem 0.7rem 0.7rem 1.1rem; background: var(--ink); color: var(--on-dark); }
.map__bar p { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 650; font-size: 0.92rem; }
@media (min-width: 1000px) {
  .visit__grid { grid-template-columns: 5fr 6fr; gap: 1.25rem; align-items: start; }
  .map { position: sticky; top: calc(var(--header-h) + 1rem); height: min(760px, calc(100svh - var(--header-h) - 2rem)); }
}


/* Home teaser: address + hours + directions */
.teaser-grid { display: grid; gap: 1rem; }
.teaser-card { display: grid; gap: 1rem; align-content: start; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-l); background: var(--white); border: 1px solid var(--line); }
.teaser-card--dark { background: var(--ink); color: var(--on-dark); border-color: transparent; }
.teaser-card--dark p { color: var(--muted-dark); }
.teaser-card h3 { font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); line-height: 0.95; text-transform: uppercase; }
.mini-hours { display: grid; gap: 0.5rem; }
.mini-hours div { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.mini-hours dt { font-weight: 700; }
.mini-hours dd { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.route-mini { display: grid; gap: 0.6rem; }
.route-mini li { display: flex; gap: 0.7rem; align-items: flex-start; }
.route-mini .icon { color: var(--blue); margin-top: 0.15rem; }
@media (min-width: 900px) { .teaser-grid { grid-template-columns: 1.1fr 1fr 1fr; } }

/* Dove siamo page: getting there */
.route-grid { display: grid; gap: 1rem; }
.route-card { display: grid; gap: 1rem; align-content: start; padding: clamp(1.4rem, 3vw, 2rem); border-radius: var(--radius-l); background: var(--white); border: 1px solid var(--line); }
.route-card__head { display: flex; align-items: center; gap: 0.9rem; }
.route-card__icon { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--blue); color: var(--ink); flex: none; }
.route-card__icon .icon { width: 1.5rem; height: 1.5rem; }
.route-card h3 { font-family: var(--font-display); font-weight: 850; font-stretch: 70%; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); line-height: 0.95; text-transform: uppercase; }
.route-card p { color: var(--muted); }
.route-list { display: grid; gap: 0; }
.route-list li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; padding: 0.8rem 0; border-top: 1px solid var(--line); }
.route-list li:last-child { border-bottom: 1px solid var(--line); }
.route-list strong { font-weight: 750; }
.route-list span { color: var(--muted); font-size: 0.9rem; }
.route-list em { grid-column: 2; grid-row: 1 / 3; align-self: center; font-style: normal; font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: 1.5rem; color: var(--red); white-space: nowrap; }
.bus-line { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 1rem; padding: 0.9rem 0; border-top: 1px solid var(--line); }
.bus-line:last-child { border-bottom: 1px solid var(--line); }
.bus-line__n {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 12px;
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 70%;
  font-size: 1.6rem;
}
.bus-line strong { font-weight: 750; }
.bus-line span:not(.bus-line__n) { color: var(--muted); font-size: 0.92rem; }
.route-card--dark { background: var(--ink); color: var(--on-dark); border-color: transparent; }
.route-card--dark p { color: var(--muted-dark); }
@media (min-width: 900px) { .route-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .route-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { position: relative; overflow: hidden; background: var(--ink); color: var(--on-dark); padding-top: clamp(3.5rem, 8vw, 6rem); }
.site-footer > .wave { position: absolute; top: 0; left: 0; }
.footer__top { display: grid; gap: 3rem; }
.footer__brand { position: relative; z-index: 1; display: grid; gap: 1.1rem; justify-items: start; }
.footer__lockup { display: flex; align-items: center; gap: 1rem; }
.footer__logo { width: clamp(6rem, 14vw, 7.5rem); height: auto; flex: none; }
.footer__tag { font-family: var(--font-display); font-weight: 850; font-stretch: 74%; font-size: 1.35rem; line-height: 1.02; letter-spacing: 0.04em; text-transform: uppercase; }
.footer__tag sup { font-size: 0.55em; }
.footer__claim { max-width: 34ch; color: var(--muted-dark); }
.footer__claim strong { color: var(--on-dark); font-weight: 750; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; }
.footer__title { margin-bottom: 0.9rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.footer__col ul { display: grid; gap: 0.1rem; }
.footer__col a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; }
.footer__col a:hover { color: var(--red-bright); }
.footer__col address, .footer__col p { color: var(--muted-dark); line-height: 1.6; }
.footer__col p a { color: var(--on-dark); font-weight: 650; }
@media (min-width: 900px) {
  .footer__top { grid-template-columns: 1fr 2fr; gap: 4rem; }
  .footer__cols { grid-template-columns: repeat(4, 1fr); }
}
/* The logo mark rising from the bottom edge, as a watermark */
.footer__stamp {
  height: clamp(9rem, 22vw, 17rem);
  margin-top: 2.5rem;
  overflow: hidden;
  display: grid;
  justify-items: center;
  opacity: 0.1;
  pointer-events: none;
  user-select: none;
}
.footer__stamp img { width: clamp(18rem, 48vw, 36rem); height: auto; }
.footer__bottom { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--line-dark); font-size: 0.85rem; color: var(--muted-dark); }
.footer__bottom ul { display: flex; gap: 1.2rem; }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 40px; }
.footer__bottom a:hover { color: var(--on-dark); }

/* ==========================================================================
   MOBILE CTA BAR
   ========================================================================== */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem calc(0.45rem + env(safe-area-inset-bottom));
  background: rgba(var(--shade), 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line-dark);
  transition: transform 0.35s var(--ease);
}
.mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-height: 52px;
  border-radius: 14px;
  color: var(--on-dark);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  background: rgba(250, 245, 236, 0.08);
}
.mobile-cta a:active { transform: scale(0.97); }
.mobile-cta .mobile-cta__order { background: var(--red); color: var(--white); font-size: 0.95rem; }
body.menu-open .mobile-cta, body.lightbox-open .mobile-cta { transform: translateY(110%); }
/* Home: the bar stays out while the hero (with its own order buttons) fills the screen,
   and slides up once the hero is left behind (script.js adds .is-past-hero). Always there without JS. */
.js body.has-hero:not(.is-past-hero) .mobile-cta { transform: translateY(110%); }
@media (min-width: 900px) { .mobile-cta { display: none; } }

/* ==========================================================================
   SCROLL REVEAL (JS adds .is-in; content stays visible without JS)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--reveal-delay, 0s);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   LEGAL PAGES
   ========================================================================== */
.legal-page { padding-bottom: 0; }
.legal-page .site-footer { padding-top: 0; }
.legal { padding: calc(var(--header-h) + 3rem) 0 5rem; }
.legal__body { max-width: 72ch; }
.legal__body h1 { margin-bottom: 1.5rem; }
.legal__body h2 { margin: 2.2rem 0 0.7rem; font-family: var(--font-display); font-weight: 850; font-stretch: 72%; font-size: 1.8rem; line-height: 1; text-transform: uppercase; }
.legal__body p, .legal__body li { color: var(--muted); }
.legal__body p + p { margin-top: 0.8rem; }
.legal__body ul { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.legal__body a { color: var(--blue-deep); }
.legal__updated { margin-top: 2.5rem; font-size: 0.85rem; }

/* ==========================================================================
   REDUCED MOTION + PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .hero__badge-ring { animation: none; }
}
@media print {
  .site-header, .mobile-cta, .hero__badge, .map, .lightbox, .menu-tools { display: none !important; }
  body { padding: 0; }
  .menu-group { content-visibility: visible; }
}

/* Buttons on the red 'Hai fame?' band */
.hungry .btn--light { --btn-fg: var(--red); }
.hungry .btn--light:hover { --btn-bg: var(--ink); --btn-fg: var(--white); }

/* ==========================================================================
   SUBPAGE EXTRAS: rotating badge, outline word
   ========================================================================== */
.page-hero__badge { bottom: clamp(3.5rem, 8vw, 6.5rem); width: 150px; height: 150px; z-index: 1; }
.page-hero__badge img { width: 76px; height: 76px; }
.page-hero__word {
  position: absolute;
  right: -1vw; bottom: clamp(1.5rem, 5vw, 4rem);
  z-index: -1;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 62%;
  font-size: clamp(8rem, 30vw, 26rem);
  line-height: 0.75;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(83, 162, 218, 0.35);
  pointer-events: none;
  user-select: none;
}


@media (max-width: 899px) { .menu-cta__word { display: none; } }