/* Pizzaράδες website v2 (local build from Figma "Website v2") */

/* ---------- Fonts (self hosted, Greek + Latin) ---------- */
@font-face{font-family:"NSD";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62.5% 100%;src:url(../fonts/noto-serif-display-greek-standard-normal.woff2) format("woff2-variations");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"NSD";font-style:normal;font-display:swap;font-weight:100 900;font-stretch:62.5% 100%;src:url(../fonts/noto-serif-display-latin-standard-normal.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"RMono";font-weight:500;font-display:swap;src:url(../fonts/roboto-mono-greek-500-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"RMono";font-weight:500;font-display:swap;src:url(../fonts/roboto-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"RMono";font-weight:700;font-display:swap;src:url(../fonts/roboto-mono-greek-700-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"RMono";font-weight:700;font-display:swap;src:url(../fonts/roboto-mono-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"Lit";font-weight:700;font-style:italic;font-display:swap;src:url(../fonts/literata-greek-700-italic.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Lit";font-weight:700;font-style:italic;font-display:swap;src:url(../fonts/literata-latin-700-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122}
@font-face{font-family:"Aurore";font-weight:400;font-display:swap;src:url(../fonts/la-belle-aurore-latin-400-normal.woff2) format("woff2")}

/* ---------- Tokens ---------- */
:root{
  --burgundy:#7C0E19; --yellow:#FFEFB9; --black:#291114; --white:#FFF8ED; --muted:#8C5A5F; --ph:#EFDFB8;
  --canvas:#F1EDE9; --card:#FFF4DA;   /* warm light grey page background (as pizza-amici.nl); yellow only for accents and cards on burgundy */
  --u:min(1px, calc(100vw / 1440));           /* 1 design px of the 1440 Figma frame */
  --pz-display:"NSD", Georgia, serif;
  --pz-mono:"RMono", ui-monospace, Menlo, monospace;
  --pz-btn:"Lit", Georgia, serif;
  --script:"Aurore", cursive;
  --shadow:0 10px 24px rgba(41,17,20,.18);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--burgundy);font:500 15px/1.65 var(--pz-mono);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:inherit}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--burgundy);color:var(--yellow);padding:10px 16px}
.skip:focus{top:12px}
:focus-visible{outline:3px solid var(--black);outline-offset:3px}

/* ---------- Type ---------- */
.d-xl,.d-l,.h2,.h3,.h4{font-family:var(--pz-display);font-stretch:62.5%;letter-spacing:-.01em}
.d-xl{font-weight:900;font-size:clamp(52px, calc(104 * var(--u)), 104px);line-height:.9}
.d-l{font-weight:900;font-size:clamp(40px, calc(76 * var(--u)), 76px);line-height:.92}
.h2{font-weight:900;font-size:clamp(34px, calc(56 * var(--u)), 56px);line-height:.95}
.h3{font-weight:900;font-size:clamp(26px, calc(36 * var(--u)), 36px);line-height:1}
.h4{font-weight:800;font-size:26px;line-height:1.05}
.mono{font:500 15px/1.65 var(--pz-mono)}
.mono-s{font:500 13px/1.6 var(--pz-mono)}
.mono-b{font:700 16px/1.4 var(--pz-mono)}
.script{font-family:var(--script);font-weight:400;line-height:1.1}
.center{text-align:center}

/* ---------- Ticket button (concave corners via mask) ---------- */
.ticket{--r:9px;--tb:var(--burgundy);--tt:var(--yellow);display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:16px 34px;background:var(--tb);color:var(--tt);font:italic 700 20px/1.2 var(--pz-btn);text-decoration:none;border:0;cursor:pointer;white-space:nowrap;
  -webkit-mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat;
  transition:transform .2s cubic-bezier(.175,.885,.32,1.275), filter .25s ease}
@media (min-width:992px) and (hover:hover){ .ticket:hover{transform:scale(1.04) rotate(-1deg)} }
.ticket--yellow{--tb:var(--yellow);--tt:var(--burgundy)}
.ticket--black{--tb:var(--black);--tt:var(--yellow)}
.ticket--block{width:100%}

/* ---------- Shapes drawn by JS (stamp, hex) ---------- */
[data-shape]{position:relative;isolation:isolate}
[data-shape]>svg.shape{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;pointer-events:none}

/* ---------- Photos (placeholder until real files exist) ---------- */
.photo{position:relative;overflow:hidden;background:var(--ph)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo--ph img{display:none}
.photo--ph::after{content:"ΦΩΤΟ · " attr(data-caption);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;font:500 12px/1.5 var(--pz-mono);color:var(--burgundy)}
.polaroid{margin:0;background:var(--white);padding:12px 12px 40px;box-shadow:var(--shadow);rotate:var(--rot,0deg)}
.polaroid .photo{width:100%;height:100%}

/* ---------- Pattern ---------- */
.pattern{position:relative;background:var(--burgundy);overflow:hidden}
.pattern>.pattern-fill{position:absolute;inset:0;pointer-events:none;background:var(--burgundy) url(../assets/brand/pattern.webp) 0 0/clamp(380px,34vw,520px) repeat}

/* ---------- Plate ---------- */
.plate{position:relative;aspect-ratio:1;border-radius:50%}
.plate>svg{position:absolute;inset:0;width:100%;height:100%}
.plate>.photo{position:absolute;inset:13%;border-radius:50%}

/* ---------- Layout helpers ---------- */
.stage{position:relative;width:100%;max-width:1440px;margin:0 auto}
.abs{position:absolute}
@media (min-width:900px){
  .stage [data-x]{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u))}
  .stage [data-w]{width:calc(var(--w) * var(--u))}
  .stage [data-h]{height:calc(var(--h) * var(--u))}
}

/* ---------- Top bar & nav ---------- */
.topbar{background:var(--burgundy);color:var(--yellow);display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:9px 16px;font:500 13px/1.4 var(--pz-mono)}
.topbar span+span::before{content:"■";margin-right:28px;font-size:9px;vertical-align:2px}
.nav{position:relative;display:flex;align-items:stretch;gap:0;padding:14px 24px;background:var(--canvas)}
.nav__bar{--r:10px;flex:1;display:flex;align-items:center;justify-content:space-between;gap:24px;background:none;position:relative;isolation:isolate;padding:16px 32px;
  }
.nav__bar::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--white);pointer-events:none;-webkit-mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat;}
.nav__joint{flex:0 0 30px;align-self:center;height:6px;margin:0 -2px;background:var(--burgundy);position:relative;z-index:1}
.nav .nav__cta{--r:10px;min-width:clamp(220px,19vw,300px);font-size:24px;padding:0 34px}
.nav .nav__cta:hover{transform:none;filter:brightness(1.12)}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.logo svg{width:30px;height:30px}
.logo b{font:800 26px/1 var(--pz-display);font-stretch:62.5%}
.nav__links{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav__links a{font:500 13px/1 var(--pz-mono);text-decoration:none}
.nav__links a:hover{text-decoration:underline}
.nav__toggle{display:none;background:none;border:0;padding:6px;cursor:pointer;color:var(--burgundy)}
.nav__cta{margin-left:0}
@media (max-width:1060px){
  .nav__links{display:none}
  .nav__toggle{display:block}
  .nav__cta,.nav__joint{display:none}
  .nav.open .nav__links{display:flex;flex-direction:column;position:absolute;left:24px;right:24px;top:72px;background:var(--white);padding:20px 24px;border-radius:8px;box-shadow:var(--shadow);gap:18px}
  .nav.open .nav__links a{font-size:16px}
}

/* ---------- Hero ---------- */
.hero{background:var(--canvas);overflow:hidden}
.hero .stage{height:calc(960 * var(--u))}
.hero__photo{border-radius:6px}
.awning{height:calc(84 * var(--u));min-height:44px;background:url(../assets/brand/awning.svg) repeat-x 0 0/auto 100%}
.hero__script{color:var(--white);font-size:calc(44 * var(--u));rotate:12deg;text-shadow:0 2px 10px rgba(41,17,20,.35)}
.hexlabel{display:flex;align-items:center;justify-content:center;color:var(--burgundy)}
.hexlabel__inner{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;width:80%}
.hero__label h1{font-size:clamp(34px, calc(58 * var(--u)), 58px);font-weight:900;font-stretch:62.5%;font-family:var(--pz-display);line-height:.95}
.notecard{background:var(--burgundy);color:var(--yellow);padding:26px 26px 30px;display:flex;flex-direction:column;align-items:center;gap:20px;box-shadow:var(--shadow);rotate:-4deg}
.scrolldown{width:44px;height:44px;border:1.5px solid var(--burgundy);border-radius:50%;display:flex;align-items:center;justify-content:center}
@media (max-width:899px){
  .hero .stage{height:auto;display:flex;flex-direction:column;padding:0 16px 48px}
  .hero__photo{height:62vw;min-height:260px;order:1}
  .hero__awning{order:0;margin:0 -16px -1px}
  .hero__label{order:2;margin-top:-40px;width:100%;min-height:250px;z-index:2}
  .hero__note{order:3;margin-top:24px;rotate:-2deg}
  .hero__pols{order:4;display:flex;gap:12px;margin-top:28px;justify-content:center}
  .hero__pol{width:44%;aspect-ratio:.86}
  .hero__script,.hero__plate,.scrolldown{display:none}
}
@media (min-width:900px){ .hero__pols{display:contents} }

/* ---------- Event tickets marquee ---------- */
.tickets{padding:24px 0 90px;text-align:center;overflow:hidden}
.tickets__track{display:flex;gap:12px;width:max-content;margin-top:28px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.tickets__track .tcard{will-change:transform}
.tcard{--r:14px;width:220px;height:120px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:var(--white);
  -webkit-mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat}
.tcard small{font:500 13px/1.4 var(--pz-mono);color:var(--muted)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Pattern band ---------- */
.band{height:420px;display:flex;align-items:center;justify-content:center}
.band__label{position:relative;z-index:1;background:var(--yellow);border:3px solid var(--burgundy);padding:26px 48px;text-align:center;transform:rotate(-2deg);max-width:calc(100% - 32px)}
.strip{height:220px}

/* ---------- Intro (Γεια σας) ---------- */
.intro{overflow:hidden}
.intro .stage{height:calc(1020 * var(--u))}
.intro__card{z-index:2}
.intro__plate{z-index:1}
.stamp{display:flex;align-items:center;justify-content:center}
.intro__card .inner{width:78%;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.intro__sig{font-size:48px}
.hex{display:flex;flex-direction:column;align-items:center;justify-content:center;width:200px;height:230px;text-align:center;color:var(--yellow)}
.hex b{font:900 56px/.95 var(--pz-display);font-stretch:62.5%}
.hex span{font:italic 700 18px/1.2 var(--pz-btn);max-width:150px}
.hex--black{color:var(--white)}
@media (max-width:899px){
  .intro .stage{height:auto;padding:56px 16px;display:flex;flex-direction:column;gap:24px}
  .intro__card{min-height:640px}
  .intro__pols{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .intro__pols .polaroid{width:46%;aspect-ratio:.88}
  .intro__badges{display:flex;justify-content:center;gap:12px}
  .intro .hex{scale:.8}
  .intro__plate{display:none}
}
@media (min-width:900px){ .intro__pols,.intro__badges{display:contents} .hex{width:calc(200*var(--u));height:calc(230*var(--u))} .hex b{font-size:calc(56*var(--u))} .hex span{font-size:calc(18*var(--u))} }

/* ---------- Packages: see "Packages like the reference foodtrucks section" below ---------- */

/* ---------- Steps ---------- */
.steps{background:var(--black);color:var(--yellow);overflow:hidden}
.steps__title{position:relative;z-index:2;padding:calc(120*var(--u)) 80px calc(40*var(--u))}
.steps__pin{position:relative;height:100vh;overflow:hidden}
.steps__wheel{position:absolute;left:-100vw;top:50%;width:300vw;height:300vw;z-index:1;pointer-events:none}
.steps__wheel .step{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);pointer-events:auto}
.steps__plate{position:absolute;z-index:0;left:calc(50% - 15vw);top:calc(43.5% + 19.5vw);width:30vw}
.step{width:25vw;height:18.75vw;max-width:440px;max-height:330px;color:var(--burgundy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 3vw;text-align:center}
.step .h4{font-size:clamp(18px,1.6vw,24px)}
.step .h3{font-size:clamp(24px,2.5vw,38px)}
.step .mono-s{font-size:clamp(12px,1vw,15px)}
@media (max-width:899px){
  .steps__title{padding:56px 16px 24px}
  .steps__pin{height:auto;overflow:visible;display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 16px}
  .steps__wheel{position:static;width:100%;height:auto;display:flex;justify-content:center}
  .steps__wheel .step{position:relative;left:auto;top:auto;transform:none}
  .step{width:100%;max-width:360px;height:auto;max-height:none;min-height:200px;padding:24px 28px}
  .steps__plate{position:relative;left:auto;top:auto;width:110vw;margin:30px 0 -45vw;order:9}
}
.ribbons{position:relative;height:28vw;min-height:260px;background:var(--canvas);overflow-x:clip}
.ribbon-wrap{position:relative;left:-5vw;width:110vw}
.ribbon{--rb:var(--burgundy);display:flex;align-items:center;justify-content:center;gap:2vw;padding:2vw 0;white-space:nowrap;font:900 clamp(30px,4.6vw,74px)/1 var(--pz-display);font-stretch:62.5%;will-change:transform}
.ribbon svg{width:.62em;height:.62em;flex:none}
.rw--top{top:-3.8vw;z-index:0;transform:rotate(2deg)}
.rw--top .ribbon{background:var(--burgundy);color:var(--yellow)}
.rw--center{top:-4.6vw;z-index:1;transform:rotate(-1deg)}
.rw--center .ribbon{--rb:var(--black);background:var(--black);color:var(--yellow)}
.rw--bottom{top:-5.5vw;z-index:0;transform:rotate(2deg)}
.rw--bottom .ribbon{--rb:var(--white);background:var(--white);color:var(--burgundy)}
@media (max-width:899px){ .ribbons{height:auto;min-height:0;padding:30px 0 10px} .ribbon{font-size:34px;padding:16px 0} .rw--top,.rw--center,.rw--bottom{top:0;margin-top:-8px} }

/* ---------- Benefits ---------- */
.benefits{overflow:hidden}
.benefits .stage{height:calc(1000 * var(--u))}
.benefits__card .inner{width:82%;display:flex;flex-direction:column;gap:14px}
.benefit__title{display:flex;align-items:center;gap:10px}
.benefit hr{border:0;border-top:1px solid var(--burgundy);margin:8px 0}
.benefits__cta{translate:-50% -50%}
@media (min-width:900px){ .benefits__cta{left:calc(1040 * var(--u))!important;top:calc(900 * var(--u))!important} }
@media (max-width:899px){
  .benefits .stage{height:auto;padding:56px 16px 70px;display:flex;flex-direction:column;align-items:center;gap:20px}
  .benefits__pols{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;order:2;width:100%}
  .benefits__pols .polaroid{width:46%;aspect-ratio:.88}
  .benefits__card{width:100%;order:1;padding:48px 0}
  .benefits__cta{translate:none;order:3}
}
@media (min-width:900px){ .benefits__pols{display:contents} }

/* ---------- Menu plate ---------- */
.menuplate{overflow:hidden}
.menuplate .stage{height:calc(1390 * var(--u))}
.menuplate__words{pointer-events:none;z-index:0}
.menuplate__words text{font:900 118px/1 var(--pz-display);font-stretch:62.5%;font-variation-settings:"wdth" 62.5;fill:var(--burgundy)}
.menuplate__words .o{fill:none;stroke:var(--burgundy);stroke-width:2.4px}
.menuplate__plate{z-index:1}
.plate>.photo--cut{inset:9%;background:none;border-radius:50%}
.plate>.photo--cut img{object-fit:contain}
.mticket{--r:16px;position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;background:var(--white);padding:34px 30px 30px;transform:rotate(var(--rot,0deg));
  -webkit-mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat;
          mask:radial-gradient(circle at 0 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 0/51% 51% no-repeat,radial-gradient(circle at 100% 0,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 0/51% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 0 100%/51% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 var(--r),#000 calc(var(--r) + .5px)) 100% 100%/51% 51% no-repeat;}
.mticket .ticket{padding:14px 20px}
.mcard{width:360px}
@media (min-width:900px){ .mcard{width:calc(360*var(--u))} .mticket .h2{font-size:calc(72*var(--u))} }
@media (max-width:899px){
  .menuplate .stage{height:auto;padding:56px 16px;display:flex;flex-direction:column;align-items:center;gap:24px}
  .menuplate__plate{width:92vw;order:1}
  .menuplate__words{display:none}
  .mcard{position:relative;width:100%;max-width:380px;order:2}
}

/* ---------- Booking ---------- */
.booking{position:relative;background:var(--black);overflow:hidden}
.booking .stage{height:calc(860 * var(--u))}
.checker{height:14px;background:repeating-linear-gradient(90deg,var(--black) 0 40px,var(--yellow) 40px 72px)}
.booking__bg{position:absolute;inset:14px 0 0 0;opacity:.6}
.booking__bg.photo{background:#3a2226}
.booking__script{color:var(--white);font-size:60px;rotate:-10deg}
.booking__label h2{font:900 clamp(28px, calc(40*var(--u)), 40px)/1 var(--pz-display);font-stretch:62.5%}
.booking__cta{translate:-50% 0}
@media (min-width:900px){ .booking__cta{left:calc(960*var(--u))!important} }
@media (max-width:899px){
  .booking .stage{height:auto;padding:70px 16px 80px;display:flex;flex-direction:column;align-items:center;gap:24px}
  .booking__label{width:100%;min-height:280px}
  .booking__cta{translate:none}
  .booking__pol{width:60%;aspect-ratio:.88}
  .booking__script{display:none}
}

/* ---------- Footer ---------- */
.footer{background:var(--burgundy);color:var(--yellow);padding:80px 80px 40px}
.footer__word{font:900 clamp(64px, 13.6vw, 196px)/.9 var(--pz-display);font-stretch:62.5%;margin-bottom:40px}
.footer__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.footer__cols h4{font:700 16px/1.4 var(--pz-mono);color:var(--white);margin-bottom:10px}
.footer__cols ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font:500 13px/1.5 var(--pz-mono)}
.footer__cols a{text-decoration:none}
.footer__legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,239,185,.4);margin-top:40px;padding-top:24px;font:500 13px/1.5 var(--pz-mono)}
@media (max-width:899px){ .footer{padding:56px 16px 110px} .footer__cols{grid-template-columns:1fr 1fr;gap:28px} .footer__cols>div{min-width:0} .footer .ticket{padding:14px 18px;font-size:17px} }

/* ---------- Floating UI ---------- */
.chat{position:fixed;right:24px;bottom:24px;z-index:50;width:60px;height:60px;border-radius:50%;background:var(--black);color:var(--yellow);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.sticky{position:fixed;left:50%;bottom:24px;z-index:45;display:flex;align-items:center;gap:20px;background:var(--black);color:var(--yellow);padding:12px 12px 12px 26px;border-radius:999px;transform:translate(-50%,140%);transition:transform .4s ease;font:500 14px/1.3 var(--pz-mono)}
.sticky.show{transform:translate(-50%,0)}
.mbar{display:none}
@media (max-width:899px){
  .sticky,.chat{display:none}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--black)}
  .mbar .ticket{flex:1;padding:14px 12px;font-size:17px}
}

@media (prefers-reduced-motion:reduce){ .tickets__track{flex-wrap:wrap;justify-content:center;width:auto;padding:0 16px} .ticket:hover{transform:none} }

/* ---------- Simple pages ---------- */
.page{max-width:900px;margin:0 auto;padding:70px 16px 120px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.form .full{grid-column:1/-1}
.form label{display:flex;flex-direction:column;gap:8px;font:500 14px/1.3 var(--pz-mono)}
.form input,.form select,.form textarea{font:500 16px/1.4 var(--pz-mono);color:var(--burgundy);background:var(--white);border:1.5px solid var(--burgundy);border-radius:6px;padding:14px 16px}
.form .consent{flex-direction:row;align-items:center}
.form__msg{grid-column:1/-1;padding:14px 16px;background:var(--white);border:1.5px dashed var(--burgundy);display:none}
.form__msg.show{display:block}
@media (max-width:640px){ .form{grid-template-columns:1fr} }

/* ---------- Mobile fixes (29/9) ---------- */
@supports (overflow:clip){ body{overflow-x:clip} }
.topbar__track{display:flex;gap:28px;flex-wrap:wrap;justify-content:center}
.topbar__track .dup{display:none}
@media (max-width:899px){
  .topbar{justify-content:flex-start;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;padding:8px 0;font-size:12px}
  .topbar__track{flex-wrap:nowrap;justify-content:flex-start;width:max-content;animation:marquee 26s linear infinite;padding-left:28px}
  .topbar__track .dup{display:inline}
  .topbar__track span{flex:none}
  .nav{padding:10px 12px}
  .nav__bar{padding:12px 18px;gap:12px}
  .nav.open .nav__links{left:0;right:0;top:calc(100% + 8px);z-index:60}
  .logo b{font-size:23px}
  .footer__word{font-size:min(15.5vw,120px);white-space:nowrap;overflow:hidden}
  .footer .ticket{white-space:normal;text-align:center}
}
@media (max-width:420px){
  .footer__cols{grid-template-columns:1fr}
  .logo svg{width:26px;height:26px}
  .logo b{font-size:21px}
}
@media (prefers-reduced-motion:reduce){ .topbar__track{animation:none} }

/* ---------- Elementor: v2 widgets sit edge to edge, like the static page ---------- */
.pz-root,.pz-root.e-con,.pz-root>.e-con-inner{--padding-top:0px;--padding-right:0px;--padding-bottom:0px;--padding-left:0px;--gap:0px;--row-gap:0px;--column-gap:0px;--widgets-spacing:0px;--container-max-width:none;padding:0;gap:0;max-width:none}
.pz-root>.elementor-widget,.pz-root>.e-con-inner>.elementor-widget{width:100%;max-width:100%;margin:0}
.elementor-widget[class*="elementor-widget-pz_"]>.elementor-widget-container{margin:0;padding:0}
.elementor .photo img,.elementor .polaroid img{height:100%;max-width:none}
.elementor .plate>.photo--cut img{height:100%}
.elementor-editor-active .steps__pin{height:auto;min-height:100vh}
.nav__links a{white-space:nowrap}

/* ---------- Header: same geometry as pizza-amici.nl (measured 29/9) ----------
   bar and CTA are two tickets that touch (no gap), same height (5em = 4.15vw), concave corners r = 15% of height,
   CTA = 20% of the header width, a short dark line (2em x 4px) sits centred on the joint. */
@media (min-width:900px){
  .nav{--nh:clamp(56px,4.15vw,82px);padding:14px clamp(14px,1.25vw,24px);align-items:stretch}
  .nav__bar,.nav .nav__cta{--r:calc(var(--nh) * .15);height:var(--nh)}
  .nav__bar{padding:0 clamp(20px,1.67vw,33px);gap:clamp(14px,1.4vw,28px)}
  .logo b{font-size:clamp(20px,1.75vw,30px)}
  .logo svg{width:clamp(24px,2vw,34px);height:clamp(24px,2vw,34px)}
  .nav .nav__cta{flex:0 0 20%;min-width:0;padding:0 12px;margin:0;font-size:clamp(16px,1.36vw,24px)}
  .nav__joint{flex:0 0 0;width:0;height:auto;margin:0;background:none;align-self:stretch;position:relative;z-index:3}
  .nav__joint::before{content:"";position:absolute;left:0;top:50%;width:clamp(18px,1.67vw,30px);height:4px;transform:translate(-50%,-50%);background:var(--black)}
}
@media (min-width:1061px){
  .nav__links{position:absolute;left:calc(50vw - clamp(14px,1.25vw,24px));top:50%;transform:translate(-50%,-50%);white-space:nowrap;gap:clamp(16px,2.8vw,56px)}
  .nav__links a{font-size:clamp(12px,.9vw,16px)}
}

/* ---------- Smooth scroll (Lenis, the reference runs Locomotive Scroll v5 = Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- Header: top bar + nav stick together; the top bar slides away when scrolling down ---------- */
.hdr{position:sticky;top:0;z-index:40;will-change:transform}

/* ---------- Page loader (logo spins in, curtain lifts with rounded bottom, like the reference) ---------- */
.loader{display:none;position:fixed;inset:0;z-index:200;pointer-events:none}
.js .loader{display:block;animation:pzLoaderSafety 0s linear 6s forwards}
@keyframes pzLoaderSafety{to{visibility:hidden}}
.loader__bg{position:absolute;inset:0;background:var(--yellow)}
.loader__logo{position:absolute;left:50%;top:50%;width:clamp(90px,9vw,150px);aspect-ratio:1;translate:-50% -50%;visibility:hidden}
.loader__logo svg{display:block;width:100%;height:100%}
.elementor-editor-active .loader{display:none!important}
@media (prefers-reduced-motion:reduce){ .js .loader{display:none} }

/* ---------- Buttons: the label rolls up on hover (reference: .button-text, .35s back ease) ---------- */
.ticket .roll{display:flex;flex-direction:column;height:1.3em;line-height:1.3;overflow:hidden;padding:0 .25em;margin:0 -.25em}
.ticket .roll>span{display:block;flex:none;height:1.3em;transition:transform .35s cubic-bezier(.175,.885,.32,1.275)}
@media (min-width:992px) and (hover:hover){ .ticket:hover .roll>span{transform:translateY(-100%)} }

/* ---------- Plates: dark variant for the burgundy packages section ---------- */
.plate--dark>.photo{inset:12%}

/* ---------- Packages like the reference foodtrucks section ----------
   --e = the reference "em" (1/120 of the viewport), capped with the rest of the site at 1440 */
.packages{--e:calc(12 * var(--u));--bh:calc(1.94 * var(--e));position:relative;overflow:hidden;color:var(--yellow);background:linear-gradient(transparent 0 var(--bh),var(--burgundy) var(--bh))}
.ft__border{height:var(--bh);background:linear-gradient(90deg,transparent 0 50%,var(--burgundy) 50% 100%) 0 0/10% 50.5% repeat-x,linear-gradient(90deg,var(--burgundy) 0 50%,transparent 50% 100%) 0 100%/10% 50.5% repeat-x;margin-bottom:-1px}
.ft__wrap{position:relative;max-width:1440px;margin:0 auto;padding:calc(9.86 * var(--e)) calc(6.4 * var(--e)) 0}
.ft__hero{position:relative;z-index:2;display:flex;flex-direction:column;gap:calc(2 * var(--e));max-width:calc(61.4 * var(--e))}
.ft__hero .d-xl{font-size:calc(8 * var(--e));line-height:.78;color:var(--yellow)}
.ft__text{max-width:calc(32 * var(--e));font:500 max(13px,calc(1.13 * var(--e)))/1.3 var(--pz-mono)}
.ft__cta{position:absolute;left:calc(45 * var(--e));bottom:calc(-.5 * var(--e));rotate:-4deg;height:calc(5.6 * var(--e));padding:0 calc(2.2 * var(--e));font-size:calc(1.63 * var(--e));--r:calc(.9 * var(--e))}
.hand{display:block;font:400 calc(2.5 * var(--e))/.85 var(--script);color:var(--burgundy);-webkit-text-stroke:calc(.43 * var(--e)) var(--yellow);paint-order:stroke fill;white-space:normal}
.ft__hand{position:absolute;z-index:3;pointer-events:auto}
.ft__hand--top{left:calc(85.4 * var(--e));top:calc(12.06 * var(--e));width:calc(16.4 * var(--e));rotate:6deg}
.ft__hand--bottom{left:calc(49.2 * var(--e));top:calc(100% + 1.4 * var(--e));rotate:-6deg}
.ft__slider{position:relative;margin-top:calc(2.4 * var(--e))}
.ft__nav{position:absolute;right:0;top:calc(-6.4 * var(--e));z-index:3;display:flex;gap:calc(.75 * var(--e))}
.ft__arrow{width:max(40px,calc(3.75 * var(--e)));height:max(40px,calc(3.75 * var(--e)));border-radius:50%;border:1px dashed var(--yellow);background:none;color:var(--yellow);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}
.ft__icons{display:flex;width:max(18px,calc(1.5 * var(--e)));overflow:hidden}
.ft__icons svg{flex:none;width:100%;height:auto;transition:transform .35s cubic-bezier(.175,.885,.32,1.275)}
.ft__icons svg:first-child{margin-left:-100%}
.is-prev .ft__icons{rotate:180deg}
.ft__arrow.is-disabled{opacity:.35;pointer-events:none}
@media (min-width:992px) and (hover:hover){ .ft__arrow:hover{transform:scale(1.04) rotate(-1deg)} .ft__arrow:hover .ft__icons svg{transform:translateX(100%)} }
.ft__plate{position:absolute;z-index:0;left:calc(-5 * var(--e));top:calc(32.1 * var(--e));width:calc(18 * var(--e))}
.ft__plate .plate{width:100%}
.ft__viewport{position:relative;z-index:1;touch-action:pan-y}
.ft__track{display:flex;width:max-content;will-change:transform;user-select:none;-webkit-user-select:none}
.ft__track.is-dragging{cursor:grabbing}
.ft__slide{flex:none;padding:0 calc(1.5 * var(--e))}
.ftc{display:block;width:calc(30.2 * var(--e));border:1.5px solid var(--yellow);padding:calc(.18 * var(--e));cursor:pointer;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);will-change:transform;outline-offset:4px}
@media (hover:hover){ .ftc:hover{transform:scale(1.03) rotate(1deg)} }
.ftc__inner{position:relative;display:flex;flex-direction:column;gap:calc(1 * var(--e));padding:calc(1.5 * var(--e)) calc(1.5 * var(--e)) calc(1 * var(--e));background:var(--yellow);color:var(--burgundy)}
.ftc__title{font:900 calc(5 * var(--e))/.78 var(--pz-display);font-stretch:62.5%;text-align:center;text-transform:uppercase;white-space:nowrap;padding-top:calc(.3 * var(--e))}
.ftc__img{position:relative;aspect-ratio:1}
.ftc__img .photo{position:absolute;inset:0;background:var(--yellow)}
.ftc__img img{-webkit-user-drag:none;user-select:none}
.ftc__frame{position:absolute;inset:-1px;background:url(../assets/brand/ft-frame.svg) 0 0/100% 100% no-repeat;pointer-events:none}
.ftc__details{display:flex;align-items:stretch}
.ftc__d{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.5 * var(--e));text-align:center}
.ftc__d:first-child{flex:0 0 auto;padding-right:calc(1 * var(--e));border-right:2px dotted var(--burgundy)}
.ftc__d:last-child{flex:1 1 auto;padding-left:calc(1 * var(--e))}
.ftc__d b{font:900 calc(3.75 * var(--e))/.78 var(--pz-display);font-stretch:62.5%;white-space:nowrap}
.ftc__d span{font:500 max(11px,calc(1 * var(--e)))/1.3 var(--pz-mono)}
.ftc__btn{width:100%;height:calc(5.1 * var(--e));padding:0;--r:calc(1 * var(--e));font-size:calc(1.63 * var(--e))}
.ftc__badge{position:absolute;z-index:2;top:calc(-1.1 * var(--e));left:50%;translate:-50% 0;rotate:-3deg;background:var(--burgundy);color:var(--yellow);border:2px solid var(--yellow);font:700 max(10px,calc(1 * var(--e)))/1 var(--pz-mono);padding:calc(.65 * var(--e)) calc(1.15 * var(--e));white-space:nowrap}
.packages__note{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:calc(3.4 * var(--e)) calc(6.4 * var(--e)) calc(6 * var(--e));font:500 max(12px,calc(1 * var(--e)))/1.5 var(--pz-mono);color:var(--yellow)}
@media (min-width:900px){ .packages__note{padding-right:calc(70 * var(--e))} }
@media (max-width:899px){
  .packages{--e:min(10px,calc((100vw - 48px) / 30.2))}
  .ft__wrap{padding:56px 16px 0}
  .ft__hero{max-width:none;gap:16px}
  .ft__hero .d-xl{font-size:clamp(44px,12vw,64px);line-height:.85}
  .ft__text{max-width:none;font-size:14px}
  .ft__cta{position:relative;left:auto;bottom:auto;align-self:flex-start;height:auto;padding:14px 26px;font-size:18px;margin:6px 0 0 4px}
  .ft__hand{display:none}
  .ft__slider{margin-top:28px;padding-top:56px}
  .ft__nav{top:0}
  .ft__slide{padding:0 12px 0 0}
  .ft__plate{top:calc(56px + 34 * var(--e));left:-40px}
  .packages__note{padding:28px 16px 40px}
}

/* ---------- Side panel opened from the package cards (reference: .modal, 45% wide, slides in from the right) ---------- */
.ftm{--me:max(8px,calc(100vw / 120));position:fixed;top:0;right:0;bottom:0;z-index:150;width:max(45vw,520px);max-width:100vw;padding:var(--me);background:var(--yellow);color:var(--burgundy);visibility:hidden;transform:translateX(100%);pointer-events:none}
.ftm[data-modal-status="open"]{pointer-events:auto}
.ftm__inner{position:relative;height:100%;border:1.5px solid var(--burgundy)}
.ftm__scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:calc(3 * var(--me)) calc(4 * var(--me));display:flex;flex-direction:column;gap:calc(2 * var(--me))}
.ftm__title{font:900 calc(6.5 * var(--me))/.8 var(--pz-display);font-stretch:62.5%;text-align:center;padding:0 calc(3 * var(--me))}
.ftm__close{position:absolute;z-index:3;top:calc(2 * var(--me));right:calc(2 * var(--me));width:max(40px,calc(4 * var(--me)));height:max(40px,calc(4 * var(--me)));border-radius:50%;border:1.5px solid var(--burgundy);background:var(--yellow);color:var(--burgundy);display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}
.ftm__close svg{width:max(16px,calc(1.3 * var(--me)));height:max(16px,calc(1.3 * var(--me)))}
@media (min-width:992px) and (hover:hover){ .ftm__close:hover,.stack__shuffle:hover{transform:scale(1.04) rotate(-1deg)} }
.ftm__media{display:flex;justify-content:center;padding-top:calc(.8 * var(--me))}
.stack{position:relative;width:calc(25 * var(--me));display:flex;flex-direction:column;align-items:center}
.stack__list{position:relative;width:100%;aspect-ratio:25/29.4}
.stack__item{position:absolute;inset:calc(-.8 * var(--me)) calc(-1 * var(--me))}
.stack__item[hidden]{display:none}
.stack__card{position:absolute;inset:0;background:var(--yellow);border:2px solid var(--burgundy);cursor:grab;touch-action:pan-y}
.stack__card.is--dragging{cursor:grabbing}
.stack__img{position:absolute;inset:calc(.5 * var(--me));width:calc(100% - var(--me));height:calc(100% - var(--me));object-fit:cover;pointer-events:none;user-select:none;-webkit-user-drag:none;background:var(--ph)}
.stack__shuffle{position:relative;z-index:5;display:flex;align-items:center;gap:calc(.47 * var(--me));margin-top:calc(-1.5 * var(--me));height:max(38px,calc(3.4 * var(--me)));padding:0 calc(1.88 * var(--me)) 0 calc(1.56 * var(--me));background:var(--burgundy);color:var(--yellow);border:0;font:500 max(14px,calc(1.3 * var(--me)))/1 var(--pz-mono);cursor:pointer;transition:transform .2s cubic-bezier(.175,.885,.32,1.275)}
.stack__shuffle svg{width:max(16px,calc(1.3 * var(--me)));height:max(16px,calc(1.3 * var(--me)))}
.ftm__grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--burgundy);border-left:1px solid var(--burgundy)}
.ftm__col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.5 * var(--me));padding:var(--me);border-right:1px solid var(--burgundy);border-bottom:1px solid var(--burgundy);text-align:center;min-height:calc(6.8 * var(--me))}
.ftm__col b{font:900 calc(3.5 * var(--me))/.8 var(--pz-display);font-stretch:62.5%;white-space:nowrap}
.ftm__col span{font:500 max(12px,calc(1.05 * var(--me)))/1.3 var(--pz-mono)}
.ftm__body{display:flex;flex-direction:column;gap:calc(1.6 * var(--me));padding-bottom:calc(1 * var(--me))}
.ftm__h{font:900 calc(3.2 * var(--me))/.9 var(--pz-display);font-stretch:62.5%}
.ftm__menu{display:flex;flex-direction:column}
.ftm__group{padding:calc(1.2 * var(--me)) 0;border-top:2px dotted var(--burgundy)}
.ftm__group:last-child{border-bottom:2px dotted var(--burgundy)}
.ftm__gt{font:900 calc(2.3 * var(--me))/1 var(--pz-display);font-stretch:62.5%}
.ftm__gn{font:italic 700 max(14px,calc(1.3 * var(--me)))/1.3 var(--pz-btn);margin-top:calc(.3 * var(--me))}
.ftm__group ul{list-style:none;margin:calc(.7 * var(--me)) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:calc(.4 * var(--me)) calc(1.4 * var(--me));font:500 max(13px,calc(1.2 * var(--me)))/1.4 var(--pz-mono)}
.ftm__group li::before{content:"■";font-size:.6em;vertical-align:.25em;margin-right:.6em}
.ftm__note{font:500 max(13px,calc(1.13 * var(--me)))/1.5 var(--pz-mono)}
.ftm__cta{align-self:flex-start}
@media (max-width:767px){
  .ftm{--me:9px;width:100vw}
  .ftm__scroll{padding:64px 20px 28px}
  .ftm__title{font-size:52px;padding:0 44px}
  .stack{width:calc(19 * var(--me))}
}