@charset "UTF-8";
/* Watch Magic Trading: foglio di stile unico per tutte le pagine.
   Gli url() sono relativi a questo file (assets/), quindi valgono sia in / sia in /orologi/.
   Dopo ogni modifica: python3 wmt-tools/sync.py (aggiorna ?v= nelle pagine). */
@font-face{font-family:"Uni Sans Heavy";src:url("fonts/UniSans-Heavy.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Uni Sans Thin";src:url("fonts/UniSans-Thin.woff2") format("woff2");font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:"Glacial Indifference";src:url("fonts/glacial-indifference-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Glacial Indifference";src:url("fonts/glacial-indifference-400italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Glacial Indifference";src:url("fonts/glacial-indifference-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
/* i segni che Glacial non ha (€ · « »), disegnati come i suoi: senza, il € dei prezzi cambia carattere a ogni sistema */
@font-face{font-family:"WMT Segni";src:url("fonts/wmt-segni-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+00AB,U+00B7,U+00BB,U+20AC}
@font-face{font-family:"WMT Segni";src:url("fonts/wmt-segni-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+00AB,U+00B7,U+00BB,U+20AC}
/* Pagina bianca, oro del logo come unico accento, titoli in maiuscolo pieno; la hero resta scura come il movimento. */
:root{
  color-scheme:light;
  --paper:#ffffff;
  --mist:#f4f4f2;
  --ink:#191816;
  --ink-2:#5f5b55;
  --foil:#9c7c45;
  --foil-text:#85683a;
  --foil-soft:rgba(156,124,69,.45);
  --line:rgba(25,24,22,.12);
  --line-strong:#8c877f;   /* bordo dei campi: 3,6:1 sul bianco, 3,2:1 su --mist (le linee sottili restano --line) */
  --alert:#b5462b;
  --night:#000;
  --title:"Uni Sans Heavy","Arial Black","Helvetica Neue",Arial,sans-serif;
  --thin:"Uni Sans Thin","Helvetica Neue",Arial,sans-serif;
  --body:"Glacial Indifference","WMT Segni","Century Gothic",Futura,"Helvetica Neue",Arial,sans-serif;
  --gut:20px;
  --max:1240px;
  --ease:cubic-bezier(.65,0,.25,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  /* scala dei caratteri: pochi gradini, sempre questi */
  --t-xs:.72rem;     /* eyebrow, badge, numeri romani del menu */
  --t-label:.8rem;   /* pulsanti, voci della barra, chip: maiuscolo spaziato */
  --t-s:.875rem;     /* note, etichette dei campi, testi secondari */
  --t-m:1.0625rem;   /* testo e h3 */
  --t-l:1.375rem;    /* prezzo della scheda, titoli dei pannelli */
  --t-xl:clamp(1.75rem,1.25rem + 2vw,2.9rem);   /* h2 */
  --t-2xl:clamp(2.2rem,1.5rem + 2.8vw,3.6rem);  /* h1 delle pagine e della scheda, "Continua" */
  --t-3xl:clamp(2.6rem,1.6rem + 4vw,5.5rem);    /* h1 della home */
  /* forme: pillola come la cassa del logo (pulsanti, chip, badge, campi); foto e pannelli restano a spigolo vivo */
  --r-pill:999px;
  --gold-rule:linear-gradient(90deg,transparent,var(--foil) 20%,var(--foil) 80%,transparent);
  --gold-fade:linear-gradient(90deg,var(--foil),rgba(156,124,69,0));
}
@media (min-width:760px){:root{--gut:40px}}
/* schermi grandi: la colonna e i titoli crescono, invece dei margini vuoti */
@media (min-width:1600px){:root{--max:1440px;--t-2xl:clamp(3.2rem,1rem + 2.7vw,4.2rem);--t-3xl:clamp(4.6rem,1.6rem + 3.6vw,5.6rem)}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(66px + env(safe-area-inset-top,0px) + 16px);scroll-padding-bottom:84px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:var(--t-m);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,svg{display:block;max-width:100%}
/* <picture> (AVIF + WebP, srcset) non cambia l'impaginazione: le regole su "img" restano quelle di prima */
picture{display:contents}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
h1,h2,h3,p,figure,dl,dd,ol,ul{margin:0}
h1,h2,h3{font-family:var(--title);font-weight:900;text-transform:uppercase;line-height:1.02;letter-spacing:.01em;text-wrap:balance}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-m);letter-spacing:.04em;line-height:1.2}
/* seconda voce dei titoli: una parte in Uni Sans Thin accanto al Heavy (mai sotto i 24 px: solo h1 e h2) */
h1 .lt,h2 .lt{font-family:var(--thin);font-weight:100;letter-spacing:.04em}
:focus-visible{outline:2px solid var(--foil);outline-offset:3px}
[hidden]{display:none!important}
/* margini laterali: mai meno della tacca o della Dynamic Island di un iPhone in orizzontale */
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px))}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lede{color:var(--ink-2);max-width:34rem;text-wrap:pretty}

/* bottoni: pillole come la cassa del logo, etichette in maiuscolo spaziato */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 1.9rem;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--body);font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;overflow:hidden;isolation:isolate;transition:background-color .25s,border-color .25s,color .25s,transform .35s var(--ease-out)}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:#3a3833}
.btn--line{background:transparent;border-color:rgba(25,24,22,.25);color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}
.on-dark .btn--solid{background:#fff;color:var(--ink)}
.on-dark .btn--solid:hover{background:#ece6da}
.on-dark .btn--line{border-color:rgba(255,255,255,.45);color:#fff}
.on-dark .btn--line:hover{border-color:#fff}

/* wordmark come sul biglietto da visita */
.wm{font-family:var(--thin);font-weight:100;text-transform:uppercase;letter-spacing:.3em;padding-left:.3em}
.tag{font-family:var(--title);font-weight:900;text-transform:uppercase;letter-spacing:.5em;padding-left:.5em;color:var(--foil-text)}
/* eyebrow: l'etichetta del biglietto da visita sopra titoli, marche e firme, con il filo d'oro dell'intro */
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0;font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1.3;letter-spacing:.32em;text-transform:uppercase;color:var(--foil-text)}
/* il filo cresce fino a 64 px nello spazio che resta accanto all'etichetta; se non ne restano almeno 28 va sotto
   l'etichetta, a sinistra, invece di stringerla o di galleggiare accanto a due righe */
.eyebrow::after{content:"";flex:1 1 28px;max-width:64px;height:1px;background:var(--gold-fade);transform-origin:0 50%}
/* sotto i 360 px la spaziatura stringe un poco, cosi' le etichette lunghe restano su una riga */
@media (max-width:359px){.eyebrow{column-gap:12px;letter-spacing:.26em}}
.eyebrow--ink{color:var(--ink-2)}
.eyebrow--bare::after{display:none}
.on-dark .eyebrow{color:#d9bf86}

/* ---------- intro ---------- */
.intro{display:none;position:fixed;inset:0;z-index:100;background:var(--paper);place-items:center}
html.intro-on .intro{display:grid}
.intro.is-opening{background:transparent}
/* ultima fase: la pagina e' gia' usabile mentre il logo svanisce e il cerchio finisce di aprirsi */
.intro.is-leaving{display:grid;pointer-events:none}
.intro__stage{display:flex;flex-direction:column;align-items:center;gap:clamp(16px,3.2vh,30px);transition:opacity .5s ease,transform .8s var(--ease)}
.intro.is-leaving .intro__stage{opacity:0;transform:scale(1.14)}
.intro__art{width:min(80vw,50vh,400px);height:auto;overflow:visible}
/* tacche e tratto del logo li anima site.js fotogramma per fotogramma (runIntro): niente transizioni qui */
.tick{stroke:var(--foil);stroke-linecap:round;stroke-width:3;opacity:.16}
.tick.major{stroke-width:5}
#lines path{fill:none;stroke:var(--foil);stroke-width:2.4}
#lines{transition:opacity .5s ease .1s}
.intro.is-filled #lines{opacity:0}
#logoFill,#logoSheen{opacity:0;transition:opacity .5s ease}
.intro.is-filled #logoFill,.intro.is-filled #logoSheen{opacity:1}
.intro__word{text-align:center}
.intro .wm{font-size:clamp(.95rem,4.2vw,1.35rem);white-space:nowrap;color:var(--ink);opacity:0;letter-spacing:.5em;padding-left:.5em;filter:blur(5px);transition:opacity .6s ease,letter-spacing .9s var(--ease),padding-left .9s var(--ease),filter .6s ease}
.intro.is-word .wm{opacity:1;letter-spacing:.3em;padding-left:.3em;filter:none}
.intro__rule{display:block;width:78%;height:1px;margin:14px auto 12px;background:linear-gradient(90deg,transparent,var(--foil) 20%,var(--foil) 80%,transparent);transform:scaleX(0);transition:transform .7s var(--ease) .15s}
.intro.is-word .intro__rule{transform:scaleX(1)}
.intro .tag{font-size:clamp(.6rem,2.4vw,.78rem);opacity:0;transition:opacity .5s ease .3s}
.intro.is-word .tag{opacity:1}
.intro__skip{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;min-height:48px;padding:0 6px;background:none;border:0;font-family:var(--body);font-size:var(--t-s);letter-spacing:.06em;color:var(--ink-2);cursor:pointer;transition:opacity .25s ease}
.intro.is-opening .intro__skip{opacity:0}
html.intro-on .hero{clip-path:circle(0px at 50% 45%)}
html.intro-on .float{visibility:hidden}
html.intro-on .hero__copy .wrap>*,html.intro-on .hdr{opacity:0;transform:translateY(14px)}
/* rete di sicurezza se site.js non arriva: dopo 4 s la pagina si mostra da sola. Quando lo script parte (html.intro-js) decide lui */
html.intro-on .intro,html.intro-on .hero,html.intro-on .hero__copy .wrap>*,html.intro-on .hdr{animation:failsafe .6s ease 4s forwards}
@keyframes failsafe{to{opacity:1;transform:none;clip-path:none;visibility:visible}}
html.intro-on .intro{animation-name:failsafeIntro}
@keyframes failsafeIntro{to{opacity:0;visibility:hidden}}
html.intro-on.intro-js .intro,html.intro-on.intro-js .hero,html.intro-on.intro-js .hero__copy .wrap>*,html.intro-on.intro-js .hdr{animation:none}
.revealed .hero__copy .wrap>*{transition:opacity .6s ease,transform .7s var(--ease)}
.revealed .hero__copy .wrap>:nth-child(2){transition-delay:.08s}
.revealed .hero__copy .wrap>:nth-child(3){transition-delay:.16s}
.revealed .hero__copy .wrap>:nth-child(4){transition-delay:.24s}

/* ---------- header: bianco sopra il video, inchiostro quando scorri ---------- */
.hdr{position:fixed;inset:0 0 auto;z-index:40;padding-top:env(safe-area-inset-top,0px);color:#fff;border-bottom:1px solid transparent;transition:background-color .4s,border-color .4s,color .4s,opacity .6s ease,transform .7s var(--ease)}
.hdr.is-dark{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr.is-solid{background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line);color:var(--ink)}
/* senza JavaScript la home non sa quando passare all'inchiostro: una barra scura, leggibile sulla foto e sulle sezioni chiare */
html:not(.js) .hdr:not(.is-solid){background:rgba(0,0,0,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand svg{width:30px;height:auto;flex:none}
/* nell'intestazione il simbolo e' del colore della scritta (bianco sul nero, inchiostro sul bianco) e un po' piu' grande:
   l'oro, piccolo, sul nero si perdeva. Nel piede resta d'oro */
#hdr .brand svg{width:38px}
#hdr .brand use{fill:currentColor}
/* sul nero (foto della hero, intestazione scura) il logo usa l'oro chiaro */
.hdr:not(.is-solid) .brand use{fill:url(#foilLight)}
.brand .wm{font-family:var(--title);font-weight:900;font-size:.72rem;letter-spacing:.26em;padding-left:0;white-space:nowrap}
.nav{display:none}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:0;background:none;border:0;font-family:var(--body);font-weight:700;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menu-btn i{display:block;width:22px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
/* salta al contenuto: primo elemento raggiungibile col tasto Tab, visibile solo quando ha il focus */
.skip{position:absolute;left:max(var(--gut),env(safe-area-inset-left,0px));top:calc(10px + env(safe-area-inset-top,0px));z-index:5;display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border-radius:2px;background:var(--ink);color:#fff;font-family:var(--body);font-weight:700;font-size:var(--t-s);letter-spacing:.04em;text-decoration:none;transform:translateY(calc(-100% - 40px - env(safe-area-inset-top,0px)))}
.skip:focus{transform:none}
main[tabindex="-1"]:focus{outline:none}
.nav__more{display:none}
@media (min-width:1280px){.nav__more{display:inline}}
@media (min-width:1000px){
  .nav{display:flex;align-items:center;gap:22px;font-family:var(--body);font-weight:700;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase}
  .nav a{position:relative;text-decoration:none;padding-block:6px}
  .nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-out)}
  .nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:0 50%}
  .nav .btn{min-height:42px;padding-inline:1.3rem;font-size:var(--t-xs);color:inherit;border-color:currentColor}
  .menu-btn{display:none}
  .brand svg{width:34px}
  #hdr .brand svg{width:42px}
  .brand .wm{font-size:.78rem}
}
@media (min-width:1200px){.nav{gap:30px}}
/* iPad in orizzontale: le voci si toccano col dito */
@media (min-width:1000px) and (pointer:coarse){.nav a:not(.btn){padding-block:12px}}

/* menu sotto i 1000px: un <dialog> modale (Esc lo chiude, il Tab resta dentro, la pagina sotto e' inerte).
   In alto la stessa riga dell'intestazione; voci in Uni Sans Thin con i numeri romani in oro; in fondo orari e contatti */
.menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:env(safe-area-inset-top,0px) 0 calc(28px + env(safe-area-inset-bottom,0px));border:0;background:var(--paper);color:var(--ink);overflow-y:auto;overscroll-behavior:contain}
.menu[open]{display:flex;flex-direction:column}
.menu::backdrop{background:var(--paper)}
.menu__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px;flex:none}
.menu .menu-btn{display:inline-flex}
.menu__close svg{width:22px;height:22px;flex:none}
.menu__body{display:flex;flex-direction:column;flex:1 0 auto;padding-top:16px}
.menu__nav{display:grid;margin-block:auto;border-top:1px solid var(--line)}
.menu__nav a{display:flex;align-items:baseline;min-height:52px;padding:13px 0 11px;border-bottom:1px solid var(--line);font-family:var(--thin);font-weight:100;text-transform:uppercase;font-size:2.2rem;line-height:1.05;letter-spacing:.06em;color:var(--ink);text-decoration:none;transition:color .25s}
.menu__n{flex:none;width:2.6rem;font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.14em;color:var(--foil-text)}
.menu__nav a[aria-current="page"]{color:var(--foil-text)}
@media (hover:hover){.menu__nav a:hover{color:var(--foil-text)}}
.menu__foot{display:grid;gap:20px;padding-top:40px}
.menu__infos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:16px 32px}
.menu__info{display:grid;gap:6px;align-content:start;font-size:var(--t-s);line-height:1.45;color:var(--ink-2)}
.menu__info a{color:var(--ink);text-decoration:none;min-height:24px}
.menu__k{font-family:var(--title);font-weight:900;font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.32em;color:var(--foil-text)}
.menu__cta{display:grid;gap:10px}
@media (min-width:600px){.menu__cta{grid-template-columns:repeat(2,max-content)}}
@media (min-width:760px){.menu__nav a{font-size:2.8rem}.menu__n{width:3.2rem}}
@media (max-height:520px){.menu__body{padding-top:8px}.menu__nav a{font-size:1.6rem;padding:9px 0 7px}.menu__foot{padding-top:24px}}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--night);color:#fff}
/* la foto e' un <picture> nella pagina (hero-v in verticale, hero-h in orizzontale; AVIF o WebP) con fetchpriority alta:
   il browser la trova subito, invece di aspettare il CSS come quando era uno sfondo */
.hero__media{position:absolute;inset:0;background:#000}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:center top}
/* il movimento che lavora: video sopra la foto, visibile solo quando gira davvero (site.js) */
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hero__video.is-on{opacity:1}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 30%,rgba(0,0,0,.8) 46%,rgba(0,0,0,.94) 60%,#000 100%)}
.hero__copy{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(clamp(34px,6vh,72px) + env(safe-area-inset-bottom,0px))}
.hero h1{font-size:var(--t-3xl);line-height:.98;max-width:14ch}
.hero h1 .lt{display:block;letter-spacing:.03em}
.hero__sub{margin-top:22px;color:rgba(255,255,255,.8);max-width:31rem;text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px;margin-top:30px}
/* sotto "Vendi il tuo orologio" la promessa della valutazione */
.hero__sell{display:grid;gap:10px;justify-items:center}
.hero__note{font-size:var(--t-s);line-height:1.35;color:rgba(255,255,255,.72);text-align:center}
/* striscia delle garanzie: maiuscoletto dell'eyebrow, un punto d'oro davanti a ogni voce (anche quando va a capo) */
.proof{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 30px;margin:30px 0 0;padding:0;font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.proof li{display:inline-flex;align-items:center;gap:12px;white-space:nowrap}
.proof li::before{content:"";flex:none;width:4px;height:4px;border-radius:50%;background:#c9a865}
@media (max-width:359px){.proof{letter-spacing:.18em}}
@media (max-width:519px){.hero__sell{justify-items:stretch}}
/* telefoni in verticale: le tre garanzie, una per riga (63 px), stanno appena sotto la piega: la hero cresce di
   63 + 30 di margine - 24 di aria sopra la piega, piu' il suo margine in basso. Titolo, testo e pulsanti restano
   dove erano, sul nero sotto il movimento */
@media (max-width:759px) and (orientation:portrait){
  .hero{height:calc(100svh + 69px + clamp(34px,6vh,72px));min-height:0}
  .hero__cta{margin-top:26px;gap:10px}
  .hero__sell{gap:8px}
  .proof{flex-direction:column;align-items:flex-start;gap:9px;margin-top:30px}
}
@media (max-width:759px) and (max-height:600px) and (orientation:portrait){.hero__sub{margin-top:14px}.hero__cta{margin-top:18px}}
@media (min-aspect-ratio:1/1) and (min-width:760px){
  .hero__img,.hero__video{object-position:right center}
  .hero__shade{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.93) 34%,rgba(0,0,0,.4) 54%,rgba(0,0,0,0) 70%),linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,0) 22%,rgba(0,0,0,0) 78%,#000)}
  /* il testo si centra nello spazio sotto l'intestazione (66 px): sui portatili bassi non ci finisce sotto */
  .hero__copy{top:0;display:flex;align-items:center;padding-top:calc(66px + env(safe-area-inset-top,0px));padding-bottom:0}
  .hero h1{max-width:12ch}
}
/* portatili con poco spazio in altezza (1366x768, 1280x720 con barre del browser): il titolo segue l'altezza */
@media (min-aspect-ratio:1/1) and (min-width:760px) and (max-height:720px){
  .hero h1{font-size:min(var(--t-3xl),max(2.6rem,11vh))}
  .hero__sub{margin-top:18px}
  .hero__cta{margin-top:24px}
  .proof{margin-top:22px}
}
/* telefoni bassi in verticale: il blocco dei testi sale sulla parte chiara del movimento; un velo che parte dal titolo
   tiene il Thin di "scelti uno per uno" sul nero (sui telefoni alti il testo e' gia' sul nero e non cambia nulla) */
@media (max-width:759px) and (max-height:740px) and (orientation:portrait){
  .hero__copy::before{content:"";position:absolute;left:0;right:0;top:-96px;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0) 0,rgba(0,0,0,.5) 96px,rgba(0,0,0,.8) 176px,rgba(0,0,0,.9) 280px)}
  .hero__copy .wrap{position:relative}
}
/* telefono in orizzontale: la hero sta in uno schermo, pulsanti compresi */
@media (max-height:500px) and (orientation:landscape){
  .hero{height:auto;min-height:100svh}
  .hero__copy{position:relative;top:auto;display:block;padding:calc(66px + env(safe-area-inset-top,0px) + 22px) 0 28px}
  .hero h1{font-size:clamp(1.7rem,5vh + .9rem,2.4rem);max-width:none}
  .hero__sub{margin-top:10px;max-width:27rem}
  .hero__cta{margin-top:16px}
}

/* ---------- sezioni ---------- */
.sec{padding-block:clamp(80px,9.5vw,132px)}
.sec__head{display:grid;gap:16px;margin-bottom:34px}
/* eyebrow sopra un titolo: 14 px, dentro e fuori dalle griglie */
.eyebrow+h1,.eyebrow+h2{margin-top:14px}
.sec__head>.eyebrow+h1,.sec__head>.eyebrow+h2{margin-top:-2px}
.lab__copy>.eyebrow+h1,.visit__copy>.eyebrow+h1{margin-top:-8px}

/* collezione: le marche vanno a capo (niente striscia nascosta); "Solo disponibili" chiude la riga, a destra dal desktop */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:34px 0 36px}
.chip--only{gap:.7em}
.chip--only i{position:relative;width:26px;height:14px;border-radius:var(--r-pill);border:1px solid var(--line-strong);transition:border-color .25s,background-color .25s}
.chip--only i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:transform .35s var(--ease-out),background-color .25s}
.chip--only[aria-pressed="true"]{border-color:var(--ink);background:transparent;color:var(--ink)}
.chip--only[aria-pressed="true"] i{border-color:var(--foil);background:rgba(156,124,69,.12)}
.chip--only[aria-pressed="true"] i::after{transform:translateX(12px);background:var(--foil)}
@media (min-width:900px){.chip--only{margin-left:auto}}
.grid__empty{margin-top:8px;color:var(--ink-2)}
.chip{flex:none;display:inline-flex;align-items:center;gap:.6em;min-height:44px;padding:0 1.25rem;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;font-family:var(--body);font-weight:700;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;transition:border-color .25s,color .25s,background-color .25s}
.chip:hover{border-color:var(--ink);color:var(--ink)}
.chip .n{font-weight:400;letter-spacing:.04em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff}
.chip[aria-pressed="true"] .n{color:rgba(255,255,255,.72)}
/* telefono: tre righe di filtri al massimo, cosi' la prima scheda resta nel primo schermo */
@media (max-width:599px){.filters{gap:6px;margin:26px 0 30px}.chip{min-height:40px;padding:0 .95rem;letter-spacing:.11em;gap:.5em}}
.grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
@media (min-width:600px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 18px}}
@media (min-width:900px){.grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:56px 24px}}
.card__btn{position:relative;display:block;width:100%;padding:0;background:none;border:0;text-align:left;cursor:pointer}
.card__img{position:relative;display:block;aspect-ratio:2/3;background:var(--paper);overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover}
/* l'etichetta dello stato segue il prezzo nel testo (lettori di schermo), ma si vede sulla foto */
.badge{position:absolute;z-index:1;left:8px;top:8px;padding:.5em 1em .45em;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.92);font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
/* scheda in griglia: marca (eyebrow), modello, anno e corredo, prezzo in inchiostro; l'oro resta al logo e ai fili */
/* marca e modello sono il titolo della scheda (h2 in Collezione, h3 altrove): stesso aspetto di prima */
.card__h{margin-top:16px;font-family:var(--body);font-weight:700;font-size:var(--t-m);line-height:1.25;letter-spacing:0;text-transform:none;text-wrap:pretty}
.card__brand{display:block;font-family:var(--title);font-weight:900;font-size:.68rem;line-height:1.3;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2)}
.card__model{display:block;margin-top:6px;font-weight:700;font-size:var(--t-m);line-height:1.25;overflow-wrap:break-word}
.card__meta{display:block;margin-top:2px;font-size:var(--t-s);color:var(--ink-2)}
.card__price{display:block;margin-top:10px;font-size:var(--t-m);letter-spacing:.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.card__price.is-word{font-family:var(--title);font-weight:900;font-size:.68rem;line-height:1.5;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.card__price.is-sold{color:var(--ink-2)}
.card__price:empty{display:none}
/* venduto: resta come storico, ma in grigio e in fondo alla lista */
@media (min-width:900px){.card__model{font-size:1.12rem}}
.card__btn:focus-visible{outline-offset:6px}
/* in attesa del catalogo (prima visita, site.js skeleton): schede vuote che respirano al posto di quelle vere */
.card--sk .card__img{background:var(--line)}
.card__sk{display:block;width:62%;height:.8rem;margin-top:18px;border-radius:4px;background:var(--line)}
.card__sk--s{width:38%;margin-top:10px}
.card--sk .card__img,.card__sk{animation:skPulse 1.4s ease-in-out infinite alternate}
@keyframes skPulse{from{opacity:.5}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.card--sk .card__img,.card__sk{animation:none}}
/* collezione vuota o non raggiungibile: un invito al posto della griglia */
.grid__none{display:grid;gap:16px;justify-items:start;margin-top:clamp(30px,4vw,44px);padding:clamp(30px,4vw,44px) 0 24px;border-top:1px solid var(--line);color:var(--ink-2)}
.grid__none h2{color:var(--ink)}
.grid__none p{max-width:52ch}

/* laboratorio */
.lab__grid{display:grid;gap:44px}
.lab__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.lab__copy{display:grid;gap:22px;align-content:start}
.pillars{display:grid;margin-top:12px;border-top:1px solid var(--line)}
.pillars div{display:grid;gap:6px;padding:20px 0;border-bottom:1px solid var(--line)}
.pillars dt{font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-m);letter-spacing:.04em}
.pillars dd{color:var(--ink-2);max-width:30rem}
@media (min-width:900px){.lab__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,110px);align-items:start}.pg .lab__img{position:sticky;top:calc(66px + env(safe-area-inset-top,0px) + 34px)}}

/* vendere */
.sell__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:48px}
.steps{list-style:none;padding:0;display:grid;margin-top:34px;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px;padding:24px 0;border-bottom:1px solid var(--line)}
/* numeri romani in oro, come gli indici di un quadrante (nel Thin sembrerebbero solo aste) */
.steps__n{font-family:var(--title);font-weight:900;font-size:1.9rem;line-height:.9;color:var(--foil)}
.steps p{color:var(--ink-2);margin-top:6px}
.form{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-content:start;padding:28px 20px 30px;background:var(--mist)}
.form__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.form__title{font-size:var(--t-l)}
/* align-content:start: un campo senza errore non si allunga accanto a uno con l'errore */
.field{display:grid;gap:8px;min-width:0;align-content:start}
.field__label{font-weight:700;font-size:var(--t-s);letter-spacing:.04em;color:var(--ink-2)}
.input{width:100%;min-height:52px;padding:12px 20px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--r-pill);font-family:var(--body);font-size:1rem;color:var(--ink);appearance:none;-webkit-appearance:none;transition:border-color .2s}
.input:hover{border-color:var(--ink-2)}
.input::placeholder{color:#757068}
.input:focus{border-color:var(--ink);outline:none}
.input:focus-visible{outline:2px solid var(--foil);outline-offset:2px}
select.input{padding-right:46px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23191816' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 20px center}
.field.has-error .input{border-color:var(--alert)}
.err{font-size:var(--t-s);color:var(--alert);padding-left:20px}
.err:empty{display:none}
/* suggerimento sotto il campo (prefisso del telefono, foto da mandare): letto insieme al campo (aria-describedby) */
.field__hint{margin-top:-2px;padding-left:20px;font-size:var(--t-s);line-height:1.45;color:var(--ink-2)}
.field__opt{font-weight:400;letter-spacing:0;color:var(--ink-2)}
/* due o piu' errori: un riepilogo in cima al modulo, ogni voce porta al suo campo */
.errsum{display:grid;gap:6px;padding:13px 18px 14px;border-left:2px solid var(--alert);background:var(--mist);font-size:var(--t-s);line-height:1.5;color:var(--ink)}
.errsum:empty{display:none}
.errsum__h{font-weight:700}
.errsum ul{display:flex;flex-wrap:wrap;gap:2px 0;margin:0;padding:0;list-style:none}
.errsum li:not(:last-child)::after{content:"·";padding:0 .55em;color:var(--alert)}
.errsum a{color:var(--alert);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(181,70,43,.45);text-underline-offset:.2em}
.errsum a:hover{text-decoration-color:var(--alert)}
.form .errsum{background:#fff}
.row2{display:grid;gap:20px}
@media (min-width:520px){.row2{grid-template-columns:1fr 1fr}}
.checks{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:0}
.checks legend{padding:0;margin-bottom:10px}
.check{position:relative}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.check span{display:inline-flex;align-items:center;min-height:44px;padding:0 1.15rem;border-radius:var(--r-pill);border:1px solid var(--line-strong);background:#fff;font-weight:700;font-size:var(--t-s);letter-spacing:.03em;color:var(--ink-2);cursor:pointer;transition:border-color .2s,background-color .2s,color .2s}
.check span:hover{border-color:var(--ink)}
.check input:checked+span{border-color:var(--ink);background:var(--ink);color:#fff}
.check input:focus-visible+span{outline:2px solid var(--foil);outline-offset:3px}
.file__count{font-size:var(--t-s);color:var(--ink-2)}
.form [type=submit]{width:100%}
.form__note{font-size:var(--t-s);color:var(--ink-2);text-align:center}
.form__done{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:8px 0}
.form__done p{color:var(--ink-2)}
@media (min-width:960px){
  .sell__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:start}
  .form{padding:36px 34px 38px}
}
/* vendere: sopra la piega i due modi di iniziare (il modulo, le foto su WhatsApp) e le quattro promesse */
.sell__copy{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.sell__copy>.lede{margin-top:16px}
/* Vendi: example shots under Come funziona (quadrante, cassa, fondello) */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:30px}
.shots__note{grid-column:1/-1;margin:0 0 4px;font-size:var(--t-s);color:var(--ink-2)}
.shots figure{margin:0}
.shots picture{display:block;overflow:hidden;background:var(--mist)}
.shots img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.shots figcaption{margin-top:10px;font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.sell__cta{margin-top:26px}
.proof--ink{margin-top:26px;gap:10px 26px;color:var(--ink-2)}
.proof--ink li::before{background:var(--foil)}
.sell__how{margin-top:clamp(40px,5vw,60px)}
.sell__how+.steps{margin-top:18px}
@media (min-width:960px){.sell__go{display:none}}
@media (max-width:519px){.sell__cta{flex-direction:column;align-items:stretch}.sell__cta .btn{width:100%}}
/* telefono: numeri romani in una colonna stretta, passi piu' raccolti (Vendi, Laboratorio) */
@media (max-width:519px){.pg .steps li{grid-template-columns:40px minmax(0,1fr);padding:16px 0}.pg .steps__n{font-size:1.6rem}.pg .steps p{margin-top:4px}}
/* foto: si aggiungono una alla volta o insieme (anche trascinandole), fino a 6, con l'anteprima e la x per toglierle */
.drop{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;padding:12px;border:1px dashed var(--line-strong);border-radius:28px;background:#fff;transition:border-color .25s,background-color .25s}
.drop.is-drop{border-color:var(--foil);background:rgba(156,124,69,.06)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop label{cursor:pointer;background:#fff}
.drop input:focus-visible+label{outline:2px solid var(--foil);outline-offset:3px}
.drop label.is-off{opacity:.45;pointer-events:none}
.drop__or{font-size:var(--t-s);color:var(--ink-2)}
.drop .file__count{margin-left:auto;padding-right:8px;font-variant-numeric:tabular-nums}
@media (hover:none){.drop__or{display:none}}
.thumbs{list-style:none;display:flex;flex-wrap:wrap;gap:14px;margin:6px 0 0;padding:0}
.thumb{position:relative;width:64px;height:64px;background:#fff;border:1px solid var(--line)}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.thumb__doc{display:grid;place-items:center;width:100%;height:100%;font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.2em;padding-left:.2em;color:var(--foil-text)}
.thumb.is-busy::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.75) 50%,rgba(255,255,255,0) 70%) #f0efea;background-size:220% 100%;animation:thumbBusy 1.1s linear infinite}
@keyframes thumbBusy{from{background-position:120% 0}to{background-position:-100% 0}}
.thumb__rm{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:#fff;color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s}
.thumb__rm::before{content:"";position:absolute;inset:-8px}
.thumb__rm svg{width:10px;height:10px}
.thumb__rm:hover{background:var(--ink);color:#fff}
/* conferma: cosa ci hai mandato, come ti rispondiamo, e due strade per continuare */
.form__done .ok-mark{width:48px;height:48px}
.form__sum{padding:12px 16px;border-left:2px solid var(--foil);background:#fff;color:var(--ink)!important;font-weight:700;overflow-wrap:anywhere}
/* senza JavaScript il modulo non parte: in cima, telefono ed email (da WMT_CONF) */
.form__nojs{padding:12px 16px;border-left:2px solid var(--foil);background:#fff;font-size:var(--t-s);line-height:1.5;color:var(--ink)}
.form__done .cta-row{margin-top:4px}
.form__note--l{text-align:left}
.form__again{justify-self:start;font-size:var(--t-s)}
.form__note .lk{color:inherit}
@media (max-width:519px){.form__done .cta-row{flex-direction:column;align-items:stretch}.form__done .cta-row .btn{width:100%}}
/* telefoni stretti: le tre scelte (vendita, permuta, conto vendita) stanno su una riga */
@media (max-width:419px){.form{padding-inline:16px}.form .checks{gap:6px}.form .check span{padding:0 .78rem;letter-spacing:0}}
/* domande dei venditori: titolo a sinistra, le risposte a destra */
.faqs{padding-top:0}
.faqs__grid{display:grid;gap:34px}
.faqs__head{display:grid;gap:18px;align-content:start;justify-items:start}
.faqs__head .lede{margin-top:-4px}
.faqs .faq{margin-top:0}
@media (min-width:960px){.faqs__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,7vw,110px)}.faqs__head{position:sticky;top:calc(66px + env(safe-area-inset-top,0px) + 34px)}}

/* servizi: sette righe editoriali, foto (5/12) e testo (7/12) alternati; ognuna porta alla sua azione.
   La ricerca su richiesta ha il modulo al posto della foto. Sul telefono la foto sta sopra il testo. */
.svc-hd{padding-bottom:0}
.svc-hd__head{max-width:46rem;margin-bottom:0}
.svc__idx{margin-top:clamp(30px,4vw,52px)}
.svc__idx ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;border-top:1px solid var(--line)}
.svc__idx a{position:relative;display:grid;grid-template-columns:2.2rem minmax(0,1fr);align-items:baseline;min-height:44px;padding:12px 0 11px;border-bottom:1px solid var(--line);font-size:var(--t-s);font-weight:700;line-height:1.35;letter-spacing:.02em;color:var(--ink-2);text-decoration:none;transition:color .3s}
.svc__idx a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-fade);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.svc__idx a:hover{color:var(--ink)}
.svc__idx a:hover::after{transform:scaleX(1)}
.svc__in{font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.08em;color:var(--foil-text)}
@media (min-width:900px){
  .svc__idx ol{grid-template-columns:repeat(7,minmax(0,1fr));column-gap:clamp(14px,1.6vw,24px);border-top:0}
  .svc__idx a{grid-template-columns:minmax(0,1fr);align-content:start;gap:8px;height:100%;padding:16px 0 14px;border-top:1px solid var(--line);border-bottom:0}
  .svc__idx a::after{top:-1px;bottom:auto}
}
.svcs{padding-top:clamp(64px,8vw,112px)}
.svc__row{display:grid;gap:26px;padding-block:clamp(44px,6vw,88px);border-top:1px solid var(--line)}
.svc__row:first-child{padding-top:0;border-top:0}
.svc__row:last-child{padding-bottom:0}
.svc__img{order:-1;margin:0;background:var(--mist);overflow:hidden}
.svc__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.svc__copy{display:grid;gap:16px;align-content:center;justify-items:start}
.svc__n{font-family:var(--title);font-weight:900;font-size:1.9rem;line-height:.9;color:var(--foil)}
.svc__copy h2{max-width:14ch}
.svc__text{max-width:34rem;color:var(--ink-2);text-wrap:pretty}
.svc__facts{display:grid;justify-self:stretch;max-width:34rem;margin:2px 0 0;border-top:1px solid var(--line)}
.svc__facts div{display:grid;grid-template-columns:minmax(0,9rem) minmax(0,1fr);gap:4px 16px;padding:12px 0 11px;border-bottom:1px solid var(--line)}
.svc__facts dt{padding-top:.3em;font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1.3;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.svc__facts dd{font-size:var(--t-s);color:var(--ink)}
.svc__copy>.more{margin-top:4px}
@media (max-width:399px){.svc__facts div{grid-template-columns:minmax(0,1fr)}.svc__facts dt{padding-top:0}}
@media (min-width:900px){
  .svc__row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,7vw,110px)}
  .svc__img{position:relative;order:0;grid-column:1;grid-row:1;min-height:420px}
  .svc__img img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
  .svc__copy{grid-column:2;grid-row:1}
  .svc__row--flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .svc__row--flip .svc__copy{grid-column:1}
  .svc__row--flip .svc__img{grid-column:2}
  .svc__row--form .svc__copy{grid-column:1;align-content:start}
  .svc__row--form .svc__form{grid-column:2;grid-row:1}
}

/* contatti */
.visit__grid{display:grid;gap:44px}
.visit__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.visit__copy{display:grid;gap:22px;align-content:center}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.facts{display:grid;margin-top:14px;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr);gap:12px;padding:15px 0;border-bottom:1px solid var(--line)}
.facts dt{font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);padding-top:.45em}
.facts dd{min-width:0;overflow-wrap:anywhere}
.facts--id div{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr)}
@media (min-width:900px){.visit__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,7vw,110px)}}
/* link dentro un testo (telefono, email, rimandi): sottolineatura sottile in oro che si accende al passaggio */
.lk{padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--foil-soft);text-underline-offset:.24em;transition:text-decoration-color .25s,color .25s}
.lk:hover{color:var(--foil-text);text-decoration-color:var(--foil)}
/* segnaposto in attesa dei dati veri: pillola tratteggiata, mai scambiabile per un dato confermato */
.sample{display:inline-flex;align-items:center;justify-self:start;width:max-content;max-width:100%;margin-top:14px;padding:.55em 1.1em .5em;border:1px dashed var(--line-strong);border-radius:var(--r-pill);font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1.2;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}

