/* ==========================================================================
   FLY SYSTEM · flysystem.io
   Design system "Catalogo Italiano": carta, inchiostro, blu Fly System.
   Vanilla CSS, layer-organized. No frameworks, no external requests.
   ========================================================================== */

@layer tokens, base, components, pages;

@view-transition {
  navigation: auto;
}

/* --------------------------------------------------------------------------
   FONTS (self-hosted, Fontshare, free for commercial use)
   -------------------------------------------------------------------------- */

/* Una sola famiglia per titoli e testo: il Light regge i titoli grandi, il
   Regular il corpo, il Medium le micro-etichette maiuscole, il corsivo la
   parola in evidenza dentro i titoli. Nessun taglio dichiarato e mai usato. */
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/Switzer-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Ripiego con le stesse metriche verticali di Switzer (980/250/90 su 1000 upm).
   Senza, il carattere di sistema porta un'ascendente diversa: la parola in
   corsivo dentro il titolo allargava la riga di 2px e al caricamento del font
   la pagina saltava. Nessun download: usa font gia presenti sul dispositivo. */
@font-face {
  font-family: "Switzer Fallback";
  src: local("Segoe UI"), local("Helvetica Neue"), local("Arial"), local("Roboto");
  ascent-override: 98%;
  descent-override: 25%;
  line-gap-override: 9%;
}

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */

@layer tokens {
  :root {
    /* colore: grigi freddi, blu del logo Fly System (#304890) come unico accento.
       --muted e piu scuro del grigio proposto in bozza (#6b7280): quello si
       fermava a 4,31:1 sulla carta e 3,97:1 sulla carta alternata, sotto AA. */
    --paper: #f1f2f3;
    --paper-2: #e7e9eb;
    --ink: #14171d;
    --ink-soft: #3d434e;
    --muted: #5d6470;
    --line: color-mix(in srgb, var(--ink) 15%, transparent);
    --line-strong: color-mix(in srgb, var(--ink) 32%, transparent);
    --line-dark: color-mix(in srgb, var(--paper) 18%, transparent);
    --blu: #304890;
    --blu-deep: #223468;
    --blu-lift: #9fb0dc;
    --steel: #7d8494;
    --paper-dim: color-mix(in srgb, var(--paper) 74%, transparent);
    --error: #a33a24;

    /* tipografia: una sola famiglia, titoli in Light.

       Scala rialzata in V14. Misurando il sito contro il riferimento allo
       stesso viewport (1907px) il titolo DI SEZIONE del riferimento risultava
       piu grande del nostro HERO: 72px contro 68. Il sito non era disegnato
       male, era timido, e ogni correzione puntuale continuava ad arrivare
       come "non meglio" perche il problema era la scala, non il dettaglio.
       Il corpo del testo NON sale: alzarlo insieme ai titoli annullerebbe il
       contrasto che stiamo cercando. */
    --f-display: "Switzer", "Switzer Fallback", system-ui, sans-serif;
    --f-text: "Switzer", "Switzer Fallback", system-ui, sans-serif;
    --fs-hero: clamp(2.5rem, 6.4vw, 5.5rem);
    --fs-h2: clamp(2rem, 5vw, 4.25rem);
    --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
    --fs-body: 1.0625rem;
    --fs-fine: 0.875rem;
    --fs-eyebrow: 0.78rem;

    /* ritmo */
    --sect: clamp(104px, 13vw, 220px);
    --sect-s: clamp(64px, 8vw, 116px);
    --gap: 24px;
    --pad-x: clamp(20px, 5vw, 72px);
    /* 1360 lasciava 273px di margine morto per lato a 1907px, contro i 30px
       del riferimento. La colonna di lettura NON segue: vedi --measure. */
    --wrap-max: 1600px;

    /* misure di colonna: due sole, dichiarate. Prima ne convivevano quattro
       scollegate (820px, 620px, 34em, 21em) e la pagina cambiava larghezza
       senza motivo apparente. */
    --measure: 34em;
    --measure-wide: 46em;
    /* distanza fissa tra un paragrafo e la sua riga di CTA (era 88/40/30/25) */
    --stack-cta: 36px;
    /* altezza reale della testata appiccicosa, misurata: serve alle ancore */
    --head-h: 93px;
    /* respiro sopra le didascalie: era 10/12/14/18 sulla stessa classe */
    --fig-gap: 12px;

    /* movimento */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 250ms;
    --t-med: 400ms;
    --t-slow: 700ms;

    /* contesto (ridefiniti dalle sezioni scure) */
    --bg: var(--paper);
    --fg: var(--ink);
    --fg-soft: var(--ink-soft);
    --fg-muted: var(--muted);
    --rule: var(--line);
    --rule-strong: var(--line-strong);
    --accent: var(--blu);
    --accent-big: var(--blu);
  }

  /* Sezioni scure: il contesto si inverte, i componenti seguono. */
  .dark {
    --bg: var(--ink);
    --fg: var(--paper);
    --fg-soft: var(--paper-dim);
    --fg-muted: color-mix(in srgb, var(--paper) 52%, transparent);
    --rule: var(--line-dark);
    --rule-strong: color-mix(in srgb, var(--paper) 34%, transparent);
    --accent: var(--blu-lift);
    --accent-big: var(--blu-lift);
    background: var(--bg);
    color: var(--fg);
  }
}

