/* ============================================================
   GARAVINI SRL - Variante B "Materia"
   architettonica · monolite · scura · quote da disegno tecnico
   ============================================================ */

:root{
  --nero:#17130f;          /* base, near-black caldo */
  --nero-2:#201a13;        /* superficie elevata */
  --grafite:#120f0b;       /* piu scuro (hero, footer) */
  --sabbia:#e7e1d5;        /* sezioni chiare, pietra */
  --sabbia-2:#efeae0;
  --osso:#ece7dd;          /* testo su scuro */
  --osso-40:rgba(236,231,221,.42);
  --osso-60:rgba(236,231,221,.62);
  --pietra:#9a9083;        /* testo attenuato caldo */
  --inchiostro:#1a1611;    /* testo su chiaro */
  --grigio-scuro:#5c564d;
  --linea-s:rgba(236,231,221,.14);  /* hairline su scuro */
  --linea-c:#d2ccbe;                /* hairline su chiaro */
  --accento:#920148;
  --accento-viva:#920148;  /* tinta leggibile su scuro */
  --disp:'Sora',-apple-system,'Helvetica Neue',sans-serif;
  --testo:'Inter',-apple-system,'Helvetica Neue',sans-serif;
  --curva:cubic-bezier(.16,.84,.28,1);
  --slab:19/10;            /* proporzione lastra 380x200 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--testo);
  background:var(--nero);
  color:var(--osso);
  font-size:1.0625rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv05";
}
img,video,iframe{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accento);color:#fff}
:focus-visible{outline:2px solid var(--accento-viva);outline-offset:3px}

.wrap{max-width:1440px;margin:0 auto;padding-left:clamp(1.4rem,5vw,5rem);padding-right:clamp(1.4rem,5vw,5rem)}

h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---------- eyebrow / occhiello ---------- */
.occhiello{
  font-size:.6875rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--pietra);display:inline-flex;align-items:center;gap:.85rem;
}
.occhiello::before{content:'';width:1.7rem;height:1px;background:var(--accento-viva)}
.chiaro .occhiello{color:var(--grigio-scuro)}
.chiaro .occhiello::before{background:var(--accento)}

/* ---------- quota / dimensione (firma) ---------- */
.quota{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:.75rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--pietra);font-variant-numeric:tabular-nums;
}
.quota .barra{
  position:relative;width:clamp(2.5rem,7vw,5.5rem);height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--curva);
}
.quota .barra::before,.quota .barra::after{
  content:'';position:absolute;top:-3px;width:1px;height:7px;background:currentColor;
}
.quota .barra::before{left:0}
.quota .barra::after{right:0}
.quota.in .barra{transform:none}

/* ---------- rivelazioni ---------- */
.rivela{opacity:0;transform:translateY(30px);transition:opacity 1s var(--curva),transform 1s var(--curva)}
.rivela.in{opacity:1;transform:none}
.r2{transition-delay:.1s}.r3{transition-delay:.2s}.r4{transition-delay:.3s}
.rivela-img{overflow:hidden}
.rivela-img>img{
  transform:scale(1.12);clip-path:inset(0 0 100% 0);
  transition:clip-path 1.25s var(--curva),transform 1.6s var(--curva);
}
.rivela-img.in>img{transform:scale(1);clip-path:inset(0 0 0 0)}

