/* =====================================================================
   SVEAHOST · LAYOUT 7 "NOIR" (Gabriele) — stampo del generatore.
   Origine: AI LAYOUT 20 "CARBONIO" — tema scuro cinematografico:
   carbone + ambra + carta, Inter Tight (titoli) + Inter (testo).
   UN SOLO MOTIVO: l'iride (cerchio che si apre) — passaggio fra le pagine,
   missione e CTA che si accendono d'ambra, foto che passano dal bianco e
   nero al colore dentro un cerchio, lightbox, mappa, menu.
   Regole dello stampo:
   - gli stati iniziali delle comparse valgono solo sotto html.js, con un
     ripiego a tempo (html.js senza .l7-run: app.js non è partito);
   - le copie decorative (strato ambra, foto in bianco e nero, tunnel,
     menu del telefono, lightbox) le crea app.js: l'HTML ha ogni testo
     una volta sola;
   - i suggerimenti ("scorri") stanno in data-hint, mai nel testo.
   ===================================================================== */
:root{
  --ink:#0B0B0E; --ink-2:#131318; --ink-3:#1B1B22; --line:rgba(244,241,234,.12); --line-2:rgba(244,241,234,.22);
  --paper:#F2EEE6; --paper-2:#E7E1D5; --paper-line:rgba(11,11,14,.12);
  --fg:#F4F1EA; --fg-2:rgba(244,241,234,.68); --muted:rgba(244,241,234,.48);
  /* ACCENTO (i colori del cliente li sostituiscono: src/colori/layout-7.ts).
     --amber: testo e linee d'accento sul fondo scuro · --amber-fill: i pieni
     (bottoni, strato ambra, lastra, pilastro 01) e --on-amber il testo sopra ·
     --amber-deep / --amber-text: l'accento sulla carta (titoli / testo piccolo) ·
     --amber-ink(-rgb/-soft) e --amber-em: testi e parola in evidenza sui pieni. */
  --amber:#E9B44C; --amber-fill:#E9B44C; --amber-rgb:233, 180, 76; --on-amber:#0B0B0E; --amber-tint:rgba(233,180,76,.12);
  --amber-deep:#B9822A; --amber-text:#95661B;
  --amber-ink:#2A1E08; --amber-ink-rgb:42, 30, 8; --amber-ink-soft:rgba(42,30,8,.8); --amber-em:#fff;
  --maxw:1560px; --pad:clamp(20px,4.2vw,80px); --navh:70px;
  --sec:clamp(110px,16vh,220px); --sec-sm:clamp(76px,11vh,150px);
  --r:clamp(16px,1.8vw,28px); --r-sm:12px;
  --fd:'Inter Tight','Inter',system-ui,sans-serif; --fb:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M2 8h11M9 4.2 12.8 8 9 11.8'/%3E%3C/svg%3E");
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;background:var(--ink)}
body{position:relative;background:var(--ink);color:var(--fg-2);font-family:var(--fb);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}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--amber-fill);color:var(--on-amber)}
:focus-visible{outline:2px solid var(--amber);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)}
main{position:relative;display:block}

/* ── SUPERFICI ─────────────────────────────────────────────────── */
.on-paper{background:var(--paper);color:rgba(11,11,14,.72)}
.on-paper h1,.on-paper h2,.on-paper h3,.on-paper h4{color:var(--ink)}
.on-paper .lead{color:rgba(11,11,14,.66)}
.on-paper .chip{color:var(--amber-text)}
.on-paper .lnk{color:var(--ink);background-image:linear-gradient(rgba(11,11,14,.22),rgba(11,11,14,.22))}
.on-paper .btn.ghost{border-color:rgba(11,11,14,.3);color:var(--ink)}
.on-paper .btn.ghost:hover{color:var(--on-amber)}
.on-paper h2 em,.on-paper h3 em{color:var(--amber-deep)}
.on-paper ::selection{background:var(--ink);color:var(--paper)}

/* ── TIPOGRAFIA ─────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--fd);font-weight:800;color:var(--fg);letter-spacing:-.04em;line-height:.95;overflow-wrap:break-word}
.h-xl{font-size:clamp(2.5rem,5.6vw,6.2rem);line-height:.92}
.h-lg{font-size:clamp(2rem,4.1vw,4.3rem);line-height:.95}
.h-md{font-size:clamp(1.5rem,2.5vw,2.4rem);line-height:1.02}
.h-col{font-size:clamp(1.8rem,2.9vw,3rem);line-height:.98}
.h-sm{font-size:clamp(1.25rem,1.7vw,1.6rem);line-height:1.1;letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--amber)}
.lead{font-size:clamp(1.02rem,1.2vw,1.2rem);line-height:1.55;max-width:44ch;color:var(--fg-2)}
p{max-width:58ch}
.chip{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.7rem;font-size:.66rem;font-weight:600;letter-spacing:.2em;line-height:1.5;text-transform:uppercase;color:var(--amber)}
.chip::before{content:'';width:20px;height:1px;background:currentColor;opacity:.8}
.chip b{font-weight:600}
.chip b::after{content:'—';margin-left:.7rem}
.num{font-family:var(--fd);font-weight:800;font-size:clamp(2rem,3vw,3rem);line-height:.9;color:var(--amber);letter-spacing:-.04em}
.sec-head{display:grid;gap:26px;max-width:760px}
.sec-head .lead{margin-top:4px}
.sec-head.row{max-width:none;grid-template-columns:1fr;align-items:end}
@media (min-width:900px){.sec-head.row{grid-template-columns:1.1fr .9fr;gap:40px}}
.sec-head.row .lead{margin-top:0;max-width:40ch}
.stack-t{display:grid;gap:26px;justify-items:start}

/* ── AZIONI ─────────────────────────────────────────────────────── */
/* .btn = il bottone PIENO ambra (la lista di classi più corta con "btn":
   è lo stile che il blog dà alla sua CTA); .btn.ghost = il contorno. */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.9rem;min-height:48px;padding:.85rem 1.45rem;border:1px solid var(--amber-fill);border-radius:999px;background:var(--amber-fill);color:var(--on-amber);font-family:var(--fb);font-size:.7rem;font-weight:600;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;text-decoration:none;overflow:hidden;transition:color .45s var(--ease),border-color .45s}
