/* ==========================================================================
   DE CARO CONTRACT — Design System
   Editoriale / architettonico — nero profondo, bianco caldo, bronzo, sabbia
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  /* --- colore --- */
  --black:        #0a0906;
  --black-soft:   #131210;
  --black-line:   rgba(246,241,231,.14);
  --cream:        #f6f1e6;
  --cream-dim:    #ece4d2;
  --sand:         #e2d3b3;
  --concrete:     #8d897e;
  --concrete-dk:  #514e46;
  --bronze:       #a3854f;
  --bronze-light: #cbae78;
  --bronze-dark:  #6d5936;

  /* --- tipografia --- */
  --f-serif: 'Fraunces', 'Iowan Old Style', serif;
  --f-sans:  'Inter', -apple-system, sans-serif;

  /* --- ritmo --- */
  --container: min(1400px, 92vw);
  --gutter: clamp(24px, 4vw, 64px);
  --radius: 2px;

  /* --- easing --- */
  --ease-out: cubic-bezier(.16,.84,.32,1);
  --ease-in-out: cubic-bezier(.83,0,.17,1);

  --nav-h: 96px;
}

/* ==========================================================================
   RESET
   ========================================================================== */
*, *::before, *::after{ box-sizing: border-box; margin:0; padding:0; }
html{
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html, body{ background: var(--cream); color: var(--black); overflow-x: clip; }
body{
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  cursor: none;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button, input, textarea, select{ font-family: inherit; font-size: inherit; color: inherit; background:none; border:none; }
button{ cursor:none; }
ul{ list-style:none; }
svg{ display:block; }
::selection{ background: var(--bronze); color: var(--cream); }

@media (max-width: 860px){
  body, button{ cursor:auto; }
}

/* niente height:100vh qui: forzerebbe l'altezza del body alla sola viewport
   nel momento esatto in cui Lenis misura lo scrollHeight del documento,
   azzerando il limite di scroll in modo permanente */
.no-scroll{ overflow:hidden; }

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1,h2,h3,h4{ font-family: var(--f-serif); font-weight: 500; letter-spacing: -.01em; line-height: 1.05; }

.eyebrow{
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bronze);
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before{
  content:'';
  width: 28px; height: 1px;
  background: var(--bronze);
  display:inline-block;
}
/* Su sfondo crema il bronzo standard (--bronze, #a3854f) scende a un
   contrasto di 3.09:1 contro il crema (#f6f1e6) — sotto la soglia WCAG AA
   di 4.5:1 richiesta per un testo di 12px come questo (non e' "testo
   grande"). Sulle sezioni scure va bene (5.71:1), quindi lo scoping è solo
   qui. --concrete-dk (#514e46) sulla stessa combinazione da' 7.37:1.
   (Design review, 05/08) */
.section--cream .eyebrow{ color: var(--concrete-dk); }
.section--cream .eyebrow::before{ background: var(--concrete-dk); }

.section-head{
  display:flex;
  flex-direction:column;
  gap: 28px;
  margin-bottom: clamp(48px, 7vw, 96px);
}
.section-head h2{
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);
  max-width: 16ch;
}
.section-head .lede{
  max-width: 46ch;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--concrete-dk);
  line-height: 1.6;
}
.section--dark .section-head .lede{ color: var(--concrete); }

em, .italic{ font-family: var(--f-serif); font-style: italic; font-weight: 400; }

/* padding + margin uguale e opposto su tutti i lati utili: allarga la
   maschera overflow:hidden quel tanto che basta a non tagliare ne' i
   discendenti (g, p, q, y) del line-height stretto dei titoli, ne' lo
   sbalzo a sinistra del corsivo (l'italico "sporge" a sinistra sulla prima
   lettera della maschera, es. la "p" di progetto) — senza alterare lo
   spazio occupato nel layout */
.split-line{
  overflow:hidden; display:block;
  padding:0 0 .35em .12em; margin:0 0 -.35em -.12em;
}
.split-line > span{ display:inline-block; will-change: transform; }

/* wrapper generato via JS per lo stagger parola-per-parola nei titoli di sezione:
   inline-block per non spezzare il naturale a-capo del testo */
.split-word{
  overflow:hidden; display:inline-block;
  padding:0 0 .35em .12em; margin:0 0 -.35em -.12em;
}
.split-word > span{ display:inline-block; will-change: transform; }

.reveal-up{ opacity:0; transform: translateY(40px); }

/* ==========================================================================
   LAYOUT HELPERS
   ========================================================================== */
.wrap{ width: var(--container); margin-inline:auto; }
.section{ position:relative; padding: clamp(96px, 12vw, 180px) 0; }
.section--dark{ background: var(--black); color: var(--cream); }
.section--cream{ background: var(--cream); color: var(--black); }
.section--line-top{ border-top: 1px solid var(--black-line); }

.grain{
  position:fixed; inset:0; z-index: 998; pointer-events:none;
  opacity:.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* grana "viva": la texture salta di posizione a scatti come pellicola.
   steps() = nessun movimento fluido percepibile, solo brulichio sottile;
   gli estremi coincidono con la dimensione della tile (140px) → loop senza
   cuciture. Disattivata per chi preferisce il movimento ridotto. */
@media (prefers-reduced-motion: no-preference){
  .grain{ animation: grainShift .9s steps(6) infinite; }
}
@keyframes grainShift{
  0%{ background-position: 0 0; }
  100%{ background-position: 140px 140px; }
}

/* ==========================================================================
   ACCESSIBILITÀ — skip link + focus visibile
   ========================================================================== */
.skip-link{
  position: fixed; top: 12px; left: 12px; z-index: 2000;
  padding: 12px 20px; background: var(--black); color: var(--cream);
  font-size: 13px; letter-spacing:.06em; border-radius: 999px; border:1px solid var(--bronze);
  transform: translateY(-200%); transition: transform .3s var(--ease-out);
}
.skip-link:focus-visible{ transform: translateY(0); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: 2px;
}

/* --- scrollbar coerente col design --- */
::-webkit-scrollbar{ width: 11px; }
::-webkit-scrollbar-track{ background: var(--black-soft); }
::-webkit-scrollbar-thumb{ background: var(--concrete-dk); border-radius: 99px; border: 3px solid var(--black-soft); }
::-webkit-scrollbar-thumb:hover{ background: var(--bronze); }

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor{
  position: fixed; top:0; left:0; z-index: 999;
  pointer-events:none;
  will-change: transform;
}
.cursor-dot{
  width: 6px; height:6px; border-radius:50%;
  background: var(--bronze-light);
  transform: translate(-50%,-50%);
}
.cursor-ring{
  width: 40px; height:40px; border-radius:50%;
  border: 1px solid rgba(163,133,79,.55);
  transform: translate(-50%,-50%);
  transition: width .35s var(--ease-out), height .35s var(--ease-out), border-color .35s var(--ease-out), background .35s var(--ease-out);
  display:flex; align-items:center; justify-content:center;
}
.cursor-ring span{
  opacity:0; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:600; white-space:nowrap; color: var(--cream);
  transition: opacity .25s var(--ease-out);
}
.cursor--view .cursor-ring{ width: 88px; height:88px; background: rgba(163,133,79,.92); border-color: transparent; }
.cursor--view .cursor-ring span{ opacity:1; }
.cursor--link .cursor-ring{ width: 60px; height:60px; border-color: var(--bronze); }
.cursor--light .cursor-ring{ border-color: rgba(163,133,79,.55); }
.cursor--light .cursor-dot{ background: var(--bronze); }
@media (max-width: 860px){ .cursor{ display:none; } }

/* ==========================================================================
   PRELOADER
   ========================================================================== */
.preloader{
  position: fixed; inset:0; z-index: 1000;
  background: var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 28px;
  clip-path: inset(0% 0% 0% 0%); /* sipario: parte chiuso (foto coperta) */
}
.preloader .mark{ width: 64px; height:64px; }
.preloader .mark path{
  fill:none; stroke: var(--bronze-light); stroke-width: 1.1;
  stroke-dasharray: 300; stroke-dashoffset: 300;
}
.preloader-bar{
  width: min(280px, 60vw); height:1px; background: rgba(246,241,231,.16); position:relative; overflow:hidden;
}
.preloader-bar::after{
  content:''; position:absolute; inset:0; width:0%; background: var(--bronze-light);
}
.preloader-count{
  font-family: var(--f-sans); font-size: 12px; letter-spacing:.2em; color: var(--concrete);
  font-variant-numeric: tabular-nums; /* le cifre non "ballano" durante il conteggio */
}

/* foto ferma, sotto al sipario nero — stessa immagine e stessa gradazione
   cromatica di .hero-photo, per continuita' visiva nel passaggio */
.preloader-reveal{
  position: fixed; inset:0; z-index: 999; pointer-events:none;
  background-image:
    linear-gradient(180deg, rgba(10,9,6,.16) 0%, rgba(10,9,6,.20) 55%, rgba(10,9,6,.66) 100%),
    linear-gradient(150deg, rgba(28,23,18,.14) 0%, rgba(10,9,6,.20) 75%),
    url('../assets/hero-seq/f101.jpg');
  background-size: cover; background-position: center;
  /* stessa scala di .hero-photo/.hero-canvas (parallasse): il passaggio
     preloader → hero resta perfettamente allineato, senza scatto di zoom */
  transform: scale(1.045);
}
.preloader-word{
  position: fixed; inset:0; z-index: 1002; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: 18px;
}
.preloader-word .pw-name{
  font-family: var(--f-serif); font-size: clamp(2.6rem, 7vw, 5.6rem);
  letter-spacing: .01em; color: var(--cream); opacity:0;
}
.preloader-word .preloader-o{ color: var(--bronze-light); }
.preloader-word .pw-sub{
  display:flex; align-items:center; gap:14px;
  font-family: var(--f-sans); font-size: clamp(.7rem, 1.4vw, .9rem);
  font-weight:600; letter-spacing:.32em; text-transform:uppercase; color: var(--bronze-light);
}
/* le astine si allungano (scaleX) invece di comparire in dissolvenza;
   ognuna cresce a partire dal bordo piu' vicino al testo "Contract" */
.preloader-word .pw-line{
  width:32px; height:1px; background: var(--bronze-light); display:inline-block;
  transform: scaleX(0);
}
.preloader-word .pw-line--l{ transform-origin: right center; }
.preloader-word .pw-line--r{ transform-origin: left center; }
/* "Contract" si rivela da sinistra a destra con una maschera, non in dissolvenza */
.preloader-word .pw-contract-text{
  display:inline-block; clip-path: inset(0 100% 0 0);
}
.preloader-word .pw-icons{
  display:flex; align-items:center; gap: clamp(32px, 5vw, 56px); margin-top:10px;
}
.preloader-word .pw-icon{ width:38px; height:38px; opacity:0; }
.preloader-word .pw-icon svg{
  width:100%; height:100%; fill:none; stroke: var(--cream); stroke-width:1.1;
  stroke-linecap:round; stroke-linejoin:round;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position: fixed; top:0; left:0; right:0; z-index: 500;
  height: var(--nav-h);
  display:flex; align-items:center;
  color: var(--cream);
  transition: background .4s var(--ease-out);
}
/* scrim in testa: mantiene leggibile il menu sopra qualsiasi luminosità della hero */
.nav::before{
  content:''; position:absolute; left:0; right:0; top:0; height: 210%; z-index:-1; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,9,6,.62) 0%, rgba(10,9,6,.34) 40%, rgba(10,9,6,0) 100%);
  transition: opacity .4s var(--ease-out);
}
/* oltre la hero: pannello pieno */
.nav.is-solid{
  background: rgba(10,9,6,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav.is-solid::before{ opacity:0; }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
.nav-progress{
  position:fixed; top:0; left:0; height:2px; background: var(--bronze-light);
  width:100%; transform: scaleX(0); transform-origin:left; will-change: transform; z-index:501;
}
.logo-lockup{ display:flex; align-items:center; gap:12px; }
.logo-lockup svg{ width: 30px; height:30px; }
.logo-lockup .word{ font-family: var(--f-serif); font-size: 15px; letter-spacing:.03em; }
.logo-lockup .word b{ font-weight:600; }
.logo-lockup .word i{ font-style: italic; color: var(--bronze-light); }

.nav-links{ display:flex; align-items:center; gap: 44px; }
.nav-links a{
  position:relative; font-size: 13px; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color: var(--cream); transition: color .35s var(--ease-out);
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out), background-color .35s var(--ease-out);
}
.nav-links a:hover{ color: var(--bronze-light); }
.nav-links a:hover::after{ transform: scaleX(1); transform-origin: left; }
.nav-links a.is-current{ color: var(--bronze-light); }
.nav-links a.is-current::after{ transform: scaleX(1); background: var(--bronze-light); }

.nav-cta{
  border:1px solid rgba(246,241,231,.5); padding: 11px 22px; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  border-radius: 999px; transition: background .4s var(--ease-out), color .4s var(--ease-out);
}
.nav-cta:hover{ background: var(--cream); color: var(--black); }

.burger{ display:none; flex-direction:column; gap:6px; width:28px; }
.burger span{ height:1px; background: currentColor; width:100%; }

@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-cta{ display:none; }
  .burger{ display:flex; }
}