/* titolo maschera a righe */
.salita .riga{display:block;overflow:hidden}
.salita .riga>span{display:block;transform:translateY(110%);transition:transform 1s var(--curva)}
.salita .riga:nth-child(2)>span{transition-delay:.08s}
.salita .riga:nth-child(3)>span{transition-delay:.16s}
.salita.in .riga>span{transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
  .rivela,.salita .riga>span{opacity:1!important;transform:none!important}
  .rivela-img>img{clip-path:none!important;transform:none!important}
  .quota .barra{transform:none!important}
}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky;top:0;z-index:90;background:var(--nero);
  transition:background .4s,border-color .4s;
  border-bottom:1px solid transparent;
}
header.giu{border-bottom-color:var(--linea-s);background:rgba(23,19,15,.9);backdrop-filter:blur(12px)}
.nav{display:flex;align-items:center;height:88px;gap:3rem}
.nav .logo img{height:34px;width:auto}
.nav-menu{display:flex;gap:2.6rem;list-style:none;margin-left:auto}
.nav-menu a{
  font-size:.8125rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  position:relative;padding:.4rem 0;color:var(--osso-60);transition:color .25s;
}
.nav-menu a:hover,.nav-menu a[aria-current]{color:var(--osso)}
.nav-menu a[aria-current]::after{
  content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--accento-viva);
}
.nav-tel{
  font-size:.8125rem;font-weight:500;letter-spacing:.1em;white-space:nowrap;
  border:1px solid var(--linea-s);padding:.7rem 1.2rem;transition:border-color .25s,color .25s;
}
.nav-tel:hover{border-color:var(--osso);color:var(--osso)}
.hamb{display:none;margin-left:auto;background:none;border:0;cursor:pointer;width:44px;height:44px;position:relative}
.hamb span,.hamb span::before,.hamb span::after{
  content:'';position:absolute;left:10px;width:24px;height:1.5px;background:var(--osso);
  transition:transform .3s var(--curva),opacity .2s;
}
.hamb span{top:21px}.hamb span::before{left:0;top:-7px}.hamb span::after{left:0;top:7px}
body.menu-aperto .hamb span{background:transparent}
body.menu-aperto .hamb span::before{transform:translateY(7px) rotate(45deg)}
body.menu-aperto .hamb span::after{transform:translateY(-7px) rotate(-45deg)}
.menu-mobile{display:none;position:fixed;inset:88px 0 0;z-index:80;background:var(--nero);padding:2.5rem clamp(1.4rem,5vw,5rem)}
body.menu-aperto .menu-mobile{display:block}
.menu-mobile ul{list-style:none}
.menu-mobile a{font-family:var(--disp);font-weight:600;font-size:2rem;display:block;padding:1.1rem 0;border-bottom:1px solid var(--linea-s)}
.menu-mobile .tel-m{font-family:var(--testo);font-size:1.05rem;font-weight:500;margin-top:2rem;display:inline-block;color:var(--osso-60)}

/* ============================================================
   BOTTONI
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.9rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:1.1em 2em;border:1px solid var(--osso);color:var(--osso);
  transition:background .35s var(--curva),color .35s var(--curva);
}
.btn:hover{background:var(--osso);color:var(--nero)}
.btn-pieno{background:var(--accento);border-color:var(--accento);color:#fff}
.btn-pieno:hover{background:#b21861;border-color:#b21861;color:#fff}
.chiaro .btn{border-color:var(--inchiostro);color:var(--inchiostro)}
.chiaro .btn:hover{background:var(--inchiostro);color:var(--sabbia)}

.freccia{display:inline-flex;align-items:center;gap:.85rem;font-size:.8125rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;transition:color .25s}
.freccia i{position:relative;width:2rem;height:1px;background:currentColor;transition:width .35s var(--curva)}
.freccia i::after{content:'';position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.freccia:hover{color:var(--accento-viva)}
.freccia:hover i{width:2.9rem}
.chiaro .freccia:hover{color:var(--accento)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:calc(100svh - 88px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;background:var(--grafite)}
.hero video,.hero .sfondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;animation:kb 24s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.14)}}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(18,15,11,.9) 0%,rgba(18,15,11,.5) 42%,rgba(18,15,11,.35) 100%)}
.hero-in{padding-top:9rem;padding-bottom:clamp(2rem,5vh,3.5rem)}
.hero .occhiello{color:var(--osso-60)}
.hero h1{
  font-size:clamp(2.3rem,5.4vw,4.9rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  text-transform:uppercase;margin:1.5rem 0 0;
}
.hero h1 em{font-style:normal;color:var(--pietra)}
.hero-coda{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;flex-wrap:wrap;margin-top:2.6rem}
.hero-coda p{max-width:40ch;color:var(--osso-60);font-size:1.05rem}
.hero-coda .freccia{color:var(--osso)}

/* nastro tecnico */
.nastro{border-top:1px solid var(--linea-s);border-bottom:1px solid var(--linea-s);overflow:hidden;background:var(--grafite)}
.nastro-scorri{display:flex;gap:0;white-space:nowrap;animation:scorri 34s linear infinite}
.nastro:hover .nastro-scorri{animation-play-state:paused}
@keyframes scorri{to{transform:translateX(-50%)}}
.nastro-scorri span{
  display:inline-flex;align-items:center;gap:1.4rem;padding:1.15rem 0;
  font-size:.8125rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--osso-60);
  font-variant-numeric:tabular-nums;
}
.nastro-scorri span::after{content:'';display:inline-block;width:5px;height:5px;background:var(--accento-viva);margin:0 2.4rem}
@media (prefers-reduced-motion:reduce){.nastro-scorri{animation:none;transform:none;flex-wrap:wrap;white-space:normal}}

