/* ============================================================
   KDF design system v2 — premium restyle (Task 3b)
   Palette: bianco dominante, nero blocchi/tipografia, rosso a tocchi.
   Display: Clash Display (600/700). Body: Archivo (400/500/700).
   Le classi-interfaccia dei Task 1-3 restano valide: cambia l'aspetto,
   non i nomi.
   ============================================================ */

/* ---- font faces (self-hosted woff2, display:swap) ---- */
@font-face{
  font-family:"Clash Display";font-style:normal;font-weight:600;font-display:swap;
  src:url("/fonts/clash-display-600.woff2") format("woff2");
}
@font-face{
  font-family:"Clash Display";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/clash-display-700.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/archivo-400.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/archivo-500.woff2") format("woff2");
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/archivo-700.woff2") format("woff2");
}

/* ---- design tokens ---- */
:root{
  /* palette 5 colori (2026-07-06): bianco pista, nero asfalto, sabbia calda, tortora fumo, rosso KDF */
  --red:#e2231a; --red-ink:#c31910;
  --ink:#0c0a09; --ink-2:#171412; --ink-soft:#1c1917;
  --paper:#fff; --grey:#f5f1ea; --line:#e7e1d8; --muted:#57534e;
  --paper-dim:rgba(255,255,255,.62);
  --disp:"Clash Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wrap:1200px; --radius:4px;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad-section:clamp(64px,9vw,132px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);background:var(--paper);
  line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--red);color:#fff}
::-moz-selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;font-weight:700;text-decoration:none}
.skip-link:focus{left:0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,56px)}

/* subtle grain overlay (data-uri, < 1KB) */
body::after{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Tipografia — display gigante come elemento grafico
   ============================================================ */
.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin:0 0 4px;
}
/* una sola linea rossa per blocco: resta la .rule (divide kicker e titolo), tolto il trattino del kicker */
.rule{width:56px;height:3px;background:var(--red);border:0;margin:14px 0 26px}

h1,h2,h3{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  letter-spacing:-.01em;line-height:.98;margin:0 0 18px;text-wrap:balance;
}
h1{font-size:clamp(44px,9vw,148px);line-height:.92;letter-spacing:-.02em}
h2{font-size:clamp(30px,5.4vw,68px)}
h3{font-size:clamp(20px,2.4vw,26px);font-weight:600;line-height:1.04}
p{margin:0 0 16px}
.lead{font-size:clamp(17px,1.6vw,22px);line-height:1.5;color:var(--ink-soft);font-weight:400}
strong,b{font-weight:700}

