/* ─────────────────────────────────────────────────────────────
   Sito Edil D'Amico — foglio di stile unico, scritto a mano.
   Nessun build: si modifica questo file e si ricarica la pagina.

   Indice
   1. Font
   2. Colori e misure (il "pannello di controllo" grafico)
   3. Base
   4. Pezzi riusabili (etichette, pulsanti, link)
   5. Movimento (comparsa allo scroll, disegno del palazzo)
   6. Intro a sipario
   7. Barra in alto
   8. Home: hero, servizi, finanziamenti, cantieri, manifesto,
      chi siamo, contatti
   9. Piè di pagina
   10. Pagine dei servizi
   ───────────────────────────────────────────────────────────── */


/* ── 1. Font ─────────────────────────────────────────────────
   Due font variabili ospitati qui, nella cartella /font: nessuna
   richiesta a servizi esterni. Per ognuno servono due file, uno per le
   lettere comuni e uno per i caratteri accentati meno usuali; il browser
   scarica solo quello che serve alla pagina (unicode-range). */
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/font/bodoni-moda-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url("/font/bodoni-moda-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/font/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/font/hanken-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── 2. Colori e misure ──────────────────────────────────────
   Un solo tema, chiaro. I nomi sono ruoli, non colori fissi:
   - granito = superfici, dal fondo base alle linee tenui
   - testo   = testo e disegni primari
   - sec     = testo secondario
   - ottone  = unico accento, in tre toni per contrasto crescente */
:root {
  color-scheme: light;

  --c-base: #ece7dc;
  --c-alt: #e4ddd0;
  --c-superficie: #e0d8c9;
  --c-elevata: #d8cfbd;
  --c-linea-tenue: #cbc1ad;
  --c-linea-piu: #b6ab95;
  --c-testo: #1e1a15;
  --c-testo-dim: #3c352b;
  --c-sec: #6a6256;
  --c-sec-dim: #665e50;

  /* Tre toni di ottone: il più scuro per il testo piccolo (contrasto AA anche
     sulla sezione a fondo più scuro), il medio per i numeri grandi, il chiaro
     solo per fili e bordi. */
  --c-ottone: #6f5119;
  --c-ottone-medio: #96712a;
  --c-ottone-chiaro: #b0872f;

  /* Fili sottili: il colore del testo a diverse trasparenze. */
  --filo-8: rgb(30 26 21 / 0.08);
  --filo-10: rgb(30 26 21 / 0.1);
  --filo-12: rgb(30 26 21 / 0.12);
  --filo-25: rgb(30 26 21 / 0.25);
  --filo-30: rgb(30 26 21 / 0.3);

  --texture: url("/img/granito.jpg");
  --texture-hero: url("/img/hero.jpg");
  --texture-fondo: url("/img/fondo.jpg");
  --velo-1: rgb(236 231 220 / 0.55);
  --velo-2: rgb(236 231 220 / 0.78);
  --velo-sipario: rgb(236 231 220 / 0.28);
  --ombra-anta: rgb(0 0 0 / 0.22);

  --font-titoli: "Bodoni Moda", ui-serif, Georgia, serif;
  --font-testo: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;

  --larghezza-max: 1400px;
  --altezza-barra: 72px;
}


/* ── 3. Base ───────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* La barra in alto è fissa: i link alle sezioni si fermano sotto di essa. */
  scroll-padding-top: 88px;
  /* Barra di scorrimento nei colori del brand (Firefox). */
  scrollbar-width: thin;
  scrollbar-color: var(--c-ottone-chiaro) var(--c-alt);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--c-base);
  color: var(--c-testo);
  font-family: var(--font-testo);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

ul {
  list-style: none;
}

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

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

img {
  height: auto;
}

::selection {
  background-color: var(--c-ottone);
  color: #f6f2e9;
}

:focus-visible {
  outline: 2px solid var(--c-ottone);
  outline-offset: 2px;
}

/* Barra di scorrimento nei colori del brand (Chrome e Safari). */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--c-alt);
}
::-webkit-scrollbar-thumb {
  background: var(--c-ottone-chiaro);
  border: 3px solid var(--c-alt);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-ottone);
}