/* footer: marchio | navigazione | showroom | contatti, poi la riga legale (ragione sociale, P.IVA, privacy, condizioni).
   I dati vengono da WMT_CONF (assets/data.js) attraverso sync.py: un solo posto da cambiare */
.ftr{position:relative;padding-block:72px calc(28px + env(safe-area-inset-bottom,0px))}
/* il filo d'oro dell'intro apre il piede della pagina */
.ftr::before{content:"";position:absolute;top:0;left:50%;width:min(100%,var(--max));height:1px;background:var(--gold-rule);transform:translateX(-50%);opacity:.7}
.ftr__in{display:grid;gap:44px 32px}
.ftr__brand{display:grid;justify-items:start;align-content:start;gap:14px}
.ftr__mark{width:64px;height:auto}
.ftr__brand .wm{font-family:var(--title);font-weight:900;font-size:var(--t-s);padding-left:0}
.ftr__claim{max-width:19rem;font-size:var(--t-s);line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.ftr__col{display:grid;gap:8px;align-content:start;min-width:0;font-size:var(--t-s);line-height:1.55;color:var(--ink-2)}
.ftr__col>p{max-width:20rem;text-wrap:pretty}
/* titoletti delle colonne: piccole maiuscole come le eyebrow, in grigio, con il filo d'oro */
.ftr__h{display:flex;align-items:center;gap:14px;margin-bottom:6px;font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1.3;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
.ftr__h::after{content:"";flex:0 0 28px;height:1px;background:var(--gold-fade)}
.ftr__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;font-weight:700;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ftr__nav .ftr__h{grid-column:1/-1;letter-spacing:.32em}
.ftr__nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;transition:color .25s}
.ftr__nav a:hover{color:var(--foil-text)}
.ftr__acts{list-style:none;padding:0;margin:2px 0 0;display:grid}
/* recapiti: etichetta fissa in maiuscoletto, valore in inchiostro; al passaggio un filo d'oro sotto il valore */
.ftr__a{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.ftr__k{flex:none;width:5.4rem;font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.ftr__v{min-width:0;overflow-wrap:anywhere;background:linear-gradient(var(--foil),var(--foil)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease-out),color .25s}
.ftr__a:hover .ftr__v{background-size:100% 1px;color:var(--foil-text)}
/* azioni (prenota, mappa): la freccia d'oro dice che si clicca, e scorre al passaggio */
.ftr__go{width:auto;gap:8px;font-weight:700}
.ftr__arr{color:var(--foil);font-size:1.15em;line-height:1;transition:transform .45s var(--ease-out)}
.ftr__go:hover .ftr__arr{transform:translateX(5px)}
.ftr__bot{margin-top:52px}
.ftr__legal{display:grid;gap:12px;padding-top:26px;border-top:1px solid var(--line);font-size:var(--t-s);line-height:1.55;color:var(--ink-2)}
/* ragione sociale, sede, P.IVA, REA: separati da un punto d'oro, vanno a capo per intero. Ogni voce porta il suo punto
   a sinistra, fuori dal riquadro (margine negativo): a inizio riga il punto resta nascosto, quindi non apre mai una riga */
.ftr__id{overflow:hidden;color:var(--ink)}
.ftr__ids{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin-left:-27px}
.ftr__ids>span{display:inline-flex;align-items:center}
.ftr__ids>span::before{content:"";flex:none;width:3px;height:3px;margin:0 12px;border-radius:50%;background:var(--foil)}
.ftr__law{display:flex;flex-wrap:wrap;gap:0 28px;font-weight:700;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.ftr__law a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color .25s}
.ftr__law a:hover{color:var(--foil-text)}
.ftr__legal .demo{font-size:var(--t-s);color:var(--ink-2);text-wrap:pretty}
@media (min-width:600px){.ftr__in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
  .ftr__in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr) minmax(0,1fr) minmax(0,1.15fr);gap:32px clamp(28px,3vw,48px)}
  .ftr__nav{grid-template-columns:1fr}
  .ftr__legal{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:40px}
  .ftr__legal .demo{grid-column:1/-1}
}

.specs{display:grid;grid-template-columns:auto minmax(0,1fr);margin-top:22px;border-top:1px solid var(--line)}
.specs dt,.specs dd{padding:13px 0;border-bottom:1px solid var(--line)}
.specs dt{padding-right:20px;font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2);padding-top:17px}
.specs dd{text-align:right}

