/* =============================================================
   STILE DEL SITO — Edil System SRL
   Indice:
   1. Base e tipografia
   2. Layout (container, sezioni)
   3. Pulsanti e link
   4. Header e menu
   5. Hero home e intestazioni pagine interne
   6. Componenti home (numeri, settori, lavori, certificazioni, CTA)
   7. Pagine interne (blocchi testo+foto, filtri, modal, mezzi)
   8. Form e mappa
   9. Footer
   ============================================================= */

/* ---------- 1. Base e tipografia ---------- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + var(--space-2));
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
}

/* Selezione del testo: giallo cantiere e testo nero, su fondo chiaro e scuro */
::selection {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  hyphens: manual; /* mai parole spezzate col trattino */
  overflow-wrap: break-word;
  text-wrap: balance; /* su due righe, righe di lunghezza simile */
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: 0.01em;
}

h1 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

h2 {
  font-size: var(--text-2xl);
}

h3 {
  font-size: var(--text-xl);
}

p + p {
  margin-top: var(--space-2);
}

/* righe di coda piene: nessuna parola isolata a fine paragrafo */
p,
li,
dd {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-underline-offset: 3px;
}

strong {
  font-weight: var(--weight-semibold);
}

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Su fondo nero (menu, piè di pagina, fasce scure) il bordo nero non si vedrebbe */
.site-header :focus-visible,
.site-footer :focus-visible,
.section--dark :focus-visible,
.section--cta :focus-visible,
.page-hero :focus-visible,
.hero-b :focus-visible {
  outline-color: var(--color-secondary);
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 100;
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--space-1);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- 2. Layout ---------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
}

.section--surface {
  background: var(--color-surface);
}

.section--dark {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.section-head {
  max-width: 720px;
  margin-bottom: var(--space-5);
}

.section-head p {
  margin-top: var(--space-2);
  color: var(--color-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

.section--dark .section-head p {
  color: var(--color-on-primary-muted);
}

.section-head--row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: none;
}

/* Piccola etichetta sopra i titoli */
.eyebrow {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary-ink);
}

.section--dark .eyebrow {
  color: var(--color-accent);
}

.grid {
  display: grid;
  gap: var(--space-3);
}

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

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

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Contenitore foto: se l'immagine non carica resta un riquadro neutro
   con la scritta "Foto in arrivo", mai un'icona rotta */
.media {
  position: relative;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
}

.media::before {
  content: "Foto in arrivo";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--wide {
  aspect-ratio: 16 / 9;
}

.media--portrait {
  aspect-ratio: 4 / 5;
}

/* ---------- 3. Pulsanti e link ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: var(--space-1) var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.btn--primary {
  background: var(--color-secondary);
  color: var(--color-on-secondary);
}

.btn--primary:hover {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Pulsante con bordo, per fondi scuri (hero, CTA) */
.btn--outline {
  border-color: currentColor;
  color: var(--color-on-primary);
}

.btn--outline:hover {
  background: var(--color-on-primary);
  border-color: var(--color-on-primary);
  color: var(--color-primary);
}

/* Pulsante con bordo, per fondi chiari */
.btn--outline-dark {
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn--outline-dark:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Link testuale con freccia, per "Vedi tutti" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border-bottom: 2px solid var(--color-secondary);
  padding-bottom: var(--space-half);
  min-height: 44px;
}

.link-arrow:hover {
  border-bottom-color: var(--color-text);
}

.icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ---------- 4. Header e menu ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-header);
  color: var(--color-on-header);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  height: var(--header-height);
}

/* Logo ufficiale (PNG trasparente, va su fondo nero) */
.logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

.logo img {
  width: auto;
  height: 56px;
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 48px;
  padding: var(--space-1) var(--space-2);
  background: none;
  border: 2px solid var(--color-header-line);
  border-radius: var(--radius);
  color: inherit;
  font-weight: var(--weight-semibold);
}

.nav-toggle .icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

.site-nav {
  display: none;
}

.site-nav.is-open {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  overflow-y: auto;
  background: var(--color-header);
  box-shadow: var(--shadow);
}

.site-nav ul {
  list-style: none;
  padding: var(--space-1) var(--gutter) var(--space-3);
}