.burger{ position:relative; z-index:601; transition: transform .3s var(--ease-out); }
.burger span{ transition: transform .35s var(--ease-out), opacity .25s var(--ease-out); }
.nav.is-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.is-open .burger span:nth-child(2){ opacity:0; }
.nav.is-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; z-index:600; background: var(--black); color: var(--cream);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap: 48px;
  padding: 0 var(--gutter);
  clip-path: inset(0 0 100% 0); transition: clip-path .65s var(--ease-in-out);
}
.mobile-menu.is-open{ clip-path: inset(0 0 0% 0); }
.mobile-menu-links{ display:flex; flex-direction:column; gap: 18px; counter-reset: mm; }
.mobile-menu-links a{
  font-family: var(--f-serif); font-size: clamp(2.2rem,9vw,3.2rem);
  counter-increment: mm; display:flex; align-items: baseline; gap: 16px;
}
.mobile-menu-links a::before{
  content: "0" counter(mm);
  font-family: var(--f-sans); font-size: 12px; font-weight:600; letter-spacing:.14em;
  color: var(--bronze); flex-shrink:0;
}
.mobile-menu-cta{ background: var(--bronze); color: var(--black); }
.mobile-menu-foot{
  position:absolute; left: var(--gutter); right: var(--gutter); bottom: 34px;
  display:flex; justify-content:space-between; align-items:center; gap: 16px; flex-wrap:wrap;
  padding-top: 20px; border-top: 1px solid rgba(246,241,231,.14);
}
.mobile-menu-foot a{ font-size:.9rem; color: var(--concrete); }
.mobile-menu-foot a:first-child{ color: var(--bronze-light); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; min-height: 100svh; background: var(--black); color: var(--cream);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top: var(--nav-h);
  overflow:hidden;
}
/* stesso trattamento di .preloader-reveal: quando arriva lo scatto reale,
   aggiornare qui e in .preloader-reveal per continuita' visiva nel passaggio */
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background-image: url('../assets/hero-seq/f101.jpg');
  background-size: cover; background-position: center;
  /* leggermente ingrandita: la parallasse al mouse (main.js) la sposta di
     qualche px senza mai scoprire i bordi */
  transform: scale(1.045);
}
/* canvas della sequenza "assemblaggio cucina" guidata dallo scroll;
   sta sopra il poster (.hero-photo) e sotto il velo/testo */
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block;
  transform: scale(1.045); /* stesso margine di sicurezza per la parallasse */
}
/* velo scuro sopra canvas e poster per tenere leggibile il testo bianco */
.hero::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(58% 46% at 22% 66%, rgba(10,9,6,.38) 0%, rgba(10,9,6,0) 100%),
    linear-gradient(180deg, rgba(10,9,6,.16) 0%, rgba(10,9,6,.20) 55%, rgba(10,9,6,.66) 100%),
    linear-gradient(150deg, rgba(28,23,18,.14) 0%, rgba(10,9,6,.20) 75%);
}
.hero-bg{ position:absolute; inset:0; z-index:1; }
.hero-bg svg{ width:100%; height:100%; }
.hero-bg .grid-line{ stroke: rgba(246,241,231,.09); stroke-width:1; }

.hero-light{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-glow{
  position:absolute; width: 60vw; height:60vw; max-width:900px; max-height:900px;
  left:50%; top:38%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(163,133,79,.22) 0%, rgba(163,133,79,0) 68%);
  filter: blur(10px);
}
.hero-content{ position:relative; z-index:2; width:var(--container); margin-inline:auto; padding-bottom: clamp(18px, 3.5vh, 64px); }
.hero-eyebrow{ margin-bottom: 28px; color: var(--bronze-light); }
.hero-eyebrow::before{ background: var(--bronze-light); }
.hero h1{
  font-size: min(clamp(3.2rem, 9.2vw, 8.4rem), 15vh);
  color: var(--cream);
}
.hero h1 .line-1{ font-family: var(--f-sans); font-weight:700; text-transform:uppercase; letter-spacing:-0.01em; }
.hero h1 .line-2{ font-family: var(--f-serif); font-style: italic; font-weight:400; color: var(--bronze-light); }

.hero-sub{
  margin-top: clamp(16px, 2.6vh, 34px); max-width: 46ch; font-size: clamp(1rem, 1.25vw, 1.2rem);
  color: rgba(246,241,231,.92); line-height:1.65;
  text-shadow: 0 1px 3px rgba(10,9,6,.5), 0 4px 26px rgba(10,9,6,.55);
}
.hero-actions{ display:flex; align-items:center; gap:36px; margin-top: clamp(20px, 3.6vh, 48px); flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding: 17px 14px 17px 30px; border-radius:999px; transition: all .45s var(--ease-out);
  position:relative; overflow:hidden;
}
/* micro-dettaglio: bagliore che attraversa il bottone all'hover (sheen) */
.btn::after{
  content:''; position:absolute; top:-4px; bottom:-4px; left:0; width:34%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.32) 50%, transparent 100%);
  transform: skewX(-18deg) translateX(-160%);
  pointer-events:none;
}
.btn:hover::after{
  transform: skewX(-18deg) translateX(420%);
  transition: transform .85s var(--ease-out);
}
/* "bottone-nel-bottone": l'icona finale vive nel suo cerchio dedicato,
   non appoggiata nuda accanto al testo (04/09 — high-end-visual-design) */
.btn-label{ position:relative; }
.btn-icon{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:28px; height:28px; border-radius:50%; font-size:13px; line-height:1;
  transition: transform .45s var(--ease-out), background-color .45s var(--ease-out);
}
.btn--primary{ background: var(--bronze); color: var(--black); }
.btn--primary:hover{ background: var(--bronze-light); }
.btn--primary .btn-icon{ background: rgba(10,9,6,.14); }
.btn--primary:hover .btn-icon{ background: rgba(10,9,6,.24); transform: translate(2px,-2px) scale(1.08); }
.btn--ghost{ border:1px solid rgba(246,241,231,.35); color: var(--cream); }
.btn--ghost:hover{ border-color: var(--cream); background: rgba(246,241,231,.06); }
.btn--ghost .btn-icon{ background: rgba(246,241,231,.12); }
.btn--ghost:hover .btn-icon{ background: rgba(246,241,231,.22); transform: translate(2px,-2px) scale(1.08); }
.btn--dark{ border:1px solid rgba(10,9,6,.3); color: var(--black); }
.btn--dark:hover{ background: var(--black); color: var(--cream); }
.btn--dark .btn-icon{ background: rgba(10,9,6,.08); }
.btn--dark:hover .btn-icon{ background: rgba(246,241,231,.14); transform: translate(2px,-2px) scale(1.08); }

.hero-meta{
  position:relative; z-index:2; border-top:1px solid rgba(246,241,231,.14);
  margin-top: clamp(20px, 4vh, 72px);
}
.hero-meta .wrap{ display:flex; justify-content:space-between; align-items:center; padding: clamp(14px, 2.2vh, 26px) 0; }
.hero-stats{ display:flex; gap: clamp(28px,5vw,72px); }
.stat b{ display:block; font-family: var(--f-serif); font-size: clamp(1.6rem,2.4vw,2.2rem); color:var(--cream); font-variant-numeric: tabular-nums; }
.stat span{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--concrete); }
.scroll-cue{ display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--concrete); }
.scroll-cue .line{ width:1px; height:40px; background: rgba(246,241,231,.25); position:relative; overflow:hidden; }
.scroll-cue .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--bronze-light); animation: scrollcue 2.2s var(--ease-in-out) infinite; }
@keyframes scrollcue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

@media (max-width: 640px){
  .hero-meta .wrap{ flex-direction:column; align-items:flex-start; gap:24px; }
  .hero-sub{ margin-top: 22px; }
  .hero-actions{ margin-top: 30px; gap: 20px; }
  .hero-meta{ margin-top: 40px; }
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee{
  background: var(--black); border-top:1px solid rgba(246,241,231,.14);
  overflow:hidden; padding: 20px 0; position:relative; z-index:2;
}
.marquee-track{ display:flex; width:max-content; gap:0; animation: marquee 32s linear infinite; }
.marquee-track span{
  font-family: var(--f-sans); font-size:13px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--concrete); padding: 0 28px; white-space:nowrap; display:flex; align-items:center; gap:28px;
}
.marquee-track span b{ color: var(--bronze-light); font-weight:600; }
.marquee-track span::after{ content:'—'; color: rgba(246,241,231,.25); margin-left:28px; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ==========================================================================
   AZIENDA
   ========================================================================== */
.azienda-grid{ display:grid; grid-template-columns: .95fr 1.15fr; gap: clamp(40px,6vw,120px); align-items:start; }
.azienda-story p{ color: var(--concrete-dk); font-size:1.02rem; line-height:1.75; margin-bottom:20px; max-width: 48ch; }
.azienda-story p:first-of-type{ font-family: var(--f-serif); font-size:1.3rem; color: var(--black); line-height:1.5; }

.ceo-quote{
  margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(10,9,6,.14);
  font-family: var(--f-serif); font-style:italic; font-size:1.25rem; line-height:1.5; max-width: 34ch; color: var(--black);
}
/* "…finché non si accende la luce": un bagliore bronzeo attraversa la frase una volta */
.ceo-quote.is-lit{
  background-image: linear-gradient(100deg, var(--black) 42%, var(--bronze) 50%, var(--black) 58%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: quoteShine 2.2s var(--ease-in-out) .3s forwards;
}
@keyframes quoteShine{ from{ background-position: 100% 0; } to{ background-position: 0% 0; } }
/* leadership: due (o più) ritratti editoriali con nome e ruolo */
.leaders{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,32px); margin-top: 32px; }
.leader-photo{ overflow:hidden; border-radius:2px; aspect-ratio:4/5; background: var(--cream-dim); }
.leader-photo img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1s var(--ease-out); }
.leader:hover .leader-photo img{ transform: scale(1.04); }
.leader figcaption{ margin-top: 16px; }
.leader figcaption b{ display:block; font-family: var(--f-serif); font-weight:500; font-size: 1.15rem; }
.leader figcaption span{ display:block; margin-top:4px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--bronze-dark); font-weight:600; }

@media (max-width: 460px){
  .leaders{ grid-template-columns:1fr; gap: 28px; }
}

