/* ============================================================
   ABE — Fabbro a Forlì
   Concept: IL DISEGNO DIVENTA FERRO
   Scheletro: 8 · Il percorso  ·  galleria a griglia filtrata
   Palette: i colori del ferro. Antracite e nero come i suoi cancelli,
   la BRACE (ferro incandescente) come unico accento. Nessun blu.
   ============================================================ */

:root{
  --ferro-nero:#0C0D0E;     /* ferro grezzo, quasi nero */
  --ferro:#141516;
  --ferro-alto:#1D1E20;
  --ferro-filo:#2E2F32;
  --calce:#F2F0EC;
  --calce-2:#E2DFD9;
  --calce-mute:#9C9A95;
  --brace:#DA5320;          /* il ferro incandescente: l'unico colore del mestiere */
  --brace-2:#FF9048;        /* il bagliore */
  --su-brace:#140C06;

  --w:min(1240px, 100% - 2.6rem);
  --t-tit:'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --t-txt:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r:4px;
  --e:cubic-bezier(.65,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; background:var(--ferro); color:var(--calce);
  font-family:var(--t-txt); font-size:1rem; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0; font-family:var(--t-tit); font-weight:700; text-transform:uppercase; line-height:.95; letter-spacing:.005em}
p{margin:0}
ul,ol,dl,dd{margin:0; padding:0; list-style:none}
button{font:inherit; color:inherit}
::selection{background:var(--brace); color:#fff}
:focus-visible{outline:2px solid var(--brace); outline-offset:3px; border-radius:2px}

.wrap{width:var(--w); margin-inline:auto}
.salta{position:absolute; left:-9999px; top:0; z-index:100; background:var(--brace); color:#fff; padding:.7rem 1.1rem}
.salta:focus{left:.6rem; top:.6rem}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s var(--e), transform .7s var(--e)}
.reveal.in{opacity:1; transform:none}

/* ---------- testa ---------- */
.testa{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; gap:1.4rem;
  padding:.85rem clamp(1.1rem,3vw,2rem);
  transition:background .35s var(--e), border-color .35s var(--e), backdrop-filter .35s;
  border-bottom:1px solid transparent;
}
.testa.giu{background:rgba(12,13,14,.93); border-bottom-color:var(--ferro-filo)}
.marchio{display:flex; align-items:center; gap:.7rem; text-decoration:none; margin-right:auto}
.marchio img{width:44px; height:auto; flex:none}
.marchio__t{display:flex; flex-direction:column; line-height:1}
.marchio__t b{font-family:var(--t-tit); font-size:1.32rem; letter-spacing:.1em}
.marchio__t i{font-style:normal; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--calce-mute); margin-top:.18rem}

.menu{display:flex; gap:1.6rem}
.menu a{
  text-decoration:none; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--calce-mute); padding-block:.3rem; position:relative; transition:color .25s
}
.menu a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--brace); transition:right .35s var(--e)}
.menu a:hover{color:var(--calce)}
.menu a:hover::after{right:0}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--t-tit); font-weight:600; font-size:1.02rem; letter-spacing:.07em; text-transform:uppercase;
  text-decoration:none; border:1px solid transparent; border-radius:var(--r);
  padding:.72rem 1.25rem; cursor:pointer; transition:transform .25s var(--e), background .25s, border-color .25s, color .25s;
}
.btn--wa{background:var(--brace); color:var(--su-brace)}
.btn--wa:hover{background:var(--brace-2); transform:translateY(-2px)}
.btn--fant{border-color:var(--ferro-filo); color:var(--calce)}
.btn--fant:hover{border-color:var(--calce); transform:translateY(-2px)}
.btn--g{padding:.95rem 1.7rem; font-size:1.14rem}

.apri-menu{display:none; width:42px; height:42px; background:none; border:1px solid var(--ferro-filo); border-radius:var(--r); position:relative}
.apri-menu span{position:absolute; left:11px; right:11px; height:1.5px; background:var(--calce); transition:transform .3s var(--e), opacity .2s}
.apri-menu span:nth-child(1){top:16px}
.apri-menu span:nth-child(2){bottom:16px}
.apri-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.apri-menu[aria-expanded="true"] span:nth-child(2){transform:translateY(-7px) rotate(-45deg)}