/* ============================================================
   SEZIONI
   ============================================================ */
.blocco{padding-top:clamp(4.5rem,11vh,9rem);padding-bottom:clamp(4.5rem,11vh,9rem)}
.chiaro{background:var(--sabbia);color:var(--inchiostro)}
.chiaro h1,.chiaro h2,.chiaro h3{color:var(--inchiostro)}
.chiaro .quota{color:var(--grigio-scuro)}

.intestazione{display:grid;grid-template-columns:auto 1fr;gap:1.4rem 2.5rem;align-items:baseline}
.intestazione .idx{font-family:var(--disp);font-weight:600;font-size:.8125rem;letter-spacing:.1em;color:var(--pietra);font-variant-numeric:tabular-nums}
.chiaro .intestazione .idx{color:var(--grigio-scuro)}
.intestazione h2{grid-column:2;font-size:clamp(1.9rem,4vw,3.4rem);max-width:18ch}
.intestazione .desc{grid-column:2;color:var(--osso-60);max-width:52ch;font-size:1.05rem}
.chiaro .intestazione .desc{color:var(--grigio-scuro)}
.intestazione .quota{grid-column:2;margin-top:.4rem}

/* ---------- azienda (split) ---------- */
.azienda{display:grid;grid-template-columns:1.05fr 1fr;gap:0;align-items:stretch;margin-top:clamp(3rem,7vh,6rem)}
.azienda-testo{padding:clamp(3.5rem,8vh,7rem) clamp(2rem,5vw,5rem) clamp(3.5rem,8vh,7rem) 0;display:flex;flex-direction:column;justify-content:center}
.azienda-testo .frase{font-family:var(--disp);font-weight:500;font-size:clamp(1.5rem,2.7vw,2.35rem);line-height:1.24;letter-spacing:-.01em;margin:1.6rem 0 0;text-wrap:balance}
.azienda-testo .frase em{font-style:normal;color:var(--accento-viva)}
.azienda-testo .coda{color:var(--osso-60);margin-top:1.8rem;max-width:46ch}
.azienda-foto{position:relative;overflow:hidden;min-height:420px}
.azienda-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- opere (lavorazioni) ---------- */
.opere{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--linea-s);margin-top:3.5rem;border:1px solid var(--linea-s)}
.opera{position:relative;background:var(--nero);padding:0;overflow:hidden;display:block}
.opera .foto{position:relative;aspect-ratio:16/10;overflow:hidden}
.opera .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.82);transition:filter .6s var(--curva),transform 1s var(--curva)}
.opera:hover .foto img{filter:grayscale(0) brightness(.92);transform:scale(1.04)}
.opera .foto::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(18,15,11,.7),transparent 60%)}
.opera .didasc{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.4rem,3vw,2.2rem);display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;z-index:2}
.opera .didasc .idx{font-family:var(--disp);font-size:.8125rem;font-weight:600;color:var(--osso-60);font-variant-numeric:tabular-nums}
.opera .didasc h3{font-size:clamp(1.4rem,2.4vw,2rem);margin-top:.5rem}
.opera .didasc .apri{width:44px;height:44px;border:1px solid var(--osso-40);display:flex;align-items:center;justify-content:center;flex:none;transition:background .3s,border-color .3s,color .3s}
.opera:hover .didasc .apri{background:var(--accento);border-color:var(--accento);color:#fff}
.opera .didasc .apri svg{width:15px;height:15px}

/* ---------- sistemi (facciate) ---------- */
.sistemi{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:3.5rem}
.sistema{border-top:1px solid var(--linea-s);padding-top:1.6rem}
.chiaro .sistema{border-color:var(--linea-c)}
.sistema .lastra{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:1.4rem;margin-bottom:1.4rem}
.sistema .lastra img{max-width:100%;max-height:100%;object-fit:contain}
.sistema .sigla{font-family:var(--disp);font-size:.75rem;font-weight:600;letter-spacing:.14em;color:var(--accento-viva)}
.sistema h3{font-size:1.15rem;margin:.6rem 0 .6rem;font-weight:600}
.sistema p{font-size:.9rem;color:var(--osso-60)}

/* ---------- realizzazioni (griglia editoriale) ---------- */
.vetrina{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5rem;margin-top:3.5rem}
.opera-r{position:relative;overflow:hidden;display:block;background:var(--nero-2)}
.opera-r img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;filter:grayscale(.3) brightness(.85);transition:filter .6s var(--curva),transform 1.1s var(--curva)}
.opera-r:hover img{filter:grayscale(0) brightness(1);transform:scale(1.05)}
.opera-r::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(18,15,11,.8),transparent 55%);opacity:.85;transition:opacity .4s}
.opera-r .info{position:absolute;left:0;right:0;bottom:0;padding:clamp(1.2rem,2.4vw,1.8rem);z-index:2}
.opera-r .info span{display:block;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--osso-60);margin-bottom:.35rem}
.opera-r .info strong{font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,1.8vw,1.5rem)}
.opera-r.grande{grid-column:span 7;grid-row:span 2}
.opera-r.grande img{aspect-ratio:auto;height:100%}
.opera-r.piccola{grid-column:span 5}

