/* 01-tokens.css */
/* ============================================================
   Token — Pascucci Yachts
   Palette campionata dai DUE filmati (ffmpeg → griglia 32×18 →
   celle piu' calde, piu' fredde, piu' chiare, piu' scure).
   Linguaggio di forma e tipografia dal riferimento del cliente.
   Rapporti calcolati, non stimati: vedi DESIGN.md.
   ============================================================ */

@font-face {
  font-family: 'Questrial';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/questrial-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Questrial';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/questrial-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/sourcesans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/sourcesans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- colore ----------------------------------------------------------
     Rapporti misurati su --sand (#EDE6D6) salvo dove indicato. */
  --sand:        #EDE6D6;   /* cielo di champagne dell'apertura           */
  --sand-2:      #E3DAC6;   /* stessa luce, un gradino sotto              */
  --ink:         #141C21;   /* ombra del capannone      — 13,8:1          */
  --ink-2:       #4A5A63;   /* luce fredda dalle vetrate —  5,8:1         */
  /* Il blu NON e' campionato dal filmato: e' il #0F2042 del logotipo
     fornito dal cliente, cioe' il colore di marca vero. Un marchio blu
     appoggiato su pannelli color petrolio sarebbero due scuri diversi
     nella stessa pagina. Il resto della palette resta campionato. */
  --deep:        #0F2042;   /* blu del marchio          — sand sopra 13,0:1 */
  --deep-2:      #0A1730;   /* piede                                      */
  --steel:       #23406E;   /* secondo pannello         — sand sopra 8,3:1 */
  --brass:       #A6702F;   /* mogano e scintille       —  3,4:1 grafici  */
  --brass-text:  #7A4E18;   /* idem scurito             —  5,8:1 su sand  */
  --brass-light: #D9A25E;   /* idem schiarito           —  7,0:1 su deep  */

  --on-dark:     #EDE6D6;
  --on-dark-2:   #A7B2C6;   /* 7,9:1 su --deep                            */

  --rule:        rgba(20, 28, 33, .14);
  --rule-strong: rgba(20, 28, 33, .30);
  --rule-dark:   rgba(237, 230, 214, .18);
  --rule-dark-strong: rgba(237, 230, 214, .38);

  /* --- tipografia ------------------------------------------------------
     Due caratteri, come nel riferimento: geometrico in display, umanista
     nel testo. Questrial ha un peso solo (400) ed e' esattamente il modo
     in cui il riferimento la usa — grande e leggera, mai in grassetto. */
  --display: 'Questrial', 'Century Gothic', 'Futura', sans-serif;
  --text: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:   clamp(2.6rem, 11.4vw, 11rem);
  --fs-h1:     clamp(2.35rem, 5vw, 4.5rem);
  --fs-h2:     clamp(1.9rem, 3.4vw, 3.2rem);
  --fs-h3:     clamp(1.1rem, 1.3vw, 1.3rem);
  --fs-lede:   clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-body:   1.0625rem;
  --fs-small:  0.9375rem;
  --fs-label:  0.72rem;

  /* --- ritmo ------------------------------------------------------------ */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;

  --page-pad: 48px;
  --gutter: 24px;
  --header-h: 76px;

  /* --- forma ------------------------------------------------------------
     Dal riferimento, misurato a risoluzione piena: pannelli 48px, media
     20px, tutto cio' che si preme e' una pillola. */
  --r-panel: 48px;
  --r-media: 20px;
  --r-pill: 999px;

  /* --- movimento -------------------------------------------------------- */
  --ease: cubic-bezier(.22, .7, .2, 1);
  --dur: 520ms;
}

@media (max-width: 900px) {
  :root {
    --page-pad: 24px; --gutter: 16px; --header-h: 64px;
    --r-panel: 28px; --r-media: 14px;
  }
}

/* 02-base.css */
/* ============================================================
   Base — azzeramento, tipografia, pillole, entrate in scena.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html.menu-open { overflow: hidden; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Una regola display non-none su un elemento con l'attributo hidden batte
   il display:none del browser. Senza questa riga un pannello nascosto
   resterebbe a schermo con il JavaScript disattivato. */
[hidden] { display: none !important; }

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

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h3, h4 {
  font-family: var(--text);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0; }

/* Etichetta: maiuscoletto spaziato, come nel riferimento. */
.eyebrow {
  font-family: var(--text);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass-text);
  margin-bottom: var(--space-5);
}
[data-band="deep"] .eyebrow, [data-band="steel"] .eyebrow,
[data-tone="deep"] .eyebrow, [data-tone="steel"] .eyebrow { color: var(--brass-light); }

.lede { font-size: var(--fs-lede); line-height: 1.5; text-wrap: pretty; }
.section-head .lede { margin-top: var(--space-5); max-width: 46ch; color: var(--ink-2); }

.prose p { margin-bottom: var(--space-5); max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.prose .lede { margin-bottom: var(--space-6); color: var(--ink); }

a { color: var(--brass-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
[data-band="deep"] a, [data-band="steel"] a,
[data-tone="deep"] a, [data-tone="steel"] a, .site-footer a { color: var(--brass-light); }

:focus-visible { outline: 2px solid var(--brass-text); outline-offset: 3px; }
[data-band="deep"] :focus-visible, [data-band="steel"] :focus-visible,
[data-tone="deep"] :focus-visible, [data-tone="steel"] :focus-visible,
.site-footer :focus-visible, .site-header :focus-visible,
.site-menu :focus-visible, .videohero :focus-visible, .scrolly :focus-visible {
  outline-color: var(--brass-light);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 300;
  background: var(--ink); color: var(--sand);
  padding: 10px 18px; border-radius: var(--r-pill);
  font-size: var(--fs-small); font-weight: 600;
  transform: translateY(-180%);
}
.skip-link:focus { transform: none; }

/* --- pillole ---------------------------------------------------------
   Dal riferimento: tutto cio' che si preme e' una pillola, etichetta
   maiuscola spaziata, piccola. Due varianti soltanto — piena in ottone,
   e la versione a vetro con il bordo da 1px che nel riferimento sta in
   testata. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--text); font-size: 0.78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 15px 28px;
  border: 1px solid var(--brass); background: var(--brass); color: #fff;
  border-radius: var(--r-pill); text-decoration: none; cursor: pointer;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease);
}
.btn:hover { background: var(--brass-text); border-color: var(--brass-text); }
.btn--small { padding: 10px 18px; font-size: 0.7rem; }
.btn--glass {
  background: rgba(237, 230, 214, .10);
  border-color: rgba(237, 230, 214, .55);
  color: var(--sand);
}
.btn--glass:hover { background: rgba(237, 230, 214, .2); border-color: var(--sand); color: var(--sand); }
/* Su fondo chiaro la variante a vetro diventa un contorno scuro: il bordo
   chiaro del riferimento su fondo osso sta a 1,3:1 e non si vede. */
[data-band="sand"] .btn--glass, [data-band="sand-2"] .btn--glass, [data-tone="sand"] .btn--glass {
  background: transparent; border-color: var(--rule-strong); color: var(--ink);
}
[data-band="sand"] .btn--glass:hover, [data-tone="sand"] .btn--glass:hover {
  background: transparent; border-color: var(--ink); color: var(--ink);
}
.btn-arrow { font-size: 1.1em; line-height: 0; }

.arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-small); font-weight: 600; letter-spacing: .02em;
  color: var(--brass-text); text-decoration: none;
}
.arrow-link::after {
  content: '\2192'; transition: transform 200ms var(--ease);
}
.arrow-link:hover::after { transform: translateX(5px); }
[data-band="deep"] .arrow-link, [data-band="steel"] .arrow-link { color: var(--brass-light); }

/* --- entrata in scena -------------------------------------------------
   Lo stato nascosto sta dietro .js, messa da uno script in <head>.
   Senza questa guardia, con il JavaScript disattivato, tutto quello che
   sta sotto la prima schermata resterebbe invisibile per sempre.
   Vedi references/scrollytelling.md. */
.js [data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .panel-section[data-reveal] .panel { transform: scale(.985); transition: transform var(--dur) var(--ease); }
.js .panel-section[data-reveal].is-in .panel { transform: none; }

/* --- movimento ridotto -------------------------------------------------
   Si fermano scrub, entrate, scroll morbido, il taglio delle didascalie e
   il video di apertura (quello lo mette in pausa app.js). Il piano
   sequenza torna alla colonna editoriale: se ne occupa scrolly.js, che
   rientra da solo in modalita' statica. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .panel-section[data-reveal] .panel { transform: none; }
}

/* 03-layout.css */
/* ============================================================
   Impianto — griglia, fasce, testata, menu, piede.
   ============================================================ */

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--page-pad);
  max-width: 1720px;
  margin-inline: auto;
}
.cell { grid-column: var(--from, 1) / var(--to, 13); min-width: 0; }

