/* Cirillico (30/09/2026): i font del design non hanno le lettere cirilliche; il secondo font della pila le ha e il browser lo scarica solo se in pagina ce ne sono. */
/* =====================================================================
   SVEAHOST · LAYOUT 6 "VIVID" (Gabriele) — stampo del generatore.
   Origine: AI LAYOUT 19 "OPIFICIO" v2 · due colori base, COBALTO + LIME,
   più il VIOLA che fa da ponte fra il blu notte e la carta.
   Bricolage Grotesque (titoli) + Manrope (testo).
   Dettagli: grana, griglia a montanti, puntinato, staffe agli angoli,
   chip, timbro rotante, testo in contorno.
   Nello stampo: menu del telefono, sipario fra le pagine, campo di chiazze,
   lightbox e frecce dei bottoni li crea app.js leggendo la pagina. Gli stati
   iniziali delle animazioni valgono solo sotto html.js, con ripieghi.
   ===================================================================== */
:root{
  /* ── PALETTE: i valori di Gabriele. Col colore del cliente il generatore le
     riscrive in <style id="svh-colori"> (ricetta: src/colori/layout-6.ts).
     Solo su :root: su html o body vincerebbero sul blocco del cliente. ── */
  --blue:#1E3AF0; --blue-rgb:30, 58, 240;           /* accento: testi e segni sui fondi chiari */
  --on-blue:#fff;                                    /* testo sopra l'accento pieno */
  --glow:#1E3AF0; --glow-rgb:30, 58, 240;           /* bagliori, puntinato, contorni, sipario */
  --blue-deep:#0A1450; --blue-deep-rgb:10, 20, 80;   /* fondo scuro: hero, menu del telefono, buio */
  --blue-ink:#070C2E; --blue-ink-rgb:7, 12, 46;      /* fondo più scuro: footer, lightbox, velature */
  --blue-tint:#E3E8FF;                               /* tinta chiara: riquadri vuoti, alone dei campi */
  --lime:#D7F542; --lime-rgb:215, 245, 66;           /* secondo accento: sui fondi scuri e pieno */
  --on-lime:#0B1032;                                 /* testo sopra il secondo accento pieno */
  --pin-pop:#D7F542;                                 /* il secondo accento sul fondo-ponte della sezione agganciata */
  --band-btn:#D7F542; --band-btn-fg:#0B1032;         /* il bottone della banda CTA (fondo chiaro-sfumato) */
  --lime-deep:#93B215; --lime-tint:#F1F8CF;
  --viola:#9D8CFF; --viola-rgb:157, 140, 255;        /* terzo colore: fa da ponte fra il blu notte e la carta, così i passaggi non ingrigiscono */
  --sky-rgb:143, 176, 255;
  --bridge-1:#2c2690; --bridge-2:#7f6fe8; --bridge-3:#3f36a8; /* sfumature di ripiego senza il campo di chiazze */
  --hero-ink:#C9D0F5;                                /* testo sull'hero scuro */
  --foot-ink:#B9C0E6; --foot-ink-2:#DDE1F6; --foot-ink-3:#AEB6E8; --foot-ink-4:#8C94C4; /* testi sui fondi scuri */
  --paper:#F6F5EE; --ink:#0B1032; --ink-2:#3A3F5C; --muted:#6B7090; --line:#D9DBE6;
  --maxw:1560px; --pad:clamp(20px,4.2vw,80px); --navh:72px;
  --sec:clamp(120px,20vh,260px); --sec-sm:clamp(80px,13vh,170px); --gap-head:clamp(56px,9vh,120px);
  --r:clamp(18px,2vw,36px); --r-sm:14px;
  --ease:cubic-bezier(.22,1,.36,1); color-scheme:light;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul{list-style:none}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{position:relative;background:var(--paper);color:var(--ink-2);font-family:'Manrope',system-ui,sans-serif;font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--lime);color:var(--on-lime)}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)} .sec-sm{padding-block:var(--sec-sm)}