/* ---------- contatto (home) ---------- */
.contatto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contatto .lato h2{font-size:clamp(2rem,4.4vw,3.6rem);margin:1.4rem 0 0;max-width:14ch}
.contatto .lato .desc{color:var(--osso-60);margin-top:1.4rem;max-width:40ch}
.recapiti{margin-top:2.6rem}
.recapito{display:grid;grid-template-columns:8rem 1fr;gap:1.4rem;align-items:baseline;padding:1.3rem 0;border-top:1px solid var(--linea-s)}
.recapito .che{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--pietra)}
.recapito .chi a:hover{color:var(--accento-viva)}

/* form */
.modulo{background:var(--nero-2);border:1px solid var(--linea-s);padding:clamp(1.8rem,4vw,3rem)}
.modulo h3{font-size:1.4rem;font-weight:600}
.modulo .nota{font-size:.9rem;color:var(--osso-60);margin:.6rem 0 2rem}
.campo{display:grid;gap:.5rem;margin-bottom:1.5rem}
.campo label{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--pietra)}
.campo input,.campo textarea{font-family:var(--testo);font-size:1rem;color:var(--osso);background:transparent;border:0;border-bottom:1px solid var(--linea-s);padding:.6rem 0;transition:border-color .25s}
.campo input:focus,.campo textarea:focus{outline:none;border-bottom-color:var(--accento-viva)}
.campo textarea{resize:vertical;min-height:100px}
.campo-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.consenso{display:flex;gap:.8rem;align-items:flex-start;font-size:.8rem;color:var(--osso-60);margin-bottom:1.8rem}
.consenso input{margin-top:.25rem;accent-color:var(--accento)}
.modulo .btn{width:100%;justify-content:center;background:var(--accento);border-color:var(--accento);color:#fff}
.modulo .btn:hover{background:#b21861;border-color:#b21861}

/* ============================================================
   FOOTER
   ============================================================ */
footer{background:var(--grafite);border-top:1px solid var(--linea-s)}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-top:clamp(3.5rem,7vh,5rem);padding-bottom:3rem}
.foot-top img.marchio{height:42px;width:auto;margin-bottom:1.4rem}
.foot-top p,.foot-top address{font-style:normal;color:var(--osso-60);line-height:1.8;font-size:.95rem;max-width:34ch}
.foot-top h4{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--pietra);margin-bottom:1.1rem}
.foot-top ul{list-style:none;display:grid;gap:.55rem}
.foot-top a{color:var(--osso-60);transition:color .2s}
.foot-top a:hover{color:var(--osso)}
.foot-legale{border-top:1px solid var(--linea-s);padding-top:1.6rem;padding-bottom:2.4rem;display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;font-size:.78rem;color:var(--osso-40)}
.foot-legale .fila{display:flex;gap:1.4rem;flex-wrap:wrap}
.foot-legale a:hover{color:var(--osso)}

/* ============================================================
   PAGINE INTERNE
   ============================================================ */
