/* =========================================================
   NAVBAR — 73:40 / 73:41
   barra piena 1512×98, fondo #D9D9D9, bordo #ACABAB,
   voci Albert Sans 20px nere, passo 50px, 65px dal bordo destro
   ========================================================= */
.site-header{
  position:relative; z-index:30;
  height:var(--header-h);
  background:var(--nav-bg);
  border:1px solid var(--nav-border);
}
.header-inner{
  height:100%;
  display:flex; align-items:center; justify-content:flex-end;
  padding-inline:0 clamp(16px, calc(65 * var(--px)), 65px);
  max-width:calc(1512 * var(--px));
}
.nav{ display:flex; gap:clamp(16px, calc(50 * var(--px)), 50px); }
.nav a{
  font-size:var(--fs-nav);
  color:#000; text-decoration:none; white-space:nowrap;
  padding-block:6px; border-bottom:2px solid transparent;
  transition:border-color .18s ease;
}
.nav a:hover, .nav a:focus-visible{ border-bottom-color:var(--red-btn); }
/* "HOME" serve solo nel menu a tendina del telefono */
.nav .nav-home{ display:none; }

.burger{ display:none; }
.header-logo--mobile{ display:none; }

/* Ancoraggio all'artboard centrato.
   Gli elementi in posizione assoluta dentro fasce a tutta larghezza vanno
   agganciati al blocco centrato (1512 px di tavola), non al bordo dello
   schermo: max(N, 50% - 756 + N) vale N fino a 1134 px di finestra e
   segue il centro oltre (tutto in px di tavola, cioè × var(--px)). */
/* =========================================================
   HERO — 262:520
   La S (riempimento del frame) al 70% sotto la foto al 50%:
   da qui l'aspetto slavato del mockup.
   ========================================================= */
.hero{
  position:relative;
  height:clamp(430px, calc(1038 * var(--px)), 1038px);   /* 98 → 1136 */
  overflow:hidden;
  background:var(--bg);
}
/* riempimento del frame: 2292×1164, object-cover, opacità 70% */
.hero-s{
  position:absolute; left:0;
  top:calc(-126 * var(--px));
  width:151.6%;                                          /* 2292 / 1512 */
  height:calc(1164 * var(--px));
  object-fit:cover; opacity:.6;
  max-width:none; pointer-events:none;
}
/* Oltre i 1134 px la S resta in scala con la tavola e segue il blocco
   centrato, come il logo e il titolo. Prima si allargava con lo schermo
   e veniva tagliata in alto (28/9/2026). Nel margine a sinistra la prima
   colonna di s-mark.png, larga 1449 px, viene stirata fino al bordo: così la
   doppia fascia continua senza stacchi. */
@media (min-width:1135px){
  .hero-s{ left:calc(50% - 756 * var(--px)); width:calc(2292 * var(--px)); }
  .hero::before{
    content:""; position:absolute; left:0;
    top:calc(-126 * var(--px));
    width:calc(50% - 756 * var(--px)); height:calc(1164 * var(--px));
    background:url("../img/s-mark.png") 0 0 / calc(100% * 1449) 100% no-repeat;
    opacity:.6; pointer-events:none;
  }
  .ft-home .hero::before{ top:calc(-114 * var(--px)); }
}
/* Component 2 (262:513): foto 1513×901 al 50%.
   hero.jpg e' la stessa foto del nodo Figma ma nella copia a 1920x1277
   estratta dal PDF: l'originale caricato su Figma e' solo 995x662. */
.hero-photo{
  position:absolute; left:0;
  top:calc(-12 * var(--px));
  width:100%;
  height:calc(901 * var(--px));
  /* nel PDF la fascia rende come una foto al 40%: il 50% dichiarato sul
     componente e' l'opacita' del nodo dentro un gruppo gia' velato */
  opacity:.4; overflow:hidden; pointer-events:none;
}
/* le tre foto sono impilate e si alternano in dissolvenza,
   come la Component 2 del design che ha tre varianti */
.hero-photo img{
  position:absolute;
  left:-1.54%; top:-13.42%; width:101.54%; height:113.46%;
  object-fit:cover; max-width:none;
  opacity:0; transition:opacity var(--hero-transition, 2083.538ms) ease-in-out;
}
.hero-photo img.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .hero-photo img{ transition:none; }
}

/* logo 9:4 — 315×160, a 91px dal bordo, 33px sotto la navbar */
.hero-logo{
  position:absolute; z-index:3;
  left:max(clamp(16px, calc(91 * var(--px)), 91px), calc(50% - 756 * var(--px) + 91 * var(--px)));
  top:clamp(16px, calc(33 * var(--px)), 33px);
  width:clamp(150px, calc(315 * var(--px)), 315px);
}
.hero-logo img{ width:100%; height:auto; }