/* ── UNICO SFONDO: campo di chiazze dietro tutta la pagina (lo crea app.js) ── */
.bgfield{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* grana su tutto il campo: rompe le bande dei gradienti */
.bgfield::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
/* chiazze come gradienti radiali (niente filter: più leggere e dipinte ovunque) */
.bgfield i{position:absolute;left:var(--x,50%);transform:translate(-50%,-50%) scale(var(--s,1));width:min(115vw,1750px);height:min(135vh,1500px);background:radial-gradient(closest-side,rgba(var(--rgb),calc(var(--a) * 1.000)) 0%,rgba(var(--rgb),calc(var(--a) * 0.972)) 10%,rgba(var(--rgb),calc(var(--a) * 0.896)) 20%,rgba(var(--rgb),calc(var(--a) * 0.784)) 30%,rgba(var(--rgb),calc(var(--a) * 0.648)) 40%,rgba(var(--rgb),calc(var(--a) * 0.500)) 50%,rgba(var(--rgb),calc(var(--a) * 0.352)) 60%,rgba(var(--rgb),calc(var(--a) * 0.216)) 70%,rgba(var(--rgb),calc(var(--a) * 0.104)) 80%,rgba(var(--rgb),calc(var(--a) * 0.028)) 90%,rgba(var(--rgb),calc(var(--a) * 0.000)) 100%)}
.bgfield i.lime{--rgb:var(--lime-rgb);--a:.38}
.bgfield i.blue{--rgb:var(--glow-rgb);--a:.13}
.bgfield i.viola{--rgb:var(--viola-rgb);--a:.68;width:min(130vw,1950px);height:min(120vh,1300px)}
.bgfield i.sky{--rgb:var(--sky-rgb);--a:.36}
.bgfield i.ink{--rgb:var(--blue-ink-rgb);--a:.44;width:min(120vw,1800px);height:min(110vh,1200px)}
.bgfield i.deepr{--rgb:var(--blue-deep-rgb);--a:.42;width:min(120vw,1800px);height:min(110vh,1200px)}
/* buio dell'hero: pieno sulla sezione, poi si spegne per --fade px */
.bgfield i.deep{left:0;width:100%;transform:none;border-radius:0;background:linear-gradient(to bottom,rgb(var(--blue-deep-rgb)) calc(100% - var(--fade,200px)),transparent calc(100% - var(--fade,200px)))}
.bgfield i.deep::after{content:'';position:absolute;left:0;right:0;bottom:0;height:var(--fade,200px);background:linear-gradient(to bottom,rgba(var(--blue-deep-rgb),1),rgba(var(--blue-deep-rgb),0))}
main,footer{position:relative;z-index:1}

/* ── FONDI CON CARATTERE ─────────────────────────────────────────── */
.grain{position:relative;isolation:isolate}
.grain::before{content:'';position:absolute;inset:0;background:var(--grain);opacity:.09;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.grain > *{position:relative;z-index:1}
.dots::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(var(--glow-rgb),.22) 1.2px,transparent 1.3px);background-size:26px 26px;-webkit-mask-image:radial-gradient(60% 60% at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(60% 60% at 50% 50%,#000 30%,transparent 75%)}
.glow{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}

/* ── TIPOGRAFIA ─────────────────────────────────────────────────── */
h1,h2,h3,.d{font-family:'Bricolage Grotesque','Geologica','Manrope',sans-serif;font-weight:800;color:var(--ink);letter-spacing:-.035em;font-variation-settings:'opsz' 96;overflow-wrap:break-word}
.h-xl{font-size:clamp(2.5rem,6.4vw,6.6rem);line-height:.94}
.h-lg{font-size:clamp(2.1rem,4.6vw,4.7rem);line-height:.98}
.h-md{font-size:clamp(1.6rem,2.8vw,2.7rem);line-height:1.04}
.h-col{font-size:clamp(1.8rem,3vw,3.1rem);line-height:1.02}
h1 em,h2 em,h3 em{font-style:normal;color:var(--blue)}
.on-dark h1,.on-dark h2,.on-dark h3{color:#fff}
.on-dark h1 em,.on-dark h2 em,.on-dark h3 em{color:var(--lime)}
.lead{font-size:clamp(1.05rem,1.25vw,1.25rem);line-height:1.55;max-width:42ch}
.body p{font-size:1.02rem;line-height:1.72;max-width:60ch}.body p+p{margin-top:1.3rem}
.outline{font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;color:transparent;-webkit-text-stroke:1px currentColor;letter-spacing:-.04em;line-height:.85;pointer-events:none;user-select:none;white-space:nowrap}

/* chip / etichetta */
.chip{display:inline-flex;align-items:center;gap:.55rem;max-width:100%;border:1px solid rgba(11,16,50,.18);border-radius:999px;padding:.42rem .9rem .42rem .7rem;font-size:.64rem;font-weight:700;line-height:1.35;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.4)}
.chip::before{content:'';flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.on-dark .chip{border-color:rgba(255,255,255,.22);color:#fff;background:rgba(255,255,255,.06)}
.on-dark .chip::before{background:var(--lime)}
.num{font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:clamp(2.2rem,3.4vw,3.4rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--blue)}

/* ── AZIONI ─────────────────────────────────────────────────────── */
.btn{--bg:var(--ink);--fg:#fff;--bg2:var(--blue);--fg2:var(--on-blue);position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:.7rem;max-width:100%;cursor:pointer;border:1.5px solid var(--bg);border-radius:999px;padding:.95rem 1.5rem;background:var(--bg);color:var(--fg);font-family:inherit;font-size:.72rem;font-weight:700;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;text-align:left;transition:color .45s var(--ease),border-color .45s var(--ease),transform .25s var(--ease)}
/* riempimento che entra da sinistra */
.btn::before{content:'';position:absolute;inset:-1px;background:var(--bg2);border-radius:inherit;transform:translateX(-101%);transition:transform .55s var(--ease);z-index:-1}
.btn:hover::before{transform:translateX(0)}
.btn:hover{color:var(--fg2);border-color:var(--bg2)}
.btn:active{transform:scale(.97)}
/* testo che scorre in alto e si ri-scrive (la copia la crea app.js) */
.btn .roll{position:relative;display:block;overflow:hidden;line-height:1.2}
.btn .roll>span{display:block;transition:transform .5s var(--ease)}
.btn .roll::after{content:attr(data-t);position:absolute;left:0;top:100%;white-space:nowrap;transition:transform .5s var(--ease)}
.btn:hover .roll>span,.btn:hover .roll::after{transform:translateY(-100%)}
/* freccia che esce e rientra */
.btn .ico{display:inline-flex;flex:0 0 auto;overflow:hidden;width:14px;height:14px;color:inherit}
.btn .ico svg{width:14px;height:14px;flex:0 0 auto}
.btn:hover .ico svg{animation:arrowLoop .6s var(--ease)}
@keyframes arrowLoop{0%{transform:translateX(0)}45%{transform:translateX(160%)}50%{transform:translateX(-160%)}100%{transform:translateX(0)}}
.btn-lime{--bg:var(--lime);--fg:var(--on-lime);--bg2:var(--ink);--fg2:var(--lime)}
.lnk{position:relative;display:inline-flex;align-items:center;gap:.7rem;font-size:.7rem;font-weight:700;line-height:1.35;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);padding-bottom:.5rem}
.lnk::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--lime)}
.lnk::before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);z-index:1}
.lnk:hover::before{transform:scaleX(1);transform-origin:left}
.lnk .ar{flex:0 0 auto;width:13px;height:13px;transition:transform .5s var(--ease)}.lnk:hover .ar{transform:translateX(5px)}
.on-dark .lnk{color:#fff}.on-dark .lnk::before{background:var(--lime)}.on-dark .lnk::after{background:rgba(255,255,255,.25)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 2.2rem}

/* ── SIPARIO FRA LE PAGINE (lo crea app.js; non blocca mai i clic) ── */
.curtain{position:fixed;inset:0;z-index:120;background:var(--glow);transform:scaleY(0);transform-origin:bottom;pointer-events:none;will-change:transform}
.curtain::after{content:'';position:absolute;left:0;right:0;bottom:0;height:10vh;background:var(--lime)}
body.is-leaving .curtain{transform:scaleY(1);transition:transform .55s cubic-bezier(.7,0,.3,1)}
.curtain.is-covering{transform:scaleY(1);transform-origin:top}
body.is-entering .curtain{transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}

/* ── HEADER ─────────────────────────────────────────────────────────
   Colori per variabili: chiaro di base (pagine interne, blog); scuro sopra
   l'hero, le sezioni scure e il footer (app.js mette .nav--dark/.nav--light
   secondo lo sfondo sotto l'header; prima di app.js decide :has(.hero)). */
.nav{position:fixed;inset-inline:0;top:0;z-index:60;
  --nav-fg:var(--ink);--nav-link:var(--ink-2);--nav-hover:rgba(var(--blue-rgb),.1);--nav-cur-bg:var(--ink);--nav-cur-fg:#fff;
  --nav-line:rgba(11,16,50,.3);--nav-fill:var(--ink);--nav-fill-fg:#fff;--burger-bg:var(--ink);--burger-fg:var(--lime);--mark-dot:var(--blue);
  --nav-tint:rgba(246,245,238,.55);
  color:var(--nav-fg);background:transparent;transition:color .4s,background-color .5s,-webkit-backdrop-filter .6s,backdrop-filter .6s}
.nav.nav--dark,body:has(.hero) .nav:not(.nav--light),body.menu-open .nav{
  --nav-fg:#fff;--nav-link:rgba(255,255,255,.74);--nav-hover:rgba(255,255,255,.1);--nav-cur-bg:var(--lime);--nav-cur-fg:var(--on-lime);
  --nav-line:rgba(255,255,255,.35);--nav-fill:#fff;--nav-fill-fg:var(--ink);--burger-bg:var(--lime);--burger-fg:var(--on-lime);--mark-dot:var(--lime);
  --nav-tint:rgba(var(--blue-ink-rgb),.28)}
.nav.is-scrolled{background:var(--nav-tint);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.menu-open .nav{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-in{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);height:var(--navh);display:flex;align-items:center;justify-content:space-between;gap:1.4rem}
.nav-brand{display:inline-flex;align-items:center;gap:.7rem;min-width:0;max-width:min(60vw,300px);font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:1.15rem;letter-spacing:-.03em;line-height:1.1;color:var(--nav-fg);transition:color .4s}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* marchio senza logo: finestrella col contorno, l'iniziale e l'angolo lime */
.brand-mark{position:relative;isolation:isolate;flex:0 0 auto;width:30px;height:30px;border:2.4px solid currentColor;border-radius:9px;display:inline-grid;place-items:center;font-size:.86rem;font-weight:800;letter-spacing:0;line-height:1;overflow:hidden}
.brand-mark::after{content:'';position:absolute;top:0;right:0;width:38%;height:38%;background:var(--mark-dot,var(--lime));border-radius:0 0 0 3px;z-index:-1}
/* Logo del cliente al posto del nome (piatti di contrasto come nello stampo storico) */
.nav-logo{height:clamp(34px,4vw,44px);width:auto;max-width:200px;object-fit:contain;display:block}
.nav-logo--plate{background:rgba(18,23,30,.72);padding:6px 12px;border-radius:11px;box-sizing:content-box;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.nav-logo--plate-light{background:rgba(255,255,255,.94);padding:6px 12px;border-radius:11px;box-sizing:content-box}
.nav-main{display:none}
.nav-links{display:flex;align-items:center;gap:.3rem;list-style:none;margin:0;padding:0}
.nav-links li{display:flex}
.nav-links a{font-size:.76rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;padding:.5rem .85rem;border-radius:999px;color:var(--nav-link);transition:background-color .3s,color .3s}
.nav-links a:hover{background:var(--nav-hover);color:var(--nav-fg)}
.nav-links a[aria-current="page"]{background:var(--nav-cur-bg);color:var(--nav-cur-fg)}
.nav .btn{--bg:transparent;--fg:var(--nav-fg);--bg2:var(--nav-fill);--fg2:var(--nav-fill-fg);padding:.75rem 1.2rem;font-size:.68rem;border-color:var(--nav-line);white-space:nowrap}
/* il bottone del menu è un .btn semplice (la classe più corta del sito: la
   CTA del blog la copia), mostrato solo su desktop */
.nav-in>.btn{display:none}
.nav-burger{display:inline-grid;place-items:center;align-content:center;flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;padding:0;background:var(--burger-bg);transition:background-color .4s}
.nav-burger i{display:block;width:16px;height:2px;margin:2.5px 0;background:var(--burger-fg);transition:transform .45s var(--ease),background-color .4s}
body.menu-open .nav-burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .nav-burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
@media (min-width:1180px){.nav-main{display:block}.nav-in>.btn{display:inline-flex}.nav-burger{display:none}}
/* il menu del telefono: lo costruisce app.js copiando <ul class="nav-links"> */
.sheet{position:fixed;inset:0;z-index:55;background:var(--blue-deep);color:#fff;padding:calc(var(--navh) + 5vh) var(--pad) max(5vh,24px);display:flex;flex-direction:column;justify-content:space-between;gap:2rem;overflow-y:auto;clip-path:inset(0 0 100% 0);opacity:0;visibility:hidden;transition:clip-path .7s var(--ease),opacity .01s .7s,visibility .01s .7s}
body.menu-open .sheet{clip-path:inset(0);opacity:1;visibility:visible;transition:clip-path .7s var(--ease),opacity .01s,visibility .01s}
body.menu-open{overflow:hidden}
.sheet-nav a{display:flex;align-items:baseline;gap:1.2rem;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:clamp(1.9rem,8vw,3.2rem);letter-spacing:-.03em;line-height:1.05;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.sheet-nav a:first-child{border-top:1px solid rgba(255,255,255,.14)}
.sheet-nav a[aria-current="page"]{color:var(--lime)}
body.menu-open .sheet-nav a{opacity:1;transform:none;transition-delay:calc(80ms * var(--i,0) + 160ms)}
.sheet-nav a span{font-family:'Manrope',sans-serif;font-size:.62rem;letter-spacing:.2em;color:var(--lime)}
.sheet-foot{display:grid;gap:.4rem;font-size:.92rem;color:var(--foot-ink-3);overflow-wrap:anywhere}.sheet-foot a{color:#fff}

/* ── HERO ───────────────────────────────────────────────────────── */
/* Il blu notte è dell'hero stesso (il campo di chiazze lo prolunga in basso
   sfumando): senza JavaScript il testo bianco resta leggibile. overflow-x:clip
   ferma i bagliori che nell'originale allargavano la pagina a 1656 px. */
.hero{position:relative;background:var(--blue-deep);color:var(--hero-ink);overflow-x:clip;padding-top:calc(var(--navh) + clamp(48px,8vh,110px));padding-bottom:clamp(60px,9vh,120px)}
.hero::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:clamp(90px,9vw,160px) clamp(90px,9vw,160px);background-position:center}
.hero.grain::after{content:'';position:absolute;inset:0;background:var(--grain);opacity:.09;mix-blend-mode:overlay;pointer-events:none;z-index:0}
.hero .glow{width:60vw;height:60vw;max-width:900px;max-height:900px;background:var(--glow);opacity:.45;top:-20%;right:-15%}
.hero .glow.b{width:40vw;height:40vw;background:var(--lime);opacity:.18;left:-12%;bottom:-20%;top:auto;right:auto}
/* dopo l'hero il buio si spegne: la missione parte quando il fondo cambia */
.hero + .pin{margin-top:clamp(160px,30vh,360px)}
.hero-copy h1{margin-top:clamp(22px,3.5vh,40px);max-width:16ch}
.hero-foot{display:grid;gap:clamp(28px,4.5vh,48px);margin-top:clamp(36px,6vh,72px)}
.hero .lead{color:var(--hero-ink)}
@media (min-width:1000px){.hero-foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(48px,6vw,120px)}}
.hero-stage{position:relative;margin-top:clamp(48px,8vh,110px)}
.hero-media{position:relative;overflow:hidden;background:var(--blue-ink);border-radius:var(--r);aspect-ratio:4/5}
@media (min-width:700px){.hero-media{aspect-ratio:16/10}}
@media (min-width:1100px){.hero-media{aspect-ratio:auto;height:min(82svh,900px)}}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.8s ease}
/* senza JS (o finché app.js non fa girare le foto) si vede la prima */
.hero-media>img:first-child,.hero-media>.hero-more:first-child>img:first-child{opacity:1}
.hero-media.is-cycling img{opacity:0}
.hero-media.is-cycling img.on{opacity:1}
.hero-more{display:contents}
/* velo blu che si ritira all'arrivo: animazione CSS, non aspetta nessuno script */
html.js .hero-media::after{content:'';position:absolute;inset:0;z-index:3;background:var(--blue-deep);transform-origin:top;animation:veilUp 1.3s var(--ease) .2s both;pointer-events:none}
@keyframes veilUp{from{transform:scaleY(1)}to{transform:scaleY(0)}}
.hero-stage .plate{position:absolute;inset:0;transform:translate(clamp(10px,1.4vw,22px),clamp(10px,1.4vw,22px));border-radius:var(--r);background:var(--lime);z-index:-1}
.hero-stage .tag{position:absolute;left:clamp(16px,2.4vw,36px);bottom:clamp(16px,2.4vw,36px);z-index:4;max-width:calc(100% - 32px)}
.stamp{position:absolute;right:clamp(16px,2.4vw,36px);top:clamp(16px,2.4vw,36px);z-index:4;width:clamp(96px,10vw,140px);height:clamp(96px,10vw,140px);display:none;place-items:center}
@media (min-width:760px){.stamp{display:grid}}
/* disco di vetro scuro: il testo bianco resta leggibile anche su una foto chiara */
.stamp::before{content:'';position:absolute;inset:1%;border-radius:50%;background:rgba(var(--blue-ink-rgb),.46);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:-1}
.stamp svg{width:100%;height:100%;animation:spin 16s linear infinite;overflow:visible}
.stamp svg text{font-family:'Manrope',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.22em;fill:#fff;text-transform:uppercase}
.stamp-mark{position:absolute;width:34%;height:34%;display:grid;place-items:center;border:2.4px solid var(--lime);border-radius:24%;color:var(--lime);font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:clamp(.95rem,1.5vw,1.3rem);line-height:1;overflow:hidden;isolation:isolate}
.stamp-mark::after{content:'';position:absolute;top:0;right:0;width:36%;height:36%;background:var(--lime);border-radius:0 0 0 3px;z-index:-1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── AGGANCIATA: PAROLE ─────────────────────────────────────────── */
.pin{position:relative}
html.js .pin{height:230vh}
@media (max-width:860px){html.js .pin{height:185vh}}
.pin__stick{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding-block:clamp(90px,12vh,120px) clamp(30px,5vh,80px);overflow:hidden}
.pin .outline{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(9rem,26vw,30rem);-webkit-text-stroke-color:rgba(var(--glow-rgb),.16);z-index:0}
.pin.on-dark .outline{-webkit-text-stroke-color:rgba(var(--lime-rgb),.22)}
.on-dark .say{color:#fff}
.pin .wrap{position:relative;z-index:1}
.pin h2,.pin h3{font-size:clamp(2.1rem,min(4.8vw,8vh),4.9rem)}
.say{font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:600;font-size:clamp(1.3rem,min(2.3vw,3.6vh),2.3rem);line-height:1.28;letter-spacing:-.02em;color:var(--ink);max-width:36ch;margin-top:clamp(28px,4.5vh,56px)}
.wl{transition:opacity .55s var(--ease),color .55s}
.words .wl{opacity:.16}.words .wl.lit{opacity:1;color:var(--blue)}
.on-dark .words .wl.lit{color:var(--lime)}
/* la sezione agganciata sta sul colore-ponte, non sul buio: il suo accento deve staccare da lì */
.pin.on-dark h2 em,.pin.on-dark h3 em,.pin.on-dark .words .wl.lit{color:var(--pin-pop)}
.pin__stick .chip{margin-bottom:clamp(26px,4.5vh,60px)}
.pin__cta{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:clamp(28px,4vh,48px)}
/* senza il campo di chiazze (niente JS, o JS fermo) la sezione scura ha un fondo suo */
html:not(.bgf) .pin.on-dark{background:linear-gradient(to bottom,var(--blue-deep) 0%,var(--bridge-1) 45%,var(--bridge-2) 100%)}

/* ── IMPAGINATI ─────────────────────────────────────────────────── */
.sec-head .chip+*{margin-top:clamp(22px,3.4vh,40px)}
.sec-head h2{max-width:18ch}
.sec-head .lead{margin-top:clamp(26px,4vh,48px)}
.state{display:grid;gap:clamp(32px,5vh,56px)}
@media (min-width:920px){.state{grid-template-columns:minmax(0,.26fr) minmax(0,1fr);gap:clamp(40px,6vw,110px);align-items:start}.state-aside{position:sticky;top:calc(var(--navh) + 40px)}}
.state-body>*+*{margin-top:clamp(28px,4vh,46px)}

/* righe editoriali: numero · titolo · testo · link, separate da filetti (niente scatole) */
.cards,.rows{margin-top:var(--gap-head);border-top:1px solid rgba(11,16,50,.14)}
.rows{margin-top:0}
.card,.row{position:relative;display:grid;gap:.9rem 1.6rem;padding:clamp(30px,4vh,52px) 0;border-bottom:1px solid rgba(11,16,50,.14)}
.card .num,.row .num{font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:600;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1;color:var(--blue);-webkit-text-stroke:0}
.card h3,.row h3{margin:0;padding:0;max-width:16ch;font-size:clamp(1.5rem,2.3vw,2.2rem);line-height:1.06}
.card p,.row p{margin:0;font-size:1rem;line-height:1.65;max-width:52ch;color:var(--ink-2)}
.card .lnk{margin:0;align-self:start;justify-self:start;white-space:nowrap}
@media (min-width:920px){
  .card,.row{grid-template-columns:5rem minmax(0,.9fr) minmax(0,1.2fr) auto;column-gap:clamp(24px,3.5vw,64px);align-items:start}
  .row{grid-template-columns:5rem minmax(0,.8fr) minmax(0,1.4fr)}
  .card .lnk{padding-top:.45rem}
  .card h3,.row h3{padding-top:.1rem}
}
/* cornici: la foto è un po' più alta del riquadro, app.js la sposta in parallasse */
.frame{overflow:hidden;background:var(--blue-tint);position:relative;border-radius:var(--r)}
.frame img{position:absolute;top:-8%;left:0;width:100%;max-width:none;height:116%;object-fit:cover;transform:translate3d(0,var(--py,0px),0)}
.bracket::before,.bracket::after{content:'';position:absolute;width:28px;height:28px;border:3px solid var(--lime);z-index:3;pointer-events:none;border-radius:4px}
.bracket::before{left:14px;top:14px;border-right:0;border-bottom:0}
.bracket::after{right:14px;bottom:14px;border-left:0;border-top:0}
.tag{position:absolute;left:clamp(14px,1.8vw,26px);bottom:clamp(14px,1.8vw,26px);z-index:4;max-width:calc(100% - 28px);background:var(--paper);color:var(--ink);border-radius:999px;padding:.55rem 1rem;font-size:.66rem;font-weight:700;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;display:inline-flex;gap:.6rem;align-items:center}
.tag b{color:var(--blue);white-space:nowrap}
.feat{display:grid;gap:clamp(36px,6vh,64px);align-items:center;padding-block:clamp(70px,12vh,170px)}
.feat__m{aspect-ratio:4/5}
.feat__b>*+*{margin-top:clamp(24px,3.6vh,42px)}
.feat__b p{font-size:1.02rem;line-height:1.7;max-width:48ch}
.feat:not(:has(.feat__m img)) .feat__m{display:none}
@media (min-width:920px){
  .feat{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(56px,7vw,130px)}
  .feat.rev .feat__m{order:2}
  .feat.wide .feat__m{aspect-ratio:5/4}
  .feat:not(:has(.feat__m img)){grid-template-columns:minmax(0,1fr)}
}
/* i servizi: foto meno alte, così anche otto servizi restano una pagina */
.svc-list .feat{padding-block:clamp(56px,9vh,130px)}
.svc-list .feat__m{aspect-ratio:5/4}
/* altezza esplicita (non aspect-ratio + min-height: col minimo più alto del rapporto
   Chrome allarga il riquadro al doppio dell'altezza e la banda esce dallo schermo) */
.pmedia{position:relative;height:max(calc((min(100vw,var(--maxw)) - 2 * var(--pad)) / 2),min(70svh,820px));margin-inline:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)))}
.pmedia--top{margin-top:clamp(-40px,-4vh,-24px)}
.pmedia img{transition:opacity 1.6s ease,filter 1.2s var(--ease)}
.pmedia img+img{opacity:0}
.pmedia.is-cycling img{opacity:0}
.pmedia.is-cycling img.on{opacity:1}

/* ── RASTRELLIERA ───────────────────────────────────────────────────
   Di base (telefono, senza JS, movimento ridotto) è una fila che si scorre
   col dito; app.js aggiunge .rail--pin su desktop e la fa scorrere di lato
   con lo scroll verticale. */
.rail{position:relative}
.rail__stick{padding-block:var(--sec)}
.rail__head{padding:0 var(--pad) clamp(30px,4.4vh,54px);max-width:var(--maxw);margin-inline:auto;width:100%;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.6rem}
.rail__head h2{margin-top:clamp(18px,2.6vh,30px);max-width:24ch}
.rail__lead{margin-top:clamp(18px,2.6vh,28px);font-size:1.02rem;max-width:52ch}
.rail__cta{margin-top:clamp(18px,2.6vh,28px)}
.rail__count{font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:1.1rem;color:var(--blue);letter-spacing:-.02em;display:none}
.rail__track{display:flex;gap:clamp(16px,2.6vw,48px);padding-inline:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));scroll-padding-inline:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.6rem;scrollbar-width:thin;scrollbar-color:rgba(var(--blue-rgb),.35) transparent}
.rcard{flex:0 0 auto;display:block;width:min(80vw,clamp(300px,38vw,640px));scroll-snap-align:start;color:inherit}
.rcard__m{display:block;aspect-ratio:4/5}
.rail__track .frame img{top:0;left:-9%;width:118%;height:100%;transform:translate3d(var(--px,0px),0,0)}
.rail--pin .rail__stick{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:calc(var(--navh) + 12px) 24px}
.rail--pin .rail__track{overflow:visible;scroll-snap-type:none;padding-bottom:0;will-change:transform}
.rail--pin .rail__count{display:block}
.rail--pin .rcard{width:min(84vw,clamp(300px,34vw,560px))}
.rail--pin .rcard__m{aspect-ratio:auto;height:min(58svh,620px)}

/* ── GALLERIA ───────────────────────────────────────────────────── */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,56px) clamp(14px,3vw,56px)}
.gitem{position:relative;grid-column:1/-1;margin:0;cursor:zoom-in}
.gitem:nth-child(n+7){grid-column:span 1}
/* l'ultima foto rimasta sola prende la riga intera */
.gitem:nth-child(n+7):nth-child(odd):last-child{grid-column:1/-1}
.gitem__m{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;border-radius:var(--r);background:var(--blue-tint)}
.gitem__m::before{content:'';position:absolute;left:14px;top:14px;width:24px;height:24px;border:3px solid var(--lime);border-right:0;border-bottom:0;border-radius:4px;z-index:2;pointer-events:none}
.gitem__m img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.gitem:hover .gitem__m img{transform:scale(1.04)}
.gitem__n{position:absolute;right:clamp(12px,1.4vw,20px);top:clamp(12px,1.4vw,20px);z-index:2;padding:.35rem .7rem;border-radius:999px;background:rgba(var(--blue-ink-rgb),.42);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.2em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.gitem__c{margin-top:1rem;font-size:.95rem;font-weight:600;line-height:1.45;color:var(--ink)}
@media (min-width:860px){
  .gal{grid-template-columns:repeat(6,minmax(0,1fr))}
  .gitem,.gitem:nth-child(n+7){grid-column:span 3}
  .gitem:nth-child(3n+1){grid-column:1/-1}
  .gitem:nth-child(3n+1) .gitem__m{aspect-ratio:auto;height:max(calc((min(100vw,var(--maxw)) - 2 * var(--pad)) / 2),min(70svh,760px))}
  .gitem:nth-child(n+13){grid-column:span 2}
  .gitem:nth-child(n+13) .gitem__m{aspect-ratio:4/5;height:auto}
  /* code della griglia: una foto sola prende la riga (formato largo), due si dividono la riga */
  .gitem:nth-child(3n+2):last-child:not(:nth-child(n+13)),
  .gitem:nth-child(n+13):nth-child(3n+1):last-child{grid-column:1/-1}
  .gitem:nth-child(3n+2):last-child:not(:nth-child(n+13)) .gitem__m,
  .gitem:nth-child(n+13):nth-child(3n+1):last-child .gitem__m{aspect-ratio:auto;height:max(calc((min(100vw,var(--maxw)) - 2 * var(--pad)) / 2),min(70svh,760px))}
  .gitem:nth-child(n+13):nth-child(3n+1):nth-last-child(2),
  .gitem:nth-child(n+13):nth-child(3n+2):last-child{grid-column:span 3}
}
/* lightbox (la crea app.js) */
.lb{position:fixed;inset:0;z-index:110;background:var(--blue-ink);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.lb.on{opacity:1;visibility:visible}
.lb__bar,.lb__foot{display:flex;align-items:center;justify-content:space-between;gap:1.4rem;padding:clamp(14px,2.4vh,26px) var(--pad);color:var(--foot-ink);font-size:.66rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.lb__stage{flex:1;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);min-height:0}
.lb__stage img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto;border-radius:var(--r-sm);opacity:0;transform:scale(.985);transition:opacity .6s var(--ease),transform .9s var(--ease)}
.lb.on .lb__stage img.ready{opacity:1;transform:none}
.lb__cap{font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:700;font-size:1.05rem;letter-spacing:-.01em;text-transform:none;color:#fff}
.lb button{background:none;border:0;color:var(--lime);font:inherit;font-size:.66rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:.7rem .5rem;min-height:44px}
.lb__nav{display:flex;gap:1.4rem}

/* ── BANDA CTA ──────────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;padding-block:clamp(120px,22vh,280px)}
.band .outline{position:absolute;right:-2%;bottom:-6%;font-size:clamp(10rem,30vw,34rem);-webkit-text-stroke-color:rgba(var(--glow-rgb),.18);z-index:0;-webkit-mask-image:linear-gradient(#000 40%,transparent 95%);mask-image:linear-gradient(#000 40%,transparent 95%)}
.band .wrap{position:relative;z-index:1}
.band-grid{display:grid;row-gap:0;column-gap:clamp(56px,7vw,140px)}
.band-grid>div:first-child{display:contents}
.band-grid .chip{justify-self:start}
.band-grid h2{margin-top:clamp(22px,3.4vh,40px)}
.band-grid .lead{margin-top:clamp(26px,4vh,46px)}
.band-grid .actions{margin-top:clamp(32px,5vh,56px)}
.band-contacts{margin-top:clamp(48px,7vh,80px);min-width:0}
.band .btn-lime{--bg:var(--band-btn);--fg:var(--band-btn-fg)}
@media (min-width:920px){.band-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:end}.band-grid .chip,.band-grid h2{grid-column:1/-1}.band-grid .chip{justify-self:start}.band-grid .lead,.band-grid .actions{grid-column:1}.band-contacts{grid-column:2;grid-row:3/span 2;align-self:start;margin-top:clamp(26px,4vh,46px)}.band-grid:not(:has(.lead)) .band-contacts{grid-row:3}.band-grid:not(:has(.lead)) .actions{align-self:start}}
.band-contacts a{display:block;font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:700;font-size:clamp(1.3rem,1.9vw,1.9rem);color:var(--ink);letter-spacing:-.02em;line-height:1.15;padding-bottom:.5rem;margin-bottom:1.2rem;border-bottom:2px solid rgba(11,16,50,.14);overflow-wrap:anywhere;transition:border-color .4s}
.band-contacts a:hover{border-color:var(--blue)}
.band-contacts p{font-size:.92rem;line-height:1.8;color:var(--ink-2)}
.band-contacts p+p{margin-top:.4rem}

/* ── PAGINE INTERNE ─────────────────────────────────────────────── */
.phead{position:relative;padding-top:calc(var(--navh) + clamp(70px,13vh,170px));padding-bottom:clamp(60px,10vh,130px)}
.phead h1{margin-top:clamp(22px,3.5vh,40px);max-width:15ch}
.phead .lead{margin-top:clamp(28px,4.4vh,50px)}
.phead-actions{margin-top:clamp(32px,5vh,56px)}

/* ── CONTATTI ───────────────────────────────────────────────────── */
.contact-grid{display:grid;gap:clamp(56px,10vh,120px)}
@media (min-width:920px){.contact-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(56px,8vw,150px);align-items:start}}
.dl{display:grid;gap:clamp(26px,4vh,44px)}
.dl dt{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--blue);font-weight:800;margin-bottom:.55rem}
.dl dd{font-size:1.05rem;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.dl dd.big{font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:clamp(1.5rem,2.2vw,2.1rem);letter-spacing:-.03em;line-height:1.1}
.dl dd a:hover{color:var(--blue)}
.hours{margin-top:.2rem;display:grid;gap:.1rem;max-width:26rem}
.hours div{display:flex;align-items:baseline;justify-content:space-between;gap:1.4rem;padding-block:.6rem;border-bottom:1px solid var(--line);font-size:.94rem}
.hours dt{color:var(--muted);font-size:inherit;letter-spacing:0;text-transform:none;margin:0;font-weight:600;flex:0 0 auto}
.hours dd{color:var(--ink);font-size:inherit;font-weight:600;text-align:right}
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vh,30px);margin-top:clamp(40px,6vh,70px);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,44px)}
@media (min-width:640px){.form{grid-template-columns:repeat(2,minmax(0,1fr))}.form .full{grid-column:1/-1}}
.field-wrap{position:relative;display:grid;gap:.5rem;min-width:0}
.field-label{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:800}
.field{width:100%;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:.95rem 2.4rem .95rem 1.1rem;font:inherit;font-size:1rem;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.field:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-tint)}
textarea.field{min-height:150px;resize:vertical}
/* conferma dei campi compilati (il segno è del CSS, non testo della pagina) */
.field:not(:placeholder-shown):valid{border-color:var(--lime-deep)}
.field-wrap::after{content:'✓';position:absolute;right:1rem;bottom:.95rem;font-size:.9rem;font-weight:800;color:var(--lime-deep);opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
.field-wrap:has(.field:not(:placeholder-shown):valid)::after{opacity:1;transform:scale(1)}
.field-wrap:has(textarea)::after{bottom:auto;top:2.6rem}
.form .actions{margin-top:.2rem}
.map-sec .sec-head{margin-bottom:clamp(40px,6vh,70px)}
.map{background:var(--blue-tint);height:max(calc((min(100vw,var(--maxw)) - 2 * var(--pad)) / 2),min(60svh,700px));overflow:hidden;border-radius:var(--r)}
.map iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(1) contrast(.94);transition:filter 1.2s var(--ease)}
.map:hover iframe,.map.in iframe{filter:none}
.map-link{margin-top:1.4rem}