.timeline{ position:relative; padding-left: 48px; }
.timeline-line{
  position:absolute; left:9px; top:6px; bottom:6px; width:1px; background: rgba(10,9,6,.12);
}
.timeline-line-fill{
  position:absolute; left:9px; top:6px; width:1px; height:0%; background: var(--bronze);
  transform-origin: top;
}
.timeline-item{ position:relative; padding-bottom: 56px; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-dot{
  position:absolute; left:-48px; top:4px; width:19px; height:19px; border-radius:50%;
  background: var(--cream); border:1px solid var(--bronze); display:flex; align-items:center; justify-content:center;
}
.timeline-dot::after{ content:''; width:7px; height:7px; border-radius:50%; background: var(--bronze); }
.timeline-year{ font-family: var(--f-serif); font-size: clamp(1.6rem,2.4vw,2.1rem); color: var(--black); margin-bottom:8px; }
.timeline-item p{ color: var(--concrete-dk); max-width: 52ch; line-height:1.65; }
.timeline-item a{
  color: var(--bronze-dark); font-weight:600;
  border-bottom: 1px solid rgba(163,133,79,.45);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.timeline-item a:hover{ color: var(--bronze); border-color: var(--bronze); }

@media (max-width: 900px){
  .azienda-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   SERVIZI
   ========================================================================== */
.servizi-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,90px); }
.servizi-list{ display:flex; flex-direction:column; }
.servizio-row{
  border-top: 1px solid rgba(246,241,231,.16);
  padding: 30px 0; cursor:none;
  display:flex; align-items:baseline; gap:24px; justify-content:space-between;
  transition: padding .4s var(--ease-out);
}
.servizi-list .servizio-row:last-child{ border-bottom: 1px solid rgba(246,241,231,.16); }
.servizio-num{ font-family: var(--f-serif); font-size:1rem; color: var(--concrete); }
.servizio-title-wrap{ flex:1; overflow:hidden; }
.servizio-title{
  font-family: var(--f-serif); font-size: clamp(1.7rem,3vw,2.7rem); font-weight:400;
  color: var(--concrete); transition: color .4s var(--ease-out), transform .5s var(--ease-out);
  display:block;
}
.servizio-tag{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color: var(--bronze); opacity:0; transition: opacity .4s var(--ease-out); max-width:22ch; text-align:right; }
.servizio-row.is-active .servizio-title{ color: var(--cream); transform: translateX(14px); }
.servizio-row.is-active .servizio-num{ color: var(--bronze-light); }
.servizio-row.is-active .servizio-tag{ opacity:1; }
.servizio-row:hover .servizio-title{ color: var(--cream); }

.servizi-preview{ position:relative; border-radius: 4px; overflow:hidden; aspect-ratio: 4/5; position:sticky; top: calc(var(--nav-h) + 24px); }
.servizi-preview-panel{
  position:absolute; inset:0; opacity:0; transition: opacity .7s var(--ease-out);
  display:flex; flex-direction:column; justify-content:flex-end; padding: 36px;
  background-size: cover; background-position:center;
}
.servizi-preview-panel.is-active{ opacity:1; }
.servizi-preview-panel::before{
  content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,9,6,0) 30%, rgba(10,9,6,.86) 100%);
}
.servizi-preview-panel .p-title{ position:relative; font-family: var(--f-serif); font-style:italic; font-size:1.6rem; color: var(--cream); margin-bottom:10px; }
.servizi-preview-panel .p-desc{ position:relative; color: var(--concrete); font-size:.94rem; line-height:1.6; max-width: 40ch; }

@media (max-width: 900px){
  .servizi-grid{ grid-template-columns:1fr; }
  /* relative (non static): mantiene il blocco contenitore per i pannelli
     in position:absolute, così l'anteprima resta nel suo riquadro e non
     copre l'elenco dei servizi */
  .servizi-preview{ position:relative; top:auto; aspect-ratio:4/3; margin-top: 20px; }
  /* Titoli servizio su mobile: NIENTE clip e NIENTE spezzatura di parola.
     Su desktop il wrap ha overflow:hidden (contiene lo scorrimento
     translateX dell'hover) e il tag sta comodo a destra sulla stessa riga;
     su schermi stretti invece il tag laterale ("Cubli · Precision Motion")
     sottraeva troppa larghezza al titolo, e una parola lunga come
     "motorizzate" veniva TAGLIATA (Fabio: "motorizza" senza la -te finale
     su iPhone). Soluzione: la riga va a capo e il tag scende su una riga
     propria sotto il titolo, che così ha tutta la larghezza e manda a
     capo solo tra le parole ("Tende" / "motorizzate"), mai a metà parola. */
  .servizio-row{ flex-wrap: wrap; row-gap: 8px; }
  .servizio-title-wrap{ overflow: visible; }
  .servizio-row.is-active .servizio-title{ transform: none; }
  .servizio-tag{
    flex-basis: 100%; text-align: left; max-width: none;
    padding-left: calc(1rem + 24px); /* allinea al titolo, oltre il numero */
    opacity: .85; /* su desktop i tag si rivelano al passaggio del mouse; su
                     touch non c'è hover, quindi li mostriamo SEMPRE tutti —
                     prima solo la riga attiva mostrava il suo (Fabio: sotto
                     Tende/Arredo non si vedeva niente). */
  }
  /* Pannello anteprima servizi: su mobile è più basso (4/3) e il testo
     (titolo + descrizione) riempie quasi tutto il riquadro, finendo sopra le
     zone CHIARE della foto → la descrizione grigia non si leggeva (Fabio: "il
     testo sotto non si legge bene"). Rinforziamo il velo scuro su tutta
     l'altezza e schiariamo la descrizione. */
  .servizi-preview-panel::before{
    background: linear-gradient(180deg, rgba(10,9,6,.34) 0%, rgba(10,9,6,.58) 42%, rgba(10,9,6,.92) 100%);
  }
  .servizi-preview-panel .p-desc{ color: rgba(246,241,231,.92); }
  .servizi-preview-panel .p-title{ text-shadow: 0 2px 18px rgba(0,0,0,.5); }
}

/* ==========================================================================
   PROGETTI
   ========================================================================== */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 48px; }
.filter-btn{
  padding: 10px 20px; border:1px solid rgba(10,9,6,.18); border-radius:999px;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  color: var(--concrete-dk); transition: all .35s var(--ease-out);
}
.filter-btn.is-active, .filter-btn:hover{ background: var(--black); color: var(--cream); border-color: var(--black); }

.project-grid{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
}
.project-card{
  position:relative; overflow:hidden; border-radius:2px; grid-column: span 6;
  aspect-ratio: 4/5; cursor:none;
}
.project-card[data-size="wide"]{ grid-column: span 8; aspect-ratio: 16/9; }
.project-card[data-size="narrow"]{ grid-column: span 4; aspect-ratio: 3/4; }
.project-visual{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform: scale(1.08); transition: transform 1.1s var(--ease-out), filter .8s var(--ease-out);
  filter: saturate(.82) contrast(1.05) brightness(.94) sepia(.06);
}
.project-card:hover .project-visual{ transform: scale(1); filter: saturate(1) contrast(1.02) brightness(1) sepia(0); }
.project-card::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,9,6,0) 45%, rgba(10,9,6,.82) 100%);
}
.project-info{
  position:absolute; left:0; right:0; bottom:0; padding: 28px; z-index:2; color: var(--cream);
  transform: translateY(14px); opacity:.88; transition: transform .5s var(--ease-out);
}
.project-card:hover .project-info{ transform: translateY(0); opacity:1; }
.project-cat{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--bronze-light); margin-bottom:8px; }
.project-name{ font-family: var(--f-serif); font-size:1.5rem; }
.project-name::after{
  content:'\2192'; display:inline-block; margin-left:10px; color: var(--bronze-light);
  opacity:0; transform: translateX(-8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.project-card:hover .project-name::after{ opacity:1; transform: translateX(0); }
.project-loc{ font-size:.82rem; color: var(--concrete); margin-top:4px; }

.project-card[data-project]{ cursor:none; }

/* Soglia dedicata (600px, non i consueti 780px del resto del sito): a 780px
   la griglia passava a una colonna anche sui tablet in verticale (768px è
   la larghezza più comune, iPad incluso), sprecando lo spazio che una
   griglia a 2 colonne userebbe bene e allungando inutilmente la sezione
   (design review, 05/08). Sotto i 600px (telefoni) resta a una colonna. */
@media (max-width: 600px){
  .project-card, .project-card[data-size="wide"], .project-card[data-size="narrow"]{ grid-column: span 12; aspect-ratio: 4/5; }
}

/* ==========================================================================
   GALLERIA PROGETTO (overlay a schermo intero)
   ========================================================================== */
.project-overlay{
  position: fixed; inset:0; z-index: 700; background: var(--black); color: var(--cream);
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-in-out);
  visibility: hidden;
}
.project-overlay.is-open{ clip-path: inset(0 0 0% 0); visibility: visible; }
.project-overlay-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.project-overlay-inner{ width: var(--container); margin-inline:auto; padding: clamp(80px,10vw,140px) 0 clamp(60px,8vw,100px); }

.project-overlay-close{
  position: fixed; top: 28px; right: clamp(20px,4vw,48px); z-index: 720;
  width: 52px; height: 52px; border-radius:50%; border:1px solid rgba(246,241,231,.3);
  display:flex; align-items:center; justify-content:center; cursor:none;
  background: rgba(10,9,6,.4); backdrop-filter: blur(6px);
  transition: background .35s var(--ease-out), transform .35s var(--ease-out);
}
.project-overlay-close:hover{ background: var(--bronze); transform: rotate(90deg); }
.project-overlay-close span{ position:absolute; width:18px; height:1px; background: var(--cream); }
.project-overlay-close span:first-child{ transform: rotate(45deg); }
.project-overlay-close span:last-child{ transform: rotate(-45deg); }

.po-head{ max-width: 62ch; margin-bottom: clamp(48px,6vw,84px); }
.po-head .eyebrow{ color: var(--bronze-light); margin-bottom: 24px; }
.po-head .eyebrow::before{ background: var(--bronze-light); }
.po-title{ font-family: var(--f-serif); font-weight:500; font-size: clamp(2.4rem,5.5vw,4.6rem); line-height:1.02; letter-spacing:-.01em; }
.po-title em{ color: var(--bronze-light); }
.po-lede{ margin-top: 28px; max-width: 52ch; color: var(--concrete); font-size: clamp(1rem,1.2vw,1.15rem); line-height:1.7; }
.po-meta{ display:flex; flex-wrap:wrap; gap: clamp(28px,4vw,64px); margin-top: 40px; padding-top: 28px; border-top:1px solid rgba(246,241,231,.14); }
.po-meta li{ font-size:.92rem; color: var(--cream); }
.po-meta li span{ display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--concrete); margin-bottom:8px; }

/* --- galleria accordion orizzontale espandibile --- */
.po-strip-hint{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--concrete); margin-bottom:18px; }
.po-strip{ display:flex; gap:10px; height: min(64vh, 620px); width:100%; }
.po-panel{
  position:relative; flex: 1 1 0; min-width:0; height:100%;
  background-size:cover; background-position:center; border-radius:2px; overflow:hidden;
  cursor:none; filter: brightness(.62) saturate(.95);
  transition: flex-grow .55s var(--ease-in-out), filter .55s var(--ease-out);
}
.po-strip:hover .po-panel{ flex-grow:.5; }
.po-strip .po-panel:hover{ flex-grow: 3.2; filter: brightness(1) saturate(1); }
.po-panel::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,9,6,0) 55%, rgba(10,9,6,.8) 100%); opacity:0; transition: opacity .45s var(--ease-out); }
.po-panel:hover::after{ opacity:1; }
.po-panel-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 20px; text-align:left;
  font-family: var(--f-serif); font-size:1.05rem; color: var(--cream);
  opacity:0; transform: translateY(10px); transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.po-panel:hover .po-panel-cap{ opacity:1; transform: translateY(0); transition-delay:.12s; }