/* titolo 10:6 — Allerta Stencil 64px #2F2F2F, cassa larga 700px
   y 324 sull'artboard = 226 sotto la navbar alta 98 */
.hero-title{
  position:absolute; z-index:3;
  left:max(clamp(16px, calc(91 * var(--px)), 91px), calc(50% - 756 * var(--px) + 91 * var(--px)));
  top:clamp(110px, calc(226 * var(--px)), 226px);
  width:clamp(260px, calc(700 * var(--px)), 700px);
  margin:0;
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-hero); line-height:1.285;   /* passo 82,25 come a progetto */
  color:var(--hero-ink);
}
.hero-title span{ display:block; }

/* freccia 77:30 — cerchio 60.7×62 pieno #E2E2E1, ruotato -90° */
.scroll-cue{
  position:absolute; z-index:3;
  left:48%; top:67%;
  width:clamp(34px, calc(61 * var(--px)), 61px);
  aspect-ratio:60.74 / 62;
  display:block;
  /* il centraggio sta su transform, non su translate: cosi' non va in
     conflitto con l'animazione di comparsa, che usa translate */
  transform:translateX(-50%);
  transition:transform .2s ease;
}
.scroll-cue svg{ width:100%; height:100%; rotate:-90deg; display:block; }
.scroll-cue:hover{ transform:translateX(-50%) translateY(5px); }

/* =========================================================
   SEZIONI DI TESTO
   ========================================================= */
.display{
  font-family:var(--font-display); font-weight:400;
  font-size:var(--fs-display); line-height:var(--lh-display);
  margin:0;
}
.split{ display:grid; align-items:start; }
.split-text p{ margin:0 0 1em; }
.split-text p:last-of-type{ margin-bottom:0; }
.split-text strong{ font-weight:600; }
.split-media{ margin:0; position:relative; }
/* height:auto serve a neutralizzare gli attributi width/height del markup,
   altrimenti prevalgono sull'aspect-ratio di progetto */
.split-media img{ width:100%; height:auto; border-radius:var(--radius-img); }

/* --- CHI SIAMO — 262:515 --------------------------------
   h2 #C20F1D a y1118; testo 584px a x114; foto 667px a x737;
   bottone 388×107 appoggiato sul bordo basso della foto      */
.sec-chisiamo{ padding-block:0 calc(77 * var(--px)); }   /* la card 73:69 attacca a 1737 */
/* il titolo risale di 18px sull'hero, come a progetto (y1118 contro hero fino a 1136) */
.sec-chisiamo .display{
  color:var(--red-card);
  position:relative; z-index:2;
  margin-top:calc(-18 * var(--px));
}
.sec-chisiamo .split{
  /* colonne fisse: 584 di testo, 38,8 di stacco, 667,4 di foto, da 114 a
     1404,2 — la foto sborda di 6px sul margine destro, come a progetto */
  grid-template-columns:calc(584 * var(--px)) 1fr;
  gap:calc(38.8 * var(--px));
  margin-right:calc(-6.2 * var(--px));
  margin-top:calc(27 * var(--px));   /* 1118 + 70 → 1215 */
}
/* 82:30: il testo attacca a 1290, e i due capoversi non hanno stacco */
.sec-chisiamo .split-text{ margin-top:calc(68 * var(--px)); }
.sec-chisiamo .split-text p{ margin-bottom:0; }
.sec-chisiamo .split-media img{ aspect-ratio:667 / 445; object-fit:cover; }

/* --- COME LAVORIAMO — 262:517 ---------------------------
   Dal 28/9/2026 e' uguale a Chi siamo: titolo a sinistra, testo di 584px a
   sinistra, foto 667x445 a destra con il bottone appoggiato come "entra nel
   mondo SIAL". Il testo e' piu' lungo: sta centrato sull'altezza della foto. */
.sec-comelavoriamo{ padding-block:calc(135 * var(--px)) calc(162 * var(--px)); }  /* h2 a 2782, card 73:106 a 3541 */
.sec-comelavoriamo .display{ color:var(--red-btn); }
.sec-comelavoriamo .split{
  grid-template-columns:calc(584 * var(--px)) 1fr;
  gap:calc(38.8 * var(--px));
  margin-right:calc(-6.2 * var(--px));
  margin-top:calc(27 * var(--px));
  align-items:center;
}
.sec-comelavoriamo .split-media img{ aspect-ratio:667 / 445; object-fit:cover; }
.sec-comelavoriamo .split-text{ text-align:left; }