/* ==========================================================================
       CANTIERI — foglio di stile proprio, non condiviso con le altre pagine.
       Stessa impostazione della home: layout fluido, niente rimpicciolimento.
       Intestazione, piede e pulsanti ripetono le regole della home perché i due
       fogli sono separati apposta: quello di una pagina non può rompere l'altra.
       Quando saranno fluide tutte, queste parti comuni andranno in un file solo.
       ========================================================================== */
    :root {
      --notte: #12303F;
      --abisso: #0E2A38;
      --mare: #0F5E86;
      --azzurro: #6CBBE6;
      --pietra: #F1F2F2;
      --bianco: #FFFFFF;
      --ardesia: #DADDDE;
      --filetto: #E7E9E9;
      --testo: #3F4A50;
      --inchiostro: #1C2529;
      --grigio: #4C565C;
      --su-scuro: #A3B2B9;
      --mono: 'IBM Plex Mono', ui-monospace, monospace;
      --titoli: 'Bricolage Grotesque', system-ui, sans-serif;
      --corpo: 'Schibsted Grotesk', system-ui, sans-serif;
      --lato: max(24px, calc((100% - 1560px) / 2));
      --max: none;
    }

    body { margin: 0; font-family: var(--corpo); background: var(--pietra); color: var(--inchiostro); }
    .pag { width: 100%; max-width: var(--max); margin: 0 auto; background: var(--pietra); overflow-x: hidden; }
    .pag img { max-width: 100%; }
    .pag a:not([class]) { color: var(--mare); }
    .pag a:not([class]):hover { color: var(--inchiostro); }
    .pag :focus-visible { outline: 3px solid var(--mare); outline-offset: 3px; border-radius: 2px; }
    .pag .hdr :focus-visible, .pag .passo :focus-visible, .pag .gal :focus-visible, .pag .pie :focus-visible { outline-color: var(--azzurro); }
    .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sr:focus { position: fixed; top: 12px; left: 12px; z-index: 10; width: auto; height: auto; margin: 0;
                clip-path: none; overflow: visible; display: inline-flex; align-items: center; min-height: 44px;
                padding: 12px 20px; background: var(--bianco); color: var(--notte); font-size: 15px; font-weight: 600;
                border: 2px solid var(--mare); border-radius: 100px; text-decoration: none; }
    .sez { padding: clamp(44px, 6vw, 80px) var(--lato) 0 var(--lato); }
    .occhiello { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mare); margin-bottom: 14px; }
    .h2 { margin: 0; font-family: var(--titoli); font-weight: 600; font-size: clamp(30px, 2.86vw, 42px); line-height: 1.04; letter-spacing: -0.04em; color: var(--notte); }

    /* --- intestazione ------------------------------------------------------- */
    .hdr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px;
           padding: 18px var(--lato); background: var(--notte);
       border-bottom: 1px solid #1B3D4E; }
    .hdr-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
    .hdr-logo img { height: clamp(52px, 4.8vw, 84px); width: auto; display: block; }
    .nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 30px); }
    .navl { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 14px;
            letter-spacing: 0.02em; color: #E9EEF0; text-decoration: none; padding: 12px 0; border-bottom: 2px solid transparent; }
    .navl:hover, .navl:focus-visible { color: var(--azzurro); border-bottom-color: var(--azzurro); }
    .navl[aria-current="page"] { color: var(--azzurro); border-bottom-color: var(--azzurro); }
    .nav-tel { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 14px;
               color: var(--bianco); text-decoration: none; border-bottom: 1px solid #47606E; padding: 12px 0; white-space: nowrap; }
    .nav-tel:hover { color: var(--azzurro); border-bottom-color: var(--azzurro); }
    .nav-in { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #E9EEF0; }
    .nav-in:hover { color: var(--azzurro); }
    .nav-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 26px; background: var(--azzurro);
               color: #0A2230; border-radius: 100px; font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap; }
    .nav-cta:hover { background: #8CCBEE; color: #0A2230; }
    .burger { display: none; align-items: center; gap: 10px; min-height: 48px; padding: 10px 18px; background: transparent;
              border: 1px solid #47606E; border-radius: 100px; color: #E9EEF0; font-family: var(--mono); font-size: 14px;
              letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; }
    .burger:hover { border-color: var(--azzurro); color: var(--azzurro); }
    .burger-i { display: block; width: 18px; }
    .burger-i span { display: block; height: 2px; background: currentColor; margin: 4px 0; transition: transform 0.2s ease, opacity 0.2s ease; }
    .burger[aria-expanded="true"] .burger-i span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .burger[aria-expanded="true"] .burger-i span:nth-child(2) { opacity: 0; }
    .burger[aria-expanded="true"] .burger-i span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

    /* --- apertura ------------------------------------------------------------ */
    .testa { background: var(--bianco); border-bottom: 1px solid var(--ardesia);
             padding: clamp(24px, 3vw, 44px) var(--lato) clamp(30px, 4vw, 44px) var(--lato); }
    .briciole { font-size: 15px; line-height: 1.6; color: var(--grigio); }
    .pag .briciole a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mare);
                       text-decoration: underline; text-underline-offset: 3px; }
    .pag .briciole a:hover { color: var(--inchiostro); }
    .briciole span { margin: 0 10px; color: #60666A; }
    .testa-griglia { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: end; }
    .h1 { margin: 0 0 18px 0; font-family: var(--titoli); font-weight: 600; font-size: clamp(36px, 3.9vw, 56px);
          line-height: 1.0; letter-spacing: -0.045em; color: var(--notte); }
    .testa p { margin: 0; font-size: clamp(17px, 1.18vw, 17px); line-height: 1.6; color: var(--testo); max-width: 58ch; }
    .testa p b { font-weight: 600; color: var(--notte); }
    .conti { display: flex; flex-wrap: wrap; gap: clamp(22px, 3vw, 40px); }
    /* a schermo largo una linea verticale lega i numeri al testo accanto */
    @media (min-width: 1081px) {
      .conti { align-self: stretch; align-items: center; padding-left: clamp(28px, 3vw, 48px);
               border-left: 1px solid var(--ardesia); }
    }
    .conto b { display: block; font-family: var(--titoli); font-weight: 700; font-size: clamp(40px, 3.7vw, 49px);
               line-height: 0.9; letter-spacing: -0.045em; color: var(--mare); }
    .conto:last-child b { color: var(--notte); }
    .conto span { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
                  text-transform: uppercase; color: var(--grigio); }
    .aggiornato { display: block; margin-top: clamp(20px, 3vw, 30px); font-family: var(--mono); font-size: 12px;
                  letter-spacing: 0.08em; color: #626C72; }

    /* --- le opere in evidenza --------------------------------------------------- */
    .sez-testa { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: flex-end; justify-content: space-between; margin-bottom: clamp(22px, 3vw, 32px); }
    .opere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
    /* Titolo e ricerca sulla stessa riga, centrati fra loro, sopra un filetto
       a tutta larghezza su cui poggia il tratto blu del titolo (lo stesso
       segno degli altri titoli, qui allungato a unire le due parti). */
    .sez-testa-cerca { position: relative; align-items: center; padding-bottom: clamp(16px, 1.8vw, 20px);
                       margin-bottom: clamp(44px, 3.6vw, 52px);
                       border-bottom: 1px solid var(--ardesia); }
    .pag .sez-testa-cerca .h2::after { display: none; }
    .sez-testa-cerca::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px;
                              background: var(--mare); }
    .sr-solo { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .cerca { display: none; position: relative; width: min(100%, 420px); }
    html.js .cerca { display: block; }
    .cerca-campo { width: 100%; min-height: 48px; padding: 0 18px 0 44px; border: 1px solid var(--ardesia); border-radius: 100px;
                   background: var(--bianco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230F5E86' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") no-repeat 16px 50%;
                   font: inherit; font-size: 16px; color: var(--inchiostro); }
    .cerca-campo:focus { outline: none; border-color: var(--mare); box-shadow: 0 0 0 3px rgba(15, 94, 134, 0.18); }
    /* il conteggio sta sotto il filetto, a destra, senza spingere il titolo */
    .cerca-esito { position: absolute; right: 0; top: calc(100% + clamp(16px, 1.8vw, 20px) + 8px); margin: 0;
                   font-family: var(--mono); font-size: 13px; color: #505A60; white-space: nowrap; }
    /* la numerazione delle opere: sotto la griglia, su un filetto che chiude
       la sezione. La costruisce cantieri.js (7 opere per pagina); senza
       JavaScript non c'è e si vedono tutte */
    .pagine { display: none; align-items: center; justify-content: space-between; gap: 16px;
              margin-top: clamp(22px, 2.6vw, 32px); padding-top: clamp(16px, 1.8vw, 20px);
              border-top: 1px solid var(--ardesia); position: relative; }
    html.js .pagine { display: flex; }
    .pagine::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--mare); }
    html.js .pagine[hidden] { display: none; }
    .pagine-et { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #505A60; }
    .pagine-numeri { display: flex; gap: 8px; }
    .pagina-tasto { min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--ardesia); border-radius: 100px;
                    background: var(--bianco); font-family: var(--mono); font-size: 14px; color: var(--notte); cursor: pointer; }
    .pagina-tasto:hover:not(:disabled) { border-color: var(--notte); }
    .pagina-tasto[aria-current="page"] { background: var(--notte); border-color: var(--notte); color: var(--bianco); }
    .pagina-tasto:disabled { opacity: 0.4; cursor: default; }
    /* le schede e le righe escluse dalla ricerca: «hidden» da solo non basta,
       perché le regole qui sopra le mettono in display flex */
    .op[hidden], .elenco li[hidden], .recenti[hidden], .opere[hidden] { display: none; }
    .pag .cerca-altrove a { color: var(--mare); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
    .cerca-nessuno { margin: 0; padding: clamp(18px, 2vw, 24px); background: var(--bianco); border: 1px solid var(--ardesia);
                     font-size: 16px; line-height: 1.6; color: var(--testo); }
    .op { display: flex; flex-direction: column; background: var(--bianco); border: 1px solid var(--ardesia); text-decoration: none; }
    .op:hover { border-color: var(--notte); }
    .op-img { position: relative; overflow: hidden; }
    .op-img img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
    .marca { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
             color: var(--notte); background: var(--pietra); padding: 6px 10px; }
    .op-img .marca { position: absolute; left: 12px; bottom: 12px; }
    /* lo stato del cantiere, in alto sulla foto (lo stile sta in assets/dettagli.css) */
    .op-stato { position: absolute; left: 12px; top: 12px; box-shadow: 0 2px 8px rgba(18, 48, 63, 0.12); }
    .op-corpo { padding: clamp(20px, 2.2vw, 28px); display: flex; flex-direction: column; flex-grow: 1; }
    .op-occhiello { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
                    color: var(--mare); margin-bottom: 12px; }
    .op h3 { margin: 0 0 12px 0; font-family: var(--titoli); font-weight: 600; font-size: clamp(22px, 1.76vw, 24px);
             line-height: 1.14; letter-spacing: -0.035em; color: var(--notte); }
    .op:hover h3 { color: var(--mare); }
    .op p { margin: 0 0 18px 0; font-size: clamp(16px, 0.97vw, 16px); line-height: 1.55; color: var(--testo); max-width: 52ch; }
    .op-piede { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--filetto);
                display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; justify-content: space-between; }
    .op-cifra { font-family: var(--titoli); font-weight: 600; font-size: clamp(22px, 1.68vw, 22px); letter-spacing: -0.035em;
                white-space: nowrap; color: var(--mare); }
    .op-nota { font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #505A60; }
    .op-vai { display: block; margin-top: 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mare); }
    .op:hover .op-vai { color: var(--notte); }
    /* la prima opera occupa tutta la riga e va per lungo */
    @media (min-width: 901px) {
      /* La scheda lunga usa le stesse due colonne e lo stesso spazio della griglia
         sotto: cosi' la foto sta esattamente sopra la colonna di sinistra e il
         testo sopra quella di destra. */
      .op-1 { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
      .op-1 .op-img img { aspect-ratio: 16 / 9; height: auto; }
      .op-1 h3 { font-size: clamp(26px, 2.35vw, 32px); }
      .op-1 .op-corpo { justify-content: center; }
    }

    /* --- fascia di passaggio --------------------------------------------------- */
    /* «Il mestiere» e la galleria sono la stessa fascia blu: niente margine
       sotto il testo, altrimenti si somma a quello sopra la galleria e fra i
       due resta un vuoto di oltre 100 px. Titolo e testo si allineano in basso. */
    .passo { margin-top: clamp(44px, 6vw, 78px); background: var(--notte);
             padding: clamp(34px, 4.5vw, 56px) var(--lato) clamp(24px, 2.4vw, 32px) var(--lato);
             display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
    .passo h2 { margin: 0; font-family: var(--titoli); font-weight: 600; font-size: clamp(26px, 2.52vw, 34px);
                line-height: 1.08; letter-spacing: -0.04em; color: var(--bianco); max-width: 20ch; }
    .passo-occhiello { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
                       text-transform: uppercase; color: var(--azzurro); margin-bottom: 14px; }
    .passo p { margin: 0; font-size: clamp(16px, 1.09vw, 16px); line-height: 1.65; color: var(--su-scuro); max-width: 56ch;
               padding-left: clamp(18px, 2vw, 28px);
               /* linea verticale sottile, con un tratto azzurro in cima */
               background: linear-gradient(var(--azzurro), var(--azzurro)) left top / 2px 28px no-repeat,
                           linear-gradient(#2F4D5C, #2F4D5C) left top / 1px 100% no-repeat; }
    /* la lineetta azzurra sotto il titolo, come sotto il titolo della home */
    .passo h2::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 18px; background: var(--azzurro); }

    /* --- galleria che scorre ---------------------------------------------------- */
    /* un filetto separa il testo dalla galleria, sul bordo comune a tutte le pagine */
    .gal { position: relative; padding: clamp(24px, 2.4vw, 32px) 0 0 0; background: var(--notte); }
    .gal::before { content: ""; position: absolute; top: 0; left: var(--lato); right: var(--lato);
                   height: 1px; background: #2F4D5C; }
    .gal-testa { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; justify-content: space-between;
                 padding: 0 var(--lato); margin-bottom: clamp(18px, 2.5vw, 26px); }
    .gal-cmd { display: none; gap: 8px; }
    html.js .gal-cmd { display: flex; }
    .gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 48px; min-height: 48px;
            padding: 0 16px; background: transparent; border: 1px solid #47606E; border-radius: 100px; color: #E9EEF0;
            font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
    .gbtn:hover { border-color: var(--azzurro); color: var(--azzurro); }
    .gpista { display: flex; align-items: flex-start; gap: clamp(12px, 1.4vw, 18px); overflow-x: auto; overscroll-behavior-x: contain;
              padding: 0 var(--lato) clamp(26px, 3vw, 38px) var(--lato); scrollbar-width: thin; scrollbar-color: #47606E transparent; }
    .gpista::-webkit-scrollbar { height: 8px; }
    .gpista::-webkit-scrollbar-track { background: transparent; }
    .gpista::-webkit-scrollbar-thumb { background: #47606E; border-radius: 4px; }
    .gpista:focus-visible { outline: 3px solid var(--azzurro); outline-offset: -3px; }
    .gfoto { flex: 0 0 auto; margin: 0; max-width: min(84vw, 620px); }
    .gfoto img { display: block; height: clamp(200px, 27vw, 320px); width: auto; max-width: 100%;
                 object-fit: cover; background: #1B3D4E; }
    .gfoto figcaption { margin-top: 12px; font-family: var(--mono); font-size: 13px; line-height: 1.55;
                        color: #BCC9CF; max-width: 38ch; }

    /* i filtri compaiono solo se c'è il JavaScript: senza, si vedono tutte le foto */
    .gal-filtri { display: none; flex-wrap: wrap; gap: 8px; padding: 0 var(--lato);
                  margin-bottom: clamp(16px, 2vw, 22px); }
    html.js .gal-filtri { display: flex; }
    .gfil { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
            background: transparent; border: 1px solid #47606E; border-radius: 100px; color: #E9EEF0;
            font-family: var(--corpo); font-size: 15px; cursor: pointer; }
    .gfil b { font-family: var(--mono); font-size: 13px; font-weight: 400; color: #8FA2AB; }
    .gfil:hover { border-color: var(--azzurro); color: var(--azzurro); }
    .gfil[aria-pressed="true"] { background: var(--azzurro); border-color: var(--azzurro); color: #0A2230; }
    .gfil[aria-pressed="true"] b { color: #0A2230; }
    .gal-esito { margin: 0 0 clamp(14px, 1.8vw, 20px) 0; padding: 0 var(--lato);
                 font-family: var(--mono); font-size: 13px; color: #8FA2AB; }
    .gal-esito:empty { display: none; }
    .glav { display: block; margin-bottom: 5px; font-size: 12px; letter-spacing: 0.1em;
            text-transform: uppercase; color: var(--azzurro); }
    .gfoto[hidden] { display: none; }

    /* con un filtro attivo la striscia smette di scorrere e diventa una griglia:
       chi ha filtrato vuole vedere quelle foto, non inseguirle */
    .gal.filtrata .gpista { flex-wrap: wrap; overflow-x: visible; }
    .gal.filtrata .gfoto { max-width: min(100%, 420px); }
    .gal.filtrata .gfoto img { height: auto; width: 100%; }
    html.js .gal.filtrata .gal-cmd { display: none; }

    /* --- altri lavori recenti ----------------------------------------------------- */
    .recenti { background: var(--notte); padding: 0 var(--lato) clamp(34px, 4.5vw, 52px) var(--lato); }
    .recenti-in { padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid #1B3D4E; }
    .recenti h2 { margin: 0 0 6px 0; font-family: var(--titoli); font-weight: 600; font-size: clamp(22px, 1.85vw, 25px);
                  letter-spacing: -0.035em; color: var(--bianco); }
    .recenti-nota { margin: 0 0 22px 0; font-size: 12px; line-height: 1.7; color: #8FA2AB; max-width: 68ch; }
    .elenco { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); }
    .elenco li { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; justify-content: space-between;
                 padding: 13px 0; border-bottom: 1px solid #1B3D4E; }
    .elenco b { font-weight: 500; font-size: clamp(15px, 1.01vw, 15px); line-height: 1.45; color: #DCE2E4; }
    .elenco span { font-family: var(--mono); font-size: 12px; color: #8FA2AB; white-space: nowrap; }
    /* il titolo dell'elenco con accanto la legenda degli stati */
    .recenti-testa { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; }
    .legenda { display: flex; gap: 18px; margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
               text-transform: uppercase; color: #8FA2AB; }
    .legenda span { display: inline-flex; align-items: center; gap: 8px; }
    /* il pallino dello stato, con colori pensati per il fondo blu notte:
       verde che pulsa per i lavori in corso, grigio per quelli conclusi */
    .punto { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
             vertical-align: 0.08em; }
    .legenda .punto { margin-right: 0; }
    .punto-corso { background: #3FD27A; animation: vivo-scuro 1.8s ease-out infinite; }
    .punto-collaudo { background: #F2A33A; animation: vivo-scuro-arancio 1.8s ease-out infinite; }
    .punto-finito { background: #6F8591; }
    @keyframes vivo-scuro-arancio {
      0%   { box-shadow: 0 0 0 0 rgba(242, 163, 58, 0.6); }
      70%  { box-shadow: 0 0 0 7px rgba(242, 163, 58, 0); }
      100% { box-shadow: 0 0 0 0 rgba(242, 163, 58, 0); }
    }
    @keyframes vivo-scuro {
      0%   { box-shadow: 0 0 0 0 rgba(63, 210, 122, 0.6); }
      70%  { box-shadow: 0 0 0 7px rgba(63, 210, 122, 0); }
      100% { box-shadow: 0 0 0 0 rgba(63, 210, 122, 0); }
    }
    .elenco em.sr-solo { font-style: normal; }

    /* --- chiusura e piede -------------------------------------------------------- */
    .cta { background: var(--pietra); padding: clamp(40px, 5vw, 68px) var(--lato);
           display: flex; flex-wrap: wrap; gap: 26px clamp(40px, 5vw, 96px); align-items: center;
       justify-content: flex-start; }
    .cta h2 { margin: 0 0 12px 0; font-family: var(--titoli); font-weight: 600; font-size: clamp(26px, 2.52vw, 35px);
              line-height: 1.06; letter-spacing: -0.04em; color: var(--notte); max-width: 22ch; }
    .cta p { margin: 0; font-size: clamp(16px, 1.09vw, 16px); line-height: 1.6; color: var(--testo); max-width: 52ch; }
    .azioni { display: flex; flex-wrap: wrap; gap: 14px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 14px 30px;
           border-radius: 100px; font-size: 16px; font-weight: 600; text-decoration: none; box-sizing: border-box; }
    .btn-1 { background: var(--mare); color: var(--bianco); border: 1px solid var(--mare); }
    .btn-1:hover { background: var(--notte); border-color: var(--notte); color: var(--bianco); }
    .btn-2 { background: transparent; color: var(--notte); border: 1px solid var(--notte); }
    .btn-2:hover { background: var(--notte); color: var(--bianco); }
    /* --- striscia delle qualificazioni, in cima al piede ------------------------
       Il marchio CQOP SOA è quello dell'organismo che rilascia l'attestazione.
       Le norme sono scritte per esteso e non con il logo ISO: ISO consente il
       proprio logo solo a sé, ai suoi membri e ai suoi comitati tecnici, e chiede
       alle imprese certificate di citare la norma per esteso (iso.org/iso-name-and-logo).
       -------------------------------------------------------------------------- */
    .pie-qual { display: flex; flex-wrap: wrap; align-items: center; gap: 20px clamp(24px, 3vw, 44px);
                padding-bottom: clamp(26px, 3vw, 34px); margin-bottom: clamp(26px, 3vw, 34px);
                border-bottom: 1px solid #1B3D4E; }
    .pie-soa { height: clamp(40px, 4vw, 52px); width: auto; display: block; flex-shrink: 0; }
    .pag .pie-qual-vai { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; 
                           font-size: 15px; font-weight: 600; color: var(--azzurro);
                           text-decoration: underline; text-underline-offset: 3px; }
    .pag .pie-qual-vai:hover { color: var(--bianco); }
    @media (max-width: 760px) { .pag .pie-qual-vai { margin-left: 0; } }
    
    .pie { background: var(--abisso); padding: clamp(36px, 4vw, 52px) var(--lato); }
    .pie-griglia { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
              gap: 32px 40px; max-width: 1180px; }
    .pie img { height: 52px; width: auto; display: block; margin-bottom: 18px; }
    .pie-dati { font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--su-scuro); }
    .pag .pie-dati a { display: inline-flex; align-items: center; min-height: 44px; color: var(--su-scuro); }
    .pag .pie-dati a:hover { color: var(--bianco); }
    .pie h2 { margin: 0 0 14px 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
              text-transform: uppercase; color: var(--azzurro); }
    .pie-elenco { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
    .pag .pie-elenco a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: #DCE2E4; text-decoration: none; }
    .pag .pie-elenco a:hover { color: var(--azzurro); }
    .pie-coda { margin-top: 34px; padding-top: 22px; border-top: 1px solid #1B3D4E; font-family: var(--mono);
                font-size: 12px; color: #7E93A0; }

    /* ==========================================================================
       SCHERMI STRETTI
       ========================================================================== */
    @media (max-width: 1080px) {
      .testa-griglia { grid-template-columns: 1fr; align-items: start; gap: 28px; }
      .passo { grid-template-columns: 1fr; }
    }

    @media (max-width: 900px) {
      /* il menu diventa un pannello: senza JavaScript resta un elenco aperto */
      .burger { display: inline-flex; }
      .hdr { flex-wrap: wrap; }
      .nav { order: 3; width: 100%; flex-direction: column; align-items: stretch; gap: 0;
             border-top: 1px solid #23485A; margin-top: 14px; padding-top: 6px; }
      .navl, .nav-tel { font-size: 16px; padding: 14px 2px; border-bottom: 1px solid #1B3D4E; }
      .navl:hover, .navl:focus-visible, .navl[aria-current="page"] { border-bottom-color: var(--azzurro); }
      .nav-in { width: auto; height: auto; min-height: 48px; justify-content: flex-start; padding: 12px 2px; }
      .nav-in::after { content: 'LinkedIn'; font-family: var(--mono); font-size: 16px; margin-left: 12px; }
      .nav-cta { margin-top: 14px; justify-content: center; }
      html.js .hdr:not(.menu-aperto) .nav { display: none; }
      .opere { grid-template-columns: 1fr; }
      .sez-testa-cerca { align-items: stretch; margin-bottom: 64px; }
      /* il conteggio può essere lungo: va a capo invece di uscire a sinistra */
      .cerca-esito { left: 0; white-space: normal; text-align: right; }
      .cerca { width: 100%; }
      .elenco { grid-template-columns: 1fr; }
      .pie-griglia { grid-template-columns: 1fr 1fr; }
      .pie-griglia > :first-child { grid-column: 1 / -1; }
    }

    @media (max-width: 760px) {
    }

    @media (max-width: 620px) {
      /* minuteria e dati: nulla sotto i 12px, le righe di dati a 14px */
      .occhiello, .passo-occhiello, .op-occhiello { font-size: 13px; }
      .op-nota, .gal-esito, .glav, .recenti-nota, .pie-dati, .gfoto figcaption, .aggiornato, .elenco span { font-size: 14px; }
      .conto span { font-size: 12px; }
      .elenco li { flex-direction: column; align-items: flex-start; }
      /* sul telefono oggetto e committente vanno a capo, invece di uscire a destra */
      .elenco li > b, .elenco li > span { max-width: 100%; }
      .elenco span { white-space: normal; }
      .azioni { flex-direction: column; align-items: stretch; }
      .btn { width: 100%; }
      .cta { flex-direction: column; align-items: stretch; }
      .cta .azioni { width: 100%; }
      .gal-testa { align-items: flex-start; }
    }

    @media (max-width: 380px) {
      .pie-griglia { grid-template-columns: 1fr; }
      .hdr-logo img { height: 44px; }
      .conti { gap: 18px; }
    }

    /* ==========================================================================
       MOVIMENTO RIDOTTO — chi lo chiede al sistema non vede nulla muoversi.
       La galleria smette di essere un carosello e diventa una griglia ferma.
       ========================================================================== */
    @media (prefers-reduced-motion: reduce) {
      .pag *, .pag *::before, .pag *::after {
        animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
      .gpista { flex-wrap: wrap; overflow-x: visible; }
      .gfoto { max-width: min(100%, 380px); }
      .gfoto img { height: auto; width: 100%; }
      html.js .gal-cmd { display: none; }
    }