/* --------------------------------------------------------------------------
   BASE
   -------------------------------------------------------------------------- */

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

  * {
    margin: 0;
  }

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

  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-text);
    font-size: var(--fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

  /* i wrapper <picture> non generano box: layout identico a un <img> diretto */
  picture {
    display: contents;
  }

  a {
    color: inherit;
  }

  main :is(p, dd, li) a:not([class]) {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

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

  ::selection {
    background: var(--blu);
    color: var(--paper);
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 1px;
  }

  .skip-link {
    position: absolute;
    inset-inline-start: var(--pad-x);
    top: -100%;
    z-index: 200;
    padding: 10px 18px;
    background: var(--ink);
    color: var(--paper);
    font-size: var(--fs-fine);
    text-decoration: none;
  }

  .skip-link:focus-visible {
    top: 12px;
  }

  /* Compensazione della testata appiccicosa per tutte le ancore. Prima era
     scroll-margin-top su [id], che copriva i soli elementi con un id (le
     didascalie, per dire, non ne hanno) ed era scritto a mano a 92px contro
     una barra alta 92,41: il titolo di destinazione finiva sotto il bordo.
     scroll-padding-top sul contenitore di scorrimento vale per ogni ancora. */
  html {
    scroll-padding-top: var(--head-h);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* --------------------------------------------------------------------------
   COMPONENTS
   -------------------------------------------------------------------------- */

@layer components {

  /* ---- struttura ---- */

  .wrap {
    max-width: var(--wrap-max);
    margin-inline: auto;
    padding-inline: var(--pad-x);
  }

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

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

  .section--alt {
    background: var(--paper-2);
  }

  .section--flush-top {
    padding-top: 0;
  }

  .rule {
    border: 0;
    border-top: 1px solid var(--rule);
  }

  /* ---- tipografia ---- */

  .h-display,
  .h2,
  .h3 {
    font-weight: 400;
    text-wrap: balance;
  }

  /* I titoli grandi vanno in Light con tracciatura stretta: e li che si sente
     la direzione. .h3 e gli altri titoli piccoli restano a 400, perche a quelle
     misure il Light si assottiglia troppo per leggersi bene sui telefoni. */
  .h-display {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: var(--fs-hero);
    line-height: 1.08;
    letter-spacing: -0.022em;
  }

  /* V14: i titoli di sezione vanno in maiuscolo come il riferimento. Tre cose
     cambiano insieme, e vanno cambiate insieme o il risultato e sbagliato: la
     tracciatura passa da negativa a leggermente positiva (la negativa serviva
     al minuscolo, sulle maiuscole impasta), l'interlinea si chiude perche le
     maiuscole non hanno discendenti, e il maiuscolo arriva dal CSS e non
     dall'HTML, cosi sorgente e lettori di schermo conservano la
     capitalizzazione vera. L'hero (.h-display) resta minuscolo col corsivo. */
  .h2 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: var(--fs-h2);
    line-height: 1.04;
    text-transform: uppercase;
    letter-spacing: 0.012em;
  }

  .h3 {
    font-family: var(--f-text);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.25;
  }

  /* enfasi selettiva in corsivo, stessa famiglia e stesso colore del testo:
     il 400 corsivo tiene contro il 300 tondo senza sembrare un altro font */
  .h-display em {
    font-family: var(--f-display);
    font-style: italic;
    font-weight: 400;
    color: inherit;
    letter-spacing: 0;
  }

  .lead {
    font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
    line-height: 1.55;
    color: var(--fg-soft);
    max-width: 34em;
    text-wrap: pretty;
  }

  /* I 20px arrivavano dalle regole di contesto (hero, bolla-feature, cta-band):
     il blocco Ingegneria di Bolla non ne aveva nessuna e il paragrafo toccava
     il titolo. Le altre quattro istanze valgono gia 20px, quindi qui cambia
     solo quella. */
  .h2 + .lead {
    margin-top: 20px;
  }

  /* Il riferimento mette in neretto il nome del prodotto dentro il paragrafo,
     non in corsivo. Serve il colore pieno: .lead vive in --fg-soft e un
     neretto su testo attenuato non si stacca. */
  .lead strong {
    font-weight: 500;
    color: var(--fg);
  }

  .body-max {
    max-width: 34em;
  }

  .fine {
    font-size: var(--fs-fine);
    color: var(--fg-muted);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  .eyebrow + :is(h1, h2, h3, .h-display, .h2, .h3) {
    margin-top: 18px;
  }

  /* ---- numero d'indice, sobrio ---- */

  .num-c {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    flex: none;
    transition: color var(--t-fast) ease;
  }

  a.index-row:hover .num-c,
  a.index-row:focus-visible .num-c {
    color: var(--accent);
  }

  /* ---- nota discreta (etichetta piccola) ---- */

  .dim {
    font-size: var(--fs-fine);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: var(--fg-muted);
  }

  /* ---- didascalia figura ---- */

  /* V14: via i numeri di figura, resta il nome della cosa. Il flex e il gap
     servivano solo a staccare "Fig. 02" dal testo, e con loro se ne va anche
     .fig b, che era la regola di quel numero. */
  .fig {
    margin-top: var(--fig-gap);
    font-size: 0.8rem;
    color: var(--fg-muted);
  }

  /* ---- bottoni ---- */

  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border: 1px solid var(--fg);
    border-radius: 0;
    background: transparent;
    color: var(--fg);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease;
  }

  .btn:hover {
    background: var(--fg);
    color: var(--bg);
  }

  .btn .arr {
    font-family: var(--f-text);
    transition: translate var(--t-fast) var(--ease-out);
  }

  .btn:hover .arr {
    translate: 4px 0;
  }

  /* link freccia testuale */
  .link-arr {
    display: inline-flex;
    background: none;
    border: 0;
    cursor: pointer;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--fg);
    border-bottom: 1px solid var(--rule-strong);
    padding-bottom: 3px;
    transition: border-color var(--t-fast) ease, color var(--t-fast) ease;
  }

  .link-arr:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  .link-arr .arr {
    transition: translate var(--t-fast) var(--ease-out);
  }

  .link-arr:hover .arr {
    translate: 4px 0;
  }

  /* Area tattile sui dispositivi touch. I 6 px di prima lasciavano i link a
     circa 29 px: sulla pagina Cataloghi erano 30 elementi sotto misura, e sono
     Sfoglia e Scarica, cioe le azioni principali della pagina. */
  @media (hover: none) {
    .link-arr,
    .jump a,
    .map-card {
      min-block-size: 44px;
      align-items: center;
      padding-block: 12px 10px;
    }

    /* Il footer non era mai stato incluso: le voci di menu misuravano 21px di
       altezza e i recapiti 28px. Il gap delle liste scende in proporzione, cosi
       il passo visivo resta quasi lo stesso invece di gonfiarsi. */
    .site-foot ul a,
    .site-foot address a,
    .spec-block dd a {
      display: flex;
      align-items: center;
      min-block-size: 44px;
    }

    /* i bersagli salgono a 44px: il gap scende in proporzione via token, cosi
       il passo visivo resta simile invece di gonfiare il footer. Scritto come
       gap diretto perdeva contro la regola base, piu avanti nel file. */
    .site-foot {
      --foot-gap: 2px;
    }

    .skip-link {
      padding-block: 12px;
    }
  }

  /* ---- header ---- */

  .site-head {
    position: sticky;
    top: 0;
    z-index: 100;
    background: transparent;
    transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
  }

  /* Testata piena, non velata. Prima c'era un blocco @supports che invertiva il
     senso del miglioramento progressivo: chi supporta backdrop-filter riceveva
     uno sfondo PIU trasparente (80%) di chi non lo supporta (92%), e Android
     prende sempre quel ramo. Con il 20% di passaggio il contenuto sottostante
     attraversava la barra, le immagini in parallasse (promosse in composizione
     da will-change) ci lasciavano una scia, e una foto scura spostava la barra
     di quasi 30 L* verso il grigio. Opaca risolve tutt'e tre le cose. */
  .site-head.is-scrolled {
    background: var(--paper);
    box-shadow: 0 1px 0 var(--line);
  }

  .site-head__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gap);
    padding-block: 22px;
  }

  .brand {
    display: block;
    text-decoration: none;
    line-height: 1.15;
  }

  /* Il lockup porta gia il marchio e la riga sponsor: niente .brand__tag sotto,
     altrimenti la testata arriverebbe a tre righe di testo. Su schermi densi
     48px logici valgono 144px reali, cioe la variante 3x a grandezza naturale,
     ed e li che la riga sponsor resta leggibile. */
  .brand__logo {
    display: block;
    block-size: 48px;
    inline-size: auto;
  }

  .brand__name {
    font-size: 1.02rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .brand__tag {
    display: block;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--muted);
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.5vw, 40px);
  }

  .site-nav a {
    position: relative;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
    padding-block: 6px;
    transition: color var(--t-fast) ease;
  }

  .site-nav a:hover {
    color: var(--ink);
  }

  .site-nav a::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    block-size: 1px;
    background: var(--blu);
    scale: 0 1;
    transform-origin: left;
    transition: scale var(--t-fast) var(--ease-out);
  }

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

  .site-nav a[aria-current="page"] {
    color: var(--ink);
  }

  /* burger */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    inline-size: 44px;
    block-size: 44px;
    padding: 10px;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    block-size: 1px;
    inline-size: 100%;
    background: var(--ink);
    transition: rotate var(--t-fast) var(--ease-out), translate var(--t-fast) var(--ease-out);
  }

  /* menu overlay mobile */
  .menu {
    position: fixed;
    inset: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--paper);
    padding: 24px var(--pad-x) calc(48px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t-med) ease, visibility 0s linear var(--t-med);
  }

  .menu.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t-med) ease;
  }

  .menu > * {
    position: relative;
    z-index: 1;
  }

  .menu__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: clamp(32px, 8vh, 80px);
  }

  .menu__close {
    display: grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--line-dark);
    border-radius: 50%;
    background: none;
    color: var(--paper);
    font-size: 1.1rem;
    cursor: pointer;
  }

  .menu nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .menu nav a {
    font-family: var(--f-text);
    font-weight: 500;
    font-size: clamp(1.9rem, 7.5vw, 2.75rem);
    line-height: 1.25;
    text-decoration: none;
    color: var(--paper);
    padding-block: 6px;
    border-bottom: 1px solid var(--line-dark);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    transition: color var(--t-fast) ease, opacity var(--t-med) var(--ease-out), translate var(--t-med) var(--ease-out);
  }

  .menu nav a:hover {
    color: var(--blu-lift);
  }

  .menu nav a .fine {
    color: var(--fg-muted);
    font-family: var(--f-text);
    font-variant-numeric: tabular-nums;
  }

  html.js .menu:not(.is-open) nav a {
    opacity: 0;
    translate: 0 14px;
  }

  .menu.is-open nav a {
    opacity: 1;
    translate: 0 0;
    transition-delay: calc(60ms * var(--i, 0) + 80ms);
  }

  .menu__contacts {
    margin-top: auto;
    padding-top: 32px;
    display: grid;
    gap: 6px;
    font-size: var(--fs-fine);
    color: var(--fg-muted);
  }

  .menu__contacts a {
    color: var(--paper);
    text-decoration: none;
  }

  /* ---- footer ---- */

  .site-foot {
    border-top: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
    background: color-mix(in srgb, var(--ink) 92%, black);
    color: var(--paper);
  }

  .site-foot__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    padding-block: var(--sect-s);
  }

  .site-foot .brand__tag {
    color: color-mix(in srgb, var(--paper) 52%, transparent);
  }

  /* Sponsorizzazione Modena FC 1912: un fatto, non un banner.
     Stessa impostazione in chi siamo (.sponsor) e nel footer (.foot-sponsor). */
  .sponsor,
  .foot-sponsor {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* Niente filetto proprio: .steps chiude gia con un border-bottom e i due
     tratti paralleli si leggevano come una doppia riga. Lo stemma va nella
     stessa colonna da 56px dei numerali, cosi il testo si incolonna esatto
     con i titoli dei passi invece di sfrangiare il bordo sinistro. */
  .sponsor {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    margin-top: var(--stack-cta);
  }

  .foot-sponsor {
    margin-top: 28px;
  }

  .sponsor img,
  .foot-sponsor img {
    inline-size: auto;
    block-size: 40px;
    flex: none;
    justify-self: center;
  }

  .sponsor span,
  .foot-sponsor span {
    display: block;
  }

  .sponsor b,
  .foot-sponsor b {
    font-weight: 500;
  }

  .sponsor .fine {
    display: block;
    margin-top: 2px;
    color: var(--fg-muted);
  }

  .foot-sponsor {
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--paper) 62%, transparent);
  }

  .foot-sponsor b {
    color: var(--paper);
  }

  .site-foot h2 {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--paper) 52%, transparent);
    margin-bottom: 18px;
  }

  .site-foot ul {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--foot-gap, 10px);
  }

  .site-foot a {
    text-decoration: none;
    color: var(--paper-dim);
    transition: color var(--t-fast) ease;
  }

  .site-foot a:hover {
    color: var(--blu-lift);
  }

  .site-foot address {
    font-style: normal;
    color: var(--paper-dim);
    display: grid;
    gap: var(--foot-gap, 10px);
  }

  .site-foot {
    overflow: hidden;
  }

  .site-foot__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    justify-content: space-between;
    padding-block: 22px;
    border-top: 1px solid var(--line-dark);
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--paper) 58%, transparent);
  }

  /* Il credito sta dentro una frase, non in un elenco: senza sottolineatura resta
     distinguibile solo per colore (WCAG 1.4.1). Stessa sottolineatura dei link
     editoriali nel contenuto, per coerenza. */
  .site-foot__legal span a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }

  /* ---- indice editoriale (righe prodotto) ---- */

  .index {
    list-style: none;
    padding: 0;
    border-bottom: 1px solid var(--rule);
  }

  .index li {
    border-top: 1px solid var(--rule);
  }

  .index-row {
    position: relative;
    display: grid;
    grid-template-columns: 56px minmax(0, 1.15fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(16px, 3vw, 48px);
    padding-block: clamp(24px, 3.6vw, 42px);
    /* passo fisso: senza, le righe la cui descrizione va a capo diventavano
       169px e le altre 126px, e l'elenco perdeva il ritmo inciso */
    min-block-size: clamp(112px, 11.5vw, 168px);
    text-decoration: none;
    color: inherit;
  }

  .index-row__title {
    font-family: var(--f-text);
    font-weight: 400;
    font-size: clamp(1.4rem, 2.8vw, 2.125rem);
    line-height: 1.12;
    letter-spacing: -0.01em;
    transition: color var(--t-fast) ease, translate var(--t-med) var(--ease-out);
  }

  .index-row:hover .index-row__title {
    color: var(--accent);
    translate: 6px 0;
  }

  .index-row__desc {
    color: var(--fg-muted);
    font-size: var(--fs-fine);
    line-height: 1.5;
    max-width: var(--measure);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .index-row__meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-soft);
    white-space: nowrap;
  }

  @media (max-width: 400px) {
    .index-row__meta {
      white-space: normal;
      min-width: 0;
    }
  }

  .index-row__meta .arr {
    transition: translate var(--t-fast) var(--ease-out);
  }

  /* ---- indice dei capitoli (cataloghi) ------------------------------------
     Era markup nudo: <ul> senza una sola regola, quindi pallini di default e
     link sottolineati sotto al titolo piu grande della pagina. */
  .jump {
    list-style: none;
    margin: 26px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
  }

  .jump a {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    padding-block: 8px;
    border-bottom: 1px solid var(--rule);
    color: var(--fg);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
  }

  .jump a:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  .jump i {
    font-style: normal;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
    color: var(--fg-muted);
  }

  /* ---- variante "dati": elenchi di modelli, non di link -------------------
     Le maiuscole automatiche rovinavano le unita di misura (m -> M, m2 -> M2,
     km/h -> KM/H): su un sito che vende precisione e un errore vero, perche
     i simboli SI sono sensibili alle maiuscole. Qui restano minuscole e le
     cifre sono tabellari, cosi i diametri si leggono incolonnati. */
  .index--data .index-row {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: start;
  }

  .index--data .index-row__title {
    align-self: center;
  }

  .index--data .index-row__desc {
    grid-column: 2;
    -webkit-line-clamp: 3;
  }

  .index-row__meta--data {
    text-transform: none;
    letter-spacing: 0.01em;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--fg-soft);
    white-space: normal;
    align-self: center;
    text-align: right;
    display: grid;
    gap: 2px;
  }

  .index-row__meta--data b {
    font-weight: 400;
    font-size: 1.15rem;
    color: var(--fg);
    letter-spacing: -0.01em;
  }

  .index-row__meta--data span {
    font-size: var(--fs-fine);
    color: var(--fg-muted);
  }

  /* miniatura del modello: da la faccia a ogni misura */
  .index-row__shot {
    grid-row: span 2;
    inline-size: clamp(84px, 11vw, 132px);
    aspect-ratio: 3 / 4;
    object-fit: cover;
    align-self: center;
  }

  .index--shots .index-row {
    grid-template-columns: 56px auto minmax(0, 1fr) auto;
    grid-template-areas:
      "num shot title meta"
      "num shot desc meta";
    row-gap: 6px;
  }

  .index--shots .num-c { grid-area: num; align-self: center; }
  .index--shots .index-row__shot { grid-area: shot; }
  .index--shots .index-row__title { grid-area: title; align-self: end; }
  .index--shots .index-row__desc { grid-area: desc; align-self: start; }
  .index--shots .index-row__meta { grid-area: meta; }

  .index-row:hover .index-row__meta .arr {
    translate: 4px 0;
  }

  .index-thumb {
    position: absolute;
    right: clamp(96px, 14vw, 220px);
    top: 50%;
    z-index: 2;
    inline-size: clamp(150px, 16vw, 230px);
    aspect-ratio: 4 / 3;
    object-fit: cover;
    translate: 0 -46%;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t-med) ease, translate var(--t-med) var(--ease-out), rotate var(--t-med) var(--ease-out);
  }

  .index-row:hover .index-thumb,
  .index-row:focus-visible .index-thumb {
    opacity: 1;
    translate: 0 -50%;
    rotate: -1deg;
  }

  @media (hover: none) {
    .index-thumb {
      display: none;
    }
  }

  /* ---- card catalogo ---- */

  .cat-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .cat-card__cover {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.375;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    overflow: hidden;
    transition: translate var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
  }

  .cat-card__cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    transition: scale var(--t-slow) var(--ease-out);
  }

  .cat-card:hover .cat-card__cover {
    /* niente sollevamento ne ombra: il movimento lo fa la sola immagine */
  }

  .cat-card:hover .cat-card__cover img {
    scale: 1.025;
  }

  .cat-card__body {
    display: grid;
    gap: 4px;
  }

  .cat-card__title {
    font-family: var(--f-text);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.25;
  }

  .cat-card__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
  }

  /* ---- form ---- */

  .field {
    display: grid;
    gap: 8px;
  }

  .field label {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-soft);
  }

  .field input,
  .field select,
  .field textarea {
    inline-size: 100%;
    padding: 13px 2px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--rule-strong);
    border-radius: 0;
    transition: border-color var(--t-fast) ease;
  }

  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-bottom-color: var(--accent);
    box-shadow: 0 1px 0 var(--accent);
  }

  .field textarea {
    resize: vertical;
    min-block-size: 120px;
  }

  .field select {
    cursor: pointer;
    appearance: none;
    background: linear-gradient(45deg, transparent 49%, var(--ink-soft) 50%) calc(100% - 14px) 55% / 7px 7px no-repeat,
      linear-gradient(-45deg, transparent 49%, var(--ink-soft) 50%) calc(100% - 7px) 55% / 7px 7px no-repeat;
  }

  .field ::placeholder {
    color: var(--muted);
    opacity: 0.7;
  }

  .check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--fs-fine);
    color: var(--fg-soft);
  }

  .check input {
    appearance: none;
    inline-size: 18px;
    block-size: 18px;
    flex: none;
    margin-top: 3px;
    border: 1px solid var(--rule-strong);
    border-radius: 1px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease;
  }

  .check input:checked {
    background: var(--ink);
    border-color: var(--ink);
  }

  .check input:checked::after {
    content: "";
    inline-size: 9px;
    block-size: 5px;
    border-inline-start: 2px solid var(--paper);
    border-block-end: 2px solid var(--paper);
    rotate: -45deg;
    translate: 0 -1px;
  }

  form.was-validated :is(input, select, textarea):invalid {
    border-bottom-color: var(--error);
  }

  .field-err {
    display: none;
    font-size: 0.8rem;
    color: var(--error);
  }

  form.was-validated :invalid ~ .field-err {
    display: block;
  }

  /* ---- FAQ (details) ---- */

  .faq {
    border-bottom: 1px solid var(--rule);
    max-width: 820px;
  }

  .faq details {
    border-top: 1px solid var(--rule);
  }

  .faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 22px;
    cursor: pointer;
    list-style: none;
    font-family: var(--f-text);
    font-weight: 500;
    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    transition: color var(--t-fast) ease;
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary:hover {
    color: var(--accent);
  }

  .faq summary::after {
    content: "+";
    display: grid;
    place-items: center;
    inline-size: auto;
    block-size: auto;
    flex: none;
    color: var(--fg-muted);
    font-family: var(--f-text);
    font-size: 1.35rem;
    font-weight: 400;
    transition: rotate var(--t-fast) var(--ease-out), background-color var(--t-fast) ease, color var(--t-fast) ease;
  }

  .faq details[open] summary::after {
    rotate: 45deg;
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
  }

  .faq details > div {
    padding-bottom: 26px;
    max-width: 40em;
    color: var(--fg-soft);
  }

  /* apertura fluida (progressivo, browser con interpolate-size) */
  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }

    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size var(--t-med) var(--ease-out), content-visibility var(--t-med) allow-discrete;
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }

  /* ---- striscia scorrevole (cataloghi teaser) ---- */

  .strip {
    display: flex;
    gap: clamp(16px, 2.5vw, 32px);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 18px;
    scrollbar-width: none;
  }

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

  .strip > * {
    flex: 0 0 clamp(180px, 22vw, 250px);
    scroll-snap-align: start;
  }

  /* ---- transizioni di pagina (cross-fade, solo browser che le supportano) ---- */

  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
      animation: none !important;
    }
  }

  /* ---- reveal on scroll (solo con JS, disattivato con reduced-motion) ---- */

  @media (prefers-reduced-motion: no-preference) {
    html.js .rv {
      opacity: 0;
      translate: 0 14px;
      transition: opacity var(--t-med) var(--ease-out), translate var(--t-med) var(--ease-out);
      transition-delay: calc(60ms * var(--i, 0));
    }

    html.js .rv.in {
      opacity: 1;
      translate: 0 0;
    }

    html.js .rv-rule {
      scale: 0 1;
      transform-origin: left;
      transition: scale var(--t-slow) var(--ease-out);
    }

    html.js .rv-rule.in {
      scale: 1 1;
    }

    html.js .rv-img img {
      scale: 1.03;
      transition: scale var(--t-slow) var(--ease-out);
    }

    html.js .rv-img.in img {
      scale: 1;
    }
  }

  /* ---- responsive: header/footer/indice ---- */

  @media (max-width: 860px) {
    .site-nav {
      display: none;
    }

    .nav-toggle {
      display: flex;
    }

    .site-foot__grid {
      grid-template-columns: 1fr;
      gap: 40px;
    }

    .index-row {
      grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .index-row__desc {
      display: none;
    }

    /* Le righe dei modelli non possono usare lo schema dei link: la stringa
       delle specifiche restava `nowrap` a ~216 px e schiacciava il titolo a
       14-66 px, cosi i nomi andavano a capo lettera per lettera. Qui titolo,
       descrizione e dati stanno incolonnati sotto la foto. */
    .index--data .index-row,
    .index--shots .index-row {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "shot title"
        "shot desc"
        "shot meta";
      align-items: start;
      row-gap: 6px;
      column-gap: 16px;
      min-block-size: 0;
    }

    .index--shots .num-c {
      display: none; /* il numero d'ordine lo da gia la sequenza delle foto */
    }

    .index--data .index-row__desc,
    .index--shots .index-row__desc {
      display: -webkit-box;
      grid-area: desc;
    }

    .index--shots .index-row__shot {
      grid-area: shot;
      inline-size: 92px;
      align-self: start;
    }

    .index--data .index-row__title,
    .index--shots .index-row__title {
      grid-area: title;
      align-self: start;
    }

    /* Su schermi molto stretti le tre colonne fisse spezzavano i valori
       dall'unita: "3,80" sopra e "m" sotto, su otto modelli. In flex a capo
       ogni valore resta intero e va a capo come blocco. */
    .index-row__meta--data {
      grid-area: meta;
      text-align: left;
      justify-self: start;
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      align-items: baseline;
    }

    .index-row__meta--data > * {
      white-space: nowrap;
    }

    .index-row__meta--data b {
      font-size: 1rem;
    }

    .num-c {
      inline-size: 30px;
      block-size: 30px;
      font-size: 0.72rem;
    }
  }
}

