/* ============================================================
   Archivo — font dei titoli, scelto per somiglianza al wordmark
   del logo (maiuscolo geometrico, terminali squadrati).
   File variabile, sottoinsieme latino, OSPITATO QUI: nessuna
   chiamata a Google, nessun IP dei visitatori inviato a terzi.
   Licenza SIL Open Font License 1.1 — vedi fonts/OFL.txt
   ============================================================ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-latin-var.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;
}

/* ============================================================
   CS Favaretto — Design tokens (vedi ../../DESIGN.md)
   Palette NEUTRA provvisoria: il logo reale (azzurro/bianco/nero)
   è in restyling, niente palette definitiva finché non arriva.
   ============================================================ */

:root {
  /* Colore — estratto dal logo reale, vedi ../../DESIGN.md
     Ciano e arancione hanno la tinta ESATTA del marchio: non spostarla mai.
     Ciano = azione. Arancione = prova/qualifica. */
  --color-bg: #FFFFFF;
  --color-surface: #F5FAFC;       /* famiglia ciano, tinta 194, schiarita */
  --color-surface-alt: #E9F5F9;
  --color-ink: #16232B;           /* antracite con una punta di blu, non nero puro */
  --color-ink-900: #101214;
  --color-text: #16232B;
  --color-text-muted: #5C6970;
  --color-border: #CCE8F0;
  --color-border-strong: #99D4E6;
  --color-accent: #00ABDD;        /* IL ciano del logo — tinta 194,0 */
  --color-accent-hover: #008DB8;  /* stessa tinta, solo piu' scura */
  --color-proof: #E66A27;         /* L'arancione del logo — tinta 21,0 */
  --color-proof-text: #C05216;    /* stessa tinta, scurita per il testo (4,71:1) */
  --color-on-ink: #F4F5F6;

  /* Tipografia — UN SOLO carattere per tutto il testo (decisione 15/09): Archivo,
     ospitato qui, cambiano solo gli spessori (frase hero 400, menu 600, bottoni 700,
     titoli 800). Prima il testo corrente usava i font di sistema e nella prima
     schermata convivevano tre caratteri. L'unico carattere diverso resta il logo. */
  --font-sans: 'Archivo', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Archivo', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;

  /* Spaziatura */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --radius: 6px;
  --header-h: 80px;                            /* riunione 9/09: barra bianca piu' alta, logo piu' grande */
  --chrome-top: calc(var(--header-h) + 43px);  /* barra contatti fissa + header fisso */
  --stats-band-h: 180px;                       /* altezza fissa e comoda della fascia numeri, uguale a
                                                  ogni risoluzione. NON e' legata alla hero: la fascia
                                                  vive interamente sotto la piega, mai a cavallo */
  --hero-pad: 56px;                            /* respiro interno della hero, COSTANTE a ogni risoluzione:
                                                  i bottoni restano sempre a 56px dal bordo inferiore */
  --mobile-cta-h: 78px;                        /* barra chiama/contattaci fissa in basso sul telefono */

  /* Ombre (15/09, "la home e' piatta"): tinte nell'antracite del marchio, non nero
     puro, e sempre a due strati (uno corto e netto, uno lungo e morbido). */
  --shadow-sm: 0 1px 2px rgba(16,35,43,.06), 0 2px 6px rgba(16,35,43,.06);
  --shadow-md: 0 2px 6px rgba(16,35,43,.10), 0 14px 32px rgba(16,35,43,.18);   /* accentuata il 15/09: prima non si vedeva */
  --shadow-lg: 0 6px 14px rgba(16,35,43,.12), 0 24px 48px rgba(16,35,43,.24);
  --ease-out: cubic-bezier(.2,.7,.2,1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-top: calc(var(--header-h) + 43px); /* spazio per header sticky + barra contatto */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Link dentro al testo: antracite sottolineato ciano, all'hover diventa tutto ciano.
   Cosi' il ciano resta #00ABDD puro senza servire una variante scura per il testo. */
main p a:not(.btn) {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
main p a:not(.btn):hover { color: var(--color-accent-hover); }
ul { list-style: none; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-5); }
section { padding: var(--space-16) 0; }
@media (min-width: 1024px) { section { padding: var(--space-24) 0; } }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
p { color: var(--color-text); }
.text-muted { color: var(--color-text-muted); }

.eyebrow {
  font-family: var(--font-display);
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

/* ── Barra di contatto sticky (requisito esplicito di Matteo) ── */
.contact-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 110;
  background: var(--color-ink-900);
  color: var(--color-on-ink);
  font-size: var(--text-sm);
  border-top: 3px solid var(--color-accent);
}
.contact-bar .container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  height: 36px;
}
.contact-bar a { color: var(--color-on-ink); display: inline-flex; align-items: center; gap: 6px; }
.contact-bar a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .contact-bar .container { justify-content: center; gap: var(--space-4); }
  .contact-bar .contact-bar-email { display: none; } /* su mobile solo telefono, per stare corti */
}

/* ── Header / Nav ───────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 39px; left: 0; right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: box-shadow .3s ease;
}
/* appena si scorre la testata si stacca dalla pagina (classe messa da main.js) */
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; }
/* Logo orizzontale in SVG (ruota ciano + monogramma + wordmark). Colori
   allineati ai token esatti della palette: nel file di partenza erano a un
   passo (#02AADC invece di #00ABDD, #E66B28 invece di #E66A27). */
.nav-logo { display: inline-flex; align-items: center; }
/* Il pulsante col numero vive solo sul telefono/tablet: su desktop il contatto sta nella
   barra nera in alto (requisito di Matteo). Vedi il blocco @media (max-width: 860px). */
.nav-tel { display: none; }
.nav-logo img { display: block; height: 46px; width: auto; }
.footer-logo { margin-bottom: 12px; }
/* Dal 28/09 nel piede c'e' il distintivo nuovo, quadrato: 32 px lo rendevano
   illeggibile, 76 px stanno nello spazio che la fascia ha gia'. */
.footer-logo img { display: block; height: 76px; width: auto; }
.nav-links { display: flex; gap: var(--space-6); font-size: var(--text-sm); font-weight: 600; margin-left: auto; }
/* "Richiedi sopralluogo" nella testata, sempre visibile (riunione 9/09):
   ciano su bianco. Sul telefono c'e' gia' la barra fissa chiama/contattaci. */
/* Selettore doppio (.nav-inner .header-cta) perche' .btn e' definito piu' sotto
   e a parita' di peso vincerebbe lui: il bottone restava grande e non spariva. */
.nav-inner .header-cta { margin-left: var(--space-6); min-height: 40px; padding: 9px 18px; font-size: var(--text-sm); white-space: nowrap; }
@media (max-width: 860px) {
  :root { --header-h: 68px; --chrome-top: var(--header-h); }
  .nav-logo img { height: 36px; }
  .nav-inner .header-cta { margin-left: auto; margin-right: var(--space-2); }
  /* 17/09 (Lara, dopo il parere del consulente): sul telefono la barra nera in alto sparisce e
     il numero diventa un pulsante accanto al panino. Il requisito di Matteo — contatto sempre
     raggiungibile senza scorrere — resta soddisfatto, e la prima schermata guadagna 39 px.
     Su desktop la barra resta com'e'. */
  .contact-bar { display: none; }
  .site-header { top: 0; }
  body { padding-top: var(--header-h); }
  .nav-tel {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: auto; margin-right: var(--space-2);
    min-height: 44px; padding: 0 var(--space-3);
    border: 1.5px solid var(--color-border-strong); border-radius: var(--radius);
    font-weight: 700; font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap;
  }
  .nav-tel:hover, .nav-tel:focus-visible { border-color: var(--color-accent); }
  .nav-inner .header-cta + .nav-tel { margin-left: var(--space-2); }
}
@media (max-width: 360px) {
  .nav-tel span { display: none; }            /* schermi strettissimi: resta la sola cornetta */
  .nav-tel { min-width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .nav-logo img { height: 32px; }
  .nav-inner .header-cta { display: none; }
}
.nav-links a { color: var(--color-text-muted); transition: color .15s; }
.nav-links a:hover, .nav-links a.active { color: var(--color-ink); }
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: var(--space-2); }
.nav-toggle span { width: 22px; height: 2px; background: var(--color-ink); display: block; }
.nav-mobile { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .nav-mobile {
    display: none;
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-5) var(--space-6);
    flex-direction: column;
    gap: var(--space-4);
    z-index: 99;
  }
  .nav-mobile.open { display: flex; }
  .nav-mobile a { font-weight: 600; padding: var(--space-2) 0; }
}

