/* =====================================================================
   Vitalia's Italian Restaurant — design system (premium)
   Light + waterfront, GREEN primary, brand RED pop. Fast + animated.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --green:#3C6A4B; --green-rgb:60,106,75; --green-dark:#2C5039; --green-light:#5A8468; --green-wash:#E7EEE8;
  --red:#E6272E; --red-rgb:230,39,46; --red-dark:#C41E24;
  --gold:#C6982F; --gold-rgb:198,152,47;
  --paper:#FBF9F5; --surface:#FFFFFF; --surface-2:#F3EEE4;
  --ink:#1C2420; --ink-rgb:28,36,32; --muted:#6B7772;
  --line:rgba(28,36,32,.12);
  --shadow:0 22px 60px -28px rgba(28,36,32,.42);
  --shadow-sm:0 8px 24px -14px rgba(28,36,32,.30);
  --wrap:1200px;
  --pad:clamp(1.15rem,4vw,2.4rem);
  --section:clamp(3.6rem,8vw,7.2rem);
  --radius:14px; --radius-lg:24px;
  --font-display:'Playfair Display',Georgia,serif;
  --font-body:'DM Sans',system-ui,sans-serif;
  --font-cond:'Barlow Condensed',sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;cursor:url('../assets/cursor-arrow.svg') 5 3,auto}
a,button,[role="button"],.btn,input[type="submit"],select,label{cursor:pointer}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.06;letter-spacing:-.015em}
h1{font-size:clamp(2.6rem,6.4vw,5rem)}
h2{font-size:clamp(2rem,4.6vw,3.2rem)}
h3{font-size:clamp(1.25rem,2.5vw,1.7rem)}
.lead{font-size:clamp(1.06rem,2vw,1.28rem);color:var(--muted);line-height:1.7}
.label{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.24em;font-size:.84rem;color:var(--green);display:inline-block;margin-bottom:1rem}
.eyebrow{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.28em;font-size:.74rem;color:var(--gold)}
.eyebrow.center-line{display:inline-flex;align-items:center;justify-content:center;gap:.9rem}
.eyebrow.center-line::before,.eyebrow.center-line::after{content:'';width:34px;height:1px;background:currentColor;opacity:.5}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
section{padding-block:var(--section)}
.section-alt{background:var(--surface-2)}
.section-flush-top{padding-top:0}
#reviews{padding-bottom:clamp(1.2rem,2.5vw,2.2rem)}
.section-green{background:var(--green);color:#fff}
.section-ink{background:var(--ink);color:#fff}
.section-green h1,.section-green h2,.section-green h3,.section-ink h1,.section-ink h2,.section-ink h3{color:#fff}
.center{text-align:center}
.narrow{max-width:720px;margin-inline:auto}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}
.stack{display:flex;flex-direction:column;gap:1rem}
.chip{display:inline-block;background:var(--green-wash);color:var(--green-dark);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:700;padding:.35rem .8rem;border-radius:999px}
.chip-red{background:rgba(var(--red-rgb),.10);color:var(--red-dark)}
.chip-gold{background:rgba(var(--gold-rgb),.16);color:#8a6a15}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-body);font-weight:500;font-size:.98rem;padding:.95rem 1.8rem;border-radius:999px;border:1.5px solid transparent;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .25s,color .25s;white-space:nowrap;overflow:hidden}
.btn>*{position:relative;z-index:1}
.btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.16);transform:translateX(-101%);transition:transform .5s var(--ease);z-index:0}
.btn:hover::after{transform:translateX(0)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 12px 28px -14px rgba(var(--green-rgb),.9)}
.btn-primary:hover{background:var(--green-dark);box-shadow:0 18px 36px -14px rgba(var(--green-rgb),.9)}
.btn-red{background:var(--red);color:#fff;box-shadow:0 12px 28px -14px rgba(var(--red-rgb),.8)}
.btn-red:hover{background:var(--red-dark)}
.btn-gold{background:var(--gold);color:#231a06}.btn-gold:hover{background:#a97f1f}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn-light{background:#fff;color:var(--green)}.btn-light:hover{background:var(--paper)}
.btn-lg{padding:1.1rem 2.2rem;font-size:1.05rem}
.btn-arrow span{transition:transform .3s var(--ease)}
.btn:hover .btn-arrow span,.btn .btn-arrow{display:inline-block}
.btn:hover .arr{transform:translateX(4px)}
.arr{display:inline-block;transition:transform .3s var(--ease)}

/* ---------- Rotating top banner ---------- */
.resv-wrap{position:relative;background:var(--green-dark);color:#fff;z-index:101}
.resv-bar{max-width:var(--wrap);margin:0 auto;min-height:44px;display:flex;align-items:center;justify-content:center;gap:.9rem;padding:.5rem 2.6rem;position:relative;font-size:.92rem}
.resv-msg{display:inline-flex;align-items:center;gap:.75rem;transition:opacity .4s var(--ease);flex-wrap:wrap;justify-content:center}
.resv-msg.fade{opacity:0}
.resv-msg a{background:#fff;color:var(--green-dark);font-weight:600;padding:.28rem 1rem;border-radius:999px;font-size:.84rem;transition:transform .2s}
.resv-msg a:hover{transform:translateY(-1px)}
.resv-msg.slide-red a{background:var(--red);color:#fff}
.resv-msg.slide-gold a{background:var(--gold);color:#231a06}
.resv-close{position:absolute;right:.7rem;top:50%;transform:translateY(-50%);background:none;border:none;color:rgba(255,255,255,.6);font-size:1.25rem;cursor:pointer;line-height:1;padding:.2rem}
.resv-close:hover{color:#fff}
.resv-bar[hidden]{display:none}
@media (max-width:600px){.resv-bar{font-size:.82rem}.resv-msg .sep{display:none}}

/* ---------- Nav ---------- */
nav.site-nav{position:sticky;top:0;z-index:100;background:var(--green);transition:background .3s,box-shadow .3s}
nav.site-nav.scrolled{box-shadow:0 8px 30px -16px rgba(0,0,0,.5)}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:.55rem var(--pad);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem}
.nav-logo{display:flex;align-items:center;will-change:transform;justify-self:start}
.nav-logo img{height:62px;width:auto;transition:filter .3s;transform:translateY(6px)}
.nav-links{display:flex;align-items:center;gap:2.3rem;list-style:none;justify-self:center}
/* the Voucher link only earns its place once there is real room for it —
   MacBook Air widths (1280/1440/1470) keep the original 5 links */
.nav-link-wide{display:none}
@media (min-width:1500px){.nav-link-wide{display:list-item}}
.nav-links a{font-size:.94rem;color:#fff;position:relative;padding-block:.4rem}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .3s var(--ease)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-actions{display:flex;align-items:center;gap:.5rem;justify-self:end}
.nav-pill{position:relative;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.82rem;padding:.6rem 1.1rem;border-radius:999px;color:#fff;border:1.5px solid rgba(255,255,255,.3);background:transparent;transition:transform .3s var(--ease),background .25s,border-color .25s,color .25s}
.nav-pill svg{width:17px;height:17px;flex-shrink:0}
.nav-pill:hover{transform:translateY(-2px)}
.nav-pill.red:hover{background:var(--red);border-color:var(--red);color:#fff}
.nav-pill.gold:hover{background:var(--gold);border-color:var(--gold);color:#231a06}
.btn .btn-ico{width:17px;height:17px;flex-shrink:0}
.nav-hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:.5rem;z-index:110}
.nav-hamburger span{width:26px;height:2px;background:#fff;border-radius:2px;transition:.35s var(--ease)}
body.menu-open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .nav-hamburger span:nth-child(2){opacity:0}
body.menu-open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1120px){.nav-links{gap:1.15rem}.nav-pill{padding:.55rem .85rem;font-size:.76rem}}
@media (max-width:1020px){.nav-links,.nav-actions .btn,.nav-pill{display:none}.nav-hamburger{display:flex}.nav-logo img{height:52px;transform:translateY(4px)}}

/* ---------- Mobile overlay (premium) ---------- */
/* overflow-x:hidden because the glow in ::before hangs 80px past the right edge,
   and a box that scrolls on one axis will scroll on the other: the open menu
   could be panned sideways. overscroll-behavior stops the scroll carrying on
   into the page underneath once the list reaches its end. */
.nav-overlay{position:fixed;inset:0;z-index:105;background:var(--green-dark);opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;display:flex;flex-direction:column;justify-content:center;padding:5rem var(--pad) 2rem;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y}
@media (max-height:720px){.nav-overlay{justify-content:flex-start}}
/* Anchored inside rather than hanging 80px past the edge: the same corner glow,
   but it no longer gives the overlay 80px of scrollable width to be dragged. */
.nav-overlay::before{content:'';position:absolute;right:0;bottom:0;width:320px;height:320px;background:radial-gradient(circle at 72% 72%,rgba(255,255,255,.075),transparent 68%);pointer-events:none}
/* The page behind is pinned rather than merely hidden: overflow:hidden alone
   lets iOS keep momentum scrolling underneath the overlay. JS remembers the
   scroll position and puts it back on close. */
body.menu-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
body.menu-open .nav-overlay{opacity:1;visibility:visible}
.overlay-close{position:fixed;top:1rem;right:1rem;z-index:106;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:.25s}
.overlay-close:hover{background:#fff;color:var(--green-dark);border-color:#fff;transform:rotate(90deg)}
.overlay-logo{height:46px;width:auto;align-self:flex-start;margin-bottom:1.6rem;opacity:.95}
.overlay-nav{display:flex;flex-direction:column;gap:0;border-top:1px solid rgba(255,255,255,.12)}
.overlay-nav a{font-family:var(--font-display);font-size:clamp(1.65rem,6.5vw,2.4rem);color:#fff;padding:.62rem 0;display:flex;align-items:baseline;gap:1rem;opacity:0;transform:translateX(-24px);transition:color .2s;border-bottom:1px solid rgba(255,255,255,.12)}
.overlay-nav a .num{font-family:var(--font-cond);font-size:.82rem;color:var(--gold);opacity:.8;width:1.6rem;letter-spacing:.05em}
.overlay-nav a::after{content:'\2192';margin-left:auto;color:var(--gold);opacity:0;transform:translateX(-10px);transition:opacity .25s,transform .25s}
.overlay-nav a:hover::after{opacity:1;transform:none}
body.menu-open .overlay-nav a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
body.menu-open .overlay-nav a:nth-child(1){transition-delay:.08s}
body.menu-open .overlay-nav a:nth-child(2){transition-delay:.13s}
body.menu-open .overlay-nav a:nth-child(3){transition-delay:.18s}
body.menu-open .overlay-nav a:nth-child(4){transition-delay:.23s}
body.menu-open .overlay-nav a:nth-child(5){transition-delay:.28s}
body.menu-open .overlay-nav a:nth-child(6){transition-delay:.33s}
body.menu-open .overlay-nav a:nth-child(7){transition-delay:.38s}
body.menu-open .overlay-nav a:nth-child(8){transition-delay:.43s}
.overlay-nav a:hover{color:var(--gold)}
.overlay-footer{margin-top:2.2rem;display:flex;flex-direction:column;gap:1.1rem;opacity:0;transition:opacity .5s .5s}
body.menu-open .overlay-footer{opacity:1}
.overlay-cta-row{display:flex;gap:.7rem;flex-wrap:wrap}
.overlay-phone{font-family:var(--font-display);font-size:1.5rem;color:#fff}
.overlay-social{display:flex;gap:1.4rem;flex-wrap:wrap}
.overlay-social a{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;color:rgba(255,255,255,.7)}
.overlay-social a:hover{color:#fff}

/* ---------- Hero (layered + Ken Burns) ---------- */
/* ---------- Home hero: a two-slide carousel ----------
   The whole slide moves, not just the picture: background, headline, buttons and
   badge travel together to the left, so it reads as turning a page rather than a
   photo swapping underneath fixed furniture. The content lags a little behind the
   track, which is what gives it depth. */
/* grid, not block: a block container turns the whitespace between the track and
   the controls into a line box, and the hero came out 32px taller than asked */
.hero{--hero-h:min(94vh,880px);--dwell:7s;position:relative;display:grid;min-height:var(--hero-h);overflow:hidden;background:#20261a}
/* min-width:0 or the track, being a grid item, refuses to shrink below the
   min-content width of two slides side by side: on a 390px phone every slide
   came out 445px wide and the logo sat off to the right. */
.hero-track{display:flex;min-width:0;min-height:var(--hero-h);transition:transform .95s cubic-bezier(.72,0,.24,1);will-change:transform}
.hero-slide{position:relative;flex:0 0 100%;width:100%;min-width:0;min-height:var(--hero-h);display:flex;align-items:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#20261a}
.hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s ease-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(10,13,11,.94) 0%,rgba(10,13,11,.78) 38%,rgba(10,13,11,.38) 68%,rgba(10,13,11,.14) 100%),linear-gradient(0deg,rgba(10,13,11,.65) 0%,transparent 45%)}
.hero-content{position:relative;z-index:2;max-width:660px;padding-block:clamp(2rem,6vw,4rem);color:#fff}
/* the parallax: an off-slide panel sits a touch to the right and dimmed, so while
   the track travels left the words appear to move slower than the picture */
.hero-slide .hero-content{opacity:0;transform:translateX(34px);transition:opacity .3s var(--ease),transform .95s cubic-bezier(.72,0,.24,1)}
.hero-slide.is-on .hero-content{opacity:1;transform:none;transition:opacity .55s var(--ease) .18s,transform .95s cubic-bezier(.72,0,.24,1)}
.hero-content .eyebrow{color:var(--gold);letter-spacing:.32em;display:inline-flex;align-items:center;gap:.7rem}
.hero-content .eyebrow::before{content:'';width:30px;height:2px;background:var(--gold)}
.hero h1{color:#fff;margin:1rem 0 1.1rem;font-weight:700;letter-spacing:-.02em;line-height:1.02;font-size:clamp(2.8rem,6.6vw,5.2rem);text-shadow:0 6px 40px rgba(0,0,0,.5)}
.hero h1 .accent{color:var(--gold);font-style:italic;font-weight:600}
.hero .lead{color:rgba(255,255,255,.94);max-width:540px;font-size:clamp(1.08rem,1.9vw,1.32rem);text-shadow:0 2px 24px rgba(0,0,0,.55)}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero-badges{display:flex;gap:.7rem;align-items:center;margin-top:2rem;flex-wrap:wrap}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:.45rem 1rem;font-size:.84rem;color:#fff}
.hero-badge svg{width:16px;height:16px;color:var(--gold)}

/* ---------- Slide 2: the mosaic ----------
   One image holding a grid of square photos, sliced back into tiles by CSS
   background-position so the whole wall is a single request. Tiles are square at
   any viewport and the grid simply uses as many rows as it needs, so nothing is
   ever letterboxed or stretched. Roughly one tile in three breathes; a wall where
   everything moves at once looks nervous rather than alive. */
.hero-mosaic{position:absolute;inset:0;z-index:0;background:#171c16;overflow:hidden}
/* Sized in px by JS to the owner's exact grid, centred, and cropped by the parent
   the way object-fit:cover crops a photograph. The whole wall drifts forward
   slowly, and individual tiles breathe inside it. */
.hero-mosaic-grid{position:absolute;left:50%;top:50%;display:grid;transform:translate(-50%,-50%);animation:mosaicDrift 38s ease-in-out infinite alternate;will-change:transform}
@keyframes mosaicDrift{from{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.07)}}
.hero-tile{position:relative;overflow:hidden}
.hero-tile i{position:absolute;inset:0;background-image:var(--m);background-size:var(--bs);background-position:var(--bp);background-repeat:no-repeat;transform:scale(1.02);will-change:transform}
.hero-tile.is-live i{animation:tileBreathe var(--d) ease-in-out infinite alternate;animation-delay:var(--t)}
@keyframes tileBreathe{from{transform:scale(1.02)}to{transform:scale(1.11)}}
/* A pool of shade under the wordmark. White type on fifty photographs needs it,
   and a flat scrim over the whole wall would kill the pictures. */
.hero-overlay-mosaic{background:linear-gradient(180deg,rgba(8,11,9,.38) 0%,rgba(8,11,9,.05) 26%,rgba(8,11,9,.07) 66%,rgba(8,11,9,.55) 100%)}
/* The shade under the wordmark travels with the wordmark. It used to be a second
   layer in the overlay above, which is a sibling of the content, so on the way
   out the logo faded and its shadow stayed put. */
.hero-content-mid::before{content:'';position:absolute;left:50%;top:48%;z-index:-1;pointer-events:none;
  width:160%;height:200%;transform:translate(-50%,-50%);
  background:radial-gradient(ellipse closest-side at 50% 50%,rgba(8,11,9,.5) 0%,rgba(8,11,9,.3) 46%,rgba(8,11,9,.07) 76%,rgba(8,11,9,0) 100%)}
.hero-content-mid{position:relative;max-width:min(760px,92vw);margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-wordmark{width:min(62vw,600px);height:auto;filter:drop-shadow(0 14px 38px rgba(0,0,0,.6)) drop-shadow(0 2px 7px rgba(0,0,0,.5));transition:filter .3s var(--ease)}
.hero-slide:not(.is-on) .hero-wordmark{filter:drop-shadow(0 0 0 rgba(0,0,0,0)) drop-shadow(0 0 0 rgba(0,0,0,0))}
.hero-mosaic-line{margin-top:1.5rem;max-width:36ch;color:#fff;font-size:clamp(1rem,1.7vw,1.22rem);line-height:1.6;text-shadow:0 1px 8px rgba(0,0,0,.85),0 1px 22px rgba(0,0,0,.6)}
/* align-items:center on the column shrank this row to its content, so the two
   flex:1 buttons split 259px instead of 359 and "Book a Table" lost its last
   letters on every iPhone. Stretch gives them the whole column back. */
.hero-slide-mosaic .hero-actions{align-self:stretch;justify-content:center;margin-top:1.9rem}
@media (max-width:560px){.hero-wordmark{width:70vw}.hero-mosaic-line{margin-top:1.1rem;font-size:.98rem}}

/* ---------- Slide controls ----------
   Two bars rather than dots: they say how many slides there are and how long this
   one has left, which stops the change feeling like it happened at random. */
.hero-nav{position:absolute;z-index:3;right:clamp(1rem,4vw,3rem);bottom:1.7rem;display:flex;gap:.45rem}
.hero-dot{width:44px;height:4px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.3);cursor:pointer;position:relative;overflow:hidden;transition:background .25s}
.hero-dot:hover{background:rgba(255,255,255,.5)}
.hero-dot:focus-visible{outline:2px solid #fff;outline-offset:4px}
.hero-dot span{position:absolute;inset:0 auto 0 0;width:0;background:#fff;border-radius:inherit}
.hero-dot.is-on span{animation:dotFill var(--dwell) linear forwards}
.hero.is-held .hero-dot.is-on span{animation-play-state:paused}
@keyframes dotFill{from{width:0}to{width:100%}}
@media (max-width:560px){.hero-nav{right:auto;left:50%;transform:translateX(-50%);bottom:4.4rem}.hero-dot{width:36px}}

.hero-mascotte{position:absolute;top:2rem;right:clamp(1rem,4vw,3rem);z-index:3;display:none;cursor:pointer;will-change:transform}
.hero-mascotte img{height:clamp(99px,11vw,143px);width:auto;display:block;filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));transition:transform .3s var(--ease)}
.hero-mascotte:hover img{transform:scale(1.06)}
@media (min-width:1000px){.hero-mascotte{display:block}}
@keyframes sway{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-2deg)}}
.scroll-cue{position:absolute;left:50%;bottom:1.3rem;transform:translateX(-50%);z-index:3;color:#fff;opacity:.8;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.2em;font-size:.64rem}
.scroll-cue svg{width:20px;height:20px;animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Nothing here is information, so with reduced motion it all simply stops. */
@media (prefers-reduced-motion:reduce){
  .hero-track{transition:none}
  .hero-bg img,.hero-tile.is-live i,.hero-mosaic-grid,.scroll-cue svg{animation:none}
  .hero-slide .hero-content{transition:none;opacity:1;transform:none}
  .hero-dot.is-on span{animation:none;width:100%}
}

/* ---------- Marquee strip ---------- */
.marquee{background:var(--ink);color:#fff;padding:.9rem 0;overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-flex;gap:2.5rem;animation:scrollx 28s linear infinite;will-change:transform}
.marquee-track span{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;font-size:1.05rem;color:rgba(255,255,255,.85);display:inline-flex;align-items:center;gap:2.5rem}
.marquee-track span::after{content:'✦';color:var(--gold)}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* ---------- Page header ---------- */
.page-head{background:var(--green);color:#fff;padding-block:clamp(3rem,7vw,5.2rem);text-align:center;position:relative;overflow:hidden}
.page-head h1{color:#fff;margin-bottom:.6rem}
.page-head p{color:rgba(255,255,255,.85);max-width:620px;margin-inline:auto}
.page-head .eyebrow{color:var(--gold)}

/* ---------- Grids / cards ---------- */
.grid{display:grid;gap:1.5rem}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.9rem;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card h3{margin-bottom:.5rem}
.card-icon{width:52px;height:52px;border-radius:14px;background:var(--green-wash);color:var(--green);display:grid;place-items:center;margin-bottom:1rem;font-size:1.5rem}
.card-icon svg{width:24px;height:24px}

/* ---------- Feature rows (Why Vitalia's redesign) ---------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.feature-row+.feature-row{margin-top:clamp(2.5rem,6vw,5rem)}
.feature-row .feature-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3}
.feature-row .feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.feature-row:hover .feature-media img{transform:scale(1.05)}
.feature-row.flip .feature-text{order:2}
.feature-num{font-family:var(--font-display);font-size:3rem;color:var(--green-wash);line-height:1;font-weight:700}
@media (max-width:820px){.feature-row{grid-template-columns:1fr}.feature-row.flip .feature-text{order:0}}

/* ---------- Split promo / crosspromo ---------- */
.crosspromo{background:var(--ink);color:#fff;border-radius:var(--radius-lg);padding:clamp(1.8rem,4vw,2.8rem);display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.crosspromo h3{color:#fff}.crosspromo p{color:rgba(255,255,255,.72);margin-top:.3rem}

/* ---------- Pizza truck feature block ---------- */
.truck-feature{position:relative;background:linear-gradient(135deg,var(--ink),#243024);color:#fff;border-radius:var(--radius-lg);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);padding:clamp(2rem,5vw,3.4rem);padding-bottom:clamp(2.6rem,5vw,3.6rem);display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.truck-feature:hover{transform:translateY(-3px);box-shadow:0 24px 44px -28px rgba(28,36,32,.75)}
.truck-feature::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(var(--red-rgb),.18),transparent 55%)}
.truck-feature>*{position:relative;z-index:1}
.truck-feature h2{color:#fff}
.truck-feature .truck-img a{display:block;cursor:pointer}
.truck-feature .truck-img img{filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));transition:transform .45s var(--ease),filter .45s var(--ease)}
.truck-feature:hover .truck-img img{transform:scale(1.05);filter:drop-shadow(0 26px 38px rgba(0,0,0,.5))}
.truck-feature .truck-img a:hover img{transform:scale(1.08)}
.truck-feature .event-img{border-radius:18px;overflow:hidden;box-shadow:0 20px 30px rgba(0,0,0,.4);aspect-ratio:4/3}
.truck-feature .event-img img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:760px){.truck-feature{grid-template-columns:1fr;text-align:center}.truck-feature .truck-img{max-width:280px;margin:1rem auto 0}.truck-feature .event-img{max-width:340px;margin:1rem auto 0}}

/* ---------- Musicanti band ---------- */
.musicanti-band{position:relative;background:#D6E2D9;overflow:hidden;padding-block:clamp(2.6rem,6vw,3.6rem)}
.musicanti-band .wrap{position:relative;min-height:clamp(230px,27vw,340px);display:flex;align-items:center;justify-content:center}
.musicanti-char{position:absolute;bottom:0;line-height:0;pointer-events:none;z-index:1}
.musicanti-char.left{left:clamp(-4px,4vw,64px)}
.musicanti-char.right{right:clamp(-4px,4vw,64px)}
.musicanti-char img{height:clamp(170px,23vw,320px);width:auto;display:block;animation:bob 4.4s ease-in-out infinite;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 88%);mask-image:linear-gradient(to bottom,#000 0%,#000 56%,transparent 88%)}
.musicanti-char.right img{animation-delay:.6s}
.musicanti-char .note{position:absolute;color:var(--gold);opacity:.85;font-size:1.5rem;animation:bob 3s ease-in-out infinite;z-index:1}
.musicanti-char.left .note.n1{top:-7%;left:10%;animation-delay:.1s}
.musicanti-char.left .note.n2{top:8%;left:28%;font-size:1.05rem;animation-delay:.9s}
.musicanti-char.right .note.n1{top:0%;right:8%;animation-delay:.3s}
.musicanti-char.right .note.n2{top:15%;right:26%;font-size:1.05rem;animation-delay:1.2s}
.musicanti-copy{position:relative;z-index:2;text-align:center;padding-inline:clamp(70px,16vw,190px)}
.musicanti-copy .label{display:block}
.musicanti-copy .musicanti-quote{color:var(--green-dark);margin:.3rem auto .2rem;font-size:clamp(1.5rem,3.4vw,2.1rem);white-space:nowrap}
.musicanti-copy .lead{font-size:clamp(.94rem,1.6vw,1.05rem);max-width:440px;margin-inline:auto}
@media (min-width:701px){
  .musicanti-char img{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 63%,transparent 93%);mask-image:linear-gradient(to bottom,#000 0%,#000 63%,transparent 93%)}
  .musicanti-char.left .note.n1{top:-3%}
}
@media (max-width:700px){
  .musicanti-band .wrap{flex-wrap:wrap;row-gap:.6rem;min-height:auto}
  .musicanti-copy{order:-1;flex-basis:100%;padding-inline:1rem}
  .musicanti-char.left,.musicanti-char.right{position:relative;left:auto;right:auto;bottom:auto}
  .musicanti-char.left{margin-right:-4px}
  .musicanti-char.right{margin-left:-4px}
}
@media (max-width:480px){.musicanti-char img{height:130px}.musicanti-copy{padding-inline:52px}.musicanti-char .note{font-size:1.1rem}.musicanti-char .note.n2{font-size:.85rem}.musicanti-copy .musicanti-quote{white-space:normal}}
@media (prefers-reduced-motion:reduce){.musicanti-char img,.musicanti-char .note{animation:none}}

/* ---------- Awards ---------- */
.awards{display:flex;align-items:center;justify-content:center;gap:clamp(1.2rem,4vw,2.6rem);flex-wrap:wrap}
.awards img{height:78px;width:auto;transition:transform .3s}
.awards img:hover{transform:translateY(-4px) scale(1.03)}
.awards-mini{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.awards-mini img{height:44px;width:auto;background:#fff;border-radius:8px;padding:4px}

/* ---------- Service chips ---------- */
.services{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.service-chip{display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.5rem 1.1rem;font-size:.92rem;font-weight:500}
.service-chip svg{width:17px;height:17px;color:var(--green)}

/* ---------- Reviews ---------- */
.rating-hero{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.rating-stars{color:var(--gold);font-size:1.8rem;letter-spacing:.15em}
.rating-count{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.4rem);line-height:1}
.review-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.7rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease)}
.review-card:hover{transform:translateY(-4px)}
.review-card .stars{color:var(--gold);letter-spacing:.1em;margin-bottom:.6rem}
.review-quote{font-family:var(--font-display);font-style:italic;font-size:1.08rem;line-height:1.5}
.review-author{margin-top:.9rem;font-size:.9rem;color:var(--muted);font-weight:500}

/* ---------- Native Google reviews ---------- */
.gstars{position:relative;display:inline-block;font-size:1.15rem;line-height:1;letter-spacing:2px;white-space:nowrap;color:#dcdcdc}
.gstars::before{content:"\2605\2605\2605\2605\2605"}
.gstars>span{position:absolute;left:0;top:0;overflow:hidden;color:var(--gold);white-space:nowrap}
.google-rating{display:inline-flex;align-items:center;gap:1.1rem;justify-content:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.7rem 1.4rem .7rem 1.1rem;box-shadow:var(--shadow-sm);margin:1.2rem auto 0}
.google-rating .g-logo{width:26px;height:26px;flex-shrink:0}
.gr-num{font-family:var(--font-display);font-size:1.7rem;font-weight:700;line-height:1;color:var(--ink)}
.gr-mid{text-align:left}
.gr-sub{font-size:.8rem;color:var(--muted);margin-top:.2rem}
.google-rating .btn{padding:.6rem 1.2rem;font-size:.86rem}
@media (max-width:600px){.google-rating{border-radius:22px;flex-direction:column;gap:.5rem;text-align:center;padding:1rem 1.4rem}.gr-mid{text-align:center}}

.reviews-carousel{display:flex;align-items:center;gap:.7rem;margin:2.2rem auto 0;max-width:1080px}
/* The track clips on both axes because it scrolls on x, so the cards need room
   inside it or their shadows get sliced off at the top and bottom. */
/* overflow-x:auto forces the browser to clip the Y axis too, so anything the cards
   throw outside this box gets sliced. The padding here is the breathing room and the
   hover shadow below is tuned to stay inside it (12px reach against 17.6px padding).
   No negative margin: the track is a flex child sitting between the two arrows, and
   pulling it sideways drags it over them. */
.reviews-track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:1.4rem 1.1rem 3.2rem;scroll-padding-inline:1.1rem;scrollbar-width:none}
.reviews-track::-webkit-scrollbar{display:none}
.rev-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.05rem 1.15rem;box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s var(--ease);flex:0 0 calc((100% - 2*1rem)/3);min-width:230px;scroll-snap-align:start}
/* --shadow reaches 32px sideways, wider than the padding at small widths, and the
   slice is ugliest exactly when the shadow is strongest. This one reaches 12px. */
.rev-card:hover{transform:translateY(-3px);box-shadow:0 16px 32px -20px rgba(28,36,32,.42)}
.rev-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.35rem}
.rev-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:.92rem;flex-shrink:0}
.rev-meta{flex:1;min-width:0}
.rev-name{font-weight:600;font-size:.88rem;line-height:1.15;display:flex;align-items:center;gap:.35rem}
.rev-name .g-logo{width:12px;height:12px;flex-shrink:0}
.rev-sub{font-size:.73rem;color:var(--muted);margin-top:.1rem}
.rev-stars{margin:.1rem 0 .4rem}
.rev-stars .gstars{font-size:.82rem}
.rev-body{color:var(--ink);font-size:.84rem;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.rev-arrow{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.rev-arrow svg{width:19px;height:19px}
.rev-arrow:hover{background:var(--green);border-color:var(--green);color:#fff;transform:scale(1.07)}
@media (max-width:900px){.rev-card{flex:0 0 calc((100% - 1rem)/2)}}
@media (max-width:600px){.rev-card{flex:0 0 88%;min-width:0}.reviews-carousel{gap:0}
  /* the arrows cost 84px of a 283px row and nobody taps them on a phone, they swipe */
  .rev-arrow{display:none}}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.8rem}
.gallery-grid a{aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--surface-2);position:relative}
.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gallery-grid a:hover img{transform:scale(1.08)}

/* ---------- Menus: inline flippable viewer ---------- */
.menu-langs{display:inline-flex;gap:.3rem;background:var(--surface-2);border-radius:999px;padding:.3rem;margin:0 auto 1.2rem;transition:opacity .25s}
.menu-langs.single{opacity:.35;pointer-events:none}
.menu-lang{border:none;background:transparent;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:.86rem;padding:.45rem 1.1rem;border-radius:999px;cursor:pointer;color:var(--ink);transition:all .2s}
.menu-lang.active{background:var(--green);color:#fff}
.menu-coming{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;height:min(50vh,420px);text-align:center;color:var(--muted);padding:2rem}
.menu-coming .chip{margin-top:.4rem}
.menu-tabs{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.6rem}
.menu-tab{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.95rem;padding:.6rem 1.2rem;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;transition:all .25s;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.menu-tab .lang{font-family:var(--font-body);font-weight:400;font-size:.82rem;color:var(--muted);text-transform:none;letter-spacing:0}
.menu-tab:hover{border-color:var(--green)}
.menu-tab.active{background:var(--green);color:#fff;border-color:var(--green)}
.menu-tab.active .lang{color:rgba(255,255,255,.8)}
.menu-viewer{background:var(--surface-2);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden}
.menu-viewer-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;background:var(--surface);border-bottom:1px solid var(--line);flex-wrap:wrap}
.menu-viewer-head h3{font-size:1.2rem}
.menu-viewer-actions{display:flex;gap:.5rem}
.menu-frame{width:100%;height:min(78vh,820px);border:0;background:var(--surface-2);display:block}
.menu-note{text-align:center;color:var(--muted);font-size:.9rem;margin-top:1rem;max-width:68ch;margin-inline:auto}

/* ---------- Founder tribute ---------- */
.tribute-hero{background:linear-gradient(180deg,var(--green-dark),var(--green));color:#fff;text-align:center;padding-block:clamp(3.5rem,8vw,6rem);position:relative;overflow:hidden}
.tribute-portrait{height:230px;width:auto;margin:0 auto 1.2rem;display:block;filter:drop-shadow(0 14px 22px rgba(0,0,0,.28))}
.tribute-quote{position:relative;display:inline-block;font-family:var(--font-display);font-style:italic;font-weight:600;font-size:clamp(1.6rem,3.4vw,2.4rem);color:#fff;margin:1.3rem auto;line-height:1.3;padding:0 1.6rem}
.tribute-quote::before,.tribute-quote::after{font-family:var(--font-display);font-style:normal;color:var(--gold);font-size:1.3em;line-height:0;position:relative;top:.28em;opacity:.9}
.tribute-quote::before{content:'\201C';margin-right:.06em}
.tribute-quote::after{content:'\201D';margin-left:.06em}
.embed-frame{width:100%;height:min(70vh,760px);border:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background:var(--surface-2)}

/* ---------- Forms ---------- */
.form-field{margin-bottom:1.2rem}
.form-field label{display:block;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-size:.85rem;margin-bottom:.45rem;font-weight:700}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:.9rem 1rem;border:1.5px solid var(--line);border-radius:10px;font-family:var(--font-body);font-size:1rem;background:var(--surface);color:var(--ink);transition:border-color .2s,box-shadow .2s}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.12)}
.form-field textarea{min-height:130px;resize:vertical}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow-sm)}

/* ---------- Footer ---------- */
footer.site-footer{background:var(--green-dark);color:rgba(255,255,255,.78);padding-block:clamp(3rem,6vw,4.2rem) 1.5rem;position:relative;overflow:hidden}
.footer-cta{background:var(--red);color:#fff;text-align:center;padding:clamp(2rem,5vw,3rem) var(--pad)}
.footer-cta h2{color:#fff}
.footer-cta .footer-phone{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.4rem);color:#fff;display:inline-block;margin-top:.4rem}
.footer-top{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
.footer-logo{height:56px;width:auto;margin-bottom:1.1rem}
.footer-tagline{font-size:.92rem;line-height:1.6;max-width:34ch}
.footer-col-title{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.16em;font-size:.8rem;color:var(--gold);margin-bottom:1rem}
.footer-list{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-list a,.footer-list li{font-size:.92rem;color:rgba(255,255,255,.72);transition:color .2s}
.footer-list a:hover{color:#fff;text-shadow:0 0 12px rgba(255,255,255,.25)}
.footer-bigphone{font-family:var(--font-display);font-size:1.6rem;color:#fff;display:inline-block;margin:.2rem 0 .3rem}
.footer-hours{list-style:none;display:flex;flex-direction:column;gap:.3rem;font-size:.9rem}
.footer-hours span{color:rgba(255,255,255,.55)}
.footer-bottom{max-width:var(--wrap);margin:2.5rem auto 0;padding:1.5rem var(--pad) 0;border-top:1px solid rgba(255,255,255,.14);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.55)}
.footer-bottom a{color:rgba(255,255,255,.55)}.footer-bottom a:hover{color:#fff}
@media (max-width:820px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr}}

/* ---------- Floating book button ---------- */
.fab-book{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;opacity:0;visibility:hidden;display:inline-flex;align-items:center;gap:.5rem;background:var(--green);color:#fff;font-weight:600;font-size:.95rem;padding:.85rem 1.3rem;border-radius:999px;box-shadow:0 14px 34px -12px rgba(28,36,32,.6);transition:transform .3s var(--ease),background .2s}
.fab-book.is-on{opacity:1;visibility:visible}
.fab-book:hover{transform:translateY(-3px) scale(1.03);background:var(--green-dark)}
.fab-book svg{width:18px;height:18px}
@media (min-width:961px){.fab-book{right:1.6rem;bottom:1.6rem}}
/* at 320 the full-size pill covered more than half the width of a review card */
@media (max-width:430px){.fab-book{font-size:.85rem;padding:.7rem 1rem;gap:.4rem}.fab-book svg{width:16px;height:16px}}

/* ---------- Mini pizza-truck drive-by (right -> left, faces left) ----------
   Layers: .mini-truck = route across screen (x + gentle road hills y, varied speed)
           .truck-ride = cartoon suspension bounce + micro tilt
           .truck-wind = speed lines trailing behind (truck's rear = right side)
   Hover: everything pauses, truck scales up. ---------- */
.mini-truck{position:fixed;left:0;bottom:12px;z-index:95;transform:translate(115vw,0);will-change:transform;pointer-events:none;opacity:0;transition:opacity .5s}
.mini-truck a.truck-ride{pointer-events:auto;display:block;position:relative;cursor:pointer;transform-origin:50% 100%}
.mini-truck img{height:96px;width:auto;display:block;filter:drop-shadow(0 12px 14px rgba(0,0,0,.30));transition:transform .3s var(--ease)}
.mini-truck:hover img{transform:scale(1.09)}
.mini-truck:hover .truck-wind{opacity:.14}
.mini-truck .truck-bubble{position:absolute;top:-16px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;padding:.3rem .7rem;border-radius:8px;white-space:nowrap;box-shadow:var(--shadow-sm)}
.mini-truck .truck-bubble::after{content:'';position:absolute;left:50%;margin-left:-5px;bottom:-5px;border:5px solid transparent;border-top-color:var(--red);border-bottom:0}
/* wind: sinuous grey streamlines that flow along their own curves behind the truck */
.truck-wind{position:absolute;top:12%;left:95%;width:152px;height:86%;overflow:visible;transition:opacity .35s}
.truck-wind .wl{fill:none;stroke-linecap:round;animation:windflow 1.1s linear infinite}
.truck-wind .wl:nth-child(1){stroke:rgba(44,52,47,.5);stroke-width:2.6;stroke-dasharray:34 100;animation-duration:1.05s;animation-delay:0s}
.truck-wind .wl:nth-child(2){stroke:rgba(44,52,47,.4);stroke-width:3;stroke-dasharray:42 100;animation-duration:1.3s;animation-delay:.18s}
.truck-wind .wl:nth-child(3){stroke:rgba(44,52,47,.34);stroke-width:2.3;stroke-dasharray:30 100;animation-duration:.92s;animation-delay:.42s}
.truck-wind .wl:nth-child(4){stroke:rgba(66,96,78,.3);stroke-width:2.1;stroke-dasharray:28 100;animation-duration:1.18s;animation-delay:.6s}
@keyframes windflow{0%{stroke-dashoffset:100;opacity:0}14%{opacity:1}82%{opacity:.7}100%{stroke-dashoffset:-42;opacity:0}}
/* light dust kicked up behind the wheels */
.truck-dust{position:absolute;bottom:4px;left:22%;width:104px;height:32px;pointer-events:none;transition:opacity .3s}
.truck-dust i{position:absolute;bottom:0;border-radius:50%;background:radial-gradient(circle,rgba(104,94,76,1),rgba(104,94,76,0) 72%);width:4.5px;height:4.5px}
/* front + mid wheel puffs */
.truck-dust i:nth-child(1){left:6px;animation:dustpuff 1s linear infinite;animation-delay:0s}
.truck-dust i:nth-child(2){left:16px;animation:dustpuff 1.05s linear infinite;animation-delay:.26s}
.truck-dust i:nth-child(3){left:26px;width:3.5px;height:3.5px;animation:dustpuff .95s linear infinite;animation-delay:.52s}
.truck-dust i:nth-child(4){left:20px;width:3.5px;height:3.5px;animation:dustpuff 1.1s linear infinite;animation-delay:.78s}
/* rear wheel: higher-kicking grains */
.truck-dust i:nth-child(5){left:52px;animation:dusthigh 1.1s linear infinite;animation-delay:0s}
.truck-dust i:nth-child(6){left:60px;width:3.5px;height:3.5px;animation:dusthigh 1.2s linear infinite;animation-delay:.38s}
.truck-dust i:nth-child(7){left:56px;width:3px;height:3px;animation:dusthigh 1s linear infinite;animation-delay:.72s}
.truck-dust i:nth-child(8){left:64px;width:3px;height:3px;animation:dusthigh 1.25s linear infinite;animation-delay:.95s}
/* trailing grains drifting behind */
.truck-dust i:nth-child(9){left:44px;width:4px;height:4px;animation:dusttrail 1.5s linear infinite;animation-delay:.15s}
.truck-dust i:nth-child(10){left:38px;width:3px;height:3px;animation:dusttrail 1.4s linear infinite;animation-delay:.6s}
.truck-dust i:nth-child(11){left:50px;width:3.5px;height:3.5px;animation:dusttrail 1.65s linear infinite;animation-delay:1s}
@keyframes dustpuff{0%{transform:translate(0,0) scale(.4);opacity:0}16%{opacity:1}100%{transform:translate(9px,-12px) scale(1.25);opacity:0}}
@keyframes dusthigh{0%{transform:translate(0,0) scale(.4);opacity:0}16%{opacity:1}100%{transform:translate(7px,-18px) scale(1.2);opacity:0}}
@keyframes dusttrail{0%{transform:translate(0,0) scale(.5);opacity:0}16%{opacity:.9}100%{transform:translate(33px,-4px) scale(1.5);opacity:0}}
.mini-truck:hover .truck-dust{opacity:.22}
@media (max-width:600px){.mini-truck img{height:66px}.truck-wind{width:96px}.truck-dust{width:78px}.truck-dust i:nth-child(n+9){display:none}}
@media (prefers-reduced-motion:reduce){.mini-truck{display:none}.hero-bg img{animation:none}}

/* ---------- Policy ---------- */
.policy-body{max-width:760px;margin-inline:auto}
.policy-body h2{margin:2rem 0 .6rem}.policy-body p{margin-bottom:1rem;color:var(--muted)}

/* ---------- Mascotte watermark ---------- */
.mascotte-bg{position:absolute;pointer-events:none;opacity:.07;z-index:0;filter:grayscale(1)}
.section-green .mascotte-bg,.page-head .mascotte-bg{opacity:.12}

/* ---------- Map illustration ---------- */
.map-illustration{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line)}

/* ---------- Menu group titles ---------- */
.menu-group{margin-bottom:2.5rem}
.menu-group-title{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.menu-group-title h3{white-space:nowrap}
.menu-group-title .lang{font-family:var(--font-body);font-size:.9rem;color:var(--muted);white-space:nowrap}
.menu-group-title::after{content:'';flex:1;height:1px;background:var(--line)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.1s}
.reveal[data-delay="2"]{transition-delay:.2s}
.reveal[data-delay="3"]{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.marquee-track{animation:none}}

/* ---------- Pizza hero (the must) ---------- */
.pizza-band{background:#23402E;color:#fff;position:relative;overflow:hidden}
.pizza-band .mascotte-bg{opacity:.06}

/* ---------- Food showcase (transparent PNG hero shots) ---------- */
.food-showcase{position:relative;border-radius:var(--radius-lg);overflow:hidden;padding:clamp(1.6rem,4vw,2.6rem);display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}
.food-showcase.foc{background:linear-gradient(135deg,#f6efe0,#efe4cf)}
.food-showcase.mar{background:linear-gradient(135deg,#efe2d6,#e7d3c4)}
.food-showcase .fs-text .logo-scritta{height:56px;width:auto;margin-bottom:.6rem}
.food-showcase .fs-img img{width:100%;height:auto;filter:drop-shadow(0 24px 30px rgba(0,0,0,.28))}
.food-showcase.foc .fs-img img{transform:scale(1.16);transform-origin:center}
.food-showcase.mar .fs-text{order:2}
@media (max-width:720px){.food-showcase{grid-template-columns:1fr;text-align:center}.food-showcase.mar .fs-text{order:0}.food-showcase .fs-text .logo-scritta{margin-inline:auto}}

/* ---------- Vitalia, the founder ----------
   The first attempt framed her: cream mount, gold rule, a nameplate with her
   role. Read straight away as a memorial card, which is exactly the wrong
   note - this page is meant to be warm about her, not mournful. No frame, no
   plate, no symmetry. An arch instead, the shape of a doorway rather than a
   headstone, and a warm bloom behind so a cold black-and-white photograph
   sits properly on a cream page. */
.founder-row{display:grid;grid-template-columns:clamp(220px,28vw,320px) 1fr;
  gap:clamp(1.8rem,5vw,4rem);align-items:center}
.founder-portrait{margin:0;position:relative;isolation:isolate}
.founder-portrait img{display:block;width:100%;height:auto;
  /* the photo is cold grey against a warm palette; a touch of sepia marries
     the two without turning it into a filter effect */
  filter:sepia(.22) saturate(1.05) contrast(1.03) brightness(1.04)}

/* Editorial: soft corners, a brand-green block offset behind. The asymmetry
   is the whole point - anything centred and arched reads as devotional no
   matter how the frame is styled, which is what sank the first two attempts. */
.founder-portrait.v-a img{border-radius:20px;box-shadow:0 26px 50px -28px rgba(28,36,32,.6)}
.founder-portrait.v-a::before{content:'';position:absolute;z-index:-1;left:-22px;bottom:-22px;
  width:74%;height:74%;border-radius:20px;background:var(--green-wash)}
@media (max-width:760px){
  .founder-row{grid-template-columns:1fr;gap:1.8rem;justify-items:center;text-align:center}
  .founder-portrait{max-width:260px}
  .founder-row .label{display:inline-block}
}

/* ---------- the turn from her story to the restaurant's ----------
   A hairline and a small italic line was not enough - it read as decoration
   and the two halves of the page still ran together. This is a band: its own
   warm ground, its own vertical space, an ornament with real weight. You
   cannot scroll past it without registering that the subject changed. */
.story-turn{position:relative;padding:clamp(3rem,7vw,4.6rem) var(--pad);text-align:center;
  background:linear-gradient(180deg,var(--paper,#FBF9F5),#F6F1E6 45%,var(--paper,#FBF9F5));
  border-block:1px solid rgba(var(--gold-rgb),.22)}
/* the section above already ends on up to 115px of padding; with the band's own
   padding on top of it the pause read as a hole rather than a beat */
section:has(+ .story-turn){padding-bottom:clamp(1.5rem,4vw,3rem)}
.story-turn-orn{display:flex;align-items:center;justify-content:center;gap:.9rem;
  color:var(--gold);font-size:1.05rem;line-height:1}
.story-turn-orn i{display:block;width:clamp(44px,12vw,110px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.75))}
.story-turn-orn i:last-child{background:linear-gradient(90deg,rgba(var(--gold-rgb),.75),transparent)}
.story-turn p{max-width:24ch;margin:.9rem auto 0;
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.25rem,3.2vw,1.85rem);
  line-height:1.35;color:var(--green-dark)}

/* ---------- Book (The Cure is Me) ----------
   The cover was a flat thumbnail sitting on a white card. It is a physical
   object, so it is staged like one: its own warm ground, standing slightly
   turned with a spine edge and a shadow it actually casts. */
.book-row{display:grid;grid-template-columns:clamp(200px,26vw,290px) 1fr;gap:clamp(1.8rem,5vw,3.4rem);
  align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,3rem);box-shadow:var(--shadow-sm)}
/* The cover used to be a flat image on a cream panel. It is a book, so it is
   built as one: a cover, a spine turned away from you and a block of pages
   with real depth, floating and catching the light. Same pointer-tilt
   mechanism as the gift card - JS only ever writes --rx / --ry, never
   layout. */
.book-stage{display:grid;place-items:center;padding:clamp(1.4rem,4vw,2.4rem);
  perspective:1100px}
.book3d{--rx:0deg;--ry:-22deg;position:relative;width:100%;max-width:230px;aspect-ratio:.66;
  transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .6s var(--ease);animation:bookFloat 7s ease-in-out infinite}
.book3d.is-tilting{transition:transform .12s linear;animation:none}
@keyframes bookFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}

/* Every face is placed about its own centre, which is the one formulation of
   this that stays easy to reason about: front and back sit half the depth
   forward and back, the two side faces are as wide as the depth and pivot on
   their own centre so they land exactly on the book's edges.

   The first attempt hinged the spine on its left edge and rotated it the
   wrong way, so it swung towards the viewer instead of away - which is why it
   drew larger than the cover and read as a loose slab. There was no back
   cover either, so the book had nothing behind it and looked burst open. */
/* A paperback is square along the bound edge and rounded on the other three,
   so the radius is asymmetric and the back matches the front - both have the
   spine on their left. Keeping it small also keeps the corners tight: a big
   radius on a face whose neighbours are flat leaves you looking through the
   corner of the book. */
.book3d-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:1px 6px 6px 1px;transform:translateZ(11px);
  box-shadow:0 30px 46px -26px rgba(28,36,32,.75)}
.book3d-back{position:absolute;inset:0;border-radius:1px 6px 6px 1px;transform:translateZ(-11px);
  background:linear-gradient(180deg,#241d1a,#141110)}
/* the spine's own gradient runs front-to-back once the face is rotated, so a
   light band off centre between two dark edges reads as a round spine rather
   than a flat strip */
.book3d-spine{position:absolute;left:0;top:0;height:100%;width:22px;margin-left:-11px;
  transform:rotateY(-90deg);
  background:linear-gradient(90deg,#0d0a09,#2f2723 18%,#463a32 46%,#291f1c 76%,#0d0a09)}
/* The fore edge is the stack of sheets seen side on, so the lines are the
   page edges and they run top to bottom - vertical. This was 180deg, which
   banded it horizontally and made the block look like corrugated card. The
   cover overhangs the paper slightly, hence the 2px inset. */
.book3d-edge{position:absolute;right:0;top:2px;bottom:2px;width:22px;margin-right:-11px;
  transform:rotateY(90deg);
  background:linear-gradient(90deg,rgba(0,0,0,.2),transparent 20%,transparent 80%,rgba(0,0,0,.16)),
    repeating-linear-gradient(90deg,#fdfaf2 0 1px,#e7e0d0 1px 2px)}
.book3d-shine{position:absolute;inset:0;border-radius:1px 6px 6px 1px;pointer-events:none;
  transform:translateZ(12px);
  /* The hinge. A cover does not stop dead at the spine, it rolls into it: a
     dark groove, then the crown of that roll catching the light, then flat
     board. Without this the left edge was a cut line and the whole thing
     looked like a photograph standing on end rather than a book. */
  background:linear-gradient(90deg,
      rgba(0,0,0,.62) 0,
      rgba(0,0,0,.34) 1.1%,
      rgba(0,0,0,.06) 2.4%,
      rgba(255,255,255,.17) 3.6%,
      rgba(255,255,255,.06) 5.4%,
      transparent 9%),
    linear-gradient(105deg,transparent 34%,rgba(255,255,255,.26) 47%,transparent 60%)}
@media (prefers-reduced-motion:reduce){.book3d{animation:none}}
.book-body{min-width:0}
.book-row h3{font-size:clamp(1.5rem,3.4vw,2.1rem);margin-bottom:0}
.book-orig{margin:.15rem 0 0;font-family:var(--font-display);font-style:italic;
  font-size:1.02rem;color:var(--muted)}
.book-quote{margin:1.2rem 0 0;padding:.2rem 0 .2rem 1.1rem;border-left:2px solid rgba(var(--gold-rgb),.55);
  font-family:var(--font-display);font-style:italic;font-size:1.04rem;line-height:1.55;color:#5d6a63}
.book-quote cite{display:block;margin-top:.45rem;font-family:var(--font-cond);font-style:normal;
  text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;font-weight:700;color:#8a7433}
.book-buys{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.4rem}
.book-note{display:block;margin-top:.6rem;font-size:.78rem;color:var(--muted)}
@media (max-width:700px){
  .book-row{grid-template-columns:1fr;text-align:center;justify-items:center}
  .book-stage{max-width:240px}
  .book-quote{border-left:0;border-top:2px solid rgba(var(--gold-rgb),.55);padding:.85rem 0 0;margin-top:1.1rem}
  .book-buys{justify-content:center}
}

/* ---------- Vitalia teaser (home) ---------- */
.vitalia-teaser{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;justify-content:center}
.vitalia-teaser img{height:200px;width:auto;filter:drop-shadow(0 14px 22px rgba(0,0,0,.3))}
@media (max-width:600px){.vitalia-teaser{flex-direction:column;text-align:center}.vitalia-teaser img{height:160px}.vitalia-teaser>div{text-align:center!important}}

/* ---------- Bento (Why Vitalia's) ---------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,auto);gap:1.1rem}
.bento-cell{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-2);display:flex;flex-direction:column;justify-content:flex-end;padding:1.6rem;color:#fff;isolation:isolate;min-height:210px}
.bento-cell img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s var(--ease)}
.bento-cell::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(10,14,11,.9) 0%,rgba(10,14,11,.45) 46%,rgba(10,14,11,.05) 75%)}
.bento-cell:hover img{transform:scale(1.05)}
.bento-cell h3{color:#fff;margin-bottom:.25rem;font-size:clamp(1.15rem,1.8vw,1.45rem);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.bento-cell p{color:rgba(255,255,255,.9);font-size:.9rem;line-height:1.5;max-width:34ch;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.bento-cell .chip{align-self:flex-start;margin-bottom:.6rem}
.bento-wide{grid-column:span 2}
.bento-tall{grid-row:span 2}
.bento-tall h3{font-size:clamp(1.4rem,2.2vw,1.9rem)}
/* --- Pizza by the Metre: photo fills the whole card; card stretches on hover --- */
.bento-metre{overflow:visible;background:transparent;padding:0;z-index:1;min-height:210px}
.bento-metre::after{display:none}
.bento-metre:hover,.bento-metre.open{z-index:30}
.metre-inner{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden;background:#1d3626;box-shadow:0 20px 44px -22px rgba(0,0,0,.5);transition:height .75s cubic-bezier(.2,.85,.2,1),box-shadow .4s}
.bento-metre:hover .metre-inner,.bento-metre.open .metre-inner{height:calc(100% + 285px);box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
/* photo: always fills the frame (cover, no empty margins), gentle zoom-in on hover */
.metre-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
/* fixed-scale image (width:100%, natural height) — the wrapper's overflow:hidden
   reveals more or less of it as the card grows, so it only ever CLIPS, never zooms */
.bento-metre .metre-photo img{position:absolute;left:0;top:0;z-index:0;display:block;width:100%;height:auto;min-height:100%;object-fit:cover;object-position:center top;transform:none}
.metre-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(6,10,7,.92) 0%,rgba(6,10,7,.7) 30%,rgba(6,10,7,.12) 52%,rgba(6,10,7,0) 68%)}
.metre-content{position:relative;z-index:3;padding:1.6rem;display:flex;flex-direction:column;align-items:flex-start}
.metre-day{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.7);margin-bottom:.5rem}
.metre-title{display:flex;align-items:center;gap:.55rem;color:#FF6F61!important;font-size:clamp(1.15rem,1.9vw,1.45rem);margin-bottom:.3rem;text-shadow:0 2px 12px rgba(0,0,0,.65)}
.metre-title svg{width:22px;height:22px;flex-shrink:0;opacity:.95}
.metre-content p{color:rgba(255,255,255,.95);font-size:.9rem;line-height:1.5;max-width:34ch;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.metre-hint{position:absolute;left:1.6rem;bottom:1rem;z-index:3;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:rgba(255,255,255,.85);text-shadow:0 1px 8px rgba(0,0,0,.6);transition:opacity .25s}
.metre-hint svg{width:13px;height:13px;animation:bob 2s ease-in-out infinite}
.bento-metre:hover .metre-hint,.bento-metre.open .metre-hint{opacity:0}
/* ruler + caption anchored to the newly-revealed bottom strip only, never overlapping the title */
.metre-ruler{position:absolute;left:16px;bottom:14px;width:46px;height:270px;z-index:4;opacity:0;transition:opacity .3s .2s}
.bento-metre:hover .metre-ruler,.bento-metre.open .metre-ruler{opacity:1}
.metre-ruler::before{content:'';position:absolute;left:0;top:0;height:100%;width:2px;background:rgba(255,255,255,.7);transform-origin:top;transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.85,.2,1) .18s}
.bento-metre:hover .metre-ruler::before,.bento-metre.open .metre-ruler::before{transform:scaleY(1)}
.metre-ruler i{position:absolute;left:0;height:2px;background:rgba(255,255,255,.65);width:9px;opacity:0;transition:opacity .3s}
.metre-ruler i.major{width:16px;background:#fff}
.metre-ruler i b{position:absolute;left:20px;top:-8px;font-family:var(--font-cond);font-weight:700;font-size:.7rem;letter-spacing:.08em;color:#fff;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.6)}
.bento-metre:hover .metre-ruler i,.bento-metre.open .metre-ruler i{opacity:1}
.metre-caption{position:absolute;right:16px;left:16px;bottom:16px;z-index:4;text-align:right;opacity:0;transform:translateY(8px);transition:opacity .4s .45s,transform .4s .45s}
.bento-metre:hover .metre-caption,.bento-metre.open .metre-caption{opacity:1;transform:none}
.metre-caption strong{display:block;font-family:var(--font-display);font-size:clamp(1.3rem,2.6vw,1.6rem);color:#fff;line-height:1.12;text-shadow:0 2px 6px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.6)}
.metre-caption span{display:block;margin-top:.3rem;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.13em;font-size:.8rem;color:#fff;text-shadow:0 1px 5px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.6)}
@media (hover:none){.bento-metre:hover .metre-inner{height:100%}.bento-metre.open .metre-inner{height:calc(100% + 300px)}}

/* --- Caffè, Dolci & Cocktails: same idea, sideways — the card widens LEFT on hover --- */
.bento-drinks{overflow:visible;background:transparent;padding:0;z-index:1;min-height:210px;cursor:pointer}
.bento-drinks::after{display:none}
.bento-drinks:hover,.bento-drinks.open{z-index:30}
.drinks-inner{position:absolute;right:0;top:0;width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden;background:#20241d;box-shadow:0 20px 44px -22px rgba(0,0,0,.5);transition:width .75s cubic-bezier(.2,.85,.2,1),box-shadow .4s}
.bento-drinks:hover .drinks-inner,.bento-drinks.open .drinks-inner{width:calc(100% + 121px);box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.drinks-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
/* fixed-scale image (height:100%, natural width) anchored to the right — widening the
   card only clips more of it into view on the left, it never scales/zooms */
.bento-drinks .drinks-photo img{position:absolute;right:0;top:0;z-index:0;display:block;height:100%;width:auto;transform:none}
.drinks-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(6,10,7,.82) 0%,rgba(6,10,7,.35) 42%,rgba(6,10,7,0) 62%)}
.drinks-content{position:relative;z-index:3;height:100%;padding:1.6rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.drinks-content h3{color:#fff;font-size:clamp(1.1rem,1.8vw,1.32rem);line-height:1.15;text-shadow:0 2px 12px rgba(0,0,0,.6);margin-bottom:.3rem}
.drinks-content p{color:rgba(255,255,255,.92);font-size:.87rem;line-height:1.4;max-width:24ch;text-shadow:0 1px 8px rgba(0,0,0,.55)}
@media (hover:none){.bento-drinks:hover .drinks-inner{width:100%}.bento-drinks.open .drinks-inner{width:calc(100% + 121px)}}

/* --- Pizza slideshow ("The must") — clean crossfade, image + copy rotate together --- */
.pizza-slideshow{position:relative;aspect-ratio:3/4;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:#14100c}
.pizza-slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.035);transition:opacity 1.3s ease,transform 4.6s ease;z-index:0}
.pizza-slideshow img.active{opacity:1;transform:scale(1);z-index:1}
.pizza-dots{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);display:flex;gap:.4rem;z-index:2}
.pizza-dots span{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.42);transition:background .35s,transform .35s}
.pizza-dots span.active{background:#fff;transform:scale(1.4)}
#pizzaCopy{transition:opacity .4s ease}
#pizzaCopy.fading{opacity:0}
@media (prefers-reduced-motion:reduce){.pizza-slideshow img{transition:opacity .3s ease;transform:none!important}}

/* --- Dishes showcase, merged inside the "Real Italian Kitchen" bento cell:
   idle crossfade by default; on desktop hover it splits into a vertical
   film-strip accordion, each column widening under the cursor --- */
.bento-dishes .dishes-strips{position:absolute;inset:0;display:flex;z-index:0}
.bento-dishes .dishes-strips .strip{flex:1 1 0;min-width:0;position:relative;overflow:hidden;transition:flex-grow .6s cubic-bezier(.2,.85,.2,1)}
.bento-dishes .dishes-strips .strip+.strip{box-shadow:-1px 0 0 rgba(251,249,245,.14)}
.bento-dishes .dishes-strips .strip img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:filter .5s;transform:none}
.bento-dishes .dishes-strips .strip:hover{flex-grow:6}
.bento-dishes .dishes-strips:has(.strip:hover) .strip:not(:hover) img{filter:brightness(.62) saturate(.85)}
.bento-dishes .dishes-idle{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .5s}
.bento-dishes .dishes-idle img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;transform:none}
.bento-dishes .dishes-idle img.active{opacity:1}
@media (hover:hover) and (min-width:821px){.bento-dishes:hover .dishes-idle{opacity:0}}
.bento-dishes::after{z-index:2;pointer-events:none}
.bento-dishes-content{position:relative;z-index:3}
.bento-dishes .dishes-hint{position:absolute;top:1.5rem;right:1.5rem;z-index:4;display:none;align-items:center;gap:.4rem;background:rgba(20,16,12,.55);backdrop-filter:blur(3px);color:#fff;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;padding:.5rem 1rem;border-radius:999px;transition:opacity .3s;pointer-events:none}
.bento-dishes .dishes-hint svg{width:13px;height:13px;animation:hintslide 1.6s ease-in-out infinite}
@keyframes hintslide{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (hover:hover){.bento-dishes .dishes-hint{display:inline-flex}}
.bento-dishes:hover .dishes-hint{opacity:0}
@media (max-width:820px){.bento-dishes .dishes-strips{display:none}}
@media (prefers-reduced-motion:reduce){.bento-dishes .dishes-idle img{transition:opacity .3s}}

/* --- Sea Views: same idea, vertical but lighter — grows down a little less --- */
.bento-seaview{overflow:visible;background:transparent;padding:0;z-index:1;min-height:210px;cursor:pointer}
.bento-seaview::after{display:none}
.bento-seaview:hover,.bento-seaview.open{z-index:30}
.seaview-inner{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden;background:#1b2a30;box-shadow:0 20px 44px -22px rgba(0,0,0,.5);transition:height .75s cubic-bezier(.2,.85,.2,1),box-shadow .4s}
.bento-seaview:hover .seaview-inner,.bento-seaview.open .seaview-inner{height:calc(100% + 142px);box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
.seaview-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.bento-seaview .seaview-photo img{position:absolute;left:0;top:0;z-index:0;display:block;width:100%;height:auto;transform:none}
.seaview-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(6,10,7,.8) 0%,rgba(6,10,7,.3) 40%,rgba(6,10,7,0) 60%)}
.seaview-content{position:relative;z-index:3;height:100%;padding:1.6rem;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start}
.seaview-content h3{color:#fff;font-size:clamp(1.15rem,1.9vw,1.35rem);text-shadow:0 2px 12px rgba(0,0,0,.6);margin-bottom:.3rem}
.seaview-content p{color:rgba(255,255,255,.92);font-size:.88rem;line-height:1.4;max-width:26ch;text-shadow:0 1px 8px rgba(0,0,0,.55)}
@media (hover:none){.bento-seaview:hover .seaview-inner{height:100%}.bento-seaview.open .seaview-inner{height:calc(100% + 142px)}}

.bento-solid{background:linear-gradient(150deg,var(--green),var(--green-dark));color:#fff;justify-content:center}
.bento-solid::after{display:none}
.bento-solid .feature-num{color:rgba(255,255,255,.28);font-size:2.4rem;margin-bottom:.2rem}
.bento-cream{background:var(--surface);color:var(--ink);border:1px solid var(--line);justify-content:center}
.bento-cream::after{display:none}
.bento-cream h3{color:var(--ink);text-shadow:none;transition:color .3s}.bento-cream p{color:var(--muted);text-shadow:none;transition:color .3s}
.bento-link{cursor:pointer;transition:background .35s,border-color .35s,transform .35s var(--ease)}
.bento-link-langs{display:flex;gap:.4rem;margin-top:.8rem;flex-wrap:wrap}
.bento-link .chip{transition:background .3s,color .3s,box-shadow .3s}
.bento-link-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.2rem;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;color:var(--green);transition:color .3s,gap .3s}
.bento-link-cta svg{width:16px;height:16px;transition:transform .3s}
.bento-link:hover{background:var(--green);border-color:var(--green);transform:translateY(-4px);box-shadow:var(--shadow)}
.bento-link:hover h3,.bento-link:hover p{color:#fff}
.bento-link:hover .chip{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.bento-link:hover .bento-link-cta{color:#fff;gap:.6rem}
.bento-link:hover .bento-link-cta svg{transform:translateX(2px)}
@media (max-width:820px){.bento{grid-template-columns:repeat(2,1fr)}.bento-tall{grid-row:span 1}.bento-wide{grid-column:span 2}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.bento-wide{grid-column:span 1}.bento-drinks:hover .drinks-inner,.bento-drinks.open .drinks-inner{width:100%}}

/* ---------- Event (La Cura Sono Io) ---------- */
.event-card{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);background:#4a2a7a;color:#fff}
.event-card .event-media{background:#4a2a7a;display:grid;place-items:center}
/* contain, not cover: this is a designed poster, and cropping it was cutting
   the venue line off its right edge. The card's purple matches the artwork's
   own ground, so the letterboxing does not read as a gap. */
.event-card .event-media img{width:100%;height:100%;object-fit:contain;display:block}
.event-card .event-body{padding:clamp(1.6rem,4vw,2.6rem);display:flex;flex-direction:column;justify-content:center}
.event-card h3{color:#fff;font-size:clamp(1.5rem,3vw,2rem)}
.event-card .event-meta{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.event-card .event-meta span{background:rgba(255,255,255,.14);border-radius:999px;padding:.4rem .9rem;font-size:.86rem}
.event-card p{color:rgba(255,255,255,.85)}
.event-card .btn-gold{margin-top:1.2rem;align-self:flex-start}
@media (max-width:720px){.event-card{grid-template-columns:1fr}}

/* ---------- Custom file input ---------- */
.file-field input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.file-field .file-label{width:100%;display:flex;align-items:center;justify-content:space-between;gap:clamp(.45rem,3vw,1.2rem);border:1.5px solid var(--line);border-radius:10px;padding:.5rem .95rem .5rem .55rem;cursor:pointer;transition:border-color .2s;background:var(--surface)}
.file-field .file-label:hover{border-color:var(--green)}
.file-label .file-name{color:var(--muted);font-size:.82rem;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.file-label .file-btn{display:inline-flex;align-items:center;gap:.35rem;background:var(--green-wash);color:var(--green-dark);font-weight:600;font-size:.78rem;padding:.4rem .75rem;border-radius:7px;white-space:nowrap;transition:background .2s;flex-shrink:0}
.file-label:hover .file-btn{background:var(--green);color:#fff}
.file-label .file-btn svg{width:14px;height:14px}
.file-hint{display:block;margin-top:.4rem;font-size:.78rem;color:var(--muted)}
/* bold-on-hover with zero layout shift (faux-bold via text-shadow, stays inline) */
.link-strong{font-weight:500;transition:text-shadow .12s}
.link-strong:hover{text-shadow:.4px 0 0 currentColor,-.4px 0 0 currentColor}

/* ---------- Custom Google Map (Find Us) ---------- */
.vmap-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);min-height:520px;background:var(--surface-2)}
#vmap{position:absolute;inset:0}
.vmap-open{position:absolute;left:1rem;bottom:1.6rem;z-index:5;display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:var(--ink);font-weight:600;font-size:.85rem;padding:.6rem 1.05rem;border-radius:999px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s}
.vmap-open:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.vmap-open svg{width:15px;height:15px;color:var(--green)}
.vmap-zoom{position:absolute;right:1rem;bottom:1.6rem;z-index:5;display:flex;flex-direction:column;gap:.45rem}
.vmap-zoom button{width:38px;height:38px;border-radius:50%;background:#fff;border:none;box-shadow:var(--shadow-sm);font-size:1.15rem;line-height:1;cursor:pointer;color:var(--ink);transition:transform .2s,background .2s}
.vmap-zoom button:hover{transform:scale(1.08);background:var(--green-wash)}
.vpin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;cursor:pointer;z-index:6}
.vpin-card{background:#fff;color:var(--green-dark);font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.09em;font-size:.8rem;padding:.5rem .9rem;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.2);white-space:nowrap;margin-bottom:.55rem;transition:transform .25s var(--ease)}
.vpin:hover .vpin-card{transform:translateY(-3px)}
.vpin-dot{position:relative;width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:1.35rem;border:3px solid #fff;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.vpin-dot::after{content:'';position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top:9px solid #fff}
.vpin-pulse{position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(60,106,75,.55);animation:vpulse 2.4s ease-out infinite;pointer-events:none}
@keyframes vpulse{0%{transform:scale(.55);opacity:.9}75%{transform:scale(1.3);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.vpin-pulse{animation:none;display:none}}

/* ---------- Work With Us perks ---------- */
.perks{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:1.4rem 0}
.perk{display:flex;align-items:center;gap:.7rem;font-size:.95rem;font-weight:500}
.perk .perk-ico{width:38px;height:38px;border-radius:10px;background:var(--green-wash);color:var(--green);display:grid;place-items:center;flex-shrink:0}
.perk .perk-ico svg{width:19px;height:19px}
.hiring-quote{border-left:3px solid var(--gold);padding:.3rem 0 .3rem 1.2rem;margin-top:1.6rem;font-family:var(--font-display);font-style:italic;font-size:1.1rem;color:var(--ink);line-height:1.5}
@media (max-width:460px){.perks{grid-template-columns:1fr}}

/* ---------- Open Positions ---------- */
.positions-list{display:flex;flex-direction:column;gap:.8rem}
.positions-empty{color:var(--muted);font-size:.95rem;background:var(--green-wash);border-radius:12px;padding:1rem 1.2rem}
.position-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.3rem 1.4rem;transition:border-color .22s,box-shadow .22s,transform .22s var(--ease)}
.position-card:hover{border-color:rgba(var(--green-rgb),.4);box-shadow:0 14px 34px -22px rgba(28,36,32,.4);transform:translateY(-2px)}
.position-card h3{font-family:var(--font-cond);font-size:1.5rem;font-weight:700;text-transform:uppercase;letter-spacing:.015em;color:var(--green-dark);line-height:1.05}
.position-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;flex-wrap:wrap;width:100%}
.position-date{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;font-size:.68rem;color:var(--muted);white-space:nowrap}
.position-tags{display:flex;gap:.4rem;flex-wrap:wrap}
/* One colour per kind of tag so the card reads at a glance */
.position-tags .chip,.picker-item-tags .chip{border-radius:7px;font-size:.68rem;letter-spacing:.06em;padding:.28rem .58rem;font-weight:700}
.chip-type,.chip-hours{background:#EFEFEA;color:#6A7268;border:1px solid transparent}
.chip-start{background:transparent;border:1px solid var(--line);color:var(--muted)}
/* Traffic light on the one thing that decides whether you apply: red stop, gold maybe, green go */
.chip-exp-req{background:rgba(var(--red-rgb),.10);color:var(--red-dark)}
.chip-exp-low{background:rgba(var(--gold-rgb),.20);color:#7C5D0E}
.chip-exp-any{background:var(--green-wash);color:var(--green-dark)}
.position-note{color:var(--muted);font-size:.86rem;line-height:1.5}
.position-apply{white-space:nowrap;margin-top:.35rem;box-shadow:0 8px 20px -12px rgba(var(--green-rgb),.9)}
.applying-banner{display:inline-block;background:var(--green-wash);color:var(--green-dark);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;font-weight:700;padding:.45rem .9rem;border-radius:8px;text-align:right}
.form-top-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem;scroll-margin-top:100px}
.form-top-row .form-back{margin-bottom:0}

/* Floating labels: label sits inside the field, lifts on focus/fill */
.form-field.ff{position:relative}
.form-field.ff input,.form-field.ff select,.form-field.ff textarea{padding:1.45rem .95rem .5rem}
.form-field.ff textarea{min-height:104px;padding-top:1.6rem}
.form-field.ff label{position:absolute;left:.95rem;top:.95rem;margin:0;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-weight:400;font-size:1rem;color:var(--muted);pointer-events:none;transition:top .16s var(--ease),font-size .16s var(--ease),color .16s;background:none}
.form-field.ff input:focus~label,.form-field.ff input:not(:placeholder-shown)~label,
.form-field.ff textarea:focus~label,.form-field.ff textarea:not(:placeholder-shown)~label,
.form-field.ff select:focus~label,.form-field.ff.ff-fixed label{top:.42rem;font-size:.7rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--green-dark)}
.form-field.ff select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .9rem center;background-size:16px;padding-right:2.4rem}
.form-section{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:700;color:var(--muted);margin:1.7rem 0 .9rem;padding-bottom:.45rem;border-bottom:1px solid var(--line)}
.form-section:first-of-type{margin-top:.2rem}
.positions-count{margin-left:auto;background:var(--green-wash);color:var(--green-dark);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.07em;font-size:.7rem;font-weight:700;padding:.3rem .6rem;border-radius:6px;white-space:nowrap}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.positions-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.7rem;margin:1.6rem 0;box-shadow:var(--shadow-sm)}
.positions-box .positions-empty{background:var(--green-wash)}
.positions-box-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem}
.positions-box-ico{width:46px;height:46px;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0}
.positions-box-ico svg{width:21px;height:21px}
.positions-box-title{font-size:1.4rem;margin:0}
.apply-choice{text-align:center;padding:.4rem 0 .2rem;transition:opacity .28s ease,transform .28s ease;scroll-margin-top:100px}
.apply-choice.fade-out{opacity:0;transform:translateY(-10px)}
.apply-choice h3{font-size:1.6rem;margin:.15rem 0 1.5rem}
.apply-tiles{display:flex;flex-direction:column;gap:.9rem}
.apply-tile{display:flex;align-items:center;gap:1rem;text-align:left;width:100%;padding:1.1rem 1.3rem;border-radius:16px;border:1.5px solid var(--line);background:var(--green-wash);transition:transform .2s var(--ease),box-shadow .2s,border-color .2s;cursor:pointer}
.apply-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-sm);border-color:var(--green)}
.apply-tile.alt{background:rgba(var(--green-rgb),.13)}
.apply-tile.alt:hover{border-color:var(--green-dark)}
.apply-tile-ico{width:48px;height:48px;border-radius:13px;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0}
.apply-tile-ico svg{width:22px;height:22px}
.apply-tile.alt .apply-tile-ico{background:var(--green-dark)}
.apply-tile-text{display:flex;flex-direction:column;gap:.2rem}
.apply-tile-text strong{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.03em;font-size:1rem;color:var(--ink)}
.apply-tile-text span{font-size:.82rem;color:var(--muted)}
.apply-tile:disabled{background:var(--surface-2);border-color:var(--line);cursor:not-allowed;transform:none;box-shadow:none}
.apply-tile:disabled .apply-tile-ico{background:var(--line);color:var(--muted)}
.apply-tile:disabled:hover{transform:none;box-shadow:none;border-color:var(--line)}
.apply-choice-note{color:var(--muted);font-size:.85rem;margin-top:1.3rem}
.position-picker{transition:opacity .28s ease,transform .28s ease;scroll-margin-top:100px}
.position-picker.fade-out{opacity:0;transform:translateY(-10px)}
.picker-title{font-size:1.3rem;margin:.9rem 0 1rem}
.picker-list{display:flex;flex-direction:column;gap:.7rem}
.picker-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;padding:1rem 1.2rem;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s;color:var(--ink)}
.picker-item:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.picker-item svg{width:18px;height:18px;color:var(--muted);flex-shrink:0}
.picker-item-info{display:flex;flex-direction:column;gap:.4rem}
.picker-item-role{font-weight:600;text-transform:uppercase;letter-spacing:.02em;font-family:var(--font-cond)}
.picker-item-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.btn:disabled{background:var(--surface-2);color:var(--muted);box-shadow:none;cursor:not-allowed;border-color:var(--line)}
.form-back{display:inline-flex;align-items:center;gap:.35rem;background:none;border:none;padding:0;margin-bottom:1.2rem;color:var(--muted);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem;font-weight:700;cursor:pointer;transition:color .2s;scroll-margin-top:100px}
.form-back:hover{color:var(--green)}
.form-back svg{width:15px;height:15px}
.form-expand{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.form-expand.open{grid-template-rows:1fr;margin-top:1.2rem}
/* overflow:hidden is what makes the 0fr->1fr animation work, but it also slices the
   full-width submit button's shadow and any focus ring at the left and right edges.
   The padding/negative-margin pair gives the clip box room without moving the content. */
.form-expand>div{overflow:hidden;min-height:0;padding-inline:18px;margin-inline:-18px}
.form-expand>div>*{opacity:0;transform:translateY(10px);transition:opacity .5s ease .15s,transform .5s ease .15s}
.form-expand.open>div>*{opacity:1;transform:translateY(0)}
@media (max-width:460px){.form-grid-2{grid-template-columns:1fr}}

/* ---------- Staff backoffice ---------- */
.muted{color:var(--muted)}
.admin-body{background:var(--paper);min-height:100vh}
.admin-shell{max-width:920px;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) var(--pad) 4rem}
.admin-position-card{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:1.1rem 1.3rem;box-shadow:var(--shadow-sm)}
.admin-position-card.is-paused{opacity:.6}
.btn-sm{padding:.5rem .9rem;font-size:.82rem}
.btn-ghost.danger{color:var(--red);border-color:rgba(var(--red-rgb),.35)}
.btn-ghost.danger:hover{background:var(--red);color:#fff;border-color:var(--red)}
.chip-muted{background:var(--surface-2);color:var(--muted)}
.admin-create-card{margin-top:2.2rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.2rem);box-shadow:var(--shadow-sm)}
.admin-create-card h2{font-size:1.2rem;margin-bottom:0}
.admin-create-form .form-field textarea{min-height:80px}
.settings-menu-row{display:grid;grid-template-columns:1fr 8rem;gap:0 1rem}
@media (max-width:520px){.settings-menu-row{grid-template-columns:1fr}}
.admin-form-actions a.btn{text-decoration:none}

/* ---------- Form checkboxes ---------- */
.form-check{display:flex;align-items:flex-start;gap:.7rem;margin-top:.9rem;font-size:.88rem;color:var(--muted);line-height:1.5;cursor:pointer}
.form-check input{position:absolute;opacity:0;width:1px;height:1px}
.form-check-box{flex-shrink:0;width:20px;height:20px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);display:grid;place-items:center;margin-top:.1rem;transition:background .18s,border-color .18s}
.form-check-box svg{width:12px;height:12px;color:#fff;opacity:0;transform:scale(.6);transition:opacity .18s,transform .18s var(--ease)}
.form-check input:checked~.form-check-box{background:var(--green);border-color:var(--green)}
.form-check input:checked~.form-check-box svg{opacity:1;transform:scale(1)}
.form-check input:focus-visible~.form-check-box{box-shadow:0 0 0 3px rgba(var(--green-rgb),.22)}
.form-check a{color:var(--green);text-decoration:underline}
/* Padding so the submit's hover shadow is never clipped by the card edge */
/* .form-expand>div is overflow:hidden for the open animation, so the submit needs
   clearance below it or its hover shadow gets cut off by that clip box. */
.form-submit{margin:1.6rem 0 0;padding-bottom:2.2rem}
.form-submit .btn{width:100%;box-shadow:0 10px 26px -14px rgba(var(--green-rgb),.85)}
.form-submit .btn:hover{box-shadow:0 14px 30px -16px rgba(var(--green-rgb),.9)}

/* ---------- Language levels ---------- */
.lang-row{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.1rem}
.lang-name{flex:0 0 34%;font-weight:600;color:var(--ink);padding-top:.15rem}
.lang-input{flex:0 0 calc(34% - 38px);padding:.5rem .65rem;border:1.5px solid var(--line);border-radius:9px;font-family:var(--font-body);font-size:.9rem;background:var(--surface);color:var(--ink);font-weight:400;min-width:0}
.lang-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.12)}
.lang-scale{flex:1;min-width:0}
.lang-scale input[type=range]{width:100%;-webkit-appearance:none;appearance:none;background:transparent;margin:0;height:22px;cursor:pointer}
.lang-scale input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:var(--green-wash)}
.lang-scale input[type=range]::-moz-range-track{height:5px;border-radius:999px;background:var(--green-wash)}
.lang-scale input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6.5px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 2px 6px rgba(28,36,32,.28);transition:transform .18s var(--ease)}
.lang-scale input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--green);border:3px solid #fff;box-shadow:0 2px 6px rgba(28,36,32,.28)}
.lang-scale input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.lang-scale input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(var(--green-rgb),.25)}
.lang-ticks{position:relative;height:1.1em;margin-top:.3rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;font-size:.62rem;color:var(--muted)}
.lang-ticks span{position:absolute;top:0;white-space:nowrap;transform:translateX(-50%)}
.lang-ticks span:nth-child(1){left:0;transform:none}
.lang-ticks span:nth-child(2){left:calc(9px + (100% - 18px) * .3333)}
.lang-ticks span:nth-child(3){left:calc(9px + (100% - 18px) * .6666)}
.lang-ticks span:nth-child(4){left:auto;right:0;transform:none}
.lang-remove{flex-shrink:0;width:28px;height:28px;margin-top:.1rem;margin-right:.35rem;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:color .18s,border-color .18s}
.lang-remove svg{width:14px;height:14px}
.lang-remove:hover{color:var(--red);border-color:rgba(var(--red-rgb),.4)}
.lang-add{display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px dashed var(--line);border-radius:9px;padding:.5rem .85rem;color:var(--green-dark);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.07em;font-size:.74rem;font-weight:700;cursor:pointer;transition:border-color .18s,background .18s}
.lang-add svg{width:14px;height:14px}
.lang-add:hover{border-color:var(--green);background:var(--green-wash)}
@media (max-width:520px){
  .lang-row{flex-wrap:wrap;gap:.5rem;align-items:center}
  .lang-name{flex-basis:100%}
  .lang-remove{order:1}
  .lang-input{flex:1 1 auto;order:2}
  .lang-scale{flex-basis:100%;order:3}
}

/* ---------- Functions & Events page ---------- */

/* Hero. Every event photo we have is a portrait shot, so the collage is built
   around verticals rather than fighting them: one tall frame, two smaller. */
.fn-hero{background:linear-gradient(135deg,var(--ink),#22301f);color:#fff;padding-block:clamp(3rem,6.5vw,5rem);position:relative;overflow:hidden}
.fn-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 72% 24%,rgba(var(--gold-rgb),.20),transparent 56%)}
.fn-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(1.8rem,5vw,4rem);align-items:center}
.fn-hero-copy{max-width:34rem}
.fn-hero h1{color:#fff;font-size:clamp(2.4rem,5.2vw,4.2rem);margin:.35rem 0 .8rem}
.fn-hero h1 .accent{color:var(--gold);font-style:italic;font-weight:600}
.fn-hero .lead{color:rgba(255,255,255,.82)}
.fn-hero .hero-actions{margin-top:1.7rem}

.fn-hero-art{display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr 1fr;gap:.7rem;aspect-ratio:1/1.02}
.fh{position:relative;margin:0;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06);box-shadow:0 26px 50px -26px rgba(0,0,0,.8);animation:fhIn .75s var(--ease) backwards}
.fh img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.fh::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);pointer-events:none}
.fh:hover img{transform:scale(1.04)}
.fh-a{grid-row:1 / span 2}
.fh-a::after{box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.5)}
.fh-b{animation-delay:.1s}
.fh-c{animation-delay:.2s}
@keyframes fhIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fh{animation:none}.fh img{transition:none}}

.fn-facts{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(1.4rem,4vw,2.8rem);margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.16)}
.fn-facts li{display:flex;flex-direction:column;gap:.15rem}
.fn-facts strong{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.02em;font-size:1.5rem;font-weight:700;color:var(--gold);line-height:1}
.fn-facts span{font-size:.83rem;color:rgba(255,255,255,.62)}

@media (max-width:960px){
  .fn-hero-grid{grid-template-columns:1fr;gap:2.2rem}
  .fn-hero-copy{max-width:none}
  .fn-hero-art{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;aspect-ratio:auto;gap:.6rem}
  .fh{aspect-ratio:3/4}
  .fh-a{grid-row:auto}
}
@media (max-width:560px){
  .fn-hero-art{grid-template-columns:1.18fr .82fr;grid-template-rows:1fr 1fr;aspect-ratio:1/.88;gap:.5rem}
  .fh{aspect-ratio:auto}
  .fh-a{grid-row:1 / span 2}
}
@media (max-width:520px){.fn-facts{gap:1.1rem 1.6rem;margin-top:1.9rem}.fn-facts strong{font-size:1.2rem}}

/* ---------- Set menus: one row of tabs, one panel ----------
   Four menus side by side used to be four columns of dense text with ragged
   bottoms: forty lines to read before you could choose. Now the row of tabs
   carries the comparison (name and price), and only the menu you picked is
   spelled out, next to a photo of what that tier actually looks like. */
.fn-choose{margin-top:clamp(1.6rem,3.5vw,2.4rem)}
.fn-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.fn-tab{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:.85rem 1rem .9rem;cursor:pointer;font-family:inherit;color:inherit;
  transition:border-color .2s,box-shadow .25s,transform .25s var(--ease),background .2s}
.fn-tab:hover{border-color:rgba(var(--green-rgb),.42);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.fn-tab:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.fn-tab-n{font-family:var(--font-cond);font-weight:700;font-size:.7rem;letter-spacing:.16em;color:var(--gold)}
.fn-tab-name{font-family:var(--font-display);font-weight:700;font-size:1.24rem;line-height:1.15;color:var(--green-dark);letter-spacing:-.01em}
.fn-tab-price{margin-top:.15rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.07em;font-size:.76rem;font-weight:600;color:var(--muted)}
.fn-tab-price strong{font-size:1.02rem;font-weight:700;color:var(--ink)}
.fn-tab.is-on{background:var(--green-dark);border-color:var(--green-dark);box-shadow:0 18px 34px -22px rgba(var(--green-rgb),1)}
.fn-tab.is-on .fn-tab-name{color:#fff}
.fn-tab.is-on .fn-tab-price{color:rgba(255,255,255,.66)}
.fn-tab.is-on .fn-tab-price strong{color:#fff}
/* the little caret that ties the chosen tab to the panel below it */
.fn-tab.is-on::after{content:'';position:absolute;left:50%;bottom:-6px;width:13px;height:13px;background:var(--green-dark);transform:translateX(-50%) rotate(45deg);border-radius:2px}
.fn-tab[data-flag]::before{content:attr(data-flag);position:absolute;top:-.6rem;right:.75rem;background:var(--gold);color:#231a06;
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.09em;font-size:.6rem;font-weight:700;
  padding:.2rem .5rem;border-radius:6px;box-shadow:0 6px 14px -8px rgba(var(--gold-rgb),.9)}

/* The photo is clipped by its own corners rather than by the panel: overflow:hidden
   up here would eat the hover glow on the button in the bottom corner. */
.fn-panel{position:relative;display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:clamp(1.2rem,3vw,2.4rem);
  margin-top:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow)}
.fn-panel-art{position:relative;margin:0;background:var(--surface-2);overflow:hidden;
  border-radius:calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px)}
.fn-panel-art img{width:100%;height:100%;min-height:360px;object-fit:cover}
.fn-panel-flag{position:absolute;left:1rem;bottom:1rem;background:var(--gold);color:#231a06;
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-size:.64rem;font-weight:700;
  padding:.3rem .6rem;border-radius:7px}
.fn-panel-flag[hidden]{display:none}
.fn-panel-body{display:flex;flex-direction:column;padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.4rem,2.6vw,2.1rem) clamp(1.4rem,2.6vw,1.9rem) 0}
.fn-panel-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:.2rem .7rem}
.fn-panel-n{font-family:var(--font-cond);font-weight:700;font-size:.74rem;letter-spacing:.16em;color:var(--gold)}
.fn-panel-body h3{font-family:var(--font-display);font-size:clamp(1.6rem,2.8vw,2.1rem);color:var(--green-dark);line-height:1.1}
.fn-panel-sub{flex-basis:100%;margin-top:.25rem;font-size:.92rem;line-height:1.45;color:var(--muted)}

/* display:grid beats the browser's own [hidden]{display:none}, so the tailor-made
   course list kept on the page for the panel to lift has to be hidden explicitly */
.fn-courses[hidden]{display:none}
.fn-courses{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.85rem 1.6rem;align-content:start;margin:1.25rem 0 1.3rem;flex:1}
.fn-course-name{display:block;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;font-weight:700;color:var(--gold);margin-bottom:.3rem}
.fn-course-line{display:block;font-size:.94rem;line-height:1.5;color:var(--ink)}
.fn-course.is-drink{grid-column:1 / -1;background:var(--green-wash);border-radius:11px;padding:.7rem .9rem}
.fn-course.is-drink .fn-course-name{color:var(--green-dark)}
.fn-course.is-drink .fn-course-line{color:var(--green-dark)}

.fn-panel-foot{display:flex;align-items:center;justify-content:space-between;gap:.9rem;flex-wrap:wrap;
  margin-top:auto;padding-top:1.1rem;border-top:1px solid var(--line)}
.fn-panel-price{display:flex;align-items:baseline;gap:.4rem}
.fn-panel-price strong{font-family:var(--font-cond);font-size:2rem;font-weight:700;color:var(--green-dark);line-height:1}
.fn-panel-price span{font-size:.82rem;color:var(--muted)}
.fn-panel-cta{flex-shrink:0}

@media (max-width:860px){
  .fn-panel{grid-template-columns:1fr}
  .fn-panel-art{border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0}
  .fn-panel-art img{min-height:0;aspect-ratio:16/9}
  .fn-panel-body{padding:1.3rem}
}
@media (max-width:620px){
  .fn-picker{grid-template-columns:1fr 1fr}
  .fn-tab.is-on::after{display:none}
  .fn-courses{grid-template-columns:1fr;gap:.8rem}
  .fn-panel-foot{justify-content:center}
  .fn-panel-cta{width:100%;justify-content:center}
}

/* Extras and the three rules: one line each, because by this point the visitor
   has already read a menu and only wants to know what it costs them. */
.fn-addons{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .9rem;margin-top:clamp(1.2rem,2.5vw,1.7rem);
  padding:.85rem 1.15rem;background:var(--green-wash);border-radius:14px;font-size:.9rem}
.fn-addons-label{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.68rem;font-weight:700;color:var(--green-dark)}
.fn-addon{position:relative;padding-left:.95rem;color:var(--ink)}
.fn-addon::before{content:'';position:absolute;left:.25rem;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.fn-addons em{margin-left:auto;font-style:italic;font-size:.83rem;color:var(--muted)}
@media (max-width:760px){.fn-addons em{margin-left:0;flex-basis:100%}}

.fn-steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem);
  margin-top:clamp(1.4rem,3vw,2.1rem);padding-top:clamp(1.4rem,3vw,1.9rem);border-top:1px solid var(--line)}
.fn-steps li{display:flex;gap:.8rem;align-items:flex-start}
.fn-step-n{flex-shrink:0;width:27px;height:27px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-family:var(--font-cond);font-weight:700;font-size:.88rem}
.fn-steps strong{display:block;font-size:.98rem;line-height:1.3;color:var(--green-dark)}
.fn-steps p{margin-top:.2rem;font-size:.87rem;line-height:1.5;color:var(--muted)}
@media (max-width:760px){.fn-steps{grid-template-columns:1fr;gap:.9rem}}

/* ---------- Tailor-made: the menu we design for a wedding ----------
   The strongest thing we can show here is the artefact itself, so the real
   printed spread is the hero of the section and the copy stays out of its way. */
.fn-custom{background:var(--surface-2)}
.fn-custom-grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.fn-custom-copy h2{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.fn-custom-points{list-style:none;margin:1.4rem 0 1.9rem;display:grid;gap:.7rem}
.fn-custom-points li{position:relative;padding-left:1.7rem;font-size:.97rem;line-height:1.5;color:var(--ink)}
.fn-custom-points li::before{content:'';position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;background:rgba(var(--green-rgb),.15)}
.fn-custom-points li::after{content:'';position:absolute;left:4.6px;top:.6em;width:6px;height:3.4px;border-left:1.8px solid var(--green);border-bottom:1.8px solid var(--green);transform:rotate(-45deg)}

.fn-custom-art{position:relative;margin:0;padding-left:clamp(0rem,3vw,2.4rem)}
.fn-spread{position:relative;border-radius:5px;overflow:hidden;background:#fff;transform:rotate(-.9deg);
  box-shadow:0 2px 0 rgba(28,36,32,.05),0 34px 62px -30px rgba(28,36,32,.5),0 2px 10px rgba(28,36,32,.07)}
.fn-spread img{width:100%;height:auto}
.fn-spread::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(28,36,32,.08);pointer-events:none}
/* the gutter where the two printed pages meet */
.fn-spread-fold{position:absolute;top:0;bottom:0;left:50%;width:36px;transform:translateX(-50%);pointer-events:none;
  background:linear-gradient(90deg,rgba(28,36,32,0),rgba(28,36,32,.05) 42%,rgba(28,36,32,.10) 50%,rgba(28,36,32,.05) 58%,rgba(28,36,32,0))}
.fn-custom-inset{position:absolute;left:0;bottom:-1.8rem;width:min(32%,180px);height:auto;
  border-radius:10px;border:5px solid #fff;transform:rotate(2.6deg);box-shadow:0 22px 40px -20px rgba(28,36,32,.62)}
.fn-custom-art figcaption{margin-top:2.7rem;margin-left:auto;max-width:62%;text-align:right;font-size:.83rem;font-style:italic;line-height:1.5;color:var(--muted)}
@media (max-width:900px){
  .fn-custom-grid{grid-template-columns:1fr;gap:2.2rem}
  .fn-custom-art{padding-left:0}
  .fn-spread{transform:none}
  .fn-custom-inset{position:static;width:130px;margin-top:1.1rem;transform:rotate(-2deg)}
  .fn-custom-art figcaption{margin:.9rem 0 0;max-width:none;text-align:left}
}
/* On a phone the double spread is 350px wide and the courses are unreadable, so
   show the left page only: same artefact, twice the type size. */
@media (max-width:560px){
  .fn-spread{aspect-ratio:1/1.414;overflow:hidden}
  .fn-spread img{width:200%;max-width:none}
  .fn-spread-fold{display:none}
}

/* ---------- Enquiry: the form beside what it leads to, not alone in a column ---------- */
.fn-enquire-wrap{background:var(--green-wash);position:relative;scroll-margin-top:80px}
.fn-enq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.fn-enq-side h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
.fn-enq-steps{list-style:none;counter-reset:enq;margin:1.7rem 0;display:grid;gap:1rem}
.fn-enq-steps li{counter-increment:enq;position:relative;padding-left:2.2rem}
.fn-enq-steps li::before{content:counter(enq);position:absolute;left:0;top:-.05em;width:24px;height:24px;border-radius:50%;
  background:var(--green);color:#fff;display:grid;place-items:center;font-family:var(--font-cond);font-weight:700;font-size:.82rem}
.fn-enq-steps strong{display:block;font-size:.97rem;line-height:1.3;color:var(--green-dark)}
.fn-enq-steps span{display:block;margin-top:.15rem;font-size:.87rem;line-height:1.5;color:var(--muted)}
.fn-enq-photo{margin:0 0 1.1rem;border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm)}
/* Square. A 4:5 portrait read as a slab beside the form's rows, a 3:2 band was too
   short to hold the scene. Cropped square at source so nothing is re-cropped here.
   height:auto matters, or the img's own height attribute wins over the ratio. */
.fn-enq-photo img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.fn-form-card{border-top:4px solid var(--gold)}
@media (max-width:960px){
  .fn-enq-grid{grid-template-columns:1fr;gap:1.8rem}
  .fn-enq-steps{margin:1.3rem 0}
}
.ev-types{display:grid;grid-template-columns:repeat(5,1fr);gap:.6rem}
.ev-type input{position:absolute;opacity:0;width:1px;height:1px}
.ev-type-box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;text-align:center;height:100%;padding:.95rem .5rem;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.04em;font-size:.72rem;font-weight:700;color:var(--ink);line-height:1.15;transition:border-color .2s,background .2s,color .2s,transform .2s var(--ease)}
.ev-type-box svg{width:24px;height:24px;color:var(--green);transition:color .2s}
.ev-type-box:hover{border-color:var(--green);transform:translateY(-2px)}
.ev-type input:checked~.ev-type-box{border-color:var(--green);background:var(--green);color:#fff}
.ev-type input:checked~.ev-type-box>svg{color:var(--gold)}
.ev-type input:focus-visible~.ev-type-box{box-shadow:0 0 0 3px rgba(var(--green-rgb),.22)}
/* A tick in the corner: colour alone is not enough to read as "chosen" */
.ev-type-tick{position:absolute;top:.4rem;right:.4rem;width:17px;height:17px;border-radius:50%;background:var(--gold);color:#231a06;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .2s,transform .25s var(--ease)}
.ev-type-tick svg{width:10px;height:10px;color:#231a06}
.ev-type-box{position:relative}
.ev-type input:checked~.ev-type-box .ev-type-tick{opacity:1;transform:none}

/* ---------- Enquiry form: progress, errors, reassurance ---------- */
.ev-progress{display:flex;align-items:center;gap:.7rem;margin:.9rem 0 .2rem}
.ev-progress-track{flex:1;height:5px;border-radius:999px;background:var(--green-wash);overflow:hidden}
.ev-progress-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--green),#5E9370);transition:width .45s var(--ease)}
.ev-progress-count{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.07em;font-size:.68rem;font-weight:700;color:var(--muted);white-space:nowrap}
.ev-progress.is-done .ev-progress-fill{background:linear-gradient(90deg,var(--gold),#DDBA5A)}
.ev-progress.is-done .ev-progress-count{color:#7C5D0E}
.form-after{margin-top:.9rem;text-align:center;font-size:.82rem;color:var(--muted);line-height:1.5}

.field-error{margin-top:.35rem;font-size:.8rem;font-weight:500;color:var(--red-dark);animation:errIn .22s var(--ease)}
@keyframes errIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}
.form-field.has-error input,.form-field.has-error select,.form-field.has-error textarea{border-color:var(--red);box-shadow:0 0 0 3px rgba(var(--red-rgb),.10)}
.form-check.has-error .form-check-box{border-color:var(--red);box-shadow:0 0 0 3px rgba(var(--red-rgb),.12)}
.form-check.has-error{color:var(--red-dark)}
.form-check.has-error .field-error{flex-basis:100%}
.ev-types.has-error{outline:2px solid rgba(var(--red-rgb),.45);outline-offset:6px;border-radius:16px}
.ev-types.has-error .field-error{grid-column:1 / -1;margin-top:.1rem}
@media (max-width:760px){.ev-types{grid-template-columns:repeat(3,1fr)}}
@media (max-width:420px){.ev-types{grid-template-columns:1fr 1fr}}
/* Fields that appear only once an answer makes them relevant. Plain display:none
   rather than a collapsing grid, so nothing ever clips a focus ring or a shadow. */
.ev-conditional[hidden]{display:none}
.ev-conditional{animation:evFadeIn .3s var(--ease)}
@keyframes evFadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ev-conditional{animation:none}}
.form-hint{color:var(--muted);font-size:.8rem;margin:-.7rem 0 .3rem}
/* Textareas that only ever hold a line or two, so they do not stretch the form */
.form-field.ff.ff-short textarea{min-height:76px}
/* The two optional extras sit side by side rather than as two more full rows */
.ev-checks{display:grid;grid-template-columns:1fr 1fr;gap:0 1.2rem;margin-top:.2rem}
@media (max-width:700px){.ev-checks{grid-template-columns:1fr}}
.fn-contact-strip{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem 1.4rem;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm)}
.fn-contact-lead{flex-basis:100%}
.fn-contact-lead{color:var(--muted);font-size:.9rem}
.fn-contact-item{display:inline-flex;align-items:center;gap:.5rem;color:var(--green-dark);font-weight:600;font-size:.95rem;transition:color .2s}
.fn-contact-item svg{width:17px;height:17px;color:var(--green);flex-shrink:0}
.fn-contact-item:hover{color:var(--green)}
@media (max-width:560px){.fn-contact-strip{flex-direction:column;gap:.55rem;text-align:center}}

/* ---------- Functions FAQ: the objections that stop people sending the form ---------- */
/* Two columns: ten questions in one tall stack was half the length of the page */
.fn-faq{max-width:1020px;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:.6rem;align-items:start}
@media (max-width:820px){.fn-faq{grid-template-columns:1fr;max-width:780px}}
.faq-item{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:border-color .22s,box-shadow .22s}
.faq-item[open]{border-color:rgba(var(--green-rgb),.42);box-shadow:var(--shadow-sm)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.03em;font-size:1rem;font-weight:700;color:var(--green-dark);line-height:1.25;transition:background .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'';margin-left:auto;flex-shrink:0;width:9px;height:9px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg) translateY(-3px);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(225deg) translateY(1px)}
.faq-item summary:hover{background:var(--green-wash)}
.faq-item summary:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
.faq-body{padding:0 1.2rem 1.15rem}
.faq-body p{color:var(--muted);font-size:.94rem;line-height:1.65}
.faq-item[open] .faq-body{animation:faqIn .3s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
.fn-faq-foot{text-align:center;margin-top:1.5rem;color:var(--muted);font-size:.92rem}
.fn-faq-foot a{color:var(--green);font-weight:600}
@media (max-width:480px){.faq-item summary{padding:.9rem 1rem;font-size:.92rem;gap:.7rem}.faq-body{padding:0 1rem 1rem}}
@media (prefers-reduced-motion:reduce){.faq-item[open] .faq-body{animation:none}.faq-item summary::after{transition:none}}

/* Shortcut back to the form. Takes the place the Book a Table button holds on every
   other page, because on this page the enquiry is the booking. */
.fn-fab{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:#231a06;font-weight:600;font-size:.95rem;padding:.85rem 1.3rem;border-radius:999px;box-shadow:0 14px 34px -12px rgba(28,36,32,.6);opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s}
.fn-fab svg{width:18px;height:18px}
.fn-fab.in{opacity:1;transform:none;pointer-events:auto}
.fn-fab.in:hover{background:#DCB44A;transform:translateY(-3px) scale(1.03)}
@media (min-width:961px){.fn-fab{right:1.6rem;bottom:1.6rem}}
@media (prefers-reduced-motion:reduce){.fn-fab{transition:none}}

/* Closing band: the truck is a different business, so it reads as a send-off */
.fn-truck-band{background:linear-gradient(120deg,var(--ink),#22301f);color:#fff;overflow:hidden}
.fn-truck-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.4rem,4vw,3rem);align-items:center}
.fn-truck-band .chip-red{background:rgba(var(--red-rgb),.24);color:#FFB2B5}
.fn-truck-copy h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.6rem)}
.fn-truck-copy p{color:rgba(255,255,255,.78);margin-top:.7rem;max-width:46ch}
.fn-truck-img{width:100%;max-width:460px;justify-self:end;filter:drop-shadow(0 24px 40px rgba(0,0,0,.45))}
@media (max-width:820px){
  .fn-truck-inner{grid-template-columns:1fr}
  .fn-truck-img{max-width:340px;justify-self:center;order:-1}
}

/* ---------- Founder portrait link (home teaser) ---------- */
.vitalia-teaser a.vt-portrait{position:relative;display:inline-block;line-height:0;will-change:transform}
.vitalia-teaser a.vt-portrait img{transition:transform .3s var(--ease)}
.vitalia-teaser a.vt-portrait:hover img{transform:scale(1.05)}
.vitalia-teaser a.vt-portrait{cursor:pointer}

/* ---------- "We're hiring" floating badge ---------- */
.hiring-badge{position:fixed;left:0;top:50%;z-index:94;display:flex;align-items:center;gap:.45rem;background:var(--gold);color:#231a06;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.07em;font-size:.74rem;font-weight:700;padding:.6rem .85rem .6rem .7rem;border-radius:0 12px 12px 0;box-shadow:0 8px 22px -10px rgba(0,0,0,.45);transform:translate(-100%,-50%);opacity:0;transition:transform .58s cubic-bezier(.34,1.56,.64,1),opacity .3s var(--ease),background .2s}
.hiring-badge.in{transform:translate(0,-50%);opacity:1}
.hiring-badge.in:hover{background:#E0B84E;transform:translate(0,-50%) scale(1.06)}
/* The tab runs off the left edge of the screen. Without this the overshoot at
   the end of the entrance looked like a loose pill drifting away from the edge
   and clipping back on; now the gold simply continues past the edge, so it
   reads as one long tab. Fixed position, and the page already clips overflow-x,
   so it adds no sideways scroll. */
.hiring-badge::before{content:'';position:absolute;right:100%;top:0;bottom:0;width:52px;background:inherit;pointer-events:none}
.hiring-badge svg{width:16px;height:16px;flex-shrink:0}
/* Only where the gutter beside the 1200px wrap is wider than the tab itself. */
/* Below a wide desktop the tab would sit over the content at mid-height, so it
   drops to the bottom corner rather than disappearing. It used to be hidden
   outright under 1400px, which is most laptops and every phone: the badge only
   ever appears when a job is actually open, so hiding it there wasted it. */
@media (max-width:1199px){
  /* Just below the middle: the bottom corners belong to the pizza truck on the
     left and the book button on the right, and the badge was sitting on both.
     It only slides in once the hero has been scrolled past, so it never covers
     the headline on a phone. */
  .hiring-badge{top:67%;font-size:.7rem;padding:.5rem .75rem .5rem .6rem}
}
@media (prefers-reduced-motion:reduce){.hiring-badge{transition:none}}

/* ---------- Backoffice create card head ---------- */
.admin-create-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem}
.admin-create-ico{width:44px;height:44px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;flex-shrink:0;transition:background .25s,transform .25s var(--ease)}
.admin-create-ico svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.admin-create-card.is-editing .admin-create-ico{background:var(--gold);color:#231a06}
.admin-create-card.is-editing .admin-create-ico svg{transform:rotate(45deg)}
.admin-create-card{transition:border-color .25s,box-shadow .25s}
.admin-create-card.is-editing{border-color:rgba(var(--gold-rgb),.6);box-shadow:0 0 0 4px rgba(var(--gold-rgb),.10)}
.admin-create-head h2{margin:0;font-size:1.25rem}
.admin-create-sub{color:var(--muted);font-size:.85rem;margin-top:.15rem}
.form-hint.is-low{color:var(--gold-dark,#7C5D0E)}

/* backoffice: actions row + edit-mode cancel.
   .form-submit .btn is width:100% for the usual one-button case; left as is here the
   Cancel button claims that full width and squeezes the primary down to a few pixels. */
.admin-form-actions{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.admin-form-actions .btn{width:auto}
.admin-form-actions .btn-lg{flex:1 1 14rem;justify-content:center}
.admin-form-actions .admin-cancel{flex:0 0 auto}
@media (max-width:480px){.admin-form-actions .btn{flex:1 1 100%;width:100%}}
.admin-position-card h3{font-family:var(--font-cond);font-size:1.35rem;font-weight:700;text-transform:uppercase;letter-spacing:.015em;color:var(--green-dark);line-height:1.05}
.admin-position-card{gap:1.2rem;padding:1.2rem 1.35rem 1.5rem}
.admin-position-card .position-info{display:flex;flex-direction:column;gap:.55rem}
.admin-position-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;flex-shrink:0}
.admin-warn{display:flex;align-items:flex-start;gap:.45rem;color:var(--red-dark);background:rgba(var(--red-rgb),.07);border-radius:9px;padding:.5rem .7rem;font-size:.82rem;line-height:1.4}
.admin-warn svg{width:15px;height:15px;flex-shrink:0;margin-top:.1rem}

/* ---------- Backoffice: shell, header, gate ---------- */
.admin-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:linear-gradient(115deg,var(--green-dark),var(--green) 60%,#4B7C5B);border-radius:16px;padding:1rem 1.5rem;margin-bottom:1.6rem;position:relative;overflow:hidden}
.admin-header::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 88% 18%,rgba(var(--gold-rgb),.22),transparent 55%);pointer-events:none}
.admin-header img{display:block;position:relative;z-index:1;transform:translateY(8%)}
.admin-header-right{position:relative;z-index:1;text-align:right;display:flex;flex-direction:column;gap:.1rem}
.admin-greeting{color:#fff;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-weight:700;font-size:.92rem}
.admin-today{color:rgba(255,255,255,.68);font-size:.76rem}

.gate-card{max-width:400px;margin:3rem auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.4rem);box-shadow:var(--shadow-sm);text-align:center}
.gate-card[hidden]{display:none}
.gate-ico{width:52px;height:52px;margin:0 auto .9rem;border-radius:15px;background:var(--green-wash);color:var(--green-dark);display:grid;place-items:center}
.gate-ico svg{width:24px;height:24px}
.gate-card h1{font-size:1.5rem;margin-bottom:.3rem}
.gate-sub{color:var(--muted);font-size:.88rem;margin-bottom:1.4rem}
.gate-card form{text-align:left}
.gate-card .btn{width:100%;justify-content:center}
.gate-error{color:var(--red);font-size:.85rem;min-height:1.2em;text-align:center}
.gate-card.shake{animation:gateShake .4s var(--ease)}
@keyframes gateShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

.admin-panel[hidden]{display:none}
/* these panels are <section> elements, which the global rule pads by 88px */
.admin-tabpanel{padding-block:0}
.admin-tabpanel[hidden]{display:none}

/* ---------- Backoffice: the four numbers that matter ---------- */
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem;margin-bottom:1.6rem}
.stat{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem 1rem;overflow:hidden;display:flex;flex-direction:column;gap:.1rem;animation:statIn .5s var(--ease) backwards;animation-delay:calc(var(--i) * 60ms)}
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line)}
.stat-k{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.09em;font-size:.68rem;font-weight:700;color:var(--muted)}
.stat-v{font-family:var(--font-cond);font-size:1.9rem;font-weight:700;line-height:1.05;color:var(--ink)}
.stat-sub{font-size:.74rem;color:var(--muted);line-height:1.35}
.stat-gold::before{background:var(--gold)}.stat-gold .stat-v{color:#7C5D0E}
.stat-blue::before{background:#5B7C99}.stat-blue .stat-v{color:#3D5B73}
.stat-green::before{background:var(--green)}.stat-green .stat-v{color:var(--green-dark)}
.stat-ink::before{background:var(--ink)}
.stat-muted::before{background:var(--line)}.stat-muted .stat-v{color:var(--muted)}
@keyframes statIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:900px){.admin-stats{grid-template-columns:1fr 1fr}}
@media (max-width:400px){.stat-v{font-size:1.6rem}}

/* ---------- Backoffice: tabs and header actions ----------
   Two tiers of tab live in this backoffice: which page (Events/Hiring/Menu/
   Functions) and, inside some of those, which pane (Roles/Applications,
   Dinner/Lunch/..., Set menus/Room/FAQ). They used to share almost the same
   pill styling, so the two levels read as one flat row and it was easy to
   lose track of which button changed the page and which just changed the
   view within it. Now they are deliberately different shapes: the page
   switcher is a solid track (heavier, a destination), the pane switcher is a
   plain underline (lighter, a filter on what you are already looking at). */
.admin-panel-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.admin-tabs{display:flex;gap:.2rem;background:var(--surface-2);border-radius:13px;padding:.28rem}
.admin-tab{display:inline-flex;align-items:center;gap:.45rem;background:none;border:1px solid transparent;border-radius:9px;padding:.56rem 1.1rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.87rem;font-weight:700;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.admin-tab:hover{color:var(--green-dark)}
.admin-tab.active{background:var(--green);color:#fff;box-shadow:0 5px 14px -7px rgba(var(--green-rgb),.6)}
.admin-tab-count{display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--gold);color:#231a06;font-size:.68rem}
.admin-tab-count.neutral{background:var(--green-wash);color:var(--green-dark)}
.admin-tab.active .admin-tab-count{background:#fff;color:var(--green-dark)}
.admin-head-actions{display:flex;align-items:center;gap:.5rem}
.icon-btn{width:38px;height:38px;flex-shrink:0;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease)}
.icon-btn svg{width:18px;height:18px}
.icon-btn:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px)}
.icon-btn.is-off{background:var(--surface-2);color:var(--muted)}
/* Struck through when the calendar is hidden: the plain icon looked the same either way */
.icon-strike .strike{opacity:0;stroke-width:2.2;transition:opacity .2s}
.icon-strike.is-off .strike{opacity:1}
.icon-strike.is-off{color:var(--red-dark);border-color:rgba(var(--red-rgb),.3);background:var(--surface)}
.icon-strike.is-off:hover{color:var(--red);border-color:var(--red)}
.icon-strike:not(.is-off){color:var(--muted)}
.icon-btn.is-spinning svg{animation:spin .7s linear}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Backoffice: events toolbar ---------- */
.ev-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.ev-filters{display:flex;gap:.3rem;background:var(--surface-2);border-radius:11px;padding:.25rem}
.ev-filter{background:none;border:none;border-radius:8px;padding:.62rem .8rem;min-height:36px;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;font-weight:700;color:var(--muted);cursor:pointer;transition:background .18s,color .18s}
.ev-filter:hover{color:var(--green-dark)}
.ev-filter.active{background:var(--surface);color:var(--green-dark);box-shadow:var(--shadow-sm)}
.ev-tools{display:flex;align-items:center;gap:.5rem}
.ev-search{position:relative;display:flex;align-items:center}
.ev-search svg{position:absolute;left:.65rem;width:15px;height:15px;color:var(--muted);pointer-events:none}
.ev-search input{width:15rem;max-width:100%;padding:.55rem .8rem .55rem 2.05rem;border:1px solid var(--line);border-radius:11px;background:var(--surface);font-family:var(--font-body);font-size:.88rem;color:var(--ink);transition:border-color .18s,box-shadow .18s,width .25s var(--ease)}
.ev-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.12)}
.ev-search input::-webkit-search-cancel-button{cursor:pointer}

/* ---------- Backoffice: calendar ---------- */
.ev-calendar{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem 1.1rem;margin-bottom:1.1rem;box-shadow:var(--shadow-sm)}
.ev-calendar[hidden],.ev-dayfilter[hidden]{display:none}
.ev-cal-head{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.ev-cal-head strong{flex:1;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:1rem;color:var(--green-dark)}
.ev-cal-nav{width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .18s,color .18s,transform .18s var(--ease)}
.ev-cal-nav svg{width:16px;height:16px}
.ev-cal-nav:hover{border-color:var(--green);color:var(--green);transform:translateY(-1px)}
.ev-cal-today{background:none;border:1px solid var(--line);border-radius:9px;padding:.4rem .7rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;color:var(--muted);cursor:pointer;transition:border-color .18s,color .18s}
.ev-cal-today:hover{border-color:var(--green);color:var(--green)}
.ev-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.ev-cal-dow{text-align:center;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;font-weight:700;color:var(--muted);padding-bottom:.35rem}
.ev-cal-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:44px;border:1px solid transparent;border-radius:9px;background:none;font-family:var(--font-body);font-size:.84rem;color:var(--ink);cursor:default;transition:background .16s,border-color .16s,transform .16s var(--ease)}
.ev-cal-day.is-outside{color:#C3C7BF}
.ev-cal-day.is-today{border-color:var(--gold);font-weight:700}
.ev-cal-day.has-events{cursor:pointer;background:var(--green-wash);font-weight:600}
.ev-cal-day.has-events:hover{border-color:var(--green);transform:translateY(-2px)}
.ev-cal-day.is-selected{background:var(--green);color:#fff;border-color:var(--green)}
.ev-cal-num{line-height:1}
.ev-cal-dots{display:flex;gap:2px;height:5px}
.ev-cal-dots i,.ev-cal-legend i{display:block;width:5px;height:5px;border-radius:50%}
.dot-new{background:var(--gold)}
.dot-quoted{background:#5B7C99}
.dot-confirmed{background:var(--green)}
.dot-done{background:#B4B9B0}
.ev-cal-day.is-selected .dot-new,.ev-cal-day.is-selected .dot-quoted,.ev-cal-day.is-selected .dot-confirmed,.ev-cal-day.is-selected .dot-done{background:#fff}
.ev-cal-legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.9rem;padding-top:.8rem;border-top:1px solid var(--line)}
.ev-cal-legend span{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;color:var(--muted)}
.ev-cal-legend i{width:7px;height:7px}
.ev-dayfilter{display:flex;align-items:center;gap:.6rem;background:var(--green-wash);color:var(--green-dark);border-radius:10px;padding:.55rem .8rem;margin-bottom:.9rem;font-size:.86rem;font-weight:600}
.ev-dayfilter button{margin-left:auto;background:none;border:none;color:var(--green-dark);font-size:1.2rem;line-height:1;cursor:pointer;padding:0 .2rem}

/* ---------- Backoffice: enquiry cards ---------- */
.ev-card{display:flex;gap:1.1rem;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem 1.5rem;box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s;animation:cardIn .45s var(--ease) backwards;animation-delay:calc(var(--i) * 45ms)}
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ev-card:hover{border-color:rgba(var(--green-rgb),.35);box-shadow:var(--shadow)}
.ev-card.is-past{opacity:.62}
.ev-card.is-archived{opacity:.7;background:var(--surface-2)}
.ev-card-date{flex:0 0 62px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1px;background:var(--green-wash);border-radius:12px;padding:.6rem .3rem;height:fit-content;transition:background .2s}
.ev-card-date.is-soon{background:rgba(var(--gold-rgb),.20)}
.ev-card-date.is-soon .ev-d,.ev-card-date.is-soon .ev-m{color:#7C5D0E}
.ev-card-date .ev-d{font-family:var(--font-cond);font-size:1.75rem;font-weight:700;line-height:1;color:var(--green-dark)}
.ev-card-date .ev-m{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;font-size:.72rem;font-weight:700;color:var(--green)}
.ev-card-date .ev-y{font-size:.6rem;color:var(--muted);margin-top:.15rem;text-align:center}
/* Three bands with a hairline between them: who and when, what they want,
   where it is up to. Inside a band things are tight, between them there is air. */
.ev-card-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:.85rem}
.ev-band{display:flex;flex-direction:column;gap:.5rem;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.ev-band:empty{display:none}
.ev-card-head{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.ev-card-head h3{font-family:var(--font-cond);font-size:1.3rem;font-weight:700;text-transform:uppercase;letter-spacing:.015em;color:var(--green-dark);line-height:1.05}
.ev-countdown{margin-left:auto;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--muted);white-space:nowrap}
.ev-countdown.is-soon{color:#7C5D0E;font-weight:700}
.ev-facts{display:flex;flex-wrap:wrap;gap:.35rem .95rem}
.ev-fact{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--ink)}
.ev-fact svg{width:15px;height:15px;color:var(--green);flex-shrink:0}
.ev-note{color:var(--muted);font-size:.86rem;line-height:1.5}
.ev-note strong{color:var(--ink);font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;margin-right:.3rem}
.ev-note-diet{background:rgba(var(--red-rgb),.06);border-radius:9px;padding:.55rem .75rem}
.ev-note-said{border-left:2px solid var(--line);padding-left:.75rem;font-style:italic}
.ev-note-staff{background:rgba(var(--gold-rgb),.12);border-radius:9px;padding:.5rem .7rem}
/* Contact sits with the facts now, not buried under the message: half the time
   the first thing you want to do is ring them. */
.ev-contact{display:flex;align-items:center;gap:.3rem .9rem;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}
.ev-contact a{position:relative;color:var(--green-dark);font-weight:600;padding-left:1.15rem}
.ev-contact a::before{content:'';position:absolute;left:0;top:50%;width:13px;height:13px;margin-top:-6.5px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat;opacity:.75}
.ev-contact a[href^='mailto']{--ico:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4.5' width='19' height='15' rx='2'/%3E%3Cpath d='m3 6 9 6.5L21 6'/%3E%3C/svg%3E")}
.ev-contact a[href^='tel']{--ico:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.8a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.8 2.1z'/%3E%3C/svg%3E")}
.ev-contact a:hover{color:var(--green);text-decoration:underline}
.ev-heard{font-style:italic}
.ev-lastreply{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.7rem;color:var(--muted)}
.ev-card-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.15rem;min-height:34px;align-items:center}
.ev-card-actions .btn-primary{box-shadow:0 6px 14px -10px rgba(var(--green-rgb),.9)}
.ev-card-actions .btn-primary:hover{box-shadow:0 9px 18px -10px rgba(var(--green-rgb),.9)}
.chip-menu{background:var(--green-wash);color:var(--green-dark)}
.ev-status{text-transform:capitalize}
.ev-status-new{background:rgba(var(--gold-rgb),.18);color:#7C5D0E}
.ev-status-quoted{background:rgba(91,124,153,.16);color:#3D5B73}
.ev-status-confirmed{background:var(--green-wash);color:var(--green-dark)}
.ev-status-done{background:#EFEFEA;color:#6A7268}

/* ---------- The pipeline, drawn. Click any step to move an enquiry there. ---------- */
.ev-steps{display:flex;align-items:center;gap:0;margin:-.15rem 0 0;flex-wrap:wrap}
.ev-step{position:relative;display:inline-flex;align-items:center;gap:.4rem;min-height:34px;background:none;border:none;padding:.5rem .75rem .5rem .55rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;color:#B4B9B0;cursor:pointer;transition:color .2s}
.ev-step + .ev-step::before{content:'';position:absolute;left:-2px;width:12px;height:1.5px;background:var(--line);transition:background .25s}
.ev-step-dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--line);background:var(--surface);flex-shrink:0;transition:background .25s,border-color .25s,transform .25s var(--ease),box-shadow .25s}
.ev-step:hover{color:var(--green-dark)}
.ev-step:hover .ev-step-dot{border-color:var(--green);transform:scale(1.18)}
.ev-step.is-past{color:var(--muted)}
.ev-step.is-past .ev-step-dot{background:var(--green);border-color:var(--green)}
.ev-step.is-past + .ev-step::before,.ev-step.is-now + .ev-step::before{background:rgba(var(--green-rgb),.35)}
.ev-step.is-now{color:var(--green-dark);font-weight:700}
.ev-step.is-now .ev-step-dot{background:var(--green);border-color:var(--green);box-shadow:0 0 0 4px rgba(var(--green-rgb),.16);transform:scale(1.1)}
.ev-step:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:8px}
@media (max-width:430px){.ev-step{padding:.5rem .5rem .5rem .4rem;font-size:.66rem}.ev-step + .ev-step::before{width:8px}}

/* deposits */
.chip-deposit{background:rgba(91,124,153,.16);color:#3D5B73}
.chip-deposit-paid{display:inline-flex;align-items:center;background:var(--green);color:#fff}
.ev-deposit{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line)}
.ev-deposit-head{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.7rem}
.ev-deposit-head strong{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;color:var(--ink)}
.ev-deposit-hint{font-size:.76rem;color:var(--muted);line-height:1.45;transition:color .2s}
.ev-deposit-hint.is-warn{color:var(--red-dark);font-weight:600}
.ev-deposit-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.ev-deposit-quick{display:flex;gap:.3rem;flex-wrap:wrap}
.ev-deposit-quick button{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.45rem .7rem;font-family:var(--font-cond);letter-spacing:.05em;font-size:.72rem;font-weight:700;color:var(--muted);cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease)}
.ev-deposit-quick button:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}
.ev-deposit-quick button.active{background:var(--green);border-color:var(--green);color:#fff}
.ev-deposit-state{margin-top:.6rem;font-size:.8rem;color:var(--muted)}
.ev-deposit-state.is-paid{color:var(--green-dark);font-weight:600}
.ev-deposit-state a{color:var(--green);font-weight:600;text-decoration:underline}

/* small square icon button, for row actions where a word would be noise */
.icon-btn-sm{width:36px;height:36px;border-radius:10px}
.icon-btn-sm svg{width:17px;height:17px}
.icon-btn.is-on{background:var(--green);border-color:var(--green);color:#fff}
.icon-btn.is-on:hover{background:var(--green-dark);border-color:var(--green-dark);color:#fff}
.icon-btn.is-on svg{transform:rotate(45deg);transition:transform .35s var(--ease)}
/* the small icon buttons that sit in a row of pill buttons need the same height */
.ev-card-actions .icon-btn-sm{width:34px;height:34px;border-radius:999px}
.ev-card-actions .icon-btn-sm:hover{background:var(--green-wash)}
/* Gold is the menu-and-PDF colour in here: green stays the primary action, red stays
   destructive, so anything to do with the printed menu reads as its own thing. */
.ev-gold-btn{display:inline-flex;align-items:center;gap:.4rem;background:var(--gold);border:1px solid var(--gold);color:#231a06;font-weight:600;
  box-shadow:0 6px 14px -10px rgba(var(--gold-rgb),.95)}
.ev-gold-btn:hover{background:#D8A73A;border-color:#D8A73A;color:#231a06;box-shadow:0 9px 18px -10px rgba(var(--gold-rgb),.95)}
.ev-gold-btn svg{width:15px;height:15px;flex-shrink:0}
/* pushed to its own end of the row so it does not read as one more ghost button */
.ev-card-actions .ev-print{margin-left:auto}
@media (max-width:520px){.ev-card-actions .ev-print{margin-left:0;width:100%;justify-content:center}}
.icon-btn.is-busy{color:transparent;pointer-events:none;position:relative}
.icon-btn.is-busy::before{content:'';position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;border:2px solid rgba(var(--green-rgb),.3);border-top-color:var(--green);animation:spin .6s linear infinite}
.icon-btn:active{transform:translateY(0) scale(.94)}

/* hover feel, applied once rather than per component */
.btn-ghost:hover{background:var(--green-wash)}
.btn-ghost.danger:hover{background:var(--red)}
.btn-sm{transition:transform .2s var(--ease),box-shadow .2s,background .2s,border-color .2s,color .2s}
.admin-tab:hover:not(.active){background:var(--green-wash)}
.ev-filter:active,.ev-template:active,.admin-tab:active{transform:scale(.97)}

/* two-step confirm, in place of a browser dialog */
.confirm-inline{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s var(--ease)}
.confirm-inline.in{opacity:1;transform:none}
.confirm-inline span{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.76rem;font-weight:700;color:var(--red-dark)}
.confirm-inline .btn{width:auto}

/* ---------- Backoffice: reply + quote editor ---------- */
.ev-reply{margin-top:.5rem}
.ev-reply[hidden]{display:none}
.ev-reply-inner{background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;animation:replyIn .3s var(--ease)}
@keyframes replyIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ev-reply-inner .form-field{margin-bottom:.9rem}
.ev-history{margin-bottom:1rem;border:1px solid var(--line);border-radius:11px;background:var(--surface);overflow:hidden}
.ev-history summary{cursor:pointer;padding:.6rem .8rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;font-weight:700;color:var(--muted)}
.ev-history summary::marker{color:var(--green)}
.ev-history[open] summary{border-bottom:1px solid var(--line)}
.ev-history-row{padding:.7rem .8rem;border-bottom:1px solid var(--line)}
.ev-history-row:last-child{border-bottom:none}
.ev-history-row strong{display:block;font-size:.88rem;color:var(--ink)}
.ev-history-row span{font-size:.72rem;color:var(--muted)}
.ev-history-row p{margin-top:.35rem;font-size:.8rem;color:var(--muted);white-space:pre-wrap;line-height:1.5;max-height:5.2em;overflow:hidden}
.ev-templates{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.ev-template{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:.62rem .85rem;min-height:36px;display:inline-flex;align-items:center;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:700;color:var(--muted);cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease)}
.ev-template:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}
.ev-template.active{background:var(--green);border-color:var(--green);color:#fff}
.ev-quote{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-top:.4rem}
.ev-quote[hidden]{display:none}
.ev-quote-lines{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}
.ev-quote-line{display:flex;align-items:center;gap:.5rem;animation:replyIn .22s var(--ease)}
.ev-quote-line .ev-line-label{flex:1 1 auto}
.ev-quote-line .ev-line-amount{flex:0 0 110px}
.ev-quote-add{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.ev-quote-hint{font-size:.76rem;color:var(--muted)}
.ev-quote-total{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.ev-quote-total span{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;font-weight:700;color:var(--muted)}
.ev-quote-total strong{font-family:var(--font-cond);font-size:1.5rem;font-weight:700;color:var(--green-dark);line-height:1}
.ev-quote-toggle{margin:.2rem 0 .6rem}
.ev-reply-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.ev-reply-actions .btn{width:auto}
.ev-reply-msg{font-size:.85rem;color:var(--muted)}
.ev-reply-msg.is-ok{color:var(--green)}
.ev-reply-msg.is-error{color:var(--red)}

/* ---------- Backoffice: the menu composer ---------- */
/* The menu attachment is a headline feature, not a footnote: it gets a panel and a
   switch rather than one more checkbox in a column of checkboxes. */
.ev-menu-cta{display:flex;align-items:center;gap:.9rem;margin-top:.6rem;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:13px;background:var(--surface);transition:border-color .22s,background .22s,box-shadow .22s}
.ev-menu-cta.is-on{border-color:var(--green);background:var(--green-wash);box-shadow:0 0 0 3px rgba(var(--green-rgb),.10)}
.ev-menu-cta-ico{flex-shrink:0;width:38px;height:38px;border-radius:11px;background:var(--green-wash);color:var(--green);display:grid;place-items:center;transition:background .22s,color .22s}
.ev-menu-cta.is-on .ev-menu-cta-ico{background:var(--green);color:#fff}
.ev-menu-cta-ico svg{width:19px;height:19px}
.ev-menu-cta-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.ev-menu-cta-text strong{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.04em;font-size:.92rem;color:var(--ink)}
.ev-menu-cta-text span{font-size:.8rem;color:var(--muted);line-height:1.4}
.switch{flex-shrink:0;cursor:pointer;display:inline-flex}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-track{display:block;width:46px;height:26px;border-radius:999px;background:var(--line);transition:background .22s;position:relative}
.switch-knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(28,36,32,.3);transition:transform .24s var(--ease)}
.switch input:checked ~ .switch-track{background:var(--green)}
.switch input:checked ~ .switch-track .switch-knob{transform:translateX(20px)}
.switch input:focus-visible ~ .switch-track{box-shadow:0 0 0 3px rgba(var(--green-rgb),.25)}
@media (max-width:480px){.ev-menu-cta{gap:.7rem;padding:.75rem .8rem}.ev-menu-cta-text strong{font-size:.85rem}}

/* Settings: one collapsible block per set menu */
.set-menu-block{border:1px solid var(--line);border-radius:13px;background:var(--surface);margin-bottom:.6rem;overflow:hidden}
.set-menu-block[open]{border-color:rgba(var(--green-rgb),.4)}
.set-menu-block summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;transition:background .18s}
.set-menu-block summary::-webkit-details-marker{display:none}
.set-menu-block summary:hover{background:var(--green-wash)}
.set-menu-block summary::after{content:'';margin-left:auto;width:8px;height:8px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(45deg) translateY(-2px);transition:transform .28s var(--ease)}
.set-menu-block[open] summary::after{transform:rotate(225deg) translateY(1px)}
.smb-num{font-family:var(--font-cond);font-weight:700;font-size:.74rem;letter-spacing:.1em;color:var(--gold)}
.smb-name{font-family:var(--font-display);font-size:1.05rem;color:var(--green-dark)}
.smb-count{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;font-weight:700;color:var(--muted);background:var(--surface-2);border-radius:6px;padding:.2rem .45rem}
.smb-body{padding:0 1rem 1rem;border-top:1px solid var(--line)}
.smb-body .settings-menu-row{margin-top:1rem}

.ev-new{margin-bottom:1rem}
.ev-new[hidden]{display:none}
.chip-source{background:transparent;border:1px dashed var(--line);color:var(--muted);font-style:italic;text-transform:none;letter-spacing:.02em}
.ev-toolbar #evAddBtn{width:auto;flex-shrink:0}
.ev-menu{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;margin-top:.4rem;animation:replyIn .3s var(--ease)}
.ev-menu[hidden]{display:none}
.ev-menu-presets{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.ev-menu-presets button{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:.45rem .8rem;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.05em;font-size:.72rem;font-weight:700;color:var(--muted);cursor:pointer;transition:border-color .18s,color .18s,background .18s,transform .18s var(--ease)}
.ev-menu-presets button:hover{border-color:var(--green);color:var(--green-dark);transform:translateY(-1px)}
.ev-menu-presets button.active{background:var(--green);border-color:var(--green);color:#fff}
.ev-courses{display:grid;grid-template-columns:1fr 1fr;gap:.7rem .9rem;margin-top:.2rem}
.ev-course{display:flex;flex-direction:column;gap:.25rem}
.ev-course label{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.09em;font-size:.66rem;font-weight:700;color:var(--gold-dark,#7C5D0E)}
.ev-course textarea{width:100%;min-height:52px;padding:.5rem .65rem;border:1.5px solid var(--line);border-radius:9px;background:var(--surface);font-family:var(--font-body);font-size:.85rem;line-height:1.45;color:var(--ink);resize:vertical;transition:border-color .18s,box-shadow .18s}
.ev-course textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.12)}
.ev-course textarea::placeholder{color:#B4B9B0}
.ev-menu-foot{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.ev-menu-foot .btn{width:auto}
.ev-menu-count{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;font-weight:700;color:var(--muted)}
@media (max-width:620px){.ev-courses{grid-template-columns:1fr}.ev-menu{padding:.9rem}}

/* ---------- Backoffice: empty states ---------- */
.admin-empty{text-align:center;background:var(--surface);border:1px dashed var(--line);border-radius:16px;padding:2.4rem 1.4rem}
.admin-empty-ico{display:grid;place-items:center;width:54px;height:54px;margin:0 auto .9rem;border-radius:16px;background:var(--green-wash);color:var(--green)}
.admin-empty-ico svg{width:26px;height:26px}
.admin-empty strong{display:block;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.04em;font-size:1.05rem;color:var(--green-dark)}
.admin-empty p{margin:.4rem auto 0;max-width:38ch;font-size:.88rem;color:var(--muted);line-height:1.55}

/* ---------- Toasts ---------- */
.toast-stack{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column-reverse;gap:.5rem;width:min(30rem,calc(100vw - 2rem));pointer-events:none}
.toast{display:flex;align-items:center;gap:.7rem;background:var(--ink);color:#fff;border-radius:13px;padding:.75rem .8rem .75rem 1rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font-size:.9rem;line-height:1.4;opacity:0;transform:translateY(14px) scale(.97);transition:opacity .26s var(--ease),transform .26s var(--ease);pointer-events:auto}
.toast.in{opacity:1;transform:none}
.toast span{flex:1;min-width:0}
.toast-good{background:var(--green-dark)}
.toast-error{background:var(--red-dark)}
.toast-action{flex-shrink:0;background:rgba(255,255,255,.16);border:none;border-radius:8px;padding:.35rem .7rem;color:#fff;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;font-weight:700;cursor:pointer;transition:background .18s}
.toast-action:hover{background:rgba(255,255,255,.28)}
.toast-close{flex-shrink:0;background:none;border:none;color:rgba(255,255,255,.6);font-size:1.15rem;line-height:1;cursor:pointer;padding:0 .25rem;transition:color .18s}
.toast-close:hover{color:#fff}
@media (prefers-reduced-motion:reduce){.toast,.stat,.ev-card,.ev-reply-inner{animation:none;transition:none}}

/* ---------- Busy buttons ---------- */
.btn.is-busy{color:transparent!important;pointer-events:none;position:relative}
.btn.is-busy::before{content:'';position:absolute;left:50%;top:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .6s linear infinite;z-index:2}
.btn-ghost.is-busy::before{border-color:rgba(var(--green-rgb),.3);border-top-color:var(--green)}

/* ---------- Backoffice responsive ---------- */
@media (max-width:820px){
  .ev-toolbar{align-items:stretch}
  .ev-tools{width:100%}
  .ev-search{flex:1}
  .ev-search input{width:100%}
}
@media (max-width:620px){
  .admin-header{padding:.85rem 1.1rem}
  .admin-header img{height:28px}
  .admin-greeting{font-size:.8rem}
  .admin-today{font-size:.68rem}
  .admin-panel-head{gap:.6rem}
  .admin-tabs{flex:1}
  .admin-tab{flex:1;justify-content:center;padding:.5rem .5rem}
  .ev-filters{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .admin-head-actions{margin-left:auto}
  .ev-filter{padding:.7rem .4rem;min-height:42px;text-align:center}
  .ev-card{gap:.8rem;padding:1rem 1rem 1.3rem}
  .ev-card-date{flex-basis:52px;padding:.5rem .25rem}
  .ev-card-date .ev-d{font-size:1.45rem}
  .ev-countdown{margin-left:0;flex-basis:100%}
  .ev-card-actions .btn{flex:1 1 auto;justify-content:center}
  .ev-card-actions .btn-ghost.danger{flex:0 0 auto}
  .ev-quote-line{flex-wrap:wrap}
  .ev-quote-line .ev-line-amount{flex:1 1 100px}
  .ev-cal-day{height:40px;font-size:.78rem}
  .ev-reply-inner{padding:.9rem}
  .toast-stack{bottom:.7rem}
}
@media (max-width:400px){
  .ev-cal-grid{gap:2px}
  .ev-cal-day{height:36px;font-size:.74rem;border-radius:7px}
  .ev-cal-dow{font-size:.6rem}
  .ev-cal-today{padding:.35rem .5rem;font-size:.66rem}
  .ev-card{flex-direction:column;gap:.7rem}
  .ev-card-date{flex-direction:row;align-items:baseline;gap:.4rem;width:100%;padding:.4rem .7rem}
  .ev-card-date .ev-y{margin-top:0}
  .admin-empty{padding:1.8rem 1rem}
}

/* ---------- Flipbook menu reader ---------- */
.flipbook{position:relative;max-width:860px;margin:0 auto;user-select:none;outline:none}
.flip-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.9rem}
.flip-head h3{font-size:1.2rem}
.flip-viewport{position:relative}
.flip-stage{position:relative;width:100%;aspect-ratio:1.414/1;background:var(--surface-2);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;perspective:2200px}
.flip-stage.portrait{aspect-ratio:.707/1}
.flip-page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff}
.flip-page img{width:100%;height:100%;object-fit:contain;background:#fff}
.flip-turn{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;will-change:transform;z-index:5;backface-visibility:hidden}
.flip-turn img{width:100%;height:100%;object-fit:contain;background:#fff;box-shadow:0 0 30px rgba(0,0,0,.25)}
.flip-turn .flip-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(0,0,0,0) 40%);opacity:0;transition:opacity .1s}
.flip-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);border:1px solid var(--line);box-shadow:var(--shadow-sm);display:grid;place-items:center;cursor:pointer;z-index:10;transition:transform .2s,background .2s;color:var(--ink)}
.flip-nav:hover{transform:translateY(-50%) scale(1.08);background:#fff}
.flip-nav.prev{left:.7rem}.flip-nav.next{right:.7rem}
.flip-nav[disabled]{opacity:.3;pointer-events:none}
.flip-nav svg{width:22px;height:22px}
.flip-toolbar{display:flex;align-items:center;justify-content:center;gap:1.2rem;margin-top:1rem}
.flip-counter{font-family:var(--font-cond);font-weight:700;letter-spacing:.08em;color:var(--muted);font-size:.95rem;min-width:64px;text-align:center}
.flip-loading{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-family:var(--font-cond);letter-spacing:.1em;text-transform:uppercase;font-size:.85rem}
@media (max-width:600px){.flip-nav{width:40px;height:40px}.flip-nav.prev{left:.4rem}.flip-nav.next{right:.4rem}}

/* ---------- Responsive polish ---------- */

/* ---------- Responsive polish ---------- */
@media (max-width:560px){
  :root{--section:clamp(3rem,9vw,4.4rem)}
  .btn{padding:.85rem 1.5rem}
  /* min-height stays on --hero-h, which JS measures against the real space left
     under the announcement bar and the nav. A flat 90vh here put the slide
     controls and the scroll cue under the fold on every phone. */
  .hero-slide{align-items:center}
  .hero .btn{flex:1;justify-content:center;min-width:0}
  /* the buttons go full width here, so a narrow badge left-aligned underneath
     them read as left over rather than placed. Centred, and pulled up to sit
     with the buttons it belongs to. */
  .hero-badges{justify-content:center;margin-top:1.1rem}
  .hero-actions{margin-top:1.6rem}
  .hero h1{margin:.85rem 0 .9rem}
}
/* Below ~370px two side-by-side buttons squeeze their own text; stack them. */
@media (max-width:370px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%;flex:none}
  /* A nowrap button with a long label is wider than a 320px panel, and the panel
     clips on overflow, so the label loses its last word. Let it wrap down here. */
  .truck-feature,.crosspromo{padding:1.5rem 1.2rem 2.3rem}
  .truck-feature .btn,.crosspromo .btn,.event-card .btn{white-space:normal;padding-inline:1.2rem;justify-content:center;text-align:center;width:100%}
  .hero-badges{gap:.5rem}
  .hero-badge{font-size:.78rem;padding:.4rem .8rem}
  .card{padding:1.5rem}
  .crosspromo,.truck-feature{flex-direction:column;text-align:left}
  .crosspromo .btn{width:100%;justify-content:center}
  .feature-num{font-size:2.2rem}
}

/* ==========================================================================
   GIFT VOUCHERS
   The card is one element tilted with CSS custom properties so the pointer
   handler in js/site.js never touches layout, only --rx / --ry.
   ========================================================================== */
.vc-hero{position:relative;overflow:hidden;background:var(--green-dark);color:#fff;padding-block:clamp(2.6rem,7vw,5rem)}
.vc-hero::before{content:'';position:absolute;inset:0;background:
  radial-gradient(120% 90% at 12% 0%,rgba(90,132,104,.55),transparent 62%),
  radial-gradient(90% 80% at 100% 100%,rgba(198,152,47,.22),transparent 60%);pointer-events:none}
.vc-hero-glow{position:absolute;left:50%;top:-28%;width:min(760px,120%);aspect-ratio:1;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(198,152,47,.20),transparent 62%);pointer-events:none;animation:vcGlow 9s ease-in-out infinite}
@keyframes vcGlow{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}
.vc-hero-inner{position:relative;z-index:1;display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.vc-hero-copy h1{color:#fff;font-size:clamp(2.15rem,4.6vw,3.7rem);line-height:1.03;margin:.7rem 0 1rem}
.vc-hero-copy h1 .accent{color:var(--gold)}
.vc-hero-copy .lead{color:rgba(255,255,255,.84);max-width:46ch}
.vc-trust{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:2rem;padding:0}
.vc-trust li{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.82rem;color:rgba(255,255,255,.9);background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.42rem .85rem}
.vc-trust svg{width:15px;height:15px;flex-shrink:0;color:var(--gold)}

/* ---- the card ---- */
.vc-hero-stage{perspective:1100px;display:flex;flex-direction:column;align-items:center;gap:1rem}
.vc-card{--rx:0deg;--ry:0deg;width:min(455px,100%);aspect-ratio:1.62;transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease);animation:vcFloat 7s ease-in-out infinite}
.vc-card.is-tilting{transition:transform .12s linear;animation:none}
@keyframes vcFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
.vc-card-face{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  justify-content:space-between;padding:clamp(1.1rem,2.6vw,1.5rem);
  background:linear-gradient(145deg,#2b4d3a 0%,#16291d 55%,#0e1c14 100%);
  border:1px solid rgba(198,152,47,.75);
  box-shadow:0 40px 70px -28px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.25),0 2px 0 rgba(255,255,255,.12) inset}
.vc-card-face::before{content:'';position:absolute;inset:9px;border:1px solid rgba(198,152,47,.4);border-radius:13px;pointer-events:none}
.vc-shine{position:absolute;top:-60%;left:-40%;width:45%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);transform:rotate(18deg);animation:vcShine 5.5s ease-in-out infinite}
@keyframes vcShine{0%,72%{left:-45%}100%{left:130%}}
.vc-card-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.vc-card-logo{width:clamp(112px,26%,150px);height:auto}
.vc-card-kind{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;
  color:#1C2420;background:var(--gold);border-radius:999px;padding:.22rem .6rem}
.vc-card-mid{position:relative;display:flex;flex-direction:column;gap:.1rem}
.vc-card-label{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.3em;font-size:.76rem;color:rgba(255,255,255,.72)}
.vc-card-amount{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,7vw,3.5rem);line-height:1;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.35)}
.vc-card-amount.is-swap{animation:vcSwap .42s var(--ease)}
@keyframes vcSwap{0%{opacity:0;transform:translateY(10px) scale(.94)}100%{opacity:1;transform:none}}
.vc-card-bot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;color:rgba(255,255,255,.66)}
.vc-card-dots{display:flex;gap:5px}
.vc-card-dots i{width:6px;height:6px;border-radius:50%;background:rgba(198,152,47,.75)}
.vc-card-note{font-size:.85rem;color:rgba(255,255,255,.6);text-align:center;max-width:34ch}

/* ---- amount picker ---- */
.vc-sub{color:var(--muted);max-width:62ch;margin-inline:auto}
.vc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.vc-amt{position:relative;min-width:0;text-align:left;cursor:pointer;font:inherit;display:flex;flex-direction:column;gap:.3rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1.25rem 1.3rem;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .2s}
.vc-amt:hover{transform:translateY(-4px);box-shadow:0 18px 34px -22px rgba(28,36,32,.45);border-color:rgba(var(--green-rgb),.4)}
.vc-amt:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.vc-amt.is-on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(var(--gold-rgb),.3),0 18px 34px -24px rgba(28,36,32,.4)}
.vc-amt-fig{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3.4vw,2.5rem);line-height:1;color:var(--green)}
.vc-amt.is-on .vc-amt-fig{color:var(--gold)}
.vc-amt-title{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.11em;font-size:.95rem;color:var(--ink)}
.vc-amt-body{font-size:.87rem;line-height:1.55;color:var(--muted)}
.vc-amt[data-tag]::after{content:attr(data-tag);position:absolute;top:-10px;right:14px;background:var(--red);color:#fff;
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;padding:.2rem .6rem;border-radius:999px}
.vc-fineprint{margin-top:.9rem;font-size:.84rem;color:var(--muted);max-width:60ch;margin-inline:auto}

/* ---- steps ---- */
.vc-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2.2rem);counter-reset:vc}
.vc-steps li{position:relative;min-width:0;padding-top:.4rem}
.vc-steps li:not(:last-child)::after{content:'';position:absolute;top:26px;left:calc(56px + .6rem);right:calc(-1 * clamp(1.2rem,3vw,2.2rem) + .4rem);
  height:2px;background:repeating-linear-gradient(90deg,rgba(198,152,47,.55) 0 7px,transparent 7px 14px)}
.vc-step-num{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(198,152,47,.14);
  border:1px solid rgba(198,152,47,.45);color:var(--gold);font-family:var(--font-display);font-weight:700;font-size:1.6rem;margin-bottom:1rem}
.vc-how h3{color:#fff;font-size:1.25rem;margin-bottom:.35rem}
.vc-how p{color:rgba(255,255,255,.75);font-size:.95rem;line-height:1.65}

/* ---- occasions ---- */
.vc-occ{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.vc-occ-item{min-width:0;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:1.25rem 1.3rem;transition:transform .26s var(--ease),box-shadow .26s var(--ease)}
.vc-occ-item:hover{transform:translateY(-3px);box-shadow:0 16px 30px -22px rgba(28,36,32,.42)}
.vc-occ-item h3{font-size:1.12rem;margin-bottom:.3rem}
.vc-occ-item p{font-size:.9rem;color:var(--muted);line-height:1.6}

.faq-list{display:grid;gap:.7rem}

/* ---- closing band ---- */
.vc-final{background:var(--green);color:#fff;text-align:center;padding-block:clamp(3rem,7vw,5rem);position:relative;overflow:hidden}
.vc-final::before{content:'';position:absolute;inset:0;background:radial-gradient(70% 100% at 50% 0%,rgba(198,152,47,.2),transparent 65%)}
.vc-final>*{position:relative}
.vc-final-eyebrow{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.28em;font-size:.74rem;color:var(--gold)}
.vc-final h2{color:#fff;margin:.7rem 0 .5rem;max-width:20ch;margin-inline:auto}
.vc-final p{color:rgba(255,255,255,.85)}
.vc-final .btn{margin-top:1.5rem}
.vc-final-alt{margin-top:1.4rem;font-size:.9rem;color:rgba(255,255,255,.7)}
.vc-final-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---- home page teaser band ---- */
.vc-band{padding-top:0}
.vc-band-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(1.6rem,4vw,3rem);align-items:center;
  background:linear-gradient(135deg,#2C5039,#3C6A4B 60%,#47795a);border-radius:var(--radius-lg);overflow:hidden;
  padding:clamp(1.8rem,4vw,3rem);color:#fff;text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.vc-band-inner:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(28,36,32,.6)}
.vc-band-copy .chip{background:rgba(0,0,0,.26);color:#E8C46A}
.vc-band-copy h2{color:#fff;margin:.7rem 0 .5rem}
.vc-band-copy p{color:rgba(255,255,255,.8);max-width:46ch;margin-bottom:1.4rem}
.vc-band-card{perspective:900px;display:flex;justify-content:center}
.vc-card-mini{width:min(340px,100%);transform:rotate(-4deg)}
.vc-band-inner:hover .vc-card-mini{transform:rotate(-2deg) translateY(-4px)}

@media (max-width:980px){
  .vc-hero-inner{grid-template-columns:1fr;text-align:center}
  .vc-hero-copy .lead{margin-inline:auto}
  .vc-hero-copy .hero-actions,.vc-trust{justify-content:center}
  .vc-hero-stage{order:-1}
  .vc-grid{grid-template-columns:repeat(2,1fr)}
  .vc-occ{grid-template-columns:repeat(2,1fr)}
  .vc-steps{grid-template-columns:1fr;gap:1.4rem}
  .vc-steps li:not(:last-child)::after{display:none}
  .vc-step-num{width:46px;height:46px;font-size:1.3rem;margin-bottom:.7rem}
  .vc-band-inner{grid-template-columns:1fr;text-align:center}
  .vc-band-copy p{margin-inline:auto}
  .vc-band-card{order:-1}
}
@media (max-width:560px){
  .vc-grid,.vc-occ{grid-template-columns:1fr}
  .vc-card{width:min(340px,100%)}
  /* the card is the full width of the padding box on a phone, so a 42px shadow
     reach gets sliced off by the wrap padding. Shorter throw, same look. */
  .vc-card-face{box-shadow:0 20px 30px -18px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.25),0 2px 0 rgba(255,255,255,.12) inset}
  .vc-trust li{font-size:.76rem;padding:.36rem .7rem}
  .vc-amt[data-tag]::after{right:auto;left:14px}
}
@media (prefers-reduced-motion:reduce){
  .vc-card,.vc-hero-glow,.vc-shine{animation:none}
  .vc-card-amount.is-swap{animation:none}
}

/* ==========================================================================
   INSTAGRAM
   A strip, not a panel: the home already carries the truck card and the gift
   voucher card, and a third full-size block in a row was too much. Deliberately
   no photos either, they were all doing work higher up the same page.
   Not a live feed: Meta shut the Basic Display API in December 2024 and the
   Graph API replacement needs a Business account, a Meta app and a token that
   expires every 60 days. See [[owner-checklist]].
   ========================================================================== */
.ig-strip-band{padding-block:clamp(1.8rem,4vw,3rem)}
.ig-strip{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(1.2rem,3vw,2.4rem);padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.2rem,2.6vw,1.7rem);
  border-radius:var(--radius-lg);overflow:hidden;color:#fff;text-decoration:none;
  background:linear-gradient(100deg,#F58529 0%,#DD2A7B 26%,#8134AF 50%,#515BD4 72%,#DD2A7B 100%);
  background-size:250% 100%;animation:igSlide 16s ease-in-out infinite alternate;
  box-shadow:0 16px 32px -22px rgba(221,42,123,.9);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
@keyframes igSlide{to{background-position:100% 0}}
.ig-strip:hover{transform:translateY(-3px);box-shadow:0 22px 38px -22px rgba(221,42,123,1)}
/* the light that sweeps across on hover: the bit that was missing when this was flat */
.ig-sheen{position:absolute;top:-60%;left:-30%;width:34%;height:220%;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transform:rotate(16deg);transition:left .85s var(--ease)}
.ig-strip:hover .ig-sheen{left:120%}

.ig-copy{min-width:0;display:flex;flex-direction:column;gap:clamp(.9rem,2vw,1.3rem);align-items:flex-start}
.ig-head{display:flex;align-items:center;gap:.75rem;min-width:0}
.ig-glyph{flex-shrink:0;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);color:#fff}
.ig-glyph svg{width:25px;height:25px}
.ig-names{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.ig-names strong{font-family:var(--font-cond);font-weight:700;letter-spacing:.05em;font-size:1.18rem;
  line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ig-line{font-size:.9rem;color:rgba(255,255,255,.88);line-height:1.35}
.ig-go{display:inline-flex;align-items:center;gap:.45rem;background:#fff;color:#1C2420;
  font-weight:600;font-size:.94rem;padding:.62rem 1.2rem;border-radius:999px;
  box-shadow:0 8px 18px -9px rgba(0,0,0,.55);transition:transform .25s var(--ease)}
.ig-strip:hover .ig-go{transform:scale(1.05)}

.ig-tiles{display:flex;gap:.65rem;flex-shrink:0}
.ig-tile{display:block;width:clamp(78px,11.5vw,138px);aspect-ratio:1;border-radius:13px;overflow:hidden;
  box-shadow:0 10px 18px -12px rgba(0,0,0,.75);transition:transform .5s var(--ease)}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block}
.ig-tile:nth-child(1){transform:rotate(-4deg)}
.ig-tile:nth-child(2){transform:rotate(2.4deg)}
.ig-tile:nth-child(3){transform:rotate(-2.2deg)}
.ig-tile:nth-child(4){transform:rotate(3.4deg)}
.ig-strip:hover .ig-tile{transform:rotate(0) scale(1.05)}
.ig-strip:hover .ig-tile:nth-child(2){transition-delay:.05s}
.ig-strip:hover .ig-tile:nth-child(3){transition-delay:.1s}
.ig-strip:hover .ig-tile:nth-child(4){transition-delay:.15s}

@media (max-width:900px){
  .ig-strip{grid-template-columns:1fr;gap:1.1rem}
  .ig-copy{gap:1rem}
  .ig-tiles{justify-content:space-between;gap:.5rem}
  .ig-tile{width:auto;flex:1 1 0;min-width:0}
  .ig-go{align-self:stretch;justify-content:center}
}
@media (max-width:400px){
  .ig-tile:nth-child(4){display:none}
  .ig-names strong{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
  .ig-strip{animation:none}
  .ig-tile,.ig-strip:hover .ig-tile{transform:none}
  .ig-sheen{display:none}
}

/* ==========================================================================
   THE MENU, AS HTML
   Rebuilt from data/dinner.json instead of a PDF: real text, three languages,
   selectable, searchable and readable on a phone. On a wide screen the pages
   sit side by side the way the printed menu opens; below 900px each panel
   becomes its own page, because a two-up spread on a phone is unreadable.
   ========================================================================== */
.mbook{--paper:#F6F3EC;--rule:rgba(28,36,32,.22);
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:0 26px 54px -34px rgba(28,36,32,.5);margin-top:1.6rem}
.mbook:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.mbook-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.85rem clamp(.9rem,2.4vw,1.4rem);border-bottom:1px solid var(--line);background:rgba(255,255,255,.55)}
.mbook-title{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:.86rem;color:var(--green-dark)}
.mbook-tool{display:inline-flex;align-items:center;gap:.45rem;background:none;border:1px solid var(--line);
  border-radius:999px;padding:.4rem .85rem;font-family:var(--font-body);font-size:.82rem;color:var(--ink);
  cursor:pointer;transition:border-color .2s,background .2s}
.mbook-tool:hover{border-color:var(--green);background:var(--green-wash)}
.mbook-tool svg{width:15px;height:15px}

/* Every page is the same height, so the rule under the category and the rule
   above the footnote land at the same place on every page, the way they do on the
   printed A5. The height is capped to the viewport so the whole menu is on screen
   on a 13in laptop instead of running past the fold. */
.mbook-stage{position:relative;overflow:hidden;height:clamp(420px,calc(100svh - 190px),940px)}
.mbook-track{display:flex;height:100%;will-change:transform;
  transition:transform .62s cubic-bezier(.22,1,.36,1)}
/* the row has to be pinned to the page height, otherwise it sizes to content and
   height:100% on the panel resolves against an indefinite row: the footnote gets
   pushed off the bottom instead of staying on its rule */
.mb-page{flex:0 0 100%;min-width:0;height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);
  gap:clamp(1.4rem,3vw,2.6rem);padding:clamp(1rem,2vw,1.6rem) clamp(1.4rem,5.2vw,4.6rem);
  opacity:.35;transition:opacity .5s var(--ease)}
.mb-page.is-on{opacity:1}
.mb-page.is-spread{grid-template-columns:1fr 1fr}
.mb-page.is-spread .mb-panel:first-child{border-right:1px solid var(--rule);padding-right:clamp(1.2rem,2.6vw,2.2rem)}
/* A page on its own closes like a single leaf, not a double-width sheet with the
   prices stranded at the far right. Only above the spread breakpoint, though:
   below it the book shows one panel per page by design, and halving every one of
   them left each menu using 158px of the 351px a phone actually has. */
@media (min-width:900px){
  .mb-page.is-single .mb-panel{max-width:min(52ch,50%);margin-inline:auto}
}

/* .mb-panel is a <section>, and the global section{padding-block} put 115px of
   air above and below the content inside every page. Same trap the backoffice
   tab panels fell into. */
.mb-panel{min-width:0;height:100%;display:flex;flex-direction:column;padding-block:0}
.mb-cat{font-family:var(--font-display);font-weight:500;font-size:clamp(1.1rem,1.9vw,1.42rem);
  letter-spacing:.05em;color:var(--ink);text-transform:uppercase;
  padding-bottom:.7rem;border-bottom:1px solid var(--rule);margin-bottom:1.3rem}
/* On the translated menus the heading carries its English gloss. Trailing it on
   the same line let the pair wrap mid-phrase; given its own line it reads as a
   subtitle and breaks the same way at every width. */
.mb-cat-en{display:block;margin-top:.2em;font-family:var(--font-display);
  text-transform:none;letter-spacing:.02em;color:var(--muted);font-size:.62em}

.mb-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:clamp(1.3rem,2.1vh,1.85rem);flex:0 0 auto}
.mb-panel{position:relative}
.mb-panel::after{content:'';position:absolute;left:0;right:0;bottom:0;height:48px;pointer-events:none;
  z-index:1;opacity:0;transition:opacity .3s;background:linear-gradient(180deg,transparent,var(--paper))}
.mb-panel.can-scroll::after{opacity:1}

/* A little breathing room before the footnote rule on a panel that scrolls, so
   the last dish's description does not end up pressed right up against it.
   Direct child only: inside a side-labelled group the list is nested, and the
   margin would stretch the group's rule 16px past its last line. Grouped
   sections get the same room on the group itself, outside the rule. */
.mb-panel .mb-sec:last-of-type > .mb-items{margin-bottom:1rem}
.mb-panel .mb-sec:last-of-type > .mb-group:last-of-type{margin-bottom:1rem}

/* the "keep going" hint: gold, small, animated, gone for good the moment real
   scrolling starts. Sits above the fade (z-index 2 vs the fade's 1) so it is never
   dimmed by the very gradient that is announcing it. */
.mb-scroll-hint{position:absolute;left:50%;bottom:1rem;z-index:2;transform:translateX(-50%);
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--gold);color:#231a06;box-shadow:0 8px 18px -8px rgba(var(--gold-rgb),.9);
  opacity:0;pointer-events:none;transition:opacity .4s;animation:mbHintBob 1.9s ease-in-out infinite}
.mb-scroll-hint svg{width:15px;height:15px}
.mb-panel.can-scroll .mb-scroll-hint{opacity:1}
.mb-panel.has-scrolled .mb-scroll-hint{opacity:0!important}
@keyframes mbHintBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media (prefers-reduced-motion:reduce){.mb-scroll-hint{animation:none}}
.mb-item{min-width:0}
.mb-row{display:grid;grid-template-columns:1fr auto;align-items:baseline;column-gap:1.1rem;margin:0}
.mb-name{min-width:0}
.mb-n{font-family:var(--font-display);font-weight:600;font-size:clamp(1rem,1.35vw,1.12rem);
  line-height:1.25;color:var(--ink)}
.mb-n-en{font-family:var(--font-display);font-weight:400;font-size:.92em;color:#4a5a52}
.mb-tag{font-family:var(--font-body);font-size:.62rem;letter-spacing:.02em;color:var(--muted);
  vertical-align:super;margin-left:.15em;white-space:nowrap}
.mb-price{font-family:var(--font-display);font-weight:500;
  font-size:clamp(.95rem,1.25vw,1.06rem);color:var(--ink);font-variant-numeric:tabular-nums}
.mb-desc{margin:.3rem 0 0;font-size:.86rem;line-height:1.55;color:#5d6a63;max-width:52ch}
.mb-choice{margin:.35rem 0 0;font-size:.82rem;color:#5d6a63}
.mb-opts{margin:.3rem 0 0;display:flex;flex-wrap:wrap;gap:.15rem 1rem}
.mb-opt{font-size:.82rem;color:#5d6a63}
.mb-opt::before{content:'• ';color:var(--gold)}
.mb-foot{flex:0 0 auto;margin:1.1rem 0 0;padding-top:.75rem;border-top:1px solid var(--rule);
  font-size:.67rem;line-height:1.45;letter-spacing:.01em;color:var(--muted)}
/* on an open book the right-hand footnote sits against the outer edge */
.mb-page.is-spread .mb-panel:last-child .mb-foot{text-align:right}

/* --- Chinese and Japanese need their own sizes ---
   A CJK glyph fills its em box where a Latin letter leaves side bearings and a
   short x-height, so text set at one size reads noticeably heavier and runs
   longer. Japanese is the worst of the two here because the drinks descriptions
   carry long katakana strings. Nudging the body text down and the rotated group
   labels up is what keeps the same layout honest in all three languages. */
.mbook[lang="zh"] .mb-desc,
.mbook[lang="ja"] .mb-desc{font-size:.8rem;line-height:1.62}
.mbook[lang="ja"] .mb-desc{letter-spacing:-.005em}
.mbook[lang="zh"] .mb-foot,
.mbook[lang="ja"] .mb-foot{font-size:.65rem;line-height:1.5}
/* the reverse direction: vertical CJK at Latin's size looked undersized */
.mbook[lang="zh"] .mb-glabel i,
.mbook[lang="ja"] .mb-glabel i{font-size:.8rem}
/* the English name trailing a translated one is a cue for staff, not a heading:
   set smaller it keeps long pairs on a single line */
.mbook[lang="zh"] .mb-n-en,
.mbook[lang="ja"] .mb-n-en{font-size:.8em}
.mbook[lang="zh"] .mb-opt,
.mbook[lang="ja"] .mb-opt,
.mbook[lang="zh"] .mb-choice,
.mbook[lang="ja"] .mb-choice{font-size:.78rem}

/* --- drinks list: several prices per line, side-labelled groups, vintages ---
   The wine pages price a bottle three ways and label the columns with icons
   instead of words. Each row is its own grid, so the price cells are given a
   fixed width: that is what makes column two of one line sit under column two
   of the line above it. */
.mb-prices{display:flex;align-items:baseline;gap:.4rem}
/* 2.3em fits the widest price on this list ("18.5") in tabular figures; wider
   only steals room from the wine names and pushes their region onto a new line */
.mb-sec.has-cols .mb-prices .mb-price{width:2.05em;text-align:right;flex:0 0 auto}
.mb-sec.has-cols .mb-row{column-gap:.65rem}
/* the printed page sets these names a little smaller than the food menus', which
   is what lets a name and its region share one line */
.mb-sec.has-cols .mb-n{font-size:clamp(.92rem,1.12vw,1rem)}
/* measured off the printed page: the region is set at the same size as the
   description, about .72 of the name, which also keeps it on the name's line */
.mb-region{font-family:var(--font-display);font-weight:400;font-size:.68em;color:#6b7a72;white-space:nowrap}
/* the vintage sits in its own column so the wine names stay flush with each other */
.mb-sec.has-year .mb-row{grid-template-columns:auto 1fr auto}
.mb-year{font-family:var(--font-display);font-size:.78rem;color:var(--muted);
  font-variant-numeric:tabular-nums;width:2.6em;flex:0 0 auto}
.mb-colicons{margin-bottom:.9rem}
.mb-colicons .mb-prices{align-items:flex-end}
/* Sizes taken off the printed menu, where the glasses are 163 units tall and the
   bottle 265: the bottle stands 1.63x the glasses and they sit on a shared
   baseline. Driven by one custom property so both scale together with the page. */
.mb-sec.has-cols{--mb-ico:clamp(17px,1.75vw,25px)}
.mb-ico{width:auto;height:var(--mb-ico);color:var(--ink);display:inline-block;vertical-align:bottom}
.mb-ico-bottle{height:calc(var(--mb-ico) * 1.63)}
/* the second tone inside each icon is the page showing through, not white */
.mb-ico-cut{fill:var(--paper)}
.mb-ico-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* A group reads as a run of lines sharing one label down the left edge. On the
   printed page the rule sits to the RIGHT of the rotated word, runs exactly the
   height of the lines it covers, and the label is centred on it. The note below
   is outside the rule, so the label spans row 1 only. */
.mb-group{min-width:0}
.mb-group+.mb-group{margin-top:1.6rem}
.mb-group.is-side{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:stretch}
.mb-glabel{grid-row:1;display:flex;align-items:center;justify-content:center;
  border-right:1px solid var(--rule);padding-right:.5rem}
/* rotated so it reads bottom-to-top, exactly as it is printed */
.mb-glabel i{writing-mode:vertical-rl;transform:rotate(180deg);font-style:normal;
  font-family:var(--font-display);font-size:.72rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
/* Chinese and Japanese already set upright and top-to-bottom in vertical writing
   mode; the 180deg turn that makes Latin read upwards leaves them upside down */
.mbook[lang="zh"] .mb-glabel i,
.mbook[lang="ja"] .mb-glabel i{transform:none;letter-spacing:.06em}
.mb-gbody{grid-row:1;grid-column:2;min-width:0}
.mb-group.is-side .mb-gnote{grid-row:2;grid-column:2}
.mb-ghead{margin:0 0 .9rem;padding-top:.75rem;border-top:1px solid var(--rule);
  text-align:right;font-family:var(--font-display);font-size:.8rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
/* :first-of-type, not :first-child — the section heading sits above the groups,
   so the first group is never the first child and the rule doubled up */
.mb-group.is-head:first-of-type .mb-ghead{padding-top:0;border-top:0}
.mb-gnote{margin:.5rem 0 0;text-align:right;font-size:.68rem;color:var(--muted)}
/* the label column would squeeze the names on a narrow phone */
@media (max-width:520px){
  .mb-group.is-side{grid-template-columns:1fr;row-gap:.5rem}
  .mb-glabel{grid-row:auto;border-right:0;border-bottom:1px solid var(--rule);
    padding:0 0 .4rem;justify-content:flex-start}
  .mb-glabel i{writing-mode:horizontal-tb;transform:none}
  .mb-gbody{grid-row:auto;grid-column:1}
  .mb-group.is-side .mb-gnote{grid-row:auto;grid-column:1}
  .mb-sec.has-cols .mb-prices .mb-price{width:2.4em}
  .mb-prices{gap:.35rem}
}

/* cover */
/* the content now lives one level deeper, inside .mb-scroll (see the note by
   .mb-scroll-hint), so the centring has to target that, not the outer panel */
.mb-cover .mb-scroll{align-items:center;justify-content:center;text-align:center;gap:1.6rem}
.mb-since{font-family:var(--font-display);letter-spacing:.24em;font-size:.86rem;color:var(--muted)}
.mb-logo{width:min(300px,62%);height:auto;margin:auto 0}
.mb-memory{font-family:var(--font-display);font-size:.95rem;line-height:1.8;color:#4a5a52;max-width:46ch}

/* Playfair has no CJK glyphs, so the local scripts get their own stack rather
   than whatever the browser happens to fall back to. */
.mbook[lang="zh"] .mb-n,.mbook[lang="zh"] .mb-cat,.mbook[lang="zh"] .mb-memory{font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",var(--font-body)}
.mbook[lang="ja"] .mb-n,.mbook[lang="ja"] .mb-cat,.mbook[lang="ja"] .mb-memory{font-family:"Hiragino Sans","Yu Gothic","Noto Sans JP",var(--font-body)}
.mbook[lang="zh"] .mb-desc,.mbook[lang="ja"] .mb-desc{max-width:44ch;line-height:1.75}

.mbook-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 8px 18px -12px rgba(28,36,32,.6);
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);
  transition:background .2s,color .2s,opacity .2s,transform .2s}
.mbook-nav.prev{left:clamp(.5rem,1.4vw,1rem)}
.mbook-nav.next{right:clamp(.5rem,1.4vw,1rem)}
.mbook-nav svg{width:19px;height:19px}
.mbook-nav:hover:not(:disabled){background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-50%) scale(1.07)}
.mbook-nav:disabled{opacity:0;pointer-events:none}

.mbook-foot{display:flex;align-items:center;justify-content:center;gap:.9rem;
  padding:.8rem 1rem;border-top:1px solid var(--line);background:rgba(255,255,255,.55)}
.mbook-dots{display:flex;gap:.45rem}
.mb-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(28,36,32,.22);
  cursor:pointer;transition:background .25s,transform .25s,width .25s}
.mb-dot.is-on{background:var(--green);width:22px;border-radius:999px}

/* full screen: the browser paints its own black behind the element, so the paper
   has to be repainted and the page given room to breathe */
.mbook.is-full{border-radius:0;border:0;margin:0;height:100%;display:flex;flex-direction:column;background:var(--paper)}
.mbook.is-full .mbook-stage{flex:1;display:flex;align-items:stretch}
.mbook.is-full .mbook-track{flex:1}
.mbook.is-full .mb-page{padding:clamp(1.6rem,4vh,3.4rem) clamp(1.6rem,5vw,5rem);align-content:start}
.mbook.is-full .mb-items{gap:clamp(1rem,2.2vh,1.6rem)}

@media (max-width:900px){
  .mb-page{padding:clamp(1.1rem,4vw,1.8rem)}
  /* single column here, so an arrow can only sit on top of the dish names.
     Swipe and the dots do the job on touch. */
  .mbook-nav{display:none}
  .mb-desc{max-width:none}
  .mbook-foot{gap:.7rem}
}
@media (max-width:480px){
  .mbook-bar{padding:.7rem .9rem}
  .mbook-tool span{display:none}
  .mbook-tool{padding:.45rem .55rem}
  .mb-cat{margin-bottom:1rem}
  .mb-items{gap:1rem}
}
@media (prefers-reduced-motion:reduce){
  .mbook-track{transition:none}
  .mb-page{transition:none;opacity:1}
}

/* ---- lunch: the bold condensed trifold, a different animal from the dinner A5 --- */
.mbook.style-condensed{--paper:#F4F2ED}
.style-condensed .mb-cat{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  font-family:var(--font-cond);font-weight:700;letter-spacing:.01em;
  font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;
  border-bottom:2px solid var(--ink);padding-bottom:.5rem;margin-bottom:1rem}
.style-condensed .mb-cat-en{font-family:var(--font-cond);font-weight:700;color:var(--ink);font-size:.86em;letter-spacing:.02em}
.style-condensed .mb-n{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(.98rem,1.3vw,1.08rem)}
.style-condensed .mb-n-en{font-family:var(--font-cond);font-weight:500;text-transform:uppercase;
  letter-spacing:.05em;color:#6b7772;font-size:.9em}
.style-condensed .mb-price{font-family:var(--font-cond);font-weight:700;font-size:clamp(1.05rem,1.5vw,1.2rem)}
.style-condensed .mb-desc{font-size:.82rem;text-transform:none;color:#5d6a63}
.style-condensed .mb-items{gap:clamp(.9rem,1.6vh,1.3rem)}
.style-condensed .mb-foot{border-top:1px solid var(--rule)}

/* the gluten free note that sits beside the heading rather than in the footer */
.mb-aside{margin-left:auto;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.72rem;color:var(--muted);align-self:center}

/* a size that rides along with the name: 750ml, 1L */
.mb-size{font-family:var(--font-body);font-weight:400;font-size:.86em;color:var(--muted);text-transform:none;letter-spacing:0}

/* two price columns for the coffee list */
.mb-sec.has-2p .mb-row{grid-template-columns:1fr auto auto;column-gap:.9rem}
.mb-sec.has-2p .mb-price{min-width:2.6ch;text-align:right}
.mb-colhead{margin:0 0 .4rem;text-align:right;font-family:var(--font-cond);font-weight:700;
  letter-spacing:.14em;font-size:.7rem;color:var(--muted)}

/* several sections stacked inside one printed column */
.mb-sec + .mb-sec{margin-top:clamp(1.4rem,3vh,2.4rem)}
.mb-sec{display:flex;flex-direction:column}
/* the last section grows so its footnote can sit on the bottom rule */
.mb-panel .mb-sec:last-of-type{flex:1 1 auto}
.mb-sec .mb-foot{margin-top:auto}
/* the part that actually scrolls, deliberately a separate element from .mb-panel:
   see the note above .mb-scroll-hint for why the fade needs a non-scrolling parent */
/* scrollbar-gutter keeps the same track reserved whether the panel scrolls or
   not, so the right-hand price column never ends up tucked under the scrollbar */
.mb-scroll{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;scrollbar-gutter:stable;padding-right:.35rem;
  scrollbar-width:thin;scrollbar-color:rgba(28,36,32,.2) transparent}
.mb-scroll::-webkit-scrollbar{width:5px}
.mb-scroll::-webkit-scrollbar-thumb{background:rgba(28,36,32,.2);border-radius:3px}
.mb-foot-panel{margin-top:auto}
.mb-foot-mid{text-align:center}

/* cover and info leaves */
.mb-cover-mid{display:flex;flex-direction:column;align-items:center;gap:.2rem;margin-block:auto}
.mb-cover-title{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(2.6rem,6vw,4.6rem);line-height:.95;color:var(--ink)}
.style-serif .mb-cover-title{font-family:var(--font-display);font-weight:500;letter-spacing:.12em;font-size:clamp(2rem,4vw,3rem)}
.mb-cover-script{font-family:var(--font-display);font-style:italic;font-size:clamp(1.1rem,2vw,1.5rem);color:#4a5a52}
.mb-cover .mb-logo{margin:0}
.mb-info .mb-scroll{align-items:center;justify-content:flex-start;text-align:center;gap:.1rem;padding-top:clamp(1rem,3vh,2.4rem)}
.mb-info .mb-logo{width:min(230px,58%);margin-bottom:clamp(1.4rem,5vh,3rem)}
.mb-info-place{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:1rem;margin:0 0 .3rem}
.mb-info-days{margin-top:clamp(1.2rem,4vh,2.2rem)}
.mb-info-line{margin:0;font-size:.95rem;color:#4a5a52;line-height:1.7}
.mb-info-gap{margin-top:clamp(1.2rem,4vh,2.2rem)}
.mb-info-site{margin-top:auto;font-size:.9rem;color:var(--muted)}

@media (max-width:900px){
  .style-condensed .mb-cat{font-size:1.4rem}
  .mb-aside{margin-left:0;flex-basis:100%}
}

/* ==========================================================================
   BACKOFFICE — MENU EDITOR
   Every dish lives in one JS object (menuState); text inputs write straight into
   it via data-path so the object is always exactly what will be saved. Add,
   delete and reorder mutate the array and re-render the whole editor — a menu
   tops out around 60 dishes, so a full re-render is cheap and never drifts out
   of sync the way partial DOM patching can.
   ========================================================================== */
.mn-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
/* the quieter tier: a plain underline, not a pill, so it never competes with
   the solid page-switcher track above it */
.mn-menu-tabs{display:flex;gap:1.5rem;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.mn-menu-tab{position:relative;background:none;border:0;border-radius:0;padding:.15rem .05rem .65rem;
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--font-cond);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;
  color:var(--muted);cursor:pointer;transition:color .18s}
.mn-menu-tab::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;border-radius:2px;transition:background .18s}
.mn-menu-tab:hover{color:var(--green-dark)}
.mn-menu-tab.active{color:var(--green-dark)}
.mn-menu-tab.active::after{background:var(--green)}
.mn-menu-tab:disabled{opacity:.4;cursor:not-allowed}
.mn-hint{color:var(--muted);font-size:.84rem;margin:0 0 1.2rem;max-width:70ch}

.mn-empty{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-lg);
  padding:2.4rem 1.5rem;text-align:center;color:var(--muted)}
.mn-empty strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:1.2rem;margin-bottom:.4rem}

.mn-section{border:1px solid var(--line);border-radius:14px;background:var(--surface);margin-bottom:.8rem;overflow:hidden}
.mn-section[open]{border-color:rgba(var(--green-rgb),.4)}
.mn-section>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;transition:background .18s}
.mn-section>summary::-webkit-details-marker{display:none}
.mn-section>summary:hover{background:var(--green-wash)}
.mn-section>summary::after{content:'';margin-left:auto;flex-shrink:0;width:8px;height:8px;border-right:2px solid var(--green);
  border-bottom:2px solid var(--green);transform:rotate(45deg) translateY(-2px);transition:transform .28s var(--ease)}
.mn-section[open]>summary::after{transform:rotate(225deg) translateY(1px)}
.mn-sec-name{font-family:var(--font-display);font-size:1.08rem;color:var(--green-dark)}
.mn-sec-name-en{color:var(--muted);font-size:.85em}
.mn-sec-count{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.06em;font-size:.68rem;font-weight:700;
  color:var(--muted);background:var(--surface-2);border-radius:6px;padding:.2rem .5rem}
.mn-sec-body{padding:0 1.1rem 1.2rem;border-top:1px solid var(--line)}

.mn-sec-names{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin:1rem 0 .3rem}
.mn-sec-name-col{display:flex;flex-direction:column;min-width:0}
.mn-sec-name-col .form-field.ff{margin:0}

/* A group is the run of rows that share one sideways label on the printed menu.
   Indented and ruled on the left so the nesting reads at a glance: this section
   holds groups, those groups hold the drinks. */
.mn-group{margin-top:1.1rem;padding-left:.85rem;border-left:2px solid var(--line)}
.mn-group-head{display:flex;align-items:center;gap:.6rem}
.mn-group-title{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.82rem;color:var(--ink)}
.mn-group-head .mn-sec-count{margin-left:0}
.mn-group-head .icon-btn{margin-left:auto}
.mn-group .mn-sec-names{margin-top:.55rem}
.mn-add-group{margin-top:1rem}
/* names the printed columns so it is clear which box feeds which price */
.mn-cols-note{margin:.75rem 0 0;font-size:.76rem;color:var(--muted)}
/* the region keeps the name's column, directly under it, so the pair reads as one
   thing; the description column beside them stays where it is */
.mn-lang-row-tight{margin-top:.45rem}

.mn-dishes{display:flex;flex-direction:column;gap:.55rem;margin-top:1rem}
.mn-dish{border:1px solid var(--line);border-radius:11px;background:var(--paper,#FBF9F5);overflow:hidden;scroll-margin-top:14px}
.mn-dish.is-open{border-color:rgba(var(--gold-rgb),.55)}
.mn-dish-head{display:flex;align-items:center;gap:.5rem;padding:.55rem .6rem .55rem .3rem}
.mn-dish-order{display:flex;flex-direction:column;gap:1px}
.mn-order-btn{width:24px;height:17px;display:grid;place-items:center;border:0;background:none;color:var(--muted);
  cursor:pointer;border-radius:5px;transition:background .15s,color .15s}
.mn-order-btn:hover:not(:disabled){background:var(--green-wash);color:var(--green-dark)}
.mn-order-btn:disabled{opacity:.25;cursor:default}
.mn-order-btn svg{width:13px;height:13px}
.mn-dish-toggle{flex:1;min-width:0;display:flex;align-items:baseline;gap:.55rem;background:none;border:0;
  padding:.3rem .3rem;cursor:pointer;text-align:left;font:inherit}
.mn-dish-name{font-family:var(--font-display);font-size:.98rem;color:var(--ink);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.mn-dish-name:empty::before{content:'New dish — untitled';color:var(--muted);font-style:italic}
.mn-dish-price{margin-left:auto;flex-shrink:0;font-family:var(--font-cond);font-weight:700;color:var(--muted);font-size:.85rem}
.mn-dish-del{flex-shrink:0}
.mn-dish-body{padding:.2rem 1rem .9rem;border-top:1px solid var(--line)}

.mn-lang-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin-top:.45rem}
.mn-lang-row .form-field.ff{margin:0}
/* A description box tall enough for a paragraph, times three languages, is most
   of the height of an open dish - and on the drinks list nearly every one of
   them is empty. Start it at two lines; it still drags taller when a dish
   actually needs the room. */
.mn-lang-row .form-field.ff textarea{min-height:62px}
.mn-lang-tag{display:inline-block;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:.64rem;font-weight:700;color:var(--gold-dark,#7C5D0E);margin:.7rem 0 .3rem}
.mn-lang-tag:first-child{margin-top:.5rem}
/* the section-name columns have no preceding sibling to separate from */
.mn-lang-tag-tight{margin:0 0 .3rem}

/* Three boxes on a food dish, four on a wine (vintage plus its three columns), so
   the row fits itself to whatever it is given rather than to a fixed count. */
.mn-row3{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.55rem;margin-top:.7rem;align-items:center}
.mn-row3 .form-field.ff{margin:0}

/* Second price: a switch inside its own box rather than an always-empty field on
   the 90% of dishes that only ever have one price. */
.mn-price2-box{border:1.5px solid var(--line);border-radius:9px;padding:.55rem .8rem;transition:border-color .18s,background .18s}
.mn-price2-box:not(.is-off){border-color:rgba(var(--green-rgb),.4)}
.mn-price2-box.is-off{background:var(--surface-2)}
.mn-price2-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem}
.mn-price2-label{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.07em;font-size:.68rem;font-weight:700;color:var(--green-dark)}
.mn-price2-box.is-off .mn-price2-label{color:var(--muted)}
.mn-price2-switch .switch-track{width:32px;height:18px}
.mn-price2-switch .switch-knob{width:13px;height:13px;top:2.5px;left:2.5px}
.mn-price2-switch input:checked~.switch-track .switch-knob{transform:translateX(14px)}
.mn-price2-input{display:block;width:100%;border:0;padding:.1rem 0 0;font-family:var(--font-body);font-size:1rem;
  color:var(--ink);background:none}
.mn-price2-input:focus{outline:none}
.mn-price2-input::placeholder{color:#B4B9B0}
.mn-price2-input:disabled{color:var(--muted);cursor:not-allowed}

.mn-tags{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .8rem}
.mn-tag-check{display:inline-flex;align-items:center;gap:.35rem;font-size:.85rem;color:var(--ink);cursor:pointer}
.mn-tag-check input{width:15px;height:15px;accent-color:var(--green)}

.mn-opts{margin-top:.9rem}
.mn-opt-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:.5rem;align-items:center;margin-bottom:.45rem}
.mn-opt-row input{width:100%;padding:.5rem .65rem;border:1.5px solid var(--line);border-radius:9px;
  background:var(--surface);font-size:.85rem;color:var(--ink);transition:border-color .18s}
.mn-opt-row input:focus{outline:none;border-color:var(--green)}
.mn-opt-row input::placeholder{color:#B4B9B0}

.mn-mini-add{display:inline-flex;align-items:center;gap:.4rem;background:none;border:1px dashed var(--line);
  border-radius:9px;padding:.45rem .8rem;font-size:.8rem;color:var(--muted);cursor:pointer;
  transition:border-color .18s,color .18s}
.mn-mini-add:hover{border-color:var(--green);color:var(--green-dark)}
.mn-mini-add svg{width:14px;height:14px}

.mn-add-dish{margin-top:.8rem}

/* the gradient's transparent top edge looks empty but a sticky element still
   occupies that rectangle; without pointer-events:none it would silently eat
   clicks meant for whatever dish sits underneath it while scrolling */
.mn-savebar{position:sticky;bottom:1rem;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;margin-top:1.4rem;padding:.85rem 1.1rem .85rem 1.3rem;background:var(--surface);
  border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 34px -18px rgba(28,36,32,.4);
  pointer-events:none}
.mn-savebar>*{pointer-events:auto}
.mn-savebar-state{display:flex;align-items:center;gap:.6rem;font-size:.85rem;font-weight:500;color:var(--muted)}
.mn-savebar-state::before{content:'';width:8px;height:8px;flex-shrink:0;border-radius:50%;background:var(--line);transition:background .2s}
.mn-savebar-state.is-dirty{color:#7C5D0E}
.mn-savebar-state.is-dirty::before{background:var(--gold)}
.mn-savebar-state.is-good{color:var(--green-dark)}
.mn-savebar-state.is-good::before{background:var(--green)}
.mn-savebar-state.is-error{color:var(--red)}
.mn-savebar-state.is-error::before{background:var(--red)}

@media (max-width:700px){
  .mn-sec-names{grid-template-columns:1fr}
  .mn-lang-row{grid-template-columns:1fr}
  .mn-row3{grid-template-columns:1fr 1fr}
  .mn-opt-row{grid-template-columns:1fr;gap:.3rem}
  .mn-savebar{flex-direction:column;align-items:stretch}
  .mn-savebar .btn{width:100%}
}

/* ================= Hiring archive =================
   A table on a laptop, a stack of cards on a phone: the same grid template drives
   both, so the header row and the rows can never drift out of alignment. */
.chip-blue{background:rgba(60,90,130,.13);color:#33506f}
.chip-slate{background:rgba(70,80,95,.12);color:#4a5568}
.chip-green{background:var(--green-wash);color:var(--green-dark)}

.ap-toolbar{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:1.5rem 0 1.1rem}
/* the sub-nav needs air under it before the first card, or the two read as one lump */
#hire-roles{padding-top:1.5rem}
.ap-search{position:relative;flex:1 1 230px;min-width:0}
.ap-search svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--muted);pointer-events:none}
.ap-search input{width:100%;height:38px;padding:0 .8rem 0 2.2rem;border:1px solid var(--line);
  border-radius:11px;background:var(--surface);font:inherit;font-size:.9rem;color:var(--ink)}
.ap-search input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.13)}
/* a plain select, same height as the search field beside it - the "Role"
   caption was redundant once the picker already reads "All roles" */
.ap-rolepick{height:38px;min-width:150px;padding:0 2.3rem 0 .9rem;border:1px solid var(--line);
  border-radius:11px;background-color:var(--surface);font:inherit;font-size:.88rem;color:var(--ink);
  cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7A72' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8rem center;background-size:15px}
.ap-rolepick:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.13)}
/* says the candidate answered an advert we are actually running */
.ap-openrole{display:inline-block;margin-left:.45rem;padding:.08rem .38rem;border-radius:5px;
  background:var(--green-wash);color:var(--green-dark);font-family:var(--font-cond);
  font-weight:700;font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

.ap-wrap{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
/* one template, shared by the header and every row */
/* the CV column only ever holds a small icon+label button (~57px), not a
   112px slot's worth - that spare width was the actual reason the row ran
   out of room in a 920px shell. Reclaimed here instead of widening the shell
   for the whole backoffice over one column. */
.ap-head,.ap-main{display:grid;
  grid-template-columns:minmax(196px,2.2fr) 92px minmax(94px,.85fr) 80px 84px 112px 72px;
  gap:.5rem;align-items:center}
.ap-head{padding:.7rem .95rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.ap-sort{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;padding:0;cursor:pointer;
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;
  font-weight:700;color:var(--muted);text-align:left}
.ap-sort:hover{color:var(--green-dark)}
.ap-sort.is-on{color:var(--green-dark)}
/* the arrow only appears on the column actually doing the sorting */
.ap-sort.is-on::after{content:'';width:0;height:0;border-inline:4px solid transparent;
  border-bottom:5px solid currentColor}
.ap-sort.is-on.is-desc::after{border-bottom:0;border-top:5px solid currentColor}
.ap-head-end{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.08em;
  font-size:.7rem;font-weight:700;color:var(--muted)}

/* a shortlisted row casts a glow past its own edges, and .ap-wrap clips for
   its rounded corners - without this the first and last rows had that glow
   sheared flat against the card edge */
.ap-list{display:flex;flex-direction:column;padding-block:10px}
.ap-row{position:relative;border-bottom:1px solid var(--line)}
.ap-row:last-child{border-bottom:0}
.ap-row.is-open{background:var(--paper,#FBF9F5)}
/* ---- the shortlist row ----
   A tinted row is still a row: on a long list the eye reads it as part of the
   same flat run and skims past. So a three-star candidate stops being a row
   and becomes a card - warm ground, a gold spine, and real elevation lifting
   it off the list. Depth is what the eye catches first, well before colour.

   The lift is vertical only. Insetting the row horizontally would pop it out
   nicely but shift every cell out of line with the column headers, and this
   table earns its readability from those columns lining up. */
.ap-row.is-top{z-index:3;border-bottom:0;
  background:linear-gradient(100deg,#FFF9EA 0%,#FFFDF7 55%,var(--surface) 100%);
  box-shadow:0 5px 14px -7px rgba(var(--gold-rgb),.55),0 -3px 10px -7px rgba(var(--gold-rgb),.32),
    inset 0 1px 0 rgba(255,255,255,.9)}
/* the spine: a gradient bar with its own glow, not a flat 3px line */
.ap-row.is-top::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;z-index:2;
  background:linear-gradient(180deg,#EBC455,var(--gold) 45%,#A87C1B);
  box-shadow:0 0 10px rgba(var(--gold-rgb),.75)}
.ap-row.is-top .ap-who strong{font-weight:700;color:#6b4f08}
.ap-row.is-top .ap-star-read.is-on{color:#D9A62C}
.ap-row.is-top:hover{box-shadow:0 6px 16px -8px rgba(var(--gold-rgb),.62),0 -3px 10px -7px rgba(var(--gold-rgb),.32),
  inset 0 1px 0 rgba(255,255,255,.9)}
.ap-row.is-top:hover .ap-main{background:rgba(var(--gold-rgb),.06)}
.ap-row.is-top .ap-main{position:relative;z-index:1}

/* the badge that names the state in words, so it is never just "some rows
   look different" - it says which pile the candidate is in */
.ap-nameline{display:flex;align-items:center;gap:.45rem;min-width:0}
.ap-nameline strong{min-width:0}
.ap-toppick{display:inline-flex;align-items:center;gap:.25rem;flex-shrink:0;
  padding:.17rem .48rem .17rem .38rem;border-radius:999px;
  background:linear-gradient(135deg,#F5CE63,#C6982F);color:#3B2B05;
  font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.07em;
  font-size:.6rem;font-weight:700;line-height:1;
  box-shadow:0 2px 6px -2px rgba(var(--gold-rgb),.8)}
.ap-toppick svg{width:10px;height:10px;fill:currentColor}

/* A pale sheen, mostly white with the faintest warm centre - reads as light
   passing over the row rather than a yellow bar sliding across it. It lives
   on .ap-main, not on the row: on the row it stretched top-to-bottom of an
   expanded card and swept a huge vertical band across the whole detail. */
.ap-row.is-top .ap-main::after{content:'';position:absolute;top:0;bottom:0;left:-35%;width:26%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent 10%,rgba(255,255,255,.5) 42%,rgba(255,236,187,.72) 52%,rgba(255,255,255,.5) 62%,transparent 90%);
  opacity:.75;filter:blur(1.5px);animation:apShine 2.6s ease-in-out infinite}
@keyframes apShine{0%,10%{left:-35%}64%,100%{left:112%}}
/* once the card is open you are reading, not scanning - the glint has done
   its job and would only be a distraction over the detail below */
.ap-row.is-top.is-open .ap-main::after{animation:none;display:none}
@media (prefers-reduced-motion:reduce){.ap-row.is-top .ap-main::after{animation:none;display:none}}
/* and a thumbs-down steps back rather than shouting */
.ap-row.is-out .ap-main{opacity:.55}
.ap-row.is-out:hover .ap-main{opacity:.85}
.ap-main{width:100%;padding:.85rem .95rem;cursor:pointer}
.ap-open{display:block;width:100%;background:none;border:0;padding:0;cursor:pointer;text-align:left;font:inherit}
.ap-row:hover .ap-main{background:rgba(var(--green-rgb),.04)}
.ap-cell{min-width:0}
.ap-who strong{display:block;font-weight:600;color:var(--ink);font-size:1rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-sub{display:block;margin-top:.12rem;font-size:.78rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-exp .chip,.ap-rights .chip{font-size:.66rem;padding:.28rem .6rem;letter-spacing:.06em;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a chip that wraps makes its row taller than its neighbours and the table
   stops reading as a table */
.ap-rights .chip{display:inline-block}
.ap-eng,.ap-when{font-size:.84rem;color:#5d6a63}
.ap-exp .chip,.ap-rights .chip{font-weight:700}
.ap-dash{color:var(--muted)}
.ap-cvdot{display:inline-block;margin-left:.4rem;padding:.1rem .34rem;border-radius:5px;
  background:var(--green-wash);color:var(--green-dark);font-size:.62rem;font-weight:700;letter-spacing:.06em}

/* Rating: three big targets instead of five small ones. Tapping the level you
   are already on clears it, so there is no separate reset. */
/* In the list the rating is shown, not set: a stray tap while scanning a table
   must never re-rate someone. Three stars is the shortlist signal, so it gets a
   ring and full colour; a thumbs down replaces the stars outright. */
.ap-rate-read{display:inline-flex;align-items:center;gap:1px}
.ap-star-read{width:17px;height:17px;color:#dcdfda}
.ap-star-read svg{width:15px;height:15px;fill:currentColor;display:block}
.ap-star-read.is-on{color:var(--gold)}
/* no extra pill for is-top: the whole row already carries the gold edge and
   the shine, a ring around the stars too was a second, redundant label */
.ap-rate-read.is-bad{width:26px;height:26px;display:grid;place-items:center;border-radius:8px;
  background:rgba(var(--red-rgb),.12);color:var(--red)}
.ap-rate-read.is-bad svg{width:16px;height:16px}
.ap-rate-read.is-none{color:var(--muted);font-size:.9rem}

.ap-rate-set{display:inline-flex;align-items:center;gap:2px}
.ap-rate-div{width:1px;height:20px;margin:0 .45rem;background:var(--line)}
.ap-thumb{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:9px;background:var(--surface);color:var(--muted);cursor:pointer;
  transition:background .16s,border-color .16s,color .16s}
.ap-thumb svg{width:17px;height:17px}
.ap-thumb:hover{border-color:var(--red);color:var(--red)}
.ap-thumb.is-on{background:rgba(var(--red-rgb),.12);border-color:rgba(var(--red-rgb),.5);color:var(--red)}
.ap-rate-line{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.ap-star{width:23px;height:26px;display:grid;place-items:center;background:none;border:0;padding:0;
  cursor:pointer;color:#d8dcd6;transition:color .15s,transform .15s var(--ease)}
.ap-star svg{width:19px;height:19px;fill:currentColor}
.ap-star.is-on{color:var(--gold)}
.ap-star:hover{color:var(--gold);transform:scale(1.13)}

/* Call button: the one thing you do with a promising application is ring them. */
.ap-call{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;
  border:1px solid var(--line);background:var(--surface);color:var(--green-dark);cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s var(--ease)}
.ap-call svg{width:17px;height:17px}
.ap-call:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-1px)}
/* once a trial is booked the same slot shows when it is */
.ap-trial-set{display:inline-flex;align-items:center;gap:.35rem;padding:.34rem .5rem;border-radius:9px;
  border:1px solid rgba(var(--green-rgb),.35);background:var(--green-wash);color:var(--green-dark);
  font-family:var(--font-cond);font-weight:700;font-size:.7rem;letter-spacing:.04em;cursor:pointer;
  white-space:nowrap}
.ap-trial-set svg{width:14px;height:14px;flex-shrink:0}
.ap-trial-set:hover{background:rgba(var(--green-rgb),.16)}

/* ---- the open candidate: read on the left, decide on the right ----
   The old card was one column of full-width slabs divided by rules, so
   reference material and controls sat in the same visual queue and the eye
   had no way to tell them apart. Splitting them gives the card a spine: the
   left column is a document, the right is a control panel. */
.ap-detail{padding:0 .95rem 1.2rem;border-top:1px dashed var(--line);background:var(--paper,#FBF9F5)}
.ap-cols{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:1.5rem 1.8rem;padding-top:1.15rem;align-items:start}
.ap-col-read{min-width:0}

/* One label style for every section on the card, left column and right.
   padding-block:0 because these are <section> elements and the global rule
   pads every section by up to 115px - meant for page sections, ruinous
   inside a table row. Same trap as .admin-tabpanel above. */
.ap-sec{padding-block:0;margin-bottom:1.25rem}
.ap-sec:last-child{margin-bottom:0}
.ap-sec-title{display:block;margin-bottom:.5rem;font-family:var(--font-cond);text-transform:uppercase;
  letter-spacing:.1em;font-size:.64rem;font-weight:700;color:#93a099}

.ap-contact{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.ap-contact-line{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);
  font-size:1.02rem;font-weight:600;text-decoration:none;letter-spacing:.01em}
.ap-contact-line svg{width:16px;height:16px;color:var(--green);flex-shrink:0}
.ap-contact-line:hover{color:var(--green-dark);text-decoration:underline}
.ap-contact-line.is-mail{font-size:.92rem;font-weight:500;color:#5d6a63}

/* The facts read as a spec sheet: label left, answer right, one hairline per
   row. Two clean vertical edges instead of eight little boxes scattered
   across a grid, which is what made this block feel disordered. */
.ap-facts{margin:0;border-top:1px solid var(--line)}
.ap-facts>div{display:flex;align-items:baseline;justify-content:space-between;gap:1.2rem;
  padding:.52rem .1rem;border-bottom:1px solid var(--line)}
.ap-facts dt{flex:0 0 auto;font-size:.8rem;font-weight:500;color:var(--muted)}
.ap-facts dd{margin:0;min-width:0;text-align:right;font-size:.9rem;font-weight:600;color:var(--ink)}

.ap-msg{margin:0;padding:.75rem .95rem;border-left:2px solid rgba(var(--green-rgb),.28);
  background:var(--surface);border-radius:0 10px 10px 0;
  font-size:.9rem;line-height:1.6;color:#5d6a63}

/* ---- the decision panel ---- */
.ap-col-act{display:flex;flex-direction:column;gap:.9rem;padding:1rem;
  border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-sm)}
.ap-act-sec+.ap-act-sec{padding-top:.9rem;border-top:1px solid var(--line)}

.ap-cvbox{display:flex;align-items:center;gap:.6rem;min-width:0}
.ap-cv-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:var(--green-wash);color:var(--green-dark);flex-shrink:0}
.ap-cv-ico svg{width:18px;height:18px}
.ap-cv-meta{display:flex;flex-direction:column;min-width:0}
.ap-cv-meta strong{font-size:.84rem;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-cv-meta span{font-size:.73rem;color:var(--muted)}
/* two equal buttons on their own line: side by side with the filename they
   were squeezed to nothing the moment the name was long */
.ap-cv-actions{display:grid;grid-template-columns:1fr auto;gap:.4rem;margin-top:.65rem}
.ap-cv-actions .btn{justify-content:center;width:100%}
/* .ap-wrap must keep overflow:hidden for its rounded corners, which means a
   button sitting near its right edge has its drop glow sliced off. Inside the
   card the glow is decoration, not information, so it shrinks to fit. */
.ap-cv-actions .btn-primary{box-shadow:0 6px 14px -10px rgba(var(--green-rgb),.9)}
.ap-cv-actions .btn-primary:hover{box-shadow:0 9px 18px -10px rgba(var(--green-rgb),.9)}
.ap-nocv{margin:0;font-size:.84rem;line-height:1.5;color:var(--muted)}

.ap-col-act .ap-trial-btn{width:100%;justify-content:center}
.ap-note-box{width:100%;padding:.6rem .7rem;border:1px solid var(--line);border-radius:10px;
  background:var(--surface-2);font:inherit;font-size:.86rem;line-height:1.5;color:var(--ink);
  resize:vertical;min-height:70px}
.ap-note-box:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(var(--green-rgb),.12)}
.ap-note-box::placeholder{color:#aab3ad}

/* Delete is the one irreversible action here, so it stays a plain quiet link
   until you go looking for it - never a button competing with the others. */
.ap-del{align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;background:none;border:0;
  padding:.2rem 0;font:inherit;font-size:.8rem;color:var(--muted);cursor:pointer;transition:color .16s}
.ap-del svg{width:15px;height:15px;flex-shrink:0}
.ap-del:hover{color:var(--red)}
/* still used by "Cancel the trial" inside the booking dialog */
.ap-danger{color:var(--red);border-color:rgba(var(--red-rgb),.35)}
.ap-danger:hover{background:rgba(var(--red-rgb),.08)}

/* ---- book-a-trial dialog ---- */
.ap-modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem;
  background:rgba(20,26,22,.55);backdrop-filter:blur(3px);animation:apFade .18s ease}
.ap-modal[hidden]{display:none}
@keyframes apFade{from{opacity:0}to{opacity:1}}
.ap-modal-card{position:relative;width:min(400px,100%);padding:1.6rem 1.5rem 1.4rem;border-radius:20px;
  background:linear-gradient(160deg,var(--green) 0%,var(--green-dark) 100%);color:#fff;
  box-shadow:0 30px 70px -25px rgba(0,0,0,.6);animation:apPop .22s var(--ease)}
@keyframes apPop{from{transform:translateY(10px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.ap-modal-x{position:absolute;top:.6rem;right:.75rem;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.35rem;line-height:1;cursor:pointer}
.ap-modal-x:hover{background:rgba(255,255,255,.26)}
.ap-modal-eyebrow{margin:0;font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.14em;
  font-size:.68rem;color:var(--gold)}
.ap-modal-card h3{margin:.25rem 0 .9rem;color:#fff;font-size:1.3rem}
/* the number is the reason the dialog exists */
.ap-modal-phone{display:block;font-family:var(--font-display);font-size:1.85rem;font-weight:600;
  color:#fff;text-decoration:none;letter-spacing:.01em;line-height:1.15}
.ap-modal-phone:hover{color:var(--gold)}
.ap-modal-phone.is-empty{font-size:1rem;opacity:.65;pointer-events:none}
.ap-modal-mail{display:block;margin-top:.2rem;color:rgba(255,255,255,.82);font-size:.9rem;text-decoration:none}
.ap-modal-mail:hover{color:#fff;text-decoration:underline}
.ap-modal-when{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:1.2rem 0 .2rem}
.ap-modal-when .form-field.ff{margin:0}
.ap-modal-when input{background:rgba(255,255,255,.94)}
.ap-modal-err{margin:.6rem 0 0;font-size:.82rem;color:#ffd9a8}
.ap-modal-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
/* .btn sets display:inline-flex, which beats the browser's own rule for [hidden]:
   without this the "cancel the trial" button showed on candidates who had none */
.btn[hidden],.ap-modal-mail[hidden]{display:none}
.ap-modal-actions .btn-ghost{color:#ffc9cb;border-color:rgba(255,255,255,.3)}
.ap-modal-actions .btn-ghost:hover{background:rgba(255,255,255,.12)}

/* Below the table breakpoint each row becomes a card: the header row is
   meaningless once the columns stop lining up, so it goes away with it. */
@media (max-width:1040px){
  .ap-head{display:none}
  .ap-main{grid-template-columns:1fr auto;gap:.4rem .6rem;padding:.85rem .9rem}
  .ap-who{grid-column:1;grid-row:1}
  .ap-exp{grid-column:1;grid-row:2}
  .ap-rights{grid-column:2;grid-row:2;justify-self:end}
  .ap-eng{grid-column:1;grid-row:3}
  .ap-rate{grid-column:1;grid-row:4}
  .ap-trial{grid-column:2;grid-row:4;justify-self:end}
  /* the CV button was left with no explicit slot here, so the grid auto-placed
     it into the empty top-right cell next to the name - alone, disconnected
     from the rest of the card. Give it its own full-width row at the bottom. */
  .ap-cvcell{grid-column:1/-1;grid-row:5;justify-self:stretch;justify-content:center;margin-top:.15rem}
  /* the panel stops being a side panel and becomes the last section of the
     card - a 292px column next to a squeezed document column helps nobody */
  .ap-cols{grid-template-columns:1fr;gap:1.2rem}
}
@media (max-width:560px){
  .ap-toolbar{gap:.5rem}
  .ap-search{flex:1 1 100%}
  .ap-modal-phone{font-size:1.6rem}
  .ap-facts>div{flex-direction:column;align-items:flex-start;gap:.1rem}
  .ap-facts dd{text-align:left}
}

.ap-trial-btn.is-set{border-color:rgba(var(--green-rgb),.4);background:var(--green-wash);color:var(--green-dark)}

/* the CV button in the list, in place of the stage chip */
.ap-cvcell{display:flex;justify-content:flex-end}
.ap-cvbtn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .7rem;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);color:var(--green-dark);cursor:pointer;
  font-family:var(--font-cond);font-weight:700;font-size:.72rem;letter-spacing:.07em;
  transition:background .18s,border-color .18s,color .18s,transform .18s var(--ease)}
.ap-cvbtn svg{width:14px;height:14px}
.ap-cvbtn:hover{background:var(--green);border-color:var(--green);color:#fff;transform:translateY(-1px)}

/* ---- availability: 7 days, two shifts that meet at 4.30 ---- */
.av-grid{display:flex;flex-direction:column;gap:.4rem}
.av-head{display:flex;align-items:baseline;gap:.6rem}
.av-head .ap-sec-title{margin:0}
.av-count{font-size:.74rem;color:var(--muted)}
.av-row{display:grid;grid-template-columns:82px repeat(7,minmax(0,1fr));gap:.3rem;align-items:center}
.av-rowhead{font-size:.78rem;font-weight:600;color:var(--ink)}
.av-cell{height:32px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  color:#7b857f;cursor:pointer;font-family:var(--font-cond);font-weight:700;font-size:.7rem;
  letter-spacing:.04em;transition:background .16s,border-color .16s,color .16s}
.av-cell:hover{border-color:var(--red);color:var(--red)}
/* a blocked shift is struck out and red: it reads as "not this one" at a glance */
.av-cell.is-off{background:rgba(var(--red-rgb),.11);border-color:rgba(var(--red-rgb),.4);
  color:var(--red);text-decoration:line-through}
.av-hint{margin:.5rem 0 0;font-size:.74rem;color:var(--muted)}
@media (max-width:620px){
  .av-row{grid-template-columns:62px repeat(7,minmax(0,1fr));gap:.22rem}
  .av-rowhead{font-size:.7rem}
  .av-cell{height:29px;font-size:.6rem}
}

/* ---- CV reader: the document and the judgement side by side ---- */
.cv-viewer{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:1.2rem;
  background:rgba(18,24,20,.62);backdrop-filter:blur(3px);animation:apFade .18s ease}
.cv-viewer[hidden]{display:none}
.cv-shell{display:flex;flex-direction:column;width:min(1180px,100%);height:min(88vh,900px);
  border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 34px 80px -28px rgba(0,0,0,.6)}
.cv-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-shrink:0;
  padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--surface-2)}
.cv-bar-who{display:flex;flex-direction:column;min-width:0}
.cv-bar-who strong{font-size:1rem;font-weight:600;color:var(--ink)}
.cv-bar-who span{font-size:.76rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cv-bar-act{display:flex;align-items:center;gap:.5rem;flex-shrink:0}
.cv-body{display:grid;grid-template-columns:1fr 320px;flex:1 1 auto;min-height:0}
.cv-doc{position:relative;background:#4a504c;min-height:0}
.cv-doc object{width:100%;height:100%;border:0;display:block}
.cv-loading{margin:0;padding:2rem 1.4rem;text-align:center;color:#e8ece9;font-size:.9rem}
.cv-side{display:flex;flex-direction:column;gap:0;border-left:1px solid var(--line);
  background:var(--surface);overflow-y:auto;min-height:0}
.cv-side-block{padding:1rem;border-bottom:1px solid var(--line)}
.cv-side-notes{flex:1 1 auto;display:flex;flex-direction:column;border-bottom:0}
.cv-side-notes .form-field.ff{margin:0;flex:1 1 auto;display:flex;flex-direction:column}
.cv-side-notes textarea{flex:1 1 auto;resize:none;min-height:120px}
.cv-rate{display:flex;align-items:center;gap:.6rem}
.cv-rate{flex-wrap:wrap}
.cv-rate .ap-star{width:30px;height:32px}
.cv-rate .ap-star svg{width:25px;height:25px}
.cv-rate .ap-thumb{width:34px;height:34px}
.cv-rate .ap-thumb svg{width:19px;height:19px}
.cv-rate-label{font-size:.88rem;font-weight:600;color:var(--ink)}
.cv-saved{margin:.4rem 0 0;font-size:.74rem;color:var(--green-dark)}
.cv-saved[hidden]{display:none}
/* on a phone the document goes on top and the judgement scrolls under it */
@media (max-width:900px){
  .cv-viewer{padding:0}
  .cv-shell{width:100%;height:100%;border-radius:0}
  .cv-body{grid-template-columns:1fr;grid-template-rows:minmax(240px,45vh) 1fr}
  .cv-side{border-left:0;border-top:1px solid var(--line)}
  .cv-side-notes textarea{min-height:90px}
}

/* ---- Functions page: three panes behind one save, not a settings dialog ---- */
.fn-pane{padding-top:1.5rem}
.fn-pane[hidden]{display:none}
.fn-pane-head{margin-bottom:1.3rem}
.fn-pane-head h2{margin:0 0 .3rem;font-size:1.32rem}
.fn-pane-head p{margin:0;font-size:.92rem;color:#5d6a63;max-width:62ch}
.fn-pane-note{margin-top:.5rem!important;font-size:.82rem!important;color:var(--muted)!important}

.fn-faq-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.9rem}
.fn-faq-card{padding:1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.fn-faq-q{margin:0 0 .7rem;font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--ink)}
.fn-faq-card .form-field.ff{margin:0}
.fn-faq-why{margin:.6rem 0 0;font-size:.76rem;color:var(--muted)}
/* saying plainly which answers are automatic stops people hunting for a box that
   does not exist, which is what made this screen confusing */
.fn-faq-auto{margin-top:1.2rem;padding:1rem 1.1rem;border:1px dashed var(--line);
  border-radius:14px;background:var(--surface-2)}
.fn-faq-auto-h{margin:0 0 .6rem;font-family:var(--font-cond);text-transform:uppercase;
  letter-spacing:.09em;font-size:.7rem;font-weight:700;color:var(--muted)}
.fn-faq-auto ul{margin:0;padding-left:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.fn-faq-auto li{font-size:.86rem;color:#5d6a63}
.fn-faq-auto li span{color:var(--ink);font-weight:500}
.fn-link{background:none;border:0;padding:0;font:inherit;color:var(--green-dark);
  text-decoration:underline;cursor:pointer}
.fn-link:hover{color:var(--green)}

/* ---- Functions: how a set menu works ---- */
.fn-rules{margin-top:2.4rem;padding:1.8rem;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface)}
.fn-rules-head{margin-bottom:1.3rem}
.fn-rules-head h3{margin:.35rem 0 0;font-size:clamp(1.15rem,2.2vw,1.5rem)}
.fn-rules-list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.3rem}
.fn-rules-list li{display:flex;gap:.8rem;align-items:flex-start}
.fn-rule-n{flex-shrink:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--green);color:#fff;font-family:var(--font-cond);font-weight:700;font-size:.9rem}
.fn-rules-list strong{display:block;color:var(--ink);font-size:.98rem;line-height:1.35}
.fn-rules-list p{margin:.3rem 0 0;font-size:.88rem;line-height:1.55;color:#5d6a63}
.fn-rules-foot{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted)}
@media (max-width:600px){.fn-rules{padding:1.3rem}}
.form-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media (max-width:760px){.form-grid-3{grid-template-columns:1fr}}

/* ---- set menu cards: the whole menu, no toggle ---- */
/* The menu block gets its own ground and a rule above it, so a card reads as
   heading / promise / menu / price instead of one column of grey text. */
.fn-menu-list{list-style:none;margin:1rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:.7rem;flex:1 1 auto}
/* the old cards were one bulleted line per course; these hold a whole course, so
   the absolutely-positioned bullet has to go or it sits on the first letter */
.fn-menu-list .fn-course{display:flex;flex-direction:column;gap:.12rem;padding:0}
.fn-menu-list .fn-course::before{display:none}
.fn-course-name{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:.66rem;font-weight:700;color:var(--muted)}
.fn-course-line{font-size:.88rem;line-height:1.4;color:var(--ink)}
.fn-course-name{margin-bottom:.1rem}
/* the included drink is the line that sells the tier, so it is set apart */
/* the included drink sits at the foot of the menu, pushed there so all four
   cards line their price up whatever the menu above it does */
.fn-menu-list .fn-course.is-drink{margin-top:.15rem;padding:.55rem .7rem;border-radius:10px;
  background:rgba(var(--gold-rgb),.13)}
.fn-menu-list .fn-course.is-drink .fn-course-name{color:#8a6a15}
.fn-menu-list .fn-course.is-drink .fn-course-line{font-weight:500}

/* the add-ons: one quiet strip, because this is where a function's margin is */
.fn-addons{margin-top:1.6rem;padding:1.1rem 1.3rem;border-radius:var(--radius-lg);
  background:var(--green-wash);display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.6rem}
.fn-addons-label{font-family:var(--font-cond);text-transform:uppercase;letter-spacing:.1em;
  font-size:.7rem;font-weight:700;color:var(--green-dark)}
.fn-addons ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.4rem;flex:1 1 320px}
.fn-addons li{font-size:.88rem;color:#4a5a52}
.fn-addons li strong{color:var(--ink);font-weight:600}
.fn-addons p{margin:0;flex-basis:100%;font-size:.78rem;color:var(--muted)}

/* ---- Focacce & Maritozzi: a board of photographs, not a price list ----
   The printed version leans on a decorative display face for the dish names;
   at screen sizes that face turns to mush, so the names run in the condensed
   sans the rest of the site uses for labels. Everything else follows the
   print: two columns, each item centred under its own photograph, generous
   air between rows, and the price sitting on its own line underneath. */
.mbook.style-cards{--paper:#F7F5F0}
.mb-sec-cards{display:flex;flex-direction:column;height:100%}
.mb-cat-logo{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin-bottom:clamp(1.2rem,3vw,2rem);text-align:center}
.mb-cat-mark{width:clamp(150px,42%,230px);height:auto;display:block}
.mb-cat-logo .mb-aside{margin:0;font-family:var(--font-display);font-style:italic;
  font-weight:400;text-transform:none;letter-spacing:0;font-size:.95rem;color:#5d6a63}

.mb-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.4rem,3.4vw,2.6rem) clamp(1rem,2.6vw,2rem)}
.mb-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
/* A focaccia is wide and flat, a maritozzo is round and tall. Left to their own
   heights the photographs pushed every name to a different line and the grid
   stopped reading as a grid, which is the one thing the printed menu gets
   right. A fixed box with contain normalises them without cropping. */
.mb-card-img{width:100%;max-width:210px;height:clamp(118px,14vw,168px);object-fit:contain;
  display:block;margin-bottom:.7rem}
/* prices ride at the foot of the row, so they line up across it however long
   the description above them runs */
.mb-card-price{margin-top:auto}
/* the name and its tag share a line and wrap together, so a long name never
   pushes "vegan" onto a line of its own away from what it describes */
.mb-card-head{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:.15rem .45rem}
.mb-card-n{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;font-size:clamp(.92rem,1.5vw,1.05rem);line-height:1.15;color:var(--ink)}
/* always on its own line under the local name, never trailing it: left to wrap
   naturally, a short pair sat side by side and a long one broke, so no two
   cards in a row carried the English in the same place */
.mb-card-n-en{order:3;flex-basis:100%;font-family:var(--font-cond);font-weight:500;
  text-transform:uppercase;letter-spacing:.07em;font-size:.8em;color:#79857f}
/* the brand green is a deep ink green built for white type on top of it; as
   small text on paper it goes muddy and reads as dead grey. This is the same
   hue lifted until it is legible at 11px. */
.mb-card-tag{font-family:var(--font-cond);font-weight:700;text-transform:lowercase;
  letter-spacing:.04em;font-size:.72rem;color:#4E9A5B}
.mb-card-desc{margin-top:.32rem;font-size:.78rem;line-height:1.42;color:#5d6a63;max-width:32ch}
.mb-card-price{padding-top:.45rem;font-family:var(--font-display);font-size:1.05rem;color:var(--ink)}
.style-cards .mb-foot{margin-top:auto;border-top:0;text-align:center;
  font-family:var(--font-display);font-style:italic;font-size:.95rem;color:#5d6a63}

/* a phone gets one column: two 150px photos side by side is not a menu, it is
   a contact sheet */
@media (max-width:560px){
  .mb-cards{grid-template-columns:1fr;gap:1.6rem}
  .mb-card-img{max-width:190px}
}

/* ---- backoffice: the photo menu ---- */
.mn-dish-thumb{width:44px;height:34px;object-fit:contain;flex-shrink:0;margin-left:.2rem}
.mn-photo{display:flex;align-items:center;gap:.85rem;margin-bottom:1rem;padding:.7rem .9rem;
  border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.mn-photo img{width:82px;height:64px;object-fit:contain;flex-shrink:0}
.mn-photo span{font-size:.8rem;line-height:1.45;color:var(--muted)}