/* Foglio di stile del sito ARES.
 *
 * Due strati, e l'ordine conta.
 *
 * 1. STRATO STORICO — le regole delle pagine interne (azienda, competenze,
 *    modello operativo, tecnologia, contatti, note legali, privacy). Restano
 *    perche' quelle pagine esistono, sono nella sitemap e nel piede legale, e
 *    l'integrazione del nuovo disegno non doveva cancellarle.
 *
 * 2. STRATO NUOVO — la direzione creativa approvata in
 *    docs/prototipi/corporate-v2/. Viene DOPO di proposito: dove i due strati
 *    dichiarano la stessa cosa (body, :root, a, img) vince il nuovo, e le
 *    pagine interne ereditano palette e tipografia senza essere riscritte.
 *
 * Il rumore di fondo del prototipo era un data: URI: la CSP del sito dichiara
 * img-src 'self' e non data:, quindi sarebbe stato bloccato. Stesso disegno,
 * servito da /assets/rumore.svg.
 */

/* ====================== 1. STRATO STORICO ====================== */

/* ARES srls — sistema visivo derivato dal marchio ufficiale.
   I due colori portanti sono MISURATI sul logo, non scelti:
   #11335B e' il blu dominante dei pixel opachi, #C89A4C l'oro del vertice. */

:root {
  --navy-900: #0b1f38;
  --navy-700: #11335b; /* blu del marchio */
  --navy-500: #1d5390;
  --navy-300: #6f8db3;
  --oro-500: #c89a4c;  /* oro del vertice */
  --oro-300: #e0bd82;
  --sabbia: #f4f1ea;
  --carta: #ffffff;
  --inchiostro: #16202e;
  --inchiostro-soft: #475569;
  --linea: #d9dee6;
  --linea-scura: rgba(255, 255, 255, 0.16);

  --testo: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
           Helvetica, Arial, 'Noto Sans', sans-serif;

  --misura: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --larghezza: 1180px;
  --ritmo: clamp(4.5rem, 9vw, 8rem);
  --raggio: 3px;
  /* Il colore dell'anello di fuoco viaggia col FONDO, non con l'elemento: e' la
     superficie a sapere se e' scura, e ogni discendente lo eredita. Prima era una
     lista di nomi di classe ripetuta in tre punti — e i tre erano gia' diversi
     fra loro. */
  --fuoco: var(--navy-900);
  --uscita: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scrollbar-color: var(--navy-300) var(--sabbia);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--testo);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--navy-700); color: #fff; }
:where(a, button, input, textarea, summary) { caret-color: var(--navy-500); }

main:focus { outline: none; }
main:focus-visible { outline: 2px solid var(--oro-500); outline-offset: -4px; }

/* L'anello di fuoco deve fare almeno 3:1 contro cio' che ha intorno
   (WCAG 2.2 SC 1.4.11), e il colore si sceglie dal FONDO, non dal marchio.
   Misurato: l'oro #C89A4C fa 2.57:1 su bianco e 1:1 sul bottone dorato — un
   anello che c'e' e non si vede. Il navy fa 16.1:1 su bianco. */
.su-scuro { --fuoco: var(--oro-300); }

:where(a):focus-visible,
:where(button):focus-visible,
:where(summary):focus-visible {
  outline: 2px solid var(--fuoco);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
  color: var(--navy-900);
}
h1 { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 4.25rem); letter-spacing: -0.032em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem); letter-spacing: -0.028em; }
h3 { font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem); letter-spacing: -0.015em; }
p {
  margin: 0 0 1.1em;
  max-width: var(--misura);
  text-wrap: pretty;
  /* Una parola piu' larga della colonna trabocca dal CONTENUTO senza che alcun
     riquadro superi il bordo: e' la forma che due sonde non vedevano. Qui e'
     capitato con un marcatore da 30 caratteri, ma vale per un indirizzo email o
     un URL in una riga di prosa. */
  overflow-wrap: break-word;
}
:where(h1, h2, h3, h4) + p { margin-top: 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--navy-500); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--navy-700); text-decoration-thickness: 2px; }
.su-navy a { color: var(--oro-300); }
.su-navy a:hover { color: #fff; }

img { max-width: 100%; height: auto; }

/* ---------- impalcatura ---------- */

.salta {
  /* Fuori campo in VERTICALE, non a sinistra: un left negativo allarga il riquadro
     del documento e si presenta come un elemento oltre il bordo. */
  position: absolute;
  left: 0;
  top: -4rem;
  z-index: 100;
  background: var(--navy-900);
  color: #fff;
  padding: 0.85rem 1.25rem;
  font-weight: 600;
}
.salta:focus { top: 0; }

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

.sezione { padding-block: var(--ritmo); }
.sezione--stretta { padding-block: clamp(3rem, 6vw, 5rem); }
.su-navy { background: var(--navy-900); color: #e7edf5; }
.su-navy h2, .su-navy h3 { color: #fff; }
.su-sabbia { background: var(--sabbia); }

/* Il filo d'oro cita il vertice del marchio: e' l'unico posto in cui l'oro
   compare a piena saturazione, e vale come apertura di sezione. */
.filo {
  display: block;
  width: 64px;
  height: 3px;
  background: var(--oro-500);
  margin-bottom: 1.75rem;
}

/* ---------- testata ---------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--linea);
}
@supports (backdrop-filter: blur(6px)) {
  .testata { backdrop-filter: blur(10px) saturate(1.4); }
}

.testata__riga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 86px;
}

.marchio { display: inline-flex; align-items: center; text-decoration: none; }
.marchio img { display: block; width: auto; height: 44px; }
@media (min-width: 900px) { .marchio img { height: 54px; } }

.nav-primaria ul {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-primaria a {
  display: inline-block;
  padding: 0.4rem 0;
  color: var(--inchiostro);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-primaria a:hover { color: var(--navy-700); border-bottom-color: var(--oro-500); }
.nav-primaria a[aria-current='page'] { color: var(--navy-700); border-bottom-color: var(--navy-700); }

.apri-nav {
  display: none;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  min-height: 44px;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-900);
  background: transparent;
  border: 1px solid var(--linea);
  border-radius: var(--raggio);
  cursor: pointer;
}
.apri-nav:hover { border-color: var(--navy-500); }
.apri-nav svg { display: block; }

@media (max-width: 899px) {
  .apri-nav { display: inline-flex; }
  /* Chiusa per difetto sotto la soglia, aperta da una CLASSE. Senza JavaScript
     resta chiusa e il ripiego e' la navigazione nel piede; sopra la soglia questo
     blocco non si applica affatto, quindi la navigazione c'e' comunque. */
  .nav-primaria {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--carta);
    border-bottom: 1px solid var(--linea);
    box-shadow: 0 18px 34px -22px rgba(11, 31, 56, 0.45);
  }
  .nav-primaria.aperta { display: block; }
  .nav-primaria ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
  }
  .nav-primaria li + li { border-top: 1px solid var(--linea); }
  .nav-primaria a {
    padding: 0.95rem 0;
    font-size: 1.05rem;
    border-bottom: none;
    border-left: 2px solid transparent;
    padding-left: 0.75rem;
  }
  .nav-primaria a[aria-current='page'] { border-left-color: var(--navy-700); }
}

/* ---------- apertura ---------- */