/* ── Bottoni ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 26px;
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 700;
  border: 1.5px solid transparent;
  cursor: pointer;
  min-height: 46px;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .2s;
}
/* Sul ciano il testo va ANTRACITE: il bianco su #00ABDD fa 2,67:1 ed e' illeggibile. */
.btn-primary { background: var(--color-accent); color: var(--color-ink); box-shadow: 0 2px 6px rgba(0,141,184,.22); }
.btn-primary:hover { transform: translateY(-1px); background: var(--color-accent-hover); color: var(--color-on-ink); box-shadow: 0 8px 18px rgba(0,141,184,.30); }
.btn-outline { background: transparent; border-color: var(--color-border-strong); color: var(--color-ink); }
.btn-outline:hover { border-color: var(--color-accent); }

/* ── Card generica (servizi, lavori/progetti, certificazioni, team) ── */
.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.card-body { padding: var(--space-6); }
.card-body h3 { margin-bottom: var(--space-2); }
.card-body p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── Segnaposto foto (mai foto finte/stock, mai dati inventati) ── */
.photo-placeholder {
  background: var(--color-surface);
  border: 1.5px dashed var(--color-border-strong);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
  padding: var(--space-5);
  min-height: 160px;
}
.photo-placeholder svg { opacity: .4; }
.photo-placeholder strong { color: var(--color-text); font-size: var(--text-sm); }
.photo-placeholder span.note { font-size: 0.75rem; }

.about-teaser {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-areas:
    "heading heading"
    "media copy";
  column-gap: var(--space-12);
  row-gap: var(--space-6);
  align-items: start;
}
.about-teaser-heading {
  grid-area: heading;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}
.about-teaser-image {
  grid-area: media;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);   /* visibile ma discreta (Lara, 15/09) */
}
.about-teaser-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 62ch;
}
.about-teaser-copy .btn { margin-top: var(--space-2); }

@media (max-width: 1024px) {
  .about-teaser {
    max-width: 820px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "heading"
      "media"
      "copy";
    gap: var(--space-6);
  }
}

/* ── Sezioni chiare/scure alternate ────────────────────── */
.section-alt { background: var(--color-surface); }
.section-dark { background: var(--color-ink-900); color: var(--color-on-ink); }
.section-dark .text-muted { color: rgba(244,245,246,0.65); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-10); }
/* Citazione diretta del logo: la doppia banda che taglia in due l'ingranaggio. */
.section-header h2::after {
  content: "";
  display: block;
  width: 44px;
  height: 7px;
  margin: var(--space-4) auto 0;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
}
.section-header p { color: var(--color-text-muted); }

/* ── Servizi — card con foto in cima ────────────────────── */
/* Questa sezione e' l'unica col sottotitolo subito dopo l'h2: la doppia
   banda di .section-header h2::after ci finiva in mezzo e spezzava la
   lettura. Qui si toglie e si sposta, piccola, sotto l'eyebrow — la firma
   del logo resta, ma non taglia piu' il testo. */
.services-header h2::after { display: none; }
.services-header .eyebrow { margin-bottom: var(--space-2); }
.eyebrow-rule {
  display: block;
  width: 28px; height: 5px;
  margin: 0 auto var(--space-4);
  border-top: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
}

/* Card con il testo DENTRO la foto (richiesta di Lara, 15/09). A riposo: titolo pieno
   e descrizione discreta su una sfumatura scura dal centro in giu' (la zona del testo).
   Al passaggio del mouse: seconda sfumatura piu' piena, descrizione bianca piena,
   doppia banda ciano che cresce sopra il titolo, foto che si avvicina appena.
   Senza mouse (telefono, tablet) il testo e' sempre pieno. Le due sfumature sono
   livelli separati perche' i gradienti non si animano: si anima l'opacita'. */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.service-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-ink-900);
  isolation: isolate;
  box-shadow: var(--shadow-md);
  transition: transform .25s ease, box-shadow .3s ease;
}
.service-card-media { position: absolute; inset: 0; z-index: 0; }
.service-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.service-card::before,
.service-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* base, a riposo: la PIU' LEGGERA che tiene leggibile il bianco sulle quattro foto reali
   (Lara, 15/09: la foto deve vedersi). Misurata: titolo >= 3,1:1 (testo grande), descrizione
   >= 4,7:1. La versione piu' leggera scendeva a 2,3:1 sul titolo dei frangisole. */
