/* =========================================================================
   PROLAB — Landing v1
   Statico, mobile-first, vanilla CSS. Nessun framework, nessun build step.
   Font placeholder: vedi fonts/manrope.css (in attesa del font ufficiale).
   ========================================================================= */

@import url('../fonts/manrope.css');

/* ----------------------------- Design tokens ---------------------------- */
:root {
  /* Palette brand (vedi prompt). Lime = accento/CTA, mai testo piccolo su chiaro. */
  --lime:        #C5FF00;
  --blue:        #427697; /* blu primario istituzionale */
  --blue-mid:    #4D83A2;
  --blue-light:  #91C9CA; /* highlight / hover */
  --blue-grey:   #5B7F95; /* testi secondari / payoff */
  --ink:         #2D2926; /* nero brand — testo principale */
  --ink-logo:    #121617; /* nero logo — fondi scuri */

  /* Derivati / superfici */
  --bg:          #ffffff;
  --bg-tint:     #f4f8f9;  /* sfondo tenue blu chiaro */
  --bg-tint-2:   #eaf2f3;
  --border:      #dbe6e9;
  --white:       #ffffff;

  /* Tipografia */
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Layout */
  --maxw: 1120px;
  --pad: 1.25rem;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(45, 41, 38, 0.08);
  --shadow-strong: 0 18px 50px rgba(18, 22, 23, 0.18);

  /* Sticky offsets */
  --header-h: 72px;
}

/* ------------------------------- Reset ---------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  /* spazio per l'header sticky */
  scroll-padding-top: calc(var(--header-h) + 8px);
}
/* ⚠ `hidden` DEVE vincere, e da solo non vince: `[hidden] { display: none }` e' una
   regola dello USER AGENT, quindi ha specificita' ZERO, e qualunque selettore con una
   classe che dichiari `display` la batte. Non e' teoria: e' il motivo per cui il sito di
   PRODUZIONE ha mostrato l'avviso «ambiente di prova» - l'attributo c'era, e
   `.form-notice { display: flex }` lo scavalcava - ed e' lo stesso difetto che aveva
   riportato in vita i campi vuoti del titolare in footer (v. il commento piu' sotto).
   La riga sta QUI, una volta, nel reset, e non come un `:not([hidden])` da ricordare in
   ogni regola futura che dichiari `display`: la riga qui sotto su img/svg/video e' la
   prossima che sarebbe inciampata. !important e' la forma standard di questa riga
   (HTML5 Boilerplate): `hidden` significa nascosto, non «nascosto salvo pareri». */
[hidden] { display: none !important; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-mid); }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------ Helpers --------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.eyebrow {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: .65rem;
}
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section--tint { background: var(--bg-tint); }
.section__title { font-size: clamp(1.5rem, 4.5vw, 2.25rem); max-width: 26ch; }
.lead { color: var(--blue-grey); font-size: 1.05rem; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit; font-weight: 700; font-size: 1rem; line-height: 1;
  padding: .95rem 1.5rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .12s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px); }