.site-nav a {
  display: block;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-header-line);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--color-secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 1200px) {
  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-nav.is-open {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .site-nav ul {
    display: flex;
    gap: var(--space-3);
    padding: 0;
  }

  .site-nav a {
    position: relative;
    padding: var(--space-1) 0;
    border-bottom: 0;
    font-size: var(--text-base);
  }

  /* Linea sotto la voce: si allarga da sinistra al passaggio del mouse, sempre piena sulla pagina aperta */
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--color-secondary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 300ms ease-out;
  }

  .site-nav a:hover::after,
  .site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
  }

  .site-nav a[aria-current="page"] {
    color: inherit;
    text-decoration: none;
  }
}

/* ---------- 5. Hero home e intestazioni pagine interne ---------- */

/* Hero home: foto del cantiere a tutta larghezza con un velo scuro uniforme, testo bianco a sinistra */
.hero-b {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));   /* su mobile tiene conto della barra del browser */
  max-height: 900px;
  overflow: hidden;
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.hero-b__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease-out;
}

/* Carosello: una foto alla volta, dissolvenza lenta */
.hero-b__image.is-active {
  opacity: 1;
}

/* Ken Burns: la foto visibile fa uno zoom molto lento (si riavvia a ogni cambio foto).
   Parte da 1 e non scende mai sotto, così con object-fit:cover copre sempre il riquadro. */
@media (prefers-reduced-motion: no-preference) {
  .hero-b__image.is-active {
    animation: hero-kenburns 7s ease-out both;
  }
}

@keyframes hero-kenburns {
  from { transform: scale(1.001); }
  to { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-b__image { transition: none; }
}

/* Comandi delle foto: una linea sottile per foto e la pausa, in basso a sinistra sotto il testo */
.hero-b__controls {
  position: absolute;
  inset-inline: 0;
  bottom: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.hero-b__dots {
  display: flex;
}

/* Area di tocco di 44px, linea visibile di 3px */
.hero-b__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.hero-b__dot::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  background: rgb(255 255 255 / 0.45);
  transition: background-color var(--transition);
}

.hero-b__dot:hover::before {
  background: var(--color-on-primary);
}

.hero-b__dot[aria-current="true"]::before {
  background: var(--color-secondary);
}

.hero-b__pause {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: rgb(255 255 255 / 0.7);
  cursor: pointer;
}

.hero-b__pause:hover {
  color: var(--color-on-primary);
}

.hero-b__pause .icon {
  width: 16px;
  height: 16px;
}

.hero-b__pause .icon-play,
.hero-b__pause[aria-pressed="true"] .icon-pause {
  display: none;
}

.hero-b__pause[aria-pressed="true"] .icon-play {
  display: block;
}

.hero-b::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.62);   /* velo uniforme: il testo bianco si legge anche sulle parti chiare delle foto */
}

/* Grana fotografica: un velo di rumore fine (filtro SVG inline, nessun file).
   Sta ferma mentre la foto fa lo zoom, come la grana di una pellicola.
   Molto leggera: dà tono "documentario" senza sporcare la lettura. */
.hero-b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: 0.35;
  mix-blend-mode: overlay;
}

.hero-b__content {
  position: relative;
  z-index: 2;
  padding-block: var(--space-6) var(--space-8);   /* sotto resta spazio per i comandi delle foto */
}

.hero-b__title {
  max-width: 20ch;
  font-size: var(--text-display);
  color: var(--color-on-primary);
}

.hero-b__subtitle {
  max-width: 44ch;
  margin-top: var(--space-3);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-on-primary);
}

.hero-b__actions {
  margin-top: var(--space-4);
}

/* Fascia in cima alle pagine interne */
.page-hero {
  padding-block: var(--space-6) var(--space-5);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.page-hero p {
  max-width: 60ch;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-on-primary-muted);
}

.page-hero .eyebrow {
  color: var(--color-accent);
}

.page-hero h1 {
  font-size: var(--text-3xl);
}

/* Pagine di conferma e recupero (grazie, 404): un segno disegnato nella fascia nera.
   Il titolo dice già l'esito; il segno è decorativo (aria-hidden). */
.page-hero__mark {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-3);
  border: 2px solid var(--color-secondary);
  border-radius: 50%;
  color: var(--color-secondary);
}

.page-hero__mark svg {
  width: 30px;
  height: 30px;
}

/* La linea si disegna una volta sola, poi si ferma (spunta della conferma) */
.page-hero__mark--draw path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: disegna-segno 620ms cubic-bezier(0.22, 1, 0.36, 1) 160ms forwards;
}

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