.section { padding-block: var(--space-24); }
.section[data-tight="true"] { padding-block: var(--space-16); }

[data-band="sand-2"] { background: var(--sand-2); }
[data-band="deep"] { background: var(--deep); color: var(--on-dark); }
[data-band="steel"] { background: var(--steel); color: var(--on-dark); }
[data-band="deep"] .lede, [data-band="steel"] .lede { color: var(--on-dark); }
[data-band="deep"] .section-head .lede, [data-band="steel"] .section-head .lede { color: var(--on-dark-2); }

.section-head h2 { max-width: 18ch; }

/* ============================================================
   Testata — compare solo risalendo.
   E' il comportamento del riferimento del cliente, ed e' anche il
   motivo per cui in quel filmato non si vede mai: lo scroll e'
   tutto in discesa. Vedi src/js/app.js.

   Il testo e' sempre chiaro; quello che cambia e' il fondo. Sopra
   l'apertura non c'e' fondo; appena la pagina si muove compare la
   barra scura. Nel riferimento il testo bianco finiva sul fondo
   osso a 1,3:1: qui no.
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--page-pad);
  color: var(--sand);
  background: transparent;
  transition: transform 380ms var(--ease), background-color 300ms var(--ease);
}
.site-header.is-floating { background: var(--deep); }
/* Sopra una pagina chiara la barra c'e' da subito: il testo della testata
   e' sempre chiaro, e su fondo sabbia senza barra starebbe a 1,3:1. */
.site-header[data-top="light"] { background: var(--deep); }
.site-header[data-hidden="true"] { transform: translateY(-102%); }
.menu-open .site-header { transform: translateY(-102%); }

.logo {
  display: flex; flex-direction: column; text-decoration: none;
  color: inherit; line-height: 1;
}
/* Il logotipo e' largo dieci volte la sua altezza: si dimensiona sulla
   larghezza e l'altezza segue. currentColor lo fa seguire il contesto. */
.wordmark { width: 100%; height: auto; display: block; }
.logo .wordmark { width: 150px; }
.logo span {
  font-size: 0.6rem; font-weight: 600; letter-spacing: .22em;
  text-transform: uppercase; opacity: .72; margin-top: 6px;
}

.header-tools { display: flex; align-items: center; gap: var(--space-5); }

.lang { position: relative; }
.lang-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  background: none; border: 0; padding: 6px 2px; cursor: pointer;
  color: inherit; font-family: var(--text);
  font-size: 0.7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.lang-toggle svg { width: 15px; height: 15px; }
.lang-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 160px;
  list-style: none; margin: 0; padding: var(--space-2) 0;
  background: var(--sand); border-radius: var(--r-media);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), visibility 180ms;
}
.lang[data-open="true"] .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu a {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 10px 18px; text-decoration: none; color: var(--ink); font-size: var(--fs-small);
}
.lang-menu a:hover { background: var(--sand-2); }
.lang-code { font-size: .68rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); }

.menu-toggle {
  display: flex; align-items: center; gap: var(--space-3);
  text-decoration: none; color: inherit; padding: 6px 2px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.menu-bars { position: relative; display: block; width: 22px; height: 9px; }
.menu-bars::before, .menu-bars::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1.5px;
  background: currentColor; transition: transform 220ms var(--ease);
}
.menu-bars::before { top: 0; }
.menu-bars::after { bottom: 0; }
.menu-toggle:hover .menu-bars::before { transform: translateX(4px); }
.menu-toggle:hover .menu-bars::after { transform: translateX(-4px); }

@media (max-width: 640px) {
  .header-cta { display: none; }
  .lang-toggle span { display: none; }
  .logo span { display: none; }
  .logo .wordmark { width: 118px; }
  .menu-brand { width: 118px; top: 24px; }
}

/* ============================================================
   Il pannello di navigazione
   Si apre con :target (quindi anche senza JavaScript) e app.js lo
   promuove a bottone vero.
   ============================================================ */
.site-menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--deep); color: var(--on-dark);
  transform: translateY(-101%);
  transition: transform 480ms var(--ease);
  overflow-y: auto;
}
.site-menu:target, .site-menu.is-open { transform: none; }
.menu-inner {
  min-height: 100%; padding: var(--space-16) var(--page-pad) var(--space-12);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 1720px; margin-inline: auto;
}
.menu-brand {
  position: absolute; top: 30px; left: var(--page-pad);
  width: 150px; color: var(--sand);
}
.menu-close {
  position: absolute; top: 18px; right: var(--page-pad);
  width: 48px; height: 48px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 1px solid var(--rule-dark-strong); color: var(--sand);
  text-decoration: none; font-size: 1.6rem; line-height: 1;
}
.menu-close:hover { background: rgba(237, 230, 214, .12); }

.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { border-top: 1px solid var(--rule-dark); }
.menu-list li:last-child { border-bottom: 1px solid var(--rule-dark); }
.menu-list a {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6); align-items: baseline;
  padding: var(--space-5) 0; text-decoration: none; color: var(--sand);
  transition: padding-left 240ms var(--ease), color 240ms var(--ease);
}
.menu-list a:hover, .menu-list a[aria-current="page"] { padding-left: var(--space-5); color: var(--brass-light); }
.menu-list em {
  font-style: normal; font-size: 0.72rem; font-weight: 600;
  letter-spacing: .12em; color: var(--on-dark-2); font-variant-numeric: tabular-nums;
}
.menu-list span {
  font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.05;
}
.menu-list small { font-size: var(--fs-small); color: var(--on-dark-2); }
.menu-foot { margin-top: var(--space-16); }
.menu-foot address {
  font-style: normal; font-size: var(--fs-small); line-height: 1.8; color: var(--on-dark-2);
}
@media (max-width: 780px) {
  .menu-list a { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3) var(--space-4); }
  .menu-list small { grid-column: 2; }
}