/* ── LEGALE (markdown della privacy) ────────────────────────────── */
.legal-sec{padding-top:0}
.legal{max-width:880px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(26px,4vw,64px)}
.legal>*:first-child{margin-top:0}
.legal h2{font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.12;margin:clamp(36px,5vh,56px) 0 1rem;padding-top:clamp(24px,3.4vh,36px);border-top:1px solid var(--line)}
.legal>h2:first-child{padding-top:0;border-top:0}
.legal h3{font-size:clamp(1.12rem,1.5vw,1.35rem);line-height:1.2;margin:1.8rem 0 .7rem}
.legal p{font-size:1rem;line-height:1.72;max-width:68ch;margin-bottom:1rem}
.legal ul,.legal ol{margin:0 0 1.2rem;padding:0;display:grid;gap:.1rem}
.legal ul{list-style:none}
.legal ul li{position:relative;padding:.6rem 0 .6rem 1.5rem;border-bottom:1px solid var(--line);font-size:.98rem}
.legal ul li::before{content:'';position:absolute;left:0;top:1.15rem;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.legal ol{padding-left:1.4rem;list-style:decimal}
.legal ol li{padding:.3rem 0;font-size:.98rem}
.legal strong{color:var(--ink);font-weight:800}
.legal a{color:var(--blue);font-weight:700;overflow-wrap:anywhere}
.legal a:hover{text-decoration:underline}

/* ── FOOTER ─────────────────────────────────────────────────────── */
/* la banda scende nel footer con un solo passaggio: la salita verso il buio
   la fanno le chiazze del campo di sfondo, qui c'è la base che parte da zero
   in cima e diventa piena in fondo pagina */
footer{background:transparent;color:var(--foot-ink);padding-block:clamp(80px,13vh,170px) clamp(28px,4vh,48px);margin-top:clamp(320px,56vh,700px)}
footer::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(var(--blue-ink-rgb),0.000) 0%,rgba(var(--blue-ink-rgb),0.028) 10%,rgba(var(--blue-ink-rgb),0.104) 20%,rgba(var(--blue-ink-rgb),0.216) 30%,rgba(var(--blue-ink-rgb),0.352) 40%,rgba(var(--blue-ink-rgb),0.500) 50%,rgba(var(--blue-ink-rgb),0.648) 60%,rgba(var(--blue-ink-rgb),0.784) 70%,rgba(var(--blue-ink-rgb),0.896) 80%,rgba(var(--blue-ink-rgb),0.972) 90%,rgba(var(--blue-ink-rgb),1.000) 100%);pointer-events:none;z-index:0}
footer>.wrap{position:relative;z-index:1}
/* senza il campo di chiazze il footer si prende un fondo pieno */
html:not(.bgf) footer{margin-top:0;background:linear-gradient(to bottom,var(--bridge-3) 0%,var(--blue-deep) 40%,var(--blue-ink) 100%)}
.foot-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:2rem}
.foot-id{min-width:0;max-width:100%}
/* anche .footer-brand da solo: il Logo Studio, rimettendo il nome, scrive
   <div class="footer-brand display"> senza le classi del layout */
