/* =============================================================================
   STREET BARBER'S STUDIO — Giovanni Canneva
   app.css

   Palette: nero, grigi, oro. Nessun rosso.
   Movimento: la parallasse tocca solo i livelli decorativi, mai il testo.
   Le immagini non si deformano mai al passaggio del mouse: si vedono e basta.
   Filo conduttore: un paio di forbici che scende con te lungo la pagina e,
   nel passaggio chiave, taglia lo schermo per aprire la sezione successiva.

   1 token · 2 base · 3 tipografia · 4 bottoni · 5 navbar · 6 forbici
   7 hero · 8 taglio · 9 sezioni · 10 wizard · 11 contatti · 12 footer
   13 lightbox · 14 responsive · 15 accessibilita'
   ========================================================================== */

/* ============================== 1. TOKEN ================================= */
:root {
  /* Carta: chiara ma mai bianco pieno, che a schermo abbaglia. Grigi neutri,
     senza una goccia di giallo: il caldo lo mette l'oro, non lo sfondo. */
  --paper:    #f6f6f7;
  --paper-1:  #ecedee;
  --paper-2:  #e3e4e6;
  --paper-3:  #d8d9dc;
  --line:     rgba(24, 24, 24, .13);
  --line-2:   rgba(24, 24, 24, .28);

  --ink:      #161616;
  --txt:      #2b2b2b;
  --txt-dim:  #575757;
  --txt-mute: #686868;

  /* oro spento, da metallo vero: nessun riflesso finto, nessun gradiente */
  --gold:     #96773c;
  --gold-lt:  #b1934f;
  --gold-dk:  #6d5626;

  --f-display: "Archivo Black", "Arial Black", "Helvetica Neue", Impact, system-ui, sans-serif;
  --f-sans:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif:   "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --f-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap:  min(1280px, 100% - clamp(24px, 6vw, 110px));
  --gut:   clamp(14px, 1.6vw, 22px);
  --sec-y: clamp(78px, 10vh, 140px);
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  10px;

  --e-out:    cubic-bezier(.16, .84, .32, 1);
  --e-soft:   cubic-bezier(.22, 1, .36, 1);
  --e-in-out: cubic-bezier(.65, .02, .25, 1);
  --t-fast:   .2s;
  --t-mid:    .4s;
  --t-slow:   .75s;

  --head-h: 76px;
  --tab-h:  calc(64px + env(safe-area-inset-bottom, 0px));

  color-scheme: light;
}

