/**
 * Edil Europe — foglio di stile del tema.
 *
 * Direzione: industriale, nero e arancio presi dal marchio del cliente.
 * I caratteri sono ospitati sul sito (assets/font), non sui server di Google.
 */

/* ================================================================== *
 * 1. Valori del tema
 * ================================================================== */

:root {
  --nero: #070707;
  --grafite: #101010;
  --acciaio: #1a1a1a;
  --ferro: #2a2a2a;
  --cemento: #8c8c8c;
  --calce: #f4f4f2;
  --arancio: #f98412;
  --arancio-scuro: #d96a00;

  --bordo: rgba(244, 244, 242, 0.12);
  --bordo-chiaro: rgba(7, 7, 7, 0.12);

  --display: "Archivo Black", "Archivo", system-ui, sans-serif;
  --testo: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
  --larghezza: 1500px;
  --gutter: 1.25rem;
}

@media (min-width: 640px) {
  :root { --gutter: 2rem; }
}

/* ================================================================== *
 * 2. Base
 * ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--nero);
  color: var(--calce);
  font-family: var(--testo);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
}

p { margin: 0; }

::selection { background: var(--arancio); color: #000; }

:focus-visible {
  outline: 2px solid var(--arancio);
  outline-offset: 3px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0c0c0c; }
::-webkit-scrollbar-thumb { background: #2f2f2f; }
::-webkit-scrollbar-thumb:hover { background: var(--arancio); }

/* Nascosto alla vista ma non ai lettori di schermo.
   Niente left:-9999px: allargherebbe il documento e la barra fissa
   si dimensionerebbe su quella larghezza invece che sullo schermo. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.salta-al-contenuto {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  background: var(--arancio);
  color: #000;
  padding: 0.75rem 1.25rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.salta-al-contenuto:focus {
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
}

/* ================================================================== *
 * 3. Elementi ricorrenti
 * ================================================================== */

.contenuto {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.contenuto.stretto { max-width: 900px; }

.sezione { padding-block: clamp(4.5rem, 9vw, 9rem); }
.sezione.chiara { background: var(--calce); color: var(--nero); }
.sezione.grafite { background: var(--grafite); }

/* Griglia da disegno tecnico */
.blueprint {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 72px 72px;
}
.blueprint.scuro {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Nastro di sicurezza da cantiere */
.hazard {
  height: 8px;
  width: 100%;
  background-image: repeating-linear-gradient(-45deg, var(--arancio) 0 18px, #0a0a0a 18px 36px);
}

/* Occhiello tecnico */
.occhiello {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--arancio);
}
.occhiello-riga {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.occhiello-riga::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: var(--arancio);
  flex: none;
}

.titolo-sezione {
  margin-top: 1.5rem;
  font-size: clamp(1.95rem, 4.8vw, 4.25rem);
  max-width: 20ch;
}
.intro-sezione {
  margin-top: 1.75rem;
  max-width: 44rem;
  color: var(--cemento);
  font-size: clamp(0.95rem, 1.4vw, 1.125rem);
  line-height: 1.7;
}
.chiara .intro-sezione { color: rgba(7, 7, 7, 0.65); }

.testa-sezione {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}

/* Bottoni */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.0625rem 2rem;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s var(--curva), border-color 0.4s var(--curva);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--curva);
}
.btn-pieno { background: var(--arancio); color: #000; }
.btn-pieno::before { background: var(--calce); }
.btn-pieno:hover::before, .btn-pieno:focus-visible::before { transform: scaleX(1); }

.btn-vuoto { color: var(--calce); border: 1px solid rgba(244, 244, 242, 0.28); }
.btn-vuoto::before { background: var(--arancio); }
.btn-vuoto:hover, .btn-vuoto:focus-visible { color: #000; border-color: var(--arancio); }
.btn-vuoto:hover::before, .btn-vuoto:focus-visible::before { transform: scaleX(1); }

.chiara .btn-vuoto { color: var(--nero); border-color: rgba(7, 7, 7, 0.28); }

.btn-piccolo { padding: 0.85rem 1.5rem; }

/* Sottolineatura che si apre */
.ulink { position: relative; display: inline-block; transition: color 0.3s; }
.ulink::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  height: 1.5px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--curva);
}
.ulink:hover::after { transform: scaleX(1); transform-origin: left; }

/* Titolo a contorno */
.contorno {
  -webkit-text-stroke: 1.5px rgba(244, 244, 242, 0.42);
  color: transparent;
}

/* Comparsa allo scorrimento */
.rivela {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 0.85s var(--curva), transform 0.85s var(--curva);
}
.rivela.dentro { opacity: 1; transform: none; }

/* ================================================================== *
 * 4. Intestazione
 * ================================================================== */

.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background 0.5s var(--curva), border-color 0.5s var(--curva), backdrop-filter 0.5s;
}
.barra.attaccata, .barra.aperta {
  background: rgba(7, 7, 7, 0.92);
  border-bottom-color: var(--bordo);
  backdrop-filter: blur(18px);
}

.barra-interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 80px;
}
@media (min-width: 1024px) { .barra-interno { height: 88px; } }

.barra-marchio { position: relative; z-index: 70; flex: none; }
.barra-marchio img { height: 40px; width: auto; }
@media (min-width: 640px) { .barra-marchio img { height: 52px; } }