/* ============================================================
   Piede
   ============================================================ */
.site-footer {
  background: var(--deep-2); color: var(--on-dark);
  padding-block: var(--space-24) var(--space-8);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
}
.footer-grid { padding-bottom: var(--space-16); }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand .wordmark { width: 196px; }
.footer-brand span {
  font-family: var(--text); font-size: 0.62rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; opacity: .72; margin-top: 8px;
}
.footer-claim { margin-top: var(--space-6); color: var(--on-dark-2); max-width: 34ch; }
.footer-address {
  font-style: normal; margin-top: var(--space-8);
  color: var(--on-dark-2); font-size: var(--fs-small); line-height: 1.8;
}
.footer-col h2 {
  font-family: var(--text); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass-light);
}
.footer-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.footer-list li { margin-bottom: var(--space-3); }
.footer-list a { color: var(--on-dark); text-decoration: none; font-size: var(--fs-small); }
.footer-list a:hover { color: var(--brass-light); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--space-6);
  padding-top: var(--space-6); border-top: 1px solid var(--rule-dark);
  font-size: 0.78rem; color: var(--on-dark-2);
}
.footer-legal a { color: var(--on-dark-2); }

@media (max-width: 900px) {
  .cell { grid-column: 1 / -1 !important; }
  .footer-col { margin-top: var(--space-10); }
  .section { padding-block: var(--space-16); }
  .section[data-tight="true"] { padding-block: var(--space-12); }
}

/* 04-films.css */
/* ============================================================
   I due filmati.

   Tutt'e due a pieno campo, 100svh, con tutto il resto che ci
   galleggia sopra. Non si incorniciano, non si affiancano a una
   colonna, non si rientrano sotto la testata: vedi
   references/variation.md, "What is NOT a variation axis".

   APERTURA  <video> muto in ciclo — riproduce e basta.
   SEQUENZA  canvas + fotogrammi — scrubbata dallo scroll.
   La differenza e' spiegata in tools/encode-media.sh.
   ============================================================ */

/* ============================================================
   1. L'apertura
   ============================================================ */
.videohero { position: relative; background: var(--deep); }
.vh-stage {
  position: relative;
  height: 100svh; min-height: 560px;
  overflow: hidden;
}
.vh-video, .vh-poster, .vh-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.vh-poster { z-index: 1; }
.vh-video { z-index: 2; }
/* Con movimento ridotto app.js mette in pausa il video: sotto resta il
   poster, che e' lo stesso fotogramma a video fermo. */
@media (prefers-reduced-motion: reduce) { .vh-video { display: none; } }

/* La velatura dell'apertura: il filmato e' chiaro in alto (cielo di
   champagne, celle di picco L=0,87) e scuro in basso (acqua, L=0,06).
   Quindi una base piatta leggera su tutto piu' una sfumatura dal basso
   che regge il titolo. Niente backdrop-filter sopra un filmato. */
.vh-veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(10, 16, 20, .46) 0, rgba(10, 16, 20, 0) 42%),
    linear-gradient(to top, rgba(10, 16, 20, .72) 0, rgba(10, 16, 20, .18) 46%, rgba(10, 16, 20, 0) 66%);
}

.vh-inner {
  position: absolute; inset: 0; z-index: 4;
  padding: calc(var(--header-h) + var(--space-6)) var(--page-pad) var(--space-12);
  display: flex; flex-direction: column;
  color: var(--sand);
  max-width: 1720px; margin-inline: auto;
}
.vh-top {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-6);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.vh-eyebrow { color: var(--brass-light); }
/* margin-left:auto e non solo space-between: senza l'etichetta a
   sinistra il luogo, unico figlio, scivolerebbe a inizio riga. */
.vh-place { color: var(--sand); opacity: .8; margin-left: auto; }

/* La riga di apertura e' ancorata alla linea di base, a piena larghezza,
   con tutto il resto agli estremi. Vedi DESIGN.md. */
.vh-title {
  margin-top: auto;
  font-size: var(--fs-hero);
  line-height: .92;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.vh-foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--space-8); margin-top: var(--space-8);
  padding-top: var(--space-6); border-top: 1px solid var(--rule-dark);
}
.vh-sub { max-width: 34ch; font-size: var(--fs-lede); line-height: 1.45; }
.vh-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); flex-shrink: 0; }

/* Richiamo allo scroll: una linea che scende, senza parola — la parola
   resta per i lettori di schermo. */
.vh-cue {
  position: absolute; z-index: 4; left: 50%; bottom: 0;
  width: 1px; height: 56px; transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(237, 230, 214, 0), rgba(237, 230, 214, .75));
  animation: cueDrop 2.6s var(--ease) infinite;
}
.vh-cue span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@keyframes cueDrop {
  0%, 100% { transform: translateX(-50%) scaleY(.4); transform-origin: bottom; opacity: .5; }
  50% { transform: translateX(-50%) scaleY(1); transform-origin: bottom; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .vh-cue { animation: none; } }

@media (max-width: 900px) {
  .vh-foot { flex-direction: column; align-items: flex-start; gap: var(--space-5); }
  .vh-sub { font-size: 1rem; max-width: none; }
  .vh-title { line-height: .96; }
}

/* ============================================================
   2. Il piano sequenza
   ============================================================ */
.scrolly { position: relative; height: 900vh; background: var(--deep); }
@media (max-width: 900px) { .scrolly { height: 760vh; } }

.scrolly-stage {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
}
.scrolly-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrolly-poster { position: absolute; inset: 0; }
.scrolly-poster img { width: 100%; height: 100%; object-fit: cover; }
[data-painted="true"] .scrolly-poster { opacity: 0; transition: opacity 300ms linear; }

/* La velatura, MISURATA su questo filmato e non stimata.
   Ho campionato la luminanza massima nelle tre zone dove finisce il
   testo, su un fotogramma ogni quattro di tutta la sequenza:

     alto-sinistra   L max 0,981   (t=16,67s, il sole sull'acqua)
     basso-sinistra  L max 0,615   (t=13,67s)
     basso-destra    L max 0,926   (t=7,67s, l'arco di saldatura)

   Il primo numero e' praticamente bianco: la sfumatura che avevo
   scritto a occhio (.58 su 320px) lasciava il titolo a 1,9:1 su quel
   fotogramma. Rifatta partendo dal calcolo inverso — perche' il cream
   (#EDE6D6, L=0,79) arrivi a 4,5:1 sopra L=0,98 serve alpha 0,60, e
   perche' l'ottone chiaro regga 3:1 come grafica serve 0,64.

   Quindi due fasce che TENGONO il valore per tutta l'altezza del testo
   e poi sfumano, invece di partire alte e crollare subito. La banda
   centrale resta pulita: e' dove sta il soggetto.
   Niente backdrop-filter sopra un filmato che cambia a ogni fotogramma. */
.scrolly-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(10, 16, 20, .74) 0,
      rgba(10, 16, 20, .62) 280px,
      rgba(10, 16, 20, 0) 520px),
    linear-gradient(to top,
      rgba(10, 16, 20, .76) 0,
      rgba(10, 16, 20, .60) 220px,
      rgba(10, 16, 20, 0) 460px);
}