.btn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.btn::after{content:'';flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .45s var(--ease)}
.btn:hover{color:var(--ink);border-color:var(--fg)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover::after{transform:translateX(4px)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--fg)}
.btn.ghost::before{background:var(--amber-fill)}
.btn.ghost:hover{color:var(--on-amber);border-color:var(--amber-fill)}
.lnk{position:relative;display:inline-flex;align-items:center;gap:.7rem;min-height:44px;font-size:.7rem;font-weight:600;letter-spacing:.18em;line-height:1.3;text-transform:uppercase;color:var(--fg);background:linear-gradient(var(--line-2),var(--line-2)) no-repeat left bottom 6px/100% 1px}
.lnk::before{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .55s var(--ease);z-index:1}
.lnk:hover::before{transform:scaleX(1);transform-origin:left}
.lnk::after{content:'';flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .45s var(--ease)}
.lnk:hover::after{transform:translateX(5px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem}
.btn .rip{position:absolute;z-index:-1;border-radius:50%;background:rgba(244,241,234,.35);transform:translate(-50%,-50%) scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* ── HEADER ─────────────────────────────────────────────────────── */
.nav{position:fixed;inset-inline:0;top:0;z-index:60;color:var(--fg);transition:background-color .5s,color .4s}
.nav.is-scrolled{background:rgba(11,11,14,.74);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.nav.on-light{color:var(--ink)}
.nav.on-light.is-scrolled{background:rgba(242,238,230,.86)}
.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.5rem}
.nav-brand{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;min-width:0;font-family:var(--fd);font-weight:800;font-size:1.2rem;line-height:1.1;letter-spacing:-.03em;color:inherit}
.brand-mark{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--amber-fill);color:var(--on-amber);font:800 .95rem/1 var(--fd);letter-spacing:0}
.nav-logo{height:clamp(34px,3.6vw,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:clamp(1.2rem,2vw,2.1rem)}
.nav-links a{position:relative;display:inline-block;padding:.4rem 0;white-space:nowrap;font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:inherit;opacity:.74;transition:opacity .3s,color .3s}
.nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav-links a:hover{opacity:1}.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-links a[aria-current="page"]{opacity:1;color:var(--amber)}
.nav.on-light .nav-links a[aria-current="page"]{color:var(--amber-text)}
.nav .btn.nav-cta{display:none;min-height:42px;padding:.7rem 1.2rem;font-size:.64rem;flex:none}
.nav.on-light .btn.nav-cta{border-color:rgba(11,11,14,.3);color:var(--ink)}
.nav.on-light .btn.nav-cta:hover{color:var(--on-amber)}
.burger{flex:none;display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:46px;height:46px;padding:0 12px;border-radius:50%;background:var(--amber-fill)}
.burger i{display:block;height:2px;background:var(--on-amber);border-radius:2px;transition:transform .4s var(--ease),opacity .3s}
body.menu-open .burger i:first-child{transform:translateY(3.5px) rotate(45deg)}
body.menu-open .burger i:last-child{transform:translateY(-3.5px) rotate(-45deg)}
body.menu-open .nav{color:var(--fg);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
@media (min-width:1000px){.nav-main{display:block}.nav .btn.nav-cta{display:inline-flex}.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(--ink);display:grid;grid-template-rows:1fr auto;padding:calc(var(--navh) + 5vh) var(--pad) 5vh;overflow-y:auto;clip-path:circle(0 at calc(100% - 48px) 35px);visibility:hidden;transition:clip-path .7s var(--ease-io),visibility 0s .7s}
body.menu-open .sheet{clip-path:circle(150% at calc(100% - 48px) 35px);visibility:visible;transition:clip-path .8s var(--ease-io),visibility 0s}
.sheet-nav{display:grid;align-content:center;gap:.3rem}
.sheet-nav a{display:flex;align-items:baseline;gap:1rem;font-family:var(--fd);font-weight:800;font-size:clamp(2rem,9vw,4.2rem);line-height:1.05;letter-spacing:-.04em;color:var(--fg);padding:.25rem 0;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .7s var(--ease);overflow-wrap:anywhere}
.sheet-nav a span{font:600 .7rem/1 var(--fb);letter-spacing:.2em;color:var(--amber)}
.sheet-nav a[aria-current="page"]{color:var(--amber)}
body.menu-open .sheet-nav a{opacity:1;transform:none;transition-delay:calc(.15s + var(--i,0) * .06s)}
.sheet-foot{display:grid;gap:.1rem;margin-top:3vh;font-size:.9rem;color:var(--fg-2);border-top:1px solid var(--line);padding-top:1rem}
.sheet-foot a,.sheet-foot span{display:inline-flex;align-items:center;min-height:44px;overflow-wrap:anywhere}

/* ── COMPARSE (solo con JS; ripiego a tempo se app.js non parte) ─── */
html.js [data-r]{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform 1s var(--ease)}
html.js [data-r].in{opacity:1;transform:none}
.lines .w{display:inline-block;clip-path:inset(-.5em -.4em -.12em -.4em)}
.lines .w i{display:inline-block;font-style:inherit;transform:translate3d(0,110%,0);transition:transform 1.05s var(--ease);transition-delay:calc(var(--l,0) * .09s)}
.lines.in .w i{transform:none}
.words .wl{display:inline-block;color:rgba(244,241,234,.26);transition:color .35s}
.words .wl.lit{color:var(--fg)}
.words em .wl.lit{color:var(--amber)}
.on-paper .words .wl{color:rgba(11,11,14,.22)}.on-paper .words .wl.lit{color:var(--ink)}.on-paper .words em .wl.lit{color:var(--amber-deep)}

/* cornice fotografica: si apre a cerchio (.clip) e ha la parallasse (.px) */
.frame{position:relative;overflow:hidden;border-radius:var(--r);background:var(--ink-3)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.px img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;will-change:transform}
html.js .frame.clip{clip-path:circle(1% at 50% 50%);transition:clip-path 1.4s var(--ease-io)}
html.js .frame.clip.in{clip-path:circle(75% at 50% 50%)}
.on-paper .frame{background:var(--paper-2)}

/* ── TESTATE DELLE PAGINE INTERNE ──────────────────────────────── */
.ph{position:relative;padding:calc(var(--navh) + clamp(64px,11vh,140px)) 0 clamp(56px,9vh,110px)}
.ph .wrap{display:grid;gap:26px}
.ph .lead{margin-top:4px}
.ph .actions{margin-top:10px}
.ph-t{display:grid;gap:26px;justify-items:start}
@media (min-width:900px){.ph.split .wrap{grid-template-columns:1.25fr .75fr;align-items:end;gap:60px}.ph.split .lead{margin-top:0}}

/* ── IRIDE: il motivo del tema ──────────────────────────────────── */
/* .iris = sezione con lo strato A (il contenuto vero); app.js ne crea la
   copia B in ambra (aria-hidden, pointer-events:none: i clic arrivano ad A),
   visibile da un cerchio che segue il puntatore e si apre scorrendo.
   .pin (scena agganciata) solo con JS e senza movimento ridotto. */
.iris{position:relative}
.iris-view{position:relative;overflow:hidden;background:var(--ink)}
.lay{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:calc(var(--navh) + 40px) 0 clamp(48px,8vh,90px);isolation:isolate}
.lay .wrap{position:relative;z-index:2;display:grid;gap:26px;justify-items:start}
.iris.center .lay .wrap{justify-items:center;text-align:center}
.iris.center .lay .lead{margin-inline:auto}
.iris.center .lay .actions{justify-content:center}
.lay h2{max-width:14ch}
.lay .lead{margin-top:4px}
.lay .actions{margin-top:10px}
.lay.a{background:var(--ink)}
.lay.a::before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(244,241,234,.11) 1px,transparent 1.2px);background-size:30px 30px;-webkit-mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent);mask-image:radial-gradient(70% 70% at 60% 40%,#000,transparent)}
.lay.b{position:absolute;inset:0;pointer-events:none;clip-path:circle(var(--lr,110px) at var(--lx,62%) var(--ly,42%));will-change:clip-path}
.lay.b.amber{background:var(--amber-fill);color:rgba(var(--amber-ink-rgb),.78)}
.lay.b.amber h2{color:var(--amber-ink)}.lay.b.amber h2 em{color:var(--amber-em)}
.lay.b.amber .chip{color:var(--amber-ink)}.lay.b.amber .lead,.lay.b.amber p{color:var(--amber-ink-soft)}
.lay.b.amber .lnk{color:var(--amber-ink);background-image:linear-gradient(rgba(var(--amber-ink-rgb),.3),rgba(var(--amber-ink-rgb),.3))}
.lay.b.amber .btn{background:var(--ink);border-color:var(--ink);color:var(--fg)}
.lay.b.amber .btn.ghost{background:transparent;border-color:rgba(var(--amber-ink-rgb),.4);color:var(--amber-ink)}
.lay.b.amber .mf-p{color:var(--amber-ink)}.lay.b.amber .mf-p em{color:var(--amber-em)}
.lay.b.amber .words .wl{color:var(--amber-ink)}.lay.b.amber .words em .wl{color:var(--amber-em)}
.iris-ring{position:absolute;left:0;top:0;z-index:4;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;border:1.5px solid var(--amber);pointer-events:none;opacity:0;transition:opacity .4s}
.iris-view.hover .iris-ring{opacity:1}
.iris.amber-on .iris-ring{border-color:var(--ink)}
html.js .iris.pin{height:200vh}
html.js .iris.pin .iris-view{position:sticky;top:0;height:100vh;height:100svh}
html.js .iris.pin .lay{height:100%;min-height:0;padding-block:var(--navh) 0}
html.js .iris.pin .lay.a{position:absolute;inset:0}
/* passaggio fra le pagine: iride ambra dal punto cliccato (creata da app.js) */
.iris-page{position:fixed;inset:0;z-index:140;background:var(--amber-fill);clip-path:circle(0 at var(--x,50%) var(--y,50%));pointer-events:none;will-change:clip-path}
.iris-page.leave{clip-path:circle(160% at var(--x,50%) var(--y,50%));transition:clip-path .6s var(--ease-io)}
.iris-page.cover{clip-path:circle(160% at 50% 50%)}
.iris-page.enter{clip-path:circle(0 at 50% 50%);transition:clip-path 1s var(--ease-io)}

/* ── MANIFESTO A PAROLE ───────────────────────────────────────────── */
.mf-p{font-family:var(--fd);font-weight:600;font-size:clamp(1.5rem,min(3.4vw,5.6vh),3.35rem);line-height:1.18;letter-spacing:-.025em;max-width:22ch;color:var(--fg);overflow-wrap:break-word}
.lay .mf-p{margin-top:4px}

/* ── HERO HOME: foto piena, visibile da subito ─────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-2)}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(60% 55% at 78% 22%,var(--amber-tint),transparent 70%),radial-gradient(rgba(244,241,234,.1) 1px,transparent 1.2px) 0 0/30px 30px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:brightness(.8);animation:hero-in 2.4s var(--ease) both}
.hero.has-img::before{display:none}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,rgba(11,11,14,.42),transparent 24%),linear-gradient(to top,rgba(11,11,14,.94) 0%,rgba(11,11,14,.55) 45%,rgba(11,11,14,.18) 100%),linear-gradient(90deg,rgba(11,11,14,.5),transparent 68%);pointer-events:none}
.hero .hero-in{position:relative;z-index:2;display:grid;gap:26px;justify-items:start;padding-top:calc(var(--navh) + 48px);padding-bottom:clamp(48px,9vh,110px)}
.hero h1{max-width:13ch}
.hero .lead{margin-top:4px}.hero .actions{margin-top:10px}
.hero .hero-in > *{animation:rise 1.1s var(--ease) both}
.hero .hero-in > :nth-child(2){animation-delay:.12s}.hero .hero-in > :nth-child(3){animation-delay:.24s}.hero .hero-in > :nth-child(4){animation-delay:.36s}
@keyframes hero-in{from{transform:scale(1.08)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translate3d(0,30px,0)}to{opacity:1;transform:none}}
.hero-hint{position:absolute;right:var(--pad);bottom:clamp(48px,9vh,110px);z-index:3;display:none;align-items:center;gap:.8rem;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.hero-hint::before{content:'';width:1px;height:48px;background:linear-gradient(to bottom,transparent,var(--amber));display:block;transform-origin:top;animation:drop 2s var(--ease-io) infinite}
.hero-hint::after{content:attr(data-hint)}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (min-width:900px){.hero-hint{display:flex}}

/* ── VANTAGGI ───────────────────────────────────────────────────── */
.adv .sec-head{margin-bottom:clamp(40px,7vh,80px)}
.adv-grid{display:grid;gap:14px}
@media (min-width:760px){.adv-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}}
.adv-card{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:clamp(24px,2.6vw,36px);border-radius:var(--r-sm);background:var(--ink-2);border:1px solid var(--line);transition:background-color .5s,border-color .5s}
.adv-card:hover{background:var(--ink-3);border-color:var(--line-2)}
.adv-card .top{display:grid;gap:18px}
.adv-card .num{font-size:1.05rem}
.adv-card p{font-size:.95rem;line-height:1.6}
.adv-card .lnk{margin-top:8px;justify-self:start}

/* ── FEATURE: LENTE E IRIDE SULLE FOTO ─────────────────────────── */
.feat{display:grid;gap:clamp(40px,6vh,64px);align-items:center}
.feat + .feat{margin-top:var(--sec)}
.feat-b{display:grid;gap:26px;align-content:center;justify-items:start}
.feat-b p{margin-top:4px}.feat-b .actions{margin-top:10px}
@media (min-width:900px){.feat{grid-template-columns:1.25fr 1fr;gap:clamp(60px,7vw,120px)}.feat.rev .feat-m{order:2}.feat.rev .feat-b{order:1}}
.feat-m{position:relative;min-width:0}
/* la foto vera è a colori; app.js ci posa sopra una copia in bianco e nero
   con un buco rotondo (la lente) che segue il puntatore o si apre scorrendo */
.lens-frame{position:relative;aspect-ratio:4/3.2;border-radius:var(--r);overflow:hidden;background:var(--paper-2);isolation:isolate}
.lens-frame > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lens-frame .gray{z-index:1;pointer-events:none;filter:grayscale(1) brightness(.88) contrast(1.05);-webkit-mask-image:radial-gradient(circle var(--lr,150px) at var(--lx,55%) var(--ly,50%),transparent 98.5%,#000 100%);mask-image:radial-gradient(circle var(--lr,150px) at var(--lx,55%) var(--ly,50%),transparent 98.5%,#000 100%)}
.lens-frame .ring{position:absolute;z-index:2;left:var(--lx,55%);top:var(--ly,50%);width:calc(var(--lr,150px) * 2);height:calc(var(--lr,150px) * 2);transform:translate(-50%,-50%);border-radius:50%;border:1.5px solid rgba(255,255,255,.9);pointer-events:none;box-shadow:0 20px 50px -20px rgba(0,0,0,.5)}
.lens-frame.opened .ring{opacity:0;transition:opacity .5s}
.lens-tag{position:absolute;z-index:3;left:18px;bottom:18px;display:inline-flex;gap:.6rem;align-items:center;padding:.55rem .9rem;border-radius:999px;background:var(--ink);color:var(--fg);font-size:.62rem;line-height:1.2;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
.lens-tag b{color:var(--amber);font-weight:600}

/* ── I SERVIZI IN NUMERI (al posto dei contatori inventati) ─────── */
.od{position:relative}
.od-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:clamp(32px,5vh,56px)}
.od-grid{display:grid;border-top:1px solid var(--line)}
.od-item{border-bottom:1px solid var(--line)}
.od-item a{display:grid;gap:14px;align-content:start;height:100%;padding:clamp(26px,4vh,40px) 0;transition:background-color .4s}
.od-item a:hover .odo{color:var(--amber)}
.od-item .lbl2{font-size:.76rem;font-weight:600;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);max-width:26ch;overflow-wrap:break-word}
.od-item .lbl3{margin-top:-6px;font-size:.66rem;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);max-width:28ch;overflow-wrap:break-word}
@media (min-width:640px){.od-grid{grid-template-columns:repeat(2,1fr)}.od-item:nth-child(odd) a{padding-right:24px}.od-item:nth-child(even){border-left:1px solid var(--line)}.od-item:nth-child(even) a{padding-left:24px}}
@media (min-width:1000px){
  .od-grid{grid-template-columns:repeat(4,1fr)}
  .od-grid.od-n3,.od-grid.od-n5,.od-grid.od-n6{grid-template-columns:repeat(3,1fr)}
  .od-item:nth-child(n){border-left:0}.od-item a{padding:clamp(34px,5vh,56px) clamp(18px,2vw,32px) !important}
  .od-item{border-right:1px solid var(--line)}
  .od-grid .od-item:nth-child(4n){border-right:0}
  .od-grid.od-n3 .od-item:nth-child(4n),.od-grid.od-n5 .od-item:nth-child(4n),.od-grid.od-n6 .od-item:nth-child(4n){border-right:1px solid var(--line)}
  .od-grid.od-n3 .od-item:nth-child(3n),.od-grid.od-n5 .od-item:nth-child(3n),.od-grid.od-n6 .od-item:nth-child(3n){border-right:0}
}
@media (min-width:1200px){
  .od-grid.od-n5{grid-template-columns:repeat(5,1fr)}
  .od-grid.od-n5 .od-item:nth-child(3n){border-right:1px solid var(--line)}
  .od-grid.od-n5 .od-item:nth-child(5n){border-right:0}
}
/* numeri che rullano: le cifre vere sono nel testo; app.js le trasforma in rulli */
.odo{display:flex;align-items:baseline;line-height:1}
.odo:not(.sm){font-family:var(--fd);font-weight:800;font-size:clamp(2.8rem,5vw,5.2rem);letter-spacing:-.05em;color:var(--fg);transition:color .4s}
.odo .dg{position:relative;display:inline-block;width:.6em;height:1em;overflow:hidden}
.odo .dg i{position:absolute;left:0;top:0;display:block;font-style:normal;transition:transform 1.6s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}
.odo .dg i span{display:block;height:1em;text-align:center}
.odo.sm{display:inline-flex;vertical-align:baseline}
.odo.sm .dg{width:.62em}

/* ── FASCIA FOTO CON LASTRA ────────────────────────────────────── */
.pband{position:relative;min-height:clamp(540px,80vh,840px);display:flex;align-items:center;overflow:hidden;background:var(--ink-2)}
.pband-bg{position:absolute;inset:0;overflow:hidden}
.pband-bg img{position:absolute;left:0;top:-10%;width:100%;height:120%;max-width:none;object-fit:cover;filter:brightness(.62);will-change:transform}
.pband::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,14,.55),rgba(11,11,14,.05) 60%);pointer-events:none}
.pband .wrap{position:relative;z-index:2;padding-block:clamp(60px,10vh,120px)}
.slab{display:grid;gap:26px;justify-items:start;max-width:600px;padding:clamp(30px,4vw,56px);border-radius:var(--r);background:var(--ink);color:var(--fg-2)}
.slab p{margin-top:4px}.slab .actions{margin-top:10px}
.slab.amber{background:var(--amber-fill);color:var(--amber-ink-soft)}
.slab.amber h2{color:var(--amber-ink)}.slab.amber h2 em{color:var(--amber-em)}
.slab.amber .chip{color:var(--amber-ink)}
.slab.amber .btn.ghost{border-color:rgba(var(--amber-ink-rgb),.4);color:var(--amber-ink)}.slab.amber .btn.ghost::before{background:var(--ink)}.slab.amber .btn.ghost:hover{color:var(--fg);border-color:var(--ink)}

