/* ===================================================================
   Font
   =================================================================== */

/* Helvetica Light: il font di tutti i testi del sito.
   Helvetica è un font commerciale (Monotype/Linotype): non si può scaricare
   né ospitare sul sito senza licenza. Qui si usa la copia già installata sul
   dispositivo (di serie su Mac, iPhone e iPad).
   Con la licenza webfont: copiare il file in fonts/ e aggiungere in coda a src
     , url('../fonts/helvetica-light.woff2') format('woff2')
   così Helvetica Light arriva a tutti i visitatori. Dove manca, subentra
   Inter Light (sotto), un neo-grotesco affine già ospitato sul sito. */
@font-face{
  font-family:'Helvetica Light'; font-style:normal; font-weight:300; font-display:swap;
  src:local('Helvetica Light'), local('Helvetica-Light'),
      local('Helvetica Neue Light'), local('HelveticaNeue-Light'),
      local('Helvetica LT Std Light'), local('HelveticaLTStd-Light'),
      local('Helvetica Neue LT Std 45 Light'), local('HelveticaNeueLTStd-Lt'),
      local('Helvetica Now Text Light'), local('HelveticaNowText-Light');
}
/* Inter (SIL Open Font License, da Google Fonts): file variabile 100–900,
   solo alfabeto latino. Riserva di Helvetica Light e loghi di esempio. */
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces (SIL Open Font License): solo per i loghi di esempio disegnati
   nell'anteprima dell'incisione (js/engrave.js), non per i testi del sito. */
@font-face{
  font-family:'Fraunces'; font-style:normal; font-weight:480 560; font-display:swap;
  src:url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Fraunces'; font-style:italic; font-weight:420; font-display:swap;
  src:url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===================================================================
   Wood Cellar — sistema visivo
   Una sola pagina continua e luminosa: fondo bianco puro (lo stesso
   bianco in cui finisce il video d'apertura), testi color inchiostro
   caldo, un accento bronzo per le etichette.
   =================================================================== */

:root{
  --bg:#FFFFFF;
  --bg-rgb:255 255 255;
  --bg-warm:#F4F0E4;      /* fasce colorate a tutta larghezza: vetrina, "La tua configurazione", footer */
  --ink:#1C1712;          /* titoli, voci del menu, bottoni pieni */
  --ink-rgb:28 23 18;
  --white:#FFFFFF;        /* testo sui bottoni pieni */
  --text:rgb(28 23 18 / 0.76);
  --text-soft:rgb(28 23 18 / 0.64);   /* 5,3:1 sul bianco: leggibile anche nelle etichette piccole */
  --line:rgb(28 23 18 / 0.14);
  --accent:#8A6A48;       /* bronzo, come il segno dell'incisione: 4,9:1 sul bianco */
  --error:#A63D25;

  --sans:'Helvetica Light', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Type scale — display, titolo di sezione, sottotitolo, corpo, etichette */
  --fs-display:clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
  --fs-h2:clamp(2rem, 1.25rem + 2.8vw, 3.5rem);
  --fs-h3:clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem);
  --fs-subtitle:clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
  --fs-body:clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem);
  --fs-small:clamp(0.8rem, 0.78rem + 0.1vw, 0.86rem);
  --fs-label:0.72rem;
  --track-label:0.32em;

  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-out:cubic-bezier(.22,1,.36,1); /* entrate dopo il video: rapide all'inizio, lunghe e morbide alla fine */
  --t-micro:200ms;
  --t-editorial:620ms;

  --gutter:clamp(20px,6vw,72px);
  --header-h:104px;
  color-scheme:light;
}
@media (max-width: 860px){
  :root{--header-h:80px;}
}

*,*::before,*::after{box-sizing:border-box;}
html{
  background:var(--bg);
  scroll-behavior:smooth;
  font-synthesis:none;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:var(--fs-body);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; display:block;}
button,input,select,textarea{font:inherit; color:inherit;}

h1,h2,h3{
  font-family:var(--sans);
  font-weight:300;
  line-height:1.06;
  margin:0;
  letter-spacing:-0.022em;
  color:var(--ink);
  text-wrap:balance;
}
h3{font-size:var(--fs-h3); line-height:1.2; letter-spacing:-0.01em;}

p{margin:0; max-width:65ch;}

a{color:inherit;}

::selection{background:rgb(205 185 154 / 0.45); color:var(--ink);}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* a sinistra anche la spaziatura dell'ultima lettera: il testo resta centrato */
  padding:1.25em 2.6em 1.25em calc(2.6em + 0.24em);
  min-height:50px;
  border-radius:0;
  font-family:var(--sans);
  font-size:0.76rem;
  font-weight:300;
  letter-spacing:0.24em;
  line-height:1.2;
  text-transform:uppercase;
  text-align:center;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.btn--primary{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--white);
}
.btn--primary:hover{background:transparent; color:var(--ink);}
.btn--ghost,.btn--ghost-light{
  background:transparent;
  color:var(--ink);
  border-color:rgb(28 23 18 / 0.45);
}
.btn--ghost:hover,.btn--ghost-light:hover{background:rgb(28 23 18 / 0.04); border-color:var(--ink);}

:focus-visible{
  outline:1px solid var(--ink);
  outline-offset:4px;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.eyebrow{
  font-size:var(--fs-label);
  letter-spacing:var(--track-label);
  line-height:1.5;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:1.8em;
}
.eyebrow--light{color:var(--accent);}

.lede{
  font-size:var(--fs-subtitle);
  line-height:1.65;
  max-width:46ch;
  color:var(--text);
  margin-top:1.3em;
}
.lede--light{color:var(--text);}

/* Dal menu ogni sezione arriva con il primo testo sotto la barra fissa, non dietro:
   il margine copre solo quanto manca al padding superiore della sezione. */
.engrave,.config,.paths,.showcase,.contact,.site-footer{
  scroll-margin-top:max(0px, calc(var(--header-h) + 24px - var(--pad-top, 0px)));
}
.config__step{scroll-margin-top:calc(var(--header-h) + 24px);}

/* Etichette centrate: la spaziatura dell'ultima lettera va compensata. */
.engrave__head .eyebrow,.config__head .eyebrow,.contact__head .eyebrow,.legal__head .eyebrow,
.logo-picker__legend,.size-picker .config__label{padding-left:var(--track-label);}
/* Sono paragrafi, più stretti della testata (max 65ch del corpo piccolo):
   senza margini automatici resterebbero a sinistra. */
.engrave__head .eyebrow,.config__head .eyebrow,.contact__head .eyebrow,.legal__head .eyebrow{margin-left:auto; margin-right:auto;}

/* ---------- reveal on scroll ---------- */
.reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--t-editorial) var(--ease), transform var(--t-editorial) var(--ease);
}
.reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}
/* senza JavaScript nessuno aggiunge is-visible: i contenuti restano visibili */
html:not(.js) .reveal{opacity:1; transform:none;}

/* ===================================================================
   Header — sempre trasparente, logo e voci color inchiostro sul bianco.
   =================================================================== */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 clamp(20px,4vw,56px);
  background:transparent;
  color:var(--ink);
  pointer-events:none; /* la barra trasparente non copre i clic sul contenuto */
}
.site-header > *{pointer-events:auto;}
/* La barra resta trasparente: questo velo ha il colore del fondo, quindi sul
   fondo non si vede; fa solo sfumare testi e foto che scorrono sotto le voci,
   che così restano leggibili. Compare appena si scorre. */