.service-card::after {
  background: linear-gradient(180deg, rgba(8,16,22,0) 35%, rgba(8,16,22,.38) 55%, rgba(8,16,22,.58) 80%, rgba(8,16,22,.66) 100%);
}
/* hover: sale piu' in alto e piu' densa */
.service-card::before {
  background: linear-gradient(180deg, rgba(8,16,22,.2) 0%, rgba(8,16,22,.72) 40%, rgba(8,16,22,.95) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
/* min-height uguale per tutte: il blocco e' ancorato in basso, e senza altezza fissa
   una descrizione di 4 righe (Manutenzione) faceva salire il titolo sopra gli altri. */
.service-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  min-height: 12.5rem;
  padding: var(--space-6);
  color: var(--color-on-ink);
}
.service-card-body h3 { color: var(--color-on-ink); margin-bottom: var(--space-2); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.service-card-body p { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.service-card-body h3::before {
  content: ""; display: block;
  width: 0; height: 5px;
  margin-bottom: var(--space-3);
  border-top: 1.5px solid var(--color-accent);
  border-bottom: 1.5px solid var(--color-accent);
  transition: width .35s ease;
}
.service-card-body p { font-size: var(--text-sm); color: rgba(244,245,246,.88); transition: color .3s ease, transform .3s ease; }
@media (hover: hover) {
  .service-card-body p { color: rgba(244,245,246,.7); transform: translateY(4px); }
  .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .service-card:hover::before { opacity: 1; }
  .service-card:hover .service-card-media img { transform: scale(1.04); }
  .service-card:hover .service-card-body p { color: var(--color-on-ink); transform: none; }
  .service-card:hover .service-card-body h3::before { width: 32px; }
}
@media (hover: none) {
  .service-card-body h3::before { width: 32px; }   /* senza mouse la firma e' sempre visibile */
}
@media (prefers-reduced-motion: reduce) {
  .service-card, .service-card-media img, .service-card::before,
  .service-card-body p, .service-card-body h3::before { transition: none; }
  .service-card:hover, .service-card:hover .service-card-media img { transform: none; }
}

@media (max-width: 860px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  /* Colonna singola: la card e' larga quanto il container, l'aspect-ratio
     4/5 resta invariato per non ritagliare le immagini in modo diverso
     da desktop (erano generate verticali/quadrate apposta). */
  .services-grid { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ── Facility management: la quinta area, in una fascia sotto le quattro (28/09) ──
   Scelta di Lara fra le prove del 28/09. Le quattro schede restano quelle approvate; il
   facility ha una fascia larga, foto da un lato e testo su fondo pieno dall'altro, cosi' il
   testo si legge sempre (la foto e' chiara: in una scheda il bianco ci si perdeva). Scartate:
   cinque in fila (troppo strette), tre sopra e due sotto. L'altezza la decide il testo: la
   foto riempie il suo lato senza allungare la fascia. */
.fascia-facility {
  display: grid; grid-template-columns: 1.1fr 1fr;
  margin-top: var(--space-6);
  border-radius: var(--radius); overflow: hidden;
  background: var(--color-ink-900); color: var(--color-on-ink);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .3s ease;
}
.fascia-foto { position: relative; min-height: 15rem; }
.fascia-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.fascia-testo { padding: var(--space-8) var(--space-8); display: flex; flex-direction: column; justify-content: center; gap: var(--space-3); }
.fascia-eyebrow { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,245,246,.6); }
.fascia-testo h3 { margin: 0; color: var(--color-on-ink); font-size: var(--text-2xl); }
.fascia-testo p { margin: 0; color: rgba(244,245,246,.82); font-size: var(--text-sm); line-height: 1.6; }
.fascia-link { margin-top: var(--space-1); color: var(--color-accent); font-weight: 700; font-size: var(--text-sm); }
.fascia-link span { display: inline-block; transition: transform .25s ease; }
@media (hover: hover) {
  .fascia-facility:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .fascia-facility:hover .fascia-link span { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .fascia-facility, .fascia-link span { transition: none; }
  .fascia-facility:hover, .fascia-facility:hover .fascia-link span { transform: none; }
}
/* stretta: la foto sopra, il testo sotto */
@media (max-width: 760px) {
  .fascia-facility { grid-template-columns: 1fr; }
  .fascia-foto { min-height: 0; aspect-ratio: 16 / 9; }
  .fascia-testo { padding: var(--space-6); }
}

/* ── Grid utilities ─────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 860px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ── Numeri reali ───────────────────────────────────────── */

/* ── Form ───────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.form-group label { font-size: var(--text-sm); font-weight: 700; }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--color-text);
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-border-strong); background: var(--color-bg); }
.form-textarea { min-height: 110px; resize: vertical; }
/* Modulo contatti collegato (29/09). La trappola per i robot sta fuori dallo schermo, non
   display:none: alcuni robot saltano i campi nascosti in quel modo. */
.modulo-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.modulo-avviso { margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: #fdecea; color: #8a1c14; font-size: var(--text-sm); font-weight: 600; }
.modulo-privacy { margin-top: var(--space-2); text-align: center; font-size: .8125rem; color: var(--color-text-muted); }
.modulo-privacy a { color: inherit; text-decoration: underline; }
.modulo-grazie { padding: var(--space-8) var(--space-4); text-align: center; outline: none; }
.modulo-grazie-titolo { font-size: var(--text-2xl); font-weight: 700; color: var(--color-text); margin-bottom: var(--space-2); }

/* Pagina privacy (29/09): testo lungo, colonna stretta per leggerlo bene. */
.testo-legale { max-width: 720px; }
.testo-legale h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.testo-legale h2 { font-size: var(--text-xl); margin: var(--space-8) 0 var(--space-2); }
.testo-legale p { line-height: 1.7; }
.testo-legale-intro { color: var(--color-text-muted); font-size: var(--text-lg); }
.testo-legale-data { margin-top: var(--space-10); color: var(--color-text-muted); font-size: var(--text-sm); }
/* finche' l'informativa non e' approvata dal cliente: si toglie insieme alle [DA CONFERMARE] */
.bozza-avviso { margin-bottom: var(--space-8); padding: var(--space-3) var(--space-4); border-radius: var(--radius);
  background: #fff4d6; color: #6b4a00; font-size: var(--text-sm); }
/* ── Footer ─────────────────────────────────────────────── */
.site-footer { background: var(--color-ink-900); color: var(--color-on-ink); padding: var(--space-16) 0 var(--space-8); }
.site-footer a { color: rgba(244,245,246,0.75); }
.site-footer a:hover { color: var(--color-on-ink); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-8); margin-bottom: var(--space-10); }
.footer-col h4 { font-size: var(--text-sm); margin-bottom: var(--space-3); color: var(--color-on-ink); }
.footer-col li { margin-bottom: var(--space-2); font-size: var(--text-sm); }
.footer-bottom { border-top: 1px solid rgba(244,245,246,0.12); padding-top: var(--space-5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: 0.75rem; color: rgba(244,245,246,0.55); }
@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ── Badge/riga certificazioni ──────────────────────────── */
.cert-strip { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: center; }
/* Marcatore delle qualifiche: bordo arancione del logo.
   Su bianco fa 3,25:1 — sotto la soglia del testo ma sopra quella di bordi e componenti. */
.cert-badge {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1.5px solid var(--color-proof);
  border-radius: 100px;
  font-size: var(--text-sm); font-weight: 700;
  color: var(--color-ink);
}
.section-dark .cert-badge { color: var(--color-on-ink); }
/* Tag di certificazione sulle schede dei cantieri */
.cert-tag {
  display: inline-block;
  padding: 3px 10px;
  border: 1.5px solid var(--color-proof);
  border-radius: 100px;
  font-size: 0.75rem; font-weight: 700;
  color: var(--color-ink);
}
/* Card della pagina certificazioni: filetto arancione in cima */
.card-cert { border-top: 3px solid var(--color-proof); }

/* ── Loghi certificazioni ───────────────────────────────── */
.cert-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: 96px;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.cert-logo img { max-height: 68px; width: auto; max-width: 100%; object-fit: contain; }
.cert-logo-pair img { max-height: 56px; }
.cert-logo-text span {
  font-weight: 800;
  font-size: var(--text-lg);
  letter-spacing: .02em;
  color: var(--color-text-muted);
}

/* ── Striscia loghi certificazioni (home) — 15/09 ────────────
   Tessere bianche tutte uguali sul fondo scuro: i marchi ufficiali vogliono il bianco,
   e la tessera fissa tiene allineati loghi di forme diverse. Etichetta di due righe
   (serve a distinguere i due Giordano). Hover: tessera che sale, bordo arancione
   (arancione = prova/qualifica, come nel resto del sito), etichetta piena.
   Desktop: 5 in riga. Sotto i 1024px: striscia orizzontale che scorre col dito,
   bordi sfumati per far capire che continua. */
.cert-logos {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
}
.cert-logo-tile { display: flex; flex-direction: column; gap: var(--space-3); color: var(--color-on-ink); text-decoration: none; }
/* Altezza FISSA, non aspect-ratio: con un'altezza ricavata dalla proporzione il
   max-height:100% dell'immagine non si risolve e i loghi RINA allungavano la tessera. */
.cert-logo-box {
  display: flex; align-items: center; justify-content: center;
  height: 124px;
  padding: var(--space-4);
  background: #FFFFFF;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(244,245,246,.08), 0 12px 28px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.cert-logo-box img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cert-logo-label { font-size: var(--text-sm); line-height: 1.35; text-align: center; color: rgba(244,245,246,.68); transition: color .2s ease; }
.cert-logo-label strong { display: block; font-weight: 700; color: var(--color-on-ink); }
.cert-logo-tile:hover .cert-logo-box,
.cert-logo-tile:focus-visible .cert-logo-box { transform: translateY(-4px); box-shadow: 0 0 0 2px var(--color-proof), 0 18px 36px rgba(0,0,0,.45); }
.cert-logo-tile:hover .cert-logo-label,
.cert-logo-tile:focus-visible .cert-logo-label { color: var(--color-on-ink); }
.cert-logo-tile:focus-visible { outline: none; }
@media (max-width: 1024px) {
  .cert-logos {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--space-4);
    padding: var(--space-1) var(--space-6) var(--space-4);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    scrollbar-width: thin;
    scrollbar-color: rgba(244,245,246,.25) transparent;
  }
  .cert-logos li { flex: 0 0 min(62%, 220px); scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .cert-logo-box, .cert-logo-label { transition: none; }
  .cert-logo-tile:hover .cert-logo-box { transform: none; }
}

/* ── Pagina Certificazioni — due gruppi (15/09) ──────────────
   Impresa / qualifiche personali di Matteo. Righe di dettaglio (ente, numero, validita')
   in piccolo; link ai PDF sottolineati in ciano (il ciano come testo su bianco non regge
   il contrasto: il testo resta antracite). Dove non c'e' un logo, la tessera mostra la
   meta' alta della prima pagina del documento. */
.cert-group-header { max-width: 760px; margin: 0 auto var(--space-10); text-align: center; }
.cert-group-header p { margin-top: var(--space-3); color: var(--color-text-muted); }
.cert-grid { align-items: stretch; }
.cert-grid .card-body { display: flex; flex-direction: column; height: 100%; }
.cert-grid .card-body h3 { margin-bottom: var(--space-3); }
.cert-status { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.cert-meta {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-text-muted);
}
.cert-docs { margin-top: auto; padding-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.cert-pdf {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-ink);
  text-decoration: underline; text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.cert-pdf::after { content: " ↗"; }
.cert-pdf:hover { text-decoration-color: var(--color-proof); }
.cert-logo-link { transition: border-color .2s ease, box-shadow .2s ease; }
.cert-logo-link:hover, .cert-logo-link:focus-visible { border-color: var(--color-proof); box-shadow: 0 0 0 1px var(--color-proof); }
/* contain, non cover: l'anteprima dell'attestato VV.F. e' larga e bassa (circa 3:1) e con
   cover la tessera la tagliava ai lati ("...NICO MANUTENTORE QUALIFIC..."). Intera e centrata,
   come i loghi. */
/* Stessa altezza per tutte le tessere della pagina (logo o anteprima): con altezze diverse
   il titolo della scheda RINA partiva piu' in alto delle altre due. */
.cert-grid .cert-logo { height: 140px; min-height: 0; }
.cert-logo-doc { padding: var(--space-2); overflow: hidden; }
.cert-logo-doc img { width: 100%; height: 100%; max-height: none; object-fit: contain; object-position: center; }

/* ── Pagina Certificazioni: i documenti come immagini (15/09) ──
   Decisione di Lara: nella pagina solo i cinque documenti, tutti insieme, senza gruppi e
   senza loghi. Ogni documento e' un'immagine della prima pagina (si vede subito, come fa
   Sogedico); il clic lo apre ingrandito in un <dialog>; sotto, il PDF originale (serve anche
   per la firma digitale dell'attestato VV.F., che in un'immagine non vale). */
.doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-8);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 860px) { .doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); } }
@media (max-width: 560px) { .doc-grid { grid-template-columns: 1fr; max-width: 360px; } }
.doc-card { display: flex; flex-direction: column; gap: var(--space-3); }
.doc-thumb {
  position: relative; display: block;
  aspect-ratio: 210 / 297;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22,35,43,.06), 0 10px 28px rgba(22,35,43,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.doc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.doc-thumb:hover, .doc-thumb:focus-visible {
  transform: translateY(-3px);
  border-color: var(--color-proof);
  box-shadow: 0 0 0 1px var(--color-proof), 0 14px 32px rgba(22,35,43,.14);
  outline: none;
}
.doc-card h3 { font-size: var(--text-lg); line-height: 1.3; margin-top: var(--space-2); }
.doc-meta { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); }
@media (prefers-reduced-motion: reduce) { .doc-thumb { transition: none; } .doc-thumb:hover { transform: none; } }

/* Visore del documento ingrandito */
.doc-viewer {
  width: min(92vw, 920px);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: #FFFFFF;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  overflow: auto;
}
.doc-viewer::backdrop { background: rgba(8,16,22,.82); }
.doc-viewer-bar {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
}
.doc-viewer-caption { flex: 1; margin: 0; font-weight: 700; font-size: var(--text-sm); }
.doc-viewer-close {
  flex: none; width: 40px; height: 40px;
  border: 1px solid var(--color-border); border-radius: 50%;
  background: #FFFFFF; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--color-ink);
}
.doc-viewer-close:hover { border-color: var(--color-proof); }
.doc-viewer img { display: block; width: 100%; height: auto; }
@media (max-width: 560px) { .doc-viewer-bar { flex-wrap: wrap; } .doc-viewer-caption { flex-basis: calc(100% - 56px); } }

/* ── Chi siamo: la ruota dei sei pilastri (ingranaggio) ──────
   Unica versione dal 16/09 (la prima, col logo che gira, e' stata tolta: su telefono non
   funzionava). Dal mockup di Lara: ingranaggio disegnato con
   spessore, luce fissa e ombra sul pavimento; puntini e lineette per le voci; frecce.
   Stesso meccanismo della versione col logo (main.js, initScrollWheel). BASE senza
   JavaScript o con le animazioni disattivate: sei schede in griglia. */
.p3 { background: linear-gradient(180deg, #FBFCFD 0%, #F2F5F7 100%); }
/* 30/09: il "pavimento" sotto la ruota esce di qualche punto dal bordo destro a certe
   larghezze (1024, 1280) e faceva scorrere la pagina di lato. Si taglia qui. */
.p3 { overflow-x: clip; }
.p3-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.p3-item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); }
.p3-item h3 { margin-bottom: var(--space-2); }
.p3-item p { color: var(--color-text-muted); }
.p3-floor, .p3-marks, .p3-gear-box, .p3-side { display: none; }
@media (max-width: 860px) { .p3-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .p3-list { grid-template-columns: 1fr; } }

/* 16/09: la ruota non trattiene piu' la pagina. Niente binario alto sei schermate, niente
   sezione incollata in cima: e' una sezione normale con dentro un comando che si usa. */
.p3--anim .p3-track { height: auto; }
.p3--anim .p3-sticky { position: static; height: auto; display: block; overflow: visible; }
.p3--anim .p3-inner { width: 100%; }
.p3--anim .section-header { margin-bottom: clamp(var(--space-2), 3vh, var(--space-8)); }
.p3--anim .p3-body {
  display: grid; grid-template-columns: auto minmax(20rem, 28rem);
  gap: clamp(var(--space-8), 4vw, var(--space-16));
  align-items: center; justify-content: center;
}
/* margine ai lati: le voci laterali sporgono dal cerchio di circa 150px di parola, quasi fissi
   (PROFESSIONALITA' toccava il pannello): vale il piu' grande fra il 20% della ruota e lo spazio
   che serve davvero alla parola, piu' un respiro */
.p3--anim .p3-stage { --S: min(440px, 56vh); position: relative; width: var(--S); height: var(--S); margin-inline: max(calc(var(--S) * .2), calc(172px - var(--S) * .15)); }
@media (max-width: 1100px) { .p3--anim .p3-stage { --S: min(380px, 52vh); } }
/* fascia d'ombra morbida all'altezza della base dell'ingranaggio: da' profondita' alla scena */
.p3--anim .p3-floor {
  display: block; position: absolute; left: -30%; right: -150%; top: 70%; height: 22%;
  background: radial-gradient(ellipse 50% 60% at 32% 30%, rgba(16,40,56,.10), rgba(16,40,56,0) 70%);
  pointer-events: none;
}
.p3--anim .p3-marks { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p3-ring { fill: none; stroke: #C9D2D8; stroke-width: .22; stroke-dasharray: .7 1.1; }
.p3-mark line { stroke: #B8C2C8; stroke-width: .3; stroke-linecap: round; transition: stroke .5s ease; }
.p3-mark circle { fill: #B8C2C8; transition: fill .5s ease, r .5s ease; }
.p3-mark.is-active line { stroke: var(--color-accent); stroke-width: .4; }
.p3-mark.is-active circle { fill: var(--color-accent); r: 1.55; }
.p3--anim .p3-gear-box {
  display: block; position: absolute; left: 50%; top: 50%;
  width: calc(var(--S) * .66); height: calc(var(--S) * .66);
  transform: translate(-50%, -46%);
}
.p3-gear { display: block; width: 100%; height: 100%; overflow: visible; }
.p3--anim .p3-list { display: block; position: absolute; inset: 0; }
.p3--anim .p3-item {
  position: absolute; padding: 0; border: 0; background: none; white-space: nowrap;
}
.p3--anim .p3-item--top    { transform: translate(-50%, -100%); text-align: center; }
.p3--anim .p3-item--bottom { transform: translate(-50%, 0);     text-align: center; }
.p3--anim .p3-item--right  { transform: translate(6px, -50%);   text-align: left; }
.p3--anim .p3-item--left   { transform: translate(calc(-100% - 6px), -50%); text-align: right; }
.p3--anim .p3-item h3 {
  margin: 0; font-size: .875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #6E7B83; transition: color .5s ease;
}
.p3--anim .p3-item.is-active h3 { color: var(--color-ink); font-weight: 800; }
.p3--anim .p3-item p { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.p3--anim .p3-side { display: block; }
.p3-num { font-family: var(--font-display); font-size: 1.375rem; font-weight: 600; color: #9AA6AD; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.p3-num-cur { position: relative; display: inline-block; color: var(--color-accent-hover); font-weight: 800; margin-right: .35em; }
.p3-num-cur::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px; background: var(--color-accent); }
.p3-title {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.25rem, 3.2vw, 2.75rem); line-height: 1.02; letter-spacing: -0.035em;
  color: var(--color-ink); margin: var(--space-8) 0 var(--space-4);
}
.p3-text { font-size: 1.375rem; font-weight: 600; line-height: 1.45; color: #56646C; max-width: 30ch; min-height: 2.9em; }
.p3-panel.is-changing .p3-title { animation: pillar-in .6s cubic-bezier(.3, .1, .2, 1) .05s both; }
.p3-panel.is-changing .p3-text  { animation: pillar-in .6s cubic-bezier(.3, .1, .2, 1) .15s both; }
.p3-nav { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-10); }
.p3-arrow {
  flex: none; width: 58px; height: 58px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1.5px solid #D3DBE0; color: #97A3AA; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.p3-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p3-arrow:hover, .p3-arrow:focus-visible { border-color: var(--color-ink); color: var(--color-ink); outline: none; }
.p3-arrow--next { border-color: var(--color-accent); color: var(--color-accent-hover); }
.p3-arrow--next:hover, .p3-arrow--next:focus-visible { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-ink); }
.p3-hint { font-size: var(--text-sm); line-height: 1.5; color: var(--color-text-muted); margin-left: var(--space-3); }

@media (max-width: 860px) {
  .p3--anim .section-header { margin-bottom: var(--space-2); }
  .p3--anim .p3-body { grid-template-columns: 1fr; gap: var(--space-3); justify-items: center; text-align: center; }
  /* Telefono (16/09, Lara): attorno alla ruota le sei voci non ci stanno, ma non devono
     sparire. Il palco diventa una colonna — ingranaggio sopra, le sei voci in una riga che
     va a capo sotto — e l'attiva si accende come su desktop. */
  .p3--anim .p3-stage { --S: min(210px, 26vh); margin-inline: 0; width: auto; height: auto; display: flex; flex-direction: column; align-items: center; }
  .p3--anim .p3-marks, .p3--anim .p3-floor { display: none; }
  .p3--anim .p3-gear-box { position: static; transform: none; width: calc(var(--S) * .95); height: calc(var(--S) * .95); }
  .p3--anim .p3-list {
    position: static; inset: auto; width: auto; height: auto; overflow: visible; clip: auto;
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: 6px 14px; max-width: 20rem; margin: var(--space-4) auto 0;
  }
  .p3--anim .p3-list .p3-item { position: static; transform: none; }
  .p3--anim .p3-list .p3-item h3 { font-size: .75rem; letter-spacing: .1em; color: rgba(22,35,43,.42); }
  .p3--anim .p3-list .p3-item.is-active h3 { color: var(--color-ink); border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; }
  .p3-title { font-size: 2rem; margin: var(--space-5) 0 var(--space-2); }
  .p3-text { font-size: 1.0625rem; margin-inline: auto; }
  .p3-nav { justify-content: center; margin-top: var(--space-4); gap: var(--space-3); }
  .p3-arrow { width: 46px; height: 46px; }
  .p3-hint { display: none; }
}
/* ── Aree da toccare (17/09) ─────────────────────────────────
   Su telefono e tablet alcuni comandi erano alti 15-34 px: col pollice si sbagliano. Qui si
   allarga SOLO l'area che risponde al dito, con un livello invisibile sopra il comando: la
   grafica non cambia di un pixel e nessun elemento si sposta. Riferimento: 44 px. */
@media (max-width: 860px) {
  .nav-logo, .nav-toggle, .filter-btn, .cert-pdf, .wheel-voce, .p3-arrow,
  .mappa-nota a, .eyebrow a, main a[href^="tel:"], main a[href^="mailto:"] { position: relative; }
  .nav-logo::after, .nav-toggle::after, .filter-btn::after, .cert-pdf::after, .wheel-voce::after,
  .p3-arrow::after,
  .mappa-nota a::after, .eyebrow a::after, main a[href^="tel:"]::after, main a[href^="mailto:"]::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, 44px); height: max(100%, 44px);
  }
  .nav-toggle { min-width: 44px; align-items: center; }
  .form-input, .form-select, .form-textarea { min-height: 46px; }   /* come i bottoni */
}

/* ── Pagina Servizi: ordine dei blocchi (17/09) ───────────────
   Su desktop le quattro aree restano alternate (foto a destra, poi a sinistra): e' voluto.
   Su telefono l'alternanza diventava un'incoerenza — due sezioni partivano con la foto e due
   col testo. In colonna singola l'ordine e' sempre lo stesso: TITOLO, FOTO, DESCRIZIONE.
   Si ottiene con le aree della griglia, senza duplicare niente nel codice della pagina. */
.servizio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "testa foto" "corpo foto";
  column-gap: var(--space-8);
  align-content: center;
}
.servizio--foto-sinistra { grid-template-areas: "foto testa" "foto corpo"; }
.servizio-testa { grid-area: testa; align-self: end; }
.servizio-corpo { grid-area: corpo; align-self: start; }
.servizio .service-photo { grid-area: foto; align-self: center; }
@media (max-width: 860px) {
  .servizio, .servizio--foto-sinistra {
    grid-template-columns: 1fr;
    grid-template-areas: "testa" "foto" "corpo";
    row-gap: var(--space-5);
  }
  .servizio-corpo > p:first-child { margin-top: 0; }   /* lo spazio lo da' gia' la griglia */
}

/* ── Mappa della sede (16/09) ────────────────────────────────
   La mappa si carica con la pagina (scelta di Lara, 16/09). Sotto, indirizzo e link a Maps. */
.mappa {
  margin-top: var(--space-8);
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
.mappa iframe { display: block; width: 100%; height: 100%; border: 0; }
.mappa-nota { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); }
@media (max-width: 560px) { .mappa { aspect-ratio: 1 / 1; } }

/* Voci della ruota cliccabili (16/09): il pulsante eredita tutto dal titolo, cambia solo
   il cursore e, sul telefono, l'area da toccare col dito. */
.wheel-voce {
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: 4px;
}
.wheel-voce:hover { color: var(--color-ink); }
.wheel-voce:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }
@media (max-width: 860px) {
  .wheel-voce { padding: 8px 6px; margin: -8px -6px; }   /* area da dito, senza spostare la scritta */
  .p3--anim .p3-list { gap: 12px 16px; }
}

/* Telefoni bassi (es. 360x740): con le sei voci sotto la ruota le frecce finivano dietro
   la barra fissa Chiama/Contattaci. Si stringe tutto di un gradino. */
@media (max-width: 860px) and (max-height: 780px) {
  .p3--anim .p3-stage { --S: min(170px, 22vh); }
  .p3--anim .p3-list { margin-top: var(--space-2); gap: 4px 12px; }
  .p3-title { font-size: 1.75rem; margin: var(--space-3) 0 var(--space-1); }
  .p3-text { font-size: 1rem; }
  .p3-nav { margin-top: var(--space-3); }
  .p3-arrow { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .p3-panel.is-changing .p3-title, .p3-panel.is-changing .p3-text { animation: none; }
  .p3-mark line, .p3-mark circle, .p3--anim .p3-item h3 { transition: none; }
}

/* ── Filtro Lavori e Progetti ───────────────────────────── */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); }
.filter-btn {
  padding: 8px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--color-border);
  background: var(--color-bg);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.filter-btn.active { background: var(--color-accent); color: var(--color-ink); border-color: var(--color-accent); }
.lavoro-card[hidden] { display: none; }

/* ── Hero rotante ───────────────────────────────────────── */
/* Ruotano SOLO l'immagine di sfondo e l'etichetta dell'area. Titolo,
   sottotitolo e bottoni sono fissi. Il testo e' sempre bianco: niente piu'
   temi alternati, ci pensa lo scrim uniforme a garantire il contrasto anche
   sulle due immagini chiare.
   Altezza: riempie la prima schermata meno la barra contatti e l'header, che
   sono fissi. Calcolata senza sapere niente della fascia numeri, che vive
   tutta sotto. 100dvh e non 100vh per la barra del browser su mobile. */
.hero {
  position: relative;
  min-height: max(480px, calc(100vh - var(--chrome-top)));
  min-height: max(480px, calc(100dvh - var(--chrome-top)));
  display: flex;
  padding: var(--hero-pad) 0;
  background: var(--color-ink-900);
  color: var(--color-on-ink);
  overflow: hidden;
}

.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  opacity: 0; visibility: hidden;
}
.hero-img.active { opacity: 1; visibility: visible; }

/* Scrim UNICO per tutte e quattro: denso a sinistra dietro al testo, sfuma
   verso destra lasciando l'immagine leggibile. Le percentuali di opacita'
   sono quelle minime che tengono il bianco sopra 4,5:1 anche sulle due
   immagini chiare (Serramenti e Manutenzione). Vedi DESIGN.md. */
.hero-scrim {
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(11,13,15,.94) 0%,
    rgba(11,13,15,.90) 34%,
    rgba(11,13,15,.66) 55%,
    rgba(11,13,15,.28) 76%,
    rgba(11,13,15,.06) 92%,
    rgba(11,13,15,0) 100%);
}

/* Il contenuto si distribuisce su tutta l'altezza: il blocco di testo in
   alto, i bottoni ancorati in basso a var(--hero-pad) dal bordo. */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
}

.hero-rule {
  display: block;
  width: 44px; height: 7px;
  border-top: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: var(--space-4);
}
.hero-eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-5);
}