/* ── STORIA ────────────────────────────────────────────────────── */
.story{display:grid;gap:clamp(48px,7vh,80px)}
@media (min-width:900px){.story{grid-template-columns:1.1fr .9fr;gap:clamp(60px,7vw,130px);align-items:center}}
.story-b{display:grid;gap:26px;align-content:start;justify-items:start}
.story-b .lbl3{font-family:var(--fd);font-weight:700;font-size:1rem;line-height:1.3;color:var(--ink);letter-spacing:-.01em}
.story-b p{margin-top:4px}.story-b .actions{margin-top:10px}
.story-m .frame{aspect-ratio:4/5;max-height:80vh;width:100%}

/* ── PILASTRI: CARTE CHE SI IMPILANO ──────────────────────────── */
.stack{display:grid;gap:clamp(22px,4vh,40px)}
.stack-card{position:relative;display:grid;gap:clamp(26px,5vh,48px);padding:clamp(26px,4vw,60px);border-radius:var(--r);overflow:hidden;transform-origin:center top}
.stack-card .frame{aspect-ratio:4/3.1}
.stack-card .sc-b{display:grid;gap:22px;align-content:center;justify-items:start}
.stack-card .sc-b p{margin-top:4px;max-width:50ch}
.stack-card .num{font-size:1rem;letter-spacing:.1em}
.stack-card.k1{background:var(--amber-fill);color:var(--amber-ink-soft)}
.stack-card.k1 h3{color:var(--amber-ink)}.stack-card.k1 h3 em{color:var(--amber-em)}.stack-card.k1 .num{color:var(--amber-ink)}
.stack-card.k2{background:var(--paper);color:rgba(11,11,14,.72)}
.stack-card.k2 h3{color:var(--ink)}.stack-card.k2 h3 em{color:var(--amber-deep)}.stack-card.k2 .num{color:var(--amber-text)}
.stack-card.k3{background:var(--ink-3);color:var(--fg-2)}
.stack-card.k1 .frame{background:rgba(var(--amber-ink-rgb),.14)}.stack-card.k2 .frame{background:var(--paper-2)}
@media (min-width:900px){
  .stack-card{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,5vw,90px)}
  .stack-card .frame{height:100%;min-height:340px;aspect-ratio:auto}
}
/* agganciate una sull'altra solo se ogni carta entra nello schermo (app.js misura) */
.stack.pin{gap:6vh;padding-bottom:6vh}
.stack.pin .stack-card{position:sticky;top:calc(var(--navh) + 3vh);min-height:min(calc(100vh - var(--navh) - 9vh),760px);will-change:transform}