.scrolly-stage > * { color: var(--sand); }

/* --- l'apertura della sequenza: si ritira nel primo 4,5% di scroll --- */
.scrolly-lead {
  position: absolute; z-index: 3;
  left: var(--page-pad); right: var(--page-pad);
  top: 50%; transform: translateY(-50%);
  max-width: 22ch;
}
.lead-eyebrow {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass-light);
}
.lead-title { font-size: clamp(2.2rem, 5.2vw, 4.6rem); margin-top: var(--space-5); }
.lead-text { margin-top: var(--space-5); color: var(--on-dark-2); max-width: 34ch; }

/* --- le didascalie: agli angoli opposti ------------------------------
   Titolo in alto a sinistra, corpo in basso a destra. E'
   l'impaginazione dei pannelli del riferimento portata sul filmato. */
.scrolly-captions { position: absolute; inset: 0; z-index: 3; }
.scrolly-phase { position: absolute; inset: 0; }
.cap-head {
  position: absolute;
  top: calc(var(--header-h) + var(--space-8));
  left: var(--page-pad);
  /* in px, non in ch: `ch` si risolverebbe sul font del genitore — il
     testo a 17px — e non su quello del titolo, che e' tre volte piu'
     grande. Con 30ch il titolo veniva largo 255px e andava a quattro
     righe addosso all'elenco dei capitoli. */
  max-width: min(46%, 620px);
}
.cap-chapter {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sand);
  margin-bottom: var(--space-4);
}
.cap-head h2 { font-size: clamp(1.9rem, 4.2vw, 3.6rem); }
.cap-body {
  position: absolute;
  right: var(--page-pad); bottom: var(--space-16);
  max-width: min(38%, 430px);
  font-size: var(--fs-lede); line-height: 1.45;
}

/* La transizione di questo sito: un taglio che sale dalla linea di base.
   Vale solo in scrub — in statico le didascalie sono una colonna
   editoriale e devono essere sempre visibili. */
[data-mode="scrub"] .cap-head h2,
[data-mode="scrub"] .cap-chapter,
[data-mode="scrub"] .cap-body p {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 480ms var(--ease);
}
[data-mode="scrub"] .scrolly-phase.is-active .cap-chapter { clip-path: inset(0 0 0 0); }
[data-mode="scrub"] .scrolly-phase.is-active .cap-head h2 { clip-path: inset(0 0 0 0); transition-delay: 60ms; }
[data-mode="scrub"] .scrolly-phase.is-active .cap-body p { clip-path: inset(0 0 0 0); transition-delay: 120ms; }

/* --- avanzamento: i nomi dei capitoli, non i numeri -------------------
   L'elenco E' l'elemento .scrolly-counter del contratto: scrolly.js gli
   assegna l'opacita' (compare mentre l'apertura si ritira) e scrive il
   numero nel primo <b>, che sta nascosto per i lettori di schermo.
   Lo stato attivo lo porta :has() sulla fase accesa. */
.chapters {
  position: absolute; z-index: 3;
  left: var(--page-pad); bottom: var(--space-16);
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 5px;
  opacity: 0;
}
.ch {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: 0.74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  /* 78% e non 45%: sotto la velatura misurata, il 45% stava a 3,5:1.
     L'attivo si distingue dal filetto, non dall'opacita'. */
  color: rgba(237, 230, 214, .78);
  transition: color 300ms var(--ease);
}
.ch::before {
  content: ''; width: 16px; height: 1px; background: currentColor;
  transition: width 300ms var(--ease), background-color 300ms var(--ease);
  flex-shrink: 0;
}
.scrolly-captions:has(.scrolly-phase:nth-of-type(1).is-active) ~ .chapters .ch[data-i="1"],
.scrolly-captions:has(.scrolly-phase:nth-of-type(2).is-active) ~ .chapters .ch[data-i="2"],
.scrolly-captions:has(.scrolly-phase:nth-of-type(3).is-active) ~ .chapters .ch[data-i="3"],
.scrolly-captions:has(.scrolly-phase:nth-of-type(4).is-active) ~ .chapters .ch[data-i="4"],
.scrolly-captions:has(.scrolly-phase:nth-of-type(5).is-active) ~ .chapters .ch[data-i="5"],
.scrolly-captions:has(.scrolly-phase:nth-of-type(6).is-active) ~ .chapters .ch[data-i="6"],
.scrolly-captions:has(.scrolly-phase:nth-of-type(7).is-active) ~ .chapters .ch[data-i="7"] {
  color: var(--sand);
}
.scrolly-captions:has(.scrolly-phase:nth-of-type(1).is-active) ~ .chapters .ch[data-i="1"]::before,
.scrolly-captions:has(.scrolly-phase:nth-of-type(2).is-active) ~ .chapters .ch[data-i="2"]::before,
.scrolly-captions:has(.scrolly-phase:nth-of-type(3).is-active) ~ .chapters .ch[data-i="3"]::before,
.scrolly-captions:has(.scrolly-phase:nth-of-type(4).is-active) ~ .chapters .ch[data-i="4"]::before,
.scrolly-captions:has(.scrolly-phase:nth-of-type(5).is-active) ~ .chapters .ch[data-i="5"]::before,
.scrolly-captions:has(.scrolly-phase:nth-of-type(6).is-active) ~ .chapters .ch[data-i="6"]::before,
.scrolly-captions:has(.scrolly-phase:nth-of-type(7).is-active) ~ .chapters .ch[data-i="7"]::before {
  width: 44px; background: var(--brass-light);
}

/* La colonna dei capitoli e quella del titolo stanno tutt'e due a
   sinistra ma a quote diverse. Sotto i 1100px il titolo si allarga e
   l'elenco sparisce: meglio niente che due colonne che si toccano. */
@media (max-width: 1100px) {
  .cap-head { max-width: min(70%, 460px); }
  .cap-body { max-width: min(58%, 380px); bottom: var(--space-12); }
}
@media (max-width: 820px) {
  /* sul telefono l'elenco dei capitoli e il corpo del testo si
     contendono lo stesso angolo: vince il testo. */
  .chapters { display: none; }
}
@media (max-width: 700px) {
  .cap-head { max-width: none; right: var(--page-pad); }
  .cap-body { max-width: none; left: var(--page-pad); bottom: var(--space-10); font-size: 1rem; }
  .cap-head h2 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .scrolly-lead { max-width: none; }
}

/* ============================================================
   3. Versione statica — senza JavaScript, o con movimento ridotto.
   E' lo stato di partenza dell'HTML: qui non si degrada, si
   promuove. I sette fermi immagine sono renderizzati dal
   generatore, non costruiti dal JavaScript: sono proprio per chi
   il JavaScript non ce l'ha.
   ============================================================ */