.hero h1 {
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--color-on-ink);
  max-width: 15ch;
  margin-bottom: var(--space-6);
}
.hero p.lede {
  font-size: var(--text-lg);
  color: rgba(244,245,246,.82);
  max-width: 48ch;
  margin: 0;
}

.hero-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hero-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: 0; }
.hero .btn-outline { border-color: rgba(244,245,246,.45); color: var(--color-on-ink); }
.hero .btn-outline:hover { border-color: var(--color-accent); }

.hero-nav { display: flex; align-items: center; gap: var(--space-4); }
.hero-area {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,245,246,.75);
  display: grid;
}
.hero-area-label { grid-area: 1 / 1; visibility: hidden; opacity: 0; white-space: nowrap; }
.hero-area-label.active { visibility: visible; opacity: 1; }

.hero-dots { display: flex; gap: var(--space-2); }
.hero-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(244,245,246,.35);
  border: none; cursor: pointer; padding: 0;
}
.hero-dot.active { background: var(--color-accent); }

@media (max-width: 860px) {
  .hero {
    min-height: max(480px, calc(100vh - var(--chrome-top) - var(--mobile-cta-h)));
    min-height: max(480px, calc(100dvh - var(--chrome-top) - var(--mobile-cta-h)));
  }
  .hero h1 { max-width: none; }
  .hero p.lede { max-width: none; }
  .hero-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .hero-actions .btn { flex: 1 1 auto; text-align: center; }
  /* Su mobile il testo copre tutta la larghezza: lo scrim diventa verticale,
     denso in alto e in basso, cosi' il bianco regge comunque. */
  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(11,13,15,.88) 0%,
      rgba(11,13,15,.72) 45%,
      rgba(11,13,15,.86) 100%);
  }
  .hero-media img:nth-of-type(1) { object-position: 0% 50%; }
  .hero-media img:nth-of-type(2) { object-position: 0% 50%; }
  .hero-media img:nth-of-type(3) { object-position: 15% 50%; }
  .hero-media img:nth-of-type(4) { object-position: 30% 50%; }
}