/* ============================== 2. BASE ================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Le aree restano scorrevoli con mouse e dito, ma senza la barra grigia che
   ruba spazio e sembra un elemento dell'interfaccia. */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 18px);
  width: 100%; max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100svh;
  width: 100%; max-width: 100%;
  background: var(--paper);
  color: var(--txt);
  font: 400 clamp(15px, .5vw + 13.6px, 16.5px)/1.72 var(--f-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
body.no-scroll { overflow: hidden; }

img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
ul, ol { list-style: none; margin: 0; padding: 0; }
figure, p, h1, h2, h3, h4, dl, dd { margin: 0; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }

::selection { background: var(--gold); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

svg[viewBox] path, svg[viewBox] rect, svg[viewBox] circle,
svg[viewBox] line, svg[viewBox] polyline {
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* il clone creato da <use> vive in shadow DOM: si colora solo per eredita' */
.card__ico svg, .pick__ico svg { fill: currentColor; stroke: none; }

/* niente grana sopra la scena d'apertura: sul nero si vedrebbe
   pulsare, ed e' esattamente cio' che si scambia per sfarfallio */
.on-dark .grain { display: none; }

.grain {
  position: fixed; inset: -50%;
  z-index: 8; pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================ 3. TIPOGRAFIA ============================== */
.h1 { font: 400 clamp(1.85rem, 4vw, 3.3rem)/1.08 var(--f-display); letter-spacing: -.025em; text-transform: uppercase; color: var(--ink); }
.h2 { font: 400 clamp(1.35rem, 2.5vw, 2.05rem)/1.14 var(--f-display); letter-spacing: -.022em; text-transform: uppercase; color: var(--ink); }
.h3 { font: 600 clamp(1rem, 1.5vw, 1.15rem)/1.4 var(--f-sans); }
.gold { color: var(--gold); }
/* contorno: la resa che piace nel claim del footer */
.stroke {
  color: var(--txt-dim);
  -webkit-text-stroke: 0;
}
@supports not (-webkit-text-stroke: 1px #000) { .stroke { color: var(--txt-mute); } }
.thin { color: var(--txt-dim); }

.display {
  font: 400 clamp(1.62rem, 3.4vw, 2.95rem)/1.08 var(--f-display);
  letter-spacing: -.03em; text-transform: uppercase; margin: 0; color: var(--ink);
  text-wrap: balance;
}

.eyebrow, .kicker {
  display: flex; align-items: center; gap: 12px;
  font: 500 .64rem/1 var(--f-mono);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-dk);
}
.eyebrow { margin-bottom: clamp(16px, 2vw, 26px); }
.eyebrow::before {
  content: ""; flex: none; width: clamp(20px, 3vw, 44px); height: 1px;
  background: var(--gold); opacity: .7;
}
.kicker { color: var(--txt-dim); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 200;
  transform: translateY(-180%);
  padding: 12px 18px; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-weight: 700;
  transition: transform var(--t-fast) var(--e-out);
}
.skip-link:focus-visible { transform: none; }

/* ============================== 4. BOTTONI =============================== */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 50px; padding: 0 clamp(18px, 1.7vw, 26px);
  font: 600 .7rem/1 var(--f-sans);
  letter-spacing: .15em; text-transform: uppercase;
  border-radius: 999px; border: 1px solid transparent;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color var(--t-fast) linear, border-color var(--t-mid) linear,
              background var(--t-mid) linear, box-shadow var(--t-mid) var(--e-out),
              transform var(--t-fast) var(--e-out);
}
.btn > span { position: relative; z-index: 2; }
.btn__arrow { width: 16px; height: 16px; position: relative; z-index: 2; transition: transform var(--t-mid) var(--e-out); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--primary {
  color: #fff; background: var(--ink); border-color: var(--ink);
}
.btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(105deg, transparent 34%, rgba(255,255,255,.18) 50%, transparent 66%);
  transform: translateX(-125%);
  transition: transform .9s var(--e-out);
}
.btn--primary:hover { transform: translateY(-2px); background: var(--gold-dk); border-color: var(--gold-dk); }
.btn--primary:hover::after { transform: translateX(125%); }

.btn--ghost { color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: rgba(150,119,60,.06); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .64rem; }

.rnd {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: rgba(246,246,247,.9); backdrop-filter: blur(10px);
  transition: border-color var(--t-fast) linear, color var(--t-fast) linear, background var(--t-fast) linear;
}
.rnd svg { width: 18px; height: 18px; }
.rnd:hover { border-color: var(--gold); color: var(--gold); }
.rnd--sm { width: 38px; height: 38px; }
.rnd[disabled] { opacity: .26; pointer-events: none; }

.chip {
  min-height: 40px; padding: 0 20px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--txt-mute);
  font: 600 .64rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase;
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.chip:hover { color: var(--txt); border-color: var(--line-2); }
.chip.is-on { color: #fff; border-color: var(--ink); background: var(--ink); }

/* ---------------------- comparsa: direzioni diverse --------------------- */
[data-reveal] {
  opacity: 0;
  transition: opacity .66s var(--e-soft), transform .76s var(--e-soft);
  transition-delay: var(--d, 0ms);
}
[data-reveal="up"]    { transform: translateY(34px); }
[data-reveal="left"]  { transform: translateX(-44px); }
[data-reveal="right"] { transform: translateX(44px); }
[data-reveal="zoom"]  { transform: scale(.965); }
[data-reveal="line"]  { transform: none; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--e-soft); opacity: 1; }
[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* ============================== 5. NAVBAR ================================ */
/* isola flottante che si contrae allo scroll: cambia solo se stessa,
   il layout della pagina non si muove di un pixel */
.site-head {
  position: fixed; top: 0; left: 50%; translate: -50% 0; z-index: 60;
  /* tre colonne uguali ai lati: il menu resta al centro dello schermo
     qualunque sia la larghezza del marchio o dei bottoni */
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: clamp(10px, 1.6vw, 24px);
  width: 100%; height: var(--head-h);
  padding: 0 clamp(16px, 4vw, 52px);
  border: 1px solid transparent; border-radius: 0;
  background: transparent;
  transition: width .52s var(--e-soft), height .38s var(--e-soft), top .52s var(--e-soft),
              padding .38s var(--e-soft), border-radius .38s ease,
              background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-head.is-stuck {
  background: rgba(246,246,247,.94);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(0,0,0,.5);
}
/* La contrazione a pillola vale solo da tablet in su: su telefono ruberebbe
   larghezza al marchio e farebbe ballare la testata a ogni scorrimento. */
@media (min-width: 900px) {
  .site-head.is-stuck {
    width: min(1120px, 100% - 28px);
    height: 60px; top: 12px;
    padding: 0 10px 0 22px;
    border-radius: 999px;
    border-color: var(--line);
    box-shadow: 0 14px 34px -20px rgba(0,0,0,.35);
  }
}
/* sopra la scena scura dell'apertura la barra scrive in chiaro;
   appena si stacca torna scritta scura su carta */
.on-dark .site-head:not(.is-stuck) { color: #fff; }

/*
   Sopra il video la barra e' trasparente, quindi la leggibilita' dipendeva
   dal fotogramma che scorreva dietro: su un frame chiaro il marchio bianco e
   l'hamburger sparivano, e riapparivano poco dopo. Una velatura che sfuma
   verso il basso rimette il contrasto sotto il nostro controllo invece che
   sotto quello del video. Non si nota, ma non lascia piu' buchi.
*/
.on-dark .site-head:not(.is-stuck)::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: calc(var(--head-h) + 26px);
  background: linear-gradient(to bottom, rgba(10, 9, 8, .55), rgba(10, 9, 8, 0));
  pointer-events: none;
  z-index: -1;
}
.on-dark .site-head:not(.is-stuck) .brand__txt i,
.on-dark .site-head:not(.is-stuck) .nav-main a { color: rgba(255,255,255,.72); }
.on-dark .site-head:not(.is-stuck) .nav-main a:hover { color: #fff; }
.on-dark .site-head:not(.is-stuck) .burger {
  border-color: rgba(255,255,255,.82);
  background: rgba(10, 9, 8, .58);
  backdrop-filter: blur(9px);
  box-shadow: 0 5px 18px rgba(0,0,0,.26);
}
.on-dark .site-head:not(.is-stuck) .burger__lines i {
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, .45);
}
.on-dark .site-head:not(.is-stuck) .btn--primary { background: #fff; border-color: #fff; color: var(--ink); }
.on-dark .site-head:not(.is-stuck) .btn--primary:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand img { width: 34px; height: auto; transition: opacity var(--t-mid) linear; }
.brand:hover img { opacity: .75; }
.brand__txt { display: block; min-width: 0; }
.brand__txt b { display: block; font: 400 clamp(.66rem, 2.6vw, .8rem)/1.2 var(--f-display); letter-spacing: .03em; text-transform: uppercase; }
.brand__txt i {
  display: block; font: 400 clamp(.52rem, 2.1vw, .6rem)/1.5 var(--f-mono); font-style: normal;
  letter-spacing: .2em; text-transform: uppercase; color: var(--txt-mute);
}

.nav-main { display: none; }
.head-actions { display: flex; align-items: center; gap: 10px; justify-self: end; min-width: 0; }
/* su schermo stretto la testata porta solo l'hamburger: il bottone Prenota
   sta dentro al menu, e cosi' non si accavallano due elementi tondi */
.head-actions .btn { display: none; }

.burger {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--line-2);
  transition: border-color var(--t-fast) linear;
}
.burger:hover { border-color: var(--gold); }
.burger__lines { display: grid; gap: 5px; width: 17px; }
.burger__lines i {
  display: block; height: 1.5px; background: var(--txt); border-radius: 2px;
  transition: transform var(--t-mid) var(--e-out), opacity var(--t-fast) linear, width var(--t-mid) var(--e-out);
}
.burger__lines i:nth-child(2) { width: 11px; margin-left: auto; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines i:nth-child(2) { opacity: 0; width: 17px; }
.burger[aria-expanded="true"] .burger__lines i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* pannello mobile */
.mobile-menu {
  position: fixed; inset: calc(var(--head-h) + 6px) 14px auto 14px; z-index: 59;
  display: grid; gap: 4px;
  padding: 16px;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: rgba(246,246,247,.97);
  backdrop-filter: blur(20px);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.35);
  transform-origin: 100% 0;
  animation: menuIn .34s var(--e-soft) both;
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
/* :not(.btn) perche' il bottone dorato ha un colore di testo suo */
.mobile-menu a:not(.btn) {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px; border-radius: var(--r-sm);
  font: 500 .95rem/1 var(--f-sans); letter-spacing: .02em;
  color: var(--txt-dim);
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.mobile-menu a em { font: 500 .6rem/1 var(--f-mono); font-style: normal; letter-spacing: .2em; color: var(--gold); }
.mobile-menu a:not(.btn):hover, .mobile-menu a:not(.btn).is-here { background: rgba(0,0,0,.045); color: var(--ink); }
.mobile-menu .btn { margin-top: 8px; }

/* ============================== 7. HERO ================================== */
.hero {
  --p: 0;
  position: relative;
  height: 210vh;
  margin-top: calc(var(--head-h) * -1);
}
.hero__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: grid; grid-template-rows: minmax(150px, 1fr) auto;
  padding-top: var(--head-h); padding-bottom: clamp(24px, 5vh, 54px);
  overflow: clip; isolation: isolate;
}
.hero__scene { position: relative; z-index: 2; overflow: clip; min-width: 0; }
.hero__layer { position: absolute; inset: 0; will-change: transform; }

/* fondale · il video a piena pagina: il livello piu' lontano e piu' lento */
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  overflow: clip;
  transform: translate3d(0, calc(var(--p) * -9vh), 0) scale(calc(1.1 + var(--p) * .22));
  will-change: transform;
}
.hero__bg video {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.5) contrast(1.12);
  opacity: calc(.62 - var(--p) * .4);
}
.hero__bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 70% at 50% 44%, rgba(8,8,10,.1), rgba(8,8,10,.9) 84%),
    linear-gradient(180deg, rgba(8,8,10,.86), transparent 30%, transparent 64%, var(--ink));
}
/* livello 2 · la parola gigante, velocita' media, va in senso opposto */
.hero__layer--type {
  display: grid; place-items: center;
  opacity: calc(.055 - var(--p) * .04);
  transform: translate3d(calc(var(--p) * -18vw), calc(var(--p) * 16vh), 0);
}
.hero__layer--type span {
  font: 400 clamp(6rem, 19vw, 15rem)/1 var(--f-display);
  letter-spacing: -.03em; color: transparent;
  -webkit-text-stroke: 1px var(--txt-mute); white-space: nowrap;
}
/* livello 3 · la foto del brand, la piu' vicina: si muove di piu' */
.hero__layer--shot {
  transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--p) * -22vh + var(--my, 0) * 9px), 0)
             scale(calc(1 + var(--p) * .1));
  transition: transform .4s var(--e-out);
}
.hero__layer--shot img {
  position: absolute; inset: 0; margin: auto;
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  filter: contrast(1.05);
  /* i bordi si dissolvono nel fondale invece di tagliare un rettangolo.
     Un solo livello di maschera: comporre due maschere non e' reso allo
     stesso modo ovunque e in alcuni casi fa sparire del tutto l'immagine. */
  -webkit-mask-image: radial-gradient(112% 108% at 50% 50%, #000 60%, transparent 100%);
  mask-image: radial-gradient(112% 108% at 50% 50%, #000 60%, transparent 100%);
}
.hero__fade {
  position: absolute; inset: auto -1px -1px -1px; height: 22%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--ink));
}

.hero__copy {
  position: relative; z-index: 3;
  width: var(--wrap); margin-inline: auto;
  display: grid; gap: clamp(11px, 1.4vw, 18px);
  opacity: clamp(0, calc(1 - var(--p) * 1.7), 1);
}
.display__line { display: block; overflow: clip; padding-block: .14em; margin-block: -.14em; }
.display__line > span { display: block; transform: translateY(112%); transition: transform 1.1s var(--e-soft); }
.display__line:nth-child(2) > span { transition-delay: .12s; }
.is-ready .display__line > span { transform: none; }