.menu-desktop { display: none; }
@media (min-width: 1024px) {
  .menu-desktop { display: flex; align-items: center; gap: 2.25rem; }
}
.menu-elenco {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu-elenco a {
  position: relative;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.75);
  transition: color 0.3s;
}
.menu-elenco a:hover { color: var(--calce); }
.menu-elenco a.voce-attiva { color: var(--arancio); }
.menu-elenco a.voce-attiva::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 4px;
  height: 4px;
  background: var(--arancio);
  transform: translateX(-50%);
}

.barra-azioni { display: flex; align-items: center; gap: 1rem; }
.barra-telefono {
  display: none;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  color: rgba(244, 244, 242, 0.7);
  transition: color 0.3s;
}
.barra-telefono:hover { color: var(--arancio); }
@media (min-width: 1280px) { .barra-telefono { display: block; } }
.barra-cta { display: none; }
@media (min-width: 640px) { .barra-cta { display: inline-flex; } }

.apri-menu {
  position: relative;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(244, 244, 242, 0.25);
  background: none;
  cursor: pointer;
  transition: border-color 0.3s;
}
.apri-menu:hover { border-color: var(--arancio); }
@media (min-width: 1024px) { .apri-menu { display: none; } }
.apri-menu span { position: relative; display: block; width: 20px; height: 12px; }
.apri-menu i {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--calce);
  transition: all 0.3s var(--curva);
}
.apri-menu i:nth-child(1) { top: 0; }
.apri-menu i:nth-child(2) { top: 100%; }
.apri-menu[aria-expanded="true"] i:nth-child(1) { top: 50%; transform: rotate(45deg); }
.apri-menu[aria-expanded="true"] i:nth-child(2) { top: 50%; transform: rotate(-45deg); }

/* Menu a schermo intero */
.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5rem var(--gutter) 2rem;
  background: var(--nero);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--curva), visibility 0.35s;
}
.menu-mobile.aperto { opacity: 1; visibility: visible; }
.menu-mobile-elenco { margin: 0; padding: 0; list-style: none; }
.menu-mobile-elenco a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--display);
  font-size: clamp(1.75rem, 8vw, 3rem);
  text-transform: uppercase;
  transition: color 0.3s;
}
.menu-mobile-elenco a:hover, .menu-mobile-elenco a.voce-attiva { color: var(--arancio); }
.menu-mobile-servizi {
  margin-top: 2.5rem;
  display: grid;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--cemento);
}
.menu-mobile-servizi a:hover { color: var(--arancio); }
.menu-mobile-tel { margin-top: 1.5rem; color: var(--arancio); font-family: var(--mono); }

/* ================================================================== *
 * 5. Copertina e testate
 * ================================================================== */

.copertina {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  padding-top: 7rem;
  overflow: hidden;
  background: var(--nero);
}
.testata {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 74svh;
  padding-top: 8rem;
  overflow: hidden;
  background: var(--nero);
}

.copertina-sfondo, .testata-sfondo { position: absolute; inset: 0; }
.copertina-sfondo img, .testata-sfondo img { width: 100%; height: 100%; object-fit: cover; }
.copertina-velo, .testata-velo { position: absolute; inset: 0; }
.copertina-velo.alto { background: linear-gradient(to top, var(--nero), rgba(7,7,7,0.72) 45%, rgba(7,7,7,0.85)); }
.copertina-velo.lato { background: linear-gradient(to right, rgba(7,7,7,0.95), rgba(7,7,7,0.35) 55%, transparent); }
.testata-velo.alto { background: linear-gradient(to top, var(--nero), rgba(7,7,7,0.78) 50%, rgba(7,7,7,0.6)); }
.testata-velo.lato { background: linear-gradient(to right, rgba(7,7,7,0.92), transparent 70%); }
.copertina-sfondo .blueprint, .testata-sfondo .blueprint { position: absolute; inset: 0; opacity: 0.65; }

.copertina-corpo, .testata-corpo {
  position: relative;
  padding-bottom: 3.5rem;
}
@media (min-width: 1024px) {
  .copertina-corpo, .testata-corpo { padding-bottom: 5rem; }
}

.copertina-titolo {
  margin-top: 1.75rem;
  font-size: clamp(2.75rem, 9.5vw, 10.5rem);
  max-width: 14ch;
}
.copertina-titolo .arancio { color: var(--arancio); }

.copertina-sotto {
  margin-top: 1rem;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 3.6rem);
  line-height: 1.05;
  text-transform: uppercase;
}

.copertina-testo {
  max-width: 36rem;
  margin-top: 2.5rem;
  color: rgba(244, 244, 242, 0.8);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  line-height: 1.7;
}
.copertina-azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.copertina-dati {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem 1rem;
  margin: 3rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--bordo);
}
@media (min-width: 640px) { .copertina-dati { grid-template-columns: repeat(4, 1fr); } }
.copertina-dati dt {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  color: var(--arancio);
}
.copertina-dati dd {
  margin: 0.375rem 0 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cemento);
}

.briciole {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cemento);
}
.briciole a:hover { color: var(--arancio); }
.briciole .sep { opacity: 0.4; }
.briciole .qui { color: var(--arancio); }