/* CTA lime con testo scuro — ok per contrasto */
.btn--primary { background: var(--lime); color: var(--ink-logo); }
.btn--primary:hover { background: #b3e800; color: var(--ink-logo); }
.btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { border-color: var(--lime); color: var(--lime); }
.btn--dark { background: var(--ink-logo); color: var(--white); }
.btn--dark:hover { background: #000; color: var(--lime); }

/* =============================== Header ================================= */
.header {
  position: sticky; top: 0; z-index: 900;
  background: var(--ink-logo);
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header__inner {
  min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-block: .6rem;
}
/* Lockup header: emblema (1:1, senza box) + wordmark testuale + payoff */
.brand { display: flex; align-items: center; gap: .6rem; min-width: 0; flex-shrink: 0; white-space: nowrap; }
.brand__logo { height: 44px; width: auto; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__word {
  font-family: var(--font); font-weight: 800; text-transform: uppercase;
  font-size: 1.25rem; letter-spacing: -0.02em; color: var(--white);
}
.brand__word-accent { color: var(--lime, #C5FF00); }
.brand__sub {
  display: none; margin-top: .22rem; font-size: .62rem; color: var(--blue-light);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}
.header__nav { display: none; }
.header__nav a {
  color: rgba(255,255,255,.82); font-weight: 600; font-size: .95rem;
  padding: .4rem .2rem; border-bottom: 2px solid transparent;
}
.header__nav a:hover { color: var(--white); border-color: var(--lime); }
.header__actions { display: flex; align-items: center; gap: .6rem; }

/* Language toggle */
.lang-toggle {
  display: inline-flex; border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  overflow: hidden; background: rgba(255,255,255,.04);
}
.lang-toggle button {
  font-family: inherit; font-weight: 700; font-size: .82rem;
  padding: .42rem .7rem; border: 0; background: transparent; color: rgba(255,255,255,.7);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
.lang-toggle button[aria-pressed="true"] { background: var(--lime); color: var(--ink-logo); }

.nav-cta { display: none; }

/* =============================== Hero =================================== */
.hero {
  position: relative; color: var(--white);
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(145,201,202,.22), transparent 60%),
    linear-gradient(160deg, var(--ink-logo) 0%, #1c2a33 55%, var(--blue) 140%);
  overflow: hidden;
}
/* Slideshow di sfondo: le tre slide sono sovrapposte e solo .is-active sta a
   opacity 1; il gradiente di .hero resta sotto come fallback di colore.
   Con prefers-reduced-motion il crossfade sparisce (regola * in fondo al file)
   e js/main.js non fa ruotare le slide. */
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; transition: opacity 1.2s ease-in-out;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Overlay scuro: garantisce il contrasto del testo bianco/lime sopra le foto.
   Le tre hero sono gia' scatti in penombra, quindi basta poco: su mobile una
   velatura uniforme (il testo occupa tutta la larghezza), da 768px in su un
   gradiente orizzontale che carica il lato sinistro — dove stanno titolo e
   CTA — e lascia leggibile la foto a destra. */
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(18, 22, 23, .52);
}
.hero__inner {
  position: relative; z-index: 2;
  /* padding-block, non lo shorthand: `padding: X 0 Y` azzerava il
     padding-inline di .container e sotto i 1120px il testo finiva a filo
     del bordo (sopra la foto e' ancora piu' evidente). */
  padding-block: clamp(2.5rem, 8vw, 5rem) clamp(2.5rem, 6vw, 4rem);
  min-height: clamp(440px, 68vh, 660px);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__eyebrow { color: var(--lime); }
.hero__title {
  font-size: clamp(1.9rem, 6.5vw, 3.4rem); max-width: 18ch; margin-bottom: 1rem;
}
.hero__subtitle { color: #d6e6ea; font-size: clamp(1rem, 2.6vw, 1.2rem); max-width: 46ch; margin-bottom: 1.8rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Media placeholder */
.media-ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background:
    linear-gradient(135deg, rgba(145,201,202,.18), rgba(66,118,151,.10)),
    var(--bg-tint-2);
  border: 1.5px dashed var(--blue-light);
  border-radius: var(--radius-lg);
  color: var(--blue-grey); font-weight: 700; letter-spacing: .03em;
  min-height: 200px; padding: 1.5rem;
}
.media-ph::before {
  content: "▣"; font-size: 1.6rem; margin-right: .6rem; color: var(--blue-mid); opacity: .7;
}
.hero .media-ph {
  margin-top: 2.2rem; min-height: 220px; color: #cfe6ea;
  background: linear-gradient(135deg, rgba(145,201,202,.18), rgba(66,118,151,.18));
  border-color: rgba(145,201,202,.5);
}
.hero .media-ph::before { color: var(--blue-light); }

/* Figure foto/segnaposto: frame arrotondato con ritaglio object-fit */
.media-figure { margin: 0; }
.media-figure__frame {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); background: var(--bg-tint-2);
}
.media-figure__frame img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; border-radius: var(--radius-lg);
}
.media-figure .slot-badge {
  position: absolute; top: .6rem; left: .6rem;
  background: rgba(18, 22, 23, .72); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 999px; backdrop-filter: blur(2px);
}
.media-figure figcaption {
  margin-top: .5rem; text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--blue-grey);
}
/* Foto mostrate INTERE, senza alcun ritaglio: l'immagine tiene il proprio
   ratio naturale e `object-fit` non ha nulla da tagliare. Usata da chi-siamo
   e allenamento, le cui sorgenti sono verticali (4:5): con il 16:9 di default
   il cover ne mostrava solo una striscia centrale. */
.media-figure--natural .media-figure__frame img { aspect-ratio: auto; height: auto; }
/* Banner di sezione a tutta larghezza (sala Technogym). */
.media-figure--banner { margin-top: 1.8rem; }
.media-figure--banner .media-figure__frame img { aspect-ratio: 16 / 9; }

/* ============================ Generic blocks ============================ */
.prose p { max-width: 68ch; }
.prose p:last-child { margin-bottom: 0; }
.grid { display: grid; gap: 1.1rem; }

.media-split { display: grid; gap: 1.6rem; align-items: center; }

/* Cards */
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow); height: 100%;
}
.card h3 { font-size: 1.15rem; }
.card__kicker {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--blue); margin-bottom: .5rem;
}
.card p { color: var(--ink); margin-bottom: 0; }

/* Area cards (Cosa facciamo) — foto in testa, accento lime sul numero.
   Le tre foto hanno lo stesso trattamento e lo stesso ratio (4:3, cover). */
.area-card {
  position: relative; padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.area-card__media { position: relative; }
.area-card__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.area-card__body { padding: 1.3rem 1.4rem 1.4rem; }
.area-card .num {
  position: absolute; top: .75rem; left: .75rem;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: var(--lime); color: var(--ink-logo);
  font-weight: 800; font-size: .9rem; box-shadow: var(--shadow);
}

/* Audience list */
.audience-list { display: grid; gap: .9rem; }
.audience-item {
  display: flex; gap: .9rem; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.audience-item .tick {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center; font-size: .85rem; font-weight: 800;
  margin-top: .1rem;
}
.audience-item h3 { font-size: 1.02rem; margin-bottom: .25rem; }
.audience-item p { margin: 0; color: var(--blue-grey); font-size: .96rem; }

/* Service cards */
.service-card { display: flex; flex-direction: column; }
.service-card__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.service-card h3 { font-size: 1.2rem; margin: 0; }
.badge-duration {
  flex: 0 0 auto; font-size: .76rem; font-weight: 800; letter-spacing: .03em;
  background: var(--ink-logo); color: var(--lime); padding: .3rem .6rem; border-radius: 999px; white-space: nowrap;
}
.service-card__body { color: var(--ink); margin-bottom: 1rem; }
.service-card__target {
  margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--border);
  font-size: .92rem; color: var(--blue-grey);
}
.service-card__target strong { color: var(--ink); }

/* Tech section (scura) */
.tech { background: linear-gradient(160deg, var(--ink-logo), #1b2a31); color: #e8f2f4; }
.tech .eyebrow { color: var(--lime); }
.tech .section__title { color: #fff; }
.tech p { color: #cfe0e4; }

/* Final CTA — foto del centro a tutta sezione con overlay scuro.
   Il testo passa a bianco e la CTA al lime (contrasto pieno su fondo scuro). */
.final-cta {
  position: relative; overflow: hidden;
  background: var(--ink-logo); color: var(--white);
  text-align: center;
}
.final-cta__bg { position: absolute; inset: 0; display: block; z-index: 0; }
.final-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.final-cta__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(18, 22, 23, .74), rgba(18, 22, 23, .60));
}
.final-cta .container { position: relative; z-index: 2; }
.final-cta .section__title { color: var(--white); max-width: 24ch; margin-inline: auto; }
.final-cta p { color: #dfeaec; max-width: 50ch; margin-inline: auto; font-size: 1.1rem; }
.final-cta .btn { margin-top: 1.4rem; }

/* ============================== Form ==================================== */
.contact { background: var(--bg-tint); }
.form-notice {
  display: flex; gap: .7rem; align-items: flex-start;
  background: #fff7d6; border: 1px solid #f0dd8a; color: #6b5b14;
  padding: .9rem 1.1rem; border-radius: var(--radius); font-weight: 600; font-size: .95rem;
  margin-bottom: 1.4rem;
}
.form-notice::before { content: "⚠"; font-size: 1.1rem; line-height: 1.3; }
.contact-form {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: clamp(1.3rem, 4vw, 2rem); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .4rem; color: var(--ink); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .8rem .9rem; border: 1.5px solid var(--border); border-radius: 10px; background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(66,118,151,.15);
}
.form-row { display: grid; gap: 1.05rem; }
/* Presa visione dell'informativa: sta SOPRA il pulsante, dove si legge prima
   di premere e non dopo. Non e' una checkbox (v. il commento in index.html). */
.form-consent {
  margin: .2rem 0 0; font-size: .88rem; color: var(--blue-grey); line-height: 1.5;
}
.form-consent a { color: var(--blue-mid); text-decoration: underline; }
.form-consent a:hover { color: var(--ink); }
.contact-form .btn { width: 100%; margin-top: .3rem; }
.form-feedback {
  margin-top: .9rem; text-align: center; font-weight: 700; color: var(--blue-mid);
  min-height: 1.2em;
}

/* ============================== Footer ================================== */
.footer { background: var(--ink-logo); color: #cfd9dc; padding: 2.6rem 0 2rem; }
.footer__inner { display: grid; gap: 1.6rem; }
.footer__brand { display: flex; flex-direction: column; gap: .7rem; }
/* ⚠ .png e NON .svg, ed e' il fix di due difetti in una riga.
   I tre SVG del marchio (color, grayscale, white) portano DENTRO un <rect>
   di fondo nero a piena tela - 12 per file, x=-500 y=-500 6000x6000, opacita'
   0.949 - quindi non sono trasparenti: sono il logo su un riquadro nero. Nel
   footer, su #121617, quel riquadro si vedeva. I PNG gemelli sono invece
   RGBA con gli angoli a alpha 0: stesso disegno, nessun fondo.
   ⚠ E l'altezza sale da 38px a 44px, la stessa di .brand__logo: l'asset e'
   quadrato (1600x1600), mentre l'HTML dichiarava width="135" height="38" -
   una proporzione da wordmark che quell'immagine non ha mai avuto. Con
   width:auto il footer rendeva un quadratino da 38px. */
/* ⚠ LARGHEZZA ESPLICITA, non `auto`, e align-self: flex-start.
   .footer__brand e' un flex in COLONNA, quindi il suo asse trasversale e'
   ORIZZONTALE e align-items vale `stretch` per default: un'immagine con
   width:auto viene tirata fino alla larghezza del contenitore mentre
   l'altezza resta 44px, e con l'object-fit di default (`fill`) il risultato
   e' il logo schiacciato in una striscia. Non c'entrano gli attributi
   width/height dell'<img>: quelli dicono la proporzione, non la impongono.
   Una larghezza definita toglie al flex la possibilita' di stirare, e
   flex-start la toglie anche a un futuro width:auto.
   ⚠ L'header non aveva il problema perche' .brand e' un flex in RIGA con
   align-items:center: li' lo stretch agirebbe sull'altezza, che e' fissa. */
.footer__logo { height: 44px; width: 44px; align-self: flex-start; }
.footer__sub { color: var(--blue-light); font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; }
.footer__legal h4 { color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7rem; }
.footer__legal a { color: #cfd9dc; display: inline-block; padding: .2rem 0; }
.footer__legal a:hover { color: var(--lime); }
/* Titolare del trattamento. La riga la scrive js/privacy-render.js e resta
   nascosta finche' i dati sono segnaposto: nessun TODO_PRIVACY_ in pagina.
   ⚠ I separatori li mette il CSS fra due voci ENTRAMBE visibili - la PEC puo'
   non esistere, e un « · » sospeso in fondo sarebbe il segno che manca
   qualcosa che invece non c'e' per scelta. */
.footer__owner {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: .4rem; padding-top: 1.2rem;
  font-size: .82rem; color: #b3c2c6; line-height: 1.8;
}
.footer__owner a { color: #cfd9dc; text-decoration: underline; }
.footer__owner a:hover { color: var(--lime); }
/* ⚠ :not([hidden]) NON e' decorativo. `[hidden] { display: none }` e' una regola dello
   user agent, quindi ha specificita' zero: senza il :not, questo selettore la batte e i
   campi che il JS ha nascosto (la PEC che non esiste) tornerebbero visibili, con la loro
   etichetta e il valore vuoto. E' successo, e l'ha visto la verifica in browser. */
.footer__owner [data-owner-item]:not([hidden]) { display: inline; }
.footer__owner [data-owner-item]:not([hidden]) + [data-owner-item]:not([hidden])::before {
  content: "·"; color: #6d7d82; margin: 0 .45rem;
}
.footer__note {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: .4rem; padding-top: 1.2rem;
  font-size: .82rem; color: #93a4a9;
}
/* ⚠ Quando la riga del titolare c'e', il bordo lo porta lei: due filetti
   sovrapposti a distanza di una riga sono un errore visibile. */
.footer__owner:not([hidden]) + .footer__note { border-top: 0; padding-top: .4rem; }

/* Pagine legali: i documenti veri stanno altrove (su Iubenda, o - per
   l'inglese - in privacy-policy-en.html) e ci si arriva con un link. Non c'e'
   piu' alcun embed: la landing non carica JavaScript di terzi. */
.legal-links { list-style: none; margin: 1.2rem 0 .8rem; padding: 0; display: grid; gap: .55rem; }
.legal-link { font-weight: 700; text-decoration: underline; }
.legal-link:hover { color: var(--blue-mid); }
/* ⚠ QUI C'ERA UNA FRECCIA ↗ sui link che lasciano il sito, generata da un
   ::after con un escape CSS. L'escape era scritto male e in pagina finiva un
   carattere di CONTROLLO (U+0011) seguito dal letterale "97": su una pagina
   legale il testo del link all'informativa si leggeva con due caratteri di
   spazzatura in coda.

   Non e' stata rimessa a posto, e' stata TOLTA. Un glifo decorativo che
   dipende da un escape, dalla copertura del font (Manrope non arriva a
   U+2197: si sarebbe ricaduti su un font di sistema) e dal rendering del
   browser e' esattamente cio' che non si mette su una pagina legale. Il
   fatto che il link porti fuori dal sito lo dice gia' .legal-hint a parole,
   che e' anche l'unica forma che uno screen reader legge. */
.legal-hint { font-size: .85rem; color: var(--blue-grey); margin-bottom: 1.6rem; }

/* privacy-policy-en.html: l'unico documento lungo del sito. Gerarchia di
   titoli e liste, che altrove non servono perche' altrove non c'e' prosa
   strutturata. Misura di riga la stessa di .prose p: 68ch. */
.legal-doc h2 { font-size: 1.3rem; margin-top: 2.4rem; }
.legal-doc h3 { font-size: 1.02rem; margin-top: 1.7rem; color: var(--blue); }
.legal-doc li, .legal-doc dd { max-width: 68ch; }
.legal-doc ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.legal-doc li { margin-bottom: .4rem; }
.legal-doc dt { font-weight: 700; margin-top: 1.1rem; }
.legal-doc dd { margin: .25rem 0 0; }
/* L'avvertenza di traduzione: sta in testa al documento e deve leggersi
   PRIMA del documento, non insieme ad esso. */
.legal-disclaimer {
  background: var(--bg-tint); border-left: 4px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: .9rem 1.1rem; margin: 1.2rem 0 1.8rem;
  font-weight: 600; max-width: 68ch;
}
.legal-disclaimer .legal-link { display: inline-block; margin-top: .4rem; }

/* ============================ Responsive ================================ */
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .brand__sub { display: block; }
}
@media (min-width: 768px) {
  .brand__logo { height: 52px; }
  .brand__word { font-size: 1.4rem; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .media-split { grid-template-columns: 1.1fr .9fr; }
  .media-figure--banner .media-figure__frame img { aspect-ratio: 21 / 9; }
  .hero__overlay {
    background: linear-gradient(90deg,
      rgba(18, 22, 23, .74) 0%,
      rgba(18, 22, 23, .58) 40%,
      rgba(18, 22, 23, .22) 100%);
  }
  .media-split.media-split--rev > :first-child { order: 2; }
  .footer__inner { grid-template-columns: 1.4fr 1fr; align-items: start; }
  .footer__owner { grid-column: 1 / -1; }
  .footer__note { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .header__nav { display: flex; align-items: center; gap: 1.4rem; }
  .nav-cta { display: inline-flex; }
  .grid--services { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { padding-block: 5.5rem 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}