.po-foot{ margin-top: clamp(48px,6vw,80px); padding-top: 40px; border-top:1px solid rgba(246,241,231,.14); display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.po-foot p{ font-family: var(--f-serif); font-style:italic; font-size: clamp(1.3rem,2.4vw,2rem); }

/* --- lightbox --- */
.po-lightbox{
  position: fixed; inset:0; z-index: 760; background: rgba(6,5,3,.96);
  display:flex; align-items:center; justify-content:center; padding: clamp(20px,5vw,80px);
  opacity:0; visibility:hidden; transition: opacity .4s var(--ease-out), visibility .4s;
}
.po-lightbox.is-open{ opacity:1; visibility:visible; }
.po-lb-stage{ max-width: min(1100px, 92vw); max-height: 86vh; display:flex; }
.po-lb-stage img{ max-width:100%; max-height:86vh; object-fit:contain; border-radius:2px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.po-lb-close{
  position:fixed; top:28px; right: clamp(20px,4vw,48px); z-index:2; width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(246,241,231,.3); background: rgba(10,9,6,.4); display:flex; align-items:center; justify-content:center;
  cursor:none; transition: background .35s var(--ease-out), transform .35s var(--ease-out);
}
.po-lb-close:hover{ background: var(--bronze); transform: rotate(90deg); }
.po-lb-close span{ position:absolute; width:18px; height:1px; background: var(--cream); }
.po-lb-close span:first-child{ transform: rotate(45deg); }
.po-lb-close span:last-child{ transform: rotate(-45deg); }
.po-lb-nav{
  position:fixed; top:50%; transform: translateY(-50%); z-index:2; width:56px; height:56px; border-radius:50%;
  border:1px solid rgba(246,241,231,.25); background: rgba(10,9,6,.35); color: var(--cream); font-size:20px;
  cursor:none; transition: background .35s var(--ease-out), border-color .35s var(--ease-out);
}
.po-lb-nav:hover{ background: var(--bronze); border-color: transparent; }
.po-lb-prev{ left: clamp(16px,3vw,42px); }
.po-lb-next{ right: clamp(16px,3vw,42px); }
.po-lb-counter{ position:fixed; bottom:30px; left:50%; transform:translateX(-50%); z-index:2; font-size:12px; letter-spacing:.16em; color: var(--concrete); }
.po-lb-counter span{ color: var(--bronze-light); }

@media (max-width: 860px){
  .po-strip{ flex-direction:column; height:auto; gap:14px; }
  .po-panel{ flex: none; height: 68vw; filter:none; }
  .po-strip:hover .po-panel{ flex-grow:0; }
  .po-strip .po-panel:hover{ flex-grow:0; }
  .po-panel-cap{ opacity:1; transform:none; }
  .po-panel::after{ opacity:1; }
  .po-strip-hint{ display:none; }
  .project-overlay-inner{ padding-top: 100px; }
}

/* ==========================================================================
   METODO — IL SOPRALLUOGO
   ========================================================================== */
.metodo-intro{ padding-bottom: 56px; }

.metodo-scene{
  display:grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr);
  gap: clamp(32px,6vw,90px); align-items:stretch; padding-bottom: 20px;
}

/* --- pannello foto (sopralluogo reale) --- */
.metodo-photo{
  position:relative; overflow:hidden; border-radius:2px; aspect-ratio: 4/5;
  background: var(--black);
  border: 1px solid rgba(246,241,231,.1);
  opacity:0; transform: translateY(48px) scale(.96);
  transition: opacity 1.1s var(--ease-out), transform 1.2s var(--ease-out);
}
.metodo-scene.is-inview .metodo-photo{ opacity:1; transform: translateY(0) scale(1); }
.metodo-photo-img{
  position:absolute; inset:0; background-size:cover; background-position: 20% 50%;
  transform: scale(1.08); transition: transform 1.4s var(--ease-out), opacity .7s var(--ease-out), filter 1.9s linear;
  filter: blur(16px) saturate(.35) contrast(.95) brightness(.88);
  opacity:0;
}
/* Ken Burns: leggero zoom continuo per tutta la durata della scena attiva
   (6500ms, volutamente sfasato rispetto ai 6000ms della barra di
   avanzamento cosi' il "cut" alla scena successiva non risulta meccanico) */
.metodo-photo-img.is-active{
  opacity:1;
  filter: blur(0px) saturate(.9) contrast(1.04) brightness(.96);
  animation: metodoKenBurns 6500ms var(--ease-out) forwards;
}
@keyframes metodoKenBurns{
  from{ transform: scale(1.08); }
  to{ transform: scale(1.16); }
}
.metodo-photo::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background: linear-gradient(180deg, rgba(10,9,6,.1) 0%, rgba(10,9,6,0) 30%, rgba(10,9,6,.18) 62%, rgba(10,9,6,.9) 100%);
}
.metodo-photo-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family: var(--f-sans); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color: var(--cream); background: rgba(10,9,6,.55); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius:999px; border:1px solid rgba(246,241,231,.18);
}
.metodo-photo-wrap{ display:flex; flex-direction:column; }
.metodo-photo-dots{
  display:flex; gap:8px; margin-top:18px;
  opacity:0; transition: opacity .8s var(--ease-out) .3s;
}
.metodo-scene.is-inview .metodo-photo-dots{ opacity:1; }
.metodo-photo-dot{
  -webkit-appearance:none; appearance:none; border:none; background:none;
  flex:1 1 0; max-width:120px; padding:9px 0; margin:0; cursor:pointer;
}
.metodo-photo-dot-track{
  display:block; width:100%; height:3px; border-radius:999px; overflow:hidden;
  background: rgba(246,241,231,.18);
}
.metodo-photo-dot-fill{
  display:block; height:100%; width:0%; border-radius:999px; background: var(--bronze-light);
}
.metodo-photo-dot.is-done .metodo-photo-dot-fill{ width:100%; }
.metodo-photo-dot.is-active .metodo-photo-dot-fill{
  animation: metodoDotFill 6000ms linear forwards;
}
/* pausa gestita via JS (classe .is-paused) e non più con :hover: su iOS il
   :hover resta "incollato" dopo un tap e la barra si bloccava per sempre
   (Fabio: "ogni tanto si blocca"). Ora si ferma SOLO col dito premuto sulla
   foto (touch) o col mouse sopra (desktop), e riparte al rilascio. */
.metodo-photo-wrap.is-paused .metodo-photo-dot.is-active .metodo-photo-dot-fill{
  animation-play-state: paused;
}
@keyframes metodoDotFill{
  from{ width:0%; }
  to{ width:100%; }
}
@media (prefers-reduced-motion: reduce){
  .metodo-photo-dot.is-active .metodo-photo-dot-fill{ animation:none; width:60%; }
  .metodo-photo-img{ filter: saturate(.9) contrast(1.04) brightness(.96); transition: opacity .7s var(--ease-out); }
  .metodo-photo-img.is-active{ animation:none; transform: scale(1.08); }
}
.metodo-photo-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 26px 24px;
}
.metodo-photo-caption .eyebrow{ color: var(--bronze-light); margin-bottom:8px; }
.metodo-photo-desc{ font-family: var(--f-serif); font-size:1.05rem; line-height:1.5; color: var(--cream); max-width:32ch; }
.metodo-photo-caption [hidden]{ display:none !important; }

/* --- colonna testo + tappe --- */
.metodo-copy{ display:flex; flex-direction:column; justify-content:center; }
.metodo-lead{
  font-family: var(--f-serif); font-size: clamp(1.2rem,1.8vw,1.5rem); line-height:1.55;
  color: var(--cream); max-width: 56ch; margin: 18px 0 44px;
}
.metodo-list{ list-style:none; border-top:1px solid rgba(246,241,231,.14); }
.metodo-list li{
  display:grid; grid-template-columns: 52px minmax(0,140px) 1fr; align-items:baseline; gap: 18px;
  padding: 18px 4px; border-bottom:1px solid rgba(246,241,231,.14);
  opacity:0; transform: translateY(22px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), background-color .35s var(--ease-out);
}
.metodo-scene.is-inview .metodo-list li{ opacity:1; transform: translateY(0); }
.metodo-list li:nth-child(1){ transition-delay: .04s; }
.metodo-list li:nth-child(2){ transition-delay: .10s; }
.metodo-list li:nth-child(3){ transition-delay: .16s; }
.metodo-list li:nth-child(4){ transition-delay: .22s; }
.metodo-list li:nth-child(5){ transition-delay: .28s; }
.metodo-list li:nth-child(6){ transition-delay: .34s; }
.metodo-list li:hover{ background: rgba(246,241,231,.035); }
.metodo-list .m-num{
  font-family: var(--f-serif); font-style:italic; font-size:1.1rem;
  color: transparent; -webkit-text-stroke: 1px var(--bronze-dark); transition: color .4s var(--ease-out);
}
.metodo-list li:hover .m-num{ color: var(--bronze-light); -webkit-text-stroke: 0; }
.metodo-list .m-name{ font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--cream); }
.metodo-list .m-txt{ font-size:.9rem; line-height:1.6; color: var(--concrete); }

@media (max-width: 900px){
  .metodo-scene{ grid-template-columns: 1fr; gap:36px; }
  .metodo-photo{ aspect-ratio: 4/5; }
  .metodo-list li{ grid-template-columns: 40px 1fr; grid-template-areas: "num name" "txt txt"; row-gap:6px; }
  .metodo-list .m-num{ grid-area:num; }
  .metodo-list .m-name{ grid-area:name; }
  .metodo-list .m-txt{ grid-area:txt; }
}

/* ==========================================================================
   CONTATTI
   ========================================================================== */
.contatti-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(40px,6vw,110px); }
.field{ position:relative; margin-bottom: 34px; }
.field input, .field textarea, .field select{
  width:100%; border-bottom: 1px solid rgba(10,9,6,.22); padding: 12px 2px; font-size:1.05rem; background:transparent;
}
.field select{ appearance:none; -webkit-appearance:none; }
.field textarea{ resize:none; min-height: 90px; }
.field label{
  position:absolute; left:2px; top:12px; color: var(--concrete); pointer-events:none;
  font-size:1.05rem; transition: all .3s var(--ease-out);
}
.field .underline{ position:absolute; left:0; bottom:0; height:1px; width:0; background: var(--black); transition: width .4s var(--ease-out); }
.field input:focus ~ .underline, .field textarea:focus ~ .underline, .field.is-filled .underline{ width:100%; }
.field input:focus ~ label, .field textarea:focus ~ label, .field.is-filled label, .field select:focus ~ label, .field.has-value label{
  top:-16px; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--bronze-dark);
}
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap: 0 28px; }

.consent{
  display:flex; align-items:flex-start; gap: 12px; margin: -6px 0 30px; max-width: 52ch;
  font-size: .82rem; color: var(--concrete-dk); line-height:1.55; cursor:pointer;
}
.consent input{
  appearance:none; -webkit-appearance:none; flex-shrink:0;
  width: 17px; height: 17px; margin-top: 2px; border: 1px solid rgba(10,9,6,.35); border-radius: 2px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.consent input:checked{ background: var(--bronze); border-color: var(--bronze); }
.consent input:checked::after{
  content:''; width: 9px; height: 5px; margin-top: -2px;
  border-left: 1.6px solid var(--cream); border-bottom: 1.6px solid var(--cream);
  transform: rotate(-45deg);
}

.submit-btn{
  position:relative; overflow:hidden; background: var(--black); color: var(--cream);
  padding: 18px 38px; border-radius:999px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  display:inline-flex; align-items:center; gap:12px;
}
.submit-btn span.dot{ width:6px; height:6px; border-radius:50%; background: var(--bronze-light); opacity:0; transition: opacity .3s; }
.submit-btn.is-sent span.dot{ opacity:1; }

.info-block{ border-top:1px solid rgba(10,9,6,.14); padding-top: 28px; margin-bottom: 28px; }
.info-block h3{ font-family: var(--f-sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: var(--bronze-dark); margin-bottom:12px; }
.info-block p, .info-block a{ font-size:1.02rem; line-height:1.6; }
.info-block a:hover{ color: var(--bronze-dark); }

.map-frame{ margin-top: 28px; border-radius:2px; overflow:hidden; filter: grayscale(.55) sepia(.18) contrast(1.02); aspect-ratio: 16/10; background: var(--sand); }
.map-frame iframe{ width:100%; height:100%; border:0; }

@media (max-width: 900px){
  .contatti-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background: var(--black); color: var(--cream); padding-top: clamp(80px,10vw,140px); position:relative; overflow:hidden; }
.footer-outro{ padding-bottom: 80px; }
.footer-outro h2{ font-size: clamp(2.4rem,7vw,6rem); max-width: 14ch; }
.footer-outro a.mail-link{
  display:inline-flex; align-items:center; gap:16px; margin-top:36px; font-family: var(--f-serif); font-style:italic;
  font-size: clamp(1.3rem,2.6vw,2rem); border-bottom:1px solid rgba(246,241,231,.3); padding-bottom:8px;
}
.footer-cols{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding: 56px 0; border-top:1px solid rgba(246,241,231,.14); }
.footer-col h5{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--concrete); margin-bottom:18px; }
.footer-col a, .footer-col p{ display:block; font-size:.92rem; color: var(--cream); margin-bottom:10px; opacity:.85; }
.footer-col a:hover{ opacity:1; color: var(--bronze-light); }

.social-icons{ display:flex; gap:14px; margin-top:2px; }
.social-icon{
  width:42px; height:42px; margin:0 !important; border-radius:50%;
  border:1px solid rgba(246,241,231,.2);
  display:flex !important; align-items:center; justify-content:center;
  color: var(--cream); opacity:1 !important;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out);
}
.social-icon svg{ width:19px; height:19px; }
.social-icon:hover{ background: var(--bronze); border-color: var(--bronze); color: var(--black); transform: translateY(-3px); }
.footer-brand p{ color: var(--concrete); max-width: 34ch; font-size:.92rem; line-height:1.6; opacity:1; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding: 26px 0; border-top:1px solid rgba(246,241,231,.14); font-size:.78rem; color: var(--concrete); flex-wrap:wrap; gap:12px; }
.to-top{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color: var(--concrete); display:flex; align-items:center; gap:8px; }
.to-top:hover{ color: var(--cream); }
/* firma di direzione e sviluppo: icona (testa in negativo, si accende
   all'hover della riga) + nome */