/* --------------------------------------------------------------------------
   PAGES
   -------------------------------------------------------------------------- */

@layer pages {

  /* ---- intestazione di sezione (eyebrow + titolo sfalsato) ---- */

  /* Il tetto era 21em, ma "em" qui vale sul corpo del testo (17px), quindi
     357 px: una misura decisa quando il titolo stava a 46 px. Portato a 68 px
     e in maiuscolo, gli stessi titoli si impilavano su quattro o cinque righe
     strette. Il riferimento ne usa due su circa 890 px. Il tetto passa quindi
     a una misura fissa in rem, e la prosa di supporto resta stretta per conto
     suo, altrimenti seguirebbe il titolo. */
  .sect-head {
    display: grid;
    gap: 18px;
    max-width: 56rem;
    margin-bottom: clamp(40px, 6vw, 72px);
  }

  .sect-head > p:not(.eyebrow) {
    max-width: var(--measure);
  }

  .sect-head--wide {
    max-width: none;
  }

  .sect-head--split {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
  }

  .sect-head--split > div {
    display: grid;
    gap: 18px;
  }

  .sect-head--split > .fine {
    max-width: 26em;
  }

  .teaser-rule {
    margin-bottom: clamp(48px, 7vw, 88px);
  }

  .dim--s {
    max-width: 360px;
  }

  .dim--push {
    margin-top: 56px;
  }

  /* ---- hero home: testo sobrio + fascia fotografica a tutta larghezza ---- */

  /* La fotografia apre la pagina, quindi niente padding sopra: la fascia
     parte subito sotto la testata, che e sticky e occupa il suo spazio nel
     flusso, per cui non si sovrappone. Il padding che stava sopra passa
     sotto, a staccare il testo dalla sezione scura che segue. */
  .hero {
    padding-block: 0 clamp(24px, 4vh, 56px);
  }

  .hero h1 {
    margin-top: 22px;
    max-width: 17em;
  }

  .hero .lead {
    margin-top: 20px;
  }

  .hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 36px;
    margin-top: 30px;
  }

  /* Margine sotto e non sopra: la fascia ora precede il testo. */
  .hero-band {
    margin: 0 0 clamp(40px, 6vw, 72px);
  }

  /* L'altezza si misura DAL BASSO della finestra, non come frazione di essa.
     74vh sembrava ragionevole e non lo era: la testata (92 px) e il margine
     sotto la fascia (72 px) non entrano nel calcolo di vh, per cui la somma
     sfondava sempre la piega di 164 px. Su un portatile 1366x768, cioe lo
     schermo piu comune, restava visibile la fotografia e NIENT'ALTRO: zero
     pixel di testo.
     Togliendo 340 px si tiene conto di testata, margine, occhiello e una riga
     di titolo, quindi la prima riga del titolo sta sopra la piega a qualsiasi
     altezza di finestra, con la seconda tagliata a fare da invito a scorrere.
     Misurato: 1,3 righe su macbook e su 1080p, 0,9 su 1366x768 dove entra in
     gioco il minimo di 300 px. La fotografia resta il 55-64% della piega.
     Il valore per telefono, piu sotto, non cambia: li si vedono gia da 2 a 6
     righe di titolo. */
  .hero-band img {
    inline-size: 100%;
    block-size: clamp(300px, calc(100vh - 340px), 760px);
    object-fit: cover;
    object-position: center 42%;
  }

  .hero-band .fig {
    margin-top: var(--fig-gap);
  }

  /* fascia fotografica riutilizzabile tra le sezioni */
  .photo-band {
    margin: 0;
  }

  /* parallasse fotografica al passaggio (CSS puro, progressivo, gated) */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* Il ritaglio va sul contenitore della SOLA fotografia, non sulla
         figure intera: la figure comprende anche la didascalia, quindi
         l'immagine ingrandita del 12% dalla parallasse finiva per coprirla.
         Misurato prima della correzione: fino a 30 px di sovrapposizione su
         una didascalia alta 21, cioe nascosta del tutto.
         Il picture e display:contents in tutto il sito (serve a far trattare
         l'img come se fosse figlia diretta): qui torna a essere un blocco
         proprio per poter ritagliare. */
      .hero-band > picture,
      .photo-band > picture,
      .cat-lead > picture {
        display: block;
        overflow: clip;
      }

      .hero-band img,
      .photo-band img,
      .cat-lead img {
        animation: band-parallax linear both;
        animation-timeline: view();
        will-change: transform;
      }

      @keyframes band-parallax {
        from {
          transform: scale(1.12) translateY(-4.2%);
        }
        to {
          transform: scale(1.12) translateY(4.2%);
        }
      }
    }
  }

  .photo-band img {
    inline-size: 100%;
    block-size: clamp(300px, 56vh, 620px);
    object-fit: cover;
  }

  .photo-band .fig {
    margin-top: var(--fig-gap);
  }

  /* ---- sezione Porte: mosaico fotografico + tipologie ---- */

  .porte-lead {
    max-width: 40em;
    margin-top: 22px;
  }

  .porte-mosaic {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.3vw, 18px);
    margin-top: clamp(36px, 5vw, 64px);
  }

  .porte-mosaic figure {
    margin: 0;
  }

  .porte-mosaic img {
    inline-size: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  .porte-mosaic .m-hotel img {
    object-position: 74% 50%;
  }

  .porte-mosaic .fig {
    margin-top: var(--fig-gap);
  }

  /* Due tessere, non piu tre. La pergola bianca sul terrazzo e uscita su
     richiesta del titolare, e con lei la griglia a tre colonne: la foto larga
     ne occupava due e la terza restava vuota. A colonna singola le due rimaste
     si impilano, la larga sopra e la fascia del montaggio sotto.
     Se ne sono andate con la tessera laterale le regole che esistevano solo per
     lei: lo span 2, il 25/32 che ne pareggiava l'altezza, e un .m-wide img che
     ripeteva il 16/10 gia dichiarato qui sotto. La classe .m-wide e sparita
     anche dal markup, perche non le restava niente da fare; .m-band resta,
     perche la fascia ha ancora un ritaglio suo. */
  .outdoor-mosaic {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(10px, 1.3vw, 18px);
    margin-top: clamp(36px, 5vw, 64px);
  }

  .outdoor-mosaic figure {
    margin: 0;
    min-width: 0;
  }

  .outdoor-mosaic img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .outdoor-mosaic .m-band img {
    aspect-ratio: 21 / 9;
    object-position: center 26%;
  }

  .outdoor-mosaic .fig {
    margin-top: var(--fig-gap);
  }

  .outdoor-video {
    margin-top: clamp(48px, 7vw, 96px);
  }

  .outdoor-video .h3 {
    margin-top: 14px;
    max-width: 22em;
  }

  .outdoor-video p:not(.eyebrow) {
    margin-top: 16px;
    max-width: 46ch;
    color: var(--fg-soft);
  }

  .tipologie {
    margin: clamp(40px, 5.5vw, 68px) 0 0;
    border-top: 1px solid var(--rule);
  }

  .tipologie > div {
    display: grid;
    grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
    align-items: baseline;
    gap: 10px clamp(20px, 4vw, 56px);
    padding-block: clamp(18px, 2.4vw, 28px);
    border-bottom: 1px solid var(--rule);
  }

  .tipologie dt {
    font-weight: 500;
    font-size: clamp(1.1rem, 1.7vw, 1.375rem);
    letter-spacing: -0.01em;
  }

  .tipologie dd {
    margin: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px clamp(24px, 4vw, 56px);
  }

  .tipologie .t-desc {
    color: var(--fg-soft);
    max-width: 34em;
  }

  .tipologie .tag {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    white-space: nowrap;
    flex: none;
  }

  .porte-cta {
    margin-top: clamp(32px, 4vw, 48px);
  }

  /* lead fotografica pagina cataloghi */
  .cat-lead {
    margin: clamp(32px, 5vw, 56px) 0 0;
  }

  .cat-lead img {
    inline-size: 100%;
    block-size: clamp(300px, 52vh, 600px);
    object-fit: cover;
  }

  @media (max-width: 720px) {
    /* La colonna singola ora e la regola di base e non piu un rimedio per il
       piccolo schermo, quindi qui resta solo il passo piu stretto. Le altre tre
       regole che stavano qui rimettevano in fila un mosaico a tre colonne che
       non esiste piu, e una tessera laterale che non esiste nemmeno. */
    .outdoor-mosaic {
      gap: 10px;
    }

    /* .outdoor-video non aveva alcuna regola sotto i breakpoint */
    .outdoor-video {
      margin-top: clamp(32px, 8vw, 56px);
    }

    .outdoor-video .video-col,
    .video-frame {
      margin-inline: auto;
    }

    .porte-mosaic {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .porte-mosaic .m-wide {
      grid-column: 1 / -1;
    }

    .porte-mosaic .m-wide img {
      aspect-ratio: 16 / 10;
    }

    .outdoor-mosaic .m-band img {
      aspect-ratio: 16 / 9;
    }

    .tipologie > div {
      grid-template-columns: 1fr;
      gap: 4px;
    }

    .tipologie dd {
      flex-direction: column-reverse;
      align-items: flex-start;
      gap: 4px;
    }

    .cat-lead img {
      block-size: clamp(240px, 44vh, 380px);
    }
  }

  /* ---- fatti reali ---- */

  /* La fascia dei quattro claim e stata tolta: era il blocco piu generico del
     sito (nessuna delle reference ne ha uno) e sul telefono diventava una 2x2
     sbilenca. I fatti ora sono una riga sotto le CTA dell'hero. */
  .hero__facts {
    margin-top: 26px;
    color: var(--fg-muted);
  }

  .facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 3vw, 48px);
    padding-block: clamp(28px, 4vw, 44px);
    border-top: 1px solid var(--rule);
  }

  .facts .dim {
    color: var(--fg-soft);
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
  }

  /* ---- griglia a vivo ----

     Il riferimento appoggia il testo a sinistra e lascia la foto uscire fino
     al bordo della finestra. Le colonne sono nominate invece di usare 100vw:
     100vw comprende la barra di scorrimento e produce overflow orizzontale su
     desktop, che e esattamente cio che il gate di verifica vieta. */

  .bleed-grid {
    display: grid;
    grid-template-columns:
      [full-start] minmax(var(--pad-x), 1fr)
      [content-start] minmax(0, calc((var(--wrap-max) - var(--pad-x) * 2) * 0.67))
      [mid] minmax(0, calc((var(--wrap-max) - var(--pad-x) * 2) * 0.33))
      [content-end] minmax(var(--pad-x), 1fr) [full-end];
    align-items: center;
  }

  .bleed-grid__testo {
    grid-column: content-start / mid;
    padding-inline-end: clamp(28px, 4vw, 72px);
  }

  /* Variante speculare: la foto esce a sinistra. Serve a far alternare il lato
     scendendo nella pagina, come fa il riferimento: con tutte le sezioni
     allineate allo stesso margine lo scorrimento diventa una ripetizione. */
  .bleed-grid--sx {
    grid-template-columns:
      [full-start] minmax(var(--pad-x), 1fr)
      [mid] minmax(0, calc((var(--wrap-max) - var(--pad-x) * 2) * 0.33))
      [content-start] minmax(0, calc((var(--wrap-max) - var(--pad-x) * 2) * 0.67))
      [content-end] minmax(var(--pad-x), 1fr) [full-end];
  }

  .bleed-grid--sx .bleed-grid__foto {
    grid-column: full-start / content-start;
  }

  .bleed-grid--sx .bleed-grid__testo {
    grid-column: content-start / content-end;
    padding-inline: clamp(28px, 4vw, 72px) 0;
  }

  .bleed-grid__foto {
    grid-column: mid / full-end;
    margin: 0;
    /* La foto tocca il bordo destro della finestra, e l'animazione di ingresso
       parte da scale 1.03: su 779 px sono ~12 px che finivano oltre il bordo e
       aprivano una barra di scorrimento orizzontale al primo caricamento.
       Il ritaglio va qui, sul contenitore che sta sul bordo. */
    overflow: clip;
  }

  /* ---- sezione Bolla (anteprima) ---- */

  .dome-fig {
    margin: 0;
  }

  .dome-fig svg,
  .dome-fig img {
    inline-size: 100%;
    height: auto;
    display: block;
  }

  /* Le fotografie delle bolle vengono da un catalogo le cui immagini sorgente
     arrivano al massimo a 344x543 px: ingrandirle oltre il riquadro attuale
     le sgranerebbe, ed e proprio la morbidezza che il cliente legge come
     "brutto". Il rapporto e fissato qui, il tetto in vh non serve piu. */
  .dome-fig img {
    aspect-ratio: 5 / 6;
    object-fit: cover;
    /* le cupole stanno nella fascia alta dello scatto: centrando, il ritaglio
       si riempiva di prato */
    object-position: 50% 32%;
  }

  /* .fig non e piu un flex (V14): il centraggio torna a essere tipografico */
  .dome-fig .fig {
    text-align: center;
    margin-top: var(--fig-gap);
  }

  .bolla-feature .h2 {
    margin-top: 18px;
  }

  .bolla-feature .lead {
    margin-top: 20px;
  }

  .bolla-feature .dim {
    max-width: 340px;
    margin-top: 40px;
  }

  .bolla-feature__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 34px;
  }

  /* ---- chi siamo ---- */

  .chi-statement {
    font-size: clamp(2.4rem, 5.5vw, 4.5rem);
    max-width: 12em;
  }

  .chi__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
    margin-top: clamp(48px, 7vw, 88px);
  }

  .chi__grid > figure {
    margin: 0;
    overflow: hidden;
  }

  .chi__grid .steps {
    margin-top: 40px;
  }

  .steps {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
  }

  .steps li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 20px;
    padding-block: 26px;
    border-top: 1px solid var(--rule);
  }

  .steps li:last-child {
    border-bottom: 1px solid var(--rule);
  }

  .steps h3 {
    font-size: 1.15rem;
    font-weight: 500;
  }

  .steps p {
    margin-top: 8px;
    color: var(--fg-soft);
    font-size: var(--fs-fine);
    line-height: 1.6;
    max-width: 30em;
  }

  /* ---- professionisti (registro editoriale, niente card) ---- */

  .prof-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(48px, 7vw, 112px);
  }

  .prof-grid > article {
    padding: clamp(22px, 3vw, 36px) 0 clamp(26px, 4vw, 44px);
    border-top: 1px solid var(--rule);
  }

  .prof-grid h3 {
    margin-top: 16px;
  }

  .prof-grid p {
    margin-top: 12px;
    color: var(--fg-soft);
    max-width: 26em;
  }

  /* Lo sfalsamento della colonna pari e stato tolto su richiesta del cliente:
     i quattro filetti cadevano a quattro altezze diverse. Ora ogni riga della
     griglia allinea i suoi due filetti, e il padding-bottom che stava qui se
     ne va con lui: serviva solo a fare spazio alla colonna spinta in basso.
     Da notare, lo sfalsamento usava `translate`, la stessa proprieta animata
     da .rv, per cui gli articoli pari restavano fermi a 51 px e non si
     rivelavano mai davvero. Ora si rivelano tutti e quattro allo stesso modo. */

  /* ---- strip cataloghi (teaser) ---- */

  .strip-card {
    display: block;
    text-decoration: none;
    color: inherit;
  }

  .strip-card__cover {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1.375;
    overflow: hidden;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    transition: translate var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
  }

  .strip-card__cover img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .strip-card:hover .strip-card__cover {
    translate: 0 -4px;
    box-shadow: 0 18px 40px color-mix(in srgb, var(--ink) 10%, transparent);
  }

  .strip-card--all {
    display: grid;
    place-items: center;
    aspect-ratio: 1 / 1.375;
    border: 1px solid var(--rule-strong);
    text-decoration: none;
    color: inherit;
    text-align: center;
    padding: 24px;
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
  }

  .strip-card--all:hover {
    background: var(--ink);
    color: var(--paper);
  }

  .strip-card--all span {
    font-family: var(--f-text);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.35;
  }

  /* ---- intestazione pagina interna ---- */

  .page-hero {
    padding-block: clamp(48px, 8vh, 110px) clamp(36px, 5vw, 64px);
  }

  .page-hero h1 {
    margin-top: 20px;
  }

  .page-hero .lead {
    margin-top: 22px;
  }

  /* `--flush` toglie il padding sotto per far salire la fotografia verso il
     titolo, ma senza questa aria il paragrafo la TOCCAVA (misurato: 0 px, con
     le lettere discendenti appoggiate sul bordo dell'immagine). */
  .page-hero--flush {
    padding-bottom: 0;
  }

  .page-hero--flush + .photo-band {
    margin-top: clamp(44px, 6vw, 84px);
  }

  .page-hero .dim {
    margin-top: 32px;
  }

  /* ---- capitoli cataloghi (binario sinistro + scaffale) ---- */

  .cat-section {
    padding-block: clamp(48px, 7vw, 88px);
  }

  .cat-section + .cat-section {
    border-top: 1px solid var(--rule);
  }

  .cat-chapter {
    display: grid;
    grid-template-columns: minmax(210px, 4fr) minmax(0, 8fr);
    gap: clamp(32px, 5vw, 88px);
    align-items: start;
  }

  .cat-rail {
    position: sticky;
    top: 104px;
    display: grid;
    gap: 16px;
  }

  .cat-rail .h2 {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  }

  .cat-rail .dim {
    max-width: 220px;
  }

  .cat-rail > p:not(.dim) {
    color: var(--fg-soft);
    max-width: 20em;
    line-height: 1.6;
  }

  .cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: clamp(28px, 4vw, 48px);
  }

  /* capitolo con un solo catalogo (Bolla): la card non si allarga a tutta riga */
  #bolla .cat-grid {
    grid-template-columns: minmax(min(230px, 100%), 380px);
  }

  .cat-card__num {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    color: var(--fg-muted);
  }

  /* ---- fascia CTA (editoriale, con arco "bolla" a destra) ---- */

  .cta-band {
    position: relative;
    overflow: hidden;
  }

  .cta-band .wrap {
    position: relative;
  }

  .cta-band .h2 {
    max-width: 15em;
  }

  .cta-band .lead {
    margin-top: 20px;
    max-width: 30em;
  }

  .cta-band .btn,
  .cta-band .cta-links {
    margin-top: var(--stack-cta);
  }

  /* ---- pagina Bolla ---- */

  .bolla-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(72px, 12vh, 150px);
  }



  .bolla-hero h1 {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: var(--fs-hero);
    line-height: 1.06;
    letter-spacing: -0.022em;
  }

  .bolla-hero .lead {
    margin-top: 28px;
  }

  .bolla-hero .wrap {
    position: relative;
  }

  .bolla-hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 40px;
  }

  .concept-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 64px);
  }

  .concept-grid > div {
    border-top: 1px solid var(--rule);
    padding-top: 24px;
  }

  .concept-grid h3 {
    margin-top: 16px;
  }

  .concept-grid p {
    margin-top: 12px;
    color: var(--fg-soft);
    font-size: var(--fs-fine);
    line-height: 1.65;
    max-width: 24em;
  }

  .spec {
    margin: 0;
    border-bottom: 1px solid var(--rule);
    max-width: 620px;
  }

  .spec > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 24px;
    padding-block: 16px;
    border-top: 1px solid var(--rule);
  }

  .spec dt {
    font-size: var(--fs-fine);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-soft);
  }

  .spec dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
    color: var(--fg-soft);
    font-weight: 500;
  }

  .note-fine {
    margin-top: 20px;
  }

  .cta-links {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
  }

  .video-feature__grid {
    display: grid;
    gap: clamp(36px, 5vw, 80px);
    align-items: center;
  }

  @media (min-width: 880px) {
    .video-feature__grid {
      grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    }
  }

  .video-frame {
    margin: 0;
    max-width: 380px;
  }

  /* Il palco tiene video e pulsante sovrapposti. Lo sfondo e carta, non quasi-nero:
     se il primo fotogramma tarda, si vede la pagina e non un lampo scuro. */
  .video-frame__stage {
    position: relative;
    overflow: clip;
    background: var(--paper-2);
  }

  .dark .video-frame__stage {
    background: color-mix(in srgb, var(--paper) 8%, transparent);
  }

  .video-frame video {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    background: transparent;
  }

  .video-frame video[hidden] {
    display: none;
  }

  /* Attesa dell'integrale: il file pesa e su rete lenta il tap sembrava cadere
     nel vuoto per oltre due secondi. La classe la mette main.js su [data-video],
     e la toglie a "playing". Solo sull'integrale: sul loop uno spinner a ogni
     scroll sarebbe rumore. */
  .is-video-loading .video-frame__stage::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 40px;
    block-size: 40px;
    margin-block-start: -20px;
    margin-inline-start: -20px;
    border: 3px solid color-mix(in srgb, var(--paper) 35%, transparent);
    border-block-start-color: var(--paper);
    border-radius: 50%;
    box-shadow: inset 0 0 0 40px color-mix(in srgb, var(--ink) 22%, transparent);
    animation: video-spin 800ms linear infinite;
    pointer-events: none;
  }

  @keyframes video-spin {
    to {
      rotate: 360deg;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .is-video-loading .video-frame__stage::after {
      animation: none;
    }
  }

  /* Affordance di avvio: compare quando Safari nega l'autoplay (risparmio energetico,
     riduci movimento, anteprime video disattivate) e sempre sul video integrale.
     E anche il modo per non dipendere dai controlli nativi al primo paint. */
  .video-frame__play {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    color: var(--paper);
    cursor: pointer;
    transition: background var(--t-fast) var(--ease-out);
  }

  .video-frame__play[hidden] {
    display: none;
  }

  .video-frame__play:hover,
  .video-frame__play:focus-visible {
    background: color-mix(in srgb, var(--ink) 30%, transparent);
  }

  /* triangolo disegnato con i bordi: nessuna immagine, nessun font di icone */
  .video-frame__play span {
    inline-size: 0;
    block-size: 0;
    border-block: 13px solid transparent;
    border-inline-start: 21px solid currentColor;
    margin-inline-start: 6px;
    filter: drop-shadow(0 1px 6px color-mix(in srgb, #000 45%, transparent));
  }

  .video-frame .fig {
    margin-top: var(--fig-gap);
  }

  .video-col {
    max-width: 380px;
  }

  .video-frame__more {
    margin-top: 14px;
  }

  /* ---- collezione Bolla: una scheda per modello -------------------------
     Prima i modelli erano righe d'indice con una miniatura da 84px e le cifre
     incolonnate a destra: impossibile confrontare due diametri. Qui ogni
     modello ha la sua foto, il numero come identificativo e le cifre in
     micro-colonne allineate, che e come si legge un listino. */

  .modelli {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: clamp(28px, 3.4vw, 48px);
  }

  /* La linea ristorazione ha cinque misure: con auto-fit ne entravano quattro
     e la 1000 restava sola su una riga tutta sua. A cinque colonne la scheda
     scende a circa 236 px, cioe SOTTO i 344 px della sorgente in catalogo:
     la collezione si legge in una riga sola e per giunta piu nitida, invece
     di ingrandire una fotografia che non lo regge. */
  @media (min-width: 1100px) {
    .modelli--cinque {
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: clamp(20px, 2vw, 30px);
    }
  }

  /* la linea glamping ha due sole voci: non devono allargarsi a tutta riga */
  .modelli--due {
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 400px));
  }

  .modello {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
  }

  .modello__foto {
    margin: 0 0 20px;
    overflow: hidden;
  }

  .modello__foto img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    display: block;
  }

  /* V14: la misura era stampata due volte per scheda, e la prima volta a
     0,72rem, piu piccola del testo corrente. Il catalogo del cliente fa
     l'opposto (pagina 6: il "650" e l'elemento piu grande della pagina), e il
     riferimento pure. Etichetta piccola sopra, numero grande sotto, una volta
     sola. */
  .modello__nome {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
  }

  .modello__eti {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  .modello__num {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 0.94;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    margin-top: 10px;
  }

  .modello__desc {
    margin-top: 10px;
    color: var(--fg-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    flex: 1;
  }

  /* le cifre si leggono in colonna, non in una stringa unica */
  .modello__dati {
    display: flex;
    gap: 26px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-variant-numeric: tabular-nums;
  }

  .modello__dati dt {
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
  }

  .modello__dati dd {
    margin: 4px 0 0;
    font-size: 1rem;
  }

  /* ---- le bolle collegate (suite con bagno) ---- */

  .collegate__foto img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    display: block;
  }

  .collegate__dati {
    border-top: 1px solid var(--rule);
  }

  /* ---- quattro garanzie ---- */

  .garanzie {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: clamp(28px, 3vw, 44px);
  }

  .garanzie li {
    border-top: 1px solid var(--rule);
    padding-top: 20px;
  }

  .garanzie__dato {
    font-family: var(--f-display);
    font-weight: 300;
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    line-height: 1.05;
    letter-spacing: -0.022em;
    font-variant-numeric: tabular-nums;
  }

  .garanzie__titolo {
    margin-top: 14px;
    font-size: 0.98rem;
    font-weight: 500;
  }

  .garanzie li p:last-child {
    margin-top: 8px;
    color: var(--fg-muted);
    font-size: 0.92rem;
    line-height: 1.6;
  }

  .bolla-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(10px, 1.5vw, 22px);
  }

  .bolla-gallery figure {
    margin: 0;
    min-width: 0;
    aspect-ratio: 3 / 4;
    overflow: clip;
  }

  .bolla-gallery .g-wide {
    grid-column: span 2;
    aspect-ratio: 3 / 2;
  }

  /* V15: tolto il finale a tutta larghezza. Assegnava la larghezza massima
     della pagina all'ultima figura qualunque essa fosse, e cioe, dopo V14,
     alla fotografia con la sorgente peggiore: un file da 710 px reso a
     1296 css, x3,65, il caso peggiore di tutto il sito. Con quattro figure
     (2+1 / 1+2) la griglia si chiude da sola senza buchi e senza bisogno di
     un finale speciale. */

  .bolla-gallery img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }

  .bolla-gallery + .fig {
    margin-top: 18px;
  }

  /* ---- pagina Contatti ---- */

  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
  }

  .spec-block {
    margin: 0;
    border-bottom: 1px solid var(--rule);
  }

  .spec-block > div {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 20px;
    padding-block: 18px;
    border-top: 1px solid var(--rule);
  }

  .spec-block dt {
    font-size: var(--fs-eyebrow);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-muted);
    padding-top: 3px;
  }

  .spec-block dd {
    margin: 0;
  }

  .spec-block dd a {
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--rule-strong);
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
  }

  .spec-block dd a:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* Era una scatola bordata che si invertiva in navy al passaggio del mouse:
     l'unico riquadro del sito. Ora e una riga come le altre della colonna. */
  .map-card {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 26px;
    color: var(--fg);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding-block: 8px;
    border-bottom: 1px solid var(--rule-strong);
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
  }

  .map-card:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  .contact-form {
    display: grid;
    gap: 26px;
  }

  .contact-form .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  /* L'invio era l'unico bottone squadrato del sito. Ora e un link come tutti
     gli altri e il filo sopra fa il lavoro che faceva la scatola. */
  .form-foot {
    display: flex;
    align-items: center;
    gap: 20px 28px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 26px;
    border-top: 1px solid var(--rule);
  }

  .form-foot .link-arr {
    font-size: 0.8rem;
    padding-block: 10px 6px;
  }

  /* ---- 404 ---- */

  .err-hero {
    min-height: 62vh;
    display: grid;
    align-content: center;
    position: relative;
    overflow: hidden;
  }

  .err-hero .wrap {
    position: relative;
  }

  .err-hero .lead {
    margin-top: 22px;
  }

  .err-hero__cta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 36px;
  }

  /* ---- responsive pagine ---- */

  @media (max-width: 960px) {
    .chi__grid {
      grid-template-columns: 1fr;
    }

    /* Sotto i 960 la griglia a vivo diventa una colonna sola e la fotografia
       passa a tutta larghezza: a due colonne su un telefono il titolo si
       spezzava una parola per riga e la foto si riduceva a una striscia. */
    .bleed-grid {
      grid-template-columns:
        [full-start] var(--pad-x)
        [content-start] minmax(0, 1fr)
        [content-end] var(--pad-x) [full-end];
      row-gap: clamp(32px, 7vw, 56px);
    }

    .bleed-grid__testo {
      grid-column: content-start / content-end;
      padding-inline-end: 0;
    }

    .bleed-grid__foto {
      grid-column: full-start / full-end;
    }

    .bleed-grid--sx {
      grid-template-columns:
        [full-start] var(--pad-x)
        [content-start] minmax(0, 1fr)
        [content-end] var(--pad-x) [full-end];
    }

    .bleed-grid--sx .bleed-grid__testo {
      padding-inline: 0;
    }

    /* Serve la stessa specificita della regola da desktop
       (.bleed-grid--sx .bleed-grid__foto): senza, quella vinceva anche qui e
       la foto restava larga quanto il solo margine, una scheggia da 20 px
       appoggiata sopra il testo. */
    .bleed-grid--sx .bleed-grid__foto {
      grid-column: full-start / full-end;
    }

    .facts {
      grid-template-columns: 1fr 1fr;
    }

    /* Il tetto di 420px centrato serviva alla vecchia impaginazione a due
       colonne. Ora .dome-fig e anche .bleed-grid__foto e deve andare da bordo
       a bordo: sopra i 414px quel tetto la riportava al centro, larga meno di
       un terzo dello schermo. Sotto i 414 non si notava perche lo schermo era
       gia piu stretto di 420. */
  }

  @media (max-width: 960px) {
    .concept-grid {
      grid-template-columns: 1fr;
    }

    .video-frame {
      max-width: 300px;
      margin-inline: auto;
    }
  }

  @media (max-width: 640px) {
    /* sui telefoni le tre cifre stanno larghe: bastano meno respiro fra loro */
    .modello__dati {
      gap: 20px;
    }
  }

  @media (max-width: 720px) {
    .bolla-gallery {
      grid-template-columns: 1fr 1fr;
    }

    .bolla-gallery figure {
      aspect-ratio: 4 / 5;
    }

    .bolla-gallery .g-wide {
      grid-column: span 2;
    }
  }

  @media (max-width: 960px) {

    .contact-grid {
      grid-template-columns: 1fr;
      gap: 56px;
    }

    .cat-chapter {
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .cat-rail {
      position: static;
    }
  }

  @media (max-width: 640px) {
    /* ritmo verticale piu compatto sui telefoni */
    :root {
      --sect: clamp(60px, 13vw, 88px);
      --sect-s: clamp(44px, 9vw, 64px);
    }

    .prof-grid {
      grid-template-columns: 1fr;
    }

    .cat-grid {
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .cat-card__actions {
      flex-wrap: wrap;
      gap: 8px 16px;
    }

    /* fasce fotografiche piu contenute: i contenuti sotto la piega si intravedono */
    .hero-band img {
      block-size: clamp(300px, 56vh, 460px);
    }

    .photo-band img {
      block-size: clamp(240px, 46vh, 400px);
    }

    .facts {
      grid-template-columns: 1fr 1fr;
      gap: 18px 24px;
      padding-block: 28px;
    }

    .contact-form .row-2 {
      grid-template-columns: 1fr;
    }

    .spec-block > div {
      grid-template-columns: 1fr;
      gap: 6px;
    }

    /* Stessa cura per la scheda tecnica di Bolla: sotto i ~350px la colonna
       del termine si riduce a una sessantina di pixel e parole come "Membrana"
       traboccavano addosso al valore. Impilate restano leggibili. */
    .spec > div {
      grid-template-columns: 1fr;
      gap: 6px;
    }

    /* Sui telefoni la colonna del numerale si mangiava oltre un quarto della
       cassa utile per due cifre, lasciando al testo 26 caratteri a 320px.
       Numerale sopra, testo a piena larghezza: e lo schema che .prof-grid usa
       gia a ogni larghezza. */
    .steps li,
    .sponsor {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .sponsor img {
      justify-self: start;
    }
  }

  /* Nota: qui c'era una regola che nascondeva .brand__tag sotto i 360px per
     alleggerire la testata. Ora la testata porta il lockup e non ha piu quel
     tag, mentre .brand__tag esiste ancora nel footer: tenerla avrebbe nascosto
     la riga sbagliata. La testata misura 92px a ogni larghezza. */
}

/* ---------- Pagina legale ----------
   L'unico posto del sito con prosa continua: tutto il resto e' titoli, schede e
   listini. Serve una misura di lettura, perche' a piena larghezza una riga di
   testo legale diventa illeggibile, e aria fra le sezioni numerate. */
.legal {
  max-width: 38em;
}
.legal h2 {
  margin-top: 2.4em;
  margin-bottom: .5em;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.legal h2:first-child {
  margin-top: 0;
}
.legal p {
  color: var(--fg-soft);
  line-height: 1.7;
  margin-bottom: .9em;
}
/* I link dentro la prosa si distinguono anche senza colore (WCAG 1.4.1): e' la
   stessa ragione per cui il credito in fondo e' sottolineato. */
.legal a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}