.eyebrow-xl{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.18em;
}

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:14px clamp(20px,5vw,56px);display:flex;align-items:center;gap:22px}
.nav-logo img{height:38px;width:auto;display:block}
.nav-links{display:flex;gap:6px;margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.nav-links a{
  position:relative;font-family:var(--font);font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  padding:8px 12px;color:var(--ink);transition:color .25s var(--ease);
}
.nav-links a::after{
  content:"";position:absolute;left:12px;right:12px;bottom:2px;height:2px;
  background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta{margin-left:10px}
.lang-switch{display:inline-flex;align-items:center;gap:5px;font-family:var(--font);font-size:12px;font-weight:700;letter-spacing:.06em}
.lang-switch a{color:var(--ink);opacity:.55;text-decoration:none;padding:4px 3px;transition:opacity .2s var(--ease),color .2s var(--ease)}
.lang-switch a:hover{opacity:1}
.lang-switch a[aria-current="true"]{opacity:1;color:var(--red)}
.lang-switch .sep{opacity:.3;font-weight:400}
.burger{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;cursor:pointer;padding:0}
.burger span,.burger span::before,.burger span::after{
  content:"";display:block;width:26px;height:2px;background:var(--ink);margin:0 auto;
  position:relative;transition:transform .28s var(--ease),opacity .2s;
}
.burger span::before{position:absolute;top:-8px}
.burger span::after{position:absolute;top:8px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(8px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-8px) rotate(-45deg)}

@media(max-width:860px){
  .burger{display:block}
  .nav-links{
    display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;
    flex-direction:column;gap:0;padding:8px clamp(20px,5vw,56px) 20px;
    border-bottom:1px solid var(--line);
    transform:translateY(-8px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
  }
  body.nav-open .nav-links{transform:none;opacity:1;pointer-events:auto;visibility:visible}
  .nav-links a{display:block;padding:14px 2px;font-size:16px;letter-spacing:.06em}
  .nav-links a::after{left:2px;right:auto;width:22px}
  .nav-cta{padding:11px 18px;font-size:12px;margin-left:auto}
  .burger{margin-left:0}
}

/* ============================================================
   Bottoni — squadrati, neri con hover rosso, riempimento animato
   ============================================================ */
.btn{
  --btn-bg:var(--ink);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;padding:16px 30px;border-radius:var(--radius);
  color:var(--btn-fg);background:var(--btn-bg);border:1.5px solid var(--ink);cursor:pointer;
  overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--red);
  transform:translateY(101%);transition:transform .4s var(--ease);
}
.btn:hover{color:#fff;border-color:var(--red)}
.btn:hover::before{transform:translateY(0)}
.btn-outline{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--ink)}
.btn-outline:hover{color:#fff}
.btn .mag-in{display:inline-flex;align-items:center;gap:.5em;will-change:transform}
.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ============================================================
   Hero — full-screen, parallax multilivello, titolo gigante
   ============================================================ */
.hero{position:relative;color:#fff;background:var(--ink);overflow:hidden}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
/* il video copre la foto (stesso riquadro), non le scorre sotto */
.hero-media video{position:absolute;inset:0}
@media (prefers-reduced-motion: reduce){.hero-media video{display:none}}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,7,6,.42),rgba(8,7,6,.28) 42%,rgba(8,7,6,.82));
}
.hero-inner{
  position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:140px clamp(20px,5vw,56px) clamp(56px,7vw,80px);
  min-height:78vh;min-height:78svh;display:flex;flex-direction:column;justify-content:flex-end;
}
.hero .kicker{color:#fff;text-shadow:0 1px 16px rgba(0,0,0,.8),0 1px 3px rgba(0,0,0,.55)}
.hero .rule{margin:16px 0 22px}
/* ombre sui testi sopra i video: creano profondita e li fanno emergere */
.hero h1{margin-bottom:24px;text-shadow:0 4px 34px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.55)}
.hero .lead{max-width:600px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.55)}
.hero .btn-row{margin-top:34px}
.hero .btn{--btn-bg:#fff;--btn-fg:var(--ink);border-color:#fff}
.hero .btn-outline{--btn-bg:transparent;--btn-fg:#fff;border-color:rgba(255,255,255,.6)}
/* su telefono: velo scuro piu leggero (video piu visibile) e titolo un filo
   piu compatto, cosi i blocchi testo hanno la stessa altezza tra le pagine */
@media(max-width:860px){
  .hero-media::after{background:linear-gradient(180deg,rgba(8,7,6,.10),rgba(8,7,6,.04) 38%,rgba(8,7,6,.55))}
  .hero h1{font-size:38px}
}
.hero-scroll{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:2;
  font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero-scroll::after{content:"";width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:scrollpulse 2s var(--ease) infinite}
@keyframes scrollpulse{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:860px){.hero-scroll{display:none}}

/* hero interna (pagine servizio) */
.hero.hero-page .hero-inner{min-height:58vh;min-height:58svh;padding-top:150px}
/* se l'hero contiene un video, va a tutto schermo: il fotogramma 16:9 si vede quasi intero */
.hero.hero-page:has(.hero-video) .hero-inner{min-height:78vh;min-height:78svh}

/* ============================================================
   Sezioni e griglie
   ============================================================ */
.section{padding:var(--pad-section) 0}
.section.alt{background:var(--grey)}
.section.tight{padding:clamp(40px,6vw,80px) 0}

/* blocco invertito nero, per il ritmo */
.section.dark,.invert{background:var(--ink);color:#fff}
.section.dark .lead,.invert .lead{color:rgba(255,255,255,.78)}
.section.dark .kicker,.invert .kicker{color:rgba(255,255,255,.75)}
.section.dark a:not(.btn),.invert a:not(.btn){color:#fff}

.section-head{max-width:900px;margin:0 0 clamp(32px,4vw,56px)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
@media(max-width:860px){.grid-2,.grid-4,.split{grid-template-columns:1fr}}
@media(min-width:560px) and (max-width:860px){.grid-4{grid-template-columns:1fr 1fr}}

/* ============================================================
   Stat — numeri giganti
   ============================================================ */
.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{padding:clamp(24px,3vw,44px) clamp(14px,2vw,28px);border-right:1px solid var(--line);min-width:0}
.stat:last-child{border-right:0}
.stat b{font-variant-numeric:tabular-nums;white-space:nowrap;
  display:block;font-family:var(--disp);font-weight:700;line-height:.9;
  font-size:clamp(36px,4.4vw,56px);letter-spacing:-.03em;margin-bottom:10px;
}
/* nelle 4 colonne di Eventi ci sono parole lunghe (Parcheggio): font piu piccolo per stare in riga */
.grid-4 .stat b{font-size:clamp(26px,3.2vw,46px)}
.stat b .u{color:var(--red)}
.stat span{
  display:block;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);line-height:1.35;
}
.section.dark .stats-row,.invert .stats-row{border-color:rgba(255,255,255,.14)}
.section.dark .stat,.invert .stat{border-color:rgba(255,255,255,.14)}
.section.dark .stat span,.invert .stat span{color:rgba(255,255,255,.6)}
@media(max-width:860px){
  .stats-row{grid-template-columns:1fr 1fr}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(even){border-right:0}
  .stat:nth-child(3),.stat:nth-child(4){border-bottom:0}
}

/* ============================================================
   Card servizio — full-bleed image, hover scale + tilt
   ============================================================ */
.card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  transform-style:preserve-3d;transition:box-shadow .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease);
}
.card:hover{box-shadow:0 30px 60px -30px rgba(12,12,12,.4);border-color:#d9d4cd}
.card-media{position:relative;aspect-ratio:16/11;overflow:hidden;transform:translateZ(0)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);transform:scale(1.01)}
.card:hover .card-media img{transform:scale(1.07)}
.card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(12,12,12,.06))}
.card-body{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:10px;flex:1;transform:translateZ(30px)}
.card-body h3{margin-bottom:2px}
.card-body p{color:var(--muted);margin:0}
.card-body .btn{margin-top:auto;align-self:flex-start}
.price-from{color:var(--ink);font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.01em;text-transform:uppercase}
.price-from::before{content:"";display:inline-block;width:16px;height:2px;background:var(--red);vertical-align:middle;margin-right:9px;margin-bottom:3px}

/* grading caldo brand sulle foto */
.ph{filter:contrast(1.05) saturate(1.18) brightness(1.02) sepia(.1)}

/* ============================================================
   Marquee — striscia divisoria infinita
   ============================================================ */
.marquee{
  background:var(--ink);color:#fff;overflow:hidden;padding:clamp(18px,2.4vw,30px) 0;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);
  --marq-dur:26s;
}
.marquee-track{display:flex;width:max-content;animation:marq var(--marq-dur) linear infinite;will-change:transform}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,4.4vw,64px);letter-spacing:.01em;line-height:1;padding:0 .45em;
  display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
}
.marquee-item .dot{width:.32em;height:.32em;border-radius:50%;background:var(--red);flex:none}
.marquee-item .out{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.55)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============================================================
   Scroll-scrub — volo drone (il "3D" della home)
   Default (no-JS / mobile / touch / reduced-motion): blocco statico
   full-bleed alto un viewport, primo frame o video loop + beat statici.
   Desktop con motion (html.gsap-ready + JS): diventa una sezione pinnata
   alta ~300vh con canvas sticky legato allo scroll.
   ============================================================ */