/* ── Hero centrata — PROVA del 15/09 ────────────────────────
   Modello Officina Cavalletto (mockup di Lara): logo tondo al centro, una
   frase, freccia per scorrere. Nessun velo: l'immagine e' scelta per avere il
   centro scuro (bianco sulla fascia della frase 5,6:1 desktop, 6,4:1 mobile,
   misurato sul 95esimo percentile). Vedi REVISIONI-SITO-2026-09-09.md. */
.hero--centro {
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-bottom: calc(var(--hero-pad) + 64px);  /* spazio per la freccia */
}
.hero-center { position: relative; z-index: 2; display: flex; justify-content: center; }
/* width/max-width al 100%: in una colonna flex centrata il testo prende la sua
   larghezza naturale e non va a capo — sul telefono usciva dallo schermo. */
.hero .hero-claim {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 4vh, 44px);
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: inherit;
  line-height: normal;
  letter-spacing: normal;
}
.hero-logo { display: block; width: clamp(150px, 15vw, 240px); height: auto; }
.hero-claim-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.05rem, 2.1vw, 2.1rem);
  letter-spacing: .12em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--color-on-ink);
  max-width: 100%;
  overflow-wrap: break-word;
  /* Ombra morbida SOLO attorno alle lettere (non un velo sulla foto): con la punta
     della torcia dentro lo schermo la frase passa sopra torcia e scintille, e
     l'alone scuro stacca le lettere dalla texture. */
  text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 14px rgba(0,0,0,.55), 0 0 28px rgba(0,0,0,.35);
}
@media (max-width: 640px) {
  .hero-claim-text { letter-spacing: .08em; }
  .hero-claim-text br { display: none; }   /* sul telefono va a capo da sola */
}
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 44px;
  color: var(--color-on-ink);
}
.hero-scroll::before { content: ""; width: 1px; height: clamp(32px, 7vh, 64px); background: rgba(244,245,246,.55); }
.hero-scroll span {
  width: 14px; height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -6px;
}
.hero-scroll:hover, .hero-scroll:focus-visible { color: var(--color-accent); }
@media (prefers-reduced-motion: no-preference) {
  .hero-scroll span { animation: hero-nudge 2.4s ease-in-out infinite; }
}
@keyframes hero-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 5px; } }
.stats-band { scroll-margin-top: var(--chrome-top); }  /* la freccia non la fa finire sotto la testata */
/* Taglio del saldatore: ingrandito 1,3x e agganciato a sinistra, cosi' guanto e
   torcia scivolano in basso a destra e dietro frase e logo resta l'officina sfocata.
   Il problema non era il contrasto (gia' oltre 7:1) ma la texture: bordi dietro la
   frase dall'11% al 6-7% su desktop, dal 17% a 0 sul telefono. Oltre i 1600px non
   si ingrandisce: l'immagine (1672px) si sgranerebbe. */