.testata-titolo {
  margin-top: 1.5rem;
  font-size: clamp(2.4rem, 7.2vw, 7rem);
  max-width: 18ch;
}
.testata-testo {
  max-width: 42rem;
  margin-top: 2rem;
  color: rgba(244, 244, 242, 0.78);
  font-size: clamp(0.95rem, 1.3vw, 1.125rem);
  line-height: 1.7;
}

/* ================================================================== *
 * 6. Nastro scorrevole
 * ================================================================== */

.nastro {
  overflow: hidden;
  border-block: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--grafite);
  padding-block: 1rem;
}
.nastro-pista {
  display: flex;
  width: max-content;
  animation: scorri var(--durata, 38s) linear infinite;
}
.nastro-gruppo { display: flex; flex: none; align-items: center; }
.nastro-voce { display: flex; flex: none; align-items: center; }
.nastro-voce span:first-child { padding-inline: 1.25rem; white-space: nowrap; }
.nastro-voce .rombo { color: rgba(249, 132, 18, 0.7); font-size: 0.6em; }
.nastro.grande .nastro-pista {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3vw, 1.875rem);
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.85);
}
.nastro.tenue .nastro-pista {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  text-transform: uppercase;
  color: rgba(140, 140, 140, 0.25);
}

@keyframes scorri {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ================================================================== *
 * 7. Blocchi della home
 * ================================================================== */

.due-colonne {
  display: grid;
  gap: 3.5rem;
}
@media (min-width: 1024px) {
  .due-colonne { grid-template-columns: 1fr 0.85fr; gap: 6rem; }
  .due-colonne.rovescio { grid-template-columns: 0.9fr 1fr; }
}

/* Schede con la barra arancio che cresce */
.griglia-schede { display: grid; gap: 1px; margin-top: 3.5rem; }
@media (min-width: 640px) { .griglia-schede.due { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) { .griglia-schede.quattro { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .griglia-schede.quattro { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) { .griglia-schede.tre { grid-template-columns: repeat(3, 1fr); } }

.scheda {
  position: relative;
  height: 100%;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--grafite);
  transition: background 0.5s var(--curva);
}
.grafite .scheda { background: var(--nero); }
.scheda:hover { background: var(--acciaio); }
.scheda::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--arancio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--curva);
}
.scheda:hover::after { transform: scaleX(1); }
.scheda-sigla {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: rgba(249, 132, 18, 0.45);
  transition: color 0.4s;
}
.scheda:hover .scheda-sigla { color: var(--arancio); }
.scheda-numero {
  font-family: var(--display);
  font-size: 3rem;
  color: rgba(244, 244, 242, 0.12);
  transition: color 0.5s;
}
.scheda:hover .scheda-numero { color: rgba(249, 132, 18, 0.85); }
.scheda h3 { margin-top: 1.5rem; font-size: 1.125rem; }
.scheda p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: var(--cemento); }
.scheda-output {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(249, 132, 18, 0.8);
}

/* Riquadro arancio sovrapposto alla foto */
.figura { position: relative; }
.figura img { width: 100%; height: 100%; object-fit: cover; }
.figura-ritratto { aspect-ratio: 3 / 4; overflow: hidden; }
.pastiglia {
  position: absolute;
  bottom: -1.5rem;
  left: -1.5rem;
  max-width: 250px;
  padding: 1.5rem;
  background: var(--arancio);
  color: var(--nero);
}
.pastiglia.destra { left: auto; right: -1rem; background: var(--calce); }
.pastiglia strong { display: block; font-family: var(--display); font-size: 3rem; line-height: 1; }
.pastiglia span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(7, 7, 7, 0.72);
}
@media (max-width: 639px) { .pastiglia { display: none; } }

/* L'equazione */
.equazione {
  position: relative;
  background: var(--calce);
  color: var(--nero);
  overflow: hidden;
}
.equazione .blueprint { position: absolute; inset: 0; }
.equazione .contenuto { position: relative; }
.equazione-griglia {
  display: grid;
  gap: 1px;
  margin-top: 4rem;
  border-top: 1px solid var(--bordo-chiaro);
}
@media (min-width: 768px) { .equazione-griglia { grid-template-columns: repeat(3, 1fr); } }
.equazione-voce {
  position: relative;
  height: 100%;
  padding-block: 2.5rem;
  border-bottom: 1px solid var(--bordo-chiaro);
}
@media (min-width: 768px) {
  .equazione-voce { padding-inline: 2rem; border-right: 1px solid var(--bordo-chiaro); }
  .equazione-voce:first-child { padding-left: 0; }
  .equazione-voce:last-child { border-right: 0; }
}
.equazione-segno {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-family: var(--display);
  color: var(--arancio);
  line-height: 0.8;
  font-size: clamp(3.5rem, 8vw, 7rem);
}
.equazione-segno sup { font-size: 0.42em; line-height: 1; margin-top: 0.3em; opacity: 0.55; }
.equazione-voce h3 { margin-top: 1.5rem; font-size: 1.125rem; }
.equazione-voce p { margin-top: 0.75rem; max-width: 24rem; font-size: 0.875rem; line-height: 1.7; color: rgba(7, 7, 7, 0.6); }