.scrub{position:relative;background:var(--ink);color:#fff;overflow:clip}
.scrub-track{position:relative}
.scrub-stage{
  position:relative;height:100svh;min-height:520px;overflow:hidden;
  display:flex;align-items:flex-end;
}
/* media di base: primo frame (no-JS) e video fallback (mobile) coprono lo stage */
.scrub-first,.scrub-fallback-video,.scrub-canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.scrub-first{z-index:1}
.scrub-fallback-video{z-index:2;display:none}   /* attivato solo nel fallback statico */
.scrub-canvas{z-index:3;display:none}           /* attivato solo nello scrub desktop */
/* scrim per leggibilita del testo sopra il girato chiaro */
.scrub-scrim{
  position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,12,.82) 0%,rgba(12,12,12,.32) 42%,rgba(12,12,12,0) 68%);
}
.scrub-beats{position:relative;z-index:5;width:100%;max-width:var(--wrap);margin:0 auto;
  padding:0 clamp(20px,5vw,56px) clamp(40px,7vw,88px)}
.scrub-beat{max-width:900px}
.scrub-beat .kicker{color:rgba(255,255,255,.82)}
.scrub-beat h2{margin:0}

/* --- Fallback statico (default, e mobile/touch): mostro un solo beat --- */
.scrub-beat{display:none}
.scrub-beat[data-beat="0"]{display:block}   /* nel blocco statico resta il primo beat */