/* Vincolo di Lara (15/09): la punta della torcia e l'arco restano DENTRO lo schermo,
   se no l'immagine sembra sbilanciata. Valori cercati per tenere la punta entro il 90%
   della larghezza e l'88% dell'altezza con lo sfondo piu' calmo possibile dietro la frase:
   punta a circa 82% / 77% su desktop 1024-1600, 81% / 87% sul telefono. */
@media (min-width: 861px) and (max-width: 1600px) {
  .hero--centro .hero-media .hero-img--saldatore { object-position: 40% 70%; transform: scale(1.05); transform-origin: 40% 70%; }
  /* Immagini nuove del 15/09: tagli scelti misurando la texture e il contrasto del
     bianco dietro la frase. Frangisole: lame lisce, 7,5:1. Manutenzione: agganciata
     a sinistra in alto, la parte piu' calma dello sfondo. Facciata: nessun taglio
     regge (cielo chiaro, riflessi), resta centrata. */
  .hero--centro .hero-media .hero-img--oscuranti    { object-position: 90% 50%; transform: scale(1.1); transform-origin: 90% 50%; }
  .hero--centro .hero-media .hero-img--manutenzione { object-position: 0% 25%; transform: scale(1.15); transform-origin: 0% 25%; }
}
@media (max-width: 860px) {
  .hero--centro .hero-media .hero-img--saldatore { object-position: 80% 0%; transform: scale(1.15); transform-origin: 80% 0%; }
  .hero--centro .hero-media .hero-img--serramenti   { object-position: 50% 50%; }
  .hero--centro .hero-media .hero-img--oscuranti    { object-position: 50% 50%; }
  .hero--centro .hero-media .hero-img--manutenzione { object-position: 45% 0%; transform: scale(1.15); transform-origin: 45% 0%; }
}

/* ── Overlay della hero — PROVA del 15/09 ───────────────────
   Diagnosi di Lara: logo, frase e foto chiedevano attenzione tutti insieme. L'immagine
   diventa atmosfera: (1) desaturata, cosi' tramonti caldi e saldatura fredda non
   litigano; (2) tinta leggera nel ciano del marchio (mix-blend color); (3) velo scuro
   uniforme, un po' piu' denso in basso. Stessa ricetta pensata per il futuro video. */