.hero__sub {
  font: 400 clamp(.7rem, .82vw, .8rem)/1.7 var(--f-mono);
  letter-spacing: .24em; text-transform: uppercase; color: var(--txt-mute);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.hero__scroll {
  position: absolute; left: clamp(16px, 2.4vw, 40px); bottom: clamp(20px, 4vh, 40px);
  z-index: 4; display: none; align-items: center; gap: 14px;
  font: 500 .58rem/1 var(--f-mono); letter-spacing: .34em; text-transform: uppercase;
  color: var(--txt-mute);
  writing-mode: vertical-rl;
  opacity: clamp(0, calc(1 - var(--p) * 3), 1);
}
.hero__scroll-bar { width: 1px; height: 62px; background: rgba(255,255,255,.16); position: relative; overflow: hidden; }
.hero__scroll-bar::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  animation: scrollRun 2.4s var(--e-in-out) infinite;
}
@keyframes scrollRun { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ============================== 9. SEZIONI =============================== */
.section { position: relative; width: var(--wrap); margin-inline: auto; padding-block: var(--sec-y); }
.section--tight { padding-block: clamp(48px, 6vh, 90px); }
.section__head { margin-bottom: clamp(30px, 4vw, 56px); max-width: 64ch; }
.section__head--split { max-width: none; display: grid; gap: clamp(16px, 2.6vw, 40px); align-items: end; }
.section__lead { color: var(--txt-dim); max-width: 48ch; margin-top: 20px; }
.section__head--split .section__lead { margin-top: 0; }
.section__foot { margin-top: clamp(32px, 4vw, 54px); display: flex; flex-wrap: wrap; gap: 12px; }

.page-head {
  position: relative;
  padding-top: calc(var(--head-h) + clamp(40px, 6vh, 78px));
  padding-bottom: clamp(18px, 3vh, 34px);
}
/* dopo l'intestazione di pagina la sezione non ha bisogno di ripartire da capo */
.page-head + .section { padding-top: clamp(18px, 3vh, 38px); }
.page-head__in { width: var(--wrap); margin-inline: auto; display: grid; gap: 18px; }
.page-head__in .display { max-width: 18ch; }
.crumb { font: 500 .62rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-mute); }
.crumb a:hover { color: var(--gold); }
.crumb span { color: var(--gold); }

/* ---- blocco editoriale a due colonne ---- */
.split { display: grid; gap: clamp(26px, 4vw, 60px); align-items: center; }
.split__shot { overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); }
.split__shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split__copy { display: grid; gap: 20px; justify-items: start; }
.split__copy p:not(.eyebrow) { color: var(--txt-dim); max-width: 46ch; }

/* ---- marquee ---- */
.marquee {
  position: relative; z-index: 2;
  /* stessa aria sopra e sotto: la riga scorrevole respira invece di
     appiccicarsi alla scena d'apertura */
  margin-block: clamp(46px, 7vh, 92px);
  padding-block: clamp(14px, 1.8vw, 22px);
  border-block: 1px solid var(--line);
  background: var(--paper-1);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 52s linear infinite; }
/* Sul telefono la striscia percorre molta meno larghezza, quindi alla stessa
   durata sembra ferma: si accorcia il giro perche' la velocita' percepita
   resti la stessa del desktop. */