/* ── SERVIZI: LA FOTO CHE SI ALLONTANA ─────────────────────────── */
.hf{position:relative}
.hf-view{position:relative;height:min(100vh,900px);min-height:540px;overflow:hidden;display:flex;align-items:flex-end;background:var(--ink-2)}
.hf-view::before{content:'';position:absolute;inset:0;background:radial-gradient(rgba(244,241,234,.1) 1px,transparent 1.2px) 0 0/30px 30px}
.hf-view img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;filter:brightness(.72);transform-origin:55% 45%}
html.js .hf-view img{transform:scale(2.1);filter:grayscale(1) brightness(.4);will-change:transform,filter}
.hf-view::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(11,11,14,.94) 0%,rgba(11,11,14,.55) 45%,rgba(11,11,14,.15) 100%);pointer-events:none}
.hf-in{position:relative;z-index:2;display:grid;gap:26px;justify-items:start;padding-bottom:clamp(50px,9vh,110px);padding-top:calc(var(--navh) + 30px)}
.hf-in h2{max-width:14ch}
.hf.pin{height:230vh}
.hf.pin .hf-view{position:sticky;top:0;height:100vh}
.hf-body{display:grid;gap:30px}
@media (min-width:900px){.hf-body{grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,120px);align-items:start}}
.hf-count{display:grid;gap:10px;align-content:start;justify-items:start}
.hf-count .odo{color:var(--ink);font-size:clamp(4rem,9vw,8.5rem)}
.hf-count span.lbl2{font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-text)}
.hf-body .body{display:grid;gap:26px;justify-items:start}
.hf-body .body p{max-width:64ch;font-size:1.06rem;line-height:1.72}