.scrolly[data-mode="static"] { height: auto; background: var(--deep); }
.scrolly[data-mode="static"] .scrolly-stage {
  position: static; height: auto; overflow: visible;
  display: flex; flex-direction: column;
}
.scrolly[data-mode="static"] .scrolly-canvas,
.scrolly[data-mode="static"] .scrolly-veil,
.scrolly[data-mode="static"] .chapters { display: none; }
.scrolly[data-mode="static"] .scrolly-poster {
  position: static; order: 1; aspect-ratio: 16 / 9;
}
.scrolly[data-mode="static"] .scrolly-lead {
  position: static; transform: none; order: 0; max-width: none;
  padding: var(--space-20) var(--page-pad) var(--space-12);
  max-width: 1720px; margin-inline: auto; width: 100%;
}
.scrolly[data-mode="static"] .scrolly-captions {
  position: static; order: 2;
  padding: var(--space-16) var(--page-pad);
  max-width: 1720px; margin-inline: auto; width: 100%;
}
.scrolly[data-mode="static"] .scrolly-phase {
  position: static;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12);
  align-items: center; padding-block: var(--space-12);
  border-top: 1px solid var(--rule-dark);
}
.scrolly[data-mode="static"] .cap-head,
.scrolly[data-mode="static"] .cap-body { position: static; max-width: none; }
.scrolly[data-mode="static"] .cap-body { margin-top: var(--space-5); color: var(--on-dark-2); }
.scrolly[data-mode="static"] .scrolly-still { grid-row: span 2; margin: 0; }
.scrolly[data-mode="static"] .scrolly-still img { width: 100%; border-radius: var(--r-media); }
.scrolly[data-mode="static"] .scrolly-phase[data-side="right"] .scrolly-still { order: -1; }

/* In scrub i fermi immagine vengono tolti dal DOM da scrolly.js: questa
   regola serve solo al lampo prima che il JavaScript giri. */
[data-mode="scrub"] .scrolly-still { display: none; }

@media (max-width: 900px) {
  .scrolly[data-mode="static"] .scrolly-phase { grid-template-columns: 1fr; gap: var(--space-6); }
  .scrolly[data-mode="static"] .scrolly-still { grid-row: auto; }
  .scrolly[data-mode="static"] .scrolly-phase[data-side="right"] .scrolly-still { order: 0; }
}

/* 05-blocks.css */
/* ============================================================
   Blocchi.
   Pannelli grandi a raggio largo, testo agli angoli opposti,
   foto sovrapposte in grappoli: e' il linguaggio del riferimento
   del cliente. Niente bordi, niente ombre. Vedi DESIGN.md.
   ============================================================ */

/* ============================================================
   Il pannello — il blocco portante
   ============================================================ */
.panel-section { padding-block: var(--space-8); }
.panel-section:first-child { padding-top: var(--space-16); }
.panel {
  position: relative;
  margin-inline: var(--page-pad);
  max-width: 1720px;
  border-radius: var(--r-panel);
  padding: var(--space-16);
  min-height: min(78vh, 760px);
  display: flex; flex-direction: column;
  overflow: hidden;
}
@media (min-width: 1817px) { .panel { margin-inline: auto; } }
.panel[data-tone="deep"] { background: var(--deep); color: var(--on-dark); }
.panel[data-tone="steel"] { background: var(--steel); color: var(--on-dark); }
.panel[data-tone="sand"] { background: var(--sand-2); color: var(--ink); }

.panel-head {
  position: relative; z-index: 3;
  /* in px e non in ch: `ch` qui si risolverebbe sul font del contenitore,
     non su quello del titolo, e il titolo verrebbe largo 190px */
  max-width: min(52%, 560px);
}
.panel-head h2 { font-size: clamp(2rem, 3.8vw, 3.4rem); }
.panel-body {
  position: relative; z-index: 3;
  margin-top: auto; margin-left: auto;
  max-width: min(46%, 420px);
  font-size: var(--fs-small); line-height: 1.6;
}
.panel[data-tone="deep"] .panel-body, .panel[data-tone="steel"] .panel-body { color: var(--on-dark-2); }
.panel-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.panel-list li { padding: var(--space-3) 0; border-top: 1px solid var(--rule-dark); }
.panel[data-tone="sand"] .panel-list li { border-top-color: var(--rule); }
.panel-body .btn { margin-top: var(--space-6); }

/* --- il grappolo: foto sovrapposte, non una griglia ------------------
   La separazione qui e' la sovrapposizione. Niente bordi, niente ombre:
   le immagini si accavallano fra loro e basta. */
/* Il grappolo si ferma prima della colonna di destra: li' ci va il corpo
   del testo, e nel riferimento le foto non ci finiscono mai sopra. */
.panel .cluster { position: absolute; z-index: 1; left: 6%; right: 37%; top: 30%; bottom: 10%; }
.cluster { pointer-events: none; }
.cl { position: absolute; margin: 0; }
.cl img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-media); }
.panel .cl--1 { left: 0;   top: 30%; width: 40%; height: 66%; }
.panel .cl--2 { left: 31%; top: 4%;  width: 42%; height: 78%; }
.panel .cl--3 { left: 66%; top: 22%; width: 34%; height: 56%; }
.panel .cluster[data-count="2"] .cl--1 { left: 0;   top: 18%; width: 48%; height: 74%; }
.panel .cluster[data-count="2"] .cl--2 { left: 42%; top: 0;   width: 52%; height: 80%; }
.panel .cluster[data-count="1"] .cl--1 { left: 4%;  top: 2%;  width: 88%; height: 92%; }

@media (max-width: 1000px) {
  .panel { min-height: 0; padding: var(--space-10); }
  .panel-head, .panel-body { max-width: none; }
  .panel-body { margin-left: 0; margin-top: var(--space-10); }
  .panel .cluster {
    position: static; display: grid; grid-template-columns: repeat(3, 1fr);
    margin-top: var(--space-10); align-items: end;
  }
  .panel .cl { position: static; }
  .panel .cl img { aspect-ratio: 3 / 4; height: auto; }
  .panel .cl--1 { margin-right: -12%; z-index: 1; }
  .panel .cl--2 { z-index: 2; margin-top: -8%; }
  .panel .cl--3 { margin-left: -12%; z-index: 1; }
  .panel .cluster[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
  .panel .cluster[data-count="1"] { grid-template-columns: 1fr; }
}

/* ============================================================
   La gamma in scala — BLOCCO FIRMA

   I tre profili disegnati sulla stessa linea di galleggiamento e
   nella stessa scala: la larghezza di ogni disegno e' la lunghezza
   reale divisa per quella del piu' lungo, e l'altezza segue, cosi'
   il 42 non risulta alto come il 76. Il filetto sotto ogni scafo e'
   l'acqua; il righello in fondo e' comune a tutt'e tre.
   ============================================================ */
.hulls { list-style: none; margin: var(--space-16) 0 0; padding: 0; }
.hullrow {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-12); align-items: end;
  padding-bottom: var(--space-8); margin-bottom: var(--space-10);
}
.hull-line { position: relative; padding-bottom: 1px; }
.hull-line::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--rule-strong);
}
[data-band="deep"] .hull-line::after, [data-band="steel"] .hull-line::after { background: var(--rule-dark-strong); }
.hull-draw { width: var(--w); }
.hull-draw svg { width: 100%; height: auto; display: block; }
.h-hull { fill: var(--ink); }
/* la sovrastruttura piu' chiara dello scafo: senza stacco le tre sagome
   diventano cunei e non si legge piu' dove finisce il ponte */
