/* ==========================================================================
   Avvio Capital — site.css
   --------------------------------------------------------------------------
   Organizzazione del file:
     1. Font           — @font-face self-hosted
     2. Design token   — colori, tipografia, spaziature, raggi
     3. Reset e base
     4. Utility di layout
     5. Componenti
     6. Responsive
     7. Motion / accessibilita'
   ========================================================================== */


/* ==========================================================================
   1. FONT — self-hosted, nessuna chiamata a CDN esterni
   --------------------------------------------------------------------------
   NOTA PER LA SOSTITUZIONE DEI FONT DEFINITIVI:
   Bodoni Moda e Archivo sono SOSTITUTI TEMPORANEI gratuiti (licenza OFL),
   in attesa delle licenze web di The Seasons e Neue Montreal.
   Per sostituirli: metti i .woff2 in assets/fonts/ e cambia solo il campo
   src qui sotto e i nomi in --font-display / --font-label. Nient'altro.
   Inter e' invece definitivo (OFL, gratuito).
   ========================================================================== */

/* Display serif — segnaposto per The Seasons */
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda';
  src: url('../fonts/bodoni-moda-italic-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Grottesca per label maiuscole — segnaposto per Neue Montreal */
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Corpo testo — definitivo */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Fallback con metriche allineate a Inter: evita lo slittamento del layout
   (CLS) nell'istante fra il render del fallback e l'arrivo del webfont. */
@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22.43%;
  line-gap-override: 0%;
}


/* ==========================================================================
   2. DESIGN TOKEN
   ========================================================================== */

:root {
  /* --- Palette di marca -------------------------------------------------
     I quattro colori ufficiali. Non aggiungerne altri: ogni valore qui
     sotto e' o uno di questi, o un passaggio neutro fra #000 e #ECECEC. */
  --brand-black:  #000000;
  --brand-white:  #FFFFFF;
  --brand-ink:    #ECECEC;
  --brand-accent: #FFD60A;

  /* --- Scala testo -------------------------------------------------------
     Grigi PIENI, non opacita'. La scala a opacita' della bozza v3
     (100/60/40/32%) falliva WCAG AA ai due livelli bassi: 3,3:1 e 2,4:1.
     Questi valori passano tutti AA su fondo nero, con margine.
       #FFFFFF  21,00:1     #B3B3B3  10,02:1
       #ECECEC  17,78:1     #8C8C8C   6,25:1                                */
  --text-primary:   var(--brand-white);
  --text-base:      var(--brand-ink);
  --text-secondary: #B3B3B3;
  --text-tertiary:  #8C8C8C;
  --text-on-accent: var(--brand-black);

  /* --- Superfici e bordi ------------------------------------------------- */
  --surface-page:       var(--brand-black);
  --surface-card:       rgba(255, 255, 255, .03);
  --surface-card-hover: rgba(255, 255, 255, .05);
  --surface-nav:        rgba(0, 0, 0, .74);
  --border-default:     rgba(255, 255, 255, .12);
  --border-subtle:      rgba(255, 255, 255, .07);
  --border-accent:      rgba(255, 214, 10, .45);
  --accent-glow:        rgba(255, 214, 10, .08);

  /* --- Tipografia: famiglie --------------------------------------------- */
  --font-display: 'Bodoni Moda', 'Times New Roman', Georgia, serif;
  --font-label:   'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Inter Fallback', Arial, sans-serif;

  /* --- Tipografia: scala -------------------------------------------------
     Il display serif non scende mai sotto i 20px: sotto quella soglia le
     aste sottili della Bodoni (e della Seasons) spariscono a schermo. */
  --size-h1:      clamp(36px, 5.4vw, 76px);
  --size-h2:      clamp(27px, 2.9vw, 40px);
  --size-h3:      17.5px;
  --size-claim:   clamp(20px, 2vw, 26px);
  --size-body:    clamp(15px, 1.2vw, 16.5px);
  --size-small:   14px;
  --size-xsmall:  13px;
  --size-label:   10.5px;
  --size-micro:   9.5px;

  --leading-tight: 1.04;
  --leading-head:  1.14;
  --leading-body:  1.72;
  --leading-snug:  1.6;

  --tracking-label:   .16em;
  --tracking-eyebrow: .26em;
  --tracking-head:    -.015em;

  /* --- Spaziature -------------------------------------------------------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  --pad-page:    clamp(20px, 5vw, 64px);
  --pad-section: clamp(56px, 7.4vw, 96px);
  --max-width:   1240px;

  /* --- Raggi ------------------------------------------------------------- */
  --radius-card:   14px;
  --radius-pill:   999px;
  --radius-circle: 50%;

  /* --- Transizioni ------------------------------------------------------- */
  --ease:         cubic-bezier(.2, .7, .3, 1);
  --duration-fast: .25s;
  --duration-slow: .75s;
}