/* ── SERVIZI: L'ELENCO CHE DIVENTA UN VENTAGLIO DI CARTE ───────── */
/* Nell'HTML c'è UN elenco (.svc: foto + testo). Su desktop app.js aggiunge
   .deck: gli articoli diventano "display:contents", le foto si impilano a
   ventaglio nella colonna di sinistra e i testi nella colonna di destra
   (uno visibile alla volta). Niente copie: l'editor tocca gli elementi veri. */
.dk{position:relative}
.dk-view{position:relative}
.dk-list{display:grid;gap:18px}
@media (min-width:760px){.dk-list{grid-template-columns:repeat(2,1fr)}}
.svc{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.svc .frame{border-radius:0;aspect-ratio:16/10}
.svc .frame .n{display:none}
.svc .sv-b{display:grid;gap:14px;align-content:start;justify-items:start;padding:clamp(24px,4vw,40px)}
.svc .top{display:flex;align-items:baseline;gap:1rem}
.svc .num{font-size:1rem}
.svc p{margin-top:4px;font-size:.95rem}
.svc .lnk{margin-top:12px}
/* desktop con JS: .deck — le foto (grid-row 1/-1, sticky) formano il ventaglio
   fermo a sinistra mentre i testi, uno per riga, scorrono a destra */
.dk.deck .dk-list{grid-template-columns:1.15fr .85fr;grid-template-rows:repeat(var(--n,5),auto);gap:0 clamp(40px,5vw,100px)}
.dk.deck .dk-list::before{content:'';grid-column:1;grid-row:1/-1;position:sticky;top:0;height:100vh;align-self:start;background:radial-gradient(42% 38% at 50% 58%,var(--amber-tint),transparent 70%);pointer-events:none}
.dk.deck .svc{display:contents}
.dk.deck .svc .frame{grid-column:1;grid-row:1/-1;position:sticky;top:calc(50vh - min(125px,8.5vw) * 1.385 + var(--navh) / 2);align-self:start;justify-self:center;width:min(250px,17vw);aspect-ratio:26/36;border-radius:14px;transform-origin:50% 120%;box-shadow:0 30px 60px -24px rgba(0,0,0,.85);cursor:pointer;filter:brightness(.55) saturate(.7);transition:filter .5s;will-change:transform}
.dk.deck .svc .frame.on{filter:none}
.dk.deck .svc .frame .n{position:absolute;left:12px;top:12px;display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border-radius:9px;background:var(--amber-fill);color:var(--on-amber);font:800 .8rem/1 var(--fd);letter-spacing:.02em}
.dk.deck .svc .sv-b{grid-column:2;min-height:74vh;align-content:center;padding:6vh 0;background:none;opacity:.34;transition:opacity .6s var(--ease)}
.dk.deck .svc .sv-b.on{opacity:1}
.dk.deck .svc .sv-b p{max-width:46ch}
.dk.deck .svc .sv-b .h-md{font-size:clamp(1.5rem,2.3vw,2.3rem)}

/* ── GALLERIA: TUNNEL (creato da app.js) + GRIGLIA SEMPRE VISIBILE ─ */
.g-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:clamp(30px,5vh,56px);color:var(--muted);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.g-head b{font:800 clamp(1.6rem,2.4vw,2.2rem)/1 var(--fd);letter-spacing:-.03em;color:var(--fg)}
.ggrid{columns:1;column-gap:clamp(18px,2vw,28px)}
@media (min-width:640px){.ggrid{columns:2}}
@media (min-width:1000px){.ggrid{columns:3}}
.gitem{display:grid;gap:12px;break-inside:avoid;margin:0 0 clamp(26px,3.4vw,48px);cursor:zoom-in;outline-offset:6px}
.gitem .frame{aspect-ratio:var(--ar,4/5)}
.gitem .frame img{transition:transform .9s var(--ease)}
.gitem:hover .frame img{transform:scale(1.04)}
.gitem .cap{display:flex;gap:1rem;align-items:baseline;font-size:.9rem;line-height:1.45;color:var(--fg-2)}
.gitem .cap b{font:800 .8rem/1 var(--fd);color:var(--amber);letter-spacing:.06em}
.tn{position:relative}
@media (max-width:899px){.tn{display:none}}
.tn-view{position:sticky;top:0;height:100vh;overflow:hidden;perspective:900px;perspective-origin:50% 50%;background:var(--ink)}
.tn-view::before{content:'';position:absolute;inset:-50%;background-image:linear-gradient(rgba(244,241,234,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,241,234,.045) 1px,transparent 1px);background-size:70px 70px;transform:rotateX(72deg) translateZ(-260px);animation:grid-run 4s linear infinite}
.tn-view::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 28%,var(--ink) 82%);pointer-events:none}
@keyframes grid-run{to{background-position:0 70px}}
.tn-scene{position:absolute;inset:0;transform-style:preserve-3d}
.tn-img{position:absolute;left:50%;top:50%;width:min(30vw,400px);aspect-ratio:4/5;margin-left:calc(min(30vw,400px) / -2);margin-top:calc(min(30vw,400px) * -0.625);border-radius:14px;overflow:hidden;will-change:transform,opacity;box-shadow:0 30px 80px rgba(0,0,0,.6);cursor:pointer;background:var(--ink-3)}
.tn-img img{width:100%;height:100%;object-fit:cover;display:block}
.tn-hud{position:absolute;left:var(--pad);bottom:clamp(36px,6vh,70px);z-index:5;display:grid;gap:8px;pointer-events:none;max-width:min(40vw,520px)}
.tn-hud b{font:800 clamp(3rem,7vw,6.5rem)/1 var(--fd);letter-spacing:-.06em;color:var(--fg);font-variant-numeric:tabular-nums}
.tn-hud span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);padding:.55rem .9rem;border-radius:999px;background:rgba(11,11,14,.85);justify-self:start}
.tn-hud span:empty{display:none}
.tn-bar{position:absolute;right:var(--pad);bottom:clamp(40px,6.5vh,74px);z-index:5;width:160px;height:1px;background:var(--line)}
.tn-bar i{display:block;height:100%;width:0;background:var(--amber)}
/* lightbox (creata da app.js): si apre a iride dal punto cliccato */
.lb{position:fixed;inset:0;z-index:100;background:rgba(11,11,14,.96);display:grid;grid-template-rows:auto 1fr auto;visibility:hidden;clip-path:circle(0 at var(--x,50%) var(--y,50%));transition:clip-path .7s var(--ease-io),visibility 0s .7s}
.lb.on{visibility:visible;clip-path:circle(160% at var(--x,50%) var(--y,50%));transition:clip-path .8s var(--ease-io),visibility 0s}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:1rem var(--pad);color:var(--fg-2);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}
.lb-stage{position:relative;display:grid;place-items:center;padding:0 var(--pad);min-height:0}
.lb-stage img{max-width:100%;max-height:calc(100vh - 170px);border-radius:var(--r-sm);opacity:0;transform:scale(.97);transition:opacity .5s,transform .6s var(--ease)}
.lb-stage img.ready{opacity:1;transform:none}
.lb-bot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem var(--pad) 1.4rem;color:var(--fg);font-size:.9rem;text-align:center}
.lb button{display:inline-grid;place-items:center;min-width:46px;height:46px;padding:0 1.1rem;border-radius:999px;border:1px solid var(--line-2);color:var(--fg);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;transition:background-color .3s,color .3s}
.lb button:hover{background:var(--amber-fill);color:var(--on-amber);border-color:var(--amber-fill)}
.lb button svg{width:16px;height:16px}