@media (prefers-reduced-motion: reduce) {
  .page-hero__mark--draw path {
    animation: none;
    stroke-dashoffset: 0;
  }
}

/* Testo introduttivo (grazie, 404): riga di lettura comoda, non a tutta larghezza */
.bio {
  max-width: 65ch;
}

/* Riga con i contatti diretti sotto la conferma */
.confirm-help {
  max-width: 65ch;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.confirm-help a {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* ---------- 6. Componenti home ---------- */

/* Card generica: bordo, niente ombra, niente "salti" al passaggio del mouse */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-1);
  padding: var(--space-3);
}

a.card,
button.card {
  color: inherit;
  text-decoration: none;
  text-align: left;
}

a.card:hover,
button.card:hover {
  border-color: var(--color-text);
}

.card .media {
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Settori */
.sector__icon {
  width: 40px;
  height: 40px;
  color: var(--color-secondary-ink);
}

.sector h3 {
  margin-top: var(--space-1);
}

.sector p {
  color: var(--color-muted);
}

/* Home, "Opere e settori": al passaggio del mouse cambia solo il bordo, come le altre card */
a.sector:focus-visible {
  border-color: var(--color-text);
}

/* Pallini della strada pieni del colore della card, così coprono la linea */
.sector__icon .ic-fill {
  fill: var(--color-bg);
}

/* Lavori */
.work__meta {
  display: grid;
  gap: var(--space-half);
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.work__meta dt {
  display: inline;
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.work__meta dd {
  display: inline;
  margin: 0;
}

.tag {
  align-self: flex-start;
  display: inline-block;
  padding: var(--space-half) var(--space-1);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Committente sotto il titolo della card lavoro */
.card__client {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.work-grid__empty {
  padding: var(--space-5) 0;
  color: var(--color-muted);
}

/* Certificazioni — badge stilizzati, NON loghi ufficiali */
.cert-badge {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  padding: var(--space-2);
  border: 2px solid var(--color-text);
  border-radius: var(--radius);
  text-align: center;
}

.cert-badge strong {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
}

.cert-badge span {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* CTA finale */
.cta-box {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-3);
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius);
}

.cta-box p {
  max-width: 56ch;
  margin-top: var(--space-2);
  color: var(--color-on-primary-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

@media (min-width: 900px) {
  .cta-box {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--space-6);
  }
}

/* ---------- 7. Pagine interne ---------- */

/* Blocco testo + foto */
.split {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

.split + .split {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.split__text h2 {
  margin-bottom: var(--space-2);
}

.split__text .sector__icon {
  margin-bottom: var(--space-2);
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }

  .split--reverse .split__media {
    order: 2;
  }

  /* Settore senza foto (in attesa di quelle vere): titolo a sinistra, testo a destra */
  .split--text {
    grid-template-columns: 1fr;
  }

  .split--text .split__text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row dense;
    column-gap: var(--space-6);
    align-items: start;
  }

  .split--text .split__text > svg,
  .split--text .split__text > h2 {
    grid-column: 1;
  }

  .split--text .split__text > p {
    grid-column: 2;
  }

  .split--text .split__text > p:first-of-type {
    margin-top: 0;
  }
}

/* Elenco puntato semplice */
.list {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  padding-left: var(--space-3);
}

/* Tabella dati societari */
.facts {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.facts div {
  display: grid;
  gap: var(--space-half);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.facts dt {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.facts dd {
  margin: 0;
  font-weight: var(--weight-semibold);
}

@media (min-width: 640px) {
  .facts div {
    grid-template-columns: 220px 1fr;
  }
}

/* Valori (chi siamo) */
/* Chi siamo, "Come lavoriamo": carosello, un passo alla volta.
   In alto i quattro passi cliccabili (il passo aperto ha la linea gialla piena),
   sotto la scheda con foto e testo. Su telefono si vede un pezzo della scheda dopo,
   così si capisce che si può scorrere col dito. Senza JavaScript resta scorrevole. */
.steps-nav {
  position: relative;
  margin-bottom: var(--space-4);
}

/* La linea va dal centro del primo punto al centro dell'ultimo (colonne da 1/4: centri a 12,5% e 87,5%) */
.steps-nav__line {
  position: absolute;
  top: 8px;   /* metà del punto */
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--color-border);
}

.steps-nav__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--color-secondary);
}

.steps-nav__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  padding: 0;
}

.steps-nav__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  padding: 0 var(--space-half);
  border: none;
  background: none;
  color: var(--color-muted);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: color 200ms ease-out;
}

.steps-nav__dot {
  width: 16px;
  height: 16px;
  margin-bottom: var(--space-1);
  border: 2px solid var(--color-border);
  border-radius: 50%;
  background: #FFFFFF;
  transition: border-color 200ms ease-out, background-color 200ms ease-out, transform 200ms ease-out;
}

.steps-nav__btn:hover,
.steps-nav__btn:focus-visible {
  color: var(--color-primary);
}

.steps-nav__btn:hover .steps-nav__dot,
.steps-nav__btn:focus-visible .steps-nav__dot {
  border-color: var(--color-primary);
}

.steps-nav__btn.is-passed .steps-nav__dot {
  border-color: var(--color-secondary);
  background: var(--color-secondary);
}

.steps-nav__btn[aria-current="step"] {
  color: var(--color-primary);
}

.steps-nav__btn[aria-current="step"] .steps-nav__dot {
  transform: scale(1.25);
}

.steps-nav__num {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.steps-nav__label {
  display: none;
  font-weight: var(--weight-semibold);
}

@media (min-width: 768px) {
  .steps-nav__label { display: block; }
}

.steps {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  list-style: none;
  padding: 0;
}

.steps::-webkit-scrollbar {
  display: none;
}

.steps:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 4px;
}

.step {
  flex: 0 0 88%;   /* su telefono si vede l'inizio della scheda dopo */
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* le colonne non si allargano oltre la scheda */
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #FFFFFF;
}

@media (min-width: 1024px) {
  .steps { gap: var(--space-4); }
  .step {
    flex-basis: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 440px;
  }
}

.step__media {
  position: relative;
  aspect-ratio: 4 / 3;   /* su telefono la foto ha sempre questa forma */
}

@media (min-width: 1024px) {
  .step__media { aspect-ratio: auto; min-height: 100%; }
}

.step__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.step__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-4) var(--space-3);
}

@media (min-width: 1024px) {
  .step__body { padding: var(--space-6); }
}

.step__num {
  font-family: var(--font-heading);
  font-size: var(--text-data);
  font-weight: var(--weight-bold);
  line-height: 0.85;
  color: var(--color-secondary-ink);
}

.step h3 {
  margin-top: var(--space-2);
  font-size: var(--text-h3-lg);
}

.step p {
  max-width: 48ch;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-muted);
}