/* ==========================================================================
   3. RESET E BASE
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
  /* Compensa la nav fissa quando si salta a un'ancora */
  scroll-padding-top: 104px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-base);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--brand-accent);
  color: var(--text-on-accent);
}

a { color: inherit; text-decoration: none; }

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

h1, h2, h3, h4, p, figure { margin: 0; }

/* Focus visibile ovunque: giallo accento su nero = 14,9:1, ben oltre il
   minimo WCAG di 3:1 per gli indicatori di focus. */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Salto al contenuto per chi naviga da tastiera o screen reader */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--brand-accent);
  color: var(--text-on-accent);
  font-family: var(--font-label);
  font-size: var(--size-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-pill);
  transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }


/* ==========================================================================
   4. UTILITY DI LAYOUT
   ========================================================================== */

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

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

/* Split principale: etichetta + titolo a sinistra (in sticky), contenuto
   a destra. E' l'impianto ricorrente di tutta la pagina. */
.split {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(30px, 5vw, 72px);
  align-items: start;
}
.split__aside { position: sticky; top: 96px; }


/* ==========================================================================
   5. TIPOGRAFIA — componenti di testo
   ========================================================================== */

/* Eyebrow: numero progressivo + etichetta di sezione */
/* Parola evidenziata dentro un'etichetta (es. The CIRCLE) */
.eyebrow__hl {
  color: var(--brand-accent);
  font-weight: 500;
}

.eyebrow {
  margin-bottom: var(--sp-5);
  font-family: var(--font-label);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* Titoli: display serif. La parola in corsivo accento e' l'unico punto
   in cui il giallo entra nella tipografia dei titoli. */
.h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-h1);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-head);
  color: var(--text-primary);
  max-width: 15ch;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-h2);
  line-height: var(--leading-head);
  letter-spacing: var(--tracking-head);
  color: var(--text-primary);
  max-width: 18ch;
}
.h3 {
  font-family: var(--font-label);
  font-weight: 600;
  font-size: var(--size-h3);
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

/* Parola accento in corsivo dentro i titoli */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--brand-accent);
}

.lede {
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--text-secondary);
  max-width: 56ch;
}
.lede + .lede { margin-top: var(--sp-5); }

.text-sm {
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}



/* ==========================================================================
   6. COMPONENTI
   ========================================================================== */

/* Solo per screen reader */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* --- Varianti di titolo ---------------------------------------------------- */
.h2--wide { max-width: 26ch; }
.h3--serif {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0;
}
.approach__note { margin-top: var(--sp-4); max-width: 42ch; }

.section__head { max-width: 58ch; margin-bottom: var(--sp-7); }
.section__head-note { margin-top: var(--sp-4); }


/* --- Bottoni --------------------------------------------------------------
   Pieno e contornato si invertono all'hover. Nessuna ombra, nessuno scale. */
.btn {
  display: inline-block;
  font-family: var(--font-label);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  padding: 11px 20px;
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--brand-accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease),
              border-color var(--duration-fast) var(--ease);
}
.btn:hover { background: var(--brand-accent); color: var(--text-on-accent); }

.btn--solid { background: var(--brand-accent); color: var(--text-on-accent); }
.btn--solid:hover { background: transparent; color: var(--brand-accent); }

.btn--ghost { border-color: var(--border-default); color: var(--text-base); }
.btn--ghost:hover { background: transparent; border-color: var(--brand-accent); color: var(--brand-accent); }