.site-header::before{
  content:''; position:absolute; left:0; right:0; top:0;
  height:calc(100% + 40px);
  background:linear-gradient(180deg, rgb(255 255 255 / 0.96) 0%, rgb(255 255 255 / 0.86) 55%, rgb(255 255 255 / 0) 100%);
  opacity:0; transition:opacity 480ms var(--ease);
  pointer-events:none; z-index:-1;
}
.site-header.is-scrolled::before{opacity:1;}
/* Sulle foto scure della homepage (js/main.js, classe is-on-dark): logo, voci e menu bianchi,
   e al posto del velo chiaro uno scuro, che tiene leggibili le voci sulle parti chiare delle foto. */
.site-header::after{
  content:''; position:absolute; left:0; right:0; top:0;
  height:calc(100% + 40px);
  background:linear-gradient(180deg, rgb(12 9 6 / 0.5) 0%, rgb(12 9 6 / 0.26) 55%, rgb(12 9 6 / 0) 100%);
  opacity:0; transition:opacity 480ms var(--ease);
  pointer-events:none; z-index:-1;
}
.site-header.is-on-dark.is-scrolled::before{opacity:0;}
.site-header.is-on-dark.is-scrolled::after{opacity:1;}
.brand-mark,.site-nav a,.nav-toggle{transition:color 360ms var(--ease);}
.brand-mark__icon{transition:filter 360ms var(--ease);}
.site-header.is-on-dark .brand-mark,
.site-header.is-on-dark .site-nav a,
.site-header.is-on-dark .nav-toggle{color:var(--white); text-shadow:0 1px 14px rgb(0 0 0 / 0.3);}
.site-header.is-on-dark .brand-mark__icon{filter:brightness(0) invert(1);} /* il marchio scuro diventa bianco */
.site-header.is-on-dark :focus-visible{outline-color:var(--white);}
@media (max-width: 860px){
  /* sui telefoni i titoli fissi della struttura stanno subito sotto la barra */
  .site-header::before,.site-header::after{height:calc(100% + 16px);}
}

.brand-mark{
  display:flex; align-items:center; gap:clamp(12px,1.1vw,18px);
  color:var(--ink); text-decoration:none;
}
.brand-mark__icon{
  display:block; width:auto; height:clamp(38px, 1.6vw + 24px, 50px);
}
.brand-mark__name{
  font-size:clamp(1.12rem, 0.86rem + 0.75vw, 1.5rem);
  line-height:1;
  letter-spacing:0.34em;
  margin-right:-0.34em;
  text-transform:uppercase;
}

.site-nav{display:flex; gap:clamp(22px,2.6vw,44px);}
.site-nav a{
  position:relative;
  padding:0.7em 0;
  font-size:0.92rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--ink);
}
.site-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:0.3em; height:1px;
  background:currentColor; transition:right var(--t-editorial) var(--ease);
}
.site-nav a:hover::after,.site-nav a:focus-visible::after{right:0.2em;}

.nav-toggle{
  display:none;
  width:48px; height:48px; margin-right:-10px;
  border:0; background:transparent; cursor:pointer;
  color:var(--ink);
  flex-direction:column; align-items:center; justify-content:center; gap:7px;
}
.nav-toggle__bar{
  width:28px; height:1.5px; background:currentColor;
  transition:transform var(--t-editorial) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1){transform:translateY(4.25px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2){transform:translateY(-4.25px) rotate(-45deg);}

.mobile-nav{
  position:fixed; inset:0; z-index:99;
  background:rgb(255 255 255 / 0.97);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  padding:calc(var(--header-h) + clamp(24px,6vh,56px)) clamp(24px,7vw,56px) 40px;
  overflow-y:auto;
}
.mobile-nav[hidden]{display:none;}
.mobile-nav nav{display:flex; flex-direction:column; gap:clamp(10px,2.4vh,22px);}
.mobile-nav a{
  font-size:clamp(1.7rem, 1.3rem + 2.2vw, 2.6rem);
  line-height:1.2; letter-spacing:-0.015em;
  color:var(--ink); text-decoration:none;
  padding:0.15em 0;
}

@media (max-width: 1120px){
  .site-nav{display:none;}
  .nav-toggle{display:flex;}
}

/* ===================================================================
   Apertura — il video a tutto schermo (js/main.js)
   All'apertura si vede solo il video. Quando è diventato tutto bianco
   sfuma nel fondo della pagina, bianco come lui, e partono le animazioni
   della sezione "La struttura". Un gesto (scorrere, un tasto, un clic)
   lo salta. Senza JavaScript, con "riduci movimento" o arrivando da
   un'altra pagina del sito non c'è: la pagina parte dalla homepage.
   Il video parte quando è arrivato per intero; fino ad allora si vede
   uno schermo bianco con il logo che si riempie (.intro__loader qui
   sotto). La locandina (primo fotogramma) resta come fondo, per quando
   il bianco si dissolve sul video.
   =================================================================== */
.intro{
  position:fixed; inset:0; z-index:200;
  display:none;
  /* primo fotogramma del video: sta sotto il caricamento e sotto il video */
  background:#17130D 50% 50% / cover no-repeat;
  transition:opacity var(--intro-fade, 400ms) ease;
}
/* La locandina si aggiunge (classe has-poster, da js/main.js) solo a video arrivato, così non
   compete con lui per la banda: serve soltanto nell'istante in cui il bianco si dissolve. */
.intro.has-poster{background-image:url('../assets/img/intro-poster.webp');}
@media (orientation: portrait){
  .intro.has-poster{background-image:url('../assets/img/intro-poster-portrait.webp');}
}
.intro-pending .intro,.intro.is-leaving{display:block;}
.intro.is-leaving{opacity:0; pointer-events:none;}
/* Caricamento (js/main.js): schermo bianco con il logo grande al centro. Il logo parte vuoto (un grigio
   chiarissimo) e si riempie di nero dal basso verso l'alto, da 0 a 100%, man mano che il video arriva; a 100%
   il video è davvero pronto a partire e il bianco si dissolve sul suo primo fotogramma (classe is-ready).
   --p è il livello di riempimento, da 0 a 1. Il logo è incorporato qui (webp nero, ritagliato sul disegno:
   0% e 100% coincidono con i suoi bordi) per esserci già al primo disegno della pagina, senza attendere
   una richiesta in più. */
.intro__loader{
  --logo:url("data:image/webp;base64,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");
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  transition:opacity 520ms ease;
}
.intro__loader.is-ready{opacity:0; pointer-events:none;}
.intro__logo{position:relative; width:clamp(240px, min(76vw, 60vh), 520px);}
.intro__logo::before{content:''; display:block; padding-top:103.074%;}
.intro__logo-ghost{position:absolute; inset:0; background:var(--logo) 50% 50% / 100% 100% no-repeat; opacity:0.1;}
.intro__logo-fill{position:absolute; left:0; right:0; bottom:0; height:calc(var(--p, 0) * 100%); overflow:hidden;}
/* Chiusura anticipata (video che non può partire): il logo finisce di riempirsi con una transizione a
   tempo (FINISH_FILL in js/main.js), che non dipende dai fotogrammi che il browser riesce a disegnare. */
.intro__loader.is-finishing .intro__logo-fill{transition:height 320ms cubic-bezier(0.25, 0.8, 0.25, 1);}
.intro__logo-fill::before{content:''; position:absolute; left:0; bottom:0; width:100%; height:0; padding-top:103.074%; background:var(--logo) 50% 100% / 100% 100% no-repeat;}
.intro__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
}
/* Durante l'apertura la pagina non scorre: il primo gesto salta il video. */
html.intro-pending{overflow:hidden;}