/* I numeri */
.numeri { background: var(--arancio); color: var(--nero); }
.numeri-griglia {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem 0;
  margin: 0;
  padding-block: clamp(3.5rem, 6vw, 5rem);
}
@media (min-width: 1024px) { .numeri-griglia { grid-template-columns: repeat(4, 1fr); } }
.numeri-voce { padding-left: 1.25rem; border-left: 1px solid rgba(7, 7, 7, 0.2); }
@media (min-width: 640px) { .numeri-voce { padding-left: 2rem; } }
.numeri-voce dt { font-family: var(--display); font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; }
.numeri-voce dd {
  margin: 0.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(7, 7, 7, 0.7);
}
@media (min-width: 640px) { .numeri-voce dd { font-size: 0.6875rem; } }

/* ================================================================== *
 * 8. Indice dei servizi (con la foto che segue il puntatore)
 * ================================================================== */

.indice { position: relative; margin-top: 4rem; }
.indice-elenco { border-top: 1px solid var(--bordo); }

.indice-voce {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--bordo);
}
.indice-voce::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--arancio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--curva);
}
@media (min-width: 1024px) {
  .indice-voce:hover::before, .indice-voce:focus-visible::before { transform: scaleX(1); }
}
.indice-riga {
  position: relative;
  display: grid;
  gap: 1rem;
  padding-block: 2rem;
}
@media (min-width: 640px) {
  .indice-riga { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
}
@media (min-width: 1024px) { .indice-riga { padding-block: 2.5rem; } }

.indice-num { font-family: var(--mono); font-size: 0.875rem; color: var(--arancio); transition: color 0.3s; }
.indice-testi { display: block; }
@media (min-width: 1024px) {
  .indice-testi { display: flex; align-items: baseline; gap: 2.5rem; }
  .indice-testi h3 { width: 46%; flex: none; }
}
.indice-testi h3 { font-size: clamp(1.5rem, 3.2vw, 2.75rem); transition: color 0.3s; }
.indice-testi p {
  margin-top: 0.75rem;
  max-width: 28rem;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--cemento);
  transition: color 0.3s;
}
@media (min-width: 1024px) { .indice-testi p { margin-top: 0; } }
.indice-azione {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cemento);
  transition: color 0.3s, transform 0.3s;
}

@media (min-width: 1024px) {
  .indice-voce:hover .indice-num { color: rgba(7, 7, 7, 0.55); }
  .indice-voce:hover .indice-testi h3 { color: var(--nero); }
  .indice-voce:hover .indice-testi p { color: rgba(7, 7, 7, 0.7); }
  .indice-voce:hover .indice-azione { color: var(--nero); transform: translateX(6px); }
}

.indice-foto {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s var(--curva), transform 0.35s var(--curva);
  will-change: transform;
}
@media (min-width: 1024px) and (hover: hover) { .indice-foto { display: block; } }
.indice-foto.visibile { opacity: 1; }
.indice-foto-interno { transform: translate(-50%, -50%); position: relative; }
.indice-foto img {
  width: 400px;
  height: 290px;
  object-fit: cover;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.7);
}
.indice-foto-num {
  position: absolute;
  bottom: -0.75rem;
  left: -0.75rem;
  padding: 0.375rem 0.75rem;
  background: var(--arancio);
  color: var(--nero);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

/* ================================================================== *
 * 9. Progetti
 * ================================================================== */

.progetti-mosaico { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 1024px) { .progetti-mosaico { grid-template-columns: repeat(12, 1fr); } }

.mosaico-cella .progetto-foto { aspect-ratio: 4 / 2.9; }
.mosaico-cella.cella-1 .progetto-foto { aspect-ratio: 4 / 3.4; }
@media (min-width: 1024px) {
  .cella-1 { grid-column: span 7; grid-row: span 2; }
  .cella-2, .cella-3 { grid-column: span 5; }
  .cella-4 { grid-column: span 4; }
  .cella-5 { grid-column: span 8; }
  .cella-1 .progetto-foto { aspect-ratio: auto; height: 100%; }
}

.progetto {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
}
.progetto-foto { overflow: hidden; background: var(--acciaio); height: 100%; }
.progetto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--curva);
}
.progetto:hover .progetto-foto img { transform: scale(1.07); }
.progetto-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--nero), rgba(7, 7, 7, 0.45) 45%, transparent);
}
.progetto-corpo {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
}
@media (min-width: 640px) { .progetto-corpo { padding: 1.75rem; } }
.progetto-categoria {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arancio);
}
.progetto-corpo h3 { margin-top: 0.5rem; font-size: 1.125rem; line-height: 1.15; }
@media (min-width: 640px) { .progetto-corpo h3 { font-size: 1.5rem; } }
.progetto-meta {
  margin-top: 0.375rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--cemento);
}
.progetto-freccia {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--arancio);
  color: var(--nero);
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.5s var(--curva);
}
@media (min-width: 640px) { .progetto-freccia { display: flex; } }
.progetto:hover .progetto-freccia { opacity: 1; transform: none; }

/* Griglia della pagina progetti */
.progetti-griglia { display: grid; gap: 1rem; margin-top: 2.5rem; }
@media (min-width: 640px) { .progetti-griglia { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .progetti-griglia { grid-template-columns: repeat(3, 1fr); } }

.progetto-scheda { position: relative; overflow: hidden; }
.progetto-scheda .progetto-foto { aspect-ratio: 4 / 3.2; }
.progetto-etichetta {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.375rem 0.75rem;
  background: rgba(7, 7, 7, 0.8);
  backdrop-filter: blur(4px);
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--arancio);
}
.progetto-barra {
  margin-top: 1rem;
  height: 2px;
  width: 100%;
  background: var(--arancio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--curva);
}
.progetto-scheda:hover .progetto-barra { transform: scaleX(1); }