/* ── CONTATTI: BENTO, MODULO, MAPPA ────────────────────────────── */
.bento{display:grid;gap:14px}
.bcard{position:relative;isolation:isolate;display:grid;gap:14px;align-content:start;justify-items:start;padding:clamp(24px,3vw,40px);border-radius:var(--r);background:var(--paper-2);overflow:hidden}
.bcard::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(var(--amber-rgb),.35),transparent 60%);opacity:0;transition:opacity .5s}
.bcard:hover::before{opacity:1}
.bcard .val{font-family:var(--fd);font-weight:800;font-size:clamp(1.4rem,2.6vw,2.4rem);letter-spacing:-.035em;line-height:1.05;color:var(--ink);overflow-wrap:anywhere;max-width:none}
.bcard a.val{transition:color .3s;display:inline-flex;align-items:center;min-height:44px;padding:.35rem 0;margin:-.35rem 0}
.b-mail .val{font-size:clamp(1.1rem,1.65vw,1.55rem)}.bcard a.val:hover{color:var(--amber-deep)}
.hrs{display:grid;gap:0;margin-top:8px;width:100%}
.hrs li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.2rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--paper-line);font-size:.95rem;color:var(--ink)}
.hrs li > span,.foot-hours li > span{white-space:nowrap}
.hrs li:last-child{border-bottom:0}
.hrs li b{margin-left:auto;max-width:100%;font-weight:600;color:rgba(11,11,14,.72);font-variant-numeric:tabular-nums}
@media (min-width:760px){
  .bento{grid-template-columns:repeat(12,1fr)}
  /* completo: indirizzo largo, orari alti a destra, telefono ed email sotto */
  .bento .b-addr{grid-column:1 / span 7}
  .bento .b-hours{grid-column:8 / span 5;grid-row:1 / span 2}
  .bento .b-tel{grid-column:1 / span 4}
  .bento .b-mail{grid-column:5 / span 3}
  .bento.no-mail .b-tel,.bento.no-tel .b-mail{grid-column:1 / span 7}
  /* senza orari */
  .bento.no-hours .b-addr{grid-column:1 / -1}
  .bento.no-hours .b-tel{grid-column:1 / span 5}
  .bento.no-hours .b-mail{grid-column:6 / span 7}
  .bento.no-hours.no-mail .b-tel,.bento.no-hours.no-tel .b-mail{grid-column:1 / -1}
  /* senza indirizzo: telefono ed email a sinistra, orari a destra */
  .bento.no-addr .b-tel,.bento.no-addr .b-mail{grid-column:1 / span 7}
  .bento.no-addr.no-mail .b-hours,.bento.no-addr.no-tel .b-hours{grid-row:1}
  .bento.no-addr.no-hours .b-tel{grid-column:1 / span 5}
  .bento.no-addr.no-hours .b-mail{grid-column:6 / span 7}
  /* un riquadro solo: tutta la larghezza */
  .bento.bento > .bcard.bcard:only-child{grid-column:1 / -1}
}
}
.cf{position:relative;overflow:hidden;background:var(--ink)}
.cf .wrap{position:relative;z-index:2;display:grid;gap:clamp(40px,6vh,70px)}
@media (min-width:900px){.cf .wrap{grid-template-columns:.8fr 1.2fr;gap:clamp(50px,6vw,120px);align-items:start}}
.form{display:grid;gap:clamp(22px,3vh,30px)}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr;column-gap:clamp(22px,3vw,34px)}.form .f.full,.form .actions{grid-column:1/-1}}
.f{position:relative;display:grid}
.f input,.f textarea{width:100%;padding:1.5rem 0 .7rem;border:0;border-bottom:1px solid var(--line-2);background:transparent;color:var(--fg);font:inherit;font-size:1rem;outline:none;resize:vertical;border-radius:0}
.f textarea{min-height:120px}
.f label{position:absolute;left:0;top:1.35rem;color:var(--muted);font-size:1rem;line-height:1.3;pointer-events:none;transition:all .3s var(--ease)}
.f::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.f:focus-within::after{transform:scaleX(1)}
.f input:focus + label,.f textarea:focus + label,.f input:not(:placeholder-shown) + label,.f textarea:not(:placeholder-shown) + label{top:.2rem;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.form .actions{margin-top:6px}
.map-wrap{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:16/8;min-height:360px;background:var(--paper-2)}
html.js .map-wrap{clip-path:circle(0% at 50% 50%);transition:clip-path 1.5s var(--ease-io)}
html.js .map-wrap.in{clip-path:circle(75% at 50% 50%)}
.map-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.05);transition:filter .6s}
.map-wrap:hover iframe{filter:none}
.map-tag{position:absolute;left:18px;bottom:18px;z-index:2;display:inline-flex;gap:.6rem;align-items:center;max-width:calc(100% - 36px);padding:.6rem 1rem;border-radius:999px;background:var(--ink);color:var(--fg);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;pointer-events:none}
.map-link{margin-top:14px}