/* --- In attesa del bianco la barra aspetta sotto il video; titoli e cassetta della struttura
   aspettano la loro entrata (struct-pending): alla fine del video oppure, senza video, quando
   la sezione entra nello schermo (js/main.js). --- */
.intro-pending .site-header{opacity:0;}
.struct-pending .structure__intro .eyebrow,
.struct-pending .structure__intro h2,
.struct-pending .structure__intro .lede,
.struct-pending .structure__cue{opacity:0;}
.struct-pending .explode__canvas,.struct-pending .explode__lines{opacity:0 !important;}

/* --- Entrata della struttura: l'etichetta si stringe e mette a fuoco, il titolo sale riga
   per riga da dietro una maschera, il testo affiora, la cassetta (js/exploded.js) ruota e si
   ricompone; per ultima la linea che invita a scorrere. --- */
.struct-reveal .structure__intro .eyebrow{animation:wc-track-in 1500ms var(--ease-out) 120ms both;}
.struct-reveal .structure__title .line > span{animation:wc-line-up 1300ms var(--ease-out) calc(280ms + var(--i, 0) * 130ms) both;}
.struct-reveal .structure__intro .lede{animation:wc-rise 1300ms var(--ease-out) 720ms both;}
.struct-reveal .structure__cue-line{animation:wc-fade 1200ms ease 2100ms both;}
.struct-reveal.js .structure.is-ready:not(.is-fallback) .explode__canvas{transition:opacity 1500ms var(--ease-out) 60ms;}

/* --- Apertura della pagina (dopo il video o subito): la homepage entra con lo stesso
   linguaggio, la barra in alto arriva per ultima. --- */
.intro-reveal .site-header{animation:wc-fade-down 1100ms var(--ease-out) 1050ms both;}
.intro-reveal .hero__media{animation:wc-fade 1400ms ease both;}
.intro-reveal .hero__title .line > span{animation:wc-line-up 1300ms var(--ease-out) calc(260ms + var(--i, 0) * 130ms) both;}
.intro-reveal .hero__lede{animation:wc-rise 1300ms var(--ease-out) 700ms both;}
.intro-reveal .hero__controls,.intro-reveal .hero__cue{animation:wc-fade 1200ms ease 1500ms both;}

@keyframes wc-track-in{
  from{opacity:0; letter-spacing:1em; filter:blur(6px);}
  to{opacity:1; letter-spacing:var(--track-label); filter:none;}
}
@keyframes wc-line-up{
  from{transform:translateY(106%);}
  to{transform:translateY(0);}
}
@keyframes wc-rise{
  from{opacity:0; transform:translateY(16px); filter:blur(5px);}
  to{opacity:1; transform:none; filter:none;}
}
@keyframes wc-fade-down{
  from{opacity:0; transform:translateY(-12px);}
  to{opacity:1; transform:none;}
}
@keyframes wc-fade{from{opacity:0;} to{opacity:1;}}
@media (prefers-reduced-motion: reduce){
  .struct-reveal .structure__intro .eyebrow,.struct-reveal .structure__title .line > span,
  .struct-reveal .structure__intro .lede,.struct-reveal .structure__cue-line,.intro-reveal .site-header,
  .intro-reveal .hero__media,.intro-reveal .hero__title .line > span,.intro-reveal .hero__lede,
  .intro-reveal .hero__controls,.intro-reveal .hero__cue{animation:none;}
}

/* ===================================================================
   Homepage — due foto a tutto schermo che si alternano ogni 6 secondi
   (js/hero.js). Sta sopra "La struttura"; dopo il video d'apertura si
   arriva comunque sulla struttura. Foto scure: testi, logo e menu bianchi.
   =================================================================== */
.hero{
  --interval:6s;
  --fade:1600ms;          /* come FADE_MS in js/hero.js */
  position:relative; isolation:isolate;
  height:100vh; height:100svh; min-height:540px;
  overflow:hidden;
  background:#14100B;     /* finché la foto non arriva */
  color:var(--white);
}
.hero__media{position:absolute; inset:0; z-index:-2;}
/* La foto nuova sfuma sopra la precedente, che resta piena sotto finché non è coperta. */
.hero__img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:50% 50%;
  opacity:0;
}
.hero__img.is-current{opacity:1; z-index:2; transition:opacity var(--fade) var(--ease);}
.hero__img.is-prev{opacity:1; z-index:1;}
/* Foto non ancora caricata (data-src, vedi index.html): si vede il fondo scuro, non l'icona
   dell'immagine mancante con il testo alternativo. */
.hero__img:not([src]){visibility:hidden;}
/* Veli leggeri solo dove c'è testo: in alto per barra e titolo, in basso per le linee. */
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgb(12 9 6 / 0.5) 0%, rgb(12 9 6 / 0.22) 30%, rgb(12 9 6 / 0) 54%),
    linear-gradient(0deg, rgb(12 9 6 / 0.34) 0%, rgb(12 9 6 / 0) 22%);
}

/* Titolo e descrizione in alto a sinistra, dove le due foto sono scure (come il titolo della struttura). */
.hero__content{
  position:absolute; z-index:1;
  left:var(--gutter); right:var(--gutter);
  top:calc(var(--header-h) + clamp(16px,5vh,56px));
}
.hero__title{
  font-size:clamp(2.4rem, 1.5rem + 2.9vw, 4.4rem);
  line-height:1.04;
  color:var(--white);
}
/* Ogni riga ha la sua maschera, come nella struttura: all'apertura sale da sotto. */
.hero__title .line{display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em;}
.hero__title .line > span{display:inline-block;}
/* Sugli schermi larghi la descrizione resta a sinistra della cassetta della seconda foto, che
   occupa il centro: --box-left è il suo bordo sinistro con la foto a tutto schermo (cover). */
.hero{--box-left:min(26.6vw, 50vw - 41.6vh);}
.hero__lede{
  margin-top:1.3em;
  max-width:max(250px, min(36ch, calc(var(--box-left) - var(--gutter) - 16px)));
  font-size:clamp(0.98rem, 0.9rem + 0.25vw, 1.12rem); line-height:1.65;
  color:rgb(255 255 255 / 0.88);
  text-wrap:pretty;
}
.hero__title,.hero__lede{text-shadow:0 1px 22px rgb(0 0 0 / 0.32);}
/* Tablet e telefoni: la cassetta riempie il centro, testi in alto sul fogliame scuro, a sinistra
   del collo della bottiglia; il velo in alto è un poco più deciso. */
@media (max-aspect-ratio: 3/2){
  .hero__lede{max-width:min(40ch, 70vw);}
  .hero::after{
    background:
      linear-gradient(180deg, rgb(12 9 6 / 0.6) 0%, rgb(12 9 6 / 0.36) 26%, rgb(12 9 6 / 0) 48%),
      linear-gradient(0deg, rgb(12 9 6 / 0.34) 0%, rgb(12 9 6 / 0) 22%);
  }
}