.filtri {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--bordo);
  scrollbar-width: none;
}
.filtri::-webkit-scrollbar { display: none; }
.filtro {
  flex: none;
  padding: 0.625rem 1.25rem;
  border: 1px solid rgba(244, 244, 242, 0.15);
  background: none;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cemento);
  cursor: pointer;
  transition: all 0.3s;
}
.filtro:hover { color: var(--calce); border-color: rgba(249, 132, 18, 0.6); }
.filtro[aria-pressed="true"] { background: var(--arancio); border-color: var(--arancio); color: var(--nero); }
.filtro .conta { margin-left: 0.5rem; opacity: 0.55; }
.progetto-scheda[hidden] { display: none; }

/* ================================================================== *
 * 10. Metodo di lavoro
 * ================================================================== */

.processo { display: grid; gap: 2.5rem; margin-top: 4rem; }
@media (min-width: 1024px) { .processo { grid-template-columns: 1fr 0.68fr; gap: 5rem; } }

.processo-elenco { border-top: 1px solid var(--bordo); }
.processo-voce {
  display: block;
  width: 100%;
  padding-block: 1.75rem;
  border: 0;
  border-bottom: 1px solid var(--bordo);
  background: none;
  text-align: left;
  cursor: pointer;
}
.processo-riga { display: flex; align-items: baseline; gap: 1.25rem; }
@media (min-width: 640px) { .processo-riga { gap: 2rem; } }
.processo-num {
  font-family: var(--display);
  font-size: clamp(1.75rem, 4vw, 3rem);
  color: rgba(244, 244, 242, 0.18);
  transition: color 0.3s;
}
.processo-voce[aria-current="true"] .processo-num { color: var(--arancio); }
.processo-testi { flex: 1; }
.processo-testi h3 {
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  color: rgba(244, 244, 242, 0.55);
  transition: color 0.3s;
}
.processo-voce[aria-current="true"] .processo-testi h3 { color: var(--calce); }
.processo-testi > p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--cemento); }
.processo-esteso {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s var(--curva), opacity 0.4s;
}
.processo-voce[aria-current="true"] .processo-esteso { grid-template-rows: 1fr; opacity: 1; }
/* il figlio e' uno <span>: il selettore deve agganciarlo comunque, o la riga
   a 0fr non ritaglia niente e il testo deborda durante l'apertura */
.processo-esteso > * { display: block; overflow: hidden; }
.processo-esteso > * > p:first-child { padding-top: 0.75rem; }
.processo-esteso p { max-width: 34rem; font-size: 0.875rem; line-height: 1.7; color: rgba(140, 140, 140, 0.85); }
.processo-esteso .uscita {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arancio);
}

.processo-figura { display: none; }
@media (min-width: 1024px) { .processo-figura { display: block; } }
.processo-figura-interno { position: sticky; top: 8rem; }
.processo-cornice { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--acciaio); }
.processo-cornice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.08);
  transition: opacity 0.7s var(--curva), transform 0.7s var(--curva);
}
.processo-cornice img.attiva { opacity: 1; transform: none; }
.processo-cornice::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(7, 7, 7, 0.8), transparent 60%);
}
.processo-cornice-num {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  padding: 1.5rem;
  font-family: var(--display);
  font-size: 3.75rem;
  color: var(--arancio);
}
.processo-tacche { display: flex; gap: 0.375rem; margin-top: 0.75rem; }
.processo-tacche span { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.12); transition: background 0.4s; }
.processo-tacche span.attiva { background: var(--arancio); }

/* ================================================================== *
 * 11. Mission, vision, fascia finale
 * ================================================================== */

.manifesto { display: grid; gap: 1rem; }
@media (min-width: 768px) { .manifesto { grid-template-columns: repeat(2, 1fr); } }
.manifesto-voce {
  position: relative;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--nero);
}
.manifesto-foto { aspect-ratio: 16 / 9; overflow: hidden; }
.manifesto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  transition: transform 0.9s var(--curva), opacity 0.9s var(--curva);
}
.manifesto-voce:hover .manifesto-foto img { transform: scale(1.05); opacity: 0.85; }
.manifesto-corpo { padding: 2rem; }
@media (min-width: 1024px) { .manifesto-corpo { padding: 2.75rem; } }
.manifesto-corpo h3 { margin-top: 1rem; font-size: clamp(1.4rem, 2.6vw, 1.875rem); }
.manifesto-corpo p { margin-top: 1.25rem; font-size: 0.9375rem; line-height: 1.75; color: var(--cemento); }
.manifesto-voce::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--arancio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--curva);
  z-index: 2;
}
.manifesto-voce:hover::before { transform: scaleX(1); }