/* --- Navigazione ----------------------------------------------------------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding: 18px var(--pad-page);
  background: var(--surface-nav);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.nav.is-scrolled { border-bottom-color: var(--border-default); }

.nav__brand { display: flex; align-items: center; flex: none; }
.nav__brand img { height: 38px; width: auto; }

.nav__links { display: flex; gap: var(--sp-7); align-items: center; }
.nav__links a {
  font-family: var(--font-label);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--duration-fast) var(--ease);
}
.nav__links a:hover { color: var(--brand-accent); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-4); }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px; height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger-bar {
  display: block;
  width: 22px; height: 1.5px;
  margin-inline: auto;
  background: var(--text-primary);
}

/* --- Menu mobile a tutto schermo -------------------------------------------- */
.mobile {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  background: var(--brand-black);
  padding: var(--pad-page);
}
/* Blocca lo scroll della pagina mentre il menu e' aperto */
.is-menu-open { overflow: hidden; }

.mobile__links { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.mobile__links a {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  color: var(--text-primary);
}
.mobile__links a:hover { color: var(--brand-accent); }
.mobile__close {
  position: absolute;
  top: 14px; right: calc(var(--pad-page) - 8px);
  width: 44px; height: 44px;
  font-size: 30px;
  line-height: 1;
  background: none;
  border: 0;
  color: var(--text-primary);
  cursor: pointer;
}


/* --- Hero ------------------------------------------------------------------- */
.hero {
  position: relative;
  /* Il bagliore d'accento sborda a destra di proposito: va clippato qui,
     alla fonte, e non delegato a un overflow-x sul body (che non impedisce
     comunque la comparsa di scroll orizzontale su alcuni browser). */
  overflow: hidden;
  /* Alto quanto lo schermo, cosi' a pagina appena aperta si vede solo l'hero
     e la sezione successiva resta sotto la piega. svh e non vh: su mobile vh
     non tiene conto della barra del browser e taglierebbe il contenuto. */
  min-height: 92svh;
  display: flex;
  align-items: center;
  padding: 128px 0 64px;
}
.hero__glow {
  position: absolute;
  top: 10%; right: -170px;
  width: 600px; height: 600px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle, var(--accent-glow), transparent 62%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(28px, 5vw, 68px);
  align-items: end;
}
.hero__side { padding-bottom: var(--sp-2); }
.hero__side .lede { max-width: 44ch; }
.hero__cta { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-7); }

/* Numeri sotto il testo dell'hero: riempiono lo spazio vuoto a destra e
   danno un contrappeso al titolone di sinistra. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: clamp(28px, 4vw, 56px);
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  list-style: none;
}
.hero-stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.2vw, 44px);
  line-height: 1;
  color: var(--brand-accent);
}
.hero-stat__label {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-label);
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}


/* --- Ticker ------------------------------------------------------------------ */
.ticker {
  overflow: hidden;
  padding: 14px 0;
  border-block: 1px solid var(--border-default);
}
.ticker__track {
  display: flex;
  gap: 52px;
  width: max-content;
  white-space: nowrap;
  animation: ticker-slide 46s linear infinite;
}
.ticker__item {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.ticker__item i { font-style: normal; color: var(--brand-accent); margin-right: 11px; }

@keyframes ticker-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* --- Card --------------------------------------------------------------------
   Il bordo che vira al giallo e' l'unico segnale di interattivita': niente
   ombre, niente scale, coerente con l'impianto sobrio del resto. */
.stack, .grid-2, .grid-3, .team, .logos, .plain-list, .stages, .criteria {
  list-style: none;
  margin: 0;
  padding: 0;
}

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }

.card {
  padding: 22px 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.card:hover { border-color: var(--border-accent); background: var(--surface-card-hover); }
.card--tall { padding: 26px 24px; }

.card__num {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--brand-accent);
}
.card__text {
  margin-top: 7px;
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}


/* --- Sotto-blocchi: stage e criteri ------------------------------------------ */
.subblock {
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--border-subtle);
}
.subblock__title {
  margin-bottom: var(--sp-5);
  font-family: var(--font-label);
  font-size: var(--size-label);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.stages { display: flex; flex-direction: column; gap: var(--sp-5); }
.stage {
  display: flex;
  gap: var(--sp-4);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--border-accent);
}
.stage__num {
  flex: none;
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--brand-accent);
  padding-top: 4px;
}
.stage__name {
  font-family: var(--font-label);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

.criteria { display: flex; flex-direction: column; gap: var(--sp-3); }
.criteria__item {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}
.criteria__item::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 14px; height: 1px;
  background: var(--brand-accent);
}