/* Le due linee del tempo, in basso a sinistra: si riempiono in 6 s e permettono di scegliere la foto. */
.hero__controls{
  position:absolute; z-index:1;
  left:var(--gutter); bottom:calc(clamp(18px,4vh,40px) + env(safe-area-inset-bottom));
  display:flex; gap:12px;
}
html:not(.js) .hero__controls{display:none;}
.hero__dot{
  display:block; width:56px; margin:0; padding:14px 0;
  border:0; background:none; cursor:pointer;
}
.hero__bar{position:relative; display:block; height:1px; overflow:hidden; background:rgb(255 255 255 / 0.32);}
.hero__fill{position:absolute; inset:0; background:var(--white); transform:scaleX(0); transform-origin:left center;}
.hero__dot[aria-current="true"] .hero__fill{
  animation:hero-fill var(--interval) linear forwards;
  animation-play-state:paused;
}
.hero.is-playing .hero__dot[aria-current="true"] .hero__fill{animation-play-state:running;}
@keyframes hero-fill{to{transform:scaleX(1);}}
.hero__dot:hover .hero__bar{background:rgb(255 255 255 / 0.6);}
.hero__dot:focus-visible{outline:1px solid var(--white); outline-offset:2px;}

/* Invito a scorrere: una linea sottile al centro, in basso. */
.hero__cue{
  position:absolute; z-index:1; left:50%; bottom:calc(clamp(18px,4vh,40px) + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  pointer-events:none;
}
.hero__cue-line{
  display:block; width:1px; height:48px;
  background:rgb(255 255 255 / 0.28);
  position:relative; overflow:hidden;
}
.hero__cue-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--white);
  animation:cue 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hero{--fade:900ms;}
  .hero__cue-line::after{animation:none; top:0;}
}
@media (max-width: 640px){
  .hero__cue{display:none;} /* sui telefoni bastano le linee del tempo */
}

/* ===================================================================
   Sezione 1 — Struttura: esploso 3D guidato dallo scroll (js/exploded.js)
   Senza JS o WebGL resta un disegno statico con le tre spiegazioni.
   =================================================================== */
.structure{
  position:relative;
}
.structure__sticky{position:relative;}

.structure__intro{
  padding:calc(var(--header-h) + 40px) var(--gutter) 24px;
  max-width:44ch;
  box-sizing:content-box;
}
.structure__intro h2{font-size:var(--fs-h2);}
/* Ogni riga del titolo ha la sua maschera: all'apertura sale da sotto. Il margine
   in basso fa spazio alle discendenti (g, p) senza cambiare l'interlinea. */
.structure__title .line{display:block; overflow:hidden; padding-bottom:0.14em; margin-bottom:-0.14em;}
.structure__title .line > span{display:inline-block;}

.explode{position:relative;}
/* Senza WebGL resta il disegno a matita: carta resa bianca (structure-fallback-light.webp),
   sfuma in alto e in basso nel fondo della pagina. */
.explode__fallback{
  width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 12%, #000 30%, #000 82%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, transparent 12%, #000 30%, #000 82%, transparent 100%);
}
.explode__canvas,.explode__lines{display:none;}

.explode-labels{
  list-style:none; margin:0;
  padding:28px var(--gutter) 72px;
  display:grid; gap:32px;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.explode-label__index{
  font-size:var(--fs-label); letter-spacing:var(--track-label);
  color:var(--accent);
}
.explode-label__title{
  font-size:var(--fs-h3); color:var(--ink);
  margin:0.5em 0 0.45em;
}
.explode-label__text{
  font-size:0.94rem; line-height:1.6;
  color:var(--text); max-width:34ch;
}

/* Invito a scorrere (solo con le spiegazioni a lato): una linea sottile al centro,
   sparisce al primo scorrimento. */
.structure__cue{
  position:absolute; z-index:3; left:50%; bottom:clamp(18px,3.5vh,34px);
  transform:translateX(-50%);
  display:none;
  pointer-events:none;
  transition:opacity 500ms var(--ease);
}
.js .structure.explode--side .structure__cue{display:block;}
.has-scrolled .structure__cue{opacity:0;}
.structure__cue-line{
  display:block; width:1px; height:48px;
  background:rgb(28 23 18 / 0.16);
  position:relative; overflow:hidden;
}
.structure__cue-line::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--ink);
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{
  0%{top:-100%;} 50%{top:100%;} 50.01%{top:-100%;} 100%{top:-100%;}
}
@media (prefers-reduced-motion: reduce){
  .structure__cue-line::after{animation:none; top:0;}
}

/* --- Modalità 3D --- */
.js .structure:not(.is-fallback) .structure__scrollstage{height:320vh;}
.js .structure:not(.is-fallback) .structure__sticky{
  position:sticky; top:0;
  height:100svh; min-height:540px;
  overflow:hidden;
}
.js .structure:not(.is-fallback) .structure__intro{
  position:absolute; z-index:3;
  left:var(--gutter); top:calc(var(--header-h) + clamp(16px,5vh,56px));
  padding:0; max-width:34ch;
}
.js .structure:not(.is-fallback) .explode{position:absolute; inset:0;}
.js .structure:not(.is-fallback) .explode__fallback{display:none;}
.js .structure:not(.is-fallback) .explode__canvas{
  display:block; position:absolute; inset:0; width:100%; height:100%;
  opacity:0; transition:opacity 700ms var(--ease);
}
.js .structure.is-ready .explode__canvas{opacity:1;}
.js .structure:not(.is-fallback) .explode__lines{
  display:block; position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
.explode__guide{stroke:rgb(28 23 18 / 0.38); stroke-width:1;}
.explode__dot{fill:var(--ink); stroke:rgb(255 255 255 / 0.85); stroke-width:1.5;}
.explode__badge circle{fill:var(--ink); stroke:rgb(255 255 255 / 0.85);}
.explode__badge text{fill:var(--white); font:300 12px var(--sans);}

/* Desktop: spiegazioni a destra, agganciate al componente con una linea sottile. */
.js .structure.explode--side .explode-labels{
  position:absolute; inset:0; z-index:3;
  display:block; padding:0;
  pointer-events:none;
}
.js .structure.explode--side .explode-label{
  position:absolute; left:0; top:0;
  width:var(--label-w, 280px);
  opacity:0;
  will-change:transform, opacity;
}
.js .structure.explode--side .explode-label__title{font-size:clamp(1.2rem, 1rem + 0.5vw, 1.5rem);}

/* Mobile e finestre strette: elenco compatto in basso, numeri sui componenti. */
.js .structure.explode--dock .structure__intro{top:calc(var(--header-h) + 18px); right:var(--gutter); max-width:none;}
.js .structure.explode--dock .structure__intro h2{font-size:clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem);}
.js .structure.explode--dock .structure__intro .lede{font-size:0.9rem; line-height:1.55; margin-top:0.7em;}
.js .structure.explode--dock .explode-labels{
  position:absolute; left:0; right:0; bottom:40px; z-index:3;
  display:flex; flex-direction:column; gap:12px;
  padding:0 var(--gutter);
}
.js .structure.explode--dock .explode-label{
  display:grid; grid-template-columns:32px 1fr; column-gap:8px;
  transition:opacity 240ms var(--ease);
}
.js .structure.explode--dock .explode-label__index{grid-row:span 2; padding-top:0.3em;}
.js .structure.explode--dock .explode-label__title{font-size:1rem; margin:0;}
.js .structure.explode--dock .explode-label__text{font-size:0.82rem; line-height:1.45; max-width:none;}

/* Movimento ridotto: nessuno scroll guidato, esploso completo fermo. */
.js .structure.is-static .structure__scrollstage{height:auto;}
.js .structure.is-static .structure__sticky{position:relative;}

/* ===================================================================
   Sezione 2 — Incisione laser: la cassetta reale vista di fronte,
   con anteprima dei loghi (js/engrave.js)
   =================================================================== */