.fascia { position: relative; overflow: hidden; }
.fascia-sfondo { position: absolute; inset: 0; }
.fascia-sfondo img { width: 100%; height: 100%; object-fit: cover; }
.fascia-velo { position: absolute; inset: 0; background: rgba(7, 7, 7, 0.8); }
.fascia .blueprint { position: absolute; inset: 0; opacity: 0.6; }
.fascia-corpo { position: relative; padding-block: clamp(6rem, 12vw, 10rem); }
.fascia-corpo .titolo-sezione { max-width: 24ch; }
.fascia-corpo p { margin-top: 2rem; max-width: 46rem; color: rgba(244, 244, 242, 0.75); font-size: clamp(0.95rem, 1.3vw, 1.125rem); line-height: 1.7; }
.fascia-azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

/* Elenco delle tappe */
.tappe { margin-top: 3rem; border-top: 1px solid var(--bordo); }
.tappa {
  display: grid;
  gap: 0.5rem;
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--bordo);
}
@media (min-width: 640px) { .tappa { grid-template-columns: 110px 1fr; gap: 2rem; } }
.tappa-anno { font-family: var(--mono); font-size: 0.875rem; letter-spacing: 0.12em; color: var(--arancio); }
.tappa h3 { font-size: 1.0625rem; }
@media (min-width: 640px) { .tappa h3 { font-size: 1.125rem; } }
.tappa p { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.7; color: var(--cemento); }

/* Ritratti della squadra */
.squadra { display: grid; gap: 1rem; margin-top: 4rem; }
@media (min-width: 640px) { .squadra { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .squadra { grid-template-columns: repeat(4, 1fr); } }
.squadra figure { position: relative; margin: 0; overflow: hidden; }
.squadra-foto { aspect-ratio: 3 / 4; overflow: hidden; background: var(--acciaio); }
.squadra-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: transform 0.9s var(--curva), filter 0.9s var(--curva);
}
.squadra figure:hover .squadra-foto img { transform: scale(1.05); filter: none; }
.squadra figcaption { position: absolute; inset: auto 0 0 0; padding: 1.25rem; }
.squadra figcaption h3 { font-size: 1rem; }
.squadra figcaption p {
  margin-top: 0.25rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--arancio);
}
.squadra-velo { position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,7,7,0.9), transparent 55%); }

/* ================================================================== *
 * 12. Pagina servizi e dettaglio
 * ================================================================== */

.servizio-blocco {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--grafite);
}
.servizio-blocco + .servizio-blocco { margin-top: 1rem; }
.servizio-blocco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 2px;
  background: var(--arancio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--curva);
}
.servizio-blocco:hover::before { transform: scaleX(1); }
.servizio-griglia { display: grid; }
@media (min-width: 1024px) { .servizio-griglia { grid-template-columns: repeat(2, 1fr); } }
.servizio-foto { aspect-ratio: 16 / 10; overflow: hidden; background: var(--acciaio); }
@media (min-width: 1024px) { .servizio-foto { aspect-ratio: auto; min-height: 430px; } }
.servizio-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--curva); }
.servizio-blocco:hover .servizio-foto img { transform: scale(1.06); }
@media (min-width: 1024px) {
  .servizio-blocco.invertito .servizio-foto { order: 2; }
}
.servizio-corpo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}
@media (min-width: 640px) { .servizio-corpo { padding: 3rem; } }
@media (min-width: 1024px) { .servizio-corpo { padding: 4rem; } }
.servizio-numero-riga { display: flex; align-items: center; gap: 1rem; }
.servizio-numero { font-family: var(--display); font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; color: var(--arancio); }
.servizio-numero-riga::after { content: ""; flex: 1; height: 1px; background: rgba(249, 132, 18, 0.35); }
.servizio-corpo h2 { margin-top: 1.75rem; font-size: clamp(1.4rem, 3.2vw, 2.25rem); line-height: 1.1; }
.servizio-claim {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--arancio);
}
.servizio-corpo > p { margin-top: 1.5rem; max-width: 34rem; font-size: 0.9375rem; line-height: 1.75; color: var(--cemento); }
.pillole { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.pillole li {
  padding: 0.375rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--cemento);
}
.servizio-corpo .btn { margin-top: 2.25rem; align-self: flex-start; }

/* Dettaglio */
.dettaglio-intro { font-size: clamp(1.05rem, 2vw, 1.5rem); line-height: 1.55; color: var(--calce); }
.interventi { margin: 2rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--bordo); }
.interventi li {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--bordo);
}
.interventi .n { font-family: var(--mono); font-size: 0.6875rem; color: rgba(249, 132, 18, 0.5); transition: color 0.3s; }
.interventi li:hover .n { color: var(--arancio); }
.interventi .t { font-size: 0.9375rem; color: rgba(244, 244, 242, 0.85); transition: color 0.3s; }
.interventi li:hover .t { color: var(--calce); }

.richiamo { margin-top: 2.5rem; padding: 2rem; background: var(--arancio); color: var(--nero); }
.richiamo .occhiello { color: rgba(7, 7, 7, 0.7); }
.richiamo h2 { margin-top: 0.75rem; font-size: 1.5rem; line-height: 1.15; }
.richiamo p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: rgba(7, 7, 7, 0.72); }
.richiamo .btn-nero {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.75rem;
  padding: 1rem 1.5rem;
  background: var(--nero);
  color: var(--calce);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.4s, color 0.4s;
}
.richiamo .btn-nero:hover { background: var(--calce); color: var(--nero); }