.h-house, .h-fly, .h-deck { fill: var(--ink); opacity: .48; }
.h-drive { fill: var(--brass); }
[data-band="deep"] .h-hull, [data-band="steel"] .h-hull { fill: var(--sand); }
[data-band="deep"] .h-house, [data-band="deep"] .h-fly, [data-band="deep"] .h-deck,
[data-band="steel"] .h-house, [data-band="steel"] .h-fly, [data-band="steel"] .h-deck { fill: var(--sand); opacity: .5; }
[data-band="deep"] .h-drive, [data-band="steel"] .h-drive { fill: var(--brass-light); }

.hull-meta h3 { font-family: var(--display); font-weight: 400; font-size: 1.9rem; letter-spacing: -0.01em; }
.hull-role {
  margin-top: var(--space-2); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text);
}
[data-band="deep"] .hull-role, [data-band="steel"] .hull-role { color: var(--brass-light); }
.hull-specs { margin: var(--space-6) 0 0; }
.hull-specs > div {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: 9px 0; border-top: 1px solid var(--rule);
}
[data-band="deep"] .hull-specs > div, [data-band="steel"] .hull-specs > div { border-top-color: var(--rule-dark); }
.hull-specs dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); }
[data-band="deep"] .hull-specs dt, [data-band="steel"] .hull-specs dt { color: var(--on-dark-2); }
.hull-specs dd { margin: 0; font-size: 0.92rem; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; }
.hull-meta .arrow-link { margin-top: var(--space-5); }

/* Il righello: un segno ogni cinque metri, sulla stessa scala dei
   profili, quindi si legge da sotto a tutt'e tre. */
.hull-rule { position: relative; height: 42px; margin-top: var(--space-4); }
.hull-rule > span { position: absolute; left: var(--at); top: 0; }
.hull-rule i { display: block; width: 1px; height: 10px; background: var(--rule-strong); }
.hull-rule b {
  display: block; margin-top: 6px; font-size: 0.7rem; font-weight: 600;
  color: var(--ink-2); font-variant-numeric: tabular-nums; transform: translateX(-50%);
}
.hull-rule > span:first-of-type b { transform: none; }
.hull-rule-unit {
  position: absolute; right: 0; top: 0; font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
[data-band="deep"] .hull-rule i { background: var(--rule-dark-strong); }
[data-band="deep"] .hull-rule b, [data-band="deep"] .hull-rule-unit { color: var(--on-dark-2); }
.fleet-note { margin-top: var(--space-8); color: var(--ink-2); font-size: var(--fs-small); max-width: 70ch; }
[data-band="deep"] .fleet-note { color: var(--on-dark-2); }

@media (max-width: 900px) {
  .hullrow { grid-template-columns: 1fr; gap: var(--space-6); }
  .hull-meta h3 { font-size: 1.5rem; }
}

/* ============================================================
   Le linee di lavoro
   ============================================================ */
.lines {
  margin-top: var(--space-16);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
}
.line a { display: block; text-decoration: none; color: inherit; }
.line-figure { margin: 0; overflow: hidden; border-radius: var(--r-media); }
.line-figure img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  transition: transform 620ms var(--ease);
}
.line a:hover .line-figure img { transform: scale(1.04); }
.line-num {
  margin-top: var(--space-5); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; color: var(--brass-text); font-variant-numeric: tabular-nums;
}
.line h3 { margin-top: var(--space-3); font-size: 1.25rem; }
.line-text { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--fs-small); }
.line-go {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4);
  font-size: var(--fs-small); font-weight: 600; color: var(--brass-text);
}
.line-go::after { content: '\2192'; transition: transform 200ms var(--ease); }
.line a:hover .line-go::after { transform: translateX(5px); }
[data-band="deep"] .line-text { color: var(--on-dark-2); }
[data-band="deep"] .line-num, [data-band="deep"] .line-go { color: var(--brass-light); }
@media (max-width: 1000px) { .lines { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10); } }
@media (max-width: 560px) { .lines { grid-template-columns: 1fr; } }

/* ============================================================
   Numeri
   ============================================================ */
.stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.stat { border-top: 1px solid var(--rule); padding-top: var(--space-6); }
[data-band="deep"] .stat, [data-band="steel"] .stat { border-top-color: var(--rule-dark); }
.stat dd { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.stat b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.4rem, 4.6vw, 4.2rem); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.stat i { font-style: normal; font-size: 1rem; font-weight: 600; color: var(--brass-text); }
[data-band="deep"] .stat i, [data-band="steel"] .stat i { color: var(--brass-light); }
.stat dt { margin-top: var(--space-4); font-size: var(--fs-small); color: var(--ink-2); }
[data-band="deep"] .stat dt, [data-band="steel"] .stat dt { color: var(--on-dark-2); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-10); } }

/* ============================================================
   Immagine e testo
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; }
.split[data-side="right"] .split-media { order: 2; }
.split-media .cluster { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); align-items: end; }
.split-media .cl { position: static; }
.split-media .cl img { aspect-ratio: 4 / 5; height: auto; }
.split-media .cl--1 { z-index: 2; }
.split-media .cl--2 { margin-left: -14%; margin-bottom: 12%; z-index: 1; }
.split-media .cluster[data-count="1"] { grid-template-columns: 1fr; }
.split-media .cluster[data-count="1"] .cl--1 img { aspect-ratio: 4 / 3; }
.split-body h2 { margin-top: var(--space-2); }
.split-body .lede { margin-top: var(--space-5); }
.split-body .prose { margin-top: var(--space-5); color: var(--ink-2); }
.split-cta { margin-top: var(--space-8); }
.tick-list { list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.tick-list li { padding: var(--space-4) 0 var(--space-4) var(--space-8); border-top: 1px solid var(--rule); position: relative; }
.tick-list li::before {
  content: ''; position: absolute; left: 0; top: calc(var(--space-4) + 0.6em);
  width: 20px; height: 1px; background: var(--brass);
}
[data-band="deep"] .tick-list li, [data-band="steel"] .tick-list li { border-top-color: var(--rule-dark); }
[data-band="deep"] .tick-list li::before, [data-band="steel"] .tick-list li::before { background: var(--brass-light); }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: var(--space-10); }
  .split[data-side="right"] .split-media { order: 0; }
}

/* ============================================================
   Passi, righe, scheda, citazione, rimandi, chiusura
   ============================================================ */
.steps {
  list-style: none; margin: var(--space-16) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
}
.step { border-top: 1px solid var(--rule); padding-top: var(--space-6); }
[data-band="deep"] .step, [data-band="steel"] .step { border-top-color: var(--rule-dark); }
.step-num { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  color: var(--brass-text); font-variant-numeric: tabular-nums; }
[data-band="deep"] .step-num, [data-band="steel"] .step-num { color: var(--brass-light); }
.step h3 { margin-top: var(--space-5); }
.step p { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--fs-small); }
[data-band="deep"] .step p, [data-band="steel"] .step p { color: var(--on-dark-2); }
.step-time {
  margin-top: var(--space-5) !important; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink) !important;
}
[data-band="deep"] .step-time, [data-band="steel"] .step-time { color: var(--on-dark) !important; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; row-gap: var(--space-8); } }