@media (max-width: 760px) {
  .marquee__track { animation-duration: 22s; }
}
@media (max-width: 480px) {
  .marquee__track { animation-duration: 16s; }
}
.marquee__track span {
  padding-right: 1ch;
  font: 400 clamp(1.15rem, 2.7vw, 2rem)/1 var(--f-display);
  letter-spacing: -.02em; text-transform: uppercase; color: var(--txt-mute);
  white-space: nowrap;
}
.marquee__track span i { font-style: normal; color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* la sezione che segue non raddoppia lo stacco gia' dato dal margine */
.marquee + .section { padding-top: 0; }

/* ---- selezione servizi in home: tre proposte e accesso al listino ---- */
.service-highlights {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 24px);
}
.service-tile {
  min-width: 0; min-height: 260px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: clamp(19px, 3vw, 34px);
  border: 1px solid var(--line); border-radius: 16px 5px 16px 5px;
  background: var(--paper);
  transition: border-color var(--t-mid), background var(--t-mid);
}
.service-tile .card__ico { color: var(--gold); }
.service-tile .card__t {
  font: 400 clamp(1.04rem, 2vw, 1.55rem)/1.2 var(--f-display);
  text-transform: uppercase; letter-spacing: -.025em; overflow-wrap: anywhere;
}
.service-tile .card__go { margin-top: auto; min-height: 44px; }
.service-tile--all { border-color: var(--gold); background: var(--ink); color: var(--paper); }
.service-tile--all .eyebrow { color: #d1b275; font-size: .57rem; line-height: 1.5; margin-bottom: 0; }
.service-tile--all .card__d { color: #c8c8c8; }
.service-tile--all:hover { background: #222; border-color: var(--gold-lt); }
.service-tile__arrow { margin-top: auto; color: #d1b275; font-size: 2rem; line-height: 1; }
.card__meta { font-size: .82rem; line-height: 1.6; font-weight: 600; color: var(--gold-dk); }
@media (min-width: 1000px) {
  .service-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .service-tile { min-height: 300px; }
}

/* ---- carosello pinnato: tre proposte e la quarta scheda listino ---- */
.pin { --p: 0; position: relative; height: 420vh; }
.pin.services-preview { height: 300svh; }
.pin__stage {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; flex-direction: column;
  gap: clamp(14px, 2.4vh, 26px);
  padding-bottom: clamp(24px, 5vh, 52px);
  overflow: clip;
}
.pin__head { flex: none; width: var(--wrap); margin-inline: auto; padding-top: clamp(96px, 13vh, 150px); }
.pin__deck { flex: 1; min-height: 0; display: grid; grid-template-areas: "p"; place-items: center; }
.pin__stage { background: var(--paper); }
.pin__card {
  --i: 0;
  --n: 6;
  --c: clamp(0, calc(var(--p) / .86), 1);
  --o: calc(var(--i) - var(--c) * (var(--n) - 1));
  --k: min(max(var(--o), -1 * var(--o)), 2.4);

  grid-area: p;
  width: min(520px, 84vw);
  max-height: 100%;
  display: grid; gap: 16px; align-content: start;
  padding: clamp(26px, 3vw, 42px);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  /* fondo pieno: le schede vicine non lasciano trasparire il testo */
  background: var(--paper);
  box-shadow: 0 30px 70px -44px rgba(0,0,0,.5);
  transform: translate3d(calc(var(--o) * 96%), 0, 0) scale(calc(1 - var(--k) * .1));
  opacity: calc(1 - var(--k) * .58);
  z-index: calc(10 - var(--k));
  pointer-events: none;
}
/* solo la scheda al centro resta cliccabile */
.pin[data-step="0"] .pin__card[data-i="0"],
.pin[data-step="1"] .pin__card[data-i="1"],
.pin[data-step="2"] .pin__card[data-i="2"],
.pin[data-step="3"] .pin__card[data-i="3"],
.pin[data-step="4"] .pin__card[data-i="4"],
.pin[data-step="5"] .pin__card[data-i="5"] { pointer-events: auto; }
.pin__card.is-current { pointer-events: auto; }
.pin__card.service-tile--all { border-color: var(--gold); background: var(--ink); color: var(--paper); }
.pin__card.service-tile--all p { color: #c8c8c8; }
.pin__card .card__ico { width: 44px; height: 44px; color: var(--gold); }
.pin__card .card__ico svg { width: 100%; height: 100%; }
.pin__card h3 { font: 400 clamp(1.25rem, 2.3vw, 1.8rem)/1.12 var(--f-display); text-transform: uppercase; letter-spacing: -.025em; }
.pin__card p { color: var(--txt-dim); }
.pin__bar { flex: none; width: var(--wrap); margin-inline: auto; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.pin__bar i {
  position: absolute; inset: 0 auto 0 0; width: 100%;
  background: var(--gold);
  transform-origin: 0 50%;
  transform: scaleX(clamp(0, calc(var(--p) / .86), 1));
}
/* Senza JavaScript le quattro proposte rimangono scorribili con il dito. */
.services-preview:not([data-carousel-ready]) { height: auto; }
.services-preview:not([data-carousel-ready]) .pin__stage { position: static; height: auto; }
.services-preview:not([data-carousel-ready]) .pin__deck {
  display: flex; gap: 18px; overflow-x: auto;
  padding: 18px 8vw 32px; scroll-snap-type: x mandatory;
}
.services-preview:not([data-carousel-ready]) .pin__card {
  flex: 0 0 min(520px, 84vw); transform: none; opacity: 1;
  scroll-snap-align: center; pointer-events: auto;
}
.services-preview:not([data-carousel-ready]) .pin__bar { display: none; }

/* ---- griglia servizi (pagina servizi) ---- */
.cards {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  border-top: 1px solid var(--line);
}
.card { border-bottom: 1px solid var(--line); }
.card__in {
  position: relative; height: 100%;
  display: grid; gap: 14px; align-content: start;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2vw, 26px);
  transition: background var(--t-mid) linear;
}
.card__in::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .55s var(--e-out);
}
.card:hover .card__in { background: var(--paper-1); }
.card:hover .card__in::after { transform: none; }
.card__ico { width: 40px; height: 40px; color: var(--txt-mute); transition: color var(--t-mid) linear; }
.card__ico svg { width: 100%; height: 100%; }
.card:hover .card__ico { color: var(--gold); }
.card__t { font: 600 1rem/1.35 var(--f-sans); }
.card__d { font-size: .9rem; line-height: 1.68; color: var(--txt-dim); }
.card__go {
  margin-top: 4px; display: inline-flex; align-items: center; gap: 9px;
  font: 600 .62rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--txt-mute);
  transition: color var(--t-fast) linear, gap var(--t-mid) var(--e-out);
}
.card__go svg { width: 14px; height: 14px; }
.card__go:hover { color: var(--gold); gap: 14px; }

/* Ogni servizio occupa un lato della riga; l'altro resta libero. Sul telefono
   il contenuto e' piu' ampio, mantenendo il ritmo sinistra/destra. */
.cards--alternating { grid-template-columns: minmax(0, 1fr); }
.cards--alternating .card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--alternating .card__in {
  grid-column: 1 / -1; width: 86%; justify-self: start;
  padding: clamp(26px, 4vw, 54px) clamp(12px, 2vw, 28px);
  justify-items: start; gap: 16px;
}
.cards--alternating .card:nth-child(even) .card__in { justify-self: end; justify-items: end; text-align: right; }
.cards--alternating .card__ico { width: 50px; height: 50px; color: var(--gold); }
.cards--alternating .card__t { font: 400 clamp(1.25rem, 2.4vw, 2rem)/1.2 var(--f-display); text-transform: uppercase; }
.cards--alternating .card__d { max-width: 40ch; }
.cards--alternating .card__go { min-height: 44px; margin-top: 0; }
@media (min-width: 760px) {
  .cards--alternating .card__in { grid-column: 1; width: 100%; }
  .cards--alternating .card:nth-child(even) .card__in { grid-column: 2; }
}

/* ---- vetrina orizzontale ---- */
.reel { position: relative; }
.reel__track {
  display: flex; gap: var(--gut);
  overflow-x: auto; overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__item { flex: 0 0 clamp(232px, 28vw, 340px); margin: 0; scroll-snap-align: start; }
.reel__btn {
  position: relative; display: block; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--paper-2);
  transition: border-color var(--t-mid) linear;
}
.reel__btn img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.reel__item:hover .reel__btn { border-color: var(--gold); }
.reel__cap {
  position: absolute; inset: auto 0 0 0;
  display: grid; gap: 7px; justify-items: start;
  padding: 46px 18px 18px; text-align: left;
  background: linear-gradient(180deg, transparent, rgba(6,6,8,.92));
}
.reel__cap b { font: 600 .9rem/1.35 var(--f-sans); }
.reel__tag { font: 500 .54rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.reel__ctrl { margin-top: clamp(14px, 2vw, 22px); display: flex; align-items: center; gap: 16px; }
.reel__bar { flex: 1; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.reel__bar i { position: absolute; inset: 0 auto 0 0; width: var(--w, 30%); translate: var(--x, 0) 0; background: var(--gold); }

/* ---- filtri + griglia allineata ---- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(22px, 2.6vw, 32px); }
.grid { display: grid; gap: var(--gut); grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); }
.grid__empty { color: var(--txt-mute); text-align: center; padding: 60px 0; }

.tile {
  margin: 0; opacity: 0; transform: translateY(28px);
  transition: opacity .6s var(--e-out), transform .7s var(--e-soft);
  transition-delay: var(--d, 0ms);
}
.tile.is-in { opacity: 1; transform: none; }
.tile.is-out { display: none; }
.tile__btn {
  position: relative; display: block; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: var(--paper-2);
  transition: border-color var(--t-mid) linear;
}
.tile__btn img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: filter var(--t-mid) linear;
}
.tile:hover .tile__btn { border-color: var(--gold); }
.tile:hover .tile__btn img { filter: brightness(1.05); }
.tile__shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 46%, rgba(6,6,8,.9));
  opacity: .72; transition: opacity var(--t-mid) linear;
}
.tile:hover .tile__shade { opacity: .95; }
.tile__cap { position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; justify-items: start; padding: 16px; text-align: left; }
.tile__cap b { font: 600 .86rem/1.35 var(--f-sans); }
.tile__cap span { font: 500 .54rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.tile__play {
  position: absolute; top: 14px; right: 14px;
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(246,246,247,.9); backdrop-filter: blur(6px);
  border: 1px solid transparent; color: var(--ink);
  transition: background var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.tile__play svg { width: 15px; height: 15px; margin-left: 2px; }
.tile:hover .tile__play { background: var(--ink); color: #fff; }

/* ---- card con scia oro sfalsata (perche' sceglierci) ---- */
@property --gold-trace-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.reason-cards { display: grid; gap: 20px; }
.reason-card {
  position: relative; isolation: isolate; min-width: 0;
  display: grid; align-content: start; gap: 18px;
  padding: clamp(26px, 3.2vw, 42px);
  border: 1px solid rgba(150,119,60,.3); border-radius: 24px 8px 24px 8px;
  background: linear-gradient(135deg, #fafafb, var(--paper-1));
  box-shadow: 0 18px 42px -36px rgba(0,0,0,.35);
}
.reason-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--gold-trace-angle), transparent 0deg 238deg, rgba(150,119,60,.15) 270deg, #bd984d 310deg, #f6d594 334deg, transparent 360deg);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; animation: goldTrace 6s linear infinite;
  animation-delay: var(--trace-delay, 0s);
}
.reason-card:nth-child(2) { --trace-delay: 1.2s; }
.reason-card:nth-child(3) { --trace-delay: 2.4s; }
.reason-card:nth-child(4) { --trace-delay: 3.6s; }
@keyframes goldTrace { to { --gold-trace-angle: 360deg; } }
.reason-card__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 8px; }
.reason-card__icon { width: 42px; height: 42px; fill: currentColor; color: var(--gold); }
.reason-card__number { font: 400 2.4rem/1 var(--f-display); color: #c8bea9; letter-spacing: -.05em; }
.reason-card__title { font: 400 clamp(1.2rem, 2.1vw, 1.7rem)/1.18 var(--f-display); text-transform: uppercase; letter-spacing: -.025em; }
.reason-card__copy { color: var(--txt-dim); max-width: 52ch; }
@media (min-width: 760px) {
  .reason-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; padding-bottom: 24px; }
  .reason-card:nth-child(even) { translate: 0 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .reason-card::before { animation: none; background: linear-gradient(135deg, var(--gold-lt), transparent 55%, var(--gold)); }
}

/* ---- righe informative ---- */
.rows { border-top: 1px solid var(--line); }
.row {
  display: grid; gap: clamp(10px, 2vw, 40px);
  padding-block: clamp(26px, 3.4vw, 44px);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.row__t { font: 400 clamp(1.15rem, 2.1vw, 1.65rem)/1.16 var(--f-display); text-transform: uppercase; letter-spacing: -.025em; }
.row__d { color: var(--txt-dim); max-width: 52ch; }

/* ---- chi sono ---- */
.about__grid { display: grid; gap: clamp(26px, 3.4vw, 54px); }
.about__shot { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); }
.about__shot img { width: 100%; display: block; }
.about__shot--tall img { aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 38%; }
.about__shot--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.about__shot figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 18px 16px;
  background: linear-gradient(180deg, transparent, rgba(6,6,8,.9));
  font: 500 .6rem/1 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--txt-dim);
}
.about__text { display: grid; gap: 20px; align-content: center; }
.about__text p { color: var(--txt-dim); }
.about__text strong { color: var(--txt); font-weight: 600; }
.about__sign { font: 400 clamp(1.5rem, 2.6vw, 2.1rem)/1 var(--f-serif); font-style: italic; color: var(--gold); margin-top: 4px; }

.story { margin-top: clamp(46px, 6vw, 84px); display: grid; gap: clamp(24px, 3.4vw, 50px); align-items: center; }
.story__player {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: #101010;
  aspect-ratio: 9 / 16; width: 100%; max-width: 360px; margin-inline: auto;
  box-shadow: 0 44px 90px -60px #000;
}
.story__video { width: 100%; height: 100%; object-fit: cover; }
.story__play {
  position: absolute; inset: 0;
  display: grid; place-content: center; justify-items: center; gap: 16px;
  background: linear-gradient(180deg, rgba(6,6,8,.22), rgba(6,6,8,.66));
  color: var(--txt); font: 600 .62rem/1 var(--f-sans); letter-spacing: .24em; text-transform: uppercase;
  transition: opacity var(--t-mid) linear;
}
.story__play svg {
  width: 64px; height: 64px; padding: 20px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.42); background: rgba(255,255,255,.06); backdrop-filter: blur(6px);
  transition: background var(--t-mid) linear, color var(--t-mid) linear, border-color var(--t-mid) linear;
}
.story__play:hover svg { background: var(--gold); color: #fff; border-color: transparent; }
.story__player.is-playing .story__play { opacity: 0; pointer-events: none; }
.story__copy { display: grid; gap: 18px; }
.story__copy p:not(.eyebrow) { color: var(--txt-dim); max-width: 44ch; }

.thanks { margin-top: clamp(46px, 6vw, 84px); padding-top: clamp(32px, 4vw, 54px); border-top: 1px solid var(--line); display: grid; gap: clamp(26px, 3.4vw, 46px); }
.thanks__copy { display: grid; gap: 16px; }
.thanks__copy p:not(.eyebrow) { color: var(--txt-dim); max-width: 52ch; }
.thanks__strip { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
.thanks__shot { overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line); }
.thanks__shot img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  transition: transform var(--t-slow) var(--e-out);
}
.thanks__shot:hover img { transform: scale(1.03); }

/* ---- banda invito ---- */
.band {
  position: relative; overflow: hidden;
  border-block: 1px solid var(--line);
  background: var(--paper-1);
  padding-block: clamp(56px, 8vh, 110px);
}
.band__in { width: var(--wrap); min-width: 0; margin-inline: auto; display: grid; gap: 24px; justify-items: center; text-align: center; }
.band__in p { color: var(--txt-dim); max-width: 46ch; }

/* ============================== 10. WIZARD =============================== */
.wizard { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); overflow: hidden; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.steps__i {
  position: relative; display: flex; align-items: center; gap: 12px;
  min-width: 0;
  padding: clamp(15px, 1.9vw, 22px) clamp(12px, 1.6vw, 24px);
  color: var(--txt-mute); transition: color var(--t-mid) linear;
}
.steps__i + .steps__i { border-left: 1px solid var(--line); }
.steps__i::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .5s var(--e-out);
}
.steps__i.is-on { color: var(--txt); }
.steps__i.is-on::after, .steps__i.is-done::after { transform: none; }
.steps__i.is-done { color: var(--txt-dim); }
.steps__n {
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line-2); font: 500 .68rem/1 var(--f-mono);
  transition: background var(--t-mid) linear, border-color var(--t-mid) linear, color var(--t-mid) linear;
}
.steps__i.is-on .steps__n { background: var(--ink); border-color: var(--ink); color: #fff; }
.steps__i.is-done .steps__n { border-color: var(--gold); color: var(--gold); }
.steps__t {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 .64rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase;
}

.wz__viewport { overflow: hidden; min-height: var(--wzh, auto); transition: min-height .45s var(--e-soft); }
.wz__track { display: grid; }
.wz__panel {
  grid-area: 1 / 1;
  padding: clamp(24px, 3vw, 44px);
  display: grid; gap: clamp(24px, 2.8vw, 34px); align-content: start;
  opacity: 0; transform: translateX(var(--from, 48px));
  transition: opacity .38s linear, transform .55s var(--e-soft);
  pointer-events: none;
}
.wz__panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.wz__panel.is-back { --from: -48px; }
.wz__title { font: 600 clamp(1.05rem, 1.9vw, 1.3rem)/1.35 var(--f-sans); }

.fs { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; }
.fs__legend { padding: 0; font: 500 .6rem/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }

.staffs { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 290px)); }
.staff input, .pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.staff__box {
  position: relative; display: flex; align-items: center; gap: 15px;
  padding: 12px 46px 12px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.staff__box:hover, .pick__box:hover { border-color: var(--line-2); }
.staff__avatar { width: 50px; height: 50px; flex: none; border-radius: 50%; overflow: hidden; border: 1px solid var(--line-2); }
.staff__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: brightness(1.35) contrast(1.05); }
.staff__txt b { display: block; font-size: .92rem; font-weight: 600; }
.staff__txt i {
  display: block; font: 400 .6rem/1.6 var(--f-mono); font-style: normal;
  letter-spacing: .18em; text-transform: uppercase; color: var(--txt-mute);
}
.staff__tick, .pick__tick {
  position: absolute; top: 50%; right: 15px; translate: 0 -50%;
  width: 19px; height: 19px; border-radius: 50%; border: 1px solid var(--line-2);
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear;
}
.staff__tick::after, .pick__tick::after {
  content: ""; position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: 7px; height: 7px; border-radius: 50%; background: #fff;
  opacity: 0; transition: opacity var(--t-fast) linear;
}
.staff input:checked + .staff__box, .pick input:checked + .pick__box { border-color: var(--gold); background: rgba(150,119,60,.07); }
.staff input:checked + .staff__box .staff__tick, .pick input:checked + .pick__box .pick__tick { background: var(--gold); border-color: var(--gold); }
.staff input:checked + .staff__box .staff__tick::after, .pick input:checked + .pick__box .pick__tick::after { opacity: 1; }
.staff input:focus-visible + .staff__box, .pick input:focus-visible + .pick__box { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

/* menu che si apre: chiuso mostra la scelta, aperto mostra le schede */
.drop { position: relative; }
.drop__btn {
  /* posizionato: la freccetta si ancora al bottone. Senza questo si
     aggancerebbe a .drop, che da aperto comprende anche il pannello, e
     scivolerebbe in mezzo alle opzioni */
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 14px;
  min-height: 72px; padding: 12px 46px 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--paper); text-align: left;
  transition: border-color var(--t-fast) linear;
}
.drop__btn:hover { border-color: var(--ink); }
.drop.is-open .drop__btn { border-color: var(--ink); border-radius: var(--r-sm) var(--r-sm) 0 0; }
.drop__ico { flex: none; width: 30px; height: 30px; color: var(--gold); }
.drop__ico svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.drop__face { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); }
.drop__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.drop__txt { display: grid; gap: 2px; min-width: 0; }
.drop__txt b { font-size: .95rem; font-weight: 600; color: var(--ink); }
.drop__txt i {
  font: 500 .72rem/1.4 var(--f-sans); font-style: normal; color: var(--txt-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Il segno e' disegnato con due bordi ruotati: l'inchiostro non sta al
   centro del suo quadrato, e la traslazione compensa lo scarto nelle due
   posizioni. Tutto dentro transform, cosi' la rotazione resta fluida. */
.drop__arrow {
  position: absolute; right: 18px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--txt-mute); border-bottom: 2px solid var(--txt-mute);
  transform: translateY(-65%) rotate(45deg);
  transition: transform var(--t-mid) var(--e-out);
}
.drop.is-open .drop__arrow { transform: translateY(-35%) rotate(-135deg); }
.drop__panel {
  border: 1px solid var(--ink); border-top: 0;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  padding: 12px;
  max-height: min(58svh, 420px); overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
/* senza JavaScript il pannello resta aperto: si sceglie comunque */
.drop__panel[hidden] { display: none; }

.picks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.pick__box {
  position: relative; height: 100%;
  display: flex; align-items: center; gap: 13px;
  min-height: 62px; padding: 12px 44px 12px 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.pick__ico { flex: none; width: 24px; height: 24px; color: var(--txt-mute); }
.pick__ico svg { width: 100%; height: 100%; }
.pick input:checked + .pick__box .pick__ico { color: var(--gold); }
.pick__txt { display: grid; gap: 3px; min-width: 0; }
.pick__t { font-size: .86rem; line-height: 1.4; font-weight: 600; }
/* quanto dura e quanto costa, sotto al nome */
.pick__s {
  font: 500 .72rem/1.35 var(--f-sans); font-style: normal; color: var(--txt-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.when { display: grid; gap: clamp(22px, 2.8vw, 38px); }
.cal { border: 1px solid var(--line); border-radius: var(--r-md); padding: clamp(14px, 1.8vw, 20px); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.cal__month { flex: 1; text-align: center; font: 600 .82rem/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow { margin-bottom: 6px; text-align: center; font: 500 .58rem/1 var(--f-mono); letter-spacing: .12em; color: var(--txt-mute); }
.cal__dow span { padding: 6px 0; }
.cal__day {
  aspect-ratio: 1; min-height: 40px; display: grid; place-items: center;
  border-radius: 3px; border: 1px solid transparent; font: 500 .82rem/1 var(--f-sans);
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear, color var(--t-fast) linear;
}
.cal__day:hover:not([disabled]) { background: var(--paper-2); }
.cal__day[disabled] { color: var(--txt-mute); opacity: .3; cursor: not-allowed; }
.cal__day.is-empty { pointer-events: none; }
.cal__day.is-today { border-color: var(--line-2); }
.cal__day.is-sel { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 700; }
.cal__note { margin-top: 14px; font-size: .74rem; color: var(--txt-mute); }

.slots { display: grid; gap: 16px; align-content: start; }
.slots__head { font: 500 .6rem/1.6 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-mute); }
.slots__head b { color: var(--gold); margin-left: 6px; }
.slots__body { display: grid; gap: 18px; }
.slots__hint, .slots__none { color: var(--txt-mute); font-size: .86rem; }
.slots__group { display: grid; gap: 12px; animation: slotsIn .34s var(--e-soft) both; }
.slots__label { font: 500 .58rem/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--txt-mute); }
.slots__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.slots__pager {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center; gap: 10px;
}
.slots__pager .slots__label { text-align: center; color: var(--gold); }
.slots__arrow {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  font: 500 1.15rem/1 var(--f-sans);
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear, opacity var(--t-fast) linear;
}
.slots__arrow:hover:not(:disabled) { border-color: var(--gold); background: rgba(150,119,60,.07); }
.slots__arrow:disabled { opacity: .24; cursor: default; }
@keyframes slotsIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.slot {
  min-height: 44px; border-radius: 3px; border: 1px solid var(--line);
  font: 500 .82rem/1 var(--f-mono);
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear, color var(--t-fast) linear;
}

/* Occupato: si legge ancora, ma si vede che non e' da toccare. La riga
   sopra il testo dice "questo se n'e' andato" meglio di qualunque grigio. */
.slot.is-off {
  color: var(--txt-mute);
  opacity: .45;
  background: var(--paper-2);
  border-color: transparent;
  text-decoration: line-through;
  cursor: not-allowed;
}
.slot.is-off:hover { border-color: transparent; background: var(--paper-2); }
.slot:hover { border-color: var(--line-2); }
.slot.is-sel { background: var(--ink); border-color: var(--ink); color: #fff; font-weight: 700; }

.fields { display: grid; gap: 18px; align-content: start; }
.fields-side { display: grid; gap: 16px; align-content: start; }
.field { display: grid; gap: 8px; }
.field label { font: 500 .6rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-mute); }
.field input {
  width: 100%; min-width: 0;
  min-height: 52px; padding: 0 16px; border-radius: 3px;
  border: 1px solid var(--line-2); background: var(--paper);
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.field input:hover { border-color: var(--line-2); }
.field input:focus { outline: none; border-color: var(--ink); background: var(--paper); }
.field.has-err input { border-color: #a4322c; }

.remember {
  font-size: .8rem; line-height: 1.5; color: var(--txt-mute);
}
.remember a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.err { font-size: .78rem; color: #a4322c; }
.err--box { padding: 13px 15px; border-radius: 3px; border: 1px solid rgba(164,50,44,.35); background: rgba(164,50,44,.07); }

.recap { align-self: start; padding: clamp(20px, 2.2vw, 28px); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper-1); }
.recap__head { font: 500 .6rem/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.recap__list { display: grid; gap: 13px; }
.recap__list > div { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.recap__list dt { font: 500 .66rem/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mute); }
.recap__list dd { font-size: .88rem; font-weight: 600; text-align: right; }
.recap__where { margin-top: 18px; font-size: .8rem; color: var(--txt-mute); line-height: 1.7; }

.wz__nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wz__nav--center { justify-content: center; }
.wz__panel--done { justify-items: center; text-align: center; padding-block: clamp(46px, 7vw, 86px); }
.done__mark { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; border: 1px solid var(--gold); background: rgba(150,119,60,.08); color: var(--gold); }
.done__mark svg { width: 32px; height: 32px; stroke-width: 1.8; }
.done__txt { color: var(--txt-dim); max-width: 46ch; }
.wizard__fallback { padding: 0 clamp(24px, 3vw, 44px) clamp(24px, 2.8vw, 34px); font-size: .82rem; color: var(--txt-mute); }
.wizard__fallback a { color: var(--gold); }
.btn.is-busy { pointer-events: none; opacity: .7; }

/* ============================= 11. CONTATTI ============================== */
.contact__grid { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1px solid var(--line); }
.pane { display: grid; gap: 18px; align-content: start; padding: clamp(26px, 2.8vw, 38px) clamp(20px, 2vw, 28px); border-bottom: 1px solid var(--line); }
.pane + .pane { border-left: 1px solid var(--line); }
.pane__t { font: 500 .6rem/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.pane__p { font-size: .88rem; color: var(--txt-dim); }
.pane__link {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 .62rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--txt-mute);
  transition: color var(--t-fast) linear, gap var(--t-mid) var(--e-out);
}
.pane__link svg { width: 14px; height: 14px; }
.pane__link:hover { color: var(--gold); gap: 14px; }

.hours th, .hours td { padding: 10px 0; text-align: left; vertical-align: top; }
.hours th { font: 500 .7rem/1.6 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mute); white-space: nowrap; padding-right: 14px; }
.hours td { font-size: .9rem; font-weight: 600; text-align: right; }
.hours tr + tr { border-top: 1px solid var(--line); }
.hours .is-off td { color: var(--txt-mute); font-weight: 400; }

.addr { display: grid; gap: 5px; font-size: 1rem; font-weight: 600; }
.lines { display: grid; gap: 16px; }
.lines li { display: grid; gap: 4px; }
.lines span { font: 500 .56rem/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--txt-mute); }
.lines a { font-size: .93rem; font-weight: 600; word-break: break-word; }
.lines a:hover { color: var(--gold); }

.socials { display: grid; gap: 10px; }
.socials a {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font: 600 .66rem/1 var(--f-sans); letter-spacing: .18em; text-transform: uppercase;
  transition: border-color var(--t-fast) linear, color var(--t-fast) linear;
}
.socials a svg { width: 17px; height: 17px; }
.socials a:hover { border-color: var(--gold); color: var(--gold); }

/* ============================== 12. FOOTER =============================== */
/* Chiude la pagina in nero: il marchio e' bianco, e su carta chiara sarebbe
   sparito. Serve anche a dare un fondo alla lettura, invece di sfumare. */
/*
   La variabile --pad non e' mai stata definita: il browser scartava l'intera
   regola e il footer finiva appiccicato ai bordi dello schermo. Ora usa lo
   stesso contenitore delle sezioni, cosi' il piede della pagina si incolonna
   con il contenuto invece di correre da un bordo all'altro.
*/
.foot {
  background: var(--ink);
  color: rgba(255, 255, 255, .78);
  padding-block: clamp(52px, 6vw, 84px) clamp(22px, 2.4vw, 30px);
}
.foot__top,
.foot__bar { width: var(--wrap); margin-inline: auto; }

.foot__top {
  display: grid;
  gap: clamp(38px, 5vw, 64px);
  grid-template-columns: minmax(220px, 1fr) minmax(0, 2.1fr);
  align-items: start;
  padding-bottom: clamp(34px, 4vw, 52px);
}
@media (max-width: 860px) {
  .foot__top { grid-template-columns: 1fr; }
}

.foot__brandbox { display: grid; gap: 20px; justify-items: start; }
.foot__brand { display: block; }
.foot__brand img { width: 62px; height: auto; }
.foot__claim {
  font: 400 1.02rem/1.5 var(--f-display, var(--f-sans));
  color: #fff;
}

/* i social: due cerchi, non un elenco di parole */
.foot__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.foot__social a {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: rgba(255, 255, 255, .8);
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.foot__social a:hover {
  color: var(--ink);
  background: var(--gold-lt, #d9bd7f);
  border-color: var(--gold-lt, #d9bd7f);
}
.foot__social svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* le voci raggruppate per argomento invece che in fila indiana */
.foot__cols {
  display: grid;
  gap: clamp(26px, 3vw, 40px);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.foot__col { display: grid; gap: 11px; align-content: start; }
.foot__h {
  font: 500 .58rem/1 var(--f-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-lt, #d9bd7f);
  margin-bottom: 3px;
}
.foot__col a,
.foot__link {
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
  transition: color var(--t-fast) linear;
}
.foot__col a:hover,
.foot__link:hover { color: #fff; }

/* il pulsante delle preferenze deve sembrare un link come gli altri */
.foot__link {
  justify-self: start;
  padding: 0; border: 0; background: none;
  font-family: inherit; text-align: left; cursor: pointer;
}

.foot__bar {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  justify-content: space-between; align-items: center;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .76rem;
  color: rgba(255, 255, 255, .55);
}
.foot__bar a { color: rgba(255, 255, 255, .7); }
.foot__bar a:hover { color: var(--gold-lt); }
.foot__muted { opacity: 1; }

/* ============================= 13. LIGHTBOX ============================== */
.lb {
  width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh;
  margin: 0; padding: 0; border: 0;
  background: rgba(5, 5, 7, .97); color: var(--txt); overflow: hidden;
}
.lb::backdrop { background: rgba(5, 5, 7, .93); }
.lb[open] { display: grid; align-content: center; justify-items: center; }
.lb__fig { display: grid; gap: 18px; justify-items: center; width: min(100% - 32px, 1100px); animation: lbIn .42s var(--e-soft) both; }
@keyframes lbIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.lb__media { display: grid; place-items: center; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-2); background: #000; }
.lb__media img, .lb__media video { max-width: 100%; max-height: calc(100svh - 200px); width: auto; height: auto; object-fit: contain; }
.lb__cap { display: grid; gap: 7px; justify-items: center; text-align: center; }
.lb__cap b { font: 600 .95rem/1.4 var(--f-sans); }
.lb__cap span { font: 500 .56rem/1 var(--f-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.lb__close { position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; z-index: 3; }
.lb__nav { position: fixed; top: 50%; translate: 0 -50%; z-index: 3; }
.lb__nav--prev { left: 14px; }
.lb__nav--next { right: 14px; }

/* ============================ 14. RESPONSIVE ============================= */
@media (max-width: 759px) {
  /* Sul telefono le entrate laterali allargavano la pagina prima di essere
     visibili: durante lo scroll compariva carta bianca a destra e perfino
     l'hamburger veniva spinto oltre il bordo. Qui ogni entrata arriva dal
     basso, con una corsa corta e senza lunghi ritardi a scaletta. */
  [data-reveal] {
    transition-duration: .46s, .52s;
    transition-delay: min(var(--d, 0ms), 110ms);
  }
  [data-reveal="up"],
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(18px); }
  [data-reveal="zoom"] { transform: translateY(12px) scale(.985); }

  .site-head {
    left: 0; translate: none;
    width: 100%; max-width: 100%;
    padding-inline: 14px;
  }
  .brand__txt b, .brand__txt i {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .burger { flex: none; }

  .section, .page-head__in, .band__in, .pin__head, .pin__bar { min-width: 0; }
  .section > *, .page-head__in > *, .band__in > *, .when > *, .wz__panel > * { min-width: 0; }
  .row { gap: 12px; }
  .band { overflow: clip; }
  .band__in .btn { max-width: 100%; padding-inline: 18px; }

  .steps__i {
    flex-direction: column; justify-content: center; gap: 7px;
    padding: 12px 4px; text-align: center;
  }
  .steps__t { width: 100%; font-size: .54rem; letter-spacing: .09em; }
  .wz__panel {
    transform: translateX(var(--from, 20px));
    transition-duration: .3s, .42s;
  }
  .wz__panel.is-back { --from: -20px; }

  .slots__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
  .site-head { padding-inline: 10px; }
  .brand { gap: 8px; }
  .brand__txt i { display: none; }
  .slots__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 520px) {
  .thanks__strip { grid-template-columns: repeat(4, 1fr); }
  .foot__bar { grid-template-columns: 1fr auto; align-items: center; }
  .foot__bar p:last-child { text-align: right; }
  .brand img { width: 38px; }
}

@media (min-width: 760px) {
  .when { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .about__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-areas: "tall text" "wide wide"; }
  .about__shot--tall { grid-area: tall; }
  .about__text { grid-area: text; }
  .about__shot--wide { grid-area: wide; }
  .story { grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); }
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .thanks { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
  .section__head--split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .foot__top { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .foot__nav { grid-auto-flow: row; justify-items: end; }
  .foot__bar { grid-template-columns: 1fr auto; align-items: center; }
  .foot__bar p:last-child { text-align: right; }
  .row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); }
}

@media (min-width: 1000px) {
  /* la foto smette di stare "sopra" il testo: due colonne, niente sovrapposizioni */
  .hero__stage {
    grid-template-rows: 1fr;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(20px, 2.6vw, 48px);
    padding-inline: clamp(24px, 4vw, 70px);
  }
  .hero__scene { grid-column: 2; height: 100%; }
  .hero__copy { grid-column: 1; grid-row: 1; width: auto; margin: 0; max-width: 620px; }
  .burger { display: none; }
  .head-actions .btn { display: inline-flex; }
  .mobile-menu { display: none !important; }

  .site-head { grid-template-columns: 1fr auto 1fr; }
  .nav-main { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2vw, 30px); }
  .nav-main a {
    position: relative; padding: 8px 0;
    font: 600 .64rem/1 var(--f-sans); letter-spacing: .2em; text-transform: uppercase;
    color: var(--txt-mute); transition: color var(--t-fast) linear;
  }
  .nav-main a::after {
    content: ""; position: absolute; left: 50%; bottom: 2px;
    width: 0; height: 1.5px; border-radius: 2px; background: var(--gold);
    transform: translateX(-50%);
    transition: width .28s var(--e-soft);
  }
  .nav-main a:hover { color: var(--txt); }
  .nav-main a:hover::after, .nav-main a.is-here::after { width: 100%; }
  .nav-main a.is-here { color: var(--gold); }
  .head-actions { justify-self: end; }

}

@media (max-height: 620px) and (min-width: 760px) { .hero { height: 190vh; } }

/* ============================== 15. A11Y ================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .grain, .marquee__track { animation: none; }
  [data-reveal], .tile { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .display__line > span { transform: none !important; }
  .hero { height: auto; margin-top: 0; }
  .hero__stage { position: static; height: auto; min-height: 100svh; }
  .hero__layer { transform: none !important; }
  .hero__copy { opacity: 1 !important; }
  .pin, .pin.services-preview { height: auto; }
  .pin__stage { position: static; height: auto; display: block; }
  .pin__deck { display: grid; grid-template-areas: none; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gut); }
  .pin__card { grid-area: auto; position: static; transform: none !important; opacity: 1 !important; width: auto; pointer-events: auto; }
}

@media (prefers-contrast: more) {
  :root { --txt-dim: #333; --txt-mute: #4a4a4a; --line: rgba(24,24,24,.32); --line-2: rgba(24,24,24,.5); }
}

@media print {
  .site-head, .mobile-menu, .grain, .marquee, .lb { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===================== pagina di confronto (solo prove) ================== */
.cmp { display: grid; gap: var(--gut); grid-template-columns: 1fr; margin-top: 24px; }
.cmp figure { margin: 0; display: grid; gap: 10px; }
.cmp video { width: 100%; border-radius: var(--r-md); border: 1px solid var(--line); background: #000; }
.cmp figcaption { display: grid; gap: 2px; }
.cmp figcaption b { font-size: .95rem; font-weight: 700; color: var(--ink); }
.cmp figcaption span { font: 500 .78rem/1.5 var(--f-mono); color: var(--txt-mute); }
@media (min-width: 860px) { .cmp { grid-template-columns: 1fr 1fr; } }

/* =============================================================================
   I MIEI APPUNTAMENTI
   Una scheda per appuntamento, la stessa forma del riepilogo di prenotazione.
   ========================================================================== */
.mine__group {
  margin: 26px 0 12px;
  font: 500 .6rem/1 var(--f-mono);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--txt-mute);
}
.mine__group:first-child { margin-top: 0; }

.mine__card {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--paper);
}
.mine__card.is-off { opacity: .55; }

.mine__when {
  font: 500 .62rem/1.4 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-mute);
}
.mine__what { margin: 0; font-size: 1.05rem; line-height: 1.3; }
.mine__who { margin: 0; font-size: .88rem; color: var(--txt-mute); }

.mine__tag {
  justify-self: start;
  padding: 4px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font: 500 .6rem/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.mine__card .btn { justify-self: start; margin-top: 6px; }

/* avviso dei dati ricompilati da soli: si vede, e si puo' disfare */
.memo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin-bottom: 16px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 2px solid var(--gold);
  border-radius: var(--r-sm);
  font-size: .82rem; line-height: 1.5; color: var(--txt-mute);
}
.memo__x {
  padding: 0; border: 0; background: none;
  font: 600 .78rem/1.5 var(--f-sans); color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.memo__x:hover { color: var(--gold); }

.mine__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* la schermata di conferma: prima il fatto, poi il saluto */
.done__txt { display: grid; gap: 10px; justify-items: center; }
.done__line { font-size: 1.02rem; font-weight: 600; color: var(--ink); line-height: 1.5; }
.done__hi { color: var(--txt-mute); }

/* =============================================================================
   PAGINE LEGALI
   Testo lungo da leggere davvero: misura stretta, gerarchia chiara, tabelle
   che sanno diventare strette senza rompere la pagina.
   ========================================================================== */
.legal {
  max-width: 76ch;
  margin-inline: auto;
  font-size: .95rem;
  line-height: 1.75;
}

.legal__date {
  font: 500 .62rem/1.6 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--txt-mute);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.legal__intro { font-size: 1.02rem; color: var(--ink); }

.legal h2 {
  margin: 44px 0 14px;
  font-size: 1.18rem;
  line-height: 1.3;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.legal h3 { margin: 26px 0 8px; font-size: .98rem; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 18px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--gold); text-underline-offset: 3px; }
.legal code {
  font: 500 .84em/1 var(--f-mono);
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--paper-2, #f0efec);
}

/* le tabelle scorrono da sole invece di allargare la pagina */
.legal__table {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 0 0 20px;
  border-collapse: collapse;
  font-size: .88rem;
}
.legal__table th,
.legal__table td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.legal__table th {
  font-weight: 600;
  color: var(--txt-mute);
  white-space: nowrap;
}
.legal__table--wide th { white-space: normal; }
.legal__table--wide tr:first-child th { color: var(--ink); }

/* =============================================================================
   CONSENSO COOKIE
   Sta in basso, non copre la pagina e non intrappola: si puo' leggere il sito
   mentre si decide. I tre pulsanti hanno lo stesso peso, perche' rifiutare
   deve costare quanto accettare.
   ========================================================================== */
.cc {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  padding: 14px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.cc__box {
  pointer-events: auto;
  width: min(560px, 100%);
  max-height: min(78vh, 640px);
  overflow-y: auto;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 14px);
  background: var(--paper);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .45);
}

.cc__t { margin: 0 0 10px; font-size: 1.06rem; line-height: 1.3; }
.cc__p { margin: 0 0 18px; font-size: .88rem; line-height: 1.6; color: var(--txt-mute); }
.cc__p a { color: var(--gold-dk); text-underline-offset: 3px; }

.cc__list { display: grid; gap: 14px; margin-bottom: 20px; }
.cc__cat { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-sm, 8px); }
.cc__cathead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cc__cathead b { font-size: .92rem; }
.cc__cattxt { margin: 7px 0 0; font-size: .8rem; line-height: 1.55; color: var(--txt-mute); }
.cc__always {
  font: 500 .58rem/1 var(--f-mono);
  letter-spacing: .16em; text-transform: uppercase; color: var(--txt-mute);
}

/* interruttore: la casella vera resta, invisibile ma raggiungibile da tastiera */
.cc__sw { position: relative; flex: none; display: flex; align-items: center; cursor: pointer; }
.cc__sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/*
   Il pallino sta dentro per padding, non per margine.
   Con il margine il contenitore non aveva ne' bordo ne' padding, quindi il
   margine superiore del pallino collassava verso l'esterno: spingeva giu'
   tutto l'interruttore invece di rientrare il pallino, e le levette
   risultavano disallineate rispetto al titolo della categoria.
*/
.cc__track {
  display: flex; align-items: center;
  width: 42px; height: 24px; padding: 3px;
  border-radius: 999px; background: var(--line-2);
  transition: background .18s linear;
}
.cc__track::after {
  content: "";
  width: 18px; height: 18px; flex: none;
  border-radius: 50%; background: #fff;
  transition: transform .18s var(--e-out, ease);
}
.cc__sw input:checked + .cc__track { background: var(--gold); }
.cc__sw input:checked + .cc__track::after { transform: translateX(18px); }
.cc__sw input:focus-visible + .cc__track { outline: 2px solid var(--ink); outline-offset: 2px; }

.cc__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cc__btn {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--paper);
  font: 600 .78rem/1 var(--f-sans);
  letter-spacing: .04em;
  cursor: pointer;
  transition: border-color .15s linear, background .15s linear, color .15s linear;
}
.cc__btn:hover { border-color: var(--ink); }
.cc__btn--primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.cc__btn--primary:hover { background: var(--gold); border-color: var(--gold); }
.cc__btn--ghost { border-style: dashed; }

@media (max-width: 520px) {
  .cc__acts { flex-direction: column; }
  .cc__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cc__track, .cc__track::after { transition: none; }
}
.mine__subhead { margin-top: clamp(38px, 7vw, 64px); }
/* Installazione PWA e fallback offline: controlli grandi, safe-area e nessun
   affidamento sull'hover, per restare comodi anche su schermi piccoli. */
.pwa-install {
  position: fixed; z-index: 89;
  right: max(14px, env(safe-area-inset-right, 0px));
  bottom: max(14px, env(safe-area-inset-bottom, 0px));
  min-height: 46px; padding: 0 18px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 999px;
  background: #161616; color: #fff;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.6);
  font: 700 .72rem/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.pwa-help { position: fixed; inset: 0; z-index: 120; display: grid; place-items: end center; padding: 16px; background: rgba(10,10,10,.55); }
.pwa-help__card { width: min(100%, 420px); padding: 24px; border-radius: 18px; background: #f6f6f7; color: #161616; box-shadow: 0 22px 60px -18px rgba(0,0,0,.65); }
.pwa-help__card h2 { margin: 0 0 10px; font-size: 1.35rem; }
.pwa-help__card p { margin: 0 0 18px; line-height: 1.55; }
.pwa-help__card button { width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #161616; color: #fff; font-weight: 700; }
.offline-page { min-height: 100svh; width: min(100% - 32px, 560px); margin: 0 auto; display: grid; align-content: center; justify-items: start; gap: 18px; padding: max(32px, env(safe-area-inset-top, 0px)) 0 max(32px, env(safe-area-inset-bottom, 0px)); }
.offline-page img { width: 96px; height: auto; }
.offline-page h1, .offline-page p { margin: 0; }
.offline-page .btn { width: 100%; justify-content: center; }