.testata{padding-top:clamp(3.5rem,8vh,6.5rem);padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.briciole{font-size:.75rem;letter-spacing:.06em;color:var(--pietra);display:flex;gap:.7rem;align-items:center;margin-bottom:2.4rem;text-transform:uppercase}
.briciole a:hover{color:var(--osso)}
.briciole span::before{content:'/';margin-right:.7rem;color:var(--linea-s)}
.chiaro .briciole a:hover{color:var(--inchiostro)}
.testata h1{font-size:clamp(2.4rem,5.2vw,4.6rem);text-transform:uppercase;letter-spacing:-.03em;line-height:1;max-width:16ch}
.testata .lead{font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.55;color:var(--osso-60);max-width:56ch;margin-top:1.8rem}
.chiaro .testata .lead{color:var(--grigio-scuro)}

.figura-full{overflow:hidden;max-height:78vh}
.figura-full img{width:100%;height:100%;object-fit:cover}

/* hub lavorazioni: capitoli */
.capitolo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;padding:clamp(3rem,7vh,5.5rem) 0;border-top:1px solid var(--linea-s)}
.capitolo:nth-child(even) .cap-foto{order:2}
.cap-foto{overflow:hidden;aspect-ratio:16/11}
.cap-foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.9);transition:filter .6s var(--curva),transform 1s var(--curva)}
.capitolo:hover .cap-foto img{filter:none;transform:scale(1.04)}
.cap-corpo .idx{font-family:var(--disp);font-weight:600;font-size:.8125rem;color:var(--pietra);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.cap-corpo h2{font-size:clamp(1.9rem,3.4vw,3rem);text-transform:uppercase;letter-spacing:-.02em;margin:.9rem 0 1.2rem}
.cap-corpo p{color:var(--osso-60);max-width:46ch}
.cap-corpo .freccia{margin-top:1.8rem}

/* dettaglio lavorazione: spec + misure */
.spec{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.spec .colonna p+p{margin-top:1.1rem}
.spec .colonna .attenuato{color:var(--osso-60)}
.misure{border-top:1px solid var(--linea-s)}
.misura{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:1.4rem 0;border-bottom:1px solid var(--linea-s)}
.misura .che{font-size:.8rem;letter-spacing:.06em;color:var(--pietra)}
.misura .quanto{font-family:var(--disp);font-size:clamp(1.4rem,2.2vw,1.9rem);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.misura .quanto sub{font-family:var(--testo);font-size:.75rem;font-weight:500;color:var(--pietra);margin-left:.25rem;vertical-align:baseline}

/* diagramma lastra */
.diagramma{margin-top:1rem}
.lastra-fig{position:relative;width:100%;aspect-ratio:var(--slab);border:1px solid var(--osso-40);background:repeating-linear-gradient(90deg,transparent,transparent 39px,var(--linea-s) 39px,var(--linea-s) 40px)}
.lastra-fig .taglio{position:absolute;top:0;bottom:0;left:38%;width:1px;background:var(--accento-viva);transform:scaleY(0);transform-origin:top;transition:transform 1.3s var(--curva) .3s}
.diagramma.in .lastra-fig .taglio{transform:none}
.lastra-fig .q-alto{position:absolute;top:-1.9rem;left:0;font-size:.72rem;letter-spacing:.1em;color:var(--pietra);font-variant-numeric:tabular-nums}
.lastra-fig .q-lato{position:absolute;left:-1rem;top:50%;transform:rotate(-90deg) translateX(-50%);transform-origin:left center;font-size:.72rem;letter-spacing:.1em;color:var(--pietra);font-variant-numeric:tabular-nums}
.diagramma .nota{font-size:.8rem;color:var(--pietra);margin-top:2.4rem;max-width:42ch}

/* sistemi ancoraggio (pagina facciate) */
.ancoraggio{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:clamp(2.5rem,6vh,4rem) 0;border-top:1px solid var(--linea-s)}
.ancoraggio:nth-child(even) .anc-foto{order:2}
.anc-foto{background:#fff;padding:clamp(1.6rem,3vw,2.8rem);display:flex;align-items:center;justify-content:center}
.anc-foto img{max-height:300px;width:auto;object-fit:contain}
.anc-corpo .sigla{font-family:var(--disp);font-size:.75rem;font-weight:600;letter-spacing:.16em;color:var(--accento-viva)}
.anc-corpo h3{font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:uppercase;letter-spacing:-.02em;margin:.8rem 0 1rem}
.anc-corpo p{color:var(--osso-60);max-width:48ch}

/* galleria */
.galleria{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:3rem}
.galleria .rivela-img{aspect-ratio:3/2}
.galleria img{width:100%;height:100%;object-fit:cover}

/* griglia realizzazioni completa */
.progetti{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3.5rem}
.progetto{position:relative;overflow:hidden;display:block}
.progetto .quadro{aspect-ratio:4/3;overflow:hidden;background:var(--nero-2)}
.progetto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.3) brightness(.86);transition:filter .6s var(--curva),transform 1s var(--curva)}
.progetto:hover img{filter:none;transform:scale(1.05)}
.progetto .quadro::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(18,15,11,.78),transparent 55%)}
.progetto .info{position:absolute;left:0;right:0;bottom:0;padding:1.4rem;z-index:2}
.progetto .info span{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--osso-60);margin-bottom:.3rem}
.progetto .info strong{font-family:var(--disp);font-weight:600;font-size:1.15rem}