/* ── PRIVACY ───────────────────────────────────────────────────── */
.legal{display:grid;gap:clamp(18px,2.6vh,26px);max-width:820px}
.legal h2{font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.1;letter-spacing:-.025em;margin-top:clamp(14px,2vh,22px)}
.legal h3{font-size:clamp(1.1rem,1.5vw,1.3rem);line-height:1.2;letter-spacing:-.02em;margin-top:8px}
.legal p{max-width:none;line-height:1.72}
.legal ul{display:grid;gap:.5rem;padding-left:1.2rem;list-style:disc}
.legal ol{display:grid;gap:.5rem;padding-left:1.4rem;list-style:decimal}
.legal li{line-height:1.6}
.legal li::marker{color:var(--amber-deep)}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--amber-deep);text-underline-offset:3px;overflow-wrap:anywhere}
.legal a:hover{color:var(--amber-text)}

/* ── FOOTER ────────────────────────────────────────────────────── */
footer{position:relative;background:var(--ink);color:var(--fg-2);border-top:1px solid var(--line);overflow:hidden}
.foot-top{display:grid;gap:clamp(30px,5vh,50px);padding-top:clamp(60px,9vh,110px);padding-bottom:clamp(40px,6vh,70px)}
@media (min-width:900px){.foot-top{grid-template-columns:1fr auto;align-items:end}}
.foot-id{display:grid;gap:18px;justify-items:start}
.footer-brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--fd);font-weight:800;font-size:1.5rem;line-height:1.1;letter-spacing:-.03em;color:var(--fg)}
.footer-logo{height:clamp(40px,5vw,58px);width:auto;max-width:240px;object-fit:contain;display:block}
.footer-logo--plate{background:rgba(255,255,255,.94);padding:8px 13px;border-radius:12px;box-sizing:content-box;box-shadow:0 2px 12px rgba(0,0,0,.14)}
.foot-tag{max-width:40ch;line-height:1.6}
.foot-cols{display:grid;gap:clamp(34px,4vh,44px) clamp(30px,4vw,60px);padding:clamp(40px,6vh,70px) 0;border-top:1px solid var(--line)}
@media (min-width:700px){.foot-cols{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.foot-cols{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}}
.foot-cols h4{font:600 .66rem/1 var(--fb);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:1.2rem}
.foot-cols a{display:block;width:max-content;max-width:100%;padding:.42rem 0;line-height:1.5;color:var(--fg);position:relative;overflow-wrap:anywhere}
.foot-cols a::after{content:'';position:absolute;left:0;bottom:2px;height:1px;width:100%;background:var(--amber);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.foot-cols a:hover::after{transform:scaleX(1);transform-origin:left}
.foot-cols p{color:var(--fg);padding-top:.42rem;line-height:1.75}
.foot-hours li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.1rem 1rem;padding:.42rem 0;line-height:1.5;color:var(--fg)}
.foot-hours li b{margin-left:auto;max-width:100%;font-weight:500;color:var(--fg-2);font-variant-numeric:tabular-nums}
/* il nome gigante: app.js lo spezza in lettere e lo adatta alla larghezza */
.wm{padding-top:clamp(8px,2vh,30px);font:800 clamp(3.2rem,15vw,16rem)/.8 var(--fd);letter-spacing:-.03em;color:var(--fg);text-transform:uppercase;overflow-wrap:anywhere;user-select:none;pointer-events:none}
.wm.fit{display:grid;overflow:hidden;white-space:nowrap}
.wm .wl7{display:flex;justify-content:space-between;overflow:hidden;padding:.2em 0 .05em}
.wm .wl7 + .wl7{margin-top:-.2em}
.wm .wl7 span{display:block;transform:translateY(100%);opacity:0;transition:opacity .6s,transform 1s var(--ease)}
.wm .wl7 span.sp{width:.24em}
.wm.in .wl7 span{opacity:1;transform:none}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 2rem;padding:1.4rem 0 1.8rem;border-top:1px solid var(--line);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.foot-bottom span,.foot-bottom a{display:inline-flex;align-items:center;min-height:44px}
.foot-bottom span{flex-wrap:wrap;gap:0 .5em}
.foot-bottom a{color:var(--fg)}
.foot-bottom a:hover{color:var(--amber)}

/* ── BLOG (articoli dentro la cornice del sito) ─────────────────── */
.svhb ul{list-style:disc}.svhb ol{list-style:decimal}
body .svhb h1,body .svhb h2,body .svhb h3{font-family:var(--fd);letter-spacing:-.02em}
.svhb p{max-width:none}

/* ── TELEFONO ──────────────────────────────────────────────────── */
@media (max-width:899px){
  :root{--navh:64px}
  html.js .iris.pin{height:170vh}
  .lay h2{max-width:none}
  .pband{min-height:0}
  .pband .wrap{padding-block:clamp(50px,8vh,80px)}
  .foot-cols a{width:auto}
  .hero h1{max-width:none}
}
@media (max-width:480px){
  .btn{padding:.8rem 1.2rem;font-size:.66rem}
  .h-xl{font-size:clamp(2.1rem,10.4vw,3.2rem)}
  .h-lg{font-size:clamp(1.85rem,8.6vw,2.6rem)}
  .h-col{font-size:clamp(1.6rem,7.6vw,2.2rem)}
  .nav-brand{font-size:1.05rem}
  .map-wrap{aspect-ratio:4/5;min-height:0}
}

/* ── MOVIMENTO RIDOTTO ─────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  html.js [data-r],.lines .w i{opacity:1;transform:none}
  html.js .frame.clip,html.js .map-wrap{clip-path:none}
  html.js .hf-view img{transform:none;filter:brightness(.72)}
  .wm .wl7 span{opacity:1;transform:none}
}

/* ── RIPIEGO: app.js non è partito (html.js senza .l7-run) ──────── */
html.js:not(.l7-run) [data-r],html.js:not(.l7-run) .frame.clip,html.js:not(.l7-run) .map-wrap{animation:l7-show 0s 3.5s forwards}
html.js:not(.l7-run) .hf-view img{animation:l7-show-img 0s 3.5s forwards}
@keyframes l7-show{to{opacity:1;transform:none;clip-path:none}}
@keyframes l7-show-img{to{transform:none;filter:brightness(.72)}}

/* Classi-gancio senza stile proprio (le usano app.js e la piattaforma: la
   galleria per l'editor, il numero dei servizi): la regola vuota le dichiara,
   così il controllo salute dei siti pubblicati non le conta come "classi senza
   stile". */
.mid,.g-sec,.gallery-grid,.od-n4,.od-n7,.od-n8{}