.hero--centro .hero-img { z-index: 0; filter: saturate(.4) brightness(.95); }
.hero--centro .hero-media::before,
.hero--centro .hero-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero--centro .hero-media::before { background: #0A7FA8; mix-blend-mode: color; opacity: .35; }
.hero--centro .hero-media::after {
  background: linear-gradient(180deg, rgba(8,16,22,.50) 0%, rgba(8,16,22,.56) 55%, rgba(8,16,22,.70) 100%);
}

/* Tema per immagine: sulle due chiare la frase e la freccia diventano antracite,
   con un alone chiaro al posto di quello scuro. Niente velo sull'immagine. */
.hero--centro[data-tema="chiaro"] .hero-claim-text {
  color: var(--color-ink);
  text-shadow: 0 1px 2px rgba(255,255,255,.7), 0 0 14px rgba(255,255,255,.6), 0 0 28px rgba(255,255,255,.4);
}
.hero--centro[data-tema="chiaro"] .hero-scroll { color: var(--color-ink); }
.hero--centro[data-tema="chiaro"] .hero-scroll::before { background: rgba(22,35,43,.55); }

/* ── Striscia numeri sotto la hero ──────────────────────── */
/* Sono dati d'azienda, uguali per tutte e quattro le aree: stanno fuori
   dallo slider cosi' restano fermi e la parte bassa dell'immagine resta
   pulita. Fondo chiaro della famiglia ciano, filetto in cima a riprendere
   la doppia banda del logo. I numeri NON sono ciano: su questo fondo il
   ciano del marchio fa 2,6:1, sotto il minimo anche per il testo grande.
   Restano grafite, coerenti con la regola "il testo e' neutro". */
.stats-band {
  background: var(--color-ink-900);
  border-top: 3px solid var(--color-accent);
  padding: var(--space-12) 0;
  min-height: var(--stats-band-h);
  display: flex;
  align-items: center;
}
/* width:100% e' obbligatorio: .stats-band e' flex, e senza questo il
   .container diventa un flex item che si stringe sul contenuto: i tre
   numeri finivano in una colonna stretta al centro, piu' rientrata del
   resto della pagina, con l'antracite vuoto ai lati. Con width:100%
   la riga torna larga quanto header, hero e tutte le altre sezioni. */
.stats-band-inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.stats-band .stat { text-align: center; }
.stats-band .stat + .stat { border-left: 1px solid rgba(244,245,246,.14); }
.stat-val {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;   /* il contatore non balla: cifre tutte larghe uguali */
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}
.stat-label { font-size: var(--text-sm); color: rgba(244,245,246,.75); }
@media (max-width: 860px) {
  /* Sul telefono la prima schermata utile e' piu' corta: sotto c'e' la barra
     fissa chiama/contattaci. La hero si ferma sopra di lei. */
  .hero {
    min-height: max(420px, calc(100vh - var(--chrome-top) - var(--mobile-cta-h)));
    min-height: max(420px, calc(100dvh - var(--chrome-top) - var(--mobile-cta-h)));
  }
}
/* Sotto i 600px tre numeri in riga diventano stretti: vanno uno per riga,
   centrati, con lo stesso padding sopra e sotto. Il divisore verticale
   sparisce quando non c'e' piu' una riga da dividere. La fascia non si
   comprime: cresce in altezza. */
@media (max-width: 600px) {
  .stats-band-inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .stats-band .stat + .stat { border-left: none; }
  .stat-label { font-size: 0.8125rem; }
}

/* ── Mobile CTA bar ─────────────────────────────────────── */
.mobile-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 105; background: rgba(255,255,255,.98); border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); gap: var(--space-2); }
.mobile-cta a { flex: 1; text-align: center; }
@media (max-width: 640px) { .mobile-cta { display: flex; } body { padding-bottom: calc(var(--mobile-cta-h) + 12px); } }

/* ── Movimento della home (15/09, "la home e' piatta") ─────────
   Tutto sotto prefers-reduced-motion: no-preference. Chi ha chiesto meno
   animazioni al sistema vede la pagina ferma, com'era prima.
   1. Entrata allo scorrimento: le sezioni salgono di poco e compaiono; i figli
      di [data-reveal-stagger] uno dopo l'altro. Classi messe da main.js: senza
      script niente e' nascosto.
   2. Hero: logo che entra ruotando appena (cita la ruota), frase che sale, freccia
      per ultima. Una volta sola, all'apertura.
   3. Hero: dissolvenza fra un'immagine e l'altra (prima era uno stacco secco) e
      avvicinamento lento dell'immagine attiva. Solo 4%: la punta della torcia
      resta dentro lo schermo anche a fine corsa (vincolo di Lara). Si usa la
      proprieta' scale, separata dal transform dei tagli per immagine. */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal {
    opacity: 0;
    translate: 0 28px;
    transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 110ms),
                translate .8s var(--ease-out) calc(var(--i, 0) * 110ms);
  }
  .js-reveal .reveal.is-in { opacity: 1; translate: none; }
  /* le card hanno gia' le loro transizioni al passaggio del mouse: vanno ripetute qui */
  .js-reveal .service-card.reveal {
    transition: opacity .8s var(--ease-out) calc(var(--i, 0) * 110ms),
                translate .8s var(--ease-out) calc(var(--i, 0) * 110ms),
                transform .25s ease, box-shadow .3s ease;
  }

  .hero--centro .hero-logo      { animation: hero-logo-in 1.3s var(--ease-out) .15s both; }
  .hero--centro .hero-claim-text { animation: hero-rise 1s var(--ease-out) .55s both; }
  .hero--centro .hero-scroll    { animation: hero-fade .8s ease 1.2s both; }

  /* l'immagine che entra sta sopra e sfuma; quella che esce resta piena sotto
     finche' l'altra non e' arrivata, cosi' non si vede il fondo in mezzo */
  .hero--centro .hero-img {
    transition: opacity 0s linear 1.4s, visibility 0s linear 1.4s, scale 0s linear 1.4s;
  }
  .hero--centro .hero-img.active {
    z-index: 1;
    transition: opacity 1.4s ease, visibility 0s, scale 10s linear;
  }
  .hero--centro.hero--kb .hero-img.active { scale: 1.04; }
}
@keyframes hero-logo-in { from { opacity: 0; rotate: -40deg; scale: .9; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes hero-rise    { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes hero-fade    { from { opacity: 0; } to { opacity: 1; } }

/* ── Lavori e progetti — griglia di sole immagini (riunione 9/09, 16/09) ──
   A riposo si vede solo la foto. Col mouse (o col tab da tastiera) la foto va in secondo
   piano e compaiono area, anno e titolo; il clic apre la pagina del lavoro. Senza mouse
   (telefono, tablet) il titolo e' sempre visibile su una sfumatura in basso. */
.lavori-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.lavoro-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  background: var(--color-ink-900);
  color: var(--color-on-ink);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform .25s ease, box-shadow .3s ease;
}
.lavoro-tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease, filter .35s ease;
}
.lavoro-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8,16,22,0) 40%, rgba(8,16,22,.78) 100%);
  transition: opacity .35s ease;
}
.lavoro-tile-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-5);
  transition: opacity .3s ease, transform .3s ease;
}
.lavoro-tile-meta { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(244,245,246,.78); }
.lavoro-tile-title { font-size: var(--text-lg); line-height: 1.25; color: var(--color-on-ink); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.lavoro-tile-body p { font-size: var(--text-sm); color: rgba(244,245,246,.88); }
.lavoro-tile-title span { white-space: nowrap; }  /* l'anno non resta solo a capo riga */
/* Seconda riga del titolo: il committente, come nel documento del cliente (30/09). */
.lavoro-tile-committente { font-size: var(--text-sm); line-height: 1.35; color: rgba(244,245,246,.9); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.lavoro-tile:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
@media (hover: hover) {
  .lavoro-tile::after { opacity: 0; }
  .lavoro-tile-body { opacity: 0; transform: translateY(8px); }
  .lavoro-tile:hover, .lavoro-tile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .lavoro-tile:hover img, .lavoro-tile:focus-visible img { transform: scale(1.05); filter: brightness(.38) saturate(.7); }
  .lavoro-tile:hover .lavoro-tile-body, .lavoro-tile:focus-visible .lavoro-tile-body { opacity: 1; transform: none; }
}
@media (max-width: 860px) { .lavori-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lavori-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .lavoro-tile, .lavoro-tile img, .lavoro-tile::after, .lavoro-tile-body { transition: none; }
  .lavoro-tile:hover, .lavoro-tile:focus-visible, .lavoro-tile:hover img, .lavoro-tile:focus-visible img { transform: none; }
}

/* ── Pagina di un lavoro (modello: Casa della Comunita' di Marcon, validato 16/09) ──
   Stili spostati qui dalla pagina pilota: valgono per tutte le pagine lavoro-*.html. */
.job-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-8) 0;
}
.job-gallery figure { margin: 0; }
.job-gallery img {
  width: 100%; height: 260px; object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.job-gallery figcaption {
  font-size: var(--text-sm); color: var(--color-text-muted);
  margin-top: var(--space-2);
}
.job-gallery .wide { grid-column: span 2; }
/* Il titolo di un lavoro e' fatto di due righe, come nel documento del cliente (30/09):
   nome del lavoro con l'anno, e sotto il committente. */
.job-anno { color: var(--color-text-muted); font-weight: 500; white-space: nowrap; }
.job-committente { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); }
.job-committente span {
  font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-text-muted); margin-right: var(--space-1);
}
/* Il testo del lavoro e' quello del cliente e sta subito sotto il committente (30/09). */
.job-testo { font-size: var(--text-lg); line-height: 1.6; margin-top: var(--space-5); }
.job-testo + .job-testo { margin-top: var(--space-3); }
/* Dopo la foto grande vengono subito le altre foto, senza un titolo in mezzo: lo stacco
   fra le due sezioni si accorcia, altrimenti sembra un buco. */