/* Grana fissa: leggera texture uniforme sopra la pagina. */
.grana-fissa {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Testo solo per chi usa uno screen reader. */
.solo-lettori {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.icona {
  display: inline-block;
  flex-shrink: 0;
}


/* ── 4. Pezzi riusabili ──────────────────────────────────────── */

/* Colonna centrale: larghezza massima e margini laterali. */
.contenitore {
  max-width: var(--larghezza-max);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Fascia di una sezione della home: respiro sopra e sotto. */
.sezione {
  padding-block: 7rem;
}

@media (min-width: 768px) {
  .sezione {
    padding-block: 9rem;
  }
}

/* Titolo grande di sezione. */
.titolo-sezione {
  font-family: var(--font-titoli);
  font-size: 2.25rem;
  line-height: 1.25;
}

@media (min-width: 768px) {
  .titolo-sezione {
    font-size: 3rem;
  }
}

/* Paragrafo introduttivo sotto un titolo di sezione. */
.testo-grande {
  font-size: 1.125rem;
  line-height: 1.625;
}

.testo-sec {
  color: var(--c-sec);
}

.testo-dim {
  color: var(--c-testo-dim);
}

/* Piccola riga sopra il titolo: filo dorato + parola in maiuscolo. */
.etichetta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--c-ottone);
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.filo-oro {
  background-color: var(--c-ottone-chiaro);
}

.etichetta .filo-oro {
  display: block;
  width: 2rem;
  height: 1px;
}

.testo-accento {
  color: var(--c-ottone);
}

.finitura-oro {
  color: var(--c-ottone-medio);
}

/* Link di testo: riconoscibili anche da fermi grazie al colore ottone,
   senza sottolineatura. Al passaggio del mouse schiariscono. */
.link-evidente {
  color: var(--c-ottone);
  transition: color 200ms ease;
}
.link-evidente:hover {
  color: var(--c-ottone-chiaro);
}

/* Pulsanti. Tre varianti, stessa forma: pieno (azione principale),
   bordo (azione secondaria), bordo-forte (nelle sezioni su fondo scuro). */
.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 2px;
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}

.pulsante-pieno {
  background-color: var(--c-testo);
  color: var(--c-base);
  transition: transform 200ms ease;
}
.pulsante-pieno:hover {
  transform: translateY(-1px);
}
.pulsante-pieno:active {
  transform: translateY(0);
}

.pulsante-bordo {
  border: 1px solid var(--filo-25);
  color: var(--c-testo);
  font-weight: 500;
  transition: border-color 200ms ease, background-color 200ms ease;
}
.pulsante-bordo:hover {
  border-color: rgb(30 26 21 / 0.6);
  background-color: rgb(30 26 21 / 0.05);
}

.pulsante-bordo-forte {
  border: 1px solid var(--filo-30);
  color: var(--c-testo);
  transition: border-color 200ms ease, background-color 200ms ease;
}
.pulsante-bordo-forte:hover {
  border-color: rgb(30 26 21 / 0.7);
  background-color: rgb(30 26 21 / 0.05);
}

/* Freccia che scivola a destra quando si passa sul pulsante o sul link. */
.freccia {
  transition: transform 200ms ease;
}
.scorri:hover .freccia {
  transform: translateX(0.25rem);
}

/* Riga di pulsanti: in colonna su telefono, affiancati da 640px. */
.azioni {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .azioni {
    flex-direction: row;
    align-items: center;
  }
}

/* Sfondo texture del brand con velo che uniforma e tiene la leggibilità. */
.fondo-pietra {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(var(--velo-1), var(--velo-2)), var(--img, var(--texture));
  background-size: cover;
  background-position: center;
}

/* Velo più leggero: lascia respirare la texture (usato sul manifesto
   per mostrare le venature oro del marmo). */
.velo-leggero {
  --velo-1: rgb(214 204 184 / 0.5);
  --velo-2: rgb(206 195 175 / 0.72);
}

.bilanciato {
  text-wrap: balance;
}


/* ── 5. Movimento ──────────────────────────────────────────────
   Comparsa allo scorrimento e disegno del palazzo. Tutto con un
   ripiego statico per chi ha chiesto meno movimento al sistema. */
@keyframes sali {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes disegna {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes entra-morbido {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes parallax {
  to {
    transform: translateY(-48px);
  }
}

/*
  Comparsa dal basso legata allo scorrimento.

  Due accorgimenti, entrambi nati da un errore vero trovato in produzione.

  1. Proprietà scritte per esteso, non con la scorciatoia `animation`.
     Un compressore di CSS le accorpava in
     `animation: sali linear both view()`, ma `animation-timeline` non fa
     parte di quella scorciatoia: la riga diventava non valida e veniva
     buttata. Restava solo l'opacità a zero, e mezza pagina spariva.

  2. Nessun `opacity: 0` fuori dai fotogrammi chiave. L'elemento è
     visibile per natura; è l'animazione, riempiendo all'indietro con
     `animation-fill-mode: both`, a nasconderlo prima del suo turno. Se
     per qualunque motivo l'animazione non parte, il testo si vede
     comunque. Un contenuto non deve mai dipendere da un effetto per
     esistere.
*/
.reveal {
  opacity: 1;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation-name: sali;
      animation-duration: 1ms;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 0% cover 32%;
    }
  }
}

/* Tratti del disegno che si "tracciano" da soli all'apertura. */
.traccia {
  stroke-dasharray: var(--lunghezza, 1200);
  stroke-dashoffset: var(--lunghezza, 1200);
}

@media (prefers-reduced-motion: no-preference) {
  .traccia {
    animation: disegna 2.4s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: var(--ritardo, 0s);
  }
}

@media (prefers-reduced-motion: reduce) {
  .traccia {
    stroke-dashoffset: 0;
  }
}

.dissolvi {
  opacity: 0;
  animation: entra-morbido 1s ease forwards;
  animation-delay: var(--ritardo, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .dissolvi {
    opacity: 1;
    animation: none;
  }
}

/* Parallasse sottile legato allo scroll della pagina. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax-lento {
      animation: parallax linear;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
      will-change: transform;
    }
  }
}

/* Disegni a contorno (palazzo e banca). */
.disegno {
  width: 100%;
  height: auto;
  color: var(--c-testo);
}


/* ── 6. Intro a sipario ────────────────────────────────────────
   Logo centrato su una lastra di granito a tutto schermo. Al clic la
   lastra si apre in due ante. Il disegno del palazzo resta in pausa
   finché il sipario è chiuso (lo gestisce js/sito.js). Con movimento
   ridotto l'apertura diventa una dissolvenza rapida. */
#sipario {
  position: fixed;
  inset: 0;
  z-index: 80;
  cursor: pointer;
  user-select: none;
}

html.con-sipario {
  overflow: hidden;
}

html.con-sipario .traccia,
html.con-sipario .dissolvi {
  animation-play-state: paused;
}

.sipario-anta {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background-image: linear-gradient(var(--velo-sipario), var(--velo-sipario)), var(--texture);
  background-size: cover;
  transition: transform 2.3s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: transform;
}
.sipario-sx {
  left: 0;
  background-position: left center;
  border-right: 1px solid rgb(30 26 21 / 0.2);
  box-shadow: inset -60px 0 80px -50px var(--ombra-anta);
}
.sipario-dx {
  right: 0;
  background-position: right center;
  border-left: 1px solid rgb(30 26 21 / 0.2);
  box-shadow: inset 60px 0 80px -50px var(--ombra-anta);
}
#sipario.aperto .sipario-sx {
  transform: translateX(-103%);
}
#sipario.aperto .sipario-dx {
  transform: translateX(103%);
}