.menu-mobile{
  position:fixed; inset:64px 0 auto 0; z-index:49; background:var(--ferro-nero);
  border-bottom:1px solid var(--ferro-filo); padding:.5rem 1.2rem 1.4rem; display:grid;
}
.menu-mobile a{
  text-decoration:none; padding:.85rem .2rem; border-bottom:1px solid var(--ferro-filo);
  font-family:var(--t-tit); font-size:1.4rem; text-transform:uppercase; letter-spacing:.05em
}
.menu-mobile a:last-child{border-bottom:0}

/* ---------- 1 · apertura ---------- */
.apertura{
  position:relative; background:var(--ferro-nero);
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:8.5rem 0 5.5rem; overflow:hidden;
}
.apertura::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(218,83,32,.15), transparent 58%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 84px);
  pointer-events:none;
}
.apertura__in{
  width:var(--w); margin-inline:auto; position:relative;
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center;
}
.apertura__testo{min-width:0; grid-column:1; grid-row:1}

/* ============================================================
   🔴 IL PORTALE — il marchio si apre come un cancello,
   dietro c'è il ferro vero. Solo CSS: funziona anche senza JS.
   ============================================================ */
.portale{
  position:relative; margin:0; aspect-ratio:4/5; max-height:74svh; justify-self:center;
  grid-column:2; grid-row:1;
  width:100%; max-width:520px; perspective:1500px; perspective-origin:50% 45%;
  border:1px solid var(--ferro-filo); background:var(--ferro-nero); overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9);
}
.portale__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.12); animation:portaleZoom 2.6s var(--e) .35s forwards;
}
@keyframes portaleZoom{to{transform:scale(1)}}
.portale__velo{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(12,13,14,.5), rgba(12,13,14,.1) 45%, rgba(12,13,14,.68));
}
/* la lama di luce nella fessura: il ferro tagliato a caldo */
.portale__luce{
  position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; z-index:3;
  background:linear-gradient(180deg, transparent, #FFE2C2 18%, var(--brace-2) 50%, var(--brace) 78%, transparent);
  opacity:0; filter:blur(1px);
  animation:lampo 1.5s ease-out .38s forwards;
}
@keyframes lampo{
  0%{opacity:0; transform:scaleX(1)}
  18%{opacity:1; transform:scaleX(5)}
  60%{opacity:.45; transform:scaleX(2)}
  100%{opacity:0; transform:scaleX(1)}
}
.anta{
  position:absolute; top:0; bottom:0; width:50%; z-index:2; overflow:hidden;
  background:
    linear-gradient(100deg, #191A1C 0%, #26282B 38%, #131415 62%, #1D1F21 100%);
  backface-visibility:hidden; will-change:transform;
}
/* le fasce traforate del suo cancello, sulle ante */
.anta::after{
  content:""; position:absolute; left:0; right:0; bottom:16%; height:44px;
  background:repeating-linear-gradient(90deg, rgba(242,240,236,.17) 0 7px, transparent 7px 15px);
  opacity:.7;
}
.anta i{
  position:absolute; top:0; bottom:0; width:200%; display:block;
  background:url("../img/logo.png") center 46% / 58% auto no-repeat;
}
.anta--sx{left:0; transform-origin:left center; border-right:1px solid rgba(0,0,0,.6);
  animation:apriSx 1.25s cubic-bezier(.62,.02,.24,1) .4s forwards}
.anta--dx{right:0; transform-origin:right center; border-left:1px solid rgba(242,240,236,.06);
  animation:apriDx 1.25s cubic-bezier(.62,.02,.24,1) .4s forwards}
.anta--sx i{left:0}
.anta--dx i{right:0}
@keyframes apriSx{
  0%{transform:rotateY(0); filter:brightness(1)}
  85%{filter:brightness(.35)}
  100%{transform:rotateY(-86deg); opacity:0; filter:brightness(.25)}
}
@keyframes apriDx{
  0%{transform:rotateY(0); filter:brightness(1)}
  85%{filter:brightness(.35)}
  100%{transform:rotateY(86deg); opacity:0; filter:brightness(.25)}
}
.portale__cardine{
  position:absolute; top:0; bottom:0; width:10px; z-index:4; pointer-events:none;
  background:linear-gradient(90deg, rgba(0,0,0,.55), transparent);
}
.portale__cardine--sx{left:0}
.portale__cardine--dx{right:0; transform:scaleX(-1)}

.occhiello{
  font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brace);
  font-weight:600; margin-bottom:1.4rem; display:flex; align-items:center; gap:.75rem;
}
.occhiello::before{content:""; width:34px; height:1px; background:var(--brace)}
/* ---- la scritta in movimento: ogni riga sale da dietro il suo taglio ---- */
.apertura h1{
  font-size:clamp(3rem, 6.4vw, 5.9rem); line-height:.88; letter-spacing:-.012em;
  margin-bottom:1.6rem;
}
.riga{display:block; overflow:hidden; padding-bottom:.04em}
.riga > b{
  display:block; font-weight:inherit;
  transform:translateY(108%); animation:saleRiga .95s cubic-bezier(.16,.84,.3,1) forwards;
}
.riga:nth-child(1) > b{animation-delay:1.02s}
.riga:nth-child(2) > b{animation-delay:1.14s}
.riga:nth-child(3) > b{animation-delay:1.26s}
@keyframes saleRiga{to{transform:translateY(0)}}

.apertura h1 em{font-style:normal; color:var(--brace); position:relative; white-space:nowrap}
.apertura h1 em::after{
  content:""; position:absolute; left:0; right:0; bottom:.05em; height:.05em;
  background:var(--brace); transform-origin:left; transform:scaleX(0);
  box-shadow:0 0 14px rgba(255,144,72,.85);
  animation:saldatura .9s var(--e) 2.1s forwards;
}
@keyframes saldatura{to{transform:scaleX(1)}}

/* gli altri elementi entrano dopo, uno dopo l'altro */
.occhiello,.apertura__sub,.azioni,.rassicura{
  opacity:0; transform:translateY(16px); animation:entra .8s var(--e) forwards;
}
.occhiello{animation-delay:.85s}
.apertura__sub{animation-delay:1.52s}
.azioni{animation-delay:1.66s}
.rassicura{animation-delay:1.8s}
@keyframes entra{to{opacity:1; transform:none}}

.apertura__sub{font-size:clamp(1.05rem,1.9vw,1.28rem); color:var(--calce-2); max-width:44ch; margin-bottom:2.2rem}
.apertura__sub b{color:var(--calce); font-weight:600}
.azioni{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:2.6rem}
.rassicura{display:flex; flex-wrap:wrap; gap:.5rem 1.9rem; font-size:.86rem; color:var(--calce-mute)}
.rassicura li{display:flex; align-items:center; gap:.55rem}
.rassicura li::before{content:""; width:5px; height:5px; background:var(--brace); transform:rotate(45deg)}

/* la quota che si disegna — il gesto: prendere le misure */
.quota{position:absolute; left:0; right:0; bottom:2.2rem; width:100%; height:70px; opacity:.55}
.quota path{fill:none; stroke:var(--brace); stroke-width:1.4; vector-effect:non-scaling-stroke}
.quota__l{stroke-dasharray:1200; stroke-dashoffset:1200; animation:tira 1.5s var(--e) .3s forwards}
.quota__t{stroke-dasharray:90; stroke-dashoffset:90; animation:tira .5s var(--e) 1.5s forwards}
.quota__t2{stroke-dasharray:160; stroke-dashoffset:160; opacity:.6; animation:tira .8s var(--e) 1.7s forwards}
@keyframes tira{to{stroke-dashoffset:0}}

/* ---------- 2 · fiducia ---------- */
.fiducia{background:var(--ferro-alto); border-block:1px solid var(--ferro-filo)}
.fiducia__in{
  width:var(--w); margin-inline:auto; display:grid; grid-template-columns:repeat(4,1fr);
}
.fatto{padding:2.1rem 1.4rem; border-left:1px solid var(--ferro-filo)}
.fatto:first-child{border-left:0; padding-left:0}
.fatto b{display:block; font-family:var(--t-tit); font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1; letter-spacing:.01em}
.fatto span{display:block; font-size:.83rem; color:var(--calce-mute); margin-top:.35rem}

/* ---------- sezioni ---------- */
.sez{padding:clamp(4.5rem,9vw,8rem) 0}
.etichetta{
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brace);
  font-weight:600; margin-bottom:1.1rem;
}
.tit{font-size:clamp(2.2rem,6.2vw,4.6rem); letter-spacing:-.008em; margin-bottom:2.6rem}
.tit em{font-style:normal; color:var(--brace)}