/* --- Desktop + motion attivo: modalita scrub pinnata --- */
html.gsap-ready .scrub[data-scrub].is-scrub{background:var(--ink)}
@media (min-width:861px) and (pointer:fine){
  html.gsap-ready .scrub[data-scrub].is-scrub .scrub-track{height:300vh}
  html.gsap-ready .scrub[data-scrub].is-scrub .scrub-stage{
    position:sticky;top:0;height:100vh;
  }
  html.gsap-ready .scrub[data-scrub].is-scrub .scrub-canvas{display:block}
  html.gsap-ready .scrub[data-scrub].is-scrub .scrub-first{opacity:0}   /* il canvas la copre */
  /* nello scrub i tre beat sono tutti presenti, opacita guidata dal JS */
  html.gsap-ready .scrub[data-scrub].is-scrub .scrub-beats{
    position:absolute;left:0;right:0;bottom:0;
  }
  html.gsap-ready .scrub[data-scrub].is-scrub .scrub-beat{
    display:block;position:absolute;left:0;right:0;bottom:0;opacity:0;transform:translateY(22px);
    padding:0 clamp(20px,5vw,56px) clamp(40px,7vw,88px);will-change:opacity,transform;
  }
}

/* --- Fallback statico: attiva il video loop al posto del primo frame --- */
.scrub[data-scrub].is-static .scrub-fallback-video{display:block}
.scrub[data-scrub].is-static .scrub-first{opacity:0}

/* reduced-motion: mai scrub, mai video in autoplay: solo primo frame + primo beat */
@media (prefers-reduced-motion: reduce){
  .scrub[data-scrub] .scrub-canvas{display:none !important}
  .scrub[data-scrub] .scrub-fallback-video{display:none !important}
  .scrub[data-scrub] .scrub-first{opacity:1 !important}
  .scrub[data-scrub] .scrub-track{height:auto !important}
  .scrub[data-scrub] .scrub-stage{position:relative !important;height:100svh !important}
}
@media (max-width:860px){
  .scrub-stage{height:82svh;min-height:440px}
}

/* ============================================================
   Tabelle prezzi
   ============================================================ */