.sipario-contenuto {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.25rem;
  transition: opacity 0.4s ease;
}
.sipario-contenuto img {
  width: min(48vw, 230px);
  height: auto;
}
.sipario-contenuto p {
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-sec);
  animation: sipario-pulsa 2.4s ease-in-out infinite;
}
#sipario.aperto .sipario-contenuto {
  opacity: 0;
}

@keyframes sipario-pulsa {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sipario-anta {
    transition: none;
  }
  .sipario-contenuto p {
    animation: none;
    opacity: 1;
  }
  #sipario {
    transition: opacity 0.4s ease;
  }
  #sipario.svanisci {
    opacity: 0;
  }
}


/* ── 7. Barra in alto ──────────────────────────────────────── */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  border-bottom: 1px solid var(--filo-8);
  background-color: rgb(236 231 220 / 0.7);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.barra nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--altezza-barra);
}

.marchio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.marchio img {
  height: 2.5rem;
  width: auto;
}
.marchio span {
  font-family: var(--font-titoli);
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.025em;
}

/* Menu per schermi larghi. */
.menu-largo {
  display: none;
  align-items: center;
  gap: 2.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.menu-largo ul {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}
.menu-largo ul a {
  padding-block: 0.25rem;
}
.telefono {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

/* Menu a scomparsa per telefono: <details>, nessuno script. */
.menu-stretto {
  position: relative;
}
.menu-stretto summary {
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}
.menu-stretto summary::-webkit-details-marker {
  display: none;
}
.menu-stretto ul {
  position: absolute;
  right: 0;
  margin-top: 0.75rem;
  width: 14rem;
  border: 1px solid var(--filo-10);
  background-color: var(--c-alt);
  padding: 0.5rem;
}
.menu-stretto li a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  transition: color 200ms ease, background-color 200ms ease;
}
.menu-stretto li a:hover {
  background-color: var(--c-elevata);
}
.menu-stretto li.separato {
  margin-top: 0.25rem;
  border-top: 1px solid var(--filo-10);
  padding-top: 0.25rem;
}
.menu-stretto li.separato a {
  font-weight: 600;
}

@media (min-width: 768px) {
  .menu-largo {
    display: flex;
  }
  .menu-stretto {
    display: none;
  }
}


/* ── 8. Home ───────────────────────────────────────────────── */

/* Hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
}

.hero-griglia {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2.5rem;
  min-height: 100vh;
  min-height: 100dvh;
  padding-top: 92px;
  padding-bottom: 4rem;
}

.hero-testo {
  max-width: 36rem;
}

.hero h1 {
  max-width: 42rem;
  margin-top: 1.75rem;
  font-family: var(--font-titoli);
  font-size: 2.25rem;
  line-height: 1.08;
  text-wrap: balance;
}

.hero-sottotitolo {
  max-width: 28rem;
  margin-top: 1.75rem;
  color: var(--c-sec);
}

.hero-disegno {
  position: relative;
}

@media (min-width: 640px) {
  .hero h1 {
    font-size: 3rem;
  }
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 3.75rem;
    line-height: 1.06;
  }
}

@media (min-width: 1024px) {
  .hero-griglia {
    grid-template-columns: 1.05fr 1fr;
    gap: 1.5rem;
    padding-bottom: 0;
  }
}

/* Servizi */
.servizi-intro {
  max-width: 42rem;
}
.servizi-intro p {
  margin-top: 1.25rem;
}

.servizi-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem 3rem;
  margin-top: 4rem;
}