.credit-line{ display:inline-flex; align-items:center; gap:12px; }
.credit-line b{ font-weight:600; color: var(--cream); opacity:.85; transition: opacity .35s var(--ease-out); }
.credit-icon{
  height:46px; width:auto; display:block; flex-shrink:0;
  margin: -9px 0; /* l'icona sborda sopra/sotto la riga senza alzarla tutta */
  opacity:.82;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.credit-line:hover .credit-icon{ opacity:1; transform: scale(1.08); }
.credit-line:hover b{ opacity:1; }
.footer-bg-word{
  position:absolute; bottom:-6%; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-family: var(--f-serif); font-size: clamp(6rem,22vw,20rem); color: transparent;
  -webkit-text-stroke: 1px rgba(246,241,231,.08); z-index:0; pointer-events:none; letter-spacing:-.02em;
}

@media (max-width: 780px){
  /* Footer ordinato su mobile: la descrizione lunga di "De Caro Contract"
     a 2 colonne lasciava un grande vuoto accanto a Sitemap (Fabio:
     "confusionaria"). Ora: descrizione a tutta larghezza in alto, poi
     Sitemap + Discipline affiancate (liste corte, stessa altezza), infine
     Social a tutta larghezza sotto. */
  .footer-cols{ grid-template-columns: 1fr 1fr; row-gap: 38px; column-gap: 28px; }
  .footer-brand{ grid-column: 1 / -1; }
  .footer-cols .footer-col:last-child{ grid-column: 1 / -1; }
  /* Watermark "DE CARO": su desktop è enorme e sbordante di proposito, con
     un filo di contorno appena percettibile. Su mobile, alla stessa scala,
     sbordava così tanto che se ne vedeva solo un frammento centrale e il
     filo sottile risultava confuso/illeggibile (Fabio). Qui lo
     ridimensioniamo perché "DE CARO" entri INTERO nella larghezza dello
     schermo e alziamo un filo il contorno così si legge pulito e resta
     elegante come su desktop. */
  .footer-bg-word{
    font-size: clamp(3.2rem, 17vw, 6.5rem);
    -webkit-text-stroke: .6px rgba(246,241,231,.16);
    bottom: 1.5%;
  }
  /* icona "testa" del credito Fabio Fiorentino: a 46px risultava sproporzionata
     rispetto al testo piccolo del footer su mobile (Fabio). Ridimensionata a
     una proporzione più equilibrata col nome accanto. */
  .credit-icon{ height: 30px; margin: -5px 0; }
}

/* ==========================================================================
   ILLUMINAZIONE — modale scelta partner
   ========================================================================== */
.lux-modal{
  position:fixed; inset:0; z-index:750;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .5s var(--ease-out), visibility 0s linear .5s;
}
.lux-modal.is-open{
  opacity:1; visibility:visible; pointer-events:auto;
  transition: opacity .5s var(--ease-out), visibility 0s;
}
.lux-backdrop{ position:absolute; inset:0; background: rgba(10,9,6,.78); backdrop-filter: blur(14px); }
.lux-inner{
  position:relative; width:min(880px, 92vw); max-height: 90vh; overflow-y:auto;
  padding: clamp(36px,5vw,64px);
  background: var(--black-soft); border:1px solid var(--black-line); border-radius:6px;
  box-shadow: 0 60px 160px rgba(0,0,0,.65); color: var(--cream);
  transform: translateY(18px); transition: transform .55s var(--ease-out);
}
.lux-modal.is-open .lux-inner{ transform: translateY(0); }
.lux-close{ position:absolute; top:16px; right:16px; }
.lux-kicker{
  font-family: var(--f-sans); font-size:11px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color: var(--bronze-light); margin-bottom:18px;
}
.lux-title{
  font-family: var(--f-serif); font-weight:400; line-height:1.05; letter-spacing:-.015em;
  font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 36px;
}
.lux-title em{ font-style:italic; color: var(--bronze-light); }
.lux-cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
/* Architettura a "doppio bordo": una scocca esterna sottile (come un vassoio
   in metallo) che contiene il pannello vero e proprio, con raggi concentrici
   e un filo di luce interno — invece di una card piatta con un solo bordo
   (04/09 — high-end-visual-design). */
.lux-card{
  display:block; padding:6px; border-radius:26px;
  border:1px solid var(--black-line); background: rgba(246,241,231,.03);
  text-decoration:none; color: var(--cream);
  transition: transform .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out), background-color .4s var(--ease-out);
}
.lux-card-inner{
  display:flex; flex-direction:column; gap:12px; min-height: 190px;
  padding: 28px 26px 24px; border-radius:20px;
  background: var(--black);
  box-shadow: inset 0 1px 1px rgba(246,241,231,.09);
}
.lux-card:hover{
  transform: translateY(-4px);
  border-color: rgba(203,174,120,.5);
  background: rgba(246,241,231,.06);
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.lux-card-brand{ font-family: var(--f-serif); font-size: 1.7rem; }
.lux-card-desc{ font-family: var(--f-sans); font-weight:300; font-size:.95rem; line-height:1.55; color: rgba(246,241,231,.7); }
.lux-card-cta{
  margin-top:auto; font-family: var(--f-sans); font-size:11px; font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color: var(--bronze-light);
  transition: letter-spacing .35s var(--ease-out);
}
.lux-card:hover .lux-card-cta{ letter-spacing:.3em; }
@media (max-width: 700px){
  .lux-cards{ grid-template-columns:1fr; }
  .lux-card-inner{ min-height:0; }
}

/* ==========================================================================
   MISC
   ========================================================================== */
.section-num{
  position:absolute; top: clamp(48px,7vw,90px); right: var(--gutter); font-family: var(--f-serif); font-style:italic;
  font-size: 13px; color: var(--bronze); letter-spacing:.04em;
}

/* parola-filigrana gigante sullo sfondo delle sezioni: uno strato in più di
   profondità, mosso in parallasse dallo scroll (main.js). Quasi invisibile
   da ferma — è il movimento relativo a farla percepire. */
.bg-word{
  position:absolute; top: 12%; left: -1.5%; z-index:0;
  font-family: var(--f-serif); font-style:italic; font-weight:400;
  font-size: clamp(7rem, 24vw, 22rem); line-height:1; white-space:nowrap;
  color: rgba(10,9,6,.045);
  pointer-events:none; user-select:none;
}
.section--dark .bg-word{ color: rgba(246,241,231,.035); }
/* su mobile il titolo è in alto e il watermark "Dal 2009" (grande, top:12%)
   scivolava dietro il PARAGRAFO di testo rendendolo confuso (Fabio). Qui lo
   rimpiccioliamo e lo alziamo così resta dietro il TITOLO come su desktop,
   senza sovrapporsi al corpo del testo. */
@media (max-width: 760px){
  .bg-word{ top: 0.5%; font-size: clamp(3.2rem, 17vw, 5.5rem); }
}

/* "Palermo", in Progetti, viene spinta dal parallasse (main.js, ±120px)
   sopra e sotto la sua posizione di riposo: nella parte bassa del suo
   percorso finisce dietro le foto-progetto (opache) e sparisce del tutto
   (Fabio, 23/07). In Azienda "Dal 2009" scorre su testo/spazio vuoto quindi
   il problema non si presenta lì. Qui la portiamo sopra le foto — resta
   comunque sotto le info-overlay che compaiono in hover (z-index:2) così il
   nome/categoria progetto è sempre leggibile — pointer-events:none la rende
   trasparente al click, quindi le card restano cliccabili come prima. */
#progetti .bg-word{ z-index: 1; }

/* ==========================================================================
   SERVIZI — riga apribile (Domotica)
   ========================================================================== */
.servizio-row.is-openable{ cursor: pointer; }

/* ==========================================================================
   DOMOTICA — overlay cinematografico
   ========================================================================== */
.dom-overlay{
  position: fixed; inset:0; z-index: 700; background: var(--black); color: var(--cream);
  opacity:0; visibility:hidden; pointer-events:none;
  transform: scale(1.02);
  transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), visibility 0s linear .6s;
}
.dom-overlay.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform: scale(1);
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), visibility 0s;
}

/* topbar + progress */
.dom-topbar{
  position:absolute; top:0; left:0; right:0; height: 62px; z-index: 20;
  display:flex; align-items:center; gap: 20px;
  padding: 0 calc(var(--gutter) + 64px) 0 var(--gutter);
  pointer-events:none;
  transition: opacity .45s var(--ease-out);
}
/* nell'outro il percorso è completo: la topbar si ritira e non invade i contenuti */
.dom-overlay.is-outro .dom-topbar{ opacity:0; }
.dom-topbar-label{
  font-family: var(--f-sans); font-size: 11px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color: var(--bronze-light);
}
.dom-progress{ flex:1; max-width: 220px; height:2px; background: rgba(246,241,231,.16); overflow:hidden; }
.dom-progress-fill{ display:block; height:100%; width:100%; transform: scaleX(0); transform-origin:left; background: var(--bronze-light); transition: transform .1s linear; }

/* close */
.dom-close{
  position:absolute; top: 12px; right: var(--gutter); z-index: 30;
  width:46px; height:46px; border-radius:999px; border:1px solid rgba(246,241,231,.28);
  background: rgba(19,18,16,.4); backdrop-filter: blur(6px); cursor:pointer;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.dom-close:hover{ background: var(--bronze); border-color: var(--bronze); transform: rotate(90deg); }
.dom-close span{ position:absolute; top:50%; left:50%; width:16px; height:1.4px; background: var(--cream); }
.dom-close span:nth-child(1){ transform: translate(-50%,-50%) rotate(45deg); }
.dom-close span:nth-child(2){ transform: translate(-50%,-50%) rotate(-45deg); }
.dom-close:hover span{ background: var(--black); }

/* scroller + runway */
.dom-scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling: touch; }
.dom-track{ position:relative; height: 640vh; }
.dom-track--seq{ height: var(--seq-track, 920vh); } /* corsia extra: il video completa prima delle dissolvenze */
.dom-stage{
  position: sticky; top:0; height:100vh; height:100dvh; overflow:hidden;
}
.dom-stage::after{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:6;
  background: radial-gradient(130% 105% at 50% 26%, transparent 46%, rgba(0,0,0,.55) 100%);
}