.step__list {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-3);
  padding: 0;
  list-style: none;
}

.step__list li {
  position: relative;
  padding-left: var(--space-3);
  font-weight: var(--weight-medium);
}

.step__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 2px;
  background: var(--color-secondary);
}

.carousel__controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #FFFFFF;
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color 200ms ease-out;
}

.carousel__btn:hover,
.carousel__btn:focus-visible {
  border-color: var(--color-primary);
}

.carousel__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel__btn .icon {
  transform: scaleX(-1);   /* la freccia del sito punta a destra: qui va a sinistra */
}

.carousel__btn--next .icon {
  transform: none;
}

.value h3 {
  margin-bottom: var(--space-1);
  padding-top: var(--space-2);
  border-top: 4px solid var(--color-secondary);
}

.value p {
  color: var(--color-muted);
}

/* Filtri lavori */
.filters {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.filter-group {
  border: 0;
  padding: 0;
}

.filter-group legend {
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.filter-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.filter-btn {
  min-height: 40px;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-weight: var(--weight-medium);
  transition: border-color var(--transition), background-color var(--transition);
}

.filter-btn:hover {
  border-color: var(--color-text);
}

.filter-btn[aria-pressed="true"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.filters__count {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (min-width: 768px) {
  .filters {
    grid-template-columns: auto auto 1fr;
    align-items: end;
  }

  .filters__count {
    justify-self: end;
  }
}

/* Modal dettaglio lavoro */
.modal {
  width: min(960px, calc(100% - var(--space-4)));
  max-height: calc(100vh - var(--space-4));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow);
}

.modal::backdrop {
  background: rgb(0 0 0 / 0.6);
}

.modal__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.modal__close:hover {
  border-color: var(--color-text);
}

.modal__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-3);
}

@media (min-width: 900px) {
  .modal__body {
    grid-template-columns: 3fr 2fr;
  }
}

.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.gallery__thumb {
  padding: 0;
  background: none;
  border: 2px solid transparent;
  border-radius: var(--radius);
}

.gallery__thumb[aria-current="true"] {
  border-color: var(--color-secondary);
}

.gallery__thumb .media {
  aspect-ratio: 1;
}

.gallery__thumb .media::before {
  content: "";
}

body.modal-open {
  overflow: hidden;
}

/* Dettaglio lavoro: titolo + committente nell'intestazione */
.modal__heading {
  display: grid;
  gap: var(--space-half);
}

.modal__client {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

/* La foto del dettaglio si vede intera (le foto hanno orientamenti diversi), mai tagliata */
.modal .media--wide {
  aspect-ratio: 3 / 2;
}

.modal .media--wide img {
  object-fit: contain;
}

/* Galleria: foto intere, mai tagliate. Colonne come un muro di foto:
   1 su telefono, 2 su tablet, 3 su computer */
.photo-wall {
  columns: 1;
  column-gap: var(--space-2);
}

@media (min-width: 640px) {
  .photo-wall {
    columns: 2;
  }
}

@media (min-width: 1024px) {
  .photo-wall {
    columns: 3;
  }
}

.photo-wall li {
  break-inside: avoid;
  margin-bottom: var(--space-2);
}

.photo-wall__item {
  display: block;
  width: 100%;
  padding: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--transition);
}

.photo-wall__item:hover {
  border-color: var(--color-text);
}

.photo-wall__item img {
  width: 100%;
  height: auto;
}

/* Foto a tutto schermo: la foto sta sempre intera nello schermo */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-header);
  color: var(--color-on-header);
}