@media (min-width: 768px) {
  .servizi-griglia {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .servizi-griglia {
    grid-template-columns: repeat(4, 1fr);
  }
}

.servizio {
  position: relative;
  padding-top: 1.75rem;
}
.servizio::before,
.servizio::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
}
.servizio::before {
  background-color: var(--filo-12);
}
/* Il filo dorato si allunga da sinistra quando si passa sul servizio. */
.servizio::after {
  background-color: var(--c-ottone-chiaro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms ease-out;
}
.servizio:hover::after {
  transform: scaleX(1);
}

.servizio-testa {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.numero {
  font-family: var(--font-titoli);
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.servizio .icona {
  color: var(--c-ottone);
  transition: transform 300ms ease;
}
.servizio:hover .icona {
  transform: translateY(-2px);
}
.servizio h3 {
  margin-top: 2rem;
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  line-height: 2rem;
}
.servizio h3 a {
  transition: color 200ms ease;
}
.servizio h3 a:hover {
  color: var(--c-ottone);
}
/* Il link del titolo si estende a tutta la scheda: si clicca ovunque. */
.servizio h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.servizio p {
  margin-top: 0.75rem;
  color: var(--c-sec);
  line-height: 1.625;
}

/* Finanziamenti */
.finanziamenti {
  border-top: 1px solid var(--filo-8);
  background-color: var(--c-elevata);
}
.finanziamenti-griglia {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3.5rem;
}
.finanziamenti-testo {
  max-width: 36rem;
}
.finanziamenti h2 {
  margin-top: 1.75rem;
  line-height: 1.12;
}
.finanziamenti-corpo {
  margin-top: 2rem;
  color: var(--c-testo-dim);
}
.finanziamenti-corpo p + p {
  margin-top: 1.25rem;
}
.finanziamenti .pulsante {
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .finanziamenti-griglia {
    grid-template-columns: 1fr 0.95fr;
    gap: 5rem;
  }
}

/* Cantieri */
.cantieri {
  border-top: 1px solid var(--filo-8);
  background-color: var(--c-alt);
}
.cantieri-intro {
  max-width: 42rem;
}
.cantieri-intro p {
  margin-top: 1.25rem;
}
.cantieri-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 4rem;
}
.cornice {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--filo-10);
  border-radius: 2px;
  background-color: var(--c-elevata);
}
.cornice picture {
  display: contents;
}
.cornice img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms ease-out;
}
.cantiere:hover .cornice img {
  transform: scale(1.03);
}
.formato-orizzontale .cornice {
  aspect-ratio: 16 / 9;
}
.formato-verticale .cornice {
  aspect-ratio: 3 / 4;
}
.cantiere figcaption {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.375;
  color: var(--c-sec);
}