/* --- Elenco semplice (ecosistema): niente bordi, spezza il ritmo delle card --- */
.plain-list { display: flex; flex-direction: column; gap: var(--sp-6); }
.plain-item { padding-left: var(--sp-5); border-left: 1px solid var(--border-default); }


/* --- Team --------------------------------------------------------------------- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.person {
  display: flex;
  gap: var(--sp-5);
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-card);
  transition: border-color .3s var(--ease);
}
.person:hover { border-color: var(--border-accent); }

/* Ritratto tondo. Il testo alt e' vuoto di proposito: il nome della persona
   e' gia' nel titolo accanto, ripeterlo farebbe leggere due volte allo
   screen reader. */
.avatar--photo {
  display: block;
  padding: 0;
  object-fit: cover;
  /* Grigio come tutto il resto delle immagini del sito */
  filter: grayscale(1) contrast(1.05);
}

.avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px; height: 62px;
  border-radius: var(--radius-circle);
  border: 1px solid var(--border-accent);
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1;
  color: var(--brand-accent);
}
.person__name {
  font-family: var(--font-label);
  font-size: var(--size-h3);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-primary);
}
.person__role {
  margin: 3px 0 10px;
  font-family: var(--font-label);
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--brand-accent);
}
.linkedin {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: var(--sp-3);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color var(--duration-fast) var(--ease);
}
.linkedin:hover { color: var(--brand-accent); }
.linkedin__icon { width: 13px; height: 13px; fill: currentColor; flex: none; }


/* --- Portfolio ------------------------------------------------------------------
   Griglia a filo con separatori di 1px ottenuti dal background che traspare. */
.logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: var(--sp-7);
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle);
}
.logo-cell {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 178px;
  height: 100%;
  padding: 26px 22px 24px;
  background: var(--brand-black);
  transition: background .3s var(--ease);
}
.logo-cell:hover { background: #0A0A0A; }

/* Wordmark tipografico: segnaposto in attesa dei loghi veri */
.logo-cell__mark {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text-primary);
  transition: color .3s var(--ease);
}
.logo-cell:hover .logo-cell__mark { color: var(--brand-accent); }

/* Loghi veri delle aziende.
   Resi monocromatici con una MASCHERA CSS, non con un filtro: la maschera usa
   solo il canale alpha del file, quindi il colore arriva dai token della
   palette — bianco pieno, e il giallo esatto #FFD60A sull'hover. Una catena di
   filter() darebbe solo un'approssimazione del giallo.
   Vantaggio pratico: il file del logo puo' essere di qualunque colore
   (Mixum e' arancione, Finbooks verde scuro), viene ricolorato comunque. */
.logo-cell__mark--img {
  display: block;
  /* Senza questo il contenitore flex allunga il blocco a tutta la cella e
     annulla l'aspect-ratio: la casella resterebbe molto piu' larga del logo,
     con un'area di hover sbagliata. */
  align-self: flex-start;
  background-color: var(--text-primary);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: left center;
          mask-position: left center;
  -webkit-mask-size: contain;
          mask-size: contain;
  transition: background-color .3s var(--ease);
}
.logo-cell:hover .logo-cell__mark--img { background-color: var(--brand-accent); }

/* Un blocco per logo. Le proporzioni vengono dal file; l'altezza e' calibrata
   a occhio, perche' un marchio in grassetto pesa di piu' di uno leggero alla
   stessa altezza e va rimpicciolito per stare in equilibrio con gli altri. */