.lightbox::backdrop {
  background: var(--color-header);
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 100%;
  padding: calc(48px + var(--space-4)) var(--space-2) var(--space-3);
}

.lightbox__figure img {
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: contain;
}

.lightbox__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  text-align: center;
}

.lightbox__caption a {
  color: var(--color-on-header);
}

.lightbox__count {
  color: var(--color-on-primary-muted);
}

.lightbox__btn {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-header);
  color: var(--color-on-header);
  border: 1px solid var(--color-header-line);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.lightbox__btn:hover {
  border-color: var(--color-on-header);
}

.lightbox__close {
  top: var(--space-2);
  right: var(--space-2);
}

/* Su telefono le frecce stanno in alto, accanto alla X, per non coprire la foto */
.lightbox__prev {
  top: var(--space-2);
  left: var(--space-2);
}

.lightbox__next {
  top: var(--space-2);
  left: calc(var(--space-2) + 48px + var(--space-1));
}

@media (min-width: 768px) {
  .lightbox__figure {
    padding: var(--space-3) calc(48px + var(--space-4));
  }

  .lightbox__prev,
  .lightbox__next {
    top: 50%;
    transform: translateY(-50%);
  }

  .lightbox__prev {
    left: var(--space-2);
  }

  .lightbox__next {
    left: auto;
    right: var(--space-2);
  }
}

/* Parco mezzi: registro dei mezzi */
.table-wrap {
  overflow-x: auto;
}

.register {
  width: 100%;
  border-collapse: collapse;
  border-top: 3px solid var(--color-text);
}

.register th,
.register td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.register thead th {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

.register tbody th {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  white-space: nowrap;
}

.register td {
  color: var(--color-muted);
}

/* Su telefono ogni mezzo diventa un blocco: nome, impiego, dati */
@media (max-width: 639px) {
  .register thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
  .register tr {
    display: grid;
    gap: var(--space-1);
    padding-block: var(--space-2);
    border-bottom: 1px solid var(--color-border);
  }
  .register th,
  .register td {
    padding: 0;
    border: 0;
  }
}

/* Certificazioni (pagina) */
.cert {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.cert:last-child {
  border-bottom: 1px solid var(--color-border);
}

.cert h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-1);
}

.cert p {
  max-width: 68ch;
  color: var(--color-muted);
}

.cert__file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

.cert .cert-badge {
  max-width: 240px;
}

/* Metadati del certificato (ente, scadenza): non è un campo di form */
.cert__meta {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-muted);
}