@media (min-width: 768px) {
  .cantieri-griglia {
    grid-template-columns: repeat(2, 1fr);
  }
  .formato-orizzontale {
    grid-column: span 2;
  }
}
@media (min-width: 1024px) {
  .cantieri-griglia {
    grid-template-columns: repeat(4, 1fr);
  }
  .formato-orizzontale {
    grid-column: span 4;
  }
}

/* Manifesto */
.manifesto {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--filo-8);
}
.manifesto-corpo {
  max-width: 1000px;
  margin-inline: auto;
  padding: 8rem 1.5rem;
  text-align: center;
}
.manifesto .filo-oro {
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 0 auto 2.5rem;
}
.manifesto p {
  font-family: var(--font-titoli);
  font-size: 1.875rem;
  line-height: 1.22;
  text-wrap: balance;
}

@media (min-width: 768px) {
  .manifesto-corpo {
    padding-block: 11rem;
  }
  .manifesto p {
    font-size: 3rem;
    line-height: 1.18;
  }
}

/* Chi siamo */
.chi-siamo h2 {
  max-width: 48rem;
  margin-top: 1.5rem;
  line-height: 1.12;
}
.chi-siamo-testo {
  display: grid;
  max-width: 56rem;
  gap: 1.25rem;
  margin-top: 2rem;
  color: var(--c-sec);
}
.chi-siamo-testo > div > * + * {
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .chi-siamo-testo {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Contatti */
.contatti {
  border-top: 1px solid var(--filo-8);
  background-color: var(--c-alt);
}
.contatti-intro {
  max-width: 42rem;
}
.contatti-intro p {
  max-width: 28rem;
  margin-top: 1.5rem;
}
.contatti-intro .pulsante {
  margin-top: 2rem;
}
.recapiti {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: 4rem;
}
.recapiti > div {
  border-top: 1px solid var(--filo-12);
  padding-top: 1.25rem;
}
.recapiti dt {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-sec-dim);
}
.recapiti dd {
  margin-top: 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 640px) {
  .recapiti {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .recapiti {
    grid-template-columns: repeat(4, 1fr);
  }
}


/* ── 9. Piè di pagina ──────────────────────────────────────── */
.piede {
  border-top: 1px solid var(--filo-8);
  background-color: var(--c-base);
}
.piede .contenitore {
  padding-block: 4rem;
}
.piede-righe {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.piede-chi {
  max-width: 24rem;
}
.piede-marchio {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.piede-marchio img {
  height: 2.75rem;
  width: auto;
}
.piede-marchio span {
  font-family: var(--font-titoli);
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.piede-chi p {
  margin-top: 1.25rem;
  line-height: 1.625;
  color: var(--c-sec);
}
.piede-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}
.piede-titolo {
  font-size: 0.75rem;
  line-height: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-sec-dim);
}
.piede-recapiti {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.75rem;
}
.piede-legale {
  margin-top: 4rem;
  border-top: 1px solid var(--filo-8);
  padding-top: 2rem;
  font-size: 11px;
  line-height: 1.625;
  color: var(--c-sec-dim);
}

@media (min-width: 768px) {
  .piede-righe {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}


/* ── 10. Pagine dei servizi ────────────────────────────────── */
.pagina {
  padding-top: var(--altezza-barra);
}

.pagina-testata {
  position: relative;
  overflow: hidden;
}
.pagina-testata .contenitore {
  padding-top: 3.5rem;
  padding-bottom: 5rem;
}

.briciole {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--c-testo-dim);
}
.briciole .separatore {
  padding-inline: 0.5rem;
  color: var(--c-sec-dim);
}

.pagina-testata .sopratitolo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 3.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--c-ottone);
}

.pagina-testata h1 {
  max-width: 56rem;
  margin-top: 1.25rem;
  font-family: var(--font-titoli);
  font-size: 2.25rem;
  line-height: 1.08;
  text-wrap: balance;
}

.pagina-testata .sottotitolo {
  max-width: 42rem;
  margin-top: 1.75rem;
  color: var(--c-testo-dim);
}

@media (min-width: 640px) {
  .pagina-testata h1 {
    font-size: 3rem;
  }
}
@media (min-width: 768px) {
  .pagina-testata .contenitore {
    padding-top: 5rem;
    padding-bottom: 7rem;
  }
  .pagina-testata h1 {
    font-size: 3.75rem;
  }
}

/* Le domande sono l'ossatura della pagina: ognuna è un titolo scritto come
   la gente cerca davvero, con la risposta subito sotto. */
.domande {
  border-top: 1px solid var(--filo-8);
  background-color: var(--c-alt);
}
.domande-griglia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 6rem;
}
.domande-lato h2 {
  max-width: 28rem;
  font-family: var(--font-titoli);
  font-size: 1.875rem;
  line-height: 1.25;
  text-wrap: balance;
}
.domande-lato .nota {
  max-width: 28rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.625;
  color: var(--c-testo-dim);
}
.domande-lato .pulsante-testo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
  font-weight: 600;
}