.rows { margin-top: var(--space-16); border-top: 1px solid var(--rule-strong); }
[data-band="deep"] .rows, [data-band="steel"] .rows { border-top-color: var(--rule-dark-strong); }
.row-item {
  display: grid; grid-template-columns: 56px 300px minmax(0, 1fr) 200px;
  gap: var(--space-8); padding-block: var(--space-6);
  border-bottom: 1px solid var(--rule); align-items: baseline;
}
[data-band="deep"] .row-item, [data-band="steel"] .row-item { border-bottom-color: var(--rule-dark); }
.row-index { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row-title { font-size: 1.2rem; }
.row-body { color: var(--ink-2); font-size: var(--fs-small); }
.row-meta { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass-text); text-align: right; }
[data-band="deep"] .row-body, [data-band="steel"] .row-body { color: var(--on-dark-2); }
[data-band="deep"] .row-index, [data-band="steel"] .row-index { color: var(--on-dark-2); }
[data-band="deep"] .row-meta, [data-band="steel"] .row-meta { color: var(--brass-light); }
@media (max-width: 1000px) {
  .row-item { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-3) var(--space-5); }
  .row-title, .row-body, .row-meta { grid-column: 2; }
  .row-meta { text-align: left; }
}

.specs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); }
.spec { display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--rule); }
[data-band="deep"] .spec, [data-band="steel"] .spec { border-top-color: var(--rule-dark); }
.spec dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); }
[data-band="deep"] .spec dt, [data-band="steel"] .spec dt { color: var(--on-dark-2); }
.spec dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.specs-note { margin-top: var(--space-6); color: var(--ink-2); font-size: var(--fs-small); }
[data-band="deep"] .specs-note { color: var(--on-dark-2); }
@media (max-width: 700px) { .specs { grid-template-columns: 1fr; } }

.quote-block { margin: 0; }
.quote-block blockquote { margin: 0; }
.quote-block p {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.6rem, 3.2vw, 2.9rem); line-height: 1.16;
  letter-spacing: -0.015em; text-wrap: balance;
}
.quote-block figcaption {
  margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--rule);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.quote-block figcaption span { display: block; margin-top: 6px; color: var(--ink-2); letter-spacing: .08em; }
[data-band="deep"] .quote-block figcaption { border-top-color: var(--rule-dark); }
[data-band="deep"] .quote-block figcaption span { color: var(--on-dark-2); }

.pagelinks-title { font-family: var(--text); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--space-8); }
.pagelinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.pagelink {
  display: block; padding: var(--space-8); border-radius: var(--r-media);
  background: var(--sand-2); text-decoration: none; color: inherit;
  transition: background 240ms var(--ease), transform 240ms var(--ease);
}
.pagelink:hover { background: var(--deep); color: var(--on-dark); transform: translateY(-4px); }
.kicker { display: block; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text); }
.pagelink:hover .kicker { color: var(--brass-light); }
.pagelink-title { display: block; margin-top: var(--space-4);
  font-family: var(--display); font-size: 1.35rem; line-height: 1.15; }
.pagelink-title::after { content: ' \2192'; }
@media (max-width: 860px) { .pagelinks { grid-template-columns: 1fr; } }

.cta-panel {
  border-radius: var(--r-panel); background: var(--deep); color: var(--on-dark);
  padding: var(--space-16);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-16); align-items: end;
}
.cta-section[data-band="deep"] .cta-panel { background: var(--steel); }
.cta-panel h2 { margin-top: var(--space-2); font-size: clamp(1.9rem, 3.4vw, 3rem); }
.cta-panel .lede { margin-top: var(--space-5); max-width: 44ch; color: var(--on-dark-2); }
.cta-panel .eyebrow { color: var(--brass-light); }
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 900px) {
  .cta-panel { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-10); }
}

.media-section { padding-block: 0 !important; }
.media-figure { margin: 0; position: relative; padding-inline: var(--page-pad); }
.media-figure img { width: 100%; height: clamp(320px, 56vh, 680px); object-fit: cover; border-radius: var(--r-panel); }
.media-figure figcaption {
  position: absolute; left: calc(var(--page-pad) + var(--space-8)); bottom: var(--space-8);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--sand);
}
.media-figure figcaption span { background: rgba(10, 16, 20, .68); padding: 9px 16px; border-radius: var(--r-pill); }