.engrave{
  position:relative;
  --pad-top:clamp(96px,14vh,170px);
  padding:var(--pad-top) var(--gutter) clamp(88px,12vh,150px);
  color:var(--text);
  overflow:hidden;
}
.engrave__inner{
  max-width:1080px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.engrave__head{max-width:60ch;}
.engrave__head h2{font-size:var(--fs-h2);}
.engrave__head .lede{margin-left:auto; margin-right:auto;}

/* La cassetta si dimensiona anche sull'altezza: cassetta e schede restano visibili insieme. */
.engrave__stage{
  position:relative; width:100%;
  max-width:min(900px, calc((100svh - 330px) * 1.548));
  margin:clamp(40px,6vh,64px) 0 0;
}
/* luce calda, appena accennata, alle spalle della cassetta */
.engrave__stage::before{
  content:''; position:absolute; left:50%; top:44%;
  width:125%; aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgb(205 185 154 / 0.14), transparent 78%);
  pointer-events:none;
}
.engrave__frame{position:relative; aspect-ratio:2000/1292;}
/* ombra a terra sotto la cassetta */
.engrave__frame::after{
  content:''; position:absolute; left:3%; right:3%; bottom:-22px; height:44px;
  background:radial-gradient(50% 50% at 50% 50%, rgb(40 30 20 / 0.26), transparent 100%);
  z-index:-1;
}
.engrave__photo,.engrave__canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
/* La foto arriva da js/engrave.js (data-src): finché non c'è, niente icona né testo alternativo
   (e senza JavaScript resta solo la copia nel <noscript>). */
.engrave__photo:not([src]){visibility:hidden;}
.engrave__canvas{opacity:0; transition:opacity 300ms var(--ease);}
.engrave.is-live .engrave__canvas{opacity:1;}
.engrave.is-live .engrave__photo{opacity:0;}