/* Marchio vero dell'ente certificatore (immagine su fondo bianco) */
.cert-badge--img {
  margin: 0;
  padding: var(--space-1);
  background: #fff;
  border: 1px solid var(--color-border);
}

.cert-badge--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (min-width: 768px) {
  .cert {
    grid-template-columns: 200px 1fr;
    gap: var(--space-5);
    align-items: start;
  }
}

/* Testo lungo (privacy) */
.prose {
  max-width: 72ch;
}

.prose h2 {
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-xl);
}

.prose ul {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
}

.note {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--color-secondary);
  background: var(--color-surface);
  border-radius: var(--radius);
}

/* ---------- 8. Form e mappa ---------- */

.form-layout {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .form-layout {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-6);
  }
}

.form {
  display: grid;
  gap: var(--space-3);
}

.form__row {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .form__row {
    grid-template-columns: 1fr 1fr;
  }
}

.field {
  display: grid;
  gap: var(--space-1);
}

.field label,
.field legend {
  font-weight: var(--weight-semibold);
}

.field .optional {
  font-weight: var(--weight-regular);
  color: var(--color-muted);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-muted);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}

.field textarea {
  min-height: 160px;
  resize: vertical;
}

.field input[type="file"] {
  padding: var(--space-1);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-text);
  outline: 2px solid var(--color-text);
  outline-offset: 0;
}

.field__hint {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.field__error {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-secondary-ink);
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--color-secondary-ink);
}

.check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1);
}