.foot-brand,.footer-brand{display:flex;flex-wrap:wrap;align-items:center;gap:.12em clamp(12px,1.6vw,24px);font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:clamp(2.4rem,7vw,6.6rem);line-height:.92;letter-spacing:-.045em;color:#fff;overflow-wrap:anywhere}
.footer-brand .brand-mark{font-size:.5em;width:1.8em;height:1.8em;border-radius:.46em;border-width:.12em;--mark-dot:var(--lime);color:#fff}
.footer-logo{height:clamp(48px,6vw,84px);width:auto;max-width:min(300px,80vw);object-fit:contain;display:block}
.footer-logo--plate{background:rgba(255,255,255,.94);padding:10px 16px;border-radius:14px;box-sizing:content-box;box-shadow:0 2px 12px rgba(0,0,0,.14)}
.foot-tag{margin-top:clamp(24px,4vh,44px);font-size:1rem;line-height:1.65;max-width:42ch}
.foot-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem 2rem;margin-top:clamp(60px,10vh,120px);padding-top:clamp(36px,5vh,60px);border-top:1px solid rgba(255,255,255,.14)}
@media (min-width:900px){.foot-cols{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:3rem}}
.foot-cols h4{font-size:.64rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--lime);margin-bottom:1.2rem}
.foot-cols a,.foot-cols p,.foot-cols li{font-size:.92rem;line-height:1.9;color:var(--foot-ink-2);display:block;overflow-wrap:anywhere}
.foot-cols a{position:relative;transition:padding-left .4s var(--ease),color .3s}
.foot-cols a::before{content:'';position:absolute;left:0;top:50%;width:0;height:2px;background:var(--lime);transition:width .4s var(--ease)}
.foot-cols a:hover{color:var(--lime);padding-left:16px}.foot-cols a:hover::before{width:10px}
.foot-hours li{display:flex;justify-content:space-between;align-items:baseline;gap:.4rem 1.2rem;flex-wrap:wrap;font-size:.86rem;color:var(--foot-ink-3);line-height:1.7;padding-block:.2rem}
.foot-hours li b{font-weight:600;color:#fff}
.foot-bottom{display:flex;flex-wrap:wrap;gap:.9rem 2rem;justify-content:space-between;margin-top:clamp(50px,8vh,100px);font-size:.8rem;color:var(--foot-ink-4)}
.foot-bottom a{min-height:24px}
.foot-bottom a:hover{color:var(--lime)}

/* ── MOVIMENTO ──────────────────────────────────────────────────────
   Stati iniziali SOLO con JavaScript. Ripiego a tempo: se app.js non parte
   (html.rv non arriva), dopo 3,5 s tutto si mostra da solo. */
html.js [data-r]{opacity:0;transform:translateY(16px);transition:opacity .95s var(--ease),transform .95s var(--ease);animation:rvFailsafe .01s 3.5s forwards}
html.rv [data-r]{animation:none}
html.js [data-r].in{opacity:1;transform:none}
@keyframes rvFailsafe{to{opacity:1;transform:none}}
.lines .w{display:inline-block;vertical-align:bottom;padding-bottom:.2em;margin-bottom:-.2em;clip-path:inset(-.5em -.4em 0 -.4em)}
.lines .w>i{display:inline-block;font-style:inherit;transform:translateY(112%);transition:transform 1.15s var(--ease);transition-delay:calc(90ms * var(--l,0))}
.lines.in .w>i{transform:none}
/* immagini: entrano sfocate e vanno a fuoco quando sono caricate (solo se app.js gira) */
html.rv .frame img:not(.is-loaded),html.rv .hero-media img:not(.is-loaded){filter:blur(14px) saturate(1.15)}
.frame img,.hero-media img{transition:filter 1.2s var(--ease),opacity 1.8s ease}

/* ═══ EFFETTI PREMIUM, SEZIONE PER SEZIONE ═══════════════════════════ */
/* 1 · hero: gli strati seguono il mouse (lastra, foto, timbro) */
.hero-stage .plate,.hero-media,.hero-stage .stamp{transition:transform .9s var(--ease)}
/* 2 · banda immagine: si ridimensiona e arrotonda entrando (via --p dal JS) */
.pmedia{transform:scale(calc(1.06 - .06 * var(--p,1)));border-radius:calc(var(--r) * var(--p,1))}
/* 3 · righe: all'hover il numero si accende, il titolo scivola, la riga si tinge */
.card,.row{transition:background-color .5s var(--ease),padding-left .5s var(--ease)}
.card:hover,.row:hover{background:rgba(var(--blue-rgb),.035);padding-left:.4rem}
.card .num,.row .num{transition:color .4s,transform .5s var(--ease)}
.card:hover .num,.row:hover .num{color:var(--lime-deep);transform:translateX(4px)}
.card h3,.row h3{transition:transform .5s var(--ease)}
.card:hover h3,.row:hover h3{transform:translateX(6px)}
/* 4 · schede della rastrelliera: inclinazione al mouse, foto che si avvicina, chip che sale */
.rcard{perspective:900px}
.rcard__m{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .6s var(--ease)}
.rcard__m img{transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}
.rcard:hover .rcard__m img{transform:translate3d(var(--px,0px),0,0) scale(1.06)}
/* 5 · cornici delle feature: zoom lento e targhetta che sale */
.feat__m img{transition:transform 1.4s var(--ease),filter 1.2s var(--ease)}
.feat__m:hover img{transform:translate3d(0,var(--py,0px),0) scale(1.05)}
.feat__m .tag,.pmedia .tag{transition:transform .5s var(--ease)}
.feat__m:hover .tag,.pmedia:hover .tag{transform:translateY(-4px)}
/* 6 · galleria: cursore-etichetta che segue il mouse sopra le foto */
.cursor-pill{position:fixed;left:0;top:0;z-index:80;pointer-events:none;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;border-radius:999px;background:var(--ink);color:var(--lime);font-size:.62rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .3s,transform .4s var(--ease)}
.cursor-pill.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* 7 · bottoni magnetici: il JS li sposta verso il cursore */
.btn.magnet{transition:transform .35s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}

/* ═══ RASTRELLIERA: testo dentro la foto ═══════════════════════════ */
.rcard__ov{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2.2vw,30px);color:#fff;background:linear-gradient(to top,rgba(var(--blue-ink-rgb),.82) 0%,rgba(var(--blue-ink-rgb),.42) 36%,rgba(var(--blue-ink-rgb),0) 64%);pointer-events:none}
.rcard__ov .chip{position:absolute;top:clamp(16px,2vw,26px);left:clamp(16px,2vw,26px);border-color:rgba(255,255,255,.28);background:rgba(var(--blue-ink-rgb),.35);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .4s,color .4s,transform .5s var(--ease)}
.rcard__ov .chip::before{background:var(--lime)}
.rcard__txt{display:block;transform:translateY(calc(1.2rem));transition:transform .6s var(--ease)}
.rcard__t{display:block;font-family:'Bricolage Grotesque','Geologica',sans-serif;font-weight:800;font-size:clamp(1.3rem,1.9vw,1.9rem);line-height:1.04;letter-spacing:-.03em;color:#fff;max-width:16ch;overflow-wrap:break-word}
.rcard__d{display:block;margin-top:.6rem;font-size:.92rem;line-height:1.5;color:rgba(230,227,218,.88);max-width:30ch;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease) .05s,transform .6s var(--ease) .05s}
.rcard__go{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;font-size:.64rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease) .12s,transform .6s var(--ease) .12s}
/* l'etichetta viene dall'attributo: non conta come testo della pagina */
.rcard__go::before{content:attr(data-hint)}
.rcard__go::after{content:'↗';font-size:1.1em;letter-spacing:0}
.rcard:hover .rcard__txt,.rcard:focus-visible .rcard__txt{transform:translateY(0)}
.rcard:hover .rcard__d,.rcard:hover .rcard__go,.rcard:focus-visible .rcard__d,.rcard:focus-visible .rcard__go{opacity:1;transform:none}
.rcard:hover .rcard__ov .chip{background:var(--lime);color:var(--on-lime);transform:translateY(-3px)}
.rcard:hover .rcard__ov .chip::before{background:var(--on-lime)}
.rcard__m:not(:has(img)){background:linear-gradient(150deg,var(--glow) 0%,var(--blue-deep) 70%)}
@media (hover:none){.rcard__txt{transform:none}.rcard__d,.rcard__go{opacity:1;transform:none}.cursor-pill{display:none}.rcard__m{transform:none!important}}