section:has(> .container > .job-hero-img) + section { padding-top: var(--space-6); }
section .job-hero-img { margin-bottom: 0; }
/* Lavori fatti in due sedi (porte REI, sale diagnostiche — 30/09): una pagina sola, e ogni
   sede ha il suo titolo sopra le sue foto. */
.job-sede { font-size: var(--text-xl); margin-top: var(--space-8); }
.job-sede:first-child { margin-top: 0; }
.job-sede + .job-gallery { margin-top: var(--space-4); }
/* Quattro foto tutte verticali: a due per riga, invece di tre piu' una da sola. */
.job-gallery--due { grid-template-columns: repeat(2, 1fr); }
.job-gallery--due img { height: 340px; }
@media (max-width: 760px) {
  .job-gallery, .job-gallery--due { grid-template-columns: 1fr; }
  .job-gallery .wide { grid-column: span 1; }
  .job-gallery img, .job-gallery--due img { height: 220px; }
}
.fact-strip {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin: var(--space-6) 0;
}
.fact-chip {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 999px; padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
}
/* Chi ha commissionato il lavoro (documento "desc lavori", 28/09). La parola
   "Committente" e' un'etichetta, non il dato: resta in secondo piano. */
.fact-chip-label { color: var(--color-text-muted); font-weight: 500; }
/* Lavoro con due sole foto: la seconda sta da sola, larga quanto il testo,
   invece di occupare due terzi di una griglia a tre colonne. */
.job-gallery--una { grid-template-columns: 1fr; }
.job-gallery--una img { height: auto; aspect-ratio: 4 / 3; }
.job-hero-img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: var(--radius); margin: var(--space-6) 0;
  box-shadow: var(--shadow-md);
}

/* ── Pagina Servizi — una foto per area (16/09) ──
   Per ora foto stock provvisorie (img/servizi/FONTI-LICENZE.md), da sostituire con foto vere.
   Stessa proporzione per tutte e quattro, cosi' le sezioni alternate restano allineate. */
.service-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* ── Chi siamo: due livelli di lettura (30/09) ────────────────
   Il testo e' quello del cliente. Per non farne un muro: a sinistra un sottotitolo corto,
   a destra i paragrafi. Si scorre la colonna di sinistra, e si legge a destra solo dove
   interessa. Su telefono il sottotitolo sta sopra i suoi paragrafi. */
/* Distanze uguali sopra e sotto il riquadro del motto (Lara, 30/09): 80 punti dall'ultimo
   paragrafo al riquadro, 80 dal riquadro alla scritta "Come lavoriamo" della sezione dopo
   (40 di bianco + 40 di grigio). Su telefono 48 e 48. */
.chi-sezione { padding-bottom: var(--space-10); }
.chi-sezione + .p3 { padding-top: var(--space-10); }
.chi-blocco {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  column-gap: var(--space-10);
  padding: var(--space-8) 0;
  border-top: 1.5px solid var(--color-border);
}
/* con la testata sopra, il primo blocco non ha bisogno del filetto in cima */
.chi-blocco:first-child { border-top: 0; padding-top: 0; }
.chi-blocco h2 { font-size: var(--text-xl); line-height: 1.25; }
/* la doppia banda del logo, piccola, sopra ogni sottotitolo */
.chi-blocco h2::before {
  content: ""; display: block; width: 28px; height: 6px; margin-bottom: var(--space-3);
  border-top: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
}
.chi-blocco p { line-height: 1.7; }
.chi-testo p + p { margin-top: var(--space-4); }
/* Il manifesto dell'azienda, a fascia: largo quanto i blocchi sopra, stesse distanze sopra e
   sotto che aveva il riquadro del motto scritto. */
.chi-motto { margin: var(--space-12) 0 0; }   /* con lo spazio sotto l'ultimo paragrafo fa 80 */
.chi-motto img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
@media (max-width: 760px) {
  .chi-blocco { grid-template-columns: 1fr; row-gap: var(--space-3); padding: var(--space-6) 0; }
  .chi-sezione { padding-bottom: var(--space-6); }
  .chi-sezione + .p3 { padding-top: var(--space-6); }
  .chi-motto { margin-top: var(--space-6); }
}

/* ── Home: le schede dei servizi sono link (30/09) ── */
a.service-card { display: block; color: inherit; text-decoration: none; }
a.service-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

/* ── Pagina Servizi, piu' grafica (30/09) ─────────────────────
   Tutto con gli elementi che il marchio ha gia': numeri in antracite, la doppia banda
   ciano, filetti sottili, angoli squadrati. Niente icone e niente pillole (DESIGN.md). */
section[id] { scroll-margin-top: var(--chrome-top); }   /* arrivando da un link, il titolo non finisce sotto la testata */
/* indice delle cinque aree */
.servizi-indice {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4);
  margin-top: var(--space-10);
}
.servizi-indice a {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); line-height: 1.3;
  color: var(--color-ink); text-decoration: none;
  transition: border-color .2s ease, transform .2s ease;
}
.servizi-indice a span { font-size: var(--text-2xl); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.servizi-indice a:hover, .servizi-indice a:focus-visible { border-top-color: var(--color-accent); }
@media (hover: hover) { .servizi-indice a:hover { transform: translateY(-2px); } }
@media (max-width: 760px) {
  .servizi-indice { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); margin-top: var(--space-8); }
}
/* testata di ogni area: numero grande, doppia banda, nome */
.servizio-etichetta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.servizio-num {
  font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1;
  letter-spacing: -0.03em; color: var(--color-ink);
}
.servizio-banda {
  flex: none; width: 36px; height: 7px;
  border-top: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
}
.servizio-nome {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted);
}
/* elenco: una riga per voce, filetto sopra, la doppia banda come segno */
.servizio-punti { list-style: none; margin: var(--space-5) 0 0; padding: 0; border-bottom: 1.5px solid var(--color-border); }
.servizio-punti li {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1.5px solid var(--color-border);
  font-weight: 600; color: var(--color-text);
}
.servizio-punti li::before {
  content: ""; flex: none; width: 20px; height: 6px; transform: translateY(-3px);
  border-top: 2px solid var(--color-accent); border-bottom: 2px solid var(--color-accent);
}
@media (prefers-reduced-motion: reduce) { .servizi-indice a { transition: none; } .servizi-indice a:hover { transform: none; } }

/* ── Testata di pagina con immagine (30/09) ───────────────────
   In cima a Chi siamo, Servizi, Lavori, Certificazioni e Contatti: prima c'erano solo occhiello
   e titolo su bianco. La foto sta dietro, sotto un velo scuro UNIFORME (il design esclude le
   sfumature): il titolo bianco deve leggersi su qualunque foto. Misurato: almeno 4,5:1. */
.testata {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: clamp(280px, 42vh, 440px);
  padding: 0;
  background: var(--color-ink-900); color: var(--color-on-ink);
}
.testata-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.testata::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(16,18,20,.62); }
.testata .container { width: 100%; padding-top: var(--space-16); padding-bottom: var(--space-10); }
.testata .eyebrow { color: rgba(244,245,246,.82); margin-bottom: var(--space-2); }
.testata .eyebrow-rule { margin: 0 0 var(--space-4); }
.testata h1 { color: var(--color-on-ink); font-size: var(--text-3xl); max-width: 24ch; }
.testata-sotto { color: rgba(244,245,246,.9); margin-top: var(--space-4); max-width: 62ch; }
@media (min-width: 1024px) { .testata h1 { font-size: 2.75rem; } }
@media (max-width: 560px) { .testata .container { padding-top: var(--space-12); padding-bottom: var(--space-8); } }
/* la sezione che segue non ripete tutto lo stacco: il titolo e' gia' sopra */
.testata + section { padding-top: var(--space-12); }