.logo-picker{
  border:0; padding:0; min-width:0; width:100%;
  margin:clamp(36px,5vh,52px) 0 0;
}
html:not(.js) .logo-picker{display:none;}
.logo-picker__legend{
  float:none; width:100%; margin:0 0 16px;
  font-size:var(--fs-label);
  letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-soft);
}
.logo-picker__row{display:flex; flex-wrap:wrap; justify-content:center; gap:10px;}
.logo-card{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:132px; padding:12px 8px 11px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.logo-card[hidden]{display:none;}
.logo-card input[type="radio"]{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer;}
.logo-card__art{
  display:flex; align-items:center; justify-content:center;
  width:110px; height:54px; color:var(--ink);
}
.logo-card__art img{width:110px; height:54px; object-fit:contain; opacity:0.72; transition:opacity var(--t-micro) var(--ease);}
.logo-card__name{font-size:0.8rem; line-height:1.3; letter-spacing:0.02em; color:var(--text);}
.logo-card:hover{border-color:rgb(28 23 18 / 0.36);}
.logo-card:has(input:checked){border-color:var(--ink); background:rgb(28 23 18 / 0.035);}
.logo-card:has(input:checked) img{opacity:1;}
.logo-card:has(input:checked) .logo-card__name{color:var(--ink);}
.logo-card:has(input:focus-visible){outline:1px solid var(--ink); outline-offset:4px;}

.logo-card--upload{padding:0; border-style:dashed; border-color:rgb(28 23 18 / 0.32);}
.logo-card--upload label{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:100%; padding:12px 8px 11px; cursor:pointer;
}
.logo-card--upload .logo-card__art{opacity:0.85;}
.logo-card--upload .logo-card__name{color:var(--ink);}

.logo-picker__hint{margin:16px auto 0; font-size:0.8rem; line-height:1.55; color:var(--text-soft); max-width:52ch;}
.logo-picker__hint.is-error{color:var(--error);}

.engrave__foot{
  margin-top:clamp(32px,5vh,48px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
}

@media (max-width: 640px){
  .logo-picker__row{gap:8px;}
  .logo-card{width:calc((100% - 16px) / 3); padding:10px 6px 9px;}
  .logo-card--upload{padding:0;}
  .logo-card__art,.logo-card__art img{width:100%; max-width:96px; height:48px;}
}

/* ===================================================================
   Sezione 3 — Configuratore: legno (galleria ricolorata) e formato
   (js/configurator.js)
   =================================================================== */
.config{
  position:relative;
  --pad-top:clamp(96px,13vh,160px);
  padding:var(--pad-top) var(--gutter) 0;
  color:var(--text);
}
.config__head{max-width:60ch; margin:0 auto; text-align:center;}
.config__head h2{font-size:var(--fs-h2);}
.config__head .lede{margin-left:auto; margin-right:auto;}

.config__step{max-width:1180px; margin:clamp(64px,9vh,104px) auto 0;}
.config__step-head{
  display:flex; align-items:baseline; gap:18px;
  margin-bottom:clamp(24px,3.5vh,36px);
}
.config__num{font-size:var(--fs-label); letter-spacing:var(--track-label); color:var(--accent);}
.config__step-head h3{font-size:var(--fs-h3);}
.config__label{
  padding:0; margin:0 0 16px;
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-soft);
}

/* --- 01 Legno --- */
.wood-config{
  display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px); align-items:start;
}
@media (max-width: 900px){
  .wood-config{grid-template-columns:1fr;}
}
.wood-gallery__frame{
  position:relative; aspect-ratio:1376/768;
  overflow:hidden; background:#F3F0EB;
}
.wood-gallery__viewport{position:absolute; inset:0; touch-action:pan-y; cursor:grab;}
.wood-gallery__viewport:focus-visible{outline:1px solid var(--ink); outline-offset:4px;}
.wood-gallery__fallback,.wood-gallery__slide{
  position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover;
}
.wood-gallery__slide{opacity:0; transition:opacity 450ms var(--ease);}
.wood-gallery__slide.is-active{opacity:1;}
.wood-gallery__slide--over{z-index:2; transition:opacity 380ms var(--ease);}
.wood-gallery__slide--over.is-in{opacity:1;}
/* Frecce di vetro chiaro: si leggono sia sullo studio chiaro sia sulle ambientazioni. */
.wood-gallery__nav{
  position:absolute; top:50%; z-index:3;
  width:46px; height:46px; margin-top:-23px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgb(28 23 18 / 0.12); cursor:pointer;
  background:rgb(255 255 255 / 0.74); color:var(--ink);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgb(28 23 18 / 0.08);
  transition:background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.wood-gallery__nav:hover{background:rgb(255 255 255 / 0.96); border-color:rgb(28 23 18 / 0.4);}
.wood-gallery__nav:focus-visible{outline:1px solid var(--ink); outline-offset:3px;}
.wood-gallery__nav--prev{left:14px;}
.wood-gallery__nav--next{right:14px;}
.wood-gallery__caption{
  display:flex; justify-content:space-between; gap:12px;
  margin-top:14px; font-size:0.84rem; color:var(--text); max-width:none;
}
.wood-gallery__count{color:var(--text-soft); letter-spacing:0.14em; font-variant-numeric:tabular-nums;}
.wood-gallery__thumbs{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; margin-top:14px;}
.wood-gallery__thumb{
  padding:0; border:1px solid transparent; overflow:hidden;
  background:none; cursor:pointer; opacity:0.55;
  transition:opacity var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.wood-gallery__thumb img{display:block; width:100%; height:auto; aspect-ratio:1376/768; object-fit:cover;}
.wood-gallery__thumb:hover{opacity:0.85;}
.wood-gallery__thumb[aria-current="true"]{opacity:1; border-color:var(--ink);}
.wood-gallery__thumb:focus-visible{outline:1px solid var(--ink); outline-offset:3px;}

.wood-picker{border:0; padding:0; margin:0; min-width:0;}
.wood-options{display:flex; flex-direction:column; gap:8px;}
.wood-option{
  position:relative;
  display:flex; align-items:center; gap:16px;
  padding:10px 14px;
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.wood-option input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer;}
.wood-option__swatch{
  flex:none; width:36px; height:36px; border-radius:50%;
  background-size:cover; background-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.18);
}
.wood-option__name{font-size:0.95rem; line-height:1.35; color:var(--text);}
/* Legni non ancora disponibili: restano selezionabili per vederli nella galleria. */
.wood-option__soon{
  flex:none; margin-left:auto;
  padding:0.55em 0.85em 0.5em calc(0.85em + 0.2em);
  border:1px solid rgb(28 23 18 / 0.45);
  font-size:0.64rem; line-height:1; letter-spacing:0.2em; text-transform:uppercase;
  white-space:nowrap;
  color:var(--ink);
}
.wood-option:hover{border-color:rgb(28 23 18 / 0.36);}
.wood-option:has(input:checked){border-color:var(--ink); background:rgb(28 23 18 / 0.035);}
.wood-option:has(input:checked) .wood-option__name{color:var(--ink);}
.wood-option:has(input:focus-visible){outline:1px solid var(--ink); outline-offset:3px;}
.wood-picker__desc{
  margin-top:22px;
  font-size:1.05rem; line-height:1.6;
  color:var(--ink); opacity:0.86;
}

/* --- 02 Formato --- */
.size-picker{border:0; padding:0; margin:0; min-width:0; text-align:center;}
.size-picker .config__label{width:100%; text-align:center;}
.size-lineup{
  --unit:clamp(84px, 19vw, 250px);
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(6px, 2.5vw, 40px);
}
.size-option{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px clamp(6px,1.2vw,16px) 14px;
  border:1px solid transparent;
  cursor:pointer;
  transition:border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease);
}
.size-option input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer;}
.size-option__art{
  display:block; width:calc(var(--unit) * var(--scale)); aspect-ratio:1000/646;
  opacity:0.5; filter:drop-shadow(0 14px 12px rgb(40 30 20 / 0.2)) saturate(0.7);
  transition:opacity var(--t-editorial) var(--ease), filter var(--t-editorial) var(--ease);
}
.size-option__box{display:block; width:100%; height:100%; object-fit:contain;}
.size-option__bottles{margin-top:12px; color:var(--text); opacity:0.6; line-height:0;}
.size-option__bottles svg{fill:currentColor;}
.size-option__name{font-size:0.95rem; color:var(--text);}
/* Sotto il nome: le misure (2 bottiglie) o "Coming soon" (4 e 6), alla stessa altezza. */
.size-option__meta{
  display:flex; align-items:center; justify-content:center; min-height:24px;
  font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-soft);
}
.size-option__meta--dims{
  font-size:0.8rem; letter-spacing:0.03em; text-transform:none;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.size-option__meta .wood-option__soon{margin-left:0;}
.size-option:hover .size-option__art{opacity:0.75;}
.size-option:has(input:checked){border-color:rgb(28 23 18 / 0.42); background:rgb(28 23 18 / 0.025);}
.size-option:has(input:checked) .size-option__art{opacity:1; filter:drop-shadow(0 16px 14px rgb(40 30 20 / 0.26));}
.size-option:has(input:checked) .size-option__name{color:var(--ink);}
.size-option:has(input:checked) .size-option__bottles{opacity:1;}
.size-option:has(input:focus-visible){outline:1px solid var(--ink); outline-offset:3px;}
@media (max-width: 640px){
  /* Sui telefoni la fila usa quasi tutta la larghezza e le cassette si riducono in
     proporzione: le misure restano su una riga e la pagina non scorre di lato. */
  .size-lineup{
    --unit:min(max(84px, 19vw), calc((100vw - 186px) / 2.7));
    margin-left:calc(12px - var(--gutter)); margin-right:calc(12px - var(--gutter));
    gap:6px;
  }
  .size-option{padding:14px 5px 12px;}
  .size-option__name{font-size:0.82rem;}
  .size-option__meta{font-size:0.58rem; letter-spacing:0.14em;}
  .size-option__meta--dims{font-size:0.62rem; letter-spacing:0;}
  .size-option__meta .wood-option__soon{
    font-size:0.52rem; letter-spacing:0.1em;
    padding:0.55em 0.6em 0.5em calc(0.6em + 0.1em);
  }
}
@media (max-width: 359px){
  .size-option__meta--dims{font-size:0.56rem;}
  .size-option__meta .wood-option__soon{font-size:0.48rem; letter-spacing:0.06em; padding-left:calc(0.6em + 0.06em);}
}

/* --- Riepilogo: fascia color crema a tutta larghezza, chiude la sezione --- */
.config__band{
  margin:clamp(64px,9vh,104px) calc(-1 * var(--gutter)) 0;
  padding:clamp(44px,6.5vh,72px) var(--gutter);
  background:var(--bg-warm);
}
.config__summary{
  max-width:1180px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:20px 32px; flex-wrap:wrap;
}
.config__summary p{display:flex; flex-direction:column; gap:10px; max-width:none;}
.config__summary-label{font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase; color:var(--text-soft);}
.config__summary-value{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
.config__summary-text{font-size:clamp(1.1rem, 1rem + 0.4vw, 1.35rem); line-height:1.35; color:var(--ink);}
.config__summary-value .wood-option__soon{margin-left:0;}
.config__summary-value .wood-option__soon[hidden]{display:none;}
@media (max-width: 640px){
  .config__band{padding-top:36px; padding-bottom:40px;}
  .config__summary .btn{width:100%;}
}

/* ===================================================================
   Sezione 4 — Privati / Aziende
   Le due foto intere e originali, senza veli né sfumature, affiancate
   con uno spazio bianco in mezzo; sotto ogni foto il suo percorso.
   =================================================================== */
.paths{
  position:relative;
  --pad-top:clamp(64px,9vh,112px);
  padding:var(--pad-top) var(--gutter) clamp(80px,11vh,136px);
}
.paths__eyebrow{
  text-align:center; margin:0 auto clamp(36px,5vh,56px); max-width:none;
  padding:0 20px 0 calc(20px + var(--track-label));
}
.paths__grid{
  max-width:1320px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(24px,3vw,48px);
}
.paths__col{
  display:flex; flex-direction:column;
}
/* foto intera, nelle sue proporzioni (4:5) */
.paths__img{display:block; width:100%; height:auto;}
.paths__content{
  padding-top:clamp(24px,3.5vh,36px);
  max-width:560px;
}
.paths__content h2{font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem); margin-top:0.2em;}
.paths__list{
  list-style:none; margin:1.5em 0 0; padding:0;
  display:flex; flex-direction:column; gap:0.6em;
}
.paths__list li{
  position:relative; padding-left:1.4em;
  color:rgb(28 23 18 / 0.82); font-size:0.94rem; line-height:1.45;
}
.paths__list li::before{
  content:''; position:absolute; left:0; top:0.7em;
  width:7px; height:1px; background:var(--accent);
}
.paths__content .btn{margin-top:2em;}

@media (max-width: 780px){
  .paths__grid{grid-template-columns:minmax(0,1fr); row-gap:clamp(48px,8vh,72px);}
}

/* ===================================================================
   Sezione 5 — Vetrina: due foto reali affiancate che scorrono a coppie
   (js/showcase.js). Cambiano da sole ogni --interval; le due linee sotto
   le foto segnano il tempo al cambio e permettono di scegliere la coppia.
   =================================================================== */
.showcase{
  position:relative;
  --pad-top:clamp(64px,9vh,112px);
  --slide:1300ms;
  --interval:7s;
  /* fascia color crema a tutta larghezza; sotto, meno spazio: le linee hanno già il loro margine */
  padding:var(--pad-top) var(--gutter) calc(var(--pad-top) - 14px);
  background:var(--bg-warm);
}
.showcase__grid{
  max-width:1320px; margin:0 auto;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(10px,1.4vw,20px);
}
.showcase__frame{
  position:relative; aspect-ratio:4/3; overflow:hidden;
  background:rgb(28 23 18 / 0.04);
}
.showcase__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;}
.showcase__img.is-current{opacity:1;}
/* La foto nuova entra da destra e copre la precedente, che arretra più lenta. */
.showcase__img.is-entering{opacity:1; z-index:2; transform:translateX(100%);}
.showcase__img.is-leaving{opacity:1;}
.showcase__frame.is-moving .showcase__img{
  transition:transform var(--slide) var(--ease) var(--delay, 0ms), opacity var(--slide) var(--ease) var(--delay, 0ms);
}
.showcase__frame.is-moving .showcase__img.is-entering{transform:translateX(0);}
.showcase__frame.is-moving .showcase__img.is-leaving{transform:translateX(-24%); opacity:0.3;}

