/* Papa Manel concept: Italian trattoria de luxe. Burgundy mosaic, cream paper, diamond checker frames, mosaic floor,
   gold lettering, arches, script + Didone caps, gold picture frames, a framed aperitivo card.
   Portuguese touch: Funchal's calçada (wave-pattern pavement), « Bem-vindos », Poncha and Madeira wine. */
:root {
  --vino: #6b1522;
  --vino-d: #480e18;
  --vino-dd: #2e0910;
  --crema: #f3ecdd;
  --carta: #e9dfca;
  --ink: #241612;
  --ink-2: #5a463d;
  --ink-3: #8c776a;
  --oro: #b8903f;
  --oro-l: #e2c27a;
  --verde: #1f3d2b;
  --verde-2: #2b5239;
  --rosso: #c3232b;
  --line: rgba(107, 21, 34, .22);
  --serif: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --script: "Pinyon Script", "Snell Roundhand", cursive;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --max: 1240px;
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='22' height='22' fill='%23f3ecdd'/%3E%3Cpath d='M11 0L22 11L11 22L0 11Z' fill='%236b1522'/%3E%3C/svg%3E");
  --calcada: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32' viewBox='0 0 64 32'%3E%3Cg fill='none' stroke='%236b1522' stroke-width='3' stroke-dasharray='3.4 1.6' stroke-linecap='round' opacity='.6'%3E%3Cpath d='M0 32a32 32 0 0 1 64 0'/%3E%3Cpath d='M-32 16a32 32 0 0 1 64 0M32 16a32 32 0 0 1 64 0'/%3E%3Cpath d='M8 32a24 24 0 0 1 48 0' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--crema); color: var(--ink); font: 400 17px/1.6 var(--sans); overflow-x: hidden; }
body::after { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .09; pointer-events: none; z-index: 100; mix-blend-mode: multiply; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
.wrap { width: min(var(--max), 100% - 40px); margin-inline: auto; }
.lab { font: 600 12px/1.2 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.script { font: 400 1em/1 var(--script); text-transform: none; letter-spacing: 0; }
.em { font-style: italic; color: var(--vino); }
.gold { background: linear-gradient(180deg, #f4dd9c 0%, #c99c45 45%, #8f6a27 70%, #e0bf74 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.film { filter: sepia(.16) saturate(1.08) contrast(1.04) brightness(.98); }

/* lockup: script over Didone caps (like a shop sign) */
.lock { text-align: center; line-height: 1; }
.lock .s { display: block; font: 400 clamp(40px, 5vw, 68px)/.8 var(--script); position: relative; z-index: 1; margin-bottom: -.12em; }
.lock .c { display: block; font: 500 clamp(54px, 8.4vw, 124px)/.9 var(--serif); letter-spacing: .02em; text-transform: uppercase; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 26px; border: 1.5px solid currentColor; font: 600 12.5px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; transition: background .25s, color .25s, transform .25s; white-space: nowrap; background: transparent; border-radius: 0; }
.btn:hover { transform: translateY(-2px); }
.btn.vino { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.btn.vino:hover { background: var(--vino-d); }
.btn.cream { background: var(--crema); border-color: var(--crema); color: var(--vino); }
.btn.line-c { color: var(--crema); }
.btn svg { width: 17px; height: 17px; }

/* header */
.top { position: sticky; top: 0; z-index: 50; background: var(--crema); border-bottom: 1px solid var(--line); }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px; background: var(--diamond) 0 0 / 11px 11px; opacity: .9; }
.top .in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 82px; gap: 20px; }
.nav { display: flex; gap: 28px; }
.nav a { font: 600 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--vino); position: relative; padding: 6px 0; }
.nav a::after { content: ""; position: absolute; left: 50%; right: 50%; bottom: 0; height: 1px; background: var(--vino); transition: left .3s, right .3s; }
.nav a:hover::after { left: 0; right: 0; }
.brand { display: flex; align-items: center; gap: 14px; justify-self: center; }
.brand .seal { width: 58px; height: 58px; border-radius: 50%; background: #fffaf0; border: 1px solid var(--line); box-shadow: 0 0 0 4px var(--crema), 0 0 0 5px var(--line); display: grid; place-items: center; overflow: hidden; }
.brand .seal { place-items: end center; }
.brand .seal img { width: 52px; margin-bottom: -3px; }
.brand .wm { width: 160px; }
.right { display: flex; gap: 14px; align-items: center; justify-self: end; }
.lang { display: flex; gap: 2px; }
.lang button { border: 0; background: none; padding: 6px 7px; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; color: var(--ink-3); }
.lang button.on { color: var(--vino); text-decoration: underline; text-underline-offset: 5px; }
.top .btn { padding: 13px 18px; font-size: 11.5px; }

/* gold picture frame (used across the page) */
.frame { position: relative; padding: 12px; background: linear-gradient(135deg, #8a6424, #e6c77f 25%, #9c7330 50%, #f0d590 72%, #7d5a20); box-shadow: 0 30px 50px -20px rgba(0,0,0,.6), inset 0 0 0 2px rgba(60,40,10,.4); }
.frame::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(60,40,10,.45); pointer-events: none; }
.frame > div { overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.frame img { width: 100%; height: 100%; object-fit: cover; }

/* hero: their pizza on the cream mosaic with the burgundy checker band (same set as the dish photos),
   and a cream menu card on the free tiles: chef medal, « dal 1987 », the handwritten signature in burgundy */
.hero { position: relative; overflow: hidden; min-height: calc(100vh - 82px); display: flex; flex-direction: column; background: #e9dfcc; color: var(--ink); }
.hero .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.hero .stage { position: relative; flex: 1; display: flex; align-items: center; padding: 56px 0 120px; width: min(1240px, 100% - 80px); margin-inline: auto; }
.pitch { position: relative; width: min(500px, 46%); text-align: center; padding: 44px 44px 36px; background: #fbf6ea;
  outline: 1.5px solid var(--vino); outline-offset: -10px; box-shadow: inset 0 0 0 14px #fbf6ea, inset 0 0 0 15px rgba(107,21,34,.35), 0 40px 60px -34px rgba(60,20,10,.55); }
.pitch .medal { width: 84px; height: 84px; border-radius: 50%; background: #fff; margin: 0 auto; display: grid; place-items: center; box-shadow: 0 0 0 4px #fbf6ea, 0 0 0 5px var(--line); }
.pitch .medal { overflow: hidden; place-items: end center; }
.pitch .medal img { width: 78px; margin-bottom: -4px; }
.pitch .dal { font: 400 34px/1 var(--script); color: var(--vino); margin-top: 14px; }
.pitch .wm { margin: 10px auto 0; width: 100%; aspect-ratio: 2600 / 560; background: var(--vino);
  -webkit-mask: url(img/wordmark-ink.svg) center / contain no-repeat; mask: url(img/wordmark-ink.svg) center / contain no-repeat; }
.pitch .rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px auto 0; color: var(--vino); }
.pitch .rule::before, .pitch .rule::after { content: ""; width: 54px; height: 1px; background: currentColor; opacity: .6; }
.pitch .rule i { width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
.pitch .sub { font: italic 400 18px/1.55 var(--serif); color: var(--ink-2); margin: 16px auto 0; max-width: 360px; }
.pitch .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.pitch .cta .btn { padding: 15px 20px; letter-spacing: .2em; }
.btn.line-v { color: var(--vino); }
.btn.line-v:hover { background: var(--vino); color: var(--crema); }
.proof { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px dotted rgba(107,21,34,.4); }
/* review sources: real Google and Tripadvisor marks, each links to its page */
.proof .rate { display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; color: inherit; text-decoration: none; }
.proof .rate .logo { grid-row: span 2; width: 30px; height: 30px; }
.proof .rate b { grid-row: span 2; font: 500 34px/1 var(--serif); color: var(--vino); }
.proof .rate .mk.g { color: #e7a817; letter-spacing: .08em; font-size: 13px; }
.proof .rate .mk.t { display: flex; gap: 3px; }
.proof .rate .mk.t i { width: 11px; height: 11px; border-radius: 50%; background: #00aa6c; border: 1.5px solid #00aa6c; }
.proof .rate .mk.t i.o { background: linear-gradient(90deg, #00aa6c 20%, transparent 20%); }
.proof .rate small { font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.proof .rate:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.proof .tag { flex-basis: 100%; justify-content: center; }
.tag { display: inline-flex; align-items: center; gap: 10px; font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.tag b { color: var(--ink); font-weight: 600; }
.tag .dot { width: 7px; height: 7px; border-radius: 50%; background: #3fbf6a; box-shadow: 0 0 0 4px rgba(63,191,106,.18); }
.tag.closed .dot { background: #e0574f; box-shadow: 0 0 0 4px rgba(224,87,79,.2); }

/* mosaic floor band */
.mosaic { position: relative; padding: 44px 0; background:
  linear-gradient(90deg, rgba(110,80,60,.2) 1px, transparent 1px) 0 0 / 10px 10px,
  linear-gradient(rgba(110,80,60,.2) 1px, transparent 1px) 0 0 / 10px 10px, #efe6d4; }
.mosaic .tiles { height: 30px; background:
  linear-gradient(90deg, rgba(240,230,210,.55) 1px, transparent 1px) 0 0 / 10px 10px,
  linear-gradient(rgba(240,230,210,.55) 1px, transparent 1px) 0 0 / 10px 10px,
  conic-gradient(var(--vino) 25%, transparent 0 50%, var(--vino) 0 75%, transparent 0) 0 0 / 20px 20px; }
.mosaic .plate { display: flex; align-items: center; justify-content: center; gap: 38px; padding: 34px 20px; border-top: 3px solid var(--vino); border-bottom: 3px solid var(--vino); margin: 16px auto; flex-wrap: wrap; text-align: center; }
.mosaic .plate span { font: 500 clamp(34px, 4.6vw, 62px)/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; }
.mosaic .plate i { font: 400 clamp(34px, 4vw, 54px)/1 var(--script); font-style: normal; }
.mosaic .plate em { width: 10px; height: 10px; background: var(--vino); transform: rotate(45deg); }

/* section heads */
section { scroll-margin-top: 90px; }
.head { text-align: center; margin-bottom: 46px; }
.head .lab { color: var(--vino); }
.head .lock { margin-top: 14px; }
.head .lock .s { color: var(--vino); font-size: clamp(36px, 4vw, 56px); }
.head .lock .c { font-size: clamp(44px, 6vw, 84px); }
.head p { max-width: 520px; margin: 18px auto 0; color: var(--ink-2); font: italic 400 19px/1.5 var(--serif); }
.orn { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--vino); margin: 0 auto; }
.orn::before, .orn::after { content: ""; width: 70px; height: 1px; background: currentColor; }
.orn i { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }

/* carta */
.carta { padding: 110px 0 110px; }
.dframe { background: var(--diamond) 0 0 / 22px 22px; padding: 22px; box-shadow: 0 40px 70px -40px rgba(72,14,24,.5); }
.dframe > .paper { background: #fbf6ea; outline: 1px solid var(--vino); outline-offset: -12px; box-shadow: inset 0 0 0 16px #fbf6ea, inset 0 0 0 17px var(--vino); padding: 46px 54px 40px; position: relative; }
.tabs { display: flex; gap: 6px 26px; flex-wrap: wrap; justify-content: center; margin-bottom: 26px; }
.tabs button { border: 0; background: none; padding: 8px 4px 10px; font: 600 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1.5px solid transparent;
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px; transition: color .2s; }
.tabs button svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.tabs button svg .f { fill: currentColor; stroke: none; }
.tabs button:hover { color: var(--ink); }
.tabs button:hover svg { transform: translateY(-2px) rotate(-6deg); }
.tabs button.on { color: var(--vino); border-color: var(--vino); }
.tabs button.g svg { color: var(--verde-2); }
@media (prefers-reduced-motion: reduce) { .tabs button svg { transition: none; } }
.add { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--vino); background: transparent; color: var(--vino); display: grid; place-items: center; justify-self: end; transition: .2s; }
.add:hover { background: var(--vino); color: var(--crema); }
.add svg { width: 16px; height: 16px; }
.menu-note { text-align: center; margin-top: 30px; color: var(--ink-2); font: italic 400 18px/1.5 var(--serif); }
.menu-note b { font: 400 30px/1 var(--script); color: var(--vino); margin-right: 8px; font-weight: 400; }

/* massa verde: green paper card on dark cloth */
.verde { background: #191512; padding: 120px 0; position: relative; overflow: hidden; }
.verde::before { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .35; }
.verde .in { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; position: relative; }
.folder { position: relative; padding: 0 0 0 34px; }
.folder::before { content: ""; position: absolute; left: 0; top: 40px; bottom: -30px; right: 40px; background: var(--verde); }
.card-g { position: relative; background: #ece4d1; color: var(--verde); padding: 56px 46px 40px; text-align: center; transform: rotate(-1.5deg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.6); }
.card-g .clip { position: absolute; top: -22px; left: 46px; width: 22px; height: 70px; border: 3px solid #a9a9a9; border-radius: 12px; border-bottom-color: transparent; }
.card-g h2 { font: 400 clamp(54px, 7vw, 96px)/.9 var(--serif); font-stretch: condensed; letter-spacing: .02em; margin: 0; text-transform: uppercase; transform: scaleX(.78); transform-origin: center; }
.card-g .k { font: 600 12px/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; margin-top: 8px; }
.card-g .sp { font: 500 26px/1.15 var(--serif); text-transform: uppercase; letter-spacing: .04em; margin: 26px 0 0; }
.card-g .vl { margin-top: 22px; display: grid; gap: 0; text-align: left; }
.card-g .vl div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(31,61,43,.25); }
.card-g .vl b { font: 500 21px/1.1 var(--serif); text-transform: uppercase; letter-spacing: .04em; }
.card-g .vl small { display: block; font: italic 400 15px/1.3 var(--serif); color: rgba(31,61,43,.75); }
.card-g .vl em { margin-left: auto; font: 500 19px/1 var(--serif); font-style: normal; white-space: nowrap; }
.card-g .sig { font: 400 36px/1 var(--script); margin-top: 26px; }
.card-g .box { margin-top: 24px; border: 1px solid var(--verde); outline: 1px solid var(--verde); outline-offset: 4px; padding: 14px; font: 600 11.5px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.verde .pics { position: relative; height: 600px; }
.verde .pics .frame { position: absolute; }
.verde .pics .a { right: 0; top: 0; width: 74%; transform: rotate(2deg); }
.verde .pics .a > div { aspect-ratio: 4/3; }
.verde .pics .b { left: 0; bottom: 20px; width: 50%; transform: rotate(-4deg); }
.verde .pics .b > div { aspect-ratio: 1; }
.verde .pics .note { position: absolute; right: 4%; bottom: 40px; color: var(--crema); font: 400 34px/1.1 var(--script); transform: rotate(-4deg); max-width: 240px; text-align: center; }

/* story: textured wall, gold frames, red tile wainscot */
.story { position: relative; padding: 110px 0 0; background:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,.5), transparent 40%),
  repeating-radial-gradient(circle at 70% 60%, rgba(120,100,80,.06) 0 2px, transparent 2px 7px), #ddd3c2; }
.story .in { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; padding-bottom: 90px; }
.wall { position: relative; height: 560px; }
.wall .frame { position: absolute; }
.wall .p1 { left: 6%; top: 0; width: 56%; }
.wall .p1 > div { aspect-ratio: 4/5; }
.wall .p2 { right: 0; top: 90px; width: 40%; padding: 9px; }
.wall .p2 > div { aspect-ratio: 3/4; }
.wall .p3 { right: 8%; bottom: 0; width: 46%; padding: 9px; background: linear-gradient(135deg, #5c3417, #9a6a3a 40%, #5c3417); }
.wall .p3 > div { aspect-ratio: 3/2; }
.wall .label { position: absolute; left: 10%; bottom: 30px; background: #fbf6ea; padding: 10px 16px; font: italic 400 16px/1.3 var(--serif); box-shadow: 0 8px 18px -8px rgba(0,0,0,.4); }
.story .lab { color: var(--vino); }
.story .lock { text-align: left; margin: 16px 0 26px; }
.story .lock .s { color: var(--vino); font-size: clamp(38px, 4vw, 56px); }
.story .lock .c { font-size: clamp(44px, 5.4vw, 76px); }
.story p { font: italic 400 20px/1.6 var(--serif); color: var(--ink-2); margin: 0 0 16px; }
.years { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 34px; border-top: 1px solid var(--vino); border-bottom: 1px solid var(--vino); }
.years div { padding: 16px 10px; text-align: center; border-right: 1px solid var(--line); }
.years div:last-child { border-right: 0; }
.years b { display: block; font: 500 36px/1 var(--serif); color: var(--vino); }
.years span { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-top: 8px; }
.wainscot { height: 120px; border-top: 6px solid #f6efdf; background:
  linear-gradient(90deg, rgba(255,255,255,.25) 2px, transparent 2px) 0 0 / 62px 62px,
  linear-gradient(rgba(255,255,255,.25) 2px, transparent 2px) 0 0 / 62px 62px,
  linear-gradient(160deg, #8e1d25, #6b1119 50%, #7d1820); box-shadow: inset 0 10px 20px -10px rgba(0,0,0,.4); }

/* casas over calçada */
.casas { padding: 110px 0; background: var(--calcada) 0 0 / 64px 32px, #f1e9d8; position: relative; }
.casas::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(241,233,216,.97) 30%, rgba(241,233,216,.6) 75%, rgba(241,233,216,.2)); }
.casas .wrap { position: relative; }
.casas .note-c { text-align: center; font: 600 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--vino); margin-top: 40px; }
.cgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.casa { background: #fbf6ea; padding: 26px 20px 20px; outline: 1px solid var(--vino); outline-offset: -8px; box-shadow: 0 20px 40px -26px rgba(72,14,24,.55); display: flex; flex-direction: column; gap: 10px; text-align: center; transition: transform .3s; }
.casa:hover { transform: translateY(-5px); }
/* place photo: arched window in a thin gold frame, warm light sweeps across on hover */
.casa .ph { position: relative; margin: -8px -6px 8px; aspect-ratio: 4/4.6; border-radius: 999px 999px 3px 3px; padding: 5px; overflow: hidden;
  background: linear-gradient(160deg, #e9cd86, #9c7330 45%, #f0d590 75%, #7d5a20); box-shadow: 0 18px 30px -18px rgba(72,14,24,.6); }
.casa .ph img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 0 0; display: block; transform: scale(1.04); transition: transform 1.4s cubic-bezier(.22,1,.36,1), filter .6s; filter: saturate(1.02); }
.casa .ph .glow { position: absolute; inset: 5px; border-radius: 999px 999px 0 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,226,160,.45) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat, linear-gradient(0deg, rgba(46,9,16,.35), transparent 40%); transition: background-position 1.2s cubic-bezier(.22,1,.36,1); }
.casa:hover .ph img { transform: scale(1.12); filter: saturate(1.12); }
.casa:hover .ph .glow { background-position: 150% 0, 0 0; }
@media (prefers-reduced-motion: reduce) { .casa .ph img, .casa .ph .glow { transition: none; } }
.casa .n { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.casa .n .num { font: 500 15px/1 var(--serif); letter-spacing: .3em; color: var(--vino); }
.casa h3 { font: 400 40px/1 var(--script); margin: 4px 0 0; color: var(--vino); }
.casa .ad { font: italic 400 15.5px/1.4 var(--serif); color: var(--ink-2); }
.casa .rt { font-size: 12.5px; letter-spacing: .1em; color: var(--ink-3); }
.casa .rt b { color: var(--ink); }
.casa .st { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; }
.casa .st i { width: 7px; height: 7px; border-radius: 50%; background: #2f9a52; }
.casa .st.off i { background: var(--rosso); }
.casa .acts { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; justify-content: center; }
.casa .acts a { flex: 1; border: 1px solid var(--vino); color: var(--vino); padding: 10px 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; text-align: center; }
.casa .acts a.r { background: var(--vino); color: var(--crema); }

/* reviews */
.vozes { padding: 110px 0; background: var(--crema); }
.qgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--vino); border-bottom: 1px solid var(--vino); }
.q { padding: 40px 34px; text-align: center; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.q:last-child { border-right: 0; }
.q .s { color: var(--oro); letter-spacing: 6px; font-size: 13px; }
.q blockquote { margin: 0; font: italic 400 25px/1.3 var(--serif); }
.q cite { font: 600 11px/1.4 var(--sans); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); margin-top: auto; }

/* order band */
.band { background: var(--vino); color: var(--crema); padding: 0 0 90px; position: relative; overflow: hidden; }
.band .edge { height: 26px; background: var(--diamond) 0 0 / 26px 26px; filter: invert(0); margin-bottom: 80px; }
.band .in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; }
.band .lock { text-align: left; }
.band .lock .s { color: var(--oro-l); font-size: clamp(38px, 4vw, 58px); }
.band .lock .c { font-size: clamp(46px, 5.6vw, 82px); }
.band p { font: italic 400 20px/1.55 var(--serif); color: rgba(243,236,221,.82); max-width: 520px; }
.band .ways { display: grid; gap: 12px; }
.band .way { border: 1px solid rgba(243,236,221,.4); padding: 20px 22px; display: flex; gap: 18px; align-items: center; transition: background .25s, color .25s; }
.band .way:hover { background: var(--crema); color: var(--vino); }
.band .way .ic { width: 46px; height: 46px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; flex: none; }
.band .way .ic svg { width: 20px; height: 20px; }
.band .way b { display: block; font: 500 21px/1.1 var(--serif); text-transform: uppercase; letter-spacing: .06em; }
.band .way small { font: italic 400 15px/1.3 var(--serif); opacity: .75; }

/* footer */
footer { background: #efe6d3; color: var(--ink-2); padding: 80px 0 30px; text-align: center; border-top: 3px solid var(--vino); }
.crest { width: 190px; height: 190px; margin: 0 auto; background: #fffaf0; display: grid; place-items: center;
  clip-path: path("M95 2 C115 2 122 18 140 20 C160 22 174 14 182 30 C190 46 178 60 184 78 C190 96 190 104 184 118 C178 136 190 150 182 164 C172 180 158 170 140 172 C122 174 114 190 95 190 C76 190 68 174 50 172 C32 170 18 180 8 164 C0 150 12 136 6 118 C0 104 0 96 6 78 C12 60 0 46 8 30 C16 14 30 22 50 20 C68 18 75 2 95 2 Z"); }
.crest { place-items: end center; }
.crest img { width: 158px; margin-bottom: -6px; }
.crest-wm { display: block; width: 260px; height: auto; margin: 22px auto 0; opacity: .92; }
footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 50px; }
footer h5 { font: 600 11px/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--vino); margin: 0 0 16px; }
footer p, footer a { display: block; margin: 0 0 8px; font: italic 400 17px/1.5 var(--serif); }
footer .bot { display: flex; justify-content: space-between; gap: 20px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .12em; flex-wrap: wrap; }

/* reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
.rv.in-view { opacity: 1; transform: none; }

/* cart */
.cart { position: fixed; right: 20px; bottom: 20px; z-index: 60; background: var(--vino); color: var(--crema); padding: 12px 12px 12px 20px; display: flex; align-items: center; gap: 14px; box-shadow: 0 20px 40px -14px rgba(0,0,0,.5); transform: translateY(140%); opacity: 0; visibility: hidden; transition: transform .35s, opacity .35s, visibility .35s; }
.cart.show { transform: none; opacity: 1; visibility: visible; }
.cart b { font: italic 500 18px/1 var(--serif); }
.cart a { background: var(--crema); color: var(--vino); padding: 11px 15px; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }

/* ---------- order page ---------- */
.ord { padding: 60px 0 120px; }
.ord .head { margin-bottom: 30px; }
.steps { display: flex; gap: 8px 26px; margin: 0 0 36px; flex-wrap: wrap; justify-content: center; }
.steps span { display: flex; align-items: center; gap: 10px; font: 600 11.5px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.steps span i { width: 30px; height: 30px; border-radius: 50%; border: 1px solid currentColor; display: grid; place-items: center; font: italic 500 15px/1 var(--serif); letter-spacing: 0; }
.steps span.on { color: var(--vino); }
.steps span.on i { background: var(--vino); color: var(--crema); border-color: var(--vino); }
.steps span.done { color: var(--verde-2); }
.ogrid { display: grid; grid-template-columns: 1fr 380px; gap: 30px; align-items: start; }
.pane { background: #fbf6ea; outline: 1px solid var(--vino); outline-offset: -8px; padding: 36px 34px; box-shadow: 0 20px 40px -30px rgba(72,14,24,.5); }
.pane h3 { font: 500 26px/1.1 var(--serif); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 18px; color: var(--vino); }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.opt { border: 1px solid var(--line); padding: 16px; text-align: left; background: transparent; display: flex; flex-direction: column; gap: 4px; }
.opt b { font: 400 30px/1 var(--script); color: var(--vino); }
.opt small { color: var(--ink-2); font: italic 400 14.5px/1.35 var(--serif); }
.opt.on { border-color: var(--vino); background: #fff; box-shadow: inset 0 0 0 1px var(--vino); }
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.pz-list { display: grid; }
.pzr { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px dotted rgba(107,21,34,.35); }
.pzr b { font: 500 20px/1.1 var(--serif); text-transform: uppercase; letter-spacing: .04em; }
.pzr p { margin: 3px 0 0; font: italic 400 15px/1.35 var(--serif); color: var(--ink-2); }
.sizes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sizes button { border: 1px solid var(--line); background: transparent; padding: 8px 10px; font: 600 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; min-width: 72px; color: var(--ink-2); }
.sizes button b { display: block; font: 500 16px/1.2 var(--serif); letter-spacing: 0; color: var(--ink); text-transform: none; }
.sizes button:hover { border-color: var(--vino); background: #fff; }
.half { margin-top: 22px; padding: 16px 18px; border: 1px dashed var(--verde-2); display: flex; gap: 14px; align-items: center; font: italic 400 16px/1.4 var(--serif); }
.half b { font: 400 28px/1 var(--script); color: var(--verde-2); font-style: normal; }
.sum { position: sticky; top: 104px; }
.sum .line { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px dotted rgba(107,21,34,.3); font: 400 16px/1.3 var(--serif); }
.sum .line button { border: 0; background: none; color: var(--ink-3); font-size: 18px; line-height: 1; padding: 0 4px; }
.sum .tot { display: flex; justify-content: space-between; padding: 18px 0 8px; font: 500 26px/1 var(--serif); color: var(--vino); }
.sum .empty { font: italic 400 16px/1.4 var(--serif); color: var(--ink-3); padding: 10px 0 18px; }
.pay { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.pay span { border: 1px solid var(--line); padding: 8px 11px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.pay button { border: 1px solid var(--line); background: transparent; padding: 10px 12px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.pay button.on { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.demofill { display: block; width: 100%; margin: 4px 0 6px; padding: 12px 14px; border: 1px dashed var(--verde-2); background: transparent; color: var(--verde-2); font: 600 11px/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.ord-err { margin: 14px 0 0; color: var(--rosso); font: 600 14px/1.4 var(--sans); text-align: right; }
.slot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.slot button { border: 1px solid var(--line); background: transparent; padding: 10px 14px; font: 500 15px/1 var(--serif); }
.slot button.on { background: var(--vino); color: var(--crema); border-color: var(--vino); }
.field { display: grid; gap: 6px; margin-top: 16px; }
.field label { font: 600 10.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.field input { border: 0; border-bottom: 1px solid var(--vino); padding: 10px 2px; font: italic 400 18px/1.2 var(--serif); background: transparent; }
.field input:focus { outline: none; border-bottom-width: 2px; }
.done-box { text-align: center; padding: 50px 30px; }
.done-box .ok { width: 84px; height: 84px; border-radius: 50%; background: var(--vino); color: var(--crema); display: grid; place-items: center; margin: 0 auto 20px; }
.done-box h3 { font: 400 56px/1 var(--script); text-transform: none; letter-spacing: 0; }
.demo { font: italic 400 14px/1.4 var(--serif); color: var(--ink-3); margin-top: 14px; text-align: center; }
.hide { display: none !important; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .cgrid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
@media (max-width: 1020px) {
  .nav { display: none; }
  .top .in { grid-template-columns: auto 1fr; }
  .brand { justify-self: start; }
  .hero .stage { padding: 48px 0 110px; width: calc(100% - 40px); }
  .pitch { width: min(470px, 100%); }
  .hero .stage { padding-top: 0; }
  .verde .in, .aperitivo .in, .story .in, .band .in, .ogrid { grid-template-columns: 1fr; }
  .qgrid { grid-template-columns: 1fr; }
  .q { border-right: 0; border-bottom: 1px solid var(--line); }
  .q:last-child { border-bottom: 0; }
  .sum { position: static; }
}
@media (max-width: 680px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .top .in { height: 68px; gap: 10px; }
  .brand .wm { display: none; }
  .brand .seal { width: 46px; height: 46px; }
  .brand .seal img { width: 42px; margin-bottom: -3px; }
  .top .btn { padding: 11px 13px; font-size: 10.5px; letter-spacing: .18em; }
  .hero { min-height: 0; }
  .hero { min-height: 0; }
  .hero .bg { position: relative; height: 96vw; min-height: 340px; object-position: 84% 30%; }
  .hero .stage { padding: 0 0 40px; width: calc(100% - 32px); margin-top: -64px; }
  .pitch { padding: 34px 22px 28px; }
  .casa .ph { aspect-ratio: 4/3.3; }
    .pitch .sub { font-size: 16.5px; }
  .pitch .dal { font-size: 28px; }
  .pitch .cta .btn { flex: 1; padding: 15px 12px; }
  .proof { gap: 18px; }
  .mosaic { padding: 28px 0; }
  .mosaic .plate { gap: 10px 18px; padding: 22px 10px; }
  .mosaic .plate em { display: none; }
  .carta, .casas, .vozes, .aperitivo { padding: 80px 0; }
  .verde { padding: 80px 0; }
  .dframe { padding: 12px; background-size: 14px 14px; }
  .dframe > .paper { padding: 34px 18px 26px; outline-offset: -7px; box-shadow: inset 0 0 0 10px #fbf6ea, inset 0 0 0 11px var(--vino); }
  .tabs { gap: 4px 16px; }
          .card-g { padding: 46px 22px 30px; }
  .folder { padding-left: 14px; }
  .verde .pics { height: 380px; margin-top: 30px; }
  .verde .pics .note { font-size: 26px; right: 0; bottom: 0; }
  .wall { height: 420px; }
  .years { grid-template-columns: 1fr 1fr; }
  .years div:nth-child(2) { border-right: 0; }
  .years div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .years b { font-size: 30px; }
  .q { padding: 30px 10px; }
  .q blockquote { font-size: 22px; }
  .band .edge { margin-bottom: 60px; }
  footer .cols { grid-template-columns: 1fr; }
  .pane { padding: 28px 20px; }
  .pzr { grid-template-columns: 1fr; }
  .sizes { justify-content: flex-start; }
  .mode { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }
.in > *, .ogrid > * { min-width: 0; }
@media (max-width: 680px) {
}
.btn.red { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.btn.red:hover { background: var(--vino-d); }

/* v3: dish photos, gallery, aperitivo in the house look */
.pzr .info { display: flex; gap: 18px; align-items: center; }
.th { width: 74px; height: 74px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 3px #fbf6ea, 0 0 0 4px var(--line); }
.th.none { background: radial-gradient(circle, #fbf6ea 52%, transparent 53%), var(--diamond) 0 0 / 10px 10px; opacity: .55; }
.pzr .th { width: 58px; height: 58px; }
.galleria { padding: 90px 0 0; }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.gal figure { margin: 0; }
.gal .frame { padding: 9px; }
.gal .frame > div { aspect-ratio: 1; }
.gal figure:nth-child(odd) .frame { transform: rotate(-1.5deg); }
.gal figure:nth-child(even) .frame { transform: rotate(1.5deg); margin-top: 26px; }
.gal figcaption { text-align: center; font: 400 32px/1 var(--script); color: var(--vino); margin-top: 14px; }
.aperitivo { background: var(--vino); padding: 110px 0; position: relative; overflow: hidden; }
.aperitivo { background-color: #5e1220; }
/* burgundy mosaic floor: 30 px tiles with dark grout and a soft sheen on each tile */
.aperitivo::before { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(25,4,8,.6) 2px, transparent 2px) 0 0 / 30px 30px,
    linear-gradient(rgba(25,4,8,.6) 2px, transparent 2px) 0 0 / 30px 30px,
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 55%) 0 0 / 30px 30px; }
.aperitivo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 50% 50%, transparent 40%, rgba(20,3,7,.45)); pointer-events: none; }
.aperitivo .in { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
.glassframe .frame { transform: rotate(-2deg); }
.glassframe .frame > div { aspect-ratio: 1; }
.glassframe .cap { display: block; text-align: center; font: 400 32px/1 var(--script); color: var(--oro-l); margin-top: 18px; }
.dframe.small { padding: 18px; background-size: 18px 18px; }
.dframe.small > .paper { padding: 44px 46px 36px; text-align: center; }
.aperitivo .paper .lab { color: var(--vino); }
.aperitivo .paper .lock { margin: 14px 0 0; }
.aperitivo .paper .lock .s { color: var(--vino); font-size: clamp(38px, 4vw, 54px); }
.aperitivo .paper .lock .c { font-size: clamp(42px, 5vw, 72px); }
.aperitivo .intro { font: italic 400 18px/1.5 var(--serif); color: var(--ink-2); max-width: 440px; margin: 16px auto 0; }
.drinks { list-style: none; padding: 0; margin: 26px 0 22px; display: grid; gap: 12px; text-align: left; }
.drinks li { display: flex; align-items: baseline; gap: 10px; }
.drinks span { font: 500 19px/1.2 var(--serif); text-transform: uppercase; letter-spacing: .05em; }
.drinks i { flex: 1; border-bottom: 1px dotted rgba(107,21,34,.5); }
.drinks b { font: 500 19px/1 var(--serif); color: var(--vino); }
.aperitivo .flags { justify-content: center; margin-top: 14px; }
@media (max-width: 1020px) { .aperitivo .in { grid-template-columns: 1fr; } .glassframe { max-width: 420px; margin: 0 auto; } .gal { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) {
  .th { width: 58px; height: 58px; }
  .gal { gap: 16px; }
  .gal figcaption { font-size: 26px; }
  .dframe.small > .paper { padding: 34px 20px 26px; }
  .drinks span, .drinks b { font-size: 16px; }
  .aperitivo { padding: 80px 0; }
}
.flags { display: flex; gap: 10px; align-items: center; font: 600 11.5px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--vino); }

/* ---------- motion layer (motion.js): Motion One ---------- */
.btn.mag { transition: background .2s, color .2s, border-color .2s; }
/* spotlight + tilt on photo frames */
.tilt { transform-style: preserve-3d; will-change: transform; }
.tilt > div { position: relative; }
.tilt > div::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(300px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,236,190,.38), transparent 55%); mix-blend-mode: soft-light; }
.tilt:hover > div::after { opacity: 1; }
/* velocity marquee */
.marq { overflow: hidden; background: var(--vino-dd); color: var(--crema); padding: 22px 0; border-top: 1px solid rgba(226,194,122,.25); border-bottom: 1px solid rgba(226,194,122,.25); }
.marq .track { display: flex; align-items: center; gap: 44px; width: max-content; will-change: transform; }
.marq span { font: 500 clamp(28px, 3.4vw, 46px)/1 var(--serif); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.marq span i { font: 400 1.05em/1 var(--script); text-transform: none; color: var(--oro-l); letter-spacing: 0; }
.marq em { width: 9px; height: 9px; background: var(--oro-l); transform: rotate(45deg); flex: none; }

/* page change loader + first arrival: chef then signature written line by line; small 2D pizza bottom right */
.loader { position: fixed; inset: 0; z-index: 999; display: grid; place-items: center; background: #f3ecdd;
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.loader.on { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.loader.now { transition: none; }
.loader .mark { width: min(360px, 78vw); }
.loader .mark svg { width: 100%; height: auto; display: block; }
/* each mask stroke stays hidden until its turn (no dots), then draws along the line */
.loader .pen path { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); visibility: hidden; }
.loader.draw .pen path { animation: pm-pen var(--t) linear var(--d) forwards; }
.loader.done .mk g[mask] { mask: none; }
@keyframes pm-pen { from { visibility: visible; stroke-dashoffset: var(--l); } to { visibility: visible; stroke-dashoffset: 0; } }
.loader .spin { position: absolute; right: 28px; bottom: 28px; width: 44px; height: 44px; animation: pm-spin 1.2s linear infinite; }
.loader .spin img { width: 100%; height: 100%; display: block; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .loader .spin { animation-duration: 6s; } .loader .mk g[mask] { mask: none; } }

/* menu: a grid of dish cards, the photo is the point */
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; margin-top: 10px; }
.mc { display: flex; flex-direction: column; background: #fbf6ea; outline: 1px solid rgba(107,21,34,.35); outline-offset: -6px; padding: 10px 10px 14px; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s; }
.mc:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -26px rgba(72,14,24,.55); }
.mc .ph { position: relative; aspect-ratio: 1; overflow: hidden; background: #e9dfca; }
.mc .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.22,1,.36,1); }
.mc:hover .ph img { transform: scale(1.06) rotate(-2deg); }
.mc .ph .none { position: absolute; inset: 0; background: repeating-conic-gradient(#efe6d3 0 25%, #e6dbc4 0 50%) 0 0 / 22px 22px; }
.mc .chip { position: absolute; left: 10px; top: 10px; background: #fbf6ea; padding: 6px 10px 5px; font: 400 20px/1 var(--script); color: var(--verde-2); box-shadow: 0 6px 14px -8px rgba(0,0,0,.4); }
.mc .chip.r { color: var(--vino); }
.mc .tx { padding: 16px 8px 0; text-align: center; flex: 1; }
.mc h4 { font: 500 22px/1.1 var(--serif); margin: 0; text-transform: uppercase; letter-spacing: .04em; }
.mc p { margin: 6px 0 0; color: var(--ink-2); font: italic 400 15.5px/1.4 var(--serif); }
.mc .sz { display: flex; gap: 6px; padding: 14px 4px 0; }
.mc .sz .add { flex: 1; width: auto; height: auto; border-radius: 0; display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; background: none; border: 1px solid rgba(107,21,34,.3); color: var(--ink); cursor: pointer; position: relative; transition: background .2s, color .2s, border-color .2s; }
.mc .sz .add small { font: 600 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--vino); }
.mc .sz .add b { font: 500 15.5px/1 var(--serif); font-variant-numeric: lining-nums; }
.mc .sz .add i { position: absolute; right: 3px; top: 3px; width: 11px; height: 11px; opacity: 0; transition: opacity .2s; }
.mc .sz .add i svg { width: 100%; height: 100%; }
.mc .sz .add:hover, .mc .sz .add:focus-visible { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.mc .sz .add:hover small, .mc .sz .add:focus-visible small { color: var(--oro-l); }
.mc .sz .add:hover i { opacity: 1; }
.mc .sz .add.ok { animation: pm-ok .5s ease; }
@keyframes pm-ok { 40% { transform: scale(1.08); background: #2f9a52; border-color: #2f9a52; color: #fff; } }
@media (max-width: 1020px) { .mgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mgrid { grid-template-columns: 1fr; gap: 20px; } .mc h4 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .mc, .mc .ph img { transition: none; } .mc:hover, .mc:hover .ph img { transform: none; } .mc .sz .add.ok { animation: none; } }


/* the chef alone: no circle, no frame, no background (Theo, 25 Oct) */
.brand .seal, .pitch .medal, .crest { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; clip-path: none !important; overflow: visible !important; place-items: center !important; }
.brand .seal img { width: 54px; margin: 0; }
.pitch .medal img { width: 96px; margin: 0; }
.pitch .medal { width: 96px; height: auto; }
.crest { width: 170px; height: auto; }
.crest img { width: 170px; margin: 0; }
@media (max-width: 680px) { .brand .seal img { width: 44px; } }

/* first visit hero film (hero.js): film plays, ends on its own last frame (.bg-end, same framing), then header and card piece by piece */
.hero .bg-vid, .hero .bg-end { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 84% 50%; }
.hero .bg-end { opacity: 0; }
html.film .hero .bg, html.intro-still .hero .bg { visibility: hidden; }
html.intro-still .hero .bg-end { opacity: 1; transition: opacity .3s ease; }
html.intro .top .in > *, html.intro .hero .pitch, html.intro .hero .pitch > * { opacity: 0; transform: translateY(12px); }
html.intro .hero .pitch { transform: translateY(18px) scale(.985); }
html.intro-in .top .in > *, html.intro-in .hero .pitch, html.intro-in .hero .pitch > * { opacity: 1; transform: none;
  transition: opacity .55s ease, transform .7s cubic-bezier(.22,1,.36,1); transition-delay: calc(var(--i, 0) * 90ms); }
@media (max-width: 680px) { .hero .bg-vid, .hero .bg-end { height: 96vw; min-height: 340px; object-position: 92% 50%; } }

/* ---------- table order styles (unused in this copy) ---------- */
.mesa-page { background: var(--crema); }
.mt-top { position: sticky; top: 0; z-index: 50; background: var(--crema); border-bottom: 1px solid var(--line); }
.mt-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 6px; background: var(--diamond) 0 0 / 11px 11px; opacity: .9; }
.mt-in { display: flex; align-items: center; gap: 10px; height: 64px; width: min(640px, 100% - 32px); margin-inline: auto; }
.mt-chef { width: 44px; margin-top: 6px; }
.mt-wm { width: 120px; }
.mt-in .lang { margin-left: auto; }
.mt { width: min(640px, 100% - 32px); margin: 26px auto 0; padding-bottom: 120px; }
.mesa-page.has-bar .mt { padding-bottom: 150px; }
.mt-card { text-align: center; background: #fbf6ea; outline: 1px solid var(--vino); outline-offset: -8px; padding: 26px 22px 22px; box-shadow: 0 20px 40px -30px rgba(72,14,24,.5); margin-bottom: 26px; }
.mt-card .s { display: block; font: 400 38px/.8 var(--script); color: var(--vino); }
.mt-card .hn { display: block; font: 500 38px/1 var(--serif); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.mt-card .tb { display: inline-block; margin-top: 12px; padding: 8px 16px 7px; background: var(--vino); color: var(--crema); font: 600 12px/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
.mt-card .tb i { font: italic 500 20px/1 var(--serif); letter-spacing: 0; vertical-align: -2px; }
.mt-card p { margin: 12px 0 0; font: italic 400 16px/1.4 var(--serif); color: var(--ink-2); }
.mt-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 8px; padding: 0 16px 4px; position: sticky; top: 70px; z-index: 5; background: var(--crema); }
.mt-tabs::-webkit-scrollbar { display: none; }
.mt-tabs button { flex: none; border: 1px solid var(--line); background: transparent; padding: 11px 14px; font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.mt-tabs button.on { background: var(--vino); border-color: var(--vino); color: var(--crema); }
.mt-tabs .g { width: 9px; height: 9px; border-radius: 50%; background: var(--verde-2); }
.mt-dish { display: grid; grid-template-columns: 78px 1fr; gap: 6px 14px; padding: 16px 0; border-bottom: 1px dotted rgba(107,21,34,.35); }
.mt-dish .ph img, .mt-dish .ph .none, .mt-line img, .mt-line .none { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fbf6ea, 0 0 0 4px var(--line); display: block; }
.mt-dish .ph .none, .mt-line .none { background: radial-gradient(circle, #fbf6ea 52%, transparent 53%), var(--diamond) 0 0 / 10px 10px; opacity: .55; }
.mt-dish h4 { margin: 4px 0 0; font: 500 19px/1.15 var(--serif); text-transform: uppercase; letter-spacing: .04em; }
.mt-dish h4 .chip { font: 400 20px/1 var(--script); text-transform: none; letter-spacing: 0; color: var(--verde-2); white-space: nowrap; }
.mt-dish h4 .chip.r { color: var(--vino); }
.mt-dish p { margin: 3px 0 0; font: italic 400 15px/1.35 var(--serif); color: var(--ink-2); }
.mt-dish .sizes { grid-column: 1 / -1; justify-content: flex-start; margin-top: 6px; }
.mt-dish .sizes button { position: relative; min-width: 0; flex: 1 1 0; padding: 10px 4px; }
.mt-dish .sizes button.has { border-color: var(--vino); background: #fff; box-shadow: inset 0 0 0 1px var(--vino); }
.mt-dish .sizes button i { position: absolute; top: -8px; right: -6px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--vino); color: var(--crema); font: 700 11px/20px var(--sans); letter-spacing: 0; font-style: normal; }
.mt-dish .sizes button.ok { animation: pm-ok .5s ease; }
.mt-half { margin-top: 22px; }
.mt-step.pane { padding: 30px 22px; }
.mt-line { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dotted rgba(107,21,34,.3); }
.mt-line img, .mt-line .none { width: 54px; height: 54px; }
.mt-line b { display: block; font: 500 17px/1.15 var(--serif); text-transform: uppercase; letter-spacing: .03em; }
.mt-line small { font: italic 400 14.5px/1.3 var(--serif); color: var(--ink-2); }
.mt-line .qty { display: flex; align-items: center; gap: 4px; }
.mt-line .qty button { width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; font: 500 18px/1 var(--serif); }
.mt-line .qty b { min-width: 22px; text-align: center; text-transform: none; }
.sum-empty { font: italic 400 16px/1.4 var(--serif); color: var(--ink-3); }
.mt-tot { display: flex; justify-content: space-between; align-items: baseline; padding: 20px 0 6px; font: 500 26px/1 var(--serif); color: var(--vino); }
.mt-wide { width: 100%; margin-top: 12px; padding: 18px 16px; }
.mt-wide:disabled { opacity: .4; }
.mt-back { border-color: var(--line); color: var(--ink-2); }
.mt-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mt-pay .opt b { font-size: 26px; }
.mt-pay .opt small { font-size: 13.5px; }
.mt-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.mt-consent input { margin-top: 4px; accent-color: var(--vino); }
.mt-err { color: var(--rosso); font: 600 14px/1.4 var(--sans); min-height: 1px; margin: 12px 0 0; }
.mt-oktxt { color: var(--ink-2); max-width: 420px; margin: 0 auto; }
.mt-num { display: inline-block; margin-top: 14px; padding: 8px 14px 7px; border: 1px solid var(--line); font: 600 11.5px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--vino); }
.mt-review { margin-top: 28px; padding-top: 24px; border-top: 1px dotted rgba(107,21,34,.35); }
.mt-review h4 { margin: 0; font: 400 40px/1 var(--script); color: var(--vino); }
.mt-review p { color: var(--ink-2); font: italic 400 16px/1.4 var(--serif); }
.mt-stars { display: flex; justify-content: center; gap: 6px; margin: 14px 0 6px; }
.mt-stars button { border: 0; background: none; font-size: 44px; line-height: 1; color: #d9cdb6; padding: 2px; transition: transform .15s, color .15s; }
.mt-stars button.on { color: var(--oro); }
.mt-stars button:active { transform: scale(.9); }
.mt-review textarea { width: 100%; border: 1px solid var(--line); background: #fff; padding: 12px; font: italic 400 17px/1.4 var(--serif); resize: vertical; }
.mt-review textarea:focus, .mt .field input:focus { outline: none; border-color: var(--vino); box-shadow: inset 0 0 0 1px var(--vino); }
.mt .field input:focus { box-shadow: none; }
.mt-where { margin: -10px 0 16px; font: 600 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.mt-bad { text-align: center; }
.mt-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px max(16px, env(safe-area-inset-left)) calc(14px + env(safe-area-inset-bottom)); background: var(--vino); color: var(--crema); box-shadow: 0 -10px 30px -12px rgba(46,9,16,.6); }
.mt-bar::before { content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; background: var(--diamond) 0 0 / 11px 11px; }
.mt-bar span { font: italic 400 17px/1.2 var(--serif); }
.mt-bar span b { font: 500 22px/1 var(--serif); font-style: normal; }
.mt-bar .btn { padding: 14px 16px; }
.mt-wait { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; justify-items: center; gap: 18px; background: rgba(243,236,221,.96); }
.mt-wait img { width: 84px; animation: pm-spin 1.4s linear infinite; }
.mt-wait b { font: 500 22px/1.2 var(--serif); color: var(--vino); }
[hidden] { display: none !important; }
@media (max-width: 380px) { .mt-dish .sizes button { font-size: 9px; letter-spacing: .08em; } .mt-card .casa { font-size: 32px; } }

/* Concept copy (Re:solve showcase): fixed note, and "nothing was sent" messages */
.concept-note { position: fixed; left: 16px; bottom: 16px; z-index: 59; background: var(--crema); color: var(--ink-2); border: 1px solid var(--vino); box-shadow: 0 0 0 3px var(--crema), 0 0 0 4px rgba(107,21,34,.35); padding: 8px 12px; font: 600 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.concept-note:hover { color: var(--vino); }
.concept-note i { font: italic 400 13px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--vino); }
.cart button { border: 0; cursor: pointer; background: var(--crema); color: var(--vino); padding: 11px 15px; font: 600 11px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; }
.cart .sent-msg { display: none; font: italic 400 15px/1.3 var(--serif); max-width: 230px; }
.cart.sent b, .cart.sent button { display: none; }
.cart.sent .sent-msg { display: block; padding-right: 8px; }
@media (max-width: 600px) { .concept-note { left: 10px; bottom: 10px; padding: 6px 9px; font-size: 9.5px; } .cart { bottom: 58px; right: 10px; } }
/* small screens: the menu toggle, the chef and the Order button share one header row */
@media (max-width: 1020px) { .top .in { grid-template-columns: auto 1fr auto; } }