/* Competenze su fondo chiaro */
.competenze { display: grid; gap: 1px; margin-top: 4rem; border-top: 1px solid var(--bordo-chiaro); }
@media (min-width: 640px) { .competenze { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .competenze { grid-template-columns: repeat(4, 1fr); } }
.competenza {
  position: relative;
  height: 100%;
  padding-block: 2.25rem;
  border-bottom: 1px solid var(--bordo-chiaro);
}
@media (min-width: 640px) {
  .competenza { padding-inline: 1.75rem; border-right: 1px solid var(--bordo-chiaro); }
  .competenza:first-child { padding-left: 0; }
}
@media (min-width: 1024px) { .competenza:last-child { border-right: 0; } }
.competenza h3 { font-size: 1.25rem; }
.competenza p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: rgba(7, 7, 7, 0.6); }
.competenza::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--arancio);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--curva);
}
.competenza:hover::after { transform: scaleX(1); }

/* ================================================================== *
 * 13. Contatti
 * ================================================================== */

.contatti-griglia { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .contatti-griglia { grid-template-columns: 1.25fr 1fr; gap: 5rem; } }

.modulo { margin-top: 2.5rem; display: grid; gap: 1.25rem; }
.modulo-coppia { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .modulo-coppia { grid-template-columns: repeat(2, 1fr); } }
.campo { display: block; }
.campo > span {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cemento);
}
.campo input, .campo select, .campo textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid rgba(244, 244, 242, 0.15);
  background: var(--grafite);
  color: var(--calce);
  font-size: 0.875rem;
  transition: border-color 0.3s;
}
.campo textarea { resize: vertical; min-height: 8rem; }
.campo input::placeholder, .campo textarea::placeholder { color: rgba(140, 140, 140, 0.5); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--arancio); }
.campo select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--cemento) 50%), linear-gradient(135deg, var(--cemento) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

.consenso { display: flex; align-items: flex-start; gap: 0.75rem; cursor: pointer; }
.consenso input { flex: none; width: 1rem; height: 1rem; margin-top: 0.25rem; accent-color: var(--arancio); }
.consenso span { font-size: 0.75rem; line-height: 1.6; color: var(--cemento); }

.modulo-esito {
  margin-top: 2.5rem;
  padding: 2.25rem;
  background: var(--arancio);
  color: var(--nero);
}
.modulo-esito .occhiello { color: rgba(7, 7, 7, 0.7); }
.modulo-esito h2 { margin-top: 1rem; font-size: clamp(1.4rem, 3vw, 1.875rem); line-height: 1.15; }
.modulo-esito p { margin-top: 1rem; font-size: 0.875rem; line-height: 1.7; color: rgba(7, 7, 7, 0.72); }
.modulo-errore {
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(249, 132, 18, 0.35);
  background: rgba(249, 132, 18, 0.08);
  font-size: 0.875rem;
  color: var(--calce);
}

.recapiti { padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--grafite); }
@media (min-width: 640px) { .recapiti { padding: 2.5rem; } }
.recapiti dl { margin: 2rem 0 0; }
.recapiti > dl > div { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.recapiti > dl > div + div { padding-top: 1.5rem; }
.recapiti > dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.recapiti dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cemento);
}
.recapiti dd { margin: 0.5rem 0 0; font-size: 1rem; white-space: pre-line; }
@media (min-width: 640px) { .recapiti dd { font-size: 1.0625rem; } }
.recapiti dd a:hover { color: var(--arancio); }

.urgenze { margin-top: 1rem; padding: 2rem; border: 1px solid rgba(249, 132, 18, 0.25); background: rgba(249, 132, 18, 0.08); }
.urgenze h2 { font-family: var(--display); font-size: 1.25rem; color: var(--arancio); }
.urgenze p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--cemento); }
.urgenze a { display: inline-block; margin-top: 1.25rem; font-family: var(--mono); font-size: 1.125rem; letter-spacing: 0.06em; transition: color 0.3s; }
.urgenze a:hover { color: var(--arancio); }

/* La mappa: niente iframe finché non arriva il consenso */
/* Niente min-height insieme ad aspect-ratio: il browser ricaverebbe la
   LARGHEZZA dall'altezza (320 x 21/9 = 747px) e sfonderebbe lo schermo. */
.mappa-contenitore {
  position: relative;
  margin-top: 4rem;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--grafite);
  overflow: hidden;
}
@media (min-width: 768px) {
  .mappa-contenitore { aspect-ratio: 21 / 9; }
}
.mappa-contenitore iframe { width: 100%; height: 100%; border: 0; }
.mappa-spenta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem;
  text-align: center;
}
.mappa-spenta p { max-width: 34rem; font-size: 0.875rem; line-height: 1.7; color: var(--cemento); }
.mappa-spenta .indirizzo { font-family: var(--display); font-size: clamp(1.1rem, 2.4vw, 1.5rem); color: var(--calce); text-transform: uppercase; }
.mappa-spenta .azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* Domande frequenti */
.domande { border-top: 1px solid var(--bordo); }
.domanda { border-bottom: 1px solid var(--bordo); }
.domanda-bottone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding-block: 1.5rem;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.domanda-bottone > span:first-child {
  font-family: var(--display);
  font-size: clamp(1rem, 2vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--calce);
  transition: color 0.3s;
}
.domanda-bottone:hover > span:first-child,
.domanda-bottone[aria-expanded="true"] > span:first-child { color: var(--arancio); }
.domanda-piu {
  flex: none;
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--arancio);
  transition: transform 0.4s var(--curva);
}
.domanda-bottone[aria-expanded="true"] .domanda-piu { transform: rotate(45deg); }
.domanda-corpo {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.5s var(--curva), opacity 0.4s;
}
.domanda-corpo.aperta { grid-template-rows: 1fr; opacity: 1; }
.domanda-corpo > div { overflow: hidden; }
.domanda-corpo > div > p { padding-bottom: 1.5rem; }
.domanda-corpo p { max-width: 44rem; font-size: 0.9375rem; line-height: 1.75; color: var(--cemento); }