.showcase__controls{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top:clamp(14px,2.2vh,24px);
}
html:not(.js) .showcase__controls{display:none;}
.showcase__dot{
  display:block; width:56px; margin:0; padding:14px 0;
  border:0; background:none; cursor:pointer;
}
.showcase__bar{position:relative; display:block; height:1px; overflow:hidden; background:rgb(28 23 18 / 0.2);}
.showcase__fill{position:absolute; inset:0; background:var(--ink); transform:scaleX(0); transform-origin:left center;}
/* Si riempie solo con la vetrina in vista; alla fine cambia coppia. */
.showcase__dot[aria-current="true"] .showcase__fill{
  animation:showcase-fill var(--interval) linear forwards;
  animation-play-state:paused;
}
.showcase.is-playing .showcase__dot[aria-current="true"] .showcase__fill{animation-play-state:running;}
@keyframes showcase-fill{to{transform:scaleX(1);}}
.showcase__dot:hover .showcase__bar{background:rgb(28 23 18 / 0.45);}
.showcase__dot:focus-visible{outline:1px solid var(--ink); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  /* le foto cambiano comunque, ma in dissolvenza: niente scorrimento */
  .showcase__img{transition:opacity 700ms var(--ease);}
}
@media (max-width: 640px){
  .showcase__grid{grid-template-columns:minmax(0,1fr);}
}

/* ===================================================================
   Sezione 6 — Contatti: modulo di richiesta (js/contact.js → api/contatti.php)
   =================================================================== */
.contact{
  position:relative;
  --pad-top:clamp(96px,13vh,160px);
  padding:var(--pad-top) var(--gutter) clamp(56px,8vh,96px);
}
.contact__head{max-width:60ch; margin:0 auto; text-align:center;}
.contact__head h2{font-size:var(--fs-h2);}
.contact__head .lede{margin-left:auto; margin-right:auto;}

.contact-form,.contact-done{max-width:780px; margin:clamp(40px,6vh,64px) auto 0;}
.contact-form[hidden],.contact-done[hidden]{display:none;}
.contact-form__label,.field__label{
  display:block; margin:0 0 10px; padding:0;
  font-size:var(--fs-label); letter-spacing:var(--track-label); line-height:1.5; text-transform:uppercase;
  color:var(--text-soft);
}
.field__opt{text-transform:none; letter-spacing:0.02em;}

/* Privato / Azienda: le stesse caselle dei legni del configuratore. */
.contact-form__type{
  border:0; padding:0; min-width:0;
  margin:0 0 clamp(32px,4.5vh,44px);
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.contact-form__type .contact-form__label{float:none; width:100%; margin-bottom:16px; text-align:center; padding-left:var(--track-label);}
.choice{
  position:relative; min-width:150px; padding:13px 24px;
  border:1px solid var(--line); cursor:pointer; text-align:center;
  font-size:0.95rem; line-height:1.35; color:var(--text);
  transition:border-color var(--t-micro) var(--ease), background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease);
}
.choice input{position:absolute; inset:0; margin:0; opacity:0; cursor:pointer;}
.choice:hover{border-color:rgb(28 23 18 / 0.36);}
.choice:has(input:checked){border-color:var(--ink); background:rgb(28 23 18 / 0.035); color:var(--ink);}
.choice:has(input:focus-visible){outline:1px solid var(--ink); outline-offset:3px;}

.contact-form__grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:30px 28px;}
.field{min-width:0;}
.field[hidden]{display:none;}
.field--company{grid-column:span 2;}
.field--wide{grid-column:1 / -1;}
.field__input{
  display:block; width:100%; margin:0; padding:8px 0 11px;
  border:0; border-bottom:1px solid rgb(28 23 18 / 0.3); border-radius:0;
  background:transparent; color:var(--ink);
  font-size:1.02rem; line-height:1.5;
  transition:border-color var(--t-micro) var(--ease), box-shadow var(--t-micro) var(--ease);
}
.field__input::placeholder{color:rgb(28 23 18 / 0.4); opacity:1;}
.field__input:hover{border-color:rgb(28 23 18 / 0.55);}
/* fuoco: la linea diventa scura e doppia */
.field__input:focus{outline:none; border-color:var(--ink); box-shadow:0 1px 0 var(--ink);}
.field__input--area{min-height:9.5em; padding:14px 16px; border:1px solid rgb(28 23 18 / 0.3); resize:vertical;}
.field__input--area:focus{box-shadow:inset 0 0 0 1px var(--ink);}
.field__input--select{
  -webkit-appearance:none; appearance:none; cursor:pointer; padding-right:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231C1712' stroke-opacity='.7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center / 16px;
}
.field__input--select option{background:var(--bg); color:var(--ink);}
/* compilazione automatica del browser: niente fondo giallo o azzurro */
.field__input:-webkit-autofill,.field__input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--ink); caret-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px var(--bg) inset; transition:background-color 99999s;
}
.field__input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px var(--bg) inset, 0 1px 0 var(--ink);}
.field.is-invalid .field__input{border-color:var(--error);}
.field__error{margin-top:8px; font-size:0.8rem; line-height:1.5; color:var(--error);}

.contact-form__checks{display:flex; flex-direction:column; gap:16px; margin-top:clamp(28px,4vh,40px);}
.check-row{display:flex; flex-wrap:wrap; gap:6px 16px;}
.check{
  position:relative; display:flex; align-items:flex-start; gap:14px;
  cursor:pointer; font-size:0.9rem; line-height:1.55; color:var(--text);
}
.check input{position:absolute; left:0; top:0; width:20px; height:20px; margin:0; opacity:0; cursor:pointer;}
.check__box{
  flex:none; position:relative; width:20px; height:20px; margin-top:1px;
  border:1px solid rgb(28 23 18 / 0.5);
  transition:background-color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.check__box::after{
  content:''; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid var(--white); border-width:0 1.5px 1.5px 0; transform:rotate(45deg);
  opacity:0; transition:opacity var(--t-micro) var(--ease);
}
.check:hover .check__box{border-color:var(--ink);}
.check input:checked + .check__box{background:var(--ink); border-color:var(--ink);}
.check input:checked + .check__box::after{opacity:1;}
.check input:focus-visible + .check__box{outline:1px solid var(--ink); outline-offset:3px;}
.check__strong{color:var(--ink);}
.check a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
.check-row.is-invalid .check__box{border-color:var(--error);}
.check-row .field__error{flex-basis:100%; margin:0 0 0 34px;}

/* Trappola per lo spam: fuori schermo, non display:none (alcuni programmi lo riconoscono). */
.contact-form__hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}