/* ═══ BLOG (contenuto dentro la cornice del sito) ══════════════════ */
/* lo shell del blog lascia i titoli al font del testo: qui prendono quello del layout */
.svhb{--svhb-head:'Bricolage Grotesque','Geologica','Manrope',sans-serif}

/* ═══ TELEFONO ════════════════════════════════════════════════════ */
@media (max-width:640px){
  :root{--navh:64px}
  .nav-brand{font-size:1.05rem;max-width:calc(100vw - 110px)}
  .nav-logo{height:36px;max-width:170px}
  .hero-foot .actions{gap:1rem 1.6rem}
  .tag{font-size:.6rem;letter-spacing:.12em;padding:.5rem .85rem}
  .hero-stage .tag{flex-wrap:wrap;row-gap:.1rem}
  .pmedia{height:min(62svh,560px)}
  .map{height:min(70svh,520px)}
  .card,.row{padding-block:28px}
  .band{padding-block:clamp(90px,16vh,160px)}
  .band .outline{font-size:9rem}
  .foot-cols{gap:2rem 1.4rem;grid-auto-flow:row dense}
  .foot-cols>div:has(.foot-mail){grid-column:1/-1}
  .foot-bottom{flex-direction:column;gap:.6rem}
  .btn{padding:.9rem 1.3rem}
  .gitem__c{font-size:.88rem}
}
@media (max-width:380px){.foot-cols{grid-template-columns:minmax(0,1fr)}}