/* ================================================================== *
 * 14. Pagine legali e contenuto WordPress
 * ================================================================== */

.legale { font-size: 1rem; line-height: 1.8; color: rgba(244, 244, 242, 0.82); }
.legale h2 {
  margin-top: 3rem;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  color: var(--calce);
}
.legale h2:first-child { margin-top: 0; }
.legale h3 {
  margin-top: 2rem;
  font-family: var(--testo);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--arancio);
}
.legale p { margin-top: 1rem; }
.legale ul, .legale ol { margin-top: 1rem; padding-left: 1.25rem; }
.legale li { margin-top: 0.5rem; }
.legale dl { margin-top: 1rem; }
.legale dt { margin-top: 0.75rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cemento); }
.legale dd { margin: 0.25rem 0 0; }
.legale a { color: var(--arancio); text-decoration: underline; text-underline-offset: 3px; }
.legale strong { color: var(--calce); }
.legale-data {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cemento);
}
.legale-azioni { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ================================================================== *
 * 15. Piè di pagina
 * ================================================================== */

.pie { position: relative; background: var(--grafite); }
.pie-richiamo { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pie-richiamo-interno { padding-block: clamp(3.5rem, 7vw, 6rem); display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { .pie-richiamo-interno { grid-template-columns: 1.4fr 1fr; align-items: end; } }
.pie-richiamo h2 { margin-top: 1.25rem; font-size: clamp(1.95rem, 4.8vw, 4.25rem); }
.pie-richiamo h2 .arancio { color: var(--arancio); }
.pie-richiamo p { max-width: 28rem; color: var(--cemento); line-height: 1.7; }

.pie-colonne { display: grid; gap: 3rem; padding-block: 4rem; }
@media (min-width: 768px) { .pie-colonne { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pie-colonne { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } }
.pie-marchio img { height: 64px; width: auto; }
.pie-colonne p { margin-top: 1.5rem; max-width: 20rem; font-size: 0.875rem; line-height: 1.7; color: var(--cemento); }
.pie-certificazioni {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(140, 140, 140, 0.6);
}
.pie-colonne h3 {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(244, 244, 242, 0.5);
}
.pie-elenco { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; font-size: 0.875rem; }
.pie-elenco a, .pie-elenco span { color: var(--cemento); }
.pie-elenco a:hover { color: var(--arancio); }
.pie-elenco .forte { color: var(--calce); }
.pie-orari { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; color: rgba(140, 140, 140, 0.7); }

.pie-social { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.pie-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--cemento);
  transition: all 0.3s;
}
.pie-social a:hover { border-color: var(--arancio); color: var(--arancio); }
.pie-social svg { width: 18px; height: 18px; fill: currentColor; }

.pie-coda {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.75rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: rgba(140, 140, 140, 0.55);
}
@media (min-width: 768px) { .pie-coda { flex-direction: row; align-items: center; justify-content: space-between; } }
.pie-coda a { transition: color 0.3s; }
.pie-coda a:hover { color: var(--arancio); }
.pie-legale { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ================================================================== *
 * 16. Banner dei cookie
 * ================================================================== */

.banner-cookie {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: var(--gutter);
  animation: sali 0.5s var(--curva);
}
.banner-cookie[hidden] { display: none; }
@keyframes sali {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.banner-cookie-scatola {
  display: grid;
  gap: 1.5rem;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 1.75rem;
  border: 1px solid rgba(249, 132, 18, 0.35);
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(14px);
  box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.6);
}
@media (min-width: 900px) {
  .banner-cookie-scatola { grid-template-columns: 1fr auto; align-items: center; gap: 2.5rem; }
}
.banner-cookie-testo p { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.7; color: var(--cemento); }
.banner-cookie-testo a { color: var(--arancio); text-decoration: underline; text-underline-offset: 3px; }
.banner-cookie-bottoni { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.banner-cookie-bottoni .btn { flex: 1 1 auto; justify-content: center; }
@media (min-width: 900px) { .banner-cookie-bottoni .btn { flex: none; } }

/* ================================================================== *
 * 17. 404 e ripieghi
 * ================================================================== */

.vuoto { padding-block: clamp(8rem, 18vw, 14rem); text-align: center; }
.vuoto h1 { font-size: clamp(3rem, 12vw, 9rem); color: var(--arancio); }
.vuoto p { margin-top: 1.5rem; color: var(--cemento); }
.vuoto .btn { margin-top: 2.5rem; }

/* ================================================================== *
 * 18. Chi preferisce meno movimento
 * ================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nastro-pista { animation: none; }
  .rivela { opacity: 1; transform: none; transition: none; }
  .banner-cookie { animation: none; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}