.contact-form__actions{
  margin-top:clamp(32px,4.5vh,44px);
  display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center;
}
.contact-form__actions .btn{min-width:260px;}
.contact-form__actions .btn:disabled{opacity:0.6; cursor:progress;}
.contact-form__status{margin:0 auto; max-width:56ch; font-size:0.9rem; line-height:1.6; color:var(--text);}
.contact-form__status.is-error{color:var(--error);}
.contact-form__status a{color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}

.contact-done{
  text-align:center;
  padding:clamp(40px,6vh,56px) clamp(20px,4vw,48px);
  border:1px solid var(--line); background:rgb(28 23 18 / 0.02);
}
.contact-done:focus{outline:none;}
.contact-done .eyebrow{margin-left:auto; margin-right:auto; padding-left:var(--track-label);}
.contact-done__title{font-size:clamp(1.6rem, 1.3rem + 1.4vw, 2.3rem);}
.contact-done__text{margin:1em auto 0; max-width:48ch;}
.contact-done .btn{margin-top:clamp(24px,3.5vh,32px);}

.contact__direct{max-width:780px; margin:clamp(48px,7vh,72px) auto 0; text-align:center;}
.contact__direct-label{
  margin:0 auto 18px; max-width:none; padding-left:var(--track-label);
  font-size:var(--fs-label); letter-spacing:var(--track-label); text-transform:uppercase;
  color:var(--text-soft);
}
.contact__direct-links{display:flex; flex-wrap:wrap; justify-content:center; gap:12px;}
.btn__icon{flex:none; margin-right:12px;}

@media (max-width: 900px){
  .contact-form__grid{grid-template-columns:repeat(2, minmax(0,1fr));}
  .field--name{grid-column:1 / -1;}
  .field--company{grid-column:auto;}
}
@media (max-width: 640px){
  .contact-form__grid{grid-template-columns:minmax(0,1fr); gap:26px;}
  .field--name{grid-column:auto;}
  .choice{flex:1 1 0; min-width:0;}
  .contact-form__actions .btn,.contact__direct-links .btn{width:100%; min-width:0;}
}

/* ===================================================================
   Bottoni fissi Instagram e WhatsApp (js/main.js), uno sopra l'altro:
   compaiono dopo la prima schermata della struttura e si nascondono sulla
   sezione contatti, che ha già i suoi.
   =================================================================== */
.float-actions{
  position:fixed; z-index:90;
  right:calc(clamp(16px,2.6vw,32px) + env(safe-area-inset-right));
  bottom:calc(clamp(16px,2.6vw,32px) + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
  pointer-events:none;
}
.float-btn{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--white);
  background:rgb(28 23 18 / 0.9);
  border:1px solid rgb(28 23 18 / 0.9);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgb(28 23 18 / 0.22);
  pointer-events:auto;
  transition:opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s,
    background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.float-btn:hover{background:var(--white); color:var(--ink); border-color:var(--ink);}
/* il bottone in alto (Instagram) arriva un attimo dopo, quello in basso se ne va per ultimo */
.float-actions.is-shown .float-btn:first-child{transition-delay:70ms, 70ms, 0s, 0s, 0s, 0s;}
.js .float-actions:not(.is-shown) .float-btn{
  opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none;
  transition:opacity 420ms var(--ease), transform 420ms var(--ease), visibility 0s linear 420ms;
}
.js .float-actions:not(.is-shown) .float-btn:last-child{transition-delay:70ms, 70ms, 490ms;}
@media (max-width: 640px){
  .float-actions{gap:10px;}
  .float-btn{width:50px; height:50px;}
}
@media (prefers-reduced-motion: reduce){
  .float-btn,.js .float-actions:not(.is-shown) .float-btn{transform:none;}
}

/* ===================================================================
   Privacy policy (privacy.html) e conferma del modulo senza JavaScript
   (grazie.html)
   =================================================================== */
@media (max-width: 1120px){
  .site-nav.site-nav--always{display:flex;}
}
.legal{
  max-width:72ch; margin:0 auto; box-sizing:content-box;
  padding:calc(var(--header-h) + clamp(40px,8vh,96px)) var(--gutter) clamp(64px,10vh,112px);
}
.legal__head{text-align:center; margin-bottom:clamp(40px,6vh,64px);}
.legal__head h1{font-size:var(--fs-h2);}
.legal__updated{margin:1.2em auto 0; font-size:var(--fs-small); color:var(--text-soft);}
.legal h2{font-size:var(--fs-h3); margin:2.2em 0 0.7em; scroll-margin-top:calc(var(--header-h) + 24px);}
.legal p{max-width:none;}
.legal p + p{margin-top:0.9em;}
.legal ul{margin:0.8em 0 0; padding-left:1.2em;}
.legal li + li{margin-top:0.45em;}
.legal a:not(.btn){color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
.legal strong{font-weight:inherit; color:var(--ink);}
.legal .legal__actions{margin-top:clamp(32px,5vh,48px); text-align:center;}
/* pagine brevi (conferma del modulo): testo centrato, a tutta altezza */
.legal--notice{text-align:center; min-height:calc(100svh - var(--header-h) - clamp(64px,10vh,112px));}
.legal--notice p{margin-left:auto; margin-right:auto; max-width:52ch;}

/* ===================================================================
   Footer
   =================================================================== */
.site-footer{
  position:relative;
  background:var(--bg-warm);
  color:var(--text);
  --pad-top:clamp(64px,10vh,112px);
  padding:var(--pad-top) var(--gutter) clamp(32px,5vh,48px);
  display:flex; flex-wrap:wrap; gap:32px 64px;
  align-items:flex-start; justify-content:space-between;
}
.site-footer__brand{
  display:flex; align-items:center; gap:14px;
  font-size:1.1rem; line-height:1; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--ink);
}
.site-footer__brand img{width:auto; height:36px;}
.site-footer__contact{max-width:46ch; font-size:0.9rem; line-height:1.7; display:flex; flex-direction:column; gap:0.6em;}
.site-footer__contact a:not(.social-link){color:var(--ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;}
.social-links{list-style:none; margin:0.5em 0 0; padding:0; display:flex; gap:10px;}
.social-link{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgb(28 23 18 / 0.3); color:var(--ink);
  transition:background-color var(--t-micro) var(--ease), color var(--t-micro) var(--ease), border-color var(--t-micro) var(--ease);
}
.social-link:hover{background:var(--ink); color:var(--white); border-color:var(--ink);}
.site-footer__legal{
  flex-basis:100%; margin-top:24px;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 32px;
  font-size:0.74rem; letter-spacing:0.06em; color:var(--text-soft);
}
.site-footer__legal p{max-width:none;}
.site-footer__legal a{color:var(--text); text-decoration:none; transition:color var(--t-micro) var(--ease);}
.site-footer__legal a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:4px;}