.check input {
  width: 24px;
  height: 24px;
  min-height: 0;
  margin-top: var(--space-half);
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.check label {
  font-weight: var(--weight-regular);
}

.form-status {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border-left: 4px solid var(--color-text);
  background: var(--color-surface);
}

.form-status--error {
  border-left-color: var(--color-secondary-ink);
}

/* Contatti */
.contact-list {
  display: grid;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.contact-list li {
  display: flex;
  gap: var(--space-2);
}

.contact-list .icon {
  width: 24px;
  height: 24px;
  margin-top: var(--space-half);
  color: var(--color-secondary-ink);
}

.contact-list strong {
  display: block;
}

/* Home: Dove siamo (testo + mappa) */
.where {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

@media (min-width: 1024px) {
  .where {
    grid-template-columns: 1fr 2fr;
  }
}

/* Senza mappa il testo prende tutta la riga */
.where > :only-child {
  grid-column: 1 / -1;
}

/* ---------- 9. Footer ---------- */

.site-footer {
  padding-block: var(--space-6) var(--space-4);
  background: var(--color-primary);
  color: var(--color-on-primary-muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-on-primary);
  text-decoration: underline;
}

/* Aree toccabili piu' ampie su mobile/tablet (WCAG 2.5.8): link di footer e privacy. */
@media (max-width: 1199px) {
  .site-footer ul a,
  .site-footer__bottom a {
    display: inline-block;
    padding-block: 5px;
  }
}

.site-footer__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer .logo {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: var(--space-2);
  background: var(--color-header);
  border-radius: var(--radius);
}

.site-footer .logo img {
  height: 72px;
}

.site-footer h2 {
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-primary);
}

.site-footer ul {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}

.site-footer address {
  font-style: normal;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgb(255 255 255 / 0.15);
}

/* ---------- Utilità ---------- */

.mt-3 {
  margin-top: var(--space-3);
}

.mb-3 {
  margin-bottom: var(--space-3);
}


/* Badge certificazioni in home: sempre 2 per riga su mobile, 4 su desktop */
.grid--badges {
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

@media (min-width: 1024px) {
  .grid--badges {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-3);
  }
}

/* Il box CTA dopo una sezione bianca non raddoppia lo spazio sopra */
.section:not(.section--surface):not(.section--dark) + .section--cta {
  padding-top: 0;
}

.grid--badges .cert-badge strong {
  font-size: var(--text-xl);
}

@media (min-width: 640px) {
  .grid--badges .cert-badge strong {
    font-size: var(--text-2xl);
  }
}

/* Nella finestra dei lavori i dati vanno uno sotto l'altro */
.modal .facts div {
  grid-template-columns: 1fr;
}

/* ---------- Etichetta [da confermare] ----------
   Dato aziendale non ancora confermato dal cliente: piccolo badge giallo chiaro.
   Da togliere quando arriva il dato vero. */
.tbc {
  display: inline-block;
  padding: 2px var(--space-1);
  border-radius: var(--radius);
  background: var(--color-tbc-bg);
  color: var(--color-tbc-ink);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

/* Biografia (Chi siamo) */
/* Chi siamo: testo dell'azienda con foto a fianco */
.about .split__text p + p {
  margin-top: var(--space-2);
}

.about .split__text h2 {
  margin-top: var(--space-1);
}

.about__lead {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.about__facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
  border-block: 1px solid var(--color-border);
  list-style: none;
}

/* numero e scritta partono dall'alto: le scritte grigie stanno tutte alla stessa altezza */
.about__facts li {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

.about__facts strong {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
}

.about__facts span {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* padding a parte: il reset toglie il padding alle liste con role="list" */
.about .about__facts {
  padding-block: var(--space-4);
}

.about__more {
  margin-top: var(--space-4);
}

@media (min-width: 900px) {
  .about {
    align-items: start;
  }
}

/* Chi siamo: enti per cui abbiamo lavorato */
.clients {
  display: grid;
  border-top: 1px solid var(--color-border);
  list-style: none;
}

.clients li {
  display: grid;
  gap: var(--space-half);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.clients span {
  color: var(--color-muted);
}

@media (min-width: 900px) {
  .clients li {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-4);
  }
}

/* Home e Lavori: l'elenco degli enti in grande, è la prova più forte per una stazione appaltante */
.clients--lg {
  border-top: 3px solid var(--color-text);
}

.clients--lg li {
  padding-block: var(--space-3);
  align-items: baseline;
}

.clients--lg strong {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.clients--lg span {
  font-size: var(--text-base);
}

/* Chi siamo: i tre impegni con la loro certificazione */
.pledges {
  display: grid;
  gap: var(--space-3);
  list-style: none;
}

@media (min-width: 900px) {
  .pledges {
    grid-template-columns: repeat(3, 1fr);
  }
}

.pledge {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid rgb(255 255 255 / 0.15);
  border-top: 4px solid var(--color-secondary);
  border-radius: var(--radius);
}

.pledge__logo {
  width: 120px;
  height: auto;
  margin-bottom: var(--space-2);
  padding: var(--space-1);
  background: #FFFFFF;
  border-radius: var(--radius);
}

.pledge h3 {
  font-size: var(--text-xl);
}

.pledge p {
  color: var(--color-on-primary-muted);
}

.pledge__tag {
  margin-top: auto;
  padding-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-secondary);
}

.link-arrow--light {
  color: var(--color-on-primary);
}

.link-arrow--light:hover {
  border-bottom-color: var(--color-on-primary);
}

/* =============================================================
   OVERDRIVE — il sito si comporta come un'applicazione curata
   1. Comparsa allo scroll (contenuti che salgono quando entrano in vista)
   2. Transizioni tra pagine (navigazione che si trasforma, non "sbatte")
   Tutto a prova di errore: senza JS o con "riduci movimento" il sito
   resta perfettamente leggibile e fermo.
   ============================================================= */

/* 1. Comparsa allo scroll ------------------------------------
   Si attiva solo quando main.js aggiunge .js-reveal all'<html>
   (lo fa solo se il dispositivo non chiede meno movimento e c'è
   IntersectionObserver). Senza quella classe, tutto è già visibile. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 650ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-reveal .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Le schede di una griglia entrano una dopo l'altra (--i è l'indice, da main.js) */
.js-reveal .reveal.is-in {
  transition-delay: calc(var(--i, 0) * 70ms);
}

/* 2. Transizioni tra pagine ----------------------------------
   Navigazione tra pagine dello stesso sito con dissolvenza morbida.
   Dove non è supportato (Firefox) la navigazione resta istantanea. */
@view-transition {
  navigation: auto;
}

/* Intestazione e piè di pagina restano fermi mentre il contenuto si trasforma */
.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

/* Dissolvenza esplicita: la pagina che esce sfuma, quella che entra sfuma
   salendo di poco. Header e footer (sopra) hanno un nome proprio e restano fermi. */
::view-transition-old(root) {
  animation: vt-esce 220ms ease both;
}

::view-transition-new(root) {
  animation: vt-entra 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes vt-esce {
  to { opacity: 0; }
}

@keyframes vt-entra {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* Con "riduci movimento" la pagina cambia di colpo, senza dissolvenza */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}