.price-table{width:100%;border-collapse:collapse;margin:10px 0 22px;font-size:16px;table-layout:fixed}
/* larghezze fisse: le colonne restano allineate tra tabelle diverse */
.price-table th:first-child{width:27%}
.price-table th:last-child{width:88px}
.price-table th{
  text-align:left;font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink);padding:12px 10px;
}
.price-table th:last-child{text-align:right}
.price-table td{border-bottom:1px solid var(--line);padding:15px 10px;height:74px;vertical-align:middle}
.price-table td.pr{font-family:var(--disp);font-weight:600;white-space:nowrap;font-size:18px;text-align:right}
.price-table tr.hl td{background:#fdf1f0}
.price-table tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--red);position:relative}
/* badge fuori dal flusso: non altera l'altezza della riga (tutte uguali) */
.tag{
  position:absolute;top:4px;left:10px;
  background:var(--red);color:#fff;font-family:var(--font);font-size:9px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;padding:2px 6px;
  white-space:nowrap;
}
.tag-below{
  display:block;margin-top:3px;font-family:var(--font);font-size:9px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--red);white-space:nowrap;
}
/* --- listino bar: menu compatto a due colonne (righe piu basse dei listini gara) --- */
.menu-cols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,5vw,72px);align-items:start;margin-top:4px}
.menu-cat h3{margin:26px 0 6px}
.menu-table{width:100%;border-collapse:collapse;font-size:15px}
.menu-table td{border-bottom:1px solid var(--line);padding:11px 2px;vertical-align:middle}
.menu-table td.pr{font-family:var(--disp);font-weight:600;white-space:nowrap;font-size:16px;text-align:right}
@media(max-width:860px){.menu-cols{grid-template-columns:1fr}}

/* box combo */
.combo-box{
  position:relative;border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:clamp(22px,3vw,34px);margin:26px 0;background:#fff;overflow:hidden;
}
.combo-box::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red)}
.combo-box h3{color:var(--ink);margin-bottom:8px}
.combo-box h3 span{color:var(--red)}
.combo-box p{margin:0;color:var(--muted)}
.combo-box p:has(.btn){margin-top:18px}
.combo-box .btn{margin-top:2px}

/* ============================================================
   FAQ
   ============================================================ */
.faq{border-top:1px solid var(--ink);max-width:920px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:22px 4px;font-family:var(--disp);font-weight:600;font-size:clamp(17px,2vw,21px);
  text-transform:none;transition:color .25s var(--ease);
}
.faq summary:hover{color:var(--red)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:16px;height:16px;position:relative;
  background:
    linear-gradient(var(--red),var(--red)) center/16px 2px no-repeat,
    linear-gradient(var(--red),var(--red)) center/2px 16px no-repeat;
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq .faq-a{padding:0 4px 22px;color:var(--muted);max-width:760px}
.faq .faq-a p{margin:0}

/* ============================================================
   Strip foto
   ============================================================ */
.strip{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,14px)}
/* wrapper con aspect-ratio: la griglia misura un div normale, non l'intrinseco 600x600
   dell'img (bug noto grid+aspect-ratio su <img>: la riga si dimensionava sul nativo
   della bitmap invece che sulla cella, storpiando le foto su mobile) */
.strip-item{aspect-ratio:1;overflow:hidden;border-radius:var(--radius)}
.strip-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease),filter .6s var(--ease)}
.strip-item:hover img{transform:scale(1.04)}
@media(max-width:860px){.strip{grid-template-columns:repeat(3,1fr)}}

/* ============================================================
   Blocco contatti/prenota — sezione nera premium
   ============================================================ */