/* masonry (pagina progetto) */
.masonry{columns:2;column-gap:1.5rem;margin-top:3rem}
.masonry .rivela-img{break-inside:avoid;margin-bottom:1.5rem;display:block}
.masonry img{width:100%;display:block}

/* contatti pagina */
.contatti-pagina{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(3rem,7vw,6rem);align-items:start}
.contatti-pagina.form-prima .modulo{order:-1}
.recapiti-pagina .recapito{grid-template-columns:9rem 1fr}
.recapiti-pagina .recapito .che{display:inline-flex;align-items:center;gap:.6rem}
.recapiti-pagina .recapito .che svg{width:14px;height:14px;color:var(--accento-viva)}
.mappa-full{width:100%;height:440px;border:0;filter:grayscale(1) invert(.9) contrast(.9)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1040px){
  .azienda{grid-template-columns:1fr}
  .azienda-foto{min-height:340px;order:-1}
  .azienda-testo{padding:clamp(2.5rem,6vh,4rem) 0}
  .opere{grid-template-columns:1fr}
  .sistemi{grid-template-columns:repeat(2,1fr)}
  .vetrina{grid-template-columns:1fr 1fr}
  .opera-r.grande{grid-column:span 2;grid-row:auto}
  .opera-r.grande img{aspect-ratio:16/10}
  .opera-r.piccola{grid-column:span 1}
  .contatto,.spec,.capitolo,.ancoraggio,.contatti-pagina{grid-template-columns:1fr}
  .capitolo:nth-child(even) .cap-foto,.ancoraggio:nth-child(even) .anc-foto{order:0}
  .progetti{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
}
@media (max-width:760px){
  .nav-menu,.nav-tel{display:none}
  .hamb{display:block}
  .blocco{padding-top:3.2rem;padding-bottom:3.2rem}
  .testata{padding-top:2.4rem;padding-bottom:2.2rem}
  .briciole{margin-bottom:1.4rem}
  .testata .lead{margin-top:1.2rem}
  .hero h1{font-size:clamp(1.85rem,7.4vw,2.7rem)}
  .hero::after{background:linear-gradient(to top,rgba(18,15,11,.94) 0%,rgba(18,15,11,.62) 50%,rgba(18,15,11,.4) 100%)}
  .hero-in{padding-top:5rem}
  .hero-coda{margin-top:1.8rem}
  .hero-coda p{color:var(--osso)}
  .intestazione{grid-template-columns:1fr;gap:.9rem}
  .intestazione h2,.intestazione .desc,.intestazione .quota{grid-column:1}
  .sistemi{grid-template-columns:1fr;gap:0}
  .sistema{padding-top:1.4rem;margin-top:1.4rem}
  .sistema .lastra{aspect-ratio:16/9}
  .vetrina{grid-template-columns:1fr;gap:1.1rem}
  .opera-r.grande,.opera-r.piccola{grid-column:span 1}
  .progetti{grid-template-columns:1fr;gap:1.2rem}
  .masonry{columns:1;margin-top:2rem}
  .recapito{grid-template-columns:1fr;gap:.3rem}
  .recapiti-pagina .recapito{grid-template-columns:1fr}
  .campo-2{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem}
  .mappa-full{height:320px}
  .contatti-pagina.form-prima .modulo{order:-1}
  body{font-size:1rem}
}
@media (max-width:460px){
  .foot-top{grid-template-columns:1fr}
}