/* ---------- 3 · lavorazioni ---------- */
.tris{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--ferro-filo); border:1px solid var(--ferro-filo)}
.scheda{background:var(--ferro); padding:2.2rem 1.8rem 2.4rem; position:relative; transition:background .35s var(--e)}
.scheda:hover{background:var(--ferro-alto)}
.scheda__n{font-family:var(--t-tit); font-size:.9rem; letter-spacing:.2em; color:var(--brace)}
.scheda h3{font-size:1.75rem; margin:.7rem 0 .8rem}
.scheda p{color:var(--calce-mute); font-size:.95rem}
.anche-t{margin:2.6rem 0 .9rem; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--calce-mute)}
.anche{display:flex; flex-wrap:wrap; gap:.5rem}
.anche li{
  border:1px solid var(--ferro-filo); border-radius:100px; padding:.42rem .95rem;
  font-size:.84rem; color:var(--calce-2);
}

/* ---------- 4 · su misura — LA FIRMA ---------- */
/* 🔥 LA FORGIA — la brace percorre il tracciato e taglia il ferro a caldo */
/* La sezione è alta: dentro, la scena resta ferma in vista con position:sticky
   mentre si scorre. Sticky nativo = scorrimento liscio, nessun pin, nessun transform.
   🔴 Niente overflow:hidden qui: renderebbe .misura un contenitore di scorrimento
   e lo sticky non aggancerebbe più. */