.contact{background:var(--ink);color:#fff;position:relative}
.contact .kicker{color:rgba(255,255,255,.75)}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px)}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact a{color:#fff}
/* utility: immagini di contenuto nelle griglie + spaziature */
.img-cover{width:100%;height:100%;object-fit:cover;border-radius:var(--radius)}
.mt-sm{margin-top:14px}
.map-note{margin:10px 0 0;font-size:13px}

/* bottoni outline sul blocco scuro: bianchi via contesto, niente stili inline */
.contact .btn-outline{--btn-fg:#fff;border-color:rgba(255,255,255,.7)}
.contact .btn-outline:hover{border-color:var(--red)}
.contact-item{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:16px}
.contact-item:first-child{border-top:1px solid rgba(255,255,255,.13)}
.contact-item b{
  display:block;font-family:var(--font);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-bottom:4px;font-weight:700;
}
.contact-item a{text-decoration:none;transition:color .2s}
.contact-item a:hover{color:var(--red)}
.form{display:grid;gap:16px}
.form label{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:7px;color:rgba(255,255,255,.7)}
.form input,.form select,.form textarea{
  width:100%;padding:14px 15px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;
  font-family:var(--font);font-size:15px;transition:border-color .25s,background .25s;
}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none;border-color:var(--red);background:rgba(255,255,255,.08);
}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{
  outline:2px solid var(--red);outline-offset:2px;
}
.form ::placeholder{color:rgba(255,255,255,.4)}
.form select option{color:#111}
.form .btn{--btn-bg:#fff;--btn-fg:var(--ink);border-color:#fff;margin-top:4px}
.form-note{margin:0;font-size:13px;color:rgba(255,255,255,.6)}
.form-note a{color:inherit;text-decoration:underline}
.form-note a:hover{color:#fff}
.map-ph{margin-top:22px;border-radius:var(--radius);overflow:hidden}
.map-ph iframe{width:100%;height:300px;border:0;display:block}

/* ============================================================
   Footer + whatsapp
   ============================================================ */
.logo-invert{filter:brightness(0) invert(1)}
.footer{
  background:#070707;color:rgba(255,255,255,.55);
  border-top:1px solid rgba(255,255,255,.1);padding:clamp(32px,4vw,52px) 0;font-size:13px;
}
.footer .wrap{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.footer img{height:48px}
.footer a{color:rgba(255,255,255,.7);text-decoration:none;transition:color .2s}
.footer a:hover{color:#fff}
.footer p{margin:0}
.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25d366;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -8px rgba(37,211,102,.6);transition:transform .3s var(--ease);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}

/* ============================================================
   Preloader — logo, solo prima visita per sessione
   ============================================================ */
.preloader{
  position:fixed;inset:0;z-index:10000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:26px;
}
.preloader img{height:clamp(52px,10vw,84px);width:auto}
.preloader .pl-bar{width:min(220px,50vw);height:2px;background:rgba(255,255,255,.16);overflow:hidden;border-radius:2px}
.preloader .pl-bar i{display:block;height:100%;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
body.pl-active{overflow:hidden}
/* niente flash del preloader se il JS non parte o non serve */
.preloader[hidden]{display:none}

/* ============================================================
   Motion — GSAP reveal + fallback + reduced-motion
   ============================================================ */
.hero-media img{will-change:transform}
/* niente will-change sul video 4K: forzava un layer/texture enorme e faceva scattare la partenza */
.hero-media video{transform:translateZ(0)}
/* stato iniziale reveal: applicato solo quando JS conferma il motion (html.gsap-ready) */
html.gsap-ready .reveal{opacity:0;transform:translateY(28px)}
.reveal{transition:none}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  html.gsap-ready .reveal{opacity:1 !important;transform:none !important}
  .hero-scroll::after{animation:none}
  .marquee-track{animation:none}
  .hero-media img,.hero-media video{transform:none !important}
}

/* ---- scuola karting: timeline lezioni ---- */
.lessons{list-style:none;padding:0;margin:0;counter-reset:lez}
.lessons li{position:relative;padding:26px 0 26px 96px;border-top:1px solid var(--line)}
.lessons li::before{
  counter-increment:lez;content:counter(lez,decimal-leading-zero);
  position:absolute;left:0;top:18px;font-family:var(--disp);font-weight:700;
  font-size:clamp(40px,5vw,64px);line-height:1;color:var(--line);
  transition:color .3s var(--ease);
}
.lessons li:hover::before{color:var(--red)}
.lessons h3{margin-bottom:6px}
.lessons p{margin:0;color:var(--muted);max-width:640px}
@media(max-width:860px){.lessons li{padding-left:72px}}

/* ---- muro recensioni Google (pattern testimonial, port vanilla) ---- */
.reviews{display:flex;gap:18px;margin:34px 0 40px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.reviews::-webkit-scrollbar{display:none}
.review-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 24px 20px;display:flex;flex-direction:column;gap:12px;flex:0 0 auto;width:min(360px,82vw);scroll-snap-align:start}
.review-stars{color:var(--red);font-size:15px;letter-spacing:3px}
.review-card blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);flex:1}
.review-card figcaption{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.review-card figcaption span{display:block;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);margin-top:2px}