/* ═══ MOVIMENTO RIDOTTO ═══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js [data-r]{opacity:1;transform:none}
  .lines .w>i{transform:none}
  .words .wl{opacity:1}
  html.js .pin{height:auto}
  html.js .hero-media::after{display:none}
  .frame img,.hero-media img{filter:none!important}
  .pmedia{transform:none;border-radius:var(--r)}
  .stamp svg{animation:none}
  .curtain{display:none}
}

/* Classi-gancio senza stile proprio (le usano app.js e la piattaforma: il
   bottone del sito per la CTA del blog, la galleria per l'editor, i blocchi
   del footer): la regola vuota le dichiara, così il controllo salute dei siti
   pubblicati non le conta come "classi senza stile". */
.foot,.foot-cta,.adv,.feats,.tag-t,.sec--rows,.offer,.gallery-grid{}

/* ============================================================
   MENU STRETTO (05/10/2026): quando le voci del menu non ci stanno fra il
   marchio e i bottoni (nome lungo, pagine in più del sito attuale) app.js
   mette html.nav-stretto e la barra fa come sotto il punto di rottura del
   layout: niente menu in riga né bottone, il burger e il menu del telefono.
   Solo con JavaScript; un menu che ci sta non prende mai la classe.
   ============================================================ */
html.nav-stretto .nav-main,html.nav-stretto .nav-in>.btn{display:none}
html.nav-stretto .nav-burger{display:inline-grid}