.logo--galvani {
  height: 27px;
  aspect-ratio: 479.2 / 99.2;
  -webkit-mask-image: url('../logos/galvani-power.svg');
          mask-image: url('../logos/galvani-power.svg');
}
.logo--mixum {
  height: 21px;
  aspect-ratio: 1166 / 224;
  -webkit-mask-image: url('../logos/mixum.svg');
          mask-image: url('../logos/mixum.svg');
}
.logo--finbooks {
  height: 23px;
  aspect-ratio: 672 / 120;
  -webkit-mask-image: url('../logos/finbooks.png');
          mask-image: url('../logos/finbooks.png');
}
.logo--gotobeat {
  height: 44px;
  aspect-ratio: 1200 / 452;
  -webkit-mask-image: url('../logos/gotobeat.png');
          mask-image: url('../logos/gotobeat.png');
}
.logo--cohere {
  height: 23px;
  aspect-ratio: 118 / 20;
  -webkit-mask-image: url('../logos/cohere.svg');
          mask-image: url('../logos/cohere.svg');
}
.logo-cell__meta {
  font-family: var(--font-label);
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.logo-cell__text {
  margin-top: auto;
  font-size: var(--size-xsmall);
  line-height: 1.55;
  color: var(--text-secondary);
}


/* --- The Circle ------------------------------------------------------------------ */
.circle {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
  padding: clamp(28px, 4vw, 48px);
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-card);
  background: var(--surface-card);
}
.circle__lede { margin-top: var(--sp-5); max-width: 62ch; }
.circle__list {
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.circle__list li {
  position: relative;
  padding-left: var(--sp-6);
  font-size: var(--size-small);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}
.circle__list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 14px; height: 1px;
  background: var(--brand-accent);
}
.circle__list strong { color: var(--text-primary); font-weight: 600; }

.circle__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.circle__note {
  font-family: var(--font-label);
  font-size: var(--size-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}


/* --- Contatti ---------------------------------------------------------------------- */
.contact__cta { margin-bottom: var(--sp-7); }
.contact__lines { margin: 0; display: flex; flex-direction: column; gap: var(--sp-5); }
.contact__line { display: block; }
.contact__key {
  margin-bottom: var(--sp-1);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.contact__value { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-base); }
.contact__value a { transition: color var(--duration-fast) var(--ease); }
.contact__value a:hover { color: var(--brand-accent); }


/* --- Footer -------------------------------------------------------------------------- */
.footer {
  margin-top: var(--sp-4);
  padding: var(--sp-8) 0 var(--sp-6);
  border-top: 1px solid var(--border-default);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--sp-7);
  align-items: start;
}
.footer__claim {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--size-claim);
  line-height: 1.26;
  color: var(--text-primary);
  max-width: 19ch;
}
.footer__col { display: flex; flex-direction: column; }
.footer__title {
  margin-bottom: var(--sp-3);
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.footer__col a,
.footer__address {
  margin-bottom: var(--sp-2);
  font-size: var(--size-xsmall);
  line-height: 1.55;
  color: var(--text-secondary);
}
.footer__col a { transition: color var(--duration-fast) var(--ease); }
.footer__col a:hover { color: var(--brand-accent); }

.footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-subtle);
}
.footer__legal p {
  font-family: var(--font-label);
  font-size: var(--size-micro);
  letter-spacing: .05em;
  line-height: 1.85;
  color: var(--text-tertiary);
}


/* --- Pagina 404 ---------------------------------------------------------------------- */
.error {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 140px 0 80px;
}
.error__lede { margin-top: var(--sp-5); max-width: 46ch; }


/* ==========================================================================
   6b. RESPONSIVE — mobile-first nei contenuti, breakpoint per il layout
   ========================================================================== */

@media (max-width: 1080px) {
  .nav__links { gap: var(--sp-5); }
}

@media (max-width: 980px) {
  .nav__links,
  .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .split,
  .hero__grid,
  .grid-2,
  .team,
  .footer__grid,
  .circle { grid-template-columns: 1fr; }

  .split__aside { position: static; }
  .hero { min-height: auto; padding: 116px 0 52px; }
  .hero__side { padding-bottom: 0; }
  .grid-3,
  .logos { grid-template-columns: 1fr 1fr; }
  .h2, .h2--wide { max-width: 22ch; }
}

@media (max-width: 620px) {
  .grid-3,
  .logos { grid-template-columns: 1fr; }
  .hero__glow { right: -240px; width: 440px; height: 440px; }
  .person { flex-direction: column; gap: var(--sp-4); }
  .circle { padding: 24px 20px; }
  .h1 { max-width: 100%; }
}


/* ==========================================================================
   7. MOTION / ACCESSIBILITA'
   ========================================================================== */

/* Reveal allo scroll.
   Lo stato nascosto si applica SOLO se il JS e' attivo (classe .js su <html>):
   senza JS il contenuto resta visibile invece di sparire. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--duration-slow) var(--ease),
    transform var(--duration-slow) var(--ease);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}