.misura{background:var(--ferro-nero); color:var(--calce); position:relative; min-height:260svh}
/* il calore della forgia: sta DENTRO la scena, così la segue mentre è ferma in vista.
   🔴 Niente position:sticky su uno pseudo-elemento: rende il layout instabile. */
.misura__sticky::before{
  content:""; position:absolute; inset:auto -15% -18% -15%; height:65%; z-index:0;
  background:radial-gradient(closest-side, rgba(218,83,32,.24), rgba(218,83,32,.06) 55%, transparent 75%);
  pointer-events:none;
}
.misura__sticky{
  position:sticky; top:0; height:100svh; display:flex; align-items:center;
  padding:clamp(3rem,6vw,5rem) 0; overflow:hidden;
}
.misura__grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; width:var(--w)}
.misura .etichetta{color:var(--brace)}
.misura .tit em{color:var(--brace)}
.misura__p{font-size:clamp(1rem,1.6vw,1.15rem); color:var(--calce-mute); max-width:40ch}
.misura__p b{color:var(--calce); font-weight:600}
.misura__passo{
  margin-top:2rem; font-family:var(--t-tit); text-transform:uppercase; letter-spacing:.18em;
  font-size:.9rem; color:var(--brace); display:flex; align-items:center; gap:.7rem;
}
.misura__passo::before{content:""; width:26px; height:1px; background:var(--brace)}