/* chapter layers */
.dom-ch{
  position:absolute; inset:0; z-index:2; opacity:0; will-change: opacity;
  background: var(--black); /* opaco: la tendina copre il capitolo uscente, niente sovrapposizioni */
  display:grid; grid-template-columns: 1fr 1fr; align-items:center;
  gap: clamp(24px, 5vw, 88px);
  padding: 92px clamp(40px, 8vw, 130px) 12vh;
}
.dom-ch-bg{
  position:absolute; inset:0; z-index:-1; background-size:cover; background-position:center;
  filter: blur(34px) brightness(.34) saturate(.85); transform: scale(1.2); opacity:.5;
  will-change: transform; /* ora mosso in parallasse dal render() (multi-layer) */
}
.dom-ch-fig{
  position:relative; grid-column:1; display:flex; align-items:center; justify-content:center;
  height: min(74vh, 660px);
}
.dom-ch-fig img,
.dom-ch-fig canvas,
.dom-ch-fig video{
  max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain;
  border-radius: 5px; box-shadow: 0 46px 130px rgba(0,0,0,.62);
}
.dom-ch-fig canvas,
.dom-ch-fig video{ background: var(--black); }
.dom-ch-copy{
  grid-column:2; display:flex; flex-direction:column; align-items:flex-start;
  max-width: 46ch;
}
.dom-ch[data-side="right"] .dom-ch-fig{ grid-column:2; }
.dom-ch[data-side="right"] .dom-ch-copy{ grid-column:1; grid-row:1; align-items:flex-end; text-align:right; }
/* capitolo header full-bleed: il video riempie lo stage, copy in overlay */
.dom-ch--full{ display:block; padding:0; }
.dom-ch--full .dom-ch-fig{ position:absolute; inset:0; height:auto !important; display:block; }
.dom-ch--full .dom-ch-fig canvas,
.dom-ch--full .dom-ch-fig video{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; border-radius:0; box-shadow:none; display:block;
  transform-origin: 50% 50%;
}
.dom-ch--full::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(10,9,6,.38) 0%, rgba(10,9,6,0) 30%, rgba(10,9,6,0) 52%, rgba(10,9,6,.72) 100%);
  /* durante il rientro del video-hero (capitolo con <video>) questa dissolve
     insieme al rimpicciolimento, guidata via JS con --vgo (vignette opacity) */
  opacity: var(--vgo, 1);
}
.dom-ch--full .dom-ch-copy{
  position:absolute; left: clamp(24px,6vw,90px); right: clamp(24px,6vw,90px); bottom: 9vh; z-index:2;
  max-width:none; align-items:center; text-align:center; margin: 0 auto;
  /* nascosto finché il video reale non raggiunge il momento giusto (vedi
     initHeroTitleReveal in main.js, classe .is-revealed) — non più legato 1:1
     allo scroll: un'unica rivelazione elegante, non un'apparizione/sparizione
     a scatto. Durante il rimpicciolimento verso il capitolo successivo lo
     JS riprende il controllo dell'opacità (vedi render()). */
  opacity: 0;
  transform: translateY(46px) scale(1.07);
  letter-spacing: .02em;
  transition: opacity 1.4s var(--ease-out), transform 1.4s var(--ease-out), letter-spacing 1.4s var(--ease-out);
}
.dom-ch--full .dom-ch-copy.is-revealed{
  opacity: 1;
  transform: translateY(0) scale(1);
  letter-spacing: 0em;
}
.dom-ch--full .dom-ch-title{ font-size: clamp(2.6rem, 5.5vw, 4.6rem); }

/* capitolo fotografico a schermo pieno: immagine cover, dicitura nell'angolo */
.dom-ch--photo{ display:block; padding:0; }
.dom-ch--photo .dom-ch-fig{ position:absolute; inset:0; height:auto !important; display:block; }
.dom-ch--photo .dom-ch-fig img{
  width:100%; height:100%; max-width:none; max-height:none;
  object-fit:cover; border-radius:0; box-shadow:none;
}
.dom-ch--photo::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(0deg, rgba(10,9,6,.84) 0%, rgba(10,9,6,.34) 32%, rgba(10,9,6,0) 58%);
}
.dom-ch--photo .dom-ch-copy{
  position:absolute; z-index:2; left: clamp(24px, 5vw, 84px); right:auto;
  bottom: clamp(56px, 9vh, 100px);
  max-width: 44ch; align-items:flex-start; text-align:left;
}
.dom-ch--photo[data-side="right"] .dom-ch-copy{
  left:auto; right: clamp(24px, 5vw, 84px);
  align-items:flex-end; text-align:right;
}
.dom-ch--photo .dom-ch-title{ font-size: clamp(2.2rem, 4.2vw, 3.8rem); }
.dom-ch--photo .dom-ch-text{ font-size: clamp(.95rem, 1.05vw, 1.08rem); }

/* immagini scontornate (PNG con trasparenza): niente cornice né ombra */
.dom-ch-fig img.fig-cutout{
  border-radius:0; box-shadow:none;
  filter: drop-shadow(0 40px 60px rgba(0,0,0,.55));
}

/* nota piccola asteriscata (es. app in fase di sviluppo) */
.dom-ch-note{
  margin-top: 12px; font-family: var(--f-sans); font-size: 10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color: rgba(246,241,231,.42);
  opacity:0; transform: translateY(26px); transition: opacity .9s var(--ease-out) .46s, transform .9s var(--ease-out) .46s;
}
.dom-ch.is-active .dom-ch-note{ opacity:1; transform: translateY(0); }

.dom-ch[data-side="center"]{ grid-template-columns: 1fr; justify-items:center; align-content:center; text-align:center; gap: 0; }
.dom-ch[data-side="center"] .dom-ch-fig{ grid-column:1; height:min(42vh, 430px); margin-bottom: 10px; }
.dom-ch[data-side="center"] .dom-ch-copy{ grid-column:1; align-items:center; max-width: 46ch; }
.dom-ch[data-side="center"] .dom-ch-title{ font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.dom-ch[data-side="center"] .dom-ch-kicker{ margin-bottom: 14px; }
.dom-ch[data-side="center"] .dom-ch-text{ margin-top: 18px; }

.dom-ch-kicker{
  font-family: var(--f-sans); font-size: 11px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color: var(--bronze-light); margin-bottom: 22px;
  /* animazione più marcata (richiesta da Fabio): parte da più lontano, con più
     respiro tra un elemento e l'altro, invece di una traslazione minima quasi
     impercettibile */
  opacity:0; transform: translateY(38px); transition: opacity .95s var(--ease-out) .06s, transform .95s var(--ease-out) .06s;
}
.dom-ch-title{
  font-family: var(--f-serif); font-weight:400; line-height: 1.02;
  font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing:-.015em; color: var(--cream);
  opacity:0; transform: translateY(64px) scale(1.035);
  transition: opacity 1.1s var(--ease-out) .18s, transform 1.1s var(--ease-out) .18s, letter-spacing 1.1s var(--ease-out) .18s;
}
.dom-ch-title em{ font-style: italic; color: var(--bronze-light); }
.dom-ch-text{
  margin-top: 26px; font-family: var(--f-sans); font-weight:300; font-size: clamp(1rem, 1.15vw, 1.18rem);
  line-height: 1.62; color: rgba(246,241,231,.74); max-width: 44ch;
  text-wrap: pretty; /* evita parole orfane a fine paragrafo */
  opacity:0; transform: translateY(44px); transition: opacity 1s var(--ease-out) .32s, transform 1s var(--ease-out) .32s;
}
.dom-ch.is-active .dom-ch-kicker,
.dom-ch.is-active .dom-ch-title,
.dom-ch.is-active .dom-ch-text{ opacity:1; transform: translateY(0) scale(1); }
/* designazione prodotto (sostituisce le diciture stampate nelle foto) */
.dom-ch-spec{
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--black-line);
  font-family: var(--f-sans); font-size: 11px; font-weight:600; letter-spacing:.24em;
  text-transform:uppercase; color: var(--bronze-light); align-self: stretch;
  opacity:0; transform: translateY(30px); transition: opacity .95s var(--ease-out) .4s, transform .95s var(--ease-out) .4s;
}
.dom-ch[data-side="right"] .dom-ch-spec{ text-align:right; }
.dom-ch.is-active .dom-ch-spec{ opacity:1; transform: translateY(0); }

/* outro */
.dom-outro{
  position:relative; z-index:2; background: var(--black); color: var(--cream);
  padding: 17vh clamp(40px,8vw,130px) 15vh; border-top:1px solid var(--black-line);
}
.dom-outro-inner{ max-width: 920px; margin: 0 auto; }
.dom-outro-brand{
  display:block; width: min(190px, 42vw); border-radius: 5px;
  margin: 0 0 40px; box-shadow: 0 22px 70px rgba(0,0,0,.5);
  border: 1px solid rgba(246,241,231,.08);
}
.dom-outro-brand--wide{ width: min(280px, 58vw); }
.dom-outro-kicker{
  font-family: var(--f-sans); font-size: 11px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color: var(--bronze-light); margin-bottom: 24px;
}
.dom-outro-title{
  font-family: var(--f-serif); font-weight:400; line-height:1.03; letter-spacing:-.015em;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); color: var(--cream);
}
.dom-outro-title em{ font-style:italic; color: var(--bronze-light); }
.dom-outro-lede{
  margin-top: 30px; font-family: var(--f-sans); font-weight:300; font-size: clamp(1.02rem,1.2vw,1.24rem);
  line-height:1.65; color: rgba(246,241,231,.78); max-width: 62ch;
}
.dom-outro-lede strong{ color: var(--cream); font-weight:600; }
.dom-spec{
  list-style:none; display:grid; grid-template-columns: repeat(2, 1fr); gap:1px;
  background: var(--black-line); border:1px solid var(--black-line); margin: 46px 0 44px;
}
.dom-spec li{ background: var(--black); padding: 24px 26px; font-family: var(--f-sans); font-size:.98rem; color: rgba(246,241,231,.82); line-height:1.5; }
.dom-spec li span{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color: var(--bronze-light); margin-bottom:10px; }
.dom-outro-cta{ margin-top: 8px; }

/* coppie schizzo -> render: hover (o tap) dissolve sul render */
.fig-pair{
  position:relative; width:100%; overflow:hidden; border-radius:5px; box-shadow: 0 46px 130px rgba(0,0,0,.62); cursor:pointer;
  /* effetto a comparsa a inizio slide (richiesto da Fabio): il riquadro
     schizzo/render nasce leggermente sotto e più piccolo, poi sale e si
     ingrandisce dissolvendo in scena — stesso linguaggio delle animazioni
     già presenti su kicker/titolo/testo del capitolo (classe "is-active"
     già gestita da render() in js/main.js, nessun codice JS nuovo). */
  opacity:0; transform: translateY(64px) scale(.92);
  transition: opacity 1.2s var(--ease-out) .08s, transform 1.3s var(--ease-out) .08s;
}
.dom-ch.is-active .fig-pair{ opacity:1; transform: translateY(0) scale(1); }
.fig-pair img{
  position:absolute; inset:0; width:100%; height:100%; max-height:none; max-width:none;
  object-fit:cover; border-radius:0; box-shadow:none; margin:0;
}
.fig-pair .pair-render{ opacity:0; transition: opacity .8s var(--ease-out); }
.fig-pair:hover .pair-render,
.fig-pair.show-render .pair-render{ opacity:1; }
.pair-hint{
  position:absolute; left:16px; bottom:16px; z-index:3;
  font-family: var(--f-sans); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color: var(--cream); background: rgba(10,9,6,.55); backdrop-filter: blur(8px);
  padding: 9px 14px; border-radius:999px; border:1px solid rgba(246,241,231,.18);
  transition: opacity .4s var(--ease-out); pointer-events:none;
  animation: hintPulse 2.4s var(--ease-in-out) infinite;
}
.ph-touch{ display:none; }
@media (hover: none){
  .ph-desktop{ display:none; }
  .ph-touch{ display:inline; }
}
@keyframes hintPulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(203,174,120,0); border-color: rgba(246,241,231,.18); }
  50%{ box-shadow: 0 0 0 9px rgba(203,174,120,.14); border-color: rgba(203,174,120,.65); }
}
.fig-pair:hover .pair-hint,
.fig-pair.show-render .pair-hint{ opacity:0; }
/* anteprima automatica: entrando nel capitolo il render appare un attimo e torna schizzo */
.dom-ch.is-active .fig-pair .pair-render{
  animation: pairPeek 2.8s var(--ease-in-out) .7s 1;
}
@keyframes pairPeek{
  0%, 10%{ opacity:0; }
  45%, 60%{ opacity:1; }
  100%{ opacity:0; }
}
/* il mouse ha sempre la precedenza sull'anteprima automatica */
.dom-ch.is-active .fig-pair:hover .pair-render,
.dom-ch.is-active .fig-pair.show-render .pair-render{ animation: none; }

/* moodboard: tavola materiali richiamabile nello stesso riquadro */
.fig-pair img.pair-mood{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: contain; background: #f5f1e8;
  opacity:0; z-index:1; pointer-events:none;
  transition: opacity .5s var(--ease-out);
}
.fig-pair.show-mood .pair-mood{ opacity:1; }
.pair-mood-btn{
  position:absolute; left:16px; bottom:16px; z-index:4;
  display:flex; align-items:center; gap:9px;
  padding:9px 16px 9px 13px; border:1px solid rgba(246,241,231,.28); border-radius:999px;
  background: rgba(10,9,6,.55); backdrop-filter: blur(8px); color: var(--cream); cursor:pointer;
  font-family: var(--f-sans); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out), opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.pair-mood-btn i{
  width:11px; height:11px; flex-shrink:0; border-radius:1px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 4.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 4.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 4.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 4.5px 4.5px no-repeat;
}
.pair-mood-btn:hover{ background: var(--bronze); border-color: var(--bronze); color: var(--black); transform: translateY(-2px); }
.fig-pair.show-mood .pair-mood-btn{ background: var(--bronze-light); border-color: var(--bronze-light); color: var(--black); }
.fig-pair.playing .pair-mood-btn{ opacity:0; pointer-events:none; }