.apertura {
  position: relative;
  overflow: hidden;
  background: var(--navy-900);
  color: #e7edf5;
  isolation: isolate;
}
.apertura__strati {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0.75;
}
.apertura__contenuto {
  padding-block: clamp(4rem, 11vw, 8.5rem);
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 980px) {
  .apertura__contenuto { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}
.apertura h1 { color: #fff; }
.apertura__occhio { max-width: 30rem; font-size: 1.15rem; color: #c6d3e4; margin-top: 1.75rem; }
.apertura__marchio { justify-self: center; }
.apertura__marchio img {
  /* Il marchio ritagliato dall'asset ufficiale e' largo 215px: oltre quella
     misura si ingrandirebbe un raster e si vedrebbe. Nessun vettore esiste. */
  width: clamp(170px, 22vw, 215px);
}

.azioni { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.5rem; }

.bottone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--raggio);
  border: 1px solid transparent;
  transition: background-color 0.2s var(--uscita), border-color 0.2s var(--uscita),
              transform 0.2s var(--uscita);
}
.bottone--pieno { background: var(--oro-500); color: var(--navy-900); }
.bottone--pieno:hover { background: var(--oro-300); color: var(--navy-900); transform: translateY(-1px); }
.bottone--filo {
  /* `background: transparent` NON e' ridondante: su un <button> lo sfondo
     predefinito dell'agente utente e' un grigio chiaro, e il testo bianco di
     questa variante ci finisce sopra. Finche' la classe stava solo su <a> il
     difetto non poteva vedersi. Misurato: rgb(255,255,255) su rgb(239,239,239). */
  background: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.bottone--filo:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ---------- blocchi di contenuto ---------- */

.intestazione-sezione { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.intestazione-sezione p { font-size: 1.1rem; color: var(--inchiostro-soft); }
.su-navy .intestazione-sezione p { color: #b9c8dc; }

.definizioni {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
}
@media (min-width: 760px) { .definizioni { grid-template-columns: repeat(3, 1fr); } }
.definizioni > div {
  padding: 2rem 0;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 760px) {
  .definizioni > div { padding: 2.25rem clamp(1.25rem, 2.5vw, 2rem) 2.25rem 0; }
  .definizioni > div + div { border-left: 1px solid var(--linea); padding-left: clamp(1.25rem, 2.5vw, 2rem); }
}
.definizioni h3 { margin-bottom: 0.7rem; }
.definizioni p { color: var(--inchiostro-soft); font-size: 0.98rem; }
.su-navy .definizioni { border-color: var(--linea-scura); }
.su-navy .definizioni > div { border-color: var(--linea-scura); }
.su-navy .definizioni p { color: #b9c8dc; }

/* elenco delle aree: righe larghe, non schede */
.aree { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.aree li {
  display: grid;
  gap: 0.65rem 2.5rem;
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 860px) {
  /* 18rem, non 15: "Amministrazione" e' una parola sola da 253px e a 240 traboccava
     dalla propria colonna senza che alcun riquadro superasse il bordo della pagina. */
  .aree li { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); align-items: start; }
}
.aree h3 { color: var(--navy-700); }
.aree p { color: var(--inchiostro-soft); margin: 0; }

/* processo: la sequenza porta informazione, quindi l'ordinale e' leggibile */
.processo { margin: 0; padding: 0; counter-reset: passo; display: grid; gap: 0; }
@media (min-width: 900px) { .processo { grid-template-columns: repeat(5, 1fr); } }
.processo > div {
  position: relative;
  counter-increment: passo;
  padding: 2.25rem 1.5rem 2.25rem 0;
  border-top: 3px solid var(--navy-700);
  margin-top: 1rem;
}
@media (max-width: 899px) { .processo > div { padding-right: 0; } }
.processo > div::before {
  content: counter(passo, decimal-leading-zero);
  display: block;
  margin-bottom: 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--oro-500);
}
.processo dt { font-weight: 700; font-size: 1.0625rem; color: var(--navy-900); margin-bottom: 0.5rem; }
.processo dd { margin: 0; color: var(--inchiostro-soft); font-size: 0.96rem; }

/* pannello di chiusura */
.pannello {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  background: var(--navy-700);
  color: #fff;
  border-top: 3px solid var(--oro-500);
}
@media (min-width: 880px) { .pannello { grid-template-columns: minmax(0, 1fr) auto; } }
.pannello h2 { color: #fff; }
.pannello p { color: #cfdcec; margin-top: 1rem; }
.posta {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
  color: #fff;
  text-decoration-color: var(--oro-500);
  text-underline-offset: 0.3em;
  overflow-wrap: anywhere;
}
.posta:hover { color: var(--oro-300); }

/* prospetto dati societari */
.prospetto { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--linea); }
@media (min-width: 700px) { .prospetto { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); } }
.prospetto dt {
  padding: 1rem 1rem 0.25rem 0;
  font-weight: 600;
  color: var(--inchiostro-soft);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}
.prospetto dd {
  margin: 0;
  padding: 0 0 1rem;
  font-weight: 600;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--linea);
}
@media (min-width: 700px) {
  .prospetto dt { padding: 1.05rem 1.5rem 1.05rem 0; border-bottom: 1px solid var(--linea); }
  .prospetto dd { padding: 1.05rem 0; }
}

.prosa > * + h2 { margin-top: clamp(2.75rem, 5vw, 4rem); }
.prosa > h2 + p { margin-top: 1.25rem; }
.prosa h3 { margin-top: 2rem; margin-bottom: 0.6rem; }
.prosa ul { max-width: var(--misura); padding-left: 1.15rem; color: var(--inchiostro-soft); }
.prosa li { margin-bottom: 0.55rem; overflow-wrap: break-word; }

/* ---------- piede ---------- */

.piede { background: var(--navy-900); color: #b9c8dc; padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.piede__griglia { display: grid; gap: 2.5rem; }
@media (min-width: 720px) { .piede__griglia { grid-template-columns: 1.4fr 1fr 1fr; } }
.piede h2 { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--oro-300); margin-bottom: 1.1rem; }
.piede img { width: 168px; margin-bottom: 1.25rem; }
.piede p { font-size: 0.95rem; margin-bottom: 0.35rem; }
.piede p a { text-decoration: underline; text-underline-offset: 0.2em; }
.piede ul { margin: 0; padding: 0; list-style: none; }
.piede li { margin-bottom: 0.15rem; }
.piede a {
  display: inline-block;
  padding-block: 0.3rem;   /* porta il bersaglio a 28px: sotto i 24 non e' toccabile */
  color: #d8e3f0;
  text-decoration: none;
}
.piede a:hover { color: #fff; text-decoration: underline; }
.piede__coda {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea-scura);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.86rem;
  color: #8ea4c0;
}

/* ---------- il momento d'ingresso ---------- */

@media (prefers-reduced-motion: no-preference) {
  .apertura__strati > * {
    transform: translateY(18px);
    opacity: 0;
    animation: sale 1.1s var(--uscita) forwards;
  }
  .apertura__strati > *:nth-child(1) { animation-delay: 0.05s; }
  .apertura__strati > *:nth-child(2) { animation-delay: 0.14s; }
  .apertura__strati > *:nth-child(3) { animation-delay: 0.23s; }
  .apertura__strati > *:nth-child(4) { animation-delay: 0.32s; }
  .apertura__strati > *:nth-child(5) { animation-delay: 0.41s; }
  .apertura__strati > *:nth-child(6) { animation-delay: 0.5s; }
  @keyframes sale { to { transform: translateY(0); opacity: 1; } }
}

@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;
  }
}

@media print {
  /* I browser scartano gli sfondi in stampa: senza questo blocco l'apertura, il
     pannello di contatto e il piede resterebbero con testo BIANCO su carta
     bianca, e a sparire sarebbero proprio l'email istituzionale e i dati
     societari. Misurato con emulate_media('print') su /contatti/. */
  .testata, .apertura__strati, .azioni, .apri-nav { display: none; }
  body { color: #000; background: #fff; }
  /* Una regola sola per tutte le superfici scure. Elencarle per nome aveva gia'
     prodotto tre elenchi diversi, e ognuno dimenticava qualcosa di suo. */
  .su-scuro { background: #fff !important; color: #000; }
  .su-scuro :is(h1, h2, h3, h4) { color: #000; }
  .su-scuro :is(p, li, dd, span, a) { color: #1a1a1a; }
  .posta { color: #000; text-decoration: underline; }
  .pannello { border-top: 2px solid #000; }
  .piede { border-top: 1px solid #000; }
  a[href^="mailto:"]::after { content: ''; }
}

/* ---------- impaginazioni a due colonne ---------- */

.diviso { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
@media (min-width: 940px) {
  .diviso { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); }
}
.diviso__figura { min-width: 0; }
.schema {
  display: block;
  width: 100%;
  height: auto;
  /* Le etichette ereditano il colore del contesto: lo stesso schema compare su
     fondo chiaro e su fondo navy, e un colore fisso fallirebbe il contrasto su uno
     dei due. */
  color: var(--inchiostro-soft);
}
.su-navy .schema { color: #c6d3e4; }
.su-navy .schema rect { filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4)); }
@media (max-width: 560px) { .schema__voce { font-size: 15px; } }

.apertura--interna .apertura__contenuto {
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(3.25rem, 8vw, 5.5rem);
}
.apertura--interna h1 { max-width: 18ch; }
.apertura--interna .apertura__strati { opacity: 0.5; }

/* ---------- i motivi: dichiarazioni, non schede ---------- */

.motivi {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: motivo;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}
.motivi li {
  counter-increment: motivo;
  display: grid;
  gap: 0.75rem 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
}
@media (min-width: 900px) {
  .motivi li { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}
.motivi h3 {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  letter-spacing: -0.024em;
  color: var(--navy-900);
  max-width: 22ch;
}
.motivi p { color: var(--inchiostro-soft); margin: 0; }
.motivi li:first-child { border-top-color: var(--oro-500); border-top-width: 3px; padding-top: 1.6rem; }


/* ====================== 2. STRATO NUOVO ======================== */

:root {
  --ink: #07111d;
  --ink-2: #0b1b2c;
  --paper: #f1eee7;
  --paper-2: #e6e1d7;
  --white: #f8f8f5;
  --blue: #168cff;
  --blue-soft: #72bdff;
  --amber: #e4a651;
  --line-dark: rgba(255, 255, 255, .16);
  --line-light: rgba(7, 17, 29, .16);
  --display: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: Inter, "Helvetica Neue", Arial, sans-serif;
  --max: 1440px;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--white);
  color: var(--ink);
  font-weight: 700;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 4px; }

.page-noise {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  opacity: .045;
  background-image: url("/assets/rumore.svg");
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  min-height: 84px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 0 var(--pad);
  color: white;
  border-bottom: 1px solid var(--line-dark);
  transition: min-height .35s ease, background .35s ease, backdrop-filter .35s ease;
}
.site-header.is-scrolled {
  min-height: 68px;
  background: rgba(6, 17, 31, .84);
  backdrop-filter: blur(18px);
}

.brand {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  text-decoration: none;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .22em;
}
.brand-mark {
  position: relative;
  width: 28px;
  height: 26px;
  display: inline-block;
}
.brand-mark i {
  position: absolute;
  bottom: 0;
  width: 7px;
  background: currentColor;
  transform: skew(-24deg);
}
.brand-mark i:nth-child(1) { left: 2px; height: 15px; }
.brand-mark i:nth-child(2) { left: 11px; height: 25px; background: var(--amber); }
.brand-mark i:nth-child(3) { left: 20px; height: 19px; }

.brand-logo {
  width: clamp(116px, 10vw, 146px);
  height: auto;
  object-fit: contain;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.8rem);
}
.main-nav a {
  position: relative;
  text-decoration: none;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -.55rem;
  height: 1px;
  background: var(--blue-soft);
  transition: right .25s ease;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after { right: 0; }

.header-cta {
  justify-self: end;
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.header-cta span { color: var(--blue-soft); font-size: 1rem; }
.menu-toggle { display: none; }

.hero {
  position: relative;
  min-height: max(760px, 100svh);
  overflow: hidden;
  display: grid;
  align-items: center;
  padding: 9rem var(--pad) 7rem;
  color: white;
  background: #06111f;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
  animation: hero-breathe 18s ease-in-out infinite alternate;
}
.hero-wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(3, 11, 22, .97) 0%, rgba(3, 11, 22, .88) 34%, rgba(3, 11, 22, .32) 70%, rgba(3, 11, 22, .18) 100%),
    linear-gradient(0deg, rgba(3, 11, 22, .82) 0%, transparent 42%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .11;
  background-image:
    linear-gradient(rgba(255,255,255,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.35) 1px, transparent 1px);
  background-size: 110px 110px;
  mask-image: linear-gradient(90deg, black, transparent 80%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(520px circle at var(--mx, 74%) var(--my, 44%), rgba(22, 140, 255, .16), transparent 65%);
  pointer-events: none;
}
.hero-orbit {
  position: absolute;
  border: 1px solid rgba(114, 189, 255, .26);
  border-radius: 50%;
  pointer-events: none;
}
.orbit-one {
  width: 44vw;
  height: 44vw;
  right: -18vw;
  top: 8vh;
  animation: orbit 24s linear infinite;
}
.orbit-two {
  width: 26vw;
  height: 26vw;
  right: -7vw;
  bottom: -12vw;
  border-style: dashed;
  animation: orbit 34s linear infinite reverse;
}
.hero-copy {
  position: relative;
  z-index: 2;
  width: min(760px, 67vw);
  max-width: var(--max);
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1.8rem;
  color: rgba(255,255,255,.69);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.eyebrow > span {
  width: 28px;
  height: 1px;
  background: var(--blue-soft);
  box-shadow: 0 0 12px var(--blue);
}
.eyebrow.dark { color: rgba(7, 17, 29, .62); }
.hero h1,
.section h2,
.section-dark h2,
.contatto h2 {
  font-family: var(--display);
  font-weight: 760;
  letter-spacing: -.055em;
  line-height: .92;
}
.hero h1 {
  max-width: 850px;
  margin: 0;
  font-size: clamp(4rem, 7.8vw, 8.2rem);
}
.hero h1 em {
  color: transparent;
  font-style: normal;
  -webkit-text-stroke: 1px rgba(255,255,255,.78);
}
.hero-lead {
  width: min(670px, 90%);
  margin: 2rem 0 0;
  color: rgba(255,255,255,.75);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.65;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 2.2rem;
}
.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding: .8rem 1.25rem;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue); color: white; }
.button-primary:hover { background: #3ca0ff; }
.button-ghost { border-color: rgba(255,255,255,.35); color: white; }
.button-ghost:hover { background: rgba(255,255,255,.08); }
.button-light { background: var(--white); color: var(--ink); }

.hero-foot {
  position: absolute;
  z-index: 2;
  left: var(--pad);
  right: var(--pad);
  bottom: 1.65rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  color: rgba(255,255,255,.6);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-foot p { margin: 0; }
.hero-foot a { justify-self: end; text-decoration: none; }
.hero-foot a span { margin-left: .5rem; color: var(--blue-soft); }
.hero-signal { display: flex; align-items: center; gap: .65rem; }
.hero-signal span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #5ce6a2;
  box-shadow: 0 0 12px #5ce6a2;
}

.section,
.section-dark {
  position: relative;
  padding: clamp(6rem, 11vw, 11rem) var(--pad);
}
.section { background: var(--paper); }
.section-dark { background: var(--ink); color: white; }

.statement {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .22fr 1.6fr .8fr;
  gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.section-index {
  color: rgba(7,17,29,.4);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.statement h2 {
  margin: 0;
  font-size: clamp(3rem, 5.6vw, 6rem);
}
.statement h2 span { color: rgba(7,17,29,.28); }
.statement-aside { padding-top: 3.2rem; }
.statement-aside p { margin: 0 0 2rem; color: rgba(7,17,29,.7); font-size: 1.05rem; }
.text-link {
  display: inline-flex;
  gap: 1rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.text-link span { color: #006dce; }

.capabilities { overflow: hidden; }
.capabilities::before {
  content: "";
  position: absolute;
  left: -18vw;
  top: -26vw;
  width: 62vw;
  height: 62vw;
  border: 1px solid rgba(114,189,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 5vw rgba(114,189,255,.025), 0 0 0 11vw rgba(114,189,255,.018);
}
.section-heading {
  position: relative;
  max-width: var(--max);
  margin: 0 auto clamp(3rem, 6vw, 6rem);
  display: grid;
  grid-template-columns: 1fr .65fr;
  gap: 4rem;
  align-items: end;
}
.section-heading h2 {
  margin: 0;
  font-size: clamp(3.5rem, 6vw, 6.8rem);
}
.section-heading > p {
  max-width: 560px;
  margin: 0 0 .7rem;
  color: rgba(255,255,255,.62);
}

.capability-list {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--line-dark);
}
.capability {
  min-height: 120px;
  display: grid;
  grid-template-columns: .18fr 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 1.4rem .35rem;
  border-bottom: 1px solid var(--line-dark);
  cursor: default;
  transition: color .25s ease, padding .25s ease, background .25s ease;
}
.capability:hover,
.capability:focus-visible {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  color: white;
  background: linear-gradient(90deg, rgba(22,140,255,.2), rgba(22,140,255,0));
}
.capability-number { color: var(--blue-soft); font-size: .72rem; letter-spacing: .12em; }
.capability h3 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.capability p { margin: 0; color: rgba(255,255,255,.56); }
.capability-icon { color: var(--blue-soft); font-size: 1.45rem; }

.method {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(4rem, 9vw, 10rem);
}
.method-intro {
  position: sticky;
  top: 8rem;
  align-self: start;
}
.method-intro h2 {
  margin: 0 0 2rem;
  font-size: clamp(3.2rem, 5.2vw, 5.6rem);
}
.method-intro > p:last-child { max-width: 520px; color: rgba(7,17,29,.66); }
.method-steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.method-steps li {
  position: relative;
  min-height: 280px;
  padding: 1.3rem 0 4rem 5.6rem;
  border-top: 1px solid var(--line-light);
}
.method-steps li::before {
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 1.7rem;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  transform: rotate(45deg);
}
.method-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.65rem;
  top: 3.3rem;
  bottom: -1.6rem;
  width: 1px;
  background: linear-gradient(var(--ink), transparent);
  opacity: .25;
}
.method-steps span {
  color: rgba(7,17,29,.52);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.method-steps h3 {
  max-width: 680px;
  margin: 1.2rem 0 1rem;
  font-family: var(--display);
  font-size: clamp(2rem, 3.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -.035em;
}
.method-steps p { max-width: 620px; margin: 0; color: rgba(7,17,29,.64); }

/* --- Progetti, riprogettati il 2026-09-05 ----------------------------------
 *
 * La sezione precedente era alta 740px minimi per UN progetto, con il nome
 * a 7rem, una scritta decorativa «ARES / DIGITAL» larga 13vw sul fondo, un
 * alone sfocato da 56vw e un oggetto orbitale da 44vw che animava in
 * continuo. Per aggiungere un secondo progetto non c'era posto: era il
 * disegno di una vetrina con un oggetto solo dentro.
 *
 * Ora e' una griglia di schede. Aggiungere un progetto significa aggiungere
 * un <li>, e nient'altro: le colonne si contano da sole.
 *
 * --- Perche' auto-fill e una traccia con un MASSIMO ------------------------
 * `repeat(auto-fill, minmax(360px, 420px))` crea quante tracce ci stanno, e
 * ogni traccia sta fra 360 e 420px. Con un progetto solo la scheda resta
 * larga 420 e non si stende sulla pagina — che e' cio' che succede con
 * `1fr`, e che fa sembrare vuota una sezione piena.
 * Il contenitore e' largo al massimo tre tracce piu' due divari: e' cosi'
 * che «massimo tre per riga» diventa una proprieta' della griglia invece di
 * una media query da aggiornare a ogni progetto nuovo.
 */
.progetti {
  padding: clamp(2rem, 3.6vw, 3.25rem) 0;
}
.progetti__interno {
  max-width: var(--max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.progetti__testa { max-width: 46rem; }
.progetti__occhiello {
  margin: 0 0 1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.progetti h2 {
  margin: 0;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.015em;
}
.progetti__intro {
  margin: 1.05rem 0 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, .74);
  font-size: 1.02rem;
  line-height: 1.6;
}

.progetti__griglia {
  --scheda: 420px;
  --divario: 1.5rem;
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, var(--scheda)));
  gap: var(--divario);
  max-width: calc(var(--scheda) * 3 + var(--divario) * 2);
}

.progetto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.35rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--raggio);
  background: rgba(255, 255, 255, .035);
}
/* Il segno sta ACCANTO al nome, non sopra: impilato costava 78px di altezza
   per scheda, e con l'altezza complessiva da dimezzare erano 78px che non
   dicevano niente in piu'. E' l'orbita di prima ridotta a 44px:
   riconoscibile, e non piu' il soggetto della pagina. Senza animazione,
   perche' girava in continuo dietro a un testo da leggere. */
.progetto__testa {
  display: flex;
  align-items: center;
  gap: .85rem;
  /* Il nome di un progetto e' una parola sola e indivisibile:
     «Creapassword.com» misura 244px di min-content, e sommato al segno,
     al divario e all'imbottitura fa 339 — piu' della scheda a 360px di
     finestra, dove `1fr` non puo' scendere sotto il proprio min-content.
     Misurato: griglia scroll=339 client=320. Con `wrap` il nome scende
     su una riga propria, dove 244 sta dentro 284, e NON si spezza a
     meta' parola. Sopra quella soglia non cambia nulla: il ripiegamento
     avviene solo dove oggi il contenuto trabocca. */
  flex-wrap: wrap;
}
.progetto__segno {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.progetto__anello {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(114, 189, 255, .55);
  border-radius: 50%;
}
.progetto__anello::before {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px dashed rgba(255, 255, 255, .26);
  border-radius: 50%;
}
.progetto__nucleo {
  position: relative;
  font-size: .4rem;
  letter-spacing: .12em;
  color: rgba(255, 255, 255, .82);
}
.progetto__nome {
  margin: 0;
  /* Difesa di secondo livello, indipendente dalla lunghezza del nome: un
     titolo piu' lungo di una riga intera si spezza invece di traboccare. */
  min-width: 0;
  overflow-wrap: break-word;
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.progetto__testo {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: .96rem;
  line-height: 1.58;
}
/* L'azione sta in fondo alla scheda anche quando i testi hanno lunghezze
   diverse: e' cio' che tiene allineate le schede di una riga senza che
   nessuno debba pareggiare le descrizioni. */
.progetto__azione {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: auto;
  padding-top: .35rem;
  min-height: 44px;
  color: var(--blue-soft);
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
}
.progetto__azione svg { transition: transform .2s ease; }
.progetto__azione:hover,
.progetto__azione:focus-visible { color: var(--white); }
.progetto__azione:hover svg { transform: translateX(3px); }

.company {
  overflow: hidden;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}
.company-number {
  position: absolute;
  right: -2vw;
  top: 2vw;
  color: rgba(7,17,29,.035);
  font-family: var(--display);
  font-size: 24vw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.09em;
}
.company-copy,
.company-facts { position: relative; z-index: 2; }
.company-copy h2 { margin: 0 0 2rem; font-size: clamp(3rem, 5vw, 5.6rem); }
.company-copy > p:last-child { max-width: 650px; color: rgba(7,17,29,.68); font-size: 1.08rem; }
.company-facts { margin: 5.5rem 0 0; }
.company-facts div {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--line-light);
}
.company-facts div:last-child { border-bottom: 1px solid var(--line-light); }
.company-facts dt {
  color: rgba(7,17,29,.5);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.company-facts dd { margin: 0; font-weight: 700; }

/* --- Contatti, riprogettati il 2026-09-05 ----------------------------------
 *
 * La sezione precedente era alta 650px come minimo, con un titolo che
 * arrivava a 7,5rem e un indirizzo di posta steso su una riga larga quanto
 * la pagina, fra due capelli. Occupava uno schermo intero per dire una cosa
 * sola, e l'azione — la cosa che deve succedere qui — era la meno visibile
 * di tutte: una riga di testo non si preme, si legge.
 *
 * Ora sono due colonne: a sinistra il messaggio, a destra l'azione. Il
 * titolo scende a due righe dichiarate, e il pulsante e' un pulsante.
 *
 * Il fondo. Il gradiente di prima andava da un blu scuro a un azzurro quasi
 * elettrico passando per tre fermate: la diagonale a 135 gradi con tre
 * colori e' il fondale che si trova ovunque, e non diceva niente di questa
 * impresa. Qui il blu e' quello del marchio — #11335b, --navy-700 — steso
 * su una base piu' profonda, con UNA sola sorgente di luce in alto a
 * sinistra, dove comincia a leggere chi legge. In basso il colore scende
 * verso il nero del piede: e' la transizione fra le due sezioni, ed e'
 * fatta dal colore invece che da un bordo.
 */
.contatto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* La banda non scende sotto i 400px sopra i 900: a 1024 le colonne si
     stringono, il contenuto si accorcia e senza questo la sezione arrivava a
     346px — piu' bassa del suo stesso disegno. Non e' spazio aggiunto per
     riempire: e' l'altezza minima entro cui il contenuto sta centrato. */
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  color: var(--white);
  background:
    radial-gradient(120% 100% at 12% 0%, #17457a 0%, #11335b 42%, #0a2140 74%, #061527 100%);
}
@media (min-width: 787px) {
  .contatto { display: grid; align-content: center; min-height: 400px; }
}

.contatto__interno {
  max-width: var(--max);
  /* width: 100% non e' ridondante. Sopra i 900px la sezione diventa una
     griglia per centrare la banda, e in una griglia «margin: 0 auto» non
     distende l'elemento: lo restringe al contenuto e poi lo centra. Il
     contenuto finiva a 206px dal bordo invece che a 58, cioe' allineato a
     niente. Misurato, non dedotto: 1028px su 1440 disponibili. */
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
/* --- Dove le due colonne finiscono, e perche' proprio li' -----------------
 * La soglia e' MISURATA, non scelta. La prima riga dichiarata del titolo —
 * «Hai un progetto o una sfida» — chiede 406px alla sua colonna. Scendendo:
 *
 *     690px  colonna del messaggio 410px  titolo su 2 righe
 *     685px                        405px            2 righe
 *     681px                        402px            2 righe
 *     680px                        401px            3 righe
 *
 * Un pixel separa le due cose, e non e' una coincidenza: 402px e' quanto
 * chiede «Hai un progetto o una sfida» al corpo di 32px, che e' gia' il
 * minimo del suo clamp e non scende oltre. Sotto i 681 le due colonne non si
 * possono tenere senza rimpicciolire il titolo, e rimpicciolirlo era escluso.
 *
 * Ci si e' arrivati stringendo cio' che si poteva stringere senza costo: la
 * colonna dell'azione a 201px, che e' la larghezza esatta del pulsante, e il
 * divario a 1.5rem. Con i valori di partenza — 210px e 2rem — il titolo si
 * spezzava gia' a 695, e senza queste due media query, che una prima
 * stesura aveva messo PRIMA della regola di base e che quindi non
 * applicavano affatto, si spezzava a 750.
 */
@media (max-width: 900px) {
  .contatto__interno {
    /* 201px e' la larghezza esatta del pulsante, che non cambia: la colonna
       dell'azione non ha bisogno di un pixel in piu'. Ogni pixel risparmiato
       qui va al messaggio, ed e' li' che decide se il titolo sta su due
       righe. Il divario scende a 1.5rem — resta un divario, non una
       compressione: sotto quel valore le due colonne si toccherebbero. */
    grid-template-columns: minmax(0, 1fr) minmax(201px, auto);
    gap: 1.5rem;
  }
}
/* --- La soglia e' 787px. Decisa dal proprietario il 2026-09-06 ------------
 *
 * Il criterio non e' «due colonne»: e' «due colonne SENZA COMPRIMERE IL
 * TITOLO». Sono due proprieta' diverse, e questo commento esiste perche' la
 * differenza e' gia' costata due giri.
 *
 * 641 fu proposta e annullata: fra 641 e 680 le due colonne reggono
 * geometricamente, ma la colonna del messaggio sta fra 353 e 385px e il titolo
 * va su tre righe. Due colonne comprate con una riga di titolo in piu' non
 * sono un guadagno: sono la proprieta' richiesta scambiata con la sua
 * apparenza.
 *
 * 681 fu decisa al posto suo, sulla dichiarazione che a quella larghezza il
 * titolo stesse su due righe. MISURATO sull'albero distribuibile, non e' vero:
 * a 681 il titolo e' su TRE righe, esattamente come a 641. La scansione, pixel
 * per pixel da 681 a 1040, dice dove il criterio comincia davvero a valere:
 *
 *     681px   2 colonne   titolo 3 righe   messaggio 386px
 *     700px   2 colonne   titolo 3 righe   403px
 *     750px   2 colonne   titolo 3 righe   449px
 *     768px   2 colonne   titolo 3 righe   466px
 *     787px   2 colonne   titolo 2 righe   483px   <- la prima che soddisfa
 *     800px   2 colonne   titolo 2 righe   495px
 *
 * Nessuna barra di scorrimento a spiegare la differenza: innerWidth ==
 * clientWidth a tutte le larghezze provate.
 *
 * DUE REGOLE DI MISURA che valgono oltre questo caso, ed entrambe hanno gia'
 * prodotto un numero giusto su un impianto sbagliato:
 *   - le colonne si contano come RESE: due figli sono affiancati se i loro
 *     intervalli VERTICALI si sovrappongono, non se hanno lo stesso `top`. La
 *     colonna dell'azione e' centrata 31px piu' in basso, e per `top`
 *     risultava una riga a se': a 768px la misura diceva UNA colonna dove lo
 *     schermo ne mostra DUE;
 *   - le righe del titolo si contano dai RETTANGOLI DI RIGA resi, non dai
 *     <br>: un a-capo automatico non lascia alcun marcatore nel markup.
 */
@media (max-width: 786px) {
  .contatto__interno { grid-template-columns: 1fr; gap: 1.6rem; }
  .contatto__azione { align-items: flex-start; }
}


.contatto__occhiello {
  margin: 0 0 1.1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-soft);
}
.contatto h2 {
  margin: 0;
  /* 28ch: la prima riga dichiarata e' «Hai un progetto o una sfida», 27
     caratteri. A 20ch andava a capo da sola e le due righe volute ne
     diventavano tre. */
  max-width: 28ch;
  text-wrap: balance;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.015em;
}
/* --- L'a capo dichiarato, e perche' non e' un <br> -------------------------
 * La prima stesura usava <br> e lo spegneva sotto i 640px con display:none.
 * Cosi' sparisce anche lo SPAZIO che il <br> rappresentava, e il titolo
 * leggeva «sfidada affrontare?». Nessuna misura se ne accorge: le righe
 * erano due, l'altezza giusta, il contrasto giusto.
 * Qui il separatore e' uno spazio vero, e sopra i 640px diventa un a capo.
 */
.contatto__acapo { white-space: pre-wrap; }
/* L'A CAPO E' UNA PROPRIETA' DELLE SCATOLE, NON DEL TESTO.
 *
 * Il meccanismo precedente generava l'a capo con `content: "\A"` su un
 * elemento a `font-size: 0`. Due difetti in una riga: il contenuto era
 * GENERATO — quindi invisibile a `innerText`, e nessuna prova poteva
 * osservarlo senza interpretare la resa — e onorare un `\A` a corpo zero
 * DIPENDE DALLA VERSIONE DEL BROWSER. Una struttura non deterministica in
 * produzione, che nessuno aveva visto perche' una resa a due righe e'
 * compatibile SIA con l'a capo funzionante SIA con `text-wrap: balance`
 * che lavora: guardare i pixel non distingue le due cause.
 *
 * Qui i due segmenti sono ELEMENTI VERI. Sopra la soglia diventano blocchi,
 * e il secondo comincia su una riga propria PERCHE' E' UNA SCATOLA — non
 * perche' il testo ci arrivi. Non dipende da `balance`, non dipende dal
 * font, e `innerText` lo VEDE: fra due blocchi resi inserisce un a capo,
 * quindi la separazione e' osservabile sull'attributo invece che sui pixel.
 *
 * Sotto la soglia i segmenti restano in linea e il separatore e' uno SPAZIO
 * VERO: `innerText` legge «sfida da affrontare», non «sfidada affrontare».
 * Le due polarita' si misurano sullo STESSO attributo, ed e' questo a
 * renderle una prova invece di due osservazioni scollegate.
 */
@media (min-width: 641px) {
  .contatto__seg { display: block; }
  .contatto__acapo { display: none; }
}

.contatto__testo {
  margin: 1.15rem 0 0;
  max-width: 46ch;
  color: rgba(255, 255, 255, .78);
  font-size: 1.02rem;
  line-height: 1.6;
}

/* L'azione sta in colonna e comincia dal pulsante: e' la prima cosa da
   vedere, non la conclusione di un ragionamento. */
.contatto__azione {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
}
/* Il pulsante intero e' il collegamento: si preme ovunque, non solo sulle
   parole. Ottantotto pixel di larghezza in piu' non costano niente e sono
   la differenza fra premere e centrare. */
.contatto__pulsante {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 52px;
  padding: .85rem 1.6rem;
  /* #0b5fd0 e non --blue (#168cff): il bianco su quell'azzurro dava 3.17:1,
     sotto il 4.5 richiesto, e nessuno se ne accorge guardando — su fondo
     scuro un pulsante azzurro sembra brillante proprio mentre il suo testo
     e' sotto soglia. Misurati: 5.9:1 a riposo, 5.28:1 sul passaggio del
     mouse. Piu' profondo, ed e' anche il blu che questa impresa usa. */
  background: #0b5fd0;
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--raggio);
  transition: background-color .2s ease, transform .2s ease;
}
.contatto__pulsante:hover { background: #1268d6; }
.contatto__pulsante:active { transform: translateY(1px); }
.contatto__freccia { flex: 0 0 auto; transition: transform .2s ease; }
.contatto__pulsante:hover .contatto__freccia { transform: translateX(3px); }
.contatto__indirizzo {
  margin: 0;
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
}
.contatto__secondaria { margin: 0; }
.contatto__secondaria a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue-soft);
  font-size: .92rem;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(114, 189, 255, .45);
}
.contatto__secondaria a:hover,
.contatto__secondaria a:focus-visible { text-decoration-color: currentColor; }

/* --- Piede, riprogettato il 2026-09-05 --------------------------------------
 *
 * Il piede precedente era una griglia di quattro colonne stese su tutta la
 * larghezza della finestra, con 5rem di respiro sopra: a 1440px le colonne si
 * allontanavano fino a non leggersi piu' come un gruppo, e sotto restava un
 * vuoto alto quanto il contenuto. Qui il contenuto e' dentro un contenitore
 * centrato della stessa larghezza del resto del sito, e il respiro verticale
 * e' quello che serve a separare, non quello che avanza.
 *
 * I divisori sono capelli da 1px: uno sopra la barra finale e uno fra le
 * colonne. Separare con lo spazio soltanto costringe ad aumentarlo, ed e'
 * cosi' che nasce il vuoto che questa riprogettazione toglie.
 */
.site-footer {
  padding: clamp(2.75rem, 5vw, 3.75rem) 0 clamp(1.25rem, 2vw, 1.75rem);
  color: rgba(255, 255, 255, .72);
  background: #030a12;
  font-size: .875rem;
  line-height: 1.55;
}
.piede__interno {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.piede__griglia {
  display: grid;
  grid-template-columns: 1.35fr .95fr .95fr 1.25fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  align-items: start;
}
/* Il capello fra le colonne vive sulla colonna, non fra le colonne: un
   separatore disegnato nello spazio del gap si sposta quando il gap cambia. */
.piede__griglia > .piede__area + .piede__area {
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
  border-left: 1px solid var(--line-dark);
}
.piede__area { min-width: 0; }

.piede__marchio .brand-logo {
  width: 148px;
  height: auto;
  display: block;
}
.piede__claim {
  margin: .85rem 0 0;
  max-width: 24ch;
  color: rgba(255, 255, 255, .72);
}
/* L'indirizzo di posta e' il solo invito ad agire del piede: si comporta da
   bersaglio, non da parola sottolineata in mezzo a un paragrafo. */
.piede__mail {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: .5rem;
  color: var(--white);
  /* La sottolineatura sta sul TESTO, non sul bordo della cassa. Con un
     bordo inferiore su una cassa alta 44px la riga si stacca dalle lettere
     e si legge come un divisore messo li' per sbaglio — provato, sembrava
     un capello dimenticato. */
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .32);
  text-underline-offset: 5px;
}
.piede__mail:hover,
.piede__mail:focus-visible { color: var(--blue-soft); text-decoration-color: var(--blue-soft); }

.piede__titolo {
  margin: 0 0 .7rem;
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.piede__indirizzo {
  font-style: normal;
  margin: 0;
}
.piede__dati {
  margin: 0;
  display: grid;
  grid-template-columns: auto;
  gap: .1rem .75rem;
}
.piede__dati dt {
  color: rgba(255, 255, 255, .55);
  font-size: .78rem;
}
.piede__dati dd { margin: 0 0 .55rem; }
.piede__dati dd:last-of-type { margin-bottom: 0; }

/* «Esplora» in due colonne: sette voci in colonna sola allungherebbero il
   piede piu' del resto messo insieme, ed e' proprio l'altezza che questa
   riprogettazione doveva togliere. */
.piede__elenco {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem 1.25rem;
}
.piede__elenco a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
}
.piede__elenco a:hover,
.piede__elenco a:focus-visible { color: var(--white); text-decoration: underline; }

/* La barra porta il solo copyright: Note legali e Privacy stanno una volta
   sola, nell'elenco «Esplora». Ripeterli qui era la prima stesura, ed era
   una ripetizione senza guadagno. */
.piede__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem 1.5rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding-top: clamp(1rem, 1.6vw, 1.25rem);
  border-top: 1px solid var(--line-dark);
}
.piede__copy {
  margin: 0;
  color: rgba(248, 248, 245, .62);
  font-size: .8rem;
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes hero-breathe {
  from { transform: scale(1.03); }
  to { transform: scale(1.075); }
}
@keyframes orbit { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 72px; }
  .header-cta { display: none; }
  .menu-toggle {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    min-width: 80px;
    min-height: 44px;
    border: 0;
    padding: .5rem;
    background: transparent;
    color: white;
    font: inherit;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
  }
  .menu-lines { position: relative; width: 20px; height: 14px; }
  .menu-lines i {
    position: absolute;
    left: 0;
    width: 20px;
    height: 1px;
    background: currentColor;
    transition: transform .25s ease, top .25s ease;
  }
  .menu-lines i:first-child { top: 3px; }
  .menu-lines i:last-child { top: 10px; }
  .menu-toggle[aria-expanded="true"] i:first-child { top: 7px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i:last-child { top: 7px; transform: rotate(-45deg); }
  .main-nav {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    padding: 0 0 1.25rem;
  }
  .main-nav a {
    display: block;
    padding: 1rem 0;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--display);
    font-size: clamp(1.6rem, 6vw, 2.8rem);
    letter-spacing: -.03em;
    text-transform: none;
  }
  .main-nav a::after { display: none; }
  .js .main-nav {
    position: fixed;
    inset: 72px 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2rem var(--pad);
    background: rgba(3,10,18,.98);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }
  .js .main-nav.is-open { visibility: visible; opacity: 1; transform: none; }
  .js .main-nav a {
    display: block;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--display);
    font-size: clamp(2rem, 7vw, 3.4rem);
    letter-spacing: -.03em;
    text-transform: none;
  }

  .statement { grid-template-columns: .14fr 1fr; }
  .statement-aside { grid-column: 2; padding-top: 0; }
  .section-heading { grid-template-columns: 1fr; }
  .method { grid-template-columns: 1fr; }
  .method-intro { position: static; }
  .company { grid-template-columns: 1fr; }
  .company-facts { margin-top: 0; }
  /* Fra 900 e 1024 le quattro colonne diventano due: quattro colonne in
     640 utili darebbero righe di tre parole. */
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .piede__griglia > .piede__area:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 640px) {
  :root { --pad: 1.25rem; }
  /* Sotto i 640px la scheda prende la riga intera: una traccia da 360px
     minimi non ci starebbe in 350 di spazio utile, e la griglia
     traboccherebbe fuori dallo schermo. */
  /* Sul telefono la scheda prende la riga intera e il respiro si stringe:
     l'obiettivo era stare sotto i 650px, e ogni margine qui vale una riga
     di testo in meno da scorrere. */
  .progetti__griglia { grid-template-columns: 1fr; max-width: none; margin-top: .95rem; }
  .progetti { padding: 1.45rem 0; }
  .progetti__intro { font-size: .95rem; margin-top: .8rem; }
  .progetti h2 { font-size: 1.62rem; }
  .progetto { padding: 1.1rem; gap: .55rem; }
  .hero {
    min-height: 820px;
    align-items: end;
    padding-top: 8rem;
    padding-bottom: 8.5rem;
  }
  .hero-media img { object-position: 68% center; }
  .hero-wash {
    background:
      linear-gradient(0deg, rgba(3,11,22,.98) 0%, rgba(3,11,22,.82) 53%, rgba(3,11,22,.25) 100%),
      linear-gradient(90deg, rgba(3,11,22,.65), transparent);
  }
  .hero-grid { background-size: 72px 72px; opacity: .08; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(3.45rem, 17vw, 5.3rem); }
  .hero-lead { width: 100%; font-size: .97rem; }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .hero-foot { grid-template-columns: 1fr auto; }
  .hero-foot .hero-signal { display: none; }
  .orbit-one { width: 90vw; height: 90vw; right: -50vw; }
  .orbit-two { display: none; }

  .section,
  .section-dark { padding-top: 6rem; padding-bottom: 6rem; }
  .statement { grid-template-columns: 1fr; gap: 1.5rem; }
  .statement-copy,
  .statement-aside { grid-column: 1; }
  .statement h2 { font-size: 3.35rem; }
  .statement-aside { padding: 0; }

  .section-heading { gap: 1.5rem; }
  .section-heading h2 { font-size: 3.8rem; }
  .capability {
    min-height: 140px;
    grid-template-columns: 38px 1fr;
    gap: 1rem;
  }
  .capability-icon { display: none; }
  .capability h3 { font-size: 2rem; }
  .capability p { font-size: .9rem; }

  .method-intro h2 { font-size: 3.45rem; }
  .method-steps li { min-height: 0; padding: 1.3rem 0 4rem 3.3rem; }
  .method-steps li::before { left: .25rem; }
  .method-steps li:not(:last-child)::after { left: .7rem; }
  .method-steps h3 { font-size: 2.35rem; }


  .company-copy h2 { font-size: 3.45rem; }
  .company-number { top: 4rem; font-size: 39vw; }
  .company-facts div { grid-template-columns: 1fr; gap: .35rem; }

  /* --- Contatti sotto i 640px: una colonna, e il pulsante largo quanto lo
   * schermo. Non e' il desktop impilato: il titolo perde l'a capo dichiarato
   * — a 390px due righe dichiarate ne diventano quattro storte — e l'azione
   * smette di essere una colonna a fianco per diventare cio' che si tocca. */
  .contatto { padding: 2.5rem 0 2.75rem; }
  .contatto__interno { grid-template-columns: 1fr; gap: 1.75rem; }
  .contatto h2 { font-size: 1.85rem; max-width: none; }
  .contatto__testo { font-size: .98rem; }
  .contatto__pulsante {
    width: 100%;
    justify-content: center;
    min-height: 56px;
  }
  .contatto__azione { align-items: stretch; }
  .contatto__indirizzo, .contatto__secondaria { text-align: center; }
  .contatto__secondaria a { justify-content: center; width: 100%; }

  /* --- Piede sotto i 640px: un disegno suo, non il desktop impilato -------
   * Impilando le quattro colonne verrebbe una colonna di etichette lunga uno
   * schermo e mezzo. Qui l'ordine e' quello con cui si legge: chi siamo,
   * come ci si scrive, dove siamo, chi siamo per l'anagrafe, dove si va.
   */
  .site-footer { padding-top: 2.75rem; }
  /* Nessun padding laterale proprio: il piede si allinea al resto della
     pagina, che sotto i 640px sta a 1.25rem dal bordo. Un valore piu' largo
     solo qui — provato a 1.5rem — fa cominciare il testo del piede quattro
     pixel piu' dentro di tutto cio' che gli sta sopra, e quattro pixel di
     disallineamento si vedono come un errore, non come respiro. */
  .piede__griglia {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  /* Nessun capello verticale in colonna singola: separerebbe una cosa da
     niente. Le aree si separano con un capello orizzontale. */
  .piede__griglia > .piede__area + .piede__area {
    padding-left: 0;
    border-left: 0;
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-dark);
  }
  .piede__marchio .brand-logo { width: 132px; }
  .piede__claim { max-width: none; }
  /* L'indirizzo di posta prende la riga intera: e' il gesto piu' probabile
     su un telefono, e 44px sono l'area minima con cui un pollice non sbaglia. */
  .piede__mail {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    margin-top: 1rem;
    padding: .25rem .9rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--raggio);
    text-decoration: none;
  }
  /* Due colonne anche qui, con bersagli da 44px: sette voci in colonna sola
     sono sette scorrimenti di pollice per arrivare in fondo. */
  .piede__elenco { gap: .15rem 1rem; }
  .piede__elenco a { min-height: 44px; }

  .piede__barra {
    justify-content: center;
    text-align: center;
    margin-top: 2rem;
  }
  .piede__copy { width: 100%; text-align: center; }
}

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

@media print {
  .site-header, .page-noise, .hero-orbit { display: none !important; }
  .hero, .section-dark, .contatto, .site-footer { color: #000 !important; background: #fff !important; }
  .hero { min-height: auto; }
  .hero-media { display: none; }
  .hero h1 em { color: #000; -webkit-text-stroke: 0; }
  .eyebrow, .hero-lead, .section-heading > p, .capability p, .progetti__intro, .site-footer { color: #000 !important; }
}

/* ============== 3. RACCORDO fra i due strati ==================== */

/* Il menu senza `.js`.
 * Il prototipo nascondeva la navigazione mobile con `.js .main-nav` e la
 * apriva con `.is-open`: entrambe le classi le metteva il SUO script, che
 * qui non c'e'. L'unico script del sito ha l'hash dichiarato nella CSP del
 * bordo, e cambiarlo avrebbe richiesto di toccare l'infrastruttura.
 * Quello script apre e chiude `.aperta`, quindi il raccordo si fa qui.
 *
 * Senza JavaScript la navigazione in cima resta chiusa: il ripiego e' la
 * navigazione nel piede, presente in ogni pagina. E' la stessa scelta gia'
 * documentata nel generatore, non una nuova. */
@media (max-width: 899px) {
  .main-nav {
    position: fixed;
    inset: 72px 0 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 2rem var(--pad);
    background: rgba(3, 10, 18, .98);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    overflow-y: auto;
  }
  .main-nav.aperta { visibility: visible; opacity: 1; transform: none; }
  .main-nav a {
    display: block;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line-dark);
    font-family: var(--display);
    font-size: clamp(2rem, 7vw, 3.4rem);
    letter-spacing: -.03em;
    text-transform: none;
    color: var(--white);
  }
}

/* Il collegamento di salto porta due nomi: `salta` e' quello storico, gia'
 * atteso dai cancelli; `skip-link` e' quello del prototipo. Uno stile solo. */
.salta.skip-link { z-index: 120; }

/* L'intestazione e' fissa: le pagine interne, che non hanno un'apertura a
 * tutto schermo come la home, finirebbero sotto. La home non ne ha bisogno,
 * perche' la sua prima sezione e' alta quanto lo schermo. */
main > .apertura:first-child,
main > section:first-child:not(.hero) { padding-top: clamp(6rem, 12vh, 9rem); }

/* Classi aggiunte nell'integrazione e assenti dal prototipo. */

/* Le pagine interne ereditano palette e tipografia dallo strato nuovo: qui
 * si allineano soltanto i fondali chiari, che nello strato storico erano
 * bianchi e ora starebbero male accanto alla carta del prototipo. */
/* NON le superfici scure. La stesura precedente diceva «main > section» e
 * basta: toglieva il fondo anche a «.apertura--interna», che e' marcata
 * «su-scuro» e ha il testo bianco. Risultato: titolo e sottotitolo bianchi
 * sulla carta chiara — illeggibili nell'immagine, mentre axe li misurava
 * contro un antenato scuro e li dava per buoni. Il contrasto calcolato e
 * quello che si vede non sono la stessa cosa. */
main > .apertura:not(.su-scuro),
main > section:not(.su-scuro) { background-color: transparent; }

/* L'apertura delle pagine interne ha un fondale suo, scuro davvero, coerente
 * con l'intestazione e con l'apertura della home. */
.apertura--interna {
  background-color: var(--ink);
  color: var(--white);
}
.apertura--interna :is(h1, .apertura__occhio) { color: var(--white); }
.apertura--interna .apertura__occhio { color: rgba(248, 248, 245, .82); }
.apertura--interna .apertura__strati { opacity: .35; }

/* ============== 4. CORREZIONI DAL CANCELLO DEL BROWSER ========== */
/* Ogni regola qui sotto risponde a un rosso misurato da tests/prova_sito.py,
 * non a un'impressione. */

/* Fuoco visibile: l'anello del prototipo era azzurro chiaro, che su carta
 * chiara fa 1.74:1 — sotto il 3:1 richiesto da WCAG 2.2 SC 1.4.11. Due
 * anelli, uno per fondale. */
:focus-visible { outline: 3px solid #0a3d7a; outline-offset: 4px; }
.su-scuro :focus-visible,
.section-dark :focus-visible,
.hero :focus-visible,
.site-header :focus-visible { outline-color: var(--blue-soft); }

/* Bersagli sotto i 24px: l'invito a scorrere nell'apertura.
 * Non si ingrandisce il testo, si ingrandisce l'area toccabile.
 * I collegamenti del piede hanno la propria altezza minima nel blocco del
 * piede — 32px in largo, 44px sotto i 640 — e non passano piu' di qui. */
.hero-foot a { display: inline-block; min-height: 24px; padding: .35rem 0; }

/* Traboccamento orizzontale. L'immagine dell'apertura e le decorazioni
 * orbitali sono piu' larghe della finestra di proposito: vanno ritagliate
 * dal contenitore, non lasciate uscire. */
.hero { overflow: hidden; }
.hero-media { inset: 0; width: 100%; max-width: 100%; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-orbit { pointer-events: none; }
.company { overflow: hidden; }
.company-number { max-width: 100%; overflow: hidden; }
/* «overflow-wrap: anywhere» toglieva il traboccamento spezzando la parola a
 * meta': «Creapasswor / d.com». Un nome proprio non si spezza; si riduce la
 * misura del carattere finche' entra. */
#project-title { font-size: clamp(1.9rem, 5.2vw, 3.6rem); }

/* ============== 5. SECONDA TORNATA DAL CANCELLO ================= */

/* Fondali dichiarati come COLORE, non solo come gradiente. La sonda del
 * fuoco risale al primo antenato con un fondo opaco per calcolare il
 * contrasto dell'anello: con soli gradienti risaliva fino a body e misurava
 * l'anello chiaro contro la carta chiara. */
.site-header { background-color: rgba(6, 17, 31, .92); }
.hero { background-color: var(--ink); }
.section-dark { background-color: var(--ink-2); }
.contatto { background-color: #0a2140; }
.site-footer { background-color: var(--ink); }

/* L'immagine dell'apertura era ingrandita del 3% e respirava: due modi di
 * sporgere oltre il bordo della finestra. Il ritaglio del contenitore
 * nasconde il pixel ma non il riquadro, e il cancello misura i riquadri. */
.hero-media img { transform: none; animation: none; }

/* Decorazioni fuori dal bordo su schermo stretto. Sono tutte aria-hidden:
 * toglierle sotto la soglia non toglie contenuto a nessuno. */
/* Le decorazioni sporgono fino a 1279px compresi: misurato a 1024 e 1280.
 * Sopra restano, perche' li' stanno dentro il bordo. */
@media (max-width: 1279px) {
  .hero-orbit, .company-number { display: none; }
}

/* L'oggetto della sezione progetto ha una misura fissa piu' larga del suo
 * contenitore sugli schermi stretti. */

/* Stampa: il blocco del prototipo schiariva i contenitori ma non i
 * discendenti, e i collegamenti restavano bianchi su carta bianca — cioe'
 * sparivano proprio l'email e i dati societari. Una regola sola, con la
 * stessa forma gia' usata dallo strato storico. */
@media print {
  .su-scuro, .su-scuro * { background: #fff !important; }
  .su-scuro :is(h1, h2, h3, h4, strong, dt) { color: #000 !important; }
  .su-scuro :is(p, li, dd, span, a, em, i, small) { color: #1a1a1a !important; }
  .su-scuro a { text-decoration: underline; }
}

@media print {
  .su-scuro .button,
  .su-scuro .capability,
  .su-scuro .capability h3,
  .su-scuro .contatto__pulsante,
  .su-scuro .contatto__secondaria a,
  .su-scuro .text-link,
  .su-scuro .piede__elenco a,
  .su-scuro .piede__mail { color: #1a1a1a !important; background: #fff !important; }
  .su-scuro .button { border: 1px solid #1a1a1a; }
}

/* L'oggetto della chiave: il suo contenuto e' piu' largo di lui a ogni
 * misura provata. Si ritaglia e si stringe il passo delle lettere. */

/* ============== 6. TERZA TORNATA: le transizioni mentivano ====== */

/* Il menu transitava anche su `visibility`: subito dopo Invio la navigazione
 * era ancora dichiarata invisibile per 250 ms. Per un cancello e' un rosso,
 * per chi naviga da tastiera e' un menu che non risponde. L'opacita' puo'
 * transitare, la visibilita' no. */
@media (max-width: 899px) {
  .main-nav { transition: opacity .25s ease, transform .25s ease; }
}

/* In stampa nulla transita. I browser scartano gli sfondi al cambio di
 * media, e con una transizione sul colore il testo resta per un istante
 * quello di prima: bianco su carta bianca. Lo stato intermedio di una
 * transizione non e' un dettaglio estetico, e' cio' che qualcuno stampa. */
@media print {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* Le decorazioni dell'apertura, il numero dell'azienda e le linee del
 * contatto stanno FUORI dal bordo della finestra a ogni misura provata.
 * Il ritaglio del contenitore nasconde i pixel ma non il riquadro, e il
 * cancello misura i riquadri: un elemento oltre il bordo e' scorrimento
 * orizzontale in attesa di succedere. Sono tutti aria-hidden, quindi via:
 * e' l'unica deviazione dal prototipo, ed e' misurata. */
.hero-orbit, .company-number { display: none; } /* i div non esistono piu': vedi strato 8 */

/* L'oggetto della chiave a 360px sporgeva ancora. */

/* ============== 7. CONTRASTI, misurati con axe ================== */

/* La causa non e' il disegno: e' la fusione dei due fogli. Lo strato
 * storico fissa il colore dei titoli con una regola di tipo (`h2 {...}`),
 * il prototipo lo faceva EREDITARE dalla sezione scura. Una regola esplicita
 * batte l'ereditarieta', quindi sui fondali scuri i titoli tornavano scuri:
 * 1.04:1, cioe' invisibili. Qui l'ereditarieta' viene ripristinata dove
 * serve, invece di riscrivere il colore uno per uno. */
.hero :is(h1, h2, h3, h4),
.section-dark :is(h1, h2, h3, h4),
.contatto :is(h1, h2, h3, h4),
.site-footer :is(h1, h2, h3, h4) { color: inherit; }

/* Testi piccoli in grigio chiaro su carta: sotto il 4.5:1 richiesto.
 * Misurati 3.68 (le etichette dei passi) e 3.44 (i termini dei dati
 * societari). */
.method-steps li > span { color: #4a4f52; }
.company-facts dt { color: #4a4f52; }

/* Il numero di sezione e la seconda riga del manifesto erano decorativi ma
 * contengono testo, e axe li misura come testo. */
.section-index { color: #5a5e60; }
#statement-title > span { color: #5a5e60; }


/* ============== 8. LE DECORAZIONI, RIMESSE E CONTENUTE ========== */

/* Il cancello misura il riquadro di ogni ELEMENTO di `body *`. Un cerchio
 * posizionato a meta' fuori dalla sezione ha un riquadro fuori dal bordo
 * anche quando il ritaglio ne nasconde i pixel, e quel riquadro e'
 * scorrimento orizzontale in attesa di succedere.
 *
 * Uno pseudo-elemento non e' un elemento: non ha un riquadro da misurare,
 * non entra nell'albero di accessibilita' — quindi e' aria-hidden per
 * costruzione, non per attributo — e viene ritagliato dal contenitore.
 * E' il modo di riavere le decorazioni senza riaverne i difetti. */

.hero, .company { position: relative; overflow: hidden; isolation: isolate; }

/* Le due orbite dell'apertura. Misure in percentuale del contenitore, quindi
 * responsive per costruzione: nessuna soglia da ricordare. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  opacity: .55;
}
.hero::before {
  inset: -18% -22% auto auto;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(22, 140, 255, .32), transparent 62%);
}
.hero::after {
  inset: auto auto -26% -18%;
  width: 52%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(228, 166, 81, .20), transparent 60%);
}
/* NON «.hero > *»: quel jolly ha la stessa specificita' di «.hero-media» e,
 * arrivando dopo, le toglieva il posizionamento assoluto. L'immagine
 * rientrava nel flusso e spingeva il titolo sotto la piega — un difetto
 * introdotto per alzare uno z-index. Si nominano gli elementi. */
.hero-copy, .hero-foot { position: relative; z-index: 1; }

/* L'elemento scenografico ARES: la parola in contorno, grande, dietro il
 * testo della sezione azienda. Prima era un <div> con dentro il testo, e
 * axe ne misurava il contrasto; qui e' contenuto generato, quindi resta una
 * texture e non un testo che qualcuno debba leggere. */
.company::before {
  content: "ARES";
  position: absolute;
  right: -2%;
  bottom: -8%;
  z-index: 0;
  pointer-events: none;
  font-family: var(--display);
  font-size: clamp(7rem, 26vw, 22rem);
  font-weight: 700;
  letter-spacing: -.05em;
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px rgba(7, 17, 29, .10);
}
.company-copy, .company-facts { position: relative; z-index: 1; }

/* Il reticolo diagonale del contatto non c'e' piu': la sezione nuova posa su
 * un solo gradiente radiale, e una trama sopra sarebbe l'effetto grafico
 * pesante che questa riprogettazione doveva togliere. */

/* ============== 9. IL TITOLO, A RIGHE DICHIARATE =============== */

/* Il ritorno a capo automatico lasciava «e idee.» accanto al contorno di
 * «progetti», con una riga corta irregolare che cambiava a ogni larghezza.
 * Le tre righe ora sono dichiarate nel markup e rese blocchi qui: la
 * composizione e' la stessa su desktop e su mobile, e non dipende piu'
 * dalla larghezza della finestra. */
#hero-title { text-wrap: balance; }
#hero-title .riga { display: block; }
#hero-title .riga em { font-style: normal; }
@media (max-width: 480px) {
  /* Sotto questa soglia «prodotti, progetti» in contorno non ci sta su una
     riga sola: gli si concede di andare a capo dentro la propria riga,
     senza mescolarsi con le altre due. */
  #hero-title .riga { text-wrap: pretty; }
}

/* La voce della pagina corrente era attenuata dallo strato storico: sotto
 * l'intestazione traslucida, con l'orbita dell'apertura che ora le passa
 * dietro, il contrasto e' sceso sotto la soglia. Il segno della pagina
 * corrente resta la sottolineatura, non lo sbiadimento del testo. */
.main-nav a[aria-current="page"] { color: var(--white); opacity: 1; }

/* Le righe dichiarate non devono spezzarsi a loro volta: se lo fanno, la
 * composizione torna a dipendere dalla larghezza e ricompare la riga corta.
 * La misura del carattere scende quel tanto che basta perche' la riga piu'
 * lunga entri nella colonna, e la colonna si allarga un po'. */
@media (min-width: 700px) {
  .hero-copy { max-width: min(92%, 60rem); }
  #hero-title { font-size: clamp(2.6rem, 5vw, 4.6rem); }
  #hero-title .riga { white-space: nowrap; }
}

/* Il piede dell'apertura era ancorato in fondo alla sezione: su schermo
 * stretto il testo dell'apertura e' piu' alto dello spazio disponibile e i
 * due si sovrapponevano, con «Roma · Italia» sopra il secondo bottone.
 * Sotto la soglia torna nel flusso, dopo gli inviti. */
@media (max-width: 699px) {
  .hero { min-height: auto; padding-bottom: 2.5rem; }
  .hero-foot {
    position: static;
    display: grid;
    gap: .35rem;
    margin-top: 2.25rem;
    padding: 0;
  }
}
/* L'ultimo elemento del piede arrivava a filo del bordo destro e la sua
 * freccia restava tagliata. */
.hero-foot > :last-child { padding-right: .25rem; }

/* ============== 10. LE SCHEDE DELLE AREE ======================== */

/* Da quando sono collegamenti, il browser sottolinea tutto: titolo e
 * descrizione. Una scheda intera sottolineata si legge peggio e non dice
 * meglio dove si va. Il segnale passa altrove — colore del titolo, linea
 * laterale, freccia — e la sottolineatura sparisce da tutto il blocco. */
.capability,
.capability :is(h3, p, span) { text-decoration: none; }

/* La linea laterale: c'e' sempre, trasparente, e si accende. Dichiararla
 * fin dall'inizio evita che la scheda si sposti quando compare. */
.capability {
  position: relative;
  border-left: 3px solid transparent;
  padding-left: 1rem;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.capability:hover,
.capability:focus-visible { border-left-color: var(--blue-soft); }
.capability:hover h3,
.capability:focus-visible h3 { color: var(--blue-soft); }
.capability:hover .capability-icon,
.capability:focus-visible .capability-icon { transform: translate(3px, -3px); }
.capability-icon { transition: transform .25s ease; }

/* Il fuoco da tastiera resta visibile e resta l'anello: la linea laterale
 * e' un rinforzo, non il suo sostituto. Su fondale scuro l'anello e'
 * quello chiaro, gia' dichiarato nello strato 4. */
.capability:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .capability, .capability-icon { transition: none; }
}

/* ---------- consenso alle statistiche ---------- */
/* Nessuno stile inline: `style-src 'self'` non li consentirebbe, e il banner
   e' costruito da JavaScript. Le classi stanno qui, dove il foglio le serve. */

.consenso {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: grid;
  gap: 0.85rem;
  max-width: 46rem;
  margin: 0 auto 1rem;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--navy-900);
  color: #e7edf5;
  border-top: 3px solid var(--oro-500);
  border-radius: var(--raggio);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.55);
  --fuoco: var(--oro-300);
}
@media (min-width: 720px) { .consenso { inset: auto 1rem 1rem auto; } }

.consenso__titolo { font-size: 1.15rem; color: #fff; }
.consenso__testo { margin: 0; font-size: 0.95rem; color: #c6d3e4; max-width: none; }
.consenso__dettaglio { margin: 0; font-size: 0.9rem; }
.consenso__dettaglio a { color: var(--oro-300); }
.consenso__azioni { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.consenso__azioni .bottone { flex: 1 1 8rem; justify-content: center; }

@media (prefers-reduced-motion: no-preference) {
  .consenso { animation: consenso-sale 0.35s var(--uscita); }
  @keyframes consenso-sale { from { transform: translateY(12px); opacity: 0; } }
}