.table-scroll { overflow-x: auto; margin-top: var(--space-16); }
table.data { width: 100%; border-collapse: collapse; min-width: 620px; }
table.data caption {
  text-align: left; font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: var(--space-5);
}
table.data th, table.data td {
  text-align: left; padding: var(--space-4) var(--space-5) var(--space-4) 0;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
table.data thead th {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); border-bottom-color: var(--rule-strong);
}
table.data tbody th { font-weight: 600; font-size: 0.98rem; width: 26%; }
table.data td { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.table-note { margin-top: var(--space-5); color: var(--ink-2); font-size: var(--fs-small); }
[data-band="deep"] table.data th, [data-band="deep"] table.data td { border-bottom-color: var(--rule-dark); }
[data-band="deep"] table.data thead th, [data-band="deep"] table.data td { color: var(--on-dark-2); }

/* 06-forms.css */
/* ============================================================
   Form — campi a filo, pillole, nessun captcha (c'e' un honeypot).
   Validazione in linea con messaggi veri, consensi separati,
   conferma in linea invece della pagina di ringraziamento.
   ============================================================ */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.field { display: flex; flex-direction: column; gap: var(--space-2); grid-column: 1 / -1; }
.field--half { grid-column: span 1; }

.field label, .fieldset-legend {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.req { color: var(--brass-text); }

.field input, .field textarea {
  font-family: var(--text); font-size: var(--fs-body); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--rule-strong);
  border-radius: 0; padding: 11px 0; width: 100%;
  transition: border-color 200ms var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:hover, .field textarea:hover { border-bottom-color: var(--ink-2); }
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--brass); border-bottom-width: 2px; padding-bottom: 10px;
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-bottom-color: #9B2226; }
.field-error { color: #9B2226; font-size: var(--fs-small); }

.choice { grid-column: 1 / -1; border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fieldset-legend { width: 100%; margin-bottom: var(--space-3); }
.choice-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-option label {
  display: inline-block; cursor: pointer; border: 1px solid var(--rule-strong);
  border-radius: var(--r-pill); padding: 9px 18px;
  font-size: 0.8rem; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--ink);
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}
.choice-option input:checked + label { background: var(--brass); border-color: var(--brass); color: #fff; }
.choice-option input:focus-visible + label { outline: 2px solid var(--brass-text); outline-offset: 2px; }

/* Honeypot: fuori schermo, non display:none — i bot lo compilano
   comunque, le persone non lo vedono, i lettori di schermo lo saltano. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consents { grid-column: 1 / -1; display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.consent { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-3); align-items: start; }
.consent input {
  appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 2px 0 0;
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: transparent; cursor: pointer; position: relative;
}
.consent input:checked { background: var(--brass); border-color: var(--brass); }
.consent input:checked::after {
  content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(42deg);
}
.consent label { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }

.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6); margin-top: var(--space-4); }
.form-note { font-size: var(--fs-small); color: var(--ink-2); max-width: 40ch; }

.form-done { display: none; }
form[data-state="done"] { display: none; }
form[data-state="done"] + .form-done {
  display: block; border-top: 2px solid var(--brass); padding-top: var(--space-6);
}
.form-done h3 { font-family: var(--display); font-weight: 400; font-size: 1.6rem; }
.form-done p { margin-top: var(--space-3); color: var(--ink-2); }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
  .field--half { grid-column: 1 / -1; }
}

/* --- blocco contatto ------------------------------------------------------- */
.contact-side h2 { margin-top: var(--space-2); }
.contact-side .lede { margin-top: var(--space-5); max-width: 32ch; color: var(--ink-2); }
.contact-aside { margin: var(--space-10) 0 0; }
.contact-aside > div {
  display: grid; grid-template-columns: 116px 1fr; gap: var(--space-4);
  padding: var(--space-4) 0; border-top: 1px solid var(--rule);
}
.contact-aside dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); }
.contact-aside dd { margin: 0; font-size: var(--fs-small); }
@media (max-width: 900px) { .contact-form { margin-top: var(--space-12); } }

/* 07-panels.css */
/* ============================================================
   Pannello contatto.
   Entra al 40% di scroll o dopo 25 secondi, il primo dei due; mai
   all'ingresso, mai sull'exit intent; trattenuto sopra i due
   filmati e sopra il modulo di contatto; chiuso una volta, resta
   chiuso sette giorni. Le regole stanno in src/js/banner.js.
   ============================================================ */

.b2b-panel {
  position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 120;
  width: min(420px, calc(100vw - var(--space-6) * 2));
  background: var(--sand); color: var(--ink);
  border-radius: var(--r-panel);
  padding: var(--space-10);
  transform: translateY(calc(100% + var(--space-6)));
  transition: transform 480ms var(--ease);
  max-height: 88svh; overflow-y: auto;
}
.b2b-panel.is-open { transform: none; }

.b2b-close {
  position: absolute; top: 14px; right: 16px;
  width: 40px; height: 40px; border-radius: var(--r-pill);
  background: none; border: 1px solid var(--rule); color: var(--ink-2);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.b2b-close:hover { border-color: var(--ink); color: var(--ink); }

.b2b-panel h2 { font-size: 1.5rem; padding-right: var(--space-10); }
.b2b-step > h2 { margin-top: var(--space-4); }
.b2b-intro { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--fs-small); }
.b2b-choices { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
.b2b-option {
  text-align: left; cursor: pointer; border: 1px solid var(--rule);
  border-radius: var(--r-media); background: none;
  padding: var(--space-4) var(--space-5); display: grid; gap: 3px;
  transition: background 180ms var(--ease), border-color 180ms var(--ease);
}
.b2b-option:hover { background: var(--sand-2); border-color: var(--rule-strong); }
.b2b-option b { font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.b2b-option span { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }

.b2b-back, .b2b-toggle-more {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brass-text);
}
.b2b-back::before { content: '\2190  '; }
.b2b-toggle-more { grid-column: 1 / -1; justify-self: start; }
.b2b-panel .form-grid { gap: var(--space-4); margin-top: var(--space-5); }
.b2b-panel .form-actions { margin-top: var(--space-2); }

@media (max-width: 560px) {
  .b2b-panel { right: 0; bottom: 0; width: 100vw; border-radius: var(--r-panel) var(--r-panel) 0 0;
    padding: var(--space-8) var(--space-6) var(--space-10); transform: translateY(101%); }
}

/* 08-editorial.css */
/* ============================================================
   Editoriale — apertura di pagina, prosa, FAQ.
   ============================================================ */

.page-hero { padding-block: calc(var(--header-h) + var(--space-16)) var(--space-12); }
.page-hero[data-band="deep"], .page-hero[data-band="steel"] { color: var(--on-dark); }
.page-hero h1 { margin-top: var(--space-4); }
.page-hero .lede { margin-top: var(--space-6); max-width: 50ch; color: var(--ink-2); }
.page-hero[data-band="deep"] .lede, .page-hero[data-band="steel"] .lede { color: var(--on-dark-2); }

.breadcrumb ol {
  list-style: none; margin: 0 0 var(--space-6); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.breadcrumb li + li::before { content: '/'; color: var(--ink-2); margin-right: var(--space-2); }
.breadcrumb a { color: var(--ink-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--brass-text); }
.breadcrumb [aria-current] { color: var(--ink); }
[data-band="deep"] .breadcrumb a, [data-band="deep"] .breadcrumb li + li::before,
[data-band="steel"] .breadcrumb a, [data-band="steel"] .breadcrumb li + li::before { color: var(--on-dark-2); }
[data-band="deep"] .breadcrumb [aria-current], [data-band="steel"] .breadcrumb [aria-current] { color: var(--on-dark); }

.hero-meta {
  margin: var(--space-16) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
}
.hero-meta > div { border-top: 1px solid var(--rule); padding-top: var(--space-5); }
[data-band="deep"] .hero-meta > div, [data-band="steel"] .hero-meta > div { border-top-color: var(--rule-dark); }
.hero-meta dt { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2); }
[data-band="deep"] .hero-meta dt, [data-band="steel"] .hero-meta dt { color: var(--on-dark-2); }
.hero-meta dd { margin: var(--space-3) 0 0; font-size: 1rem; font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.35; }

.page-hero-figure { margin: var(--space-16) 0 0; padding-inline: var(--page-pad); }
.page-hero-figure img { width: 100%; height: clamp(280px, 46vh, 520px); object-fit: cover;
  border-radius: var(--r-panel); }

@media (max-width: 860px) {
  .hero-meta { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  .page-hero { padding-block: calc(var(--header-h) + var(--space-10)) var(--space-10); }
}

/* --- prosa -------------------------------------------------------------- */
.prose h3 { margin-top: var(--space-8); margin-bottom: var(--space-3); }
.prose ul, .prose ol { margin: var(--space-5) 0; padding-left: var(--space-6); }
.prose li { margin-bottom: var(--space-2); max-width: 62ch; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule-strong); }
[data-band="deep"] .faq, [data-band="steel"] .faq { border-top-color: var(--rule-dark-strong); }
.faq details { border-bottom: 1px solid var(--rule); }
[data-band="deep"] .faq details, [data-band="steel"] .faq details { border-bottom-color: var(--rule-dark); }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--space-5) var(--space-12) var(--space-5) 0;
  position: relative; font-size: 1.05rem; font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before {
  content: ''; position: absolute; background: var(--brass-text);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.faq summary::after { right: 4px; top: calc(var(--space-5) + 0.62em); width: 15px; height: 2px; }
.faq summary::before { right: 10.5px; top: calc(var(--space-5) + 0.62em - 6.5px); width: 2px; height: 15px; }
.faq details[open] summary::before { opacity: 0; transform: rotate(90deg); }
[data-band="deep"] .faq summary::after, [data-band="deep"] .faq summary::before,
[data-band="steel"] .faq summary::after, [data-band="steel"] .faq summary::before { background: var(--brass-light); }
.faq-body { padding: 0 var(--space-12) var(--space-6) 0; color: var(--ink-2); }
[data-band="deep"] .faq-body, [data-band="steel"] .faq-body { color: var(--on-dark-2); }
.faq-body p { margin-bottom: var(--space-4); max-width: 62ch; }
.faq-body p:last-child { margin-bottom: 0; }