.disegno{
  position:relative; margin:0; aspect-ratio:76/52; overflow:hidden;
  background:linear-gradient(160deg,#131415,#0B0C0D 60%,#141110);
  border:1px solid #2C2D2F; box-shadow:0 30px 70px -40px rgba(218,83,32,.5);
}
.disegno__foto{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  clip-path:inset(0 0 100% 0);
}
.disegno__svg{position:absolute; inset:0; width:100%; height:100%}
/* Strati sovrapposti: tratto a freddo → alone della brace → brace → ferro raffreddato.
   🔴 Il bagliore è fatto con TRATTI SOVRAPPOSTI, non con drop-shadow: un filtro su un
   tracciato che si anima costa un ridisegno a ogni fotogramma, e la velocità viene prima. */
.tr{fill:none; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke}
.g-scribe .tr{stroke:#8A8884; stroke-width:1.1; opacity:.6; stroke-linecap:square}
.g-alone2 .tr{stroke:rgba(218,83,32,.13); stroke-width:17}
.g-alone  .tr{stroke:rgba(255,144,72,.26); stroke-width:8}
.g-caldo  .tr{stroke:#FFE0B6; stroke-width:2.6}
.g-freddo .tr{stroke:#767A80; stroke-width:2.8; stroke-linecap:square}
.trf{fill:none; stroke:#5A5D61; stroke-width:1.6; stroke-dasharray:8 6; vector-effect:non-scaling-stroke; opacity:0}
.g-scribe .trf,.g-caldo .trf,.g-alone .trf,.g-alone2 .trf{display:none}

/* la testa incandescente che corre sulla linea: tre cerchi, nessun filtro */
.testina{opacity:0}
.testina .t1{fill:rgba(218,83,32,.16)}
.testina .t2{fill:rgba(255,144,72,.34)}
.testina .t3{fill:#FFF3E4}

/* i fiocchi di brace che salgono dalla forgia */
.braci{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.braci i{
  position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  background:var(--brace-2); box-shadow:0 0 6px var(--brace-2), 0 0 14px var(--brace);
  opacity:0; animation:sale-brace linear infinite;
}
@keyframes sale-brace{
  0%{transform:translate3d(0,0,0) scale(.7); opacity:0}
  12%{opacity:.9}
  70%{opacity:.55}
  100%{transform:translate3d(var(--dx,14px),-88svh,0) scale(.25); opacity:0}
}

/* ---------- 5 · il percorso — LO SCHELETRO ---------- */
.percorso{background:var(--ferro); position:relative}
.tappe{position:relative; padding-left:clamp(3rem,7vw,6rem)}
.tappe__linea{position:absolute; left:clamp(.9rem,2.2vw,2rem); top:.4rem; bottom:2.2rem; width:2px; background:var(--ferro-filo)}
.tappe__linea i{position:absolute; inset:0 0 auto 0; height:0%; background:var(--brace); display:block}
.tappa{position:relative; padding-bottom:clamp(2.4rem,5vw,3.6rem)}
.tappa:last-child{padding-bottom:0}
.tappa::before{
  content:""; position:absolute; left:calc(clamp(.9rem,2.2vw,2rem) - clamp(3rem,7vw,6rem) - 4px);
  top:.55rem; width:10px; height:10px; background:var(--ferro); border:2px solid var(--ferro-filo); transform:rotate(45deg);
  transition:border-color .4s var(--e), background .4s var(--e);
}
.tappa.in::before{border-color:var(--brace); background:var(--brace)}
.tappa__n{font-family:var(--t-tit); font-size:.86rem; letter-spacing:.2em; color:var(--brace)}
.tappa h3{font-size:clamp(1.5rem,3vw,2.1rem); margin:.35rem 0 .6rem}
.tappa p{color:var(--calce-mute); max-width:46ch}
.tempo{
  margin-top:clamp(2.4rem,5vw,3.4rem); padding:1.3rem 1.6rem; border:1px solid var(--ferro-filo);
  border-left:3px solid var(--brace); font-size:1.06rem; color:var(--calce-2);
}
.tempo b{color:var(--calce)}

/* ---------- 6 · lavori — griglia con tutte le foto ---------- */
.lavori{background:var(--ferro-nero); padding:clamp(4.5rem,9vw,8rem) 0 clamp(3.5rem,7vw,6rem)}
.lavori__testa{margin-bottom:2.2rem}
.lavori__p{color:var(--calce-mute); margin-top:-1.4rem; margin-bottom:1.8rem}
.filtri{display:flex; flex-wrap:wrap; gap:.55rem}
.filtro{
  background:none; border:1px solid var(--ferro-filo); border-radius:100px; padding:.5rem 1.1rem;
  font-size:.85rem; color:var(--calce-mute); cursor:pointer; transition:all .25s var(--e);
}
.filtro:hover{border-color:var(--calce-mute); color:var(--calce)}
.filtro.attivo{background:var(--brace); border-color:var(--brace); color:var(--su-brace); font-weight:600}
.filtro span{opacity:.55; font-variant-numeric:tabular-nums; margin-left:.15rem}

/* ---- la griglia dei lavori: tutte e 17 le foto del cliente ---- */
.griglia-guscio{position:relative}
.griglia{display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem}
.op{
  position:relative; margin:0; background:var(--ferro-alto);
  border:1px solid var(--ferro-filo); overflow:hidden; cursor:pointer;
  transition:border-color .3s var(--e), transform .3s var(--e);
}
.op:hover{border-color:var(--calce-mute); transform:translateY(-3px)}
.op img{width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .8s var(--e)}
.op:hover img{transform:scale(1.05)}
.op figcaption{
  padding:.8rem .95rem 1rem; font-size:.82rem; line-height:1.45; color:var(--calce-mute);
  border-top:1px solid var(--ferro-filo); min-height:4.2rem;
}
.op[hidden]{display:none}
.op:focus-visible{outline:2px solid var(--brace); outline-offset:3px}
.griglia__vuoto{margin-top:1.5rem; color:var(--calce-mute)}

/* cursore contestuale — SOLO sulla galleria */
.c-eti{
  position:fixed; top:0; left:0; z-index:45; pointer-events:none; opacity:0; scale:.6;
  width:86px; height:86px; margin:-43px 0 0 -43px; border-radius:50%;
  background:var(--brace); color:var(--su-brace); display:grid; place-content:center;
  font-family:var(--t-tit); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  transition:opacity .25s var(--e), scale .25s var(--e);
}
.c-eti.on{opacity:1; scale:1}
.senza-cursore .op{cursor:none}

/* ---------- 7 · chi ---------- */
.chi{background:var(--ferro)}
.chi__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:start}
.chi__p{color:var(--calce-mute); font-size:1.05rem; max-width:42ch}
.prove{display:grid; gap:1px; background:var(--ferro-filo); border:1px solid var(--ferro-filo)}
.prove li{background:var(--ferro); padding:1.25rem 1.4rem}
.prove b{display:block; font-family:var(--t-tit); font-size:1.32rem; text-transform:uppercase; letter-spacing:.03em}
.prove span{display:block; font-size:.85rem; color:var(--calce-mute); margin-top:.1rem}

/* ---------- 8 · domande ---------- */
.domande{background:var(--calce); color:var(--ferro-nero)}
.domande .etichetta{color:var(--ferro-nero); opacity:.55}
.faq{border-top:1px solid #CBC7BE}
.d{border-bottom:1px solid #CBC7BE}
.d summary{
  cursor:pointer; list-style:none; padding:1.35rem 3rem 1.35rem 0; position:relative;
  font-family:var(--t-tit); font-size:clamp(1.2rem,2.4vw,1.6rem); text-transform:uppercase; letter-spacing:.01em;
}
.d summary::-webkit-details-marker{display:none}
.d summary::after{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:2px; background:var(--ferro-nero);
  box-shadow:0 0 0 0 transparent; transition:transform .3s var(--e);
}
.d summary::before{
  content:""; position:absolute; right:.4rem; top:50%; width:14px; height:2px; background:var(--ferro-nero);
  transform:rotate(90deg); transition:transform .3s var(--e), opacity .3s;
}
.d[open] summary::before{transform:rotate(0); opacity:0}
.d[open] summary{color:var(--brace)}
.d[open] summary::after,.d[open] summary::before{background:var(--brace)}
.d p{padding:0 2rem 1.5rem 0; color:#3C3B38; max-width:66ch}

/* ---------- 9 · contatti ---------- */
.contatti{background:var(--ferro-nero); padding:clamp(4.5rem,9vw,8rem) 0; position:relative; overflow:hidden}
.contatti::before{
  content:""; position:absolute; inset:auto -10% -55% 40%; height:110%;
  background:radial-gradient(closest-side, rgba(218,83,32,.17), transparent 70%);
  pointer-events:none;
}
.contatti__in{position:relative}
.contatti__p{color:var(--calce-mute); font-size:1.08rem; margin:-1.5rem 0 2.2rem}
.recapiti{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--ferro-filo); border:1px solid var(--ferro-filo); margin-top:3rem}
.recapiti > div{background:var(--ferro-nero); padding:1.4rem}
.recapiti dt{font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--calce-mute); margin-bottom:.4rem}
.recapiti dd{font-family:var(--t-tit); font-size:1.3rem; text-transform:uppercase; letter-spacing:.03em}
.recapiti a{text-decoration:none; border-bottom:1px solid var(--ferro-filo); transition:border-color .25s}
.recapiti a:hover{border-color:var(--brace)}

/* ---------- footer ---------- */
.pie{background:var(--ferro-nero); border-top:1px solid var(--ferro-filo); padding:clamp(3rem,6vw,4.5rem) 0 4.2rem}
.pie__grid{display:grid; grid-template-columns:auto repeat(3,1fr); gap:2rem clamp(1.5rem,4vw,3rem); align-items:start}
.pie__marchio img{width:120px; opacity:.9}
.pie h4{font-size:1.05rem; letter-spacing:.06em; margin-bottom:.7rem}
.pie p{font-size:.9rem; color:var(--calce-mute); line-height:1.75}
.pie a{text-decoration:none; transition:color .25s}
.pie a:hover{color:var(--brace)}
.pie__barra{
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  margin-top:clamp(2rem,4vw,3rem); padding-top:1.3rem; border-top:1px solid var(--ferro-filo);
  font-size:.82rem; color:var(--calce-mute);
}
.credit a{color:var(--calce-2); border-bottom:1px solid var(--ferro-filo)}

/* ---------- cookie ---------- */
.cookie-bar{
  position:fixed; inset:auto 0 0 0; z-index:60; display:flex; gap:1rem; align-items:center;
  justify-content:center; padding:.6rem 1rem; font-size:.82rem; line-height:1.35;
  background:var(--ferro-alto); border-top:1px solid var(--ferro-filo);
}
.cookie-bar p{margin:0; color:var(--calce-2)}
.cookie-bar a{color:inherit; text-decoration:underline; text-underline-offset:2px}
.cookie-bar__x{background:none; border:0; font-size:1.3rem; line-height:1; cursor:pointer; opacity:.6; flex:none}
.cookie-bar__x:hover{opacity:1}
.cb-corto{display:none}
@media(max-width:620px){
  .cookie-bar{font-size:.74rem; padding:.5rem .7rem; gap:.6rem}
  .cookie-bar p{white-space:nowrap}
  .cb-lungo{display:none}
  .cb-corto{display:inline}
}

/* ---------- lente (galleria) ---------- */
.lente{
  position:fixed; inset:0; z-index:70; background:rgba(9,9,10,.95);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3rem);
}
.lente figure{margin:0; max-width:min(940px,100%); text-align:center}
.lente img{max-height:78svh; width:auto; margin-inline:auto; border:1px solid var(--ferro-filo)}
.lente figcaption{margin-top:1rem; font-size:.9rem; color:var(--calce-mute)}
.lente__x{
  position:absolute; top:1rem; right:1.1rem; width:46px; height:46px; border-radius:50%;
  background:var(--ferro-alto); border:1px solid var(--ferro-filo); font-size:1.6rem; line-height:1; cursor:pointer;
}
.lente__x:hover{background:var(--brace); color:var(--su-brace)}
.lente__nav{
  position:absolute; top:50%; margin-top:-26px; width:52px; height:52px; border-radius:50%;
  background:var(--ferro-alto); border:1px solid var(--ferro-filo); color:var(--calce);
  cursor:pointer; display:grid; place-content:center; transition:background .25s var(--e), color .25s;
}
.lente__nav:hover{background:var(--brace); color:var(--su-brace)}
.lente__nav--prec{left:clamp(.6rem,2vw,2rem)}
.lente__nav--succ{right:clamp(.6rem,2vw,2rem)}
.lente__conta{
  margin-top:.5rem; font-family:var(--t-tit); font-size:.85rem; letter-spacing:.18em;
  color:var(--brace); font-variant-numeric:tabular-nums;
}
@media(max-width:620px){
  .lente__nav{width:44px; height:44px; margin-top:-22px}
  .lente img{max-height:64svh}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .menu{display:none}
  .apri-menu{display:block}
  .testa__cta span{display:none}
  .testa__cta{padding:.72rem .85rem}
}
@media (max-width:900px){
  .misura__grid{grid-template-columns:1fr; gap:2.2rem}
  .misura{min-height:210svh}
  .misura__sticky{height:100svh; padding:2rem 0}
  .disegno{aspect-ratio:4/3}
  .chi__grid{grid-template-columns:1fr}
  .griglia{grid-template-columns:repeat(3,1fr)}
  .apertura__in{grid-template-columns:1fr; gap:2.2rem}
  .portale{grid-column:1; grid-row:1; aspect-ratio:5/4; max-height:40svh; max-width:560px}
  .apertura__testo{grid-column:1; grid-row:2}
  .apertura{padding:6.5rem 0 4rem}
  .pie__grid{grid-template-columns:1fr 1fr}
  .pie__marchio{grid-column:1 / -1}
}
@media (max-width:760px){
  html{scroll-padding-top:72px}
  .fiducia__in{grid-template-columns:1fr 1fr}
  .fatto{padding:1.5rem 1rem; border-top:1px solid var(--ferro-filo)}
  .fatto:nth-child(odd){border-left:0; padding-left:0}
  .fatto:nth-child(-n+2){border-top:0}
  .tris{grid-template-columns:1fr}
  .recapiti{grid-template-columns:1fr}
  .quota{height:52px; bottom:1.4rem}
  .azioni .btn{flex:1 1 100%}

  .griglia{grid-template-columns:repeat(2,1fr); gap:.75rem}
  .op figcaption{padding:.65rem .7rem .8rem; font-size:.74rem; min-height:3.9rem}
}
@media (max-width:520px){
  .pie__grid{grid-template-columns:1fr}
  .apertura h1{font-size:clamp(3rem,15vw,4.6rem)}
}

/* niente cursori finti su touch */
@media (hover:none),(pointer:coarse){
  .c-eti{display:none !important}
  .senza-cursore .op{cursor:pointer}
}

/* ============================================================
   prefers-reduced-motion — obbligatorio
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .reveal{opacity:1 !important; transform:none !important}
  .tr,.trf{opacity:0 !important}
  .disegno__foto{clip-path:inset(0 0 0 0) !important}
  .quota path{stroke-dashoffset:0 !important}
  .apertura h1 em::after{transform:scaleX(1) !important}
  .c-eti{display:none !important}
  .tappe__linea i{height:100% !important}

  /* il portale non si anima: resta già aperto, la foto in chiaro */
  .anta,.portale__luce,.braci{display:none !important}
  .portale__foto{transform:none !important}
  .riga > b{transform:none !important}
  .occhiello,.apertura__sub,.azioni,.rassicura{opacity:1 !important; transform:none !important}
}