.domande-elenco {
  border-bottom: 1px solid var(--filo-12);
}
.domanda {
  border-top: 1px solid var(--filo-12);
  padding-block: 2rem;
}
.domanda h3 {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  line-height: 1.375;
  text-wrap: balance;
}
.domanda p {
  max-width: 42rem;
  margin-top: 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--c-testo-dim);
}
.domanda p + p {
  margin-top: 0.875rem;
}
.domanda strong {
  font-weight: 600;
  color: var(--c-testo);
}

@media (min-width: 768px) {
  .domande-griglia {
    padding-block: 8rem;
  }
  .domande-lato h2 {
    font-size: 2.25rem;
    line-height: 1.25;
  }
}
@media (min-width: 1024px) {
  .domande-griglia {
    grid-template-columns: 0.8fr 1.2fr;
    gap: 5rem;
  }
  .domande-lato {
    position: sticky;
    top: 7rem;
    align-self: start;
  }
}

.altri {
  border-top: 1px solid var(--filo-8);
}
.altri .contenitore {
  padding-block: 4rem;
}
.altri-testa {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.altri-testa h2 {
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  line-height: 2rem;
}
.altri-testa a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
.altri ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin-top: 2rem;
}
.altri ul a {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

@media (min-width: 768px) {
  .altri .contenitore {
    padding-block: 5rem;
  }
}

/* Indice dei servizi */
.pagina-testata h1.senza-sopratitolo {
  margin-top: 3.5rem;
}
.indice-corpo {
  padding-block: 6rem;
}
@media (min-width: 768px) {
  .indice-corpo {
    padding-block: 8rem;
  }
}
.indice-servizi {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem 3rem;
}
.indice-servizi li {
  border-top: 1px solid var(--filo-12);
  padding-top: 1.75rem;
}
.indice-servizi .servizio-testa .icona {
  color: var(--c-ottone);
}
.indice-servizi h2 {
  margin-top: 1.75rem;
  font-family: var(--font-titoli);
  font-size: 1.5rem;
  line-height: 2rem;
}
.indice-servizi p {
  max-width: 28rem;
  margin-top: 0.75rem;
  line-height: 1.625;
  color: var(--c-sec);
}

@media (min-width: 768px) {
  .indice-servizi {
    grid-template-columns: repeat(2, 1fr);
  }
}