/* terzo stato: il render animato parte nello stesso riquadro */
.pair-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; z-index:2; pointer-events:none; background:#000;
  transition: opacity .5s var(--ease-out);
}
.fig-pair.playing .pair-video{ opacity:1; pointer-events:auto; }
.pair-play{
  position:absolute; right:16px; bottom:16px; z-index:4;
  display:flex; align-items:center; gap:9px;
  padding:9px 16px 9px 13px; border:1px solid rgba(246,241,231,.28); border-radius:999px;
  background: rgba(10,9,6,.55); backdrop-filter: blur(8px); color: var(--cream); cursor:pointer;
  font-family: var(--f-sans); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.pair-play span{ width:0; height:0; border-style:solid; border-width:6px 0 6px 11px; border-color: transparent transparent transparent currentColor; }
.pair-play:hover{ background: var(--bronze); border-color: var(--bronze); color: var(--black); transform: translateY(-2px); }
.fig-pair.playing .pair-play,
.fig-pair.playing .pair-hint{ opacity:0; pointer-events:none; }

/* ==========================================================================
   ARREDO — L'ATELIER: palcoscenico unico interattivo
   (sostituisce le otto slide ripetitive: un solo quadro, otto ambienti,
   slider trascinabile schizzo→render, render animato e moodboard)
   ========================================================================== */
.dom-ch--atelier{ display:block; padding:0; }

.atelier-view{
  position:absolute; left: clamp(24px, 4vw, 64px); top: 84px; bottom: 148px;
  right: clamp(360px, 33vw, 540px);
  border-radius: 6px; overflow:hidden; cursor: ew-resize;
  box-shadow: 0 46px 130px rgba(0,0,0,.62);
  background: var(--black-soft);
  /* comparsa a inizio capitolo, stesso linguaggio dei riquadri precedenti */
  opacity:0; transform: translateY(64px) scale(.94);
  transition: opacity 1.2s var(--ease-out) .08s, transform 1.3s var(--ease-out) .08s;
}
.dom-ch.is-active .atelier-view{ opacity:1; transform: translateY(0) scale(1); }
.atelier-view img.at-render,
.atelier-view img.at-sketch{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition: opacity .3s var(--ease-out);
}
/* lo schizzo sta sopra, ritagliato a sinistra della linea (clip-path da JS) */
.atelier-view img.at-sketch{ clip-path: inset(0 50% 0 0); }
.dom-ch--atelier.is-switching .at-render,
.dom-ch--atelier.is-switching .at-sketch{ opacity:0; }

.at-divider{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:3;
  background: rgba(246,241,231,.85);
  box-shadow: 0 0 18px rgba(10,9,6,.55);
  cursor: ew-resize; touch-action:none;
}
.at-divider::before{ /* zona di presa più larga della linea visibile */
  content:''; position:absolute; top:0; bottom:0; left:-16px; right:-16px;
}
.at-grip{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:48px; height:48px; border-radius:999px;
  background: rgba(10,9,6,.55); border:1px solid rgba(246,241,231,.5);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center; gap:7px;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), transform .25s var(--ease-out);
}
.at-divider:hover .at-grip,
.at-divider:focus-visible .at-grip{ background: var(--bronze); border-color: var(--bronze); transform: translate(-50%,-50%) scale(1.08); }
.at-grip i{
  width:0; height:0; border-style:solid;
}
.at-grip i:first-child{ border-width:5px 7px 5px 0; border-color: transparent var(--cream) transparent transparent; }
.at-grip i:last-child{ border-width:5px 0 5px 7px; border-color: transparent transparent transparent var(--cream); }
.at-divider:hover .at-grip i:first-child,
.at-divider:focus-visible .at-grip i:first-child{ border-right-color: var(--black); }
.at-divider:hover .at-grip i:last-child,
.at-divider:focus-visible .at-grip i:last-child{ border-left-color: var(--black); }

.at-tag{
  position:absolute; top:16px; z-index:2; pointer-events:none;
  font-family: var(--f-sans); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color: var(--cream); background: rgba(10,9,6,.55); backdrop-filter: blur(8px);
  padding: 8px 14px; border-radius:999px; border:1px solid rgba(246,241,231,.18);
  transition: opacity .35s var(--ease-out);
}
.at-tag--sk{ left:16px; }
.at-tag--rn{ right:16px; }

/* moodboard nello stesso quadro */
.at-mood{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  background:#f5f1e8; z-index:4; opacity:0; pointer-events:none;
  transition: opacity .45s var(--ease-out);
}
.atelier-view.show-mood .at-mood{ opacity:1; }

/* render animato nello stesso quadro */
.at-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:#000; z-index:5; opacity:0; pointer-events:none;
  transition: opacity .45s var(--ease-out);
}
.atelier-view.playing .at-video{ opacity:1; pointer-events:auto; }
/* con video o moodboard attivi, lo slider si mette da parte */
.atelier-view.playing .at-divider,
.atelier-view.playing .at-tag,
.atelier-view.show-mood .at-divider,
.atelier-view.show-mood .at-tag{ opacity:0; pointer-events:none; }

/* colonna testo a destra: centrata in verticale senza transform (il transform
   inline è riservato all'animazione di ingresso pilotata da render()) */
.atelier-copy{
  position:absolute; right: clamp(28px, 4.5vw, 80px); top:84px; bottom:148px;
  width: clamp(290px, 24vw, 400px); max-width:none;
  display:flex; flex-direction:column; justify-content:center;
}
.atelier-copy-inner{
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.dom-ch--atelier.is-switching .atelier-copy-inner{ opacity:0; transform: translateY(14px); }
/* la colonna testo dell'atelier è centrata (.dom-ch[data-side="center"] ha
   text-align:center), ma un flex-container non eredita l'allineamento del
   testo — senza questa riga i pulsanti restano incollati a sinistra mentre
   titolo e paragrafo sopra sono centrati (segnalato da Fabio sulla scena
   "Camera" — 17/08). */
.atelier-actions{ display:flex; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap; }
.at-action{
  display:flex; align-items:center; gap:9px;
  padding:10px 17px 10px 14px; border:1px solid rgba(246,241,231,.28); border-radius:999px;
  background: rgba(10,9,6,.55); backdrop-filter: blur(8px); color: var(--cream); cursor:pointer;
  font-family: var(--f-sans); font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out), transform .35s var(--ease-out);
}
.at-action[hidden]{ display:none; } /* l'attributo hidden deve vincere sul display:flex */
.at-mood[hidden]{ display:none; }
.at-action:hover{ background: var(--bronze); border-color: var(--bronze); color: var(--black); transform: translateY(-2px); }
.at-action[aria-pressed="true"]{ background: var(--bronze-light); border-color: var(--bronze-light); color: var(--black); }
.at-play-ico{ width:0; height:0; border-style:solid; border-width:5px 0 5px 9px; border-color: transparent transparent transparent currentColor; }
.at-mood-ico{
  width:11px; height:11px; flex-shrink:0; border-radius:1px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / 4.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 4.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 4.5px 4.5px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 4.5px 4.5px no-repeat;
}

/* selettore degli ambienti: la fila di provini in basso */
.atelier-rooms{
  position:absolute; left: clamp(24px,4vw,64px); right: clamp(24px,4vw,64px); bottom:26px;
  display:flex; gap:10px; justify-content:center; z-index:6;
}
.at-room{
  position:relative; flex:0 1 clamp(92px, 9.5vw, 132px); border-radius:4px; overflow:hidden;
  border:1px solid rgba(246,241,231,.16); cursor:pointer; padding:0; background:#000;
  opacity:.55; filter: saturate(.55) brightness(.85);
  transition: opacity .4s var(--ease-out), filter .4s var(--ease-out), border-color .4s var(--ease-out), transform .4s var(--ease-out);
}
.at-room img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.at-room span{
  position:absolute; left:0; right:0; bottom:0; padding:14px 7px 6px;
  font-family: var(--f-sans); font-size:8.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color: var(--cream); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background: linear-gradient(180deg, rgba(10,9,6,0) 0%, rgba(10,9,6,.85) 100%);
}
.at-room:hover{ opacity:.85; filter: saturate(.85) brightness(.95); transform: translateY(-3px); }
.at-room.is-active{
  opacity:1; filter:none; border-color: var(--bronze);
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
/* comparsa scaglionata dei provini all'attivazione del capitolo */
.at-room{ transition-property: opacity, filter, border-color, transform; }
.dom-ch--atelier .at-room{ opacity:0; transform: translateY(26px); }
.dom-ch--atelier.is-active .at-room{ opacity:.55; transform: translateY(0); }
.dom-ch--atelier.is-active .at-room.is-active{ opacity:1; }
.dom-ch--atelier.is-active .at-room:nth-child(1){ transition-delay: .12s; }
.dom-ch--atelier.is-active .at-room:nth-child(2){ transition-delay: .18s; }
.dom-ch--atelier.is-active .at-room:nth-child(3){ transition-delay: .24s; }
.dom-ch--atelier.is-active .at-room:nth-child(4){ transition-delay: .30s; }
.dom-ch--atelier.is-active .at-room:nth-child(5){ transition-delay: .36s; }
.dom-ch--atelier.is-active .at-room:nth-child(6){ transition-delay: .42s; }
.dom-ch--atelier.is-active .at-room:nth-child(7){ transition-delay: .48s; }
.dom-ch--atelier.is-active .at-room:nth-child(8){ transition-delay: .54s; }
.dom-ch--atelier.is-active .at-room:hover{ opacity:.85; }

@media (max-width: 900px){
  .dom-ch--atelier{ padding: 64px var(--gutter) 40px; }
  .atelier-view{
    position:relative; inset:auto; width:100%; height:52vh;
    opacity:1; transform:none; margin-bottom:20px;
  }
  .atelier-copy{ position:static; width:auto; display:block; }
  .atelier-rooms{
    position:static; margin-top:20px; justify-content:flex-start;
    overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch;
  }
  .at-room{ flex:0 0 96px; opacity:.55 !important; transform:none !important; }
  .at-room.is-active{ opacity:1 !important; }
}

/* galleria di render animati nell'outro */
.dom-videos{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 46px 0 44px;
}
.dom-videos video{
  display:block; width:100%; background:#000;
}
.video-card{
  position:relative; border-radius:4px; overflow:hidden;
  border:1px solid var(--black-line); background:#000;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out);
}
.video-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 64px rgba(0,0,0,.55);
  border-color: rgba(203,174,120,.35);
}
.video-play{
  position:absolute; inset:0 0 44px 0; /* la barra dei controlli resta libera */
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, rgba(10,9,6,.05), rgba(10,9,6,.28));
  border:0; cursor:pointer; padding:0;
  transition: opacity .35s var(--ease-out);
}
.video-play span{
  width:76px; height:76px; border-radius:999px;
  background: rgba(10,9,6,.55); border:1px solid rgba(246,241,231,.4);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition: transform .35s var(--ease-out), background .35s var(--ease-out);
}
.video-play span::after{
  content:''; width:0; height:0; margin-left:6px;
  border-style:solid; border-width:13px 0 13px 21px;
  border-color: transparent transparent transparent var(--cream);
  transition: border-color .35s var(--ease-out);
}
.video-play:hover span{ transform: scale(1.1); background: var(--bronze); }
.video-play:hover span::after{ border-left-color: var(--black); }
.video-card.is-playing .video-play{ opacity:0; pointer-events:none; }

/* scroll hint — identica per dimensioni/animazione a .scroll-cue dell'hero */
.dom-hint{
  position:absolute; left:50%; bottom: 30px; transform: translateX(-50%); z-index: 18;
  display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--concrete); pointer-events:none;
  transition: opacity .5s var(--ease-out);
}
.dom-hint .line{ width:1px; height:40px; background: rgba(246,241,231,.25); position:relative; overflow:hidden; }
.dom-hint .line::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background: var(--bronze-light); animation: scrollcue 2.2s var(--ease-in-out) infinite; }
.dom-scroll.is-scrolled .dom-hint{ opacity:0; }
/* durante l'autoplay (pausa + video) l'invito resta nascosto */
.dom-scroll.autoplaying .dom-hint{ opacity:0; }
/* a fine autoplay l'invito a scorrere riappare */
.dom-scroll.show-hint .dom-hint{ opacity:1; }