/* contatto rapido + avvisi */
.float{position:fixed;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 1.35rem;border-radius:var(--r-pill);border:0;background:var(--ink);font-family:var(--body);font-weight:700;font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:#fff;cursor:pointer;box-shadow:0 8px 24px rgba(25,24,22,.18);opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden;transition:opacity .4s ease,transform .5s var(--ease),visibility 0s linear .5s,background-color .35s ease,color .35s ease}
/* spento e' anche invisibile ai lettori di schermo e fuori dall'ordine del Tab; la dissolvenza resta */
.float.is-on{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition-delay:0s}
.float.on-ink{background:#ece6da;color:#191816;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.float svg{width:18px;height:18px}
@media (min-width:1000px){.float{display:none}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:120;width:max-content;max-width:calc(100% - 2 * var(--gut));padding:13px 20px;border-radius:var(--r-pill);background:var(--ink);font-family:var(--body);font-weight:700;font-size:var(--t-s);letter-spacing:.03em;color:#fff;text-align:center;transform:translate(-50%,10px);opacity:0;pointer-events:none;transition:opacity .3s ease,transform .4s var(--ease)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

.hdr__end{display:flex;align-items:center;gap:6px}
@media (min-width:1000px){.hdr__end{gap:18px}}
@media (min-width:1200px){.hdr__end{gap:22px}}
@media (max-width:399px){.brand .wm{font-size:.7rem;letter-spacing:.2em}}
/* sotto i 360 px: solo il logo, e "Menu"/"Chiudi" restano icone in un riquadro di 44 px (l'icona resta allineata al margine) */
@media (max-width:359px){.brand .wm{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.menu-btn{font-size:0;gap:0;margin-right:-11px}}
.form__ctx{margin:-4px 0 4px;padding:11px 16px;border-left:2px solid var(--foil);background:var(--mist);font-size:var(--t-s);color:var(--ink-2)}
.form__ctx b{color:var(--ink)}
.ok-mark{display:grid;place-items:center;width:56px;height:56px;border-radius:999px;background:var(--ink);color:#fff}
.ok-mark svg{width:24px;height:24px}

/* ---------- animazioni ---------- */
html{scrollbar-gutter:stable}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.card__img img{transition:transform .9s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){.card__btn:hover .card__img img{transform:scale(1.035)}}
.card__btn:active .card__img img{transform:scale(.975);transition-duration:.18s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
/* ---------- link tra le pagine ---------- */
a.card__btn{text-decoration:none;color:inherit}
a[data-go]{-webkit-tap-highlight-color:transparent}
.nav a[aria-current="page"]{color:var(--foil-text)}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr:not(.is-solid) .nav a[aria-current="page"]{color:#d9bf86}
.ftr__nav a[aria-current="page"],.ftr__law a[aria-current="page"]{color:var(--foil-text)}

/* ---------- passaggio tra le pagine: un sipario bianco con la mini-intro della pagina di arrivo ----------
   stato iniziale di default; stato finale con .is-play (uscita e arrivo "a freddo") o con html.t-warm (arrivo da un'altra pagina) */
.curtain{--art:min(80vw,50vh,400px);position:fixed;inset:0;z-index:150;display:none;overflow:hidden;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;cursor:default}
html.t-in .curtain,.curtain.is-on{display:block}
html.t-in .curtain{animation:ctSafe .5s linear 4.5s forwards}
@keyframes ctSafe{to{opacity:0;visibility:hidden}}
.curtain__bg{position:absolute;inset:0;background:var(--paper);will-change:opacity}
.curtain__stage{position:absolute;inset:0;display:grid;place-items:center;will-change:transform,opacity}
.curtain__art{position:relative;top:-5vh;width:var(--art);aspect-ratio:1/1}
.curtain__art svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:opacity}
.curtain .m{display:none}
.curtain--home .m-home,.curtain--product .m-product,.curtain--collezione .m-collezione,.curtain--laboratorio .m-laboratorio,.curtain--vendi .m-vendi,.curtain--servizi .m-servizi,.curtain--contatti .m-contatti,
.curtain--garanzie .m-garanzie,.curtain--privacy .m-privacy,.curtain--condizioni .m-condizioni{display:block}

/* minuteria */
.ct-tick{stroke:var(--foil);stroke-linecap:round;stroke-width:3;opacity:.16;transition:opacity .4s ease calc(var(--i) * 6ms)}
.ct-tick.major{stroke-width:5}
.curtain.is-on .ct-tick{transition-duration:.2s;transition-delay:calc(var(--i) * 1.5ms)}
.curtain.is-play .ct-tick,html.t-warm .curtain .ct-tick{opacity:1}

/* testi sotto il quadrante */
.curtain__text{position:absolute;left:50%;top:100%;width:max-content;max-width:calc(100vw - 2 * var(--gut));margin-top:clamp(14px,3vh,28px);transform:translateX(-50%);text-align:center}
.curtain .wm{font-size:clamp(.95rem,4.2vw,1.35rem);white-space:nowrap;color:var(--ink)}
.ct-rule{display:block;width:78%;height:1px;margin:14px auto 12px;background:linear-gradient(90deg,transparent,var(--foil) 20%,var(--foil) 80%,transparent)}
.curtain .tag{font-size:clamp(.6rem,2.4vw,.78rem)}
.ct-brand+.ct-model{margin-top:10px}
.ct-brand{font-family:var(--thin);font-weight:100;text-transform:uppercase;font-size:clamp(.8rem,3.4vw,1rem);letter-spacing:.62em;padding-left:.62em;color:var(--ink);white-space:nowrap;opacity:0;filter:blur(4px);transition:opacity .7s ease .12s,filter .7s ease .12s,letter-spacing 1.2s var(--ease) .12s,padding-left 1.2s var(--ease) .12s}
.ct-model{margin-inline:auto;font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:clamp(1.3rem,.95rem + 2.2vw,2.1rem);line-height:1.05;letter-spacing:.02em;max-width:17ch;text-wrap:balance;color:var(--ink);opacity:0;transform:translateY(10px);transition:opacity .7s ease .22s,transform 1s cubic-bezier(.22,1,.36,1) .22s}
.curtain.is-on .ct-brand{transition-duration:.22s,.22s,.3s,.3s;transition-delay:.05s}
.curtain.is-on .ct-model{transition-duration:.22s,.3s;transition-delay:.08s}
.curtain.is-play .ct-brand,html.t-warm .curtain .ct-brand{opacity:1;filter:none;letter-spacing:.34em;padding-left:.34em}
.curtain.is-play .ct-model,html.t-warm .curtain .ct-model{opacity:1;transform:none}

/* orologio e collezione: nel quadrante il logo (come in home) e sotto il nome; nessuna foto nel sipario.
   Sul sipario scuro il logo prende l'oro chiaro */
:is(:root[data-page="collezione"],:root[data-page="product"]) .curtain:not(.is-lt) use,.curtain.is-dk use{fill:url(#foilLight)}

/* laboratorio: due ruote del movimento che girano ingranate */
.ct-gears{position:absolute;inset:0}
.ct-gear{position:absolute;opacity:0;transform:rotate(var(--r0)) scale(.92);transition:opacity .5s ease .15s,transform 1.6s cubic-bezier(.3,0,.2,1) .15s}
.ct-gear svg{display:block;width:100%;height:100%;overflow:visible}
.ct-gear--a{left:18%;top:31%;width:48%;height:48%;--r0:-30deg}
.ct-gear--b{left:55.35%;top:18.05%;width:28%;height:28%;--r0:51.4deg}
.curtain.is-on .ct-gear{transition-duration:.22s,.4s;transition-delay:.02s}
.curtain.is-play .ct-gear,html.t-warm .curtain .ct-gear{opacity:1;transform:none}

/* vendi: i quattro passaggi come indici delle ore */
.ct-nums{position:absolute;inset:0}
.ct-num{position:absolute;margin:0;font-family:var(--title);font-weight:900;font-size:calc(var(--art) * .1);line-height:1;color:var(--foil);opacity:.12;transform:translate(-50%,-50%) scale(.8);transition:opacity .5s ease calc(var(--k) * 220ms + 200ms),transform .8s cubic-bezier(.22,1,.36,1) calc(var(--k) * 220ms + 200ms)}
.ct-num:nth-child(1){left:50%;top:21%}
.ct-num:nth-child(2){left:79%;top:50%}
.ct-num:nth-child(3){left:50%;top:79%}
.ct-num:nth-child(4){left:21%;top:50%}
.curtain.is-on .ct-num{transition-duration:.22s,.3s;transition-delay:calc(var(--k) * 35ms + 20ms)}
.curtain.is-play .ct-num,html.t-warm .curtain .ct-num{opacity:1;transform:translate(-50%,-50%) scale(1)}

/* servizi: le lancette che fanno un giro e si fermano sulle 10 e 10 */
.ct-hands{position:absolute;inset:0}
.ct-hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:99px;background:linear-gradient(#d9bf86,#9c7c45)}
.ct-hand--h{width:calc(var(--art) * .024);height:24%;margin-left:calc(var(--art) * -.012);transform:rotate(275deg);transition:transform 1.5s cubic-bezier(.65,0,.25,1) .15s}
.ct-hand--m{width:calc(var(--art) * .015);height:36%;margin-left:calc(var(--art) * -.0075);transform:rotate(-300deg);transition:transform 1.5s cubic-bezier(.65,0,.25,1) .15s}
.ct-cap{position:absolute;left:50%;top:50%;width:6%;height:6%;margin:-3% 0 0 -3%;border-radius:50%;background:var(--foil);box-shadow:0 0 0 calc(var(--art) * .012) var(--paper)}
.curtain.is-on .ct-hand{transition-duration:.36s;transition-delay:0s}
.curtain.is-play .ct-hand--h,html.t-warm .curtain .ct-hand--h{transform:rotate(305deg)}
.curtain.is-play .ct-hand--m,html.t-warm .curtain .ct-hand--m{transform:rotate(60deg)}

/* contatti: lo showroom visto attraverso il quadrante */
.ct-lens{position:absolute;left:12%;top:12%;width:76%;height:76%;overflow:hidden;clip-path:circle(50% at 50% 50%);background:var(--mist);opacity:0;transform:scale(.55);transition:opacity .6s ease .15s,transform 1.1s cubic-bezier(.22,1,.36,1) .15s}
.ct-lens img{width:100%;height:100%;max-width:none;object-fit:cover;transform:scale(1.3);transition:transform 1.6s cubic-bezier(.22,1,.36,1) .15s}
.curtain.is-on .ct-lens{transition-duration:.25s,.36s;transition-delay:.02s}
.curtain.is-on .ct-lens img{transition-duration:.4s;transition-delay:.02s}
.curtain.is-play .ct-lens,html.t-warm .curtain .ct-lens{opacity:1;transform:none}
.curtain.is-play .ct-lens img,html.t-warm .curtain .ct-lens img{transform:none}

/* garanzie, privacy, condizioni: un sigillo, un lucchetto, un foglio firmato, tracciati a filo d'oro come il logo dell'intro */
.ct-line{position:absolute;inset:0}
.ct-line circle,.ct-line path,.ct-line rect{fill:none;stroke:var(--foil);stroke-width:.5;stroke-linecap:round;stroke-linejoin:round}
.ct-line .ct-faint{stroke-width:.35;opacity:.3}
.ct-draw{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.25,1) calc(var(--k) * 170ms + 150ms)}
.curtain.is-on .ct-draw{transition-duration:.42s;transition-delay:calc(var(--k) * 60ms + 20ms)}
.curtain.is-play .ct-draw,html.t-warm .curtain .ct-draw{stroke-dashoffset:0}

@media (max-height:500px){.curtain{--art:min(80vw,42vh,400px)}.curtain__art{top:-9vh}.curtain__text{margin-top:10px}.ct-brand+.ct-model{margin-top:6px}.ct-brand{font-size:.72rem}.ct-model{font-size:1.15rem}}

/* ---------- ingresso dei contenuti quando il sipario si alza ---------- */
html.pg-in .pg__first .wrap>*,html.pg-in .hero__copy .wrap>*,html.pg-in .pp__top,html.pg-in .pp__info>*{animation:rise .7s cubic-bezier(.22,1,.36,1) both}
html.pg-in .pg__first .wrap>:nth-child(1),html.pg-in .hero__copy .wrap>:nth-child(1){animation-delay:.06s}
html.pg-in .pg__first .wrap>:nth-child(2),html.pg-in .hero__copy .wrap>:nth-child(2){animation-delay:.14s}
html.pg-in .pg__first .wrap>:nth-child(n+3),html.pg-in .hero__copy .wrap>:nth-child(n+3){animation-delay:.22s}
html.pg-in .hero__copy .wrap>:nth-child(n+4){animation-delay:.3s}
html.pg-in .pp__top{animation-delay:.05s}
html.pg-in .pp__info>:nth-child(1){animation-delay:.1s}
html.pg-in .pp__info>:nth-child(2){animation-delay:.15s}
html.pg-in .pp__info>:nth-child(3){animation-delay:.2s}
html.pg-in .pp__info>:nth-child(4){animation-delay:.25s}
html.pg-in .pp__info>:nth-child(5){animation-delay:.3s}
html.pg-in .pp__info>:nth-child(n+6){animation-delay:.35s}

/* ---------- pagine del menu ---------- */
.pg{padding-top:calc(66px + env(safe-area-inset-top,0px))}
.pg h1{font-size:var(--t-2xl)}
.pg__first{padding-top:clamp(36px,5.5vw,76px)}
.pg .lab__img,.pg .visit__img{order:2}
@media (min-width:900px){.pg .lab__img,.pg .visit__img{order:0}}
.next{border-top:1px solid var(--line)}
.next__link{display:grid;gap:10px;padding-block:clamp(44px,6vw,76px);text-decoration:none}
.next__k{font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
.next__t{display:flex;align-items:baseline;gap:.35em;font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-2xl);line-height:1.02;letter-spacing:.01em;transition:color .3s}
.next__t>[aria-hidden]{font-family:var(--body);font-weight:400;color:var(--foil);transition:transform .45s var(--ease-out)}
.next__link:hover .next__t{color:var(--foil-text)}
.next__link:hover .next__t>[aria-hidden]{transform:translateX(10px)}

/* ---------- laboratorio ---------- */
.lab__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
@media (max-width:519px){.hero__cta,.cta-row,.lab__cta,.showroom__cta,.pp__all{flex-direction:column;align-items:stretch}.hero__cta .btn,.cta-row .btn,.lab__cta .btn,.showroom__cta .btn,.pp__all .btn{width:100%}}
/* telefoni stretti: un’etichetta lunga ("Aggiungi altre foto su WhatsApp", "Conferma l’acquisto e paga · € 33.900")
   va a capo dentro la pillola invece di allargare la pagina o perdere le lettere ai lati; su una riga il pulsante resta
   identico (52px, testo al centro). Sotto i 360px il tracking scende a .1em e "Mandaci le foto su WhatsApp" sta su una riga */
@media (max-width:419px){.hero__cta .btn,.cta-row .btn,.lab__cta .btn,.showroom__cta .btn,.pp__all .btn,.pp__cta .btn,.form [type=submit]{white-space:normal;text-wrap:balance;text-align:center;line-height:1.35;padding:12px 1.4rem}}
@media (max-width:359px){.hero__cta .btn,.cta-row .btn,.lab__cta .btn,.showroom__cta .btn,.pp__all .btn,.pp__cta .btn,.form [type=submit]{letter-spacing:.1em;padding-inline:1.1rem}}
.lab__how{padding-top:0}
/* Laboratorio, "Al banco": tre foto della lucidatura come scattate (3:2); sul telefono la prima a tutta larghezza */
.lab__bench{padding-top:0}
.bench{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bench figure{margin:0;overflow:hidden;background:var(--mist)}
.bench figure:first-child{grid-column:1/-1}
.bench img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (min-width:900px){.bench{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.bench figure:first-child{grid-column:auto}}
/* portrait strip (Laboratorio, Il movimento): the photos keep their 2:3 */
.bench--tall img{aspect-ratio:2/3}
/* Laboratorio, Prenota: the bench photo under the copy; on phones it follows the form */
.book__img{margin:0;overflow:hidden;background:var(--mist)}
.book__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
@media (min-width:900px){.book .sell__grid{grid-template-rows:auto 1fr}.book .form{grid-column:2;grid-row:1/span 2}.book__img{grid-column:1;grid-row:2}}
/* tempi e costi: tre fasce di revisione con il prezzo "da" e i tempi (da WMT_CONF), poi le quattro garanzie */
.costs-sec{background:var(--mist)}
.costs__grid{display:grid;gap:34px}
.costs__head{display:grid;gap:16px;align-content:start}
.costs__head .lede{max-width:30rem}
.costs{list-style:none;margin:0;padding:0;border-top:1px solid rgba(25,24,22,.16)}
.costs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:baseline;padding:22px 0 20px;border-bottom:1px solid rgba(25,24,22,.16)}
.costs__k{font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-m);line-height:1.2;letter-spacing:.04em}
.costs__d{grid-column:1;grid-row:2;font-size:var(--t-s);color:var(--ink-2)}
.costs__p{grid-column:2;grid-row:1;font-size:var(--t-s);color:var(--ink-2);text-align:right;white-space:nowrap}
.costs__p b{margin-left:.3em;font-weight:400;font-size:var(--t-l);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.costs__t{grid-column:2;grid-row:2;font-size:var(--t-s);color:var(--ink-2);text-align:right;white-space:nowrap}
.costs-sec .promise{margin-top:clamp(20px,3vw,40px);border-top-color:rgba(25,24,22,.16)}
.costs-sec .promise li{border-color:rgba(25,24,22,.16)}
@media (max-width:419px){.costs li{grid-template-columns:minmax(0,1fr)}.costs__p,.costs__t{grid-column:1;grid-row:auto;text-align:left}.costs__p b{margin-left:.15em}}
@media (min-width:900px){.costs__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(48px,7vw,110px)}.costs-sec .promise{grid-column:1/-1}}
/* prenota una revisione: il racconto a sinistra, il modulo (come quello di Vendi) a destra */
.book__copy{display:grid;gap:18px;align-content:start}
.book__copy .svc__facts{margin-top:8px}


/* ---------- home: chi siamo, showroom ---------- */
.about__grid{display:grid;gap:40px}
.about__img{margin:0;background:var(--mist)}
.about__img img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.about__copy{display:grid;gap:20px;align-content:center}
.about__copy p{max-width:34rem;text-wrap:pretty}
.about__copy p+p{color:var(--ink-2)}
.about__copy .about__sign{margin-top:6px;color:var(--foil-text)}
@media (min-width:720px){.about__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:center}}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gallery figure{margin:0;overflow:hidden;background:var(--mist)}
.gallery img{width:100%;height:auto;object-fit:cover}
.gallery__wide{grid-column:1/-1}
.gallery__wide img{aspect-ratio:3/2}
.gallery figure:not(.gallery__wide) img{aspect-ratio:2/3}
.showroom__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
@media (min-width:900px){
  /* le foto dello showroom come scattate: 3:2 la sala, 2:3 le altre due; 9:4:4 le porta alla stessa altezza */
  .gallery{grid-template-columns:9fr 4fr 4fr;gap:18px}
  .gallery__wide{grid-column:auto}
  .gallery figure{position:relative}
  .gallery figure:not(.gallery__wide) img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}
.about+.showroom{padding-top:0}
.about__copy>.more{margin-top:2px}
/* dove e quando, sotto le foto: dal WMT_CONF (data-conf), accanto a "Prenota una visita" */
.showroom__foot{display:grid;gap:26px;margin-top:34px}
.showroom__foot .facts{margin-top:0}
.showroom__foot .showroom__cta{margin-top:0}
@media (min-width:900px){
  .showroom__foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;column-gap:clamp(40px,6vw,96px)}
  .showroom__foot .facts{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);column-gap:32px}
}

/* ---------- home: in collezione ora, come funziona ---------- */
/* collegamento con freccia ("Tutta la collezione (8) ›", "Come lavoriamo ›"): voce dei pulsanti, filo e freccia in oro */
.more{display:inline-flex;align-items:center;gap:14px;justify-self:start;min-height:44px;font-family:var(--body);font-weight:700;font-size:var(--t-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.more>span{position:relative;padding-block:5px}
.more>span::after{content:"";position:absolute;left:0;right:.14em;bottom:0;height:1px;background:var(--foil);transform-origin:0 50%;transition:transform .55s var(--ease-out)}
.more__arr{font-style:normal;font-weight:400;font-size:1.6em;line-height:.8;color:var(--foil);transition:transform .45s var(--ease-out)}
@media (hover:hover){
  .more:hover>span::after{transform:scaleX(.4)}
  .more:hover .more__arr{transform:translateX(8px)}
}
.rail__head{margin-bottom:clamp(34px,4vw,52px)}
.rail__head>.more{margin-top:2px}
/* sotto i 4 orologi: "Fissa il tuo appuntamento in showroom" (WhatsApp, come gli altri pulsanti di visita) */
.rail__visit{display:flex;justify-content:center;margin-top:clamp(36px,5vw,56px)}
@media (max-width:519px){.rail__visitbtn{width:100%}}
@media (min-width:900px){
  .rail__head{grid-template-columns:minmax(0,1fr) auto;column-gap:48px}
  .rail__head>*{grid-column:1}
  .rail__head>.more{grid-column:2;grid-row:1/span 3;align-self:end;margin:0 0 -4px}
}
/* quattro pezzi: due per riga fino al computer, poi quattro */
.grid--home{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.grid--home{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* come funziona: comprare | vendere o permutare, con i numeri romani di Vendi */
.how{background:var(--mist)}
.how__grid{display:grid;gap:64px}
@media (min-width:720px){.how__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,7vw,110px)}}
@media (max-width:999px){.how .steps li{grid-template-columns:52px minmax(0,1fr);padding:20px 0}}
/* telefono: le due colonne una sotto l'altra, passi piu' raccolti */
@media (max-width:719px){.how__grid{gap:52px}.how .steps li{grid-template-columns:44px minmax(0,1fr);padding:16px 0}.how .steps p{margin-top:4px}}
.how__col{display:grid;align-content:start}
.how__h{display:flex;align-items:center;gap:16px;font-size:var(--t-l);letter-spacing:.06em}
.how__h::after{content:"";flex:1 1 28px;max-width:64px;height:1px;background:var(--gold-fade);transform-origin:0 50%}
.how .steps{margin-top:22px}
.steps h4{margin:0;font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-m);letter-spacing:.04em;line-height:1.2}
.how__cta{display:grid;gap:12px;justify-items:start;margin-top:30px}
.how__note{font-size:var(--t-s);color:var(--ink-2);text-wrap:pretty}
@media (max-width:519px){.how__cta{justify-items:stretch}.how__cta .btn{width:100%}.how__note{text-align:center}}

/* ---------- home, "Il metodo": un tourbillon che si assembla mentre la sezione resta ferma ----------
   assets/tourbillon/tourbillon.min.js sceglie il livello (WebGL, disegno al tratto in SVG, foto ferma con
   "riduci movimento") e lo scarica solo quando la sezione e' vicina; site.js (metodo) lo monta e guida frasi e filo.
   Senza JavaScript o con "riduci movimento" (.is-still): una fascia nera alta uno schermo, con la foto del movimento
   assemblato e le tre frasi una sotto l'altra. */
/* ---------- home: il certificato di garanzia in 3D (sotto "Disponibili ora"; markup da wmt-tools/certificato.py) ----------
   Scorrendo la cartella si apre, la card esce dalla fustella, si raddrizza e si gira (site.js, "home: il certificato").
   Cartella e card si disegnano alla misura piu' grande che avranno e poi si riducono (--zoom, --cs): ingrandire un
   livello 3D lo sgranerebbe. Senza JavaScript o con il movimento ridotto: la cartella aperta e la card girata, ferme. */
.cert{position:relative;background:var(--night);color:#fff}
.js .cert:not(.is-static){height:270vh}
.cert__defs{position:absolute;width:0;height:0;overflow:hidden}
.cert__stage{position:relative;display:grid;grid-template-rows:1fr auto;justify-items:center;align-items:center;gap:clamp(18px,4vh,40px);min-height:100vh;min-height:100svh;padding:clamp(84px,12vh,120px) 0 clamp(36px,7vh,64px);overflow:hidden}
.js .cert:not(.is-static) .cert__stage{position:sticky;top:0;height:100vh;height:100svh}
.cert__scene{--W:min(48vw,640px,(100vh - 250px) * 1.5);--zo:.97;position:relative;width:100%;height:calc(var(--W) * var(--zo) / 1.5);perspective:2400px;perspective-origin:50% 35%}
.cert__folder{position:absolute;left:50%;top:50%;width:calc(var(--W) * 2);height:calc(var(--W) / 1.5);margin:calc(var(--W) / -3) 0 0 calc(var(--W) * -1);transform-style:preserve-3d;will-change:transform;
  transform:translateX(var(--shift,0px)) scale(var(--zoom,var(--zo))) rotateX(var(--rx,14deg)) rotateY(var(--ry,0deg))}
.cert__panel{position:absolute;top:0;width:var(--W);height:100%;transform-style:preserve-3d}
.cert__panel--r{left:var(--W)}
.cert__panel--l{left:0;transform-origin:100% 50%;transform:rotateY(var(--open,0deg)) translateZ(-4px)}
.cert__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cert__face>svg{display:block;width:100%;height:100%}
.cert__back{transform:rotateY(180deg)}
.cert__panel .cert__face{border-radius:3px;overflow:hidden;box-shadow:0 40px 80px -20px rgba(0,0,0,.6)}
.cert__txt{display:flex;align-items:center;justify-content:center;background:#39393b}
/* il testo stampato: centrato sul cartoncino, oro della stampa, le stesse righe della stampa (una per <span>, giustificata
   da sola: lo spazio in piu' va tra le parole). Il carattere e' quello che riempie la colonna come nella stampa (la riga
   piu' lunga al 95%) */
.cert__txtin{width:62%;color:#e2cd62;font-family:var(--body);font-size:calc(var(--W) * .0274);line-height:calc(var(--W) * .0318)}
.cert__txtin p{margin:0 0 calc(var(--W) * .016)}
.cert__txtin p:last-child{margin-bottom:0}
.cert__txtin span{display:block;white-space:nowrap;text-align:justify;text-align-last:justify}
.cert__txtin span.end{text-align-last:left}
.cert__card{position:absolute;left:50%;top:57.5%;width:var(--cw,calc(var(--W) * .4133));height:calc(var(--cw,calc(var(--W) * .4133)) * .6308);transform-style:preserve-3d;will-change:transform;
  transform:translate(-50%,-50%) translate3d(var(--cx,0px),var(--cy,0px),var(--cz,1px)) rotateX(var(--crx,0deg)) rotateZ(var(--crot,-90deg)) rotateY(var(--cflip,0deg)) scale(var(--cs,1))}
.cert__card .cert__face{border-radius:4.2%/6.6%;overflow:hidden;box-shadow:0 18px 40px -12px rgba(0,0,0,var(--cshadow,.2))}
/* telefono: chiusa occupa quasi tutta la larghezza, aperta si riduce per starci intera */
@media (max-width:759px){.cert__scene{--W:min(86vw,(100vh - 250px) * 1.5)}}
.cert__caps{position:relative;width:min(92vw,640px);text-align:center}
.cert__cap{margin:0 0 18px}
.cert__cap .eyebrow{justify-content:center}
.cert__cap .eyebrow::after{display:none}
.cert__cap h2{margin:12px 0 0;font-size:clamp(1.5rem,3.4vw,2.4rem)}
.cert__k{margin:0;font-family:var(--title);font-weight:900;font-size:clamp(1rem,2.2vw,1.3rem);line-height:1.25;letter-spacing:.06em;text-transform:uppercase}
.cert__cap p:not(.cert__k):not(.eyebrow){margin:8px 0 0;color:rgba(255,255,255,.72)}
.cert__cap .lk{color:#fff}
/* con lo scorrimento si vede una didascalia alla volta */
.js .cert:not(.is-static) .cert__caps{height:6.6em}
.js .cert:not(.is-static) .cert__cap{position:absolute;left:0;right:0;top:0;margin:0;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.js .cert:not(.is-static) .cert__cap.is-on{opacity:1;visibility:visible}

.metodo{position:relative;background:var(--night);color:#fff}
.js .metodo{height:200vh}
.metodo__pin{position:relative;height:100vh;height:100svh;min-height:540px;overflow:hidden}
/* la scena ferma non e' mai piu' alta dello schermo (telefono in orizzontale: 390 px), o le frasi resterebbero sotto */
.js .metodo__pin{position:sticky;top:0;min-height:0}
.metodo__stage{position:absolute;inset:0}
.metodo__poster{position:absolute;left:0;right:0;top:15%;width:100%;height:56%;object-fit:contain}
/* sotto l'intestazione fissa (66 px): titolo a sinistra, contatore a destra */
.metodo__head{position:absolute;left:0;right:0;top:calc(66px + env(safe-area-inset-top,0px) + clamp(16px,3.2vh,32px));display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}
.metodo__head .eyebrow{flex:1 1 auto}
.metodo__count{flex:none;font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1.3;letter-spacing:.24em;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.metodo__count b{color:#fff}
.metodo__foot{position:absolute;left:0;right:0;bottom:calc(clamp(24px,5.2vh,56px) + env(safe-area-inset-bottom,0px));text-align:center;pointer-events:none}
/* le tre frasi: la voce dei titoli, Heavy per "Ogni ..." e Thin per il resto, come il titolo della hero */
.metodo__line{margin:0 auto;max-width:26em;font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-xl);line-height:1.02;letter-spacing:.01em;text-wrap:balance}
.metodo__line .lt{font-family:var(--thin);font-weight:100;letter-spacing:.04em}
.metodo__line+.metodo__line{margin-top:.7em}
/* fascia ferma (senza JavaScript, o con "riduci movimento"): le tre frasi insieme, un po' piu' piccole (il Thin mai
   sotto i 24 px), il filo pieno */
html:not(.js) .metodo__line,.metodo.is-still .metodo__line{font-size:clamp(1.5rem,1.05rem + 1.5vw,2.2rem)}
html:not(.js) .metodo__line+.metodo__line,.metodo.is-still .metodo__line+.metodo__line{margin-top:.5em}
html:not(.js) .metodo__rule i,.metodo.is-still .metodo__rule i{transform:none}
html:not(.js) .metodo__count,.metodo.is-still .metodo__count{display:none}
.js .metodo.is-still{height:auto}
.js .metodo.is-still .metodo__pin{position:relative;min-height:max(600px,100svh)}
.metodo__rule{position:relative;width:min(320px,52vw);height:1px;margin:24px auto 0;background:rgba(156,124,69,.32)}
.metodo__rule i{position:absolute;inset:0;background:var(--foil);transform-origin:0 50%;transform:scaleX(0)}
.metodo__spec{margin-top:14px;font-family:var(--title);font-weight:900;font-size:var(--t-xs);line-height:1.3;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.62)}
@media (max-width:359px){.metodo__spec{letter-spacing:.12em}}
/* con lo script: le frasi stanno una sull'altra e cambiano a 1/3 e 2/3 della corsa, parola per parola da una maschera */
.metodo.is-live .metodo__lines{position:relative;height:var(--lines-h,4.2em)}
.metodo.is-live .metodo__line{position:absolute;left:0;right:0;bottom:0;margin-top:0}
.metodo.is-live .metodo__line .sw{clip-path:inset(-.08em -.3em -.16em -.3em)}
.metodo.is-live .metodo__line .sw>span{transform:translateY(115%);transition:transform .55s var(--ease) calc(var(--i,0) * 18ms)}
.metodo.is-live .metodo__line.is-on .sw>span{transform:none;transition:transform .95s var(--ease-out) calc(var(--i,0) * 45ms)}
.metodo.is-live .metodo__line.is-past .sw>span{transform:translateY(-115%)}
.metodo.is-live .metodo__spec{opacity:0;transform:translateY(6px);transition:opacity .8s ease,transform .8s var(--ease-out)}
.metodo.is-live.is-done .metodo__spec{opacity:1;transform:none}
/* didascalie dei pezzi (WebGL) e del disegno (SVG) nei caratteri del sito */
.metodo .wmtt-l{font-family:var(--body)}
.metodo .wmtt-l b{font-family:var(--title)}
@media (prefers-reduced-motion:reduce){.metodo__line .sw>span,.metodo__spec{transition:none!important}}
/* schermi bassi e larghi (telefono in orizzontale, finestra bassa): titolo piu' vicino all'intestazione, frasi su una
   riga e piu' basse (il Thin resta sopra i 24 px), filo e didascalia ravvicinati: al movimento resta la fascia centrale */
@media (min-aspect-ratio:1/1) and (max-height:560px){
  .metodo__head{top:calc(66px + env(safe-area-inset-top,0px) + 6px)}
  .metodo__foot{bottom:calc(max(14px,3.4vh) + env(safe-area-inset-bottom,0px))}
  .metodo.is-live .metodo__line{max-width:none;font-size:clamp(1.5rem,.9rem + 3.2vh,2rem)}
  .metodo__rule{margin-top:14px}
  .metodo__spec{margin-top:10px}
}
@media (min-aspect-ratio:1/1) and (max-height:430px){.metodo.is-live .metodo__spec{display:none}}

/* ---------- pagina orologio ----------
   Telefono: galleria (foto alta al massimo 100svh - 420px, cosi' marca, nome e prezzo stanno nel primo schermo a 390x844),
   poi nome, prezzo, pulsanti, garanzie, descrizione, scheda tecnica. Da 720px due colonne, la galleria resta ferma. */
.pp{padding-top:calc(66px + env(safe-area-inset-top,0px))}
.pp__top{display:flex;align-items:center;min-height:54px}
.pp__back{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:700;font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.pp__back:hover{color:var(--ink)}
.pp__back span{font-size:1.3em;line-height:1}
.pp__grid{display:grid;gap:22px;padding-bottom:clamp(72px,9vw,120px)}
.pp__img{margin:0 calc(var(--gut) * -1);background:var(--paper)}
.pp__info{display:grid;gap:12px;align-content:start;min-width:0}
/* il titolo porta anche la marca (ricerca, lettori di schermo): sopra il modello, nella voce delle eyebrow */
.pp__info h1{font-size:var(--t-2xl);letter-spacing:.01em;overflow-wrap:break-word}
.pp__info h1 .pp__brand{margin-bottom:16px}
.nw{white-space:nowrap}
.pp__meta{color:var(--ink-2)}
.pp__buy{display:grid;gap:6px;margin-top:12px}
.pp__price{font-size:var(--t-l);letter-spacing:.03em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.pp__price.is-word{letter-spacing:.01em}
.pp__price.is-sold{color:var(--ink-2)}
/* "Pezzo unico, disponibile ora": un punto d'oro che respira piano (fermo con "riduci movimento") */
.pp__avail{display:flex;align-items:baseline;gap:10px;font-size:var(--t-s);line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.pp__avail i{display:none}
.pp__avail.is-live i{display:block;flex:none;position:relative;top:-1px;width:7px;height:7px;border-radius:50%;background:var(--foil)}
@media (prefers-reduced-motion:no-preference){
  .pp__avail.is-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--foil);animation:availPulse 2.8s var(--ease-out) infinite}
}
@keyframes availPulse{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}
.pp__cta{display:grid;gap:10px;margin-top:10px}
@media (min-width:600px){
  .pp__cta{grid-template-columns:1fr 1fr}
  .pp__cta>.btn--solid{grid-column:1/-1}
  .pp__cta:not(:has(#ppBuy:not([hidden]))) .btn--line{grid-column:1/-1}
}
/* le garanzie sotto i pulsanti: quattro voci con le icone a filo d'oro di Come lavoriamo, ognuna porta al dettaglio */
.pp__trust{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px;border-top:1px solid var(--line)}
.pp__trust li{display:flex;border-bottom:1px solid var(--line)}
.pp__trust li:nth-child(odd){border-right:1px solid var(--line)}
.pp__trust a{display:flex;align-items:flex-start;gap:12px;width:100%;min-height:44px;padding:15px 14px 15px 0;color:inherit;text-decoration:none}
.pp__trust li:nth-child(even) a{padding-left:14px;padding-right:0}
.pp__ic{flex:none;width:24px;height:24px;margin-top:-1px;fill:none;stroke:var(--foil);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.pp__trust b{display:block;font-size:var(--t-s);line-height:1.3;color:var(--ink);transition:color .25s}
.pp__trust a>span>span{display:block;margin-top:3px;font-size:.8rem;line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.pp__trust a:hover b{color:var(--foil-text)}
/* telefono: l'icona sopra il titolo, cosi' il titolo sta su una riga anche in mezza colonna */
@media (max-width:599px){.pp__trust a{flex-direction:column;gap:9px;padding:16px 12px 16px 0}.pp__trust li:nth-child(even) a{padding-left:14px}}
/* tablet in verticale: la colonna del testo e' stretta, le garanzie vanno una per riga */
@media (min-width:720px) and (max-width:1099px){.pp__trust{grid-template-columns:1fr}.pp__trust li:nth-child(odd){border-right:0}.pp__trust li:nth-child(even) a{padding-left:0}.pp__trust a{padding-block:13px}}
@media (max-width:339px){.pp__trust{grid-template-columns:1fr}.pp__trust li:nth-child(odd){border-right:0}.pp__trust li:nth-child(even) a{padding-left:0}}
.pp__swap{font-size:var(--t-s)}
.pp__swap a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:44px;color:var(--ink-2);text-decoration:none}
.pp__swap-v{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--foil-soft);text-decoration-thickness:1px;text-underline-offset:.3em;transition:color .25s,text-decoration-color .25s}
.pp__swap a:hover .pp__swap-v{color:var(--foil-text);text-decoration-color:var(--foil)}
.pp__desc{margin-top:22px;padding-top:30px;border-top:1px solid var(--line);color:var(--ink-2);line-height:1.7;max-width:62ch;text-wrap:pretty}
/* venduto: senza il collegamento alla permuta la descrizione segue le garanzie, con un solo filo tra le due */
.pp__swap[hidden]+.pp__desc{border-top:0;padding-top:14px}
.pp__h{margin-top:30px}
.pp__h+.specs{margin-top:6px}
.pp__note{margin-top:14px;font-size:var(--t-s);color:var(--ink-2)}
/* scheda tecnica: "L'orologio" (la referenza) e "Questo esemplare" (anno, stato sulla scala, corredo voce per voce) */
.specs dd{text-wrap:pretty}
/* telefoni stretti: etichette meno spaziate; sotto i 360px etichetta sopra e valore sotto, cosi' il valore ha tutta la riga */
@media (max-width:399px){.specs dt{letter-spacing:.16em;padding-right:14px}}
@media (max-width:359px){.specs{grid-template-columns:minmax(0,1fr)}.specs dt{padding:15px 0 0;border-bottom:0}.specs dd{padding:4px 0 13px;text-align:left}.specs .stato,.specs .kit{justify-content:flex-start}}
.stato{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 12px;color:var(--ink);text-decoration:none}
.stato__m{display:flex;gap:4px}
.stato__m i{width:14px;height:3px;border-radius:2px;background:var(--line);transform-origin:0 50%}
.stato__m i.on{background:var(--foil)}
.stato__m i:nth-child(2){--k:1}.stato__m i:nth-child(3){--k:2}.stato__m i:nth-child(4){--k:3}.stato__m i:nth-child(5){--k:4}
.stato__v{white-space:nowrap;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--line-strong);text-underline-offset:.3em;transition:color .25s}
.stato:hover .stato__v{color:var(--foil-text)}
.kit{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 16px}
.kit li{display:inline-flex;align-items:center;gap:7px}
.kit .is-y::before{content:"";flex:none;width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l2.9 2.9 6.1-6.6' fill='none' stroke='%239c7c45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.kit .is-n{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--line-strong)}
/* tablet in verticale: gia' due colonne, prezzo e pulsanti nel primo schermo */
@media (min-width:720px){
  .pp__top{min-height:64px}
  .pp__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
  .pp__img{margin:0;position:sticky;top:calc(90px + env(safe-area-inset-top,0px))}
  .pp__info{padding-top:clamp(8px,5vh,56px)}
  .pp__cta{grid-template-columns:1fr}
}
@media (min-width:1100px){.pp__cta{grid-template-columns:1fr 1fr}}
.pp__more{border-top:1px solid var(--line)}
.pp__all{margin-top:44px}
/* sul telefono la barra in basso non copre la riga legale del piede */
@media (max-width:719px){html[data-page="product"] .ftr{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

/* ---------- collegamento con il gestionale ---------- */
.card[data-off]{display:none!important}
.pp__gone{display:grid;gap:16px;justify-items:start;padding-top:clamp(30px,7vw,80px);padding-bottom:clamp(60px,9vw,110px)}
.pp__gone h1{font-size:var(--t-xl)}
.pp__gone p{color:var(--ink-2);max-width:52ch}
html[data-dyn] #ppImg:not([src]){visibility:hidden}

/* ---------- galleria della scheda: copertina + foto, si scorre col dito ----------
   Miniature sotto la foto da 720px (da 160 px, mai la foto intera), punti sul telefono; frecce col mouse; la lente apre
   le foto a tutto schermo. Scorrendo, la foto che esce rimpicciolisce appena e quella che entra si posa (scroll-driven). */
.gal__stage{position:relative;width:min(100%,calc((100vh - 452px) * .6667));width:min(100%,calc((100svh - 452px) * .6667));min-width:min(100%,260px);margin-inline:auto}
.gal__track{display:flex;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;outline:none}
.gal__track::-webkit-scrollbar{display:none}
.gal__track:focus-visible{box-shadow:0 0 0 2px var(--foil) inset}
.gal__track img{flex:0 0 100%;width:100%;min-width:0;height:auto;aspect-ratio:2/3;margin:0;object-fit:cover;background:var(--paper);scroll-snap-align:center;scroll-snap-stop:always;cursor:zoom-in}
.gal__n{position:absolute;top:12px;right:12px;padding:.5em 1em .45em;border:1px solid var(--line);border-radius:var(--r-pill);background:rgba(255,255,255,.92);color:var(--ink-2);font-size:var(--t-xs);font-weight:700;line-height:1;letter-spacing:.12em;font-variant-numeric:tabular-nums;pointer-events:none}
.pp__badge{left:12px;top:12px}
.gal__zoom,.gal__arr{position:absolute;z-index:2;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;transition:opacity .3s,border-color .25s,transform .35s var(--ease-out)}
.gal__zoom{right:12px;bottom:12px;width:44px;height:44px}
.gal__zoom svg,.gal__arr svg{width:18px;height:18px}
.gal__zoom:hover,.gal__arr:hover{border-color:var(--ink)}
.gal__arr{top:50%;width:44px;height:44px;margin-top:-22px;opacity:0;display:none}
.gal__arr--prev{left:12px}
.gal__arr--next{right:12px}
.gal__arr:disabled{opacity:0!important;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .gal__arr{display:grid}
  .gal__stage:hover .gal__arr,.gal__arr:focus-visible{opacity:1}
  .gal__zoom:hover{transform:scale(1.06)}
}
.gal__thumbs{display:flex;justify-content:center;gap:12px;padding:14px var(--gut) 8px}
.gal__th{position:relative;flex:0 0 auto;width:52px;padding:0;border:0;background:none;cursor:pointer;opacity:.5;transition:opacity .3s}
.gal__th img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:var(--paper)}
.gal__th::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--foil);transform:scaleX(0);transition:transform .5s var(--ease-out)}
.gal__th:hover{opacity:.85}
.gal__th.is-on{opacity:1}
.gal__th.is-on::after{transform:none}
.gal__th:focus-visible{outline:2px solid var(--foil);outline-offset:3px}
@media (max-width:719px){
  .gal__thumbs{gap:0;padding:4px 0 0}
  .gal__th{display:grid;place-items:center;width:28px;height:28px;opacity:1}
  .gal__th img,.gal__th::after{display:none}
  .gal__th::before{content:"";width:6px;height:6px;border-radius:3px;background:var(--line-strong);opacity:.55;transition:width .45s var(--ease-out),background-color .3s,opacity .3s}
  .gal__th.is-on::before{width:22px;background:var(--foil);opacity:1}
}
@media (min-width:720px){
  .gal__stage{width:min(100%,calc((100vh - 160px) * .6667));min-width:0}
  .gal--multi .gal__stage{width:min(100%,calc((100vh - 230px) * .6667))}
  .gal__thumbs{padding-inline:0}
  .gal__th{width:56px}
}
@supports (animation-timeline:view()){
  html.mo .gal__track img{animation:galSlide linear both;animation-timeline:view(inline);animation-range:cover}
}
@keyframes galSlide{0%{transform:scale(.9);opacity:.35}50%{transform:none;opacity:1}100%{transform:scale(.9);opacity:.35}}

/* foto a tutto schermo: fondo bianco, la foto vola dalla galleria; un tocco la ingrandisce 2x dove tocchi */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#fff;color:var(--ink);overflow:hidden}
.lb::backdrop{background:transparent}
.lb__bar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 0 max(var(--gut),env(safe-area-inset-left,0px))}
.lb__n{font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.lb__x,.lb__nav{display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;transition:border-color .25s}
.lb__x{width:46px;height:46px}
.lb__x svg{width:16px;height:16px}
.lb__x:hover,.lb__nav:hover{border-color:var(--ink)}
.lb__stage{position:absolute;inset:calc(66px + env(safe-area-inset-top,0px)) 0 calc(48px + env(safe-area-inset-bottom,0px));display:grid;place-items:center;overflow:hidden;touch-action:none;cursor:zoom-in}
.lb__img{width:min(calc(100vw - 32px),calc((100vh - 130px) * .6667));width:min(calc(100vw - 32px),calc((100svh - 130px) * .6667));height:auto;aspect-ratio:2/3;object-fit:contain;transition:transform .5s var(--ease-out);user-select:none;-webkit-user-drag:none}
.lb__stage.is-zoom{cursor:zoom-out}
.lb__stage.is-zoom .lb__img{transform:scale(2);transition:transform .5s var(--ease-out),transform-origin .12s linear}
.lb__nav{position:absolute;top:50%;z-index:3;width:48px;height:48px;margin-top:-24px;display:none}
.lb__nav svg{width:20px;height:20px}
.lb.is-multi .lb__nav{display:grid}
.lb__prev{left:max(12px,env(safe-area-inset-left,0px))}
.lb__next{right:max(12px,env(safe-area-inset-right,0px))}
.lb__hint{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(14px + env(safe-area-inset-bottom,0px));text-align:center;font-size:var(--t-xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);pointer-events:none}
@media (prefers-reduced-motion:reduce){.lb__img,.lb__stage.is-zoom .lb__img{transition:none}}

/* telefono: la barra in basso con modello, prezzo e azione, quando i pulsanti della scheda non sono a vista */
/* staccata dal bordo (margini, angoli tondi): Safari su iPhone allunga sotto i suoi pulsanti il colore di una barra
   attaccata al bordo in basso, e scorrendo verso l'alto compariva una fascia scura sotto la barra */
.pbar{position:fixed;left:max(10px,env(safe-area-inset-left,0px));right:max(10px,env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:35;display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 8px 8px 16px;border-radius:20px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:0 12px 32px rgba(25,24,22,.16);transform:translateY(calc(100% + 16px + env(safe-area-inset-bottom,0px)));visibility:hidden;transition:transform .55s var(--ease-out),visibility 0s linear .55s}
.pbar.is-on{transform:none;visibility:visible;transition:transform .55s var(--ease-out),visibility 0s}
.pbar__t{flex:1;min-width:0;display:grid;line-height:1.3}
.pbar__m{font-weight:700;font-size:var(--t-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar__p{font-size:var(--t-s);color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pbar__p.is-word{color:var(--ink-2)}
.pbar__cta{flex:none;min-height:48px;padding:0 1.25rem;letter-spacing:.12em}
.pbar__wa{flex:none;display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid rgba(25,24,22,.25);background:transparent;color:var(--ink);cursor:pointer}
.pbar__wa svg{width:20px;height:20px}
@media (max-width:399px){.pbar{gap:8px;padding-left:14px}.pbar__cta{padding:0 1rem;letter-spacing:.09em}}
@media (min-width:720px){.pbar{display:none}}
@media (prefers-reduced-motion:reduce){.pbar,.pbar.is-on{transition:visibility 0s}}

/* ---------- fiducia: contatti, garanzie, pagine legali, 404 ----------
   Tutti i dati del negozio (ragione sociale, recapiti, garanzia, reso) vengono da WMT_CONF in assets/data.js:
   sync.py li scrive nei partial (contact, seller, footer, menu) e negli elementi con data-conf="chiave". */
/* testo da completare (tra parentesi quadre): si riconosce a colpo d'occhio, senza sembrare un errore */
.ph{background:var(--mist);box-shadow:0 0 0 .18em var(--mist);border-radius:2px;color:var(--ink-2);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.updated{margin-top:12px;font-size:var(--t-s);color:var(--ink-2)}
.pg__first .draft{margin-top:30px}
.pg__first .sec__head{margin-bottom:0}
.pg__first .sec__head .lede{margin-top:6px}
/* titoletto h2 piccolo (blocchi di una pagina): stessa voce delle eyebrow, in grigio */
h2.eyebrow{font-size:var(--t-xs);line-height:1.3;letter-spacing:.32em}

/* quattro promesse in fila, con icone a filo d'oro che si tracciano entrando */
.promise{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--line)}
.promise li{display:grid;gap:10px;align-content:start;padding:24px 16px 26px 0;border-bottom:1px solid var(--line)}
.promise li:nth-child(even){padding:24px 0 26px 18px;border-left:1px solid var(--line)}
.promise__ic{width:34px;height:34px;margin-bottom:6px;fill:none;stroke:var(--foil);stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.promise b{font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-m);line-height:1.2;letter-spacing:.04em}
.promise li>span{font-size:var(--t-s);color:var(--ink-2);text-wrap:pretty}
@media (min-width:900px){
  .promise{grid-template-columns:repeat(4,minmax(0,1fr))}
  .promise li,.promise li:nth-child(even){padding:30px clamp(18px,2.4vw,32px) 34px;border-left:1px solid var(--line);border-bottom:0}
  .promise li:first-child{padding-left:0;border-left:0}
}

/* documento lungo: indice a sinistra (fermo mentre scorri, segna la sezione che leggi), testo a destra */
.doc{padding-top:0}
.doc__grid{display:grid;gap:44px}
.toc__k{font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
.toc ol{list-style:none;padding:0;margin:14px 0 0;border-top:1px solid var(--line)}
/* telefono: l'indice in due colonne, per arrivare presto al testo */
@media (max-width:999px){.toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.toc a{grid-template-columns:2.2rem minmax(0,1fr)}}
.toc a{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr);align-items:baseline;min-height:44px;padding:11px 0 10px;border-bottom:1px solid var(--line);font-size:var(--t-s);line-height:1.4;color:var(--ink-2);text-decoration:none;transition:color .3s}
.toc a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold-fade);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.toc__n{font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.08em;color:var(--foil-text)}
.toc a:hover,.toc a.is-on{color:var(--ink)}
.toc a.is-on::after{transform:scaleX(1)}
.art{display:grid;gap:14px;align-content:start;padding-block:clamp(30px,3.6vw,46px);border-top:1px solid var(--line)}
.art:first-child{padding-top:0;border-top:0}
.art__n{font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:var(--foil-text)}
.art h2{font-size:var(--t-l);line-height:1.15;letter-spacing:.03em}
.art h3{margin-top:10px}
.art p,.art li{color:var(--ink-2);max-width:64ch;text-wrap:pretty}
.art strong{font-weight:700;color:var(--ink)}
.art ul{display:grid;gap:8px;margin:0;padding-left:1.15em}
.art li::marker{color:var(--foil)}
.art .facts{margin-top:4px}
/* garanzie: blocchi grandi con il numero romano in oro, come i passaggi di Vendi */
.art--lg{grid-template-columns:minmax(0,1fr);column-gap:24px}
.art--lg .art__n{display:flex;align-items:center;gap:14px;font-size:1.3rem;line-height:1;letter-spacing:.02em;color:var(--foil)}
.art--lg .art__n::after{content:"";width:48px;height:1px;background:var(--gold-fade)}
.art--lg h2{font-size:var(--t-xl);line-height:1.02;letter-spacing:.01em}
@media (min-width:600px){.art--lg{grid-template-columns:72px minmax(0,1fr)}.art--lg>*{grid-column:2}.art--lg>.art__n{display:block;grid-column:1;grid-row:1/span 2;padding-top:.3em;font-size:1.9rem;line-height:.9;letter-spacing:0}.art--lg .art__n::after{display:none}}
@media (min-width:1000px){
  .doc__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(48px,6vw,104px);align-items:start}
  .toc{position:sticky;top:calc(66px + env(safe-area-inset-top,0px) + 34px)}
}
/* tabelle del documento (finalita' e basi giuridiche, memoria del browser): righe a filo, niente griglia */
.tbl{display:grid;margin-top:6px;border-top:1px solid var(--line)}
.tbl>div{display:grid;gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:var(--t-s);color:var(--ink-2)}
.tbl dt{font-weight:700;color:var(--ink)}
.tbl dt code{font-family:inherit;font-weight:700;letter-spacing:.02em}
.tbl__note{font-weight:400;color:var(--ink-2)}
.tbl dd{min-width:0;overflow-wrap:anywhere}
@media (min-width:600px){.tbl>div{grid-template-columns:minmax(0,13rem) minmax(0,1fr)}}

/* scala dello stato: cinque gradi, cinque tacche come la minuteria; si accendono in sequenza */
.scale{list-style:none;padding:0;margin-top:6px;border-top:1px solid var(--line)}
.scale li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.scale li:last-child{border-bottom:0;padding-bottom:0}
.scale b{color:var(--ink);font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-m);letter-spacing:.04em}
.scale__m{display:flex;gap:5px}
.scale__m i{width:18px;height:3px;border-radius:2px;background:var(--line);transform-origin:0 50%}
.scale__m i.on{background:var(--foil)}
.scale li>span:last-child{grid-column:1/-1;color:var(--ink-2);font-size:var(--t-s)}
@media (min-width:720px){.scale li{grid-template-columns:11rem 120px minmax(0,1fr)}.scale li>span:last-child{grid-column:auto}}

/* domande frequenti: <details>, si aprono morbide dove il browser lo sa fare */
.faq{margin-top:10px;border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line);interpolate-size:allow-keywords}
.qa summary{display:block;list-style:none;cursor:pointer;transition:color .3s}
/* la griglia sta in uno span interno: Safari non impagina <summary> come griglia */
.qa__q{display:grid;grid-template-columns:minmax(0,1fr) 30px;gap:20px;align-items:center;min-height:68px;padding:16px 0;font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-m);line-height:1.25;letter-spacing:.04em}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--foil-text)}
.qa summary:focus-visible{outline-offset:4px}
.qa__i{position:relative;width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;transition:border-color .3s,background-color .3s}
.qa__i::before,.qa__i::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.2px;margin:-.6px 0 0 -5px;background:var(--ink);transition:transform .5s var(--ease-out),background-color .3s}
.qa__i::after{transform:rotate(90deg)}
.qa[open] .qa__i{border-color:var(--ink);background:var(--ink)}
.qa[open] .qa__i::before,.qa[open] .qa__i::after{background:#fff}
.qa[open] .qa__i::after{transform:rotate(0)}
.qa__a{display:grid;gap:10px;padding:0 50px 26px 0;color:var(--ink-2);max-width:68ch}
@supports selector(::details-content){
  .qa::details-content{height:0;overflow:clip}
  .qa[open]::details-content{height:auto}
  @media (prefers-reduced-motion:no-preference){.qa::details-content{transition:height .55s var(--ease-out),content-visibility .55s allow-discrete}}
}

/* contatti: lo showroom (mappa illustrativa finche' l'indirizzo non e' pubblico), poi dati societari e rimandi */
.visit__copy>h2.eyebrow{margin-top:18px}
.visit__copy>.facts{margin-top:-8px}
.where__grid,.ident__grid{display:grid;gap:44px}
.where__copy{display:grid;gap:20px;align-content:center}
.where__copy p{max-width:34rem;text-wrap:pretty}
.where__copy p:not(.eyebrow){color:var(--ink-2)}
.where__copy .where__addr{color:var(--ink);font-size:var(--t-l);line-height:1.35}
.where__img{margin:8px 0 0;overflow:hidden;background:var(--mist)}
.where__img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.map{position:relative;margin:0;aspect-ratio:4/3;background:var(--mist);overflow:hidden}
/* bordi sfumati nel fondo: un'illustrazione, non una cartina da consultare */
.map::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 72% 70% at 54% 50%,rgba(244,244,242,0) 55%,var(--mist) 100%)}
.map svg{width:100%;height:100%}
.map__road{fill:none;stroke:#fff;stroke-linecap:round}
.map__road--s{stroke:rgba(255,255,255,.75)}
.map__river{fill:none;stroke:#e6e4dd;stroke-linecap:round}
.map__park{fill:#ecebe5}
.map__disc{fill:#fff;stroke:var(--foil);stroke-width:1.2}
.map__ring{fill:none;stroke:var(--foil);stroke-width:1.2;transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.map__lbl{font-family:var(--title);font-weight:900;font-size:13px;letter-spacing:.32em;text-transform:uppercase;fill:var(--ink)}
.map figcaption{position:absolute;z-index:1;left:16px;bottom:14px;right:16px;font-size:var(--t-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .map__ring{animation:mapPing 3.4s var(--ease-out) infinite}
  .map__ring--2{animation-delay:1.7s}
}
@keyframes mapPing{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.4)}}
.ident{background:var(--mist)}
.ident__col{display:grid;gap:14px;align-content:start}
.ident__col>.eyebrow+h2{margin-top:0}
.ident__col>h2{margin-bottom:8px}
.ident__col>.facts{margin-top:0}
.ident .facts{border-top-color:rgba(25,24,22,.16)}
.ident .facts div{border-bottom-color:rgba(25,24,22,.16)}
.ident .sample{border-color:#8c877f}
.links{list-style:none;padding:0;margin:0;border-top:1px solid rgba(25,24,22,.16)}
.links a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(25,24,22,.16);text-decoration:none}
.links__t{font-family:var(--title);font-weight:900;text-transform:uppercase;font-size:var(--t-m);letter-spacing:.04em;line-height:1.2;transition:color .3s,transform .5s var(--ease-out)}
.links__d{grid-column:1;font-size:var(--t-s);color:var(--ink-2)}
.links__go{grid-column:2;grid-row:1/span 2;font-size:1.5rem;line-height:1;color:var(--foil);transition:transform .45s var(--ease-out)}
.links a:hover .links__t{color:var(--foil-text)}
.links a:hover .links__go{transform:translateX(8px)}
@media (min-width:900px){
  .where__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,7vw,110px)}
  .ident__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,110px);align-items:start}
}

/* modulo di recesso tipo: un foglio da copiare, con i campi da riempire */
.recess{display:grid;gap:16px;margin-top:10px;padding:26px 22px 28px;background:var(--mist)}
.recess h3{font-size:var(--t-s);letter-spacing:.2em}
.recess__txt{display:grid;gap:10px;font-size:var(--t-s);line-height:1.7;color:var(--ink)}
.recess__txt p{color:var(--ink);max-width:none}
.recess__f{display:inline-block;min-width:9em;border-bottom:1px dotted var(--line-strong);color:var(--ink-2)}
.recess .btn{justify-self:start;min-height:46px;padding:0 1.5rem}
@media (min-width:720px){.recess{padding:34px 36px 36px}}

/* chiusura scura: ultima domanda prima di "Continua" */
.ask{background:var(--night);color:#fff}
.ask__in{display:grid;gap:22px;justify-items:start}
.ask__in>.eyebrow{justify-self:stretch}
.ask h2{max-width:16ch}
.ask p:not(.eyebrow){color:rgba(255,255,255,.76);max-width:34rem;text-wrap:pretty}
.ask .cta-row{margin-top:8px;justify-self:stretch}
.ask .ask__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-top:-6px;color:#fff}
.ask__k{font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.32em;text-transform:uppercase;color:#d9bf86}
@media (min-width:900px){.ask__in{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;column-gap:clamp(48px,7vw,110px)}.ask__in>*{grid-column:1}.ask .cta-row{grid-column:2;grid-row:1/span 4;justify-self:end;align-self:end;flex-direction:column;align-items:stretch;min-width:min(100%,300px);margin-top:0}}
/* chiusura della home: la domanda su due righe (Heavy, poi Thin) a tutta larghezza, i pulsanti accanto al testo */
.ask--wide h2{max-width:none}
.ask--wide h2 .lt{display:block}
@media (min-width:900px){.ask--wide .ask__in>.eyebrow,.ask--wide h2{grid-column:1/-1}.ask--wide .cta-row{grid-row:3/span 2}}

/* 404: un quadrante fermo alle 4:04 */
.e404__grid{display:grid;gap:28px;align-items:center}
.e404__dial{width:min(54vw,220px);margin:0 auto}
.e404__dial svg{width:100%;height:auto;overflow:visible}
.e404__tk{fill:none;stroke:var(--foil)}
.e404__hand{stroke:url(#e404g) var(--foil);stroke-linecap:round}
.e404__h{stroke-width:7;transform:rotate(122deg)}
.e404__m{stroke-width:4.5;transform:rotate(24deg)}
.e404__cap{fill:var(--foil);stroke:var(--paper);stroke-width:3}
.e404__time{margin-top:14px;text-align:center;font-family:var(--title);font-weight:900;font-size:var(--t-xs);letter-spacing:.32em;padding-left:.32em;text-transform:uppercase;color:var(--ink-2)}
.e404__copy{display:grid;gap:22px;align-content:center}
.e404__more{font-size:var(--t-s);color:var(--ink-2)}
.e404__more a{color:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .e404__h{animation:e404H 2.2s cubic-bezier(.65,0,.25,1) .25s both}
  .e404__m{animation:e404M 2.2s cubic-bezier(.65,0,.25,1) .25s both}
}
@keyframes e404H{0%{transform:rotate(-55deg)}72%{transform:rotate(124deg)}84%{transform:rotate(121deg)}100%{transform:rotate(122deg)}}
@keyframes e404M{0%{transform:rotate(60deg)}72%{transform:rotate(388deg)}80%{transform:rotate(381deg)}88%{transform:rotate(386deg)}100%{transform:rotate(384deg)}}
@media (min-width:900px){
  .e404__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(48px,7vw,110px)}
  .e404__dial{width:min(100%,420px)}
}

/* ---------- movimento: rivelazioni allo scorrimento, parallasse della hero, micro-interazioni ----------
   Le rivelazioni valgono solo con html.mo, che site.js aggiunge quando c'e' IntersectionObserver e non e' chiesto
   "riduci movimento": senza JS, con un errore o con il movimento ridotto tutto e' visibile e fermo.
   site.js nasconde solo cio' che all'avvio sta sotto il primo schermo (niente attese sul contenuto visibile);
   si muovono solo opacity, transform e clip-path, quindi l'impaginazione non salta (CLS ~0). */
html.mo .rv{opacity:0;transform:translateY(26px)}
html.mo .rv.in{opacity:1;transform:none;transition:opacity .9s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s)}
/* titoli: le parole salgono da dietro una maschera; il ritaglio tocca solo il bordo in basso (accenti e virgole liberi) */
.sw{display:inline-block;vertical-align:top}
.sw>span{display:inline-block}
html.mo .rv-t .sw{clip-path:inset(-.4em -.3em -.16em -.3em)}
html.mo .rv-t .sw>span{transform:translateY(125%)}
html.mo .rv-t.in .sw>span{transform:none;transition:transform 1.05s var(--ease-out) calc(var(--d,0s) + var(--i,0) * 55ms)}
html.mo .rv-t.done .sw{clip-path:none}
/* piede della pagina: solo dissolvenza, i link non si spostano sotto il puntatore */
html.mo .ftr .rv{transform:none}
/* eyebrow: la scritta compare e il filo d'oro si traccia */
html.mo .eyebrow.rv{transform:none}
html.mo .eyebrow.rv::after{transform:scaleX(0)}
html.mo .eyebrow.rv.in::after{transform:scaleX(1);transition:transform 1.2s var(--ease-out) calc(var(--d,0s) + .25s)}
/* foto: una finestra che si apre mentre la foto rientra nella cornice */
html.mo .rv-i{overflow:hidden;clip-path:inset(9% 7% 9% 7%)}
html.mo .rv-i img{transform:scale(1.14)}
html.mo .rv-i.in{clip-path:inset(0 0 0 0);transition:clip-path 1.3s var(--ease-out) var(--d,0s)}
html.mo .rv-i.in img{transform:none;transition:transform 1.7s var(--ease-out) var(--d,0s)}
/* schede: salgono in sequenza; il prezzo arriva per ultimo */
html.mo .card.rv .card__price{opacity:0}
html.mo .card.rv.in .card__price{opacity:1;transition:opacity .8s ease calc(var(--d,0s) + .45s)}
/* numeri romani dei passaggi: entrano da sinistra */
html.mo .steps li.rv .steps__n{opacity:0;transform:translateX(-14px)}
html.mo .steps li.rv.in .steps__n{opacity:1;transform:none;transition:opacity .8s ease calc(var(--d,0s) + .2s),transform 1s var(--ease-out) calc(var(--d,0s) + .2s)}

/* titoli delle colonne di "Come funziona": il filo d'oro si traccia come quello delle eyebrow */
html.mo .how__h.rv::after{transform:scaleX(0)}
html.mo .how__h.rv.in::after{transform:scaleX(1);transition:transform 1.2s var(--ease-out) calc(var(--d,0s) + .3s)}

/* hero: la foto scorre piu' lenta della pagina (scroll-driven dove c'e', altrimenti site.js) */
@keyframes heroDrift{to{transform:translate3d(0,32%,0) scale(1.06)}}
@supports (animation-timeline:view()){
  html.mo .hero{view-timeline:--hero block}
  html.mo .hero__media{animation:heroDrift linear both;animation-timeline:--hero;animation-range:exit 0% exit 100%}
}

/* pulsanti: il pieno ha un riflesso che passa, il filo si riempie da sinistra; con il mouse seguono un poco il puntatore */
.btn::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;background:var(--ink);transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--ease-out)}
.btn--solid::before{display:none}
.btn--solid::after{content:"";position:absolute;top:0;bottom:0;left:0;width:60%;z-index:-1;background:linear-gradient(105deg,transparent 0%,rgba(217,191,134,.38) 50%,transparent 100%);transform:translateX(-120%)}
@media (hover:hover){
  .btn--line:hover{color:#fff}
  .btn--line:hover::before{transform:scaleX(1);transform-origin:0 50%}
  .on-dark .btn--line::before,.hdr:not(.is-solid) .btn--line::before{background:#fff}
  .on-dark .btn--line:hover,.hdr:not(.is-solid) .nav .btn--line:hover{color:var(--ink);border-color:#fff}
  .btn--solid:hover::after{animation:sheen .9s var(--ease-out)}
  .card__btn:hover .card__brand{color:var(--foil-text)}
  .card__btn:hover .card__img::after{transform:scaleX(1)}
  .ftr__nav a:hover{transform:translateX(4px)}
}
@keyframes sheen{to{transform:translateX(220%)}}
.btn.is-mag{transition:background-color .25s,border-color .25s,color .25s,transform .2s linear}
/* scheda: un filo d'oro sotto la foto al passaggio del mouse */
.card__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-rule);transform:scaleX(0);transition:transform .7s var(--ease-out)}
.card__brand{transition:color .3s}
.ftr__nav a{transition:color .25s,transform .35s var(--ease-out)}

/* pagina orologio: le icone delle garanzie si tracciano, le tacche dello stato si accendono, la scheda sale */
html.mo .pp__trust li.rv{transform:translateY(14px)}
html.mo .pp__trust li.rv.in{transform:none}
html.mo .pp__trust li.rv .pp__ic>*{stroke-dasharray:1 1;stroke-dashoffset:1}
html.mo .pp__trust li.rv.in .pp__ic>*{stroke-dashoffset:0;transition:stroke-dashoffset 1.3s var(--ease) calc(var(--d,0s) + .15s)}
html.mo .specs.rv .stato__m i{transform:scaleX(0)}
html.mo .specs.rv.in .stato__m i{transform:none;transition:transform .7s var(--ease-out) calc(var(--d,0s) + .35s + var(--k,0) * 90ms)}

/* fiducia: le icone delle promesse si tracciano, le tacche della scala si accendono una dopo l'altra, la mappa rientra */
html.mo .promise li.rv .promise__ic>*{stroke-dasharray:1 1;stroke-dashoffset:1}
html.mo .promise li.rv.in .promise__ic>*{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease) calc(var(--d,0s) + .15s)}
html.mo .scale li.rv .scale__m i{transform:scaleX(0)}
html.mo .scale li.rv.in .scale__m i{transform:none;transition:transform .7s var(--ease-out) calc(var(--d,0s) + .25s + var(--k,0) * 90ms)}
html.mo .rv-i .map__art{transform:scale(1.12)}
html.mo .rv-i.in .map__art{transform:none;transition:transform 1.7s var(--ease-out) var(--d,0s)}
.map__art{transform-origin:50% 50%}

@media (prefers-reduced-motion:reduce){
  html.mo .rv,html.mo .rv-t .sw>span,html.mo .rv-i,html.mo .rv-i img,html.mo .rv-i .map__art,html.mo .scale__m i,html.mo .promise__ic>*,html.mo .pp__ic>*,html.mo .stato__m i{opacity:1;transform:none;clip-path:none;stroke-dashoffset:0}
  .hero__media{animation:none!important;transform:none!important}
  .hero__video{display:none}
}
@media print{html.mo .rv,html.mo .rv-t .sw>span,html.mo .rv-i,html.mo .rv-i img,html.mo .card.rv .card__price{opacity:1!important;transform:none!important;clip-path:none!important}}

/* ---------- il negozio al buio: collezione e pagine orologio ----------
   Le foto sono scattate su fondo nero, cosi' come sono: la pagina diventa notte e le foto ci si fondono.
   Lo stesso vale per una sezione con .th-dark (in home "In collezione ora", con data-hdr="dark" per l'intestazione).
   Si cambiano i colori di base (le regole sopra usano le variabili) e i pochi bianchi scritti a mano. Il sipario che
   porta qui ha gia' questi colori (.curtain.is-dk) e
   quello che riporta alle pagine chiare torna bianco (.curtain.is-lt): l'inchiostro si allarga dal punto toccato. */
:root:is([data-page="collezione"],[data-page="product"]),.curtain.is-dk,.th-dark{
  color-scheme:dark;
  --paper:#0b0a09;
  --mist:#171512;
  --ink:#ece6da;
  --ink-2:#a8a094;           /* 7,6:1 sul fondo */
  --foil:#c9a865;
  --foil-text:#d9bf86;
  --foil-soft:rgba(201,168,101,.45);
  --line:rgba(236,230,218,.14);
  --line-strong:#77716a;     /* 4,1:1 sul fondo */
  --alert:#e58a6f;
  --gold-rule:linear-gradient(90deg,transparent,var(--foil) 20%,var(--foil) 80%,transparent);
  --gold-fade:linear-gradient(90deg,var(--foil),rgba(201,168,101,0));
}
.curtain.is-lt{
  color-scheme:light;
  --paper:#ffffff;
  --mist:#f4f4f2;
  --ink:#191816;
  --ink-2:#5f5b55;
  --foil:#9c7c45;
  --foil-text:#85683a;
  --foil-soft:rgba(156,124,69,.45);
  --line:rgba(25,24,22,.12);
  --line-strong:#8c877f;
  --alert:#b5462b;
  --gold-rule:linear-gradient(90deg,transparent,var(--foil) 20%,var(--foil) 80%,transparent);
  --gold-fade:linear-gradient(90deg,var(--foil),rgba(156,124,69,0));
}
:root:is([data-page="collezione"],[data-page="product"]){background:var(--paper)}
/* home: "In collezione ora" e' un pezzo di negozio, scuro tra la foto della hero e "Come funziona" chiaro */
.th-dark{background:var(--paper);color:var(--ink)}
/* home: "Disponibili ora" sullo stesso nero della hero, del certificato e del metodo (il nero caldo resta al negozio) */
.rail.th-dark{background:var(--night)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) ::selection{background:rgba(201,168,101,.38);color:#fff}
/* intestazione: vetro nero, logo nell'oro chiaro (anche nel menu e nel piede) */
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .hdr.is-solid{background:rgba(11,10,9,.84);color:var(--ink)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) :is(.brand,.ftr__brand) use{fill:url(#foilLight)}
/* pulsanti: il pieno e' avorio con la scritta nera, il filo e' chiaro */
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .btn--solid{color:var(--paper)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .btn--solid:hover{background:#fff}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .btn--line{border-color:rgba(236,230,218,.32)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .btn--line:hover{border-color:var(--ink)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) :is(.float,.toast,.skip){color:var(--paper)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .float{box-shadow:0 10px 30px rgba(0,0,0,.55)}
/* filtri: il filtro scelto e' una pillola avorio */
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .chip[aria-pressed="true"]{color:var(--paper)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .chip[aria-pressed="true"] .n{color:rgba(11,10,9,.66)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .chip--only[aria-pressed="true"]{background:transparent;color:var(--ink)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .chip--only[aria-pressed="true"] i{background:rgba(201,168,101,.16)}
/* etichette e pulsanti sopra le foto: vetro nero invece che bianco */
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) :is(.badge,.gal__n){background:rgba(11,10,9,.74);border-color:rgba(236,230,218,.18)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) :is(.gal__zoom,.gal__arr,.lb__x,.lb__nav){background:rgba(11,10,9,.72);border-color:rgba(236,230,218,.22)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) :is(.gal__zoom,.gal__arr,.lb__x,.lb__nav):hover{border-color:var(--ink)}
/* foto a tutto schermo: sul nero, come sono state scattate */
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .lb{background:var(--paper)}
/* telefono: la barra in basso della scheda */
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .pbar{background:rgba(24,22,19,.92);border-color:rgba(236,230,218,.14);box-shadow:0 12px 32px rgba(0,0,0,.5)}
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .pbar__wa{border-color:rgba(236,230,218,.32)}
/* le schede si accendono appena al passaggio: un filo d'oro sotto la foto */
:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .card__img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold-rule);transform:scaleX(0);transition:transform .7s var(--ease-out)}
@media (hover:hover){:is(:root[data-page="collezione"],:root[data-page="product"],.th-dark) .card__btn:hover .card__img::after{transform:none}}
/* arrivo con il sipario in Collezione: la griglia non sale in blocco, le schede del primo schermo salgono una dopo l'altra
   (site.js: .ci e --ci sulle schede visibili) mentre l'inchiostro si ritira */
html.pg-in #grid{animation:none}
html.pg-in #grid .card.ci{animation:rise .9s var(--ease-out) calc(.12s + var(--ci,0) * 70ms) both}
/* arrivo con il sipario su una pagina orologio: la foto compare al suo posto mentre il quadrante si allarga */
html.pg-in .pp__img .gal__stage{animation:ppPhoto .8s var(--ease-out) .06s both}
@keyframes ppPhoto{from{opacity:0;transform:scale(.97)}}