/* mobile / stacked fallback */
@media (max-width: 860px){
  .dom-track{ height:auto; }
  .dom-stage{ position: static; height:auto; overflow:visible; }
  .dom-stage::after{ display:none; }
  .dom-ch{
    position: static; opacity:1 !important; display:block; padding: 64px var(--gutter) 40px;
    border-bottom:1px solid var(--black-line);
  }
  .dom-ch-bg{ display:none; }
  .dom-ch-fig{ height:auto !important; display:block; grid-column:auto !important; margin-bottom: 26px; }
  .dom-ch-fig img,
  .dom-ch-fig canvas,
  .dom-ch-fig video{ display:block; width:100%; height: 54vh; object-fit: cover; transform:none !important; }
  .dom-ch--full{ padding: 64px var(--gutter) 40px; }
  .dom-ch--photo{ padding: 64px var(--gutter) 40px; }
  .dom-ch--photo .dom-ch-fig{ position:static; margin-bottom: 26px; }
  .dom-ch--photo .dom-ch-fig img{ height: 54vh; border-radius:5px; }
  .dom-ch--photo::after{ display:none; }
  .dom-ch--photo .dom-ch-copy{ position:static; max-width:none; }
  .dom-ch--full .dom-ch-fig{ position:static; margin-bottom:26px; }
  .dom-ch--full .dom-ch-fig canvas,
  .dom-ch--full .dom-ch-fig video{ height:54vh; border-radius:5px; }
  .dom-ch--full::after{ display:none; }
  .dom-ch--full .dom-ch-copy{ position:static; text-align:left !important; }
  .dom-ch--full .dom-ch-title{ font-size: clamp(2.2rem, 9vw, 3rem); }
  .dom-ch[data-side="center"] .dom-ch-fig{ height:auto; margin-bottom:26px; }
  .dom-ch-copy{ max-width:none; align-items:flex-start !important; text-align:left !important; }
  .dom-ch-kicker, .dom-ch-title, .dom-ch-text{ opacity:1 !important; transform:none !important; }
  .dom-spec{ grid-template-columns: 1fr; }
  .fig-pair{ height: 54vh !important; }
  .dom-videos{ grid-template-columns: 1fr; }
  /* invito "Scorri" NASCOSTO su mobile: il video-hero ora auto-avanza da
     solo alla slide successiva quando finisce (vedi seqVideoEl 'ended' in
     main.js), come su desktop — quindi nessun invito manuale serve, e il
     testo sotto il video non viene più "impasticciato". */
  .dom-hint{ display:none; }
  /* foto scontornata app Cubli (3 telefoni affiancati): su mobile la
     regola generica .dom-ch-fig img usa object-fit:cover + height fissa,
     che ne TAGLIA i lati. Qui la mostriamo intera (contain, altezza auto). */
  .dom-ch-fig img.fig-cutout{
    height: auto !important; width: 100%; object-fit: contain;
    max-height: 48vh;
  }
  .dom-topbar{ padding-right: calc(var(--gutter) + 58px); }
}

/* strato dell'effetto "morph d'ambiente" */
.dom-morph{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  mix-blend-mode: soft-light; opacity:0; transition: opacity .4s var(--ease-out);
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ==========================================================================
   COOKIE CONSENT + placeholder mappa + link legali footer
   ========================================================================== */
.map-frame{ position:relative; }
.map-consent{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:24px;
  background: rgba(10,9,6,.82); backdrop-filter: blur(6px);
  border:1px solid rgba(246,241,231,.12);
}
.map-consent p{
  font-family: var(--f-sans); font-size:13px; line-height:1.5;
  color: var(--cream-dim); max-width:34ch; margin:0;
}
.map-consent-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  font-family: var(--f-sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color: var(--black); background: var(--bronze-light); border:none;
  padding:11px 22px; border-radius:999px; transition: background .3s var(--ease-out);
}
.map-consent-btn:hover{ background: var(--cream); }
.map-consent-link{
  font-family: var(--f-sans); font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--bronze-light); text-decoration:none; border-bottom:1px solid transparent;
}
.map-consent-link:hover{ border-bottom-color: var(--bronze-light); }

/* --- banner --- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:9000;
  display:flex; justify-content:center; padding:16px clamp(16px,4vw,32px);
  pointer-events:none;
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner-inner,
.cookie-prefs{
  pointer-events:auto;
  width:min(1080px,100%);
  background: rgba(16,14,10,.94); backdrop-filter: blur(14px);
  border:1px solid rgba(203,174,120,.28); border-radius:6px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  color: var(--cream);
}
.cookie-banner{
  opacity:0; transform: translateY(24px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.cookie-banner.is-visible{ opacity:1; transform: translateY(0); }
.cookie-banner-inner{
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:20px clamp(20px,3vw,30px);
}
.cookie-banner-text h4{
  font-family: var(--f-serif); font-size:1.15rem; font-weight:500; margin:0 0 6px;
  color: var(--cream);
}
.cookie-banner-text p{
  font-family: var(--f-sans); font-size:13px; line-height:1.55; margin:0;
  color: var(--cream-dim);
}
.cookie-banner-text a{ color: var(--bronze-light); text-decoration:underline; text-underline-offset:2px; }
.cookie-banner-actions{
  display:flex; gap:10px; flex:0 0 auto; align-items:center; flex-wrap:wrap;
}
.cookie-btn{
  -webkit-appearance:none; appearance:none; cursor:pointer; white-space:nowrap;
  font-family: var(--f-sans); font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:12px 22px; border-radius:999px; transition: background .3s var(--ease-out), color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.cookie-btn--ghost{
  background: transparent; color: var(--cream);
  border:1px solid rgba(246,241,231,.32);
}
.cookie-btn--ghost:hover{ border-color: var(--bronze-light); color: var(--bronze-light); }
.cookie-btn--solid{
  background: var(--bronze-light); color: var(--black); border:1px solid var(--bronze-light);
}
.cookie-btn--solid:hover{ background: var(--cream); border-color: var(--cream); }

/* --- pannello preferenze --- */
.cookie-prefs{ margin-top:12px; padding:8px clamp(20px,3vw,30px) 20px; }
.cookie-prefs[hidden]{ display:none; }
.cookie-pref-row{
  display:flex; align-items:flex-start; gap:20px; justify-content:space-between;
  padding:18px 0; border-bottom:1px solid rgba(246,241,231,.1);
}
.cookie-pref-info strong{
  display:block; font-family: var(--f-sans); font-size:13px; font-weight:600; letter-spacing:.02em;
  color: var(--cream); margin-bottom:4px;
}
.cookie-pref-info span{
  font-family: var(--f-sans); font-size:12px; line-height:1.5; color: var(--cream-dim);
}
.cookie-prefs-actions{ padding-top:18px; display:flex; justify-content:flex-end; }

/* --- switch --- */
.cookie-switch{ position:relative; flex:0 0 auto; width:44px; height:24px; }
.cookie-switch input{ position:absolute; opacity:0; width:0; height:0; }
.cookie-slider{
  position:absolute; inset:0; cursor:pointer; border-radius:999px;
  background: rgba(246,241,231,.2); transition: background .3s var(--ease-out);
}
.cookie-slider::before{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background: var(--cream); transition: transform .3s var(--ease-out);
}
.cookie-switch input:checked + .cookie-slider{ background: var(--bronze); }
.cookie-switch input:checked + .cookie-slider::before{ transform: translateX(20px); }
.cookie-switch--locked .cookie-slider{ background: var(--bronze-dark); cursor:not-allowed; opacity:.75; }

/* --- link legali footer --- */
.footer-legal{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:8px 0 0; margin-top:8px;
}
.footer-legal a,
.footer-legal-link{
  -webkit-appearance:none; appearance:none; background:none; border:none; cursor:pointer;
  font-family: var(--f-sans); font-size:12px; letter-spacing:.04em; color: var(--cream-dim);
  text-decoration:none; padding:0; transition: color .3s var(--ease-out);
}
.footer-legal a:hover,
.footer-legal-link:hover{ color: var(--bronze-light); }
.footer-legal-sep{ color: rgba(246,241,231,.3); font-size:12px; }

@media (max-width: 780px){
  .cookie-banner-inner{ flex-direction:column; align-items:stretch; padding:16px clamp(16px,4vw,24px); gap:12px; }
  .cookie-banner-text h4{ font-size:1rem; margin-bottom:4px; }
  .cookie-banner-text p{ font-size:12px; line-height:1.45; }
  /* Su schermi stretti il banner a 3 bottoni impilati (Rifiuta/Personalizza/
     Accetta, ciascuno a piena larghezza) arrivava a coprire meta' schermo,
     nascondendo la seconda CTA dell'hero e le statistiche sotto (design
     review, 05/08). "Accetta" (l'azione primaria) passa in cima a piena
     larghezza; le due secondarie stanno affiancate in una riga più bassa. */
  .cookie-banner-actions{ justify-content:stretch; flex-wrap:wrap; gap:8px; }
  .cookie-banner-actions .cookie-btn{ flex:1 1 auto; text-align:center; padding:11px 16px; }
  .cookie-banner-actions .cookie-btn[data-cookie-action="accept"]{ order:-1; flex-basis:100%; }
}

/* ==========================================================================
   PAGINE LEGALI (privacy / cookie policy)
   ========================================================================== */
.legal-body{ background: var(--cream); color: var(--black); }
.legal-topbar{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px clamp(20px,5vw,64px);
  background: rgba(246,241,231,.9); backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(10,9,6,.08);
}
.legal-topbar a{ text-decoration:none; }
.legal-brand{ font-family: var(--f-serif); font-size:1.15rem; font-weight:500; color: var(--black); letter-spacing:-.01em; }
.legal-brand em{ font-style:italic; color: var(--bronze-dark); }
.legal-back{
  font-family: var(--f-sans); font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  color: var(--bronze-dark); border-bottom:1px solid transparent; transition: border-color .3s var(--ease-out);
}
.legal-back:hover{ border-bottom-color: var(--bronze-dark); }
.legal-main{ max-width:820px; margin:0 auto; padding: clamp(48px,8vw,96px) clamp(20px,5vw,32px) 96px; }
.legal-main .eyebrow{ color: var(--bronze-dark); }
.legal-main h1{
  font-family: var(--f-serif); font-weight:500; letter-spacing:-.01em; line-height:1.08;
  font-size: clamp(2.2rem,5vw,3.4rem); margin:10px 0 8px;
}
.legal-updated{ font-family: var(--f-sans); font-size:13px; color:#6a6355; margin-bottom:40px; }
.legal-main h2{
  font-family: var(--f-serif); font-weight:500; font-size: clamp(1.3rem,2.6vw,1.7rem);
  margin:44px 0 12px; padding-top:22px; border-top:1px solid rgba(10,9,6,.1);
}
.legal-main h3{ font-family: var(--f-sans); font-size:.98rem; font-weight:600; margin:22px 0 8px; }
.legal-main p, .legal-main li{
  font-family: var(--f-sans); font-size:15px; line-height:1.7; color:#2c281f;
}
.legal-main p{ margin:0 0 14px; }
.legal-main ul{ margin:0 0 16px; padding-left:22px; }
.legal-main li{ margin-bottom:8px; }
.legal-main a{ color: var(--bronze-dark); text-decoration:underline; text-underline-offset:2px; }
.legal-main strong{ color: var(--black); }
.legal-table{ width:100%; border-collapse:collapse; margin:8px 0 20px; font-family: var(--f-sans); }
.legal-table th, .legal-table td{
  text-align:left; vertical-align:top; padding:11px 12px; font-size:13.5px; line-height:1.5;
  border:1px solid rgba(10,9,6,.14);
}
.legal-table th{ background: rgba(163,133,79,.1); font-weight:600; }
.legal-note{
  background: rgba(163,133,79,.08); border-left:3px solid var(--bronze);
  padding:16px 18px; border-radius:2px; margin:22px 0; font-size:14px;
}
.legal-footer{
  padding:36px clamp(20px,5vw,32px); text-align:center;
  border-top:1px solid rgba(10,9,6,.1);
}
.legal-footer .footer-legal{ margin:0 0 10px; }
.legal-footer .footer-legal a, .legal-footer .footer-legal-link{ color:#6a6355; }
.legal-footer small{ font-family: var(--f-